Adjust links

add optional link icon update story
miljodir · Dec 4, 2024 · 02b1c12 · 02b1c12
1 parent 2e041f7
commit 02b1c12
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/packages/css/src/colors.css b/packages/css/src/colors.css
@@ -1,5 +1,6 @@
 :root {
   --mdPrimaryColor: #005e5d;
+  --mdPrimaryColor160: #003b3a;
   --mdPrimaryColor120: #005251;
   --mdPrimaryColor80: #337e7d;
   --mdPrimaryColor30: #b2cece;

diff --git a/packages/css/src/link/link.css b/packages/css/src/link/link.css
@@ -1,4 +1,7 @@
 .md-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
   color: var(--mdPrimaryColor);
   background-color: transparent;
   border: none;
@@ -7,12 +10,28 @@
   font-weight: 500;
   font-size: 1rem;
   text-decoration: underline;
+  padding: 0.125rem 0.0625rem;
+}
+
+.md-link__icon {
+  height: 1rem;
+  width: 1rem;
 }
 
 .md-link:hover {
   color: var(--mdPrimaryColor120);
+  text-decoration-thickness: 0.0938rem;
+  text-decoration-color: var(--mdPrimaryColor);
 }
 
 .md-link:focus {
-  outline: 2px solid var(--mdPrimaryColor80);
+  outline: 1px solid var(--mdPrimaryColor80);
+}
+
+.md-link:active {
+  background-color: var(--mdPrimaryColor10);
+}
+
+.md-link:visited {
+  color: var(--mdPrimaryColor160);
 }
diff --git a/packages/react/src/link/MdLink.tsx b/packages/react/src/link/MdLink.tsx
@@ -4,16 +4,18 @@ import React, { forwardRef } from 'react';
 export type MdLinkProps = {
   children?: string | React.ReactNode;
   href?: string;
+  icon?: React.ReactNode;
   onClick?(_e: React.MouseEvent): void;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement> &
   React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 const MdLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, MdLinkProps>(
-  ({ href, children, onClick, ...otherProps }, ref) => {
+  ({ href, children, icon, onClick, ...otherProps }, ref) => {
     const classNames = classnames('md-link', otherProps.className);
     return href ? (
       <a href={href} {...otherProps} className={classNames} ref={ref as React.ForwardedRef<HTMLAnchorElement>}>
         {children}
+        {icon && <div className="md-link__icon">{icon}</div>}
       </a>
     ) : (
       <button
@@ -24,6 +26,7 @@ const MdLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, MdLinkProps>(
         ref={ref as React.ForwardedRef<HTMLButtonElement>}
       >
         {children}
+        {icon && <div className="md-link__icon">{icon}</div>}
       </button>
     );
   },

diff --git a/stories/Link.stories.tsx b/stories/Link.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import MdLink from '../packages/react/src/link/MdLink';
+import MdRedirectIcon from '../packages/react/src/icons/MdRedirectIcon';
 
 export default {
   title: 'Components/Link',
@@ -31,6 +32,14 @@ export default {
       },
       control: 'text',
     },
+    icon: {
+      description: 'Icon after link text',
+      table: {
+        type: {
+          summary: 'DomElement | image | ReactNode',
+        },
+      },
+    },
     onClick: {
       description: 'Callback for controlling onClick along side href',
       table: {
@@ -61,8 +70,22 @@ const Template = (args: LinkArgs) => {
   );
 };
 
+const TemplateWithIcon = (args: LinkArgs) => {
+  return (
+    <MdLink onClick={clickHandler} href={args.href} icon={<MdRedirectIcon />}>
+      {args.text}
+    </MdLink>
+  );
+};
+
 export const Link = Template.bind({});
 Link.args = {
   text: 'This is a link',
   href: '#',
 };
+
+export const LinkWithIcon = TemplateWithIcon.bind({});
+LinkWithIcon.args = {
+  text: 'This is a link',
+  href: '#',
+};