feat(text-link): added current intent

adevinta · Sep 14, 2023 · a1e61a2 · a1e61a2
1 parent 9ea534e
commit a1e61a2
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 14 deletions.
diff --git a/packages/components/text-link/src/TextLink.doc.mdx b/packages/components/text-link/src/TextLink.doc.mdx
@@ -45,6 +45,12 @@ Simply use `Tailwindcss` to set a difference size if necessary.
 
 ### Intents
 
+By default, `TextLink` will inherit the color of the current font.
+
+<Canvas of={stories.CurrentIntent} />
+
+You can also manually set the `intent` prop when you need a specific color instead.
+
 <Canvas of={stories.Intents} />
 
 ## Advanced Usage

diff --git a/packages/components/text-link/src/TextLink.stories.tsx b/packages/components/text-link/src/TextLink.stories.tsx
@@ -33,25 +33,14 @@ export const Sizes: StoryFn = _args => {
       {['text-caption', 'text-body-1', 'text-headline-1'].map(textSize => {
         return (
           <p className={textSize}>
-            Have you head about{' '}
+            Have you heard about{' '}
             <TextLink href="/?path=/docs/getting-started--docs" target="_blank">
               Spark
             </TextLink>{' '}
             ? It’s awesome .
           </p>
         )
       })}
-      <p className="text-body-1">
-        Have you head about{' '}
-        <TextLink
-          href="/?path=/docs/getting-started--docs"
-          target="_blank"
-          className="text-display-1"
-        >
-          Spark
-        </TextLink>{' '}
-        ? It’s awesome .
-      </p>
     </div>
   )
 }
@@ -68,6 +57,44 @@ const intents: TextLinkProps['intent'][] = [
   'neutral',
 ]
 
+export const CurrentIntent: StoryFn = _args => {
+  const cardColors = [
+    'bg-main text-on-main',
+    'bg-main-container text-on-main-container',
+    'bg-support text-on-support',
+    'bg-support-container text-on-support-container',
+    'bg-accent text-on-accent',
+    'bg-accent-container text-on-accent-container',
+    'bg-basic text-on-basic',
+    'bg-basic-container text-on-basic-container',
+    'bg-success text-on-success',
+    'bg-success-container text-on-success-container',
+    'bg-alert text-on-alert',
+    'bg-alert-container text-on-alert-container',
+    'bg-danger text-on-danger',
+    'bg-danger-container text-on-danger-container',
+    'bg-info text-on-info',
+    'bg-info-container text-on-info-container',
+    'bg-neutral text-on-neutral',
+    'bg-neutral-container text-on-neutral-container',
+    'bg-surface text-on-surface',
+  ]
+
+  return (
+    <div className="flex flex-row flex-wrap">
+      {cardColors.map(colorStyles => (
+        <p className={'inline p-md ' + colorStyles}>
+          Current{' '}
+          <TextLink href="https://en.wikipedia.org/wiki/Kitten" target="_blank">
+            link
+          </TextLink>
+          .
+        </p>
+      ))}
+    </div>
+  )
+}
+
 export const Intents: StoryFn = _args => {
   return (
     <div className="flex flex-col gap-md">

diff --git a/packages/components/text-link/src/TextLink.tsx b/packages/components/text-link/src/TextLink.tsx
@@ -11,6 +11,7 @@ const textLinkStyles = cva(
   {
     variants: {
       intent: {
+        current: 'text-current hover:opacity-dim-1',
         main: 'text-main hover:text-main-hovered',
         support: 'text-support hover:text-support-hovered',
         accent: 'text-accent hover:text-accent-hovered',
@@ -23,15 +24,15 @@ const textLinkStyles = cva(
       },
     },
     defaultVariants: {
-      intent: 'basic',
+      intent: 'current',
     },
   }
 )
 
 export type StylesProps = VariantProps<typeof textLinkStyles>
 
 export const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
-  ({ children, className, intent = 'basic', ...props }, ref) => {
+  ({ children, className, intent = 'current', ...props }, ref) => {
     return (
       <a className={textLinkStyles({ className, intent })} ref={ref} {...props}>
         {children}