Size styling removed from Icon, changed sizing from tshirt to typography

cultureamp · Jan 23, 2025 · 27365ed · 27365ed
1 parent 0560fb6
commit 27365ed
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 56 deletions.
diff --git a/packages/components/src/Link/Link.module.css b/packages/components/src/Link/Link.module.css
@@ -37,9 +37,8 @@
 .icon > * {
   vertical-align: middle;
   margin-bottom: 3px;
-  --link-line-height: inherit;
-  --link-font-size: inherit;
-  --link-font-weight: inherit;
+  font-size: var(--link-line-height, 1em);
+  line-height: var(--link-font-size, 1em);
 }
 
 .primary {

diff --git a/packages/components/src/Link/Link.tsx b/packages/components/src/Link/Link.tsx
@@ -9,7 +9,7 @@ export type LinkProps = UnderlinedLink | IconLink
 
 type BaseLinkProps = {
   variant: 'primary' | 'secondary'
-  size: 'extra-small' | 'small' | 'medium' | 'large'
+  size?: 'extra-small' | 'small' | 'body' | 'intro-lede'
   iconPosition?: 'start' | 'end'
   isReversed: boolean
   isInline: boolean
@@ -33,10 +33,10 @@ export const Link = forwardRef(
     {
       children,
       variant = 'primary',
-      size = 'medium',
+      size = 'body',
       icon,
       iconPosition = 'start',
-      isInline = true,
+      isInline = false,
       isDisabled,
       className,
       isReversed,
@@ -55,10 +55,9 @@ export const Link = forwardRef(
         className={mergeClassNames(
           styles.link,
           isDisabled && styles.isDisabled,
-          styles[size],
+          isInline ? styles.isInline : styles[size],
           isReversedVariant ? styles.reversed : styles[variant],
           className,
-          isInline && styles.isInline,
         )}
         isDisabled={isDisabled}
         {...otherProps}
@@ -68,7 +67,6 @@ export const Link = forwardRef(
             icon={icon}
             iconPosition={iconPosition}
             underlined={underlined}
-            size={size}
             isInline={isInline}
           >
             {childIsFunction ? children(racStateProps) : children}

diff --git a/packages/components/src/Link/_docs/Link.doc.stories.tsx b/packages/components/src/Link/_docs/Link.doc.stories.tsx
@@ -11,7 +11,6 @@ const meta = {
     children: 'Label',
     href: 'https://www.google.com',
     variant: 'primary',
-    size: 'large',
     icon: <Icon name="add" isPresentational />,
     underlined: true,
     isReversed: false,
@@ -30,9 +29,9 @@ export const WithText: Story = {
     <Text variant="extra-small">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eaque amet atque. Dolores
       repellendus eligendi <span style={{ textDecoration: 'underline' }}> totam.</span>{' '}
-      <Link {...props} size="extra-small" /> Mollitia vero asperiores assumenda, odit ratione id
-      perspiciatis suscipit molestias quas facere, commodi saepe! Quisquam, quidem quas a quos quae
-      quia quidem, quod, voluptates, dolorum quibusdam. Quisquam, quidem quas a quos quae
+      <Link {...props} /> Mollitia vero asperiores assumenda, odit ratione id perspiciatis suscipit
+      molestias quas facere, commodi saepe! Quisquam, quidem quas a quos quae quia quidem, quod,
+      voluptates, dolorum quibusdam. Quisquam, quidem quas a quos quae
     </Text>
   ),
 }
@@ -49,11 +48,11 @@ export const Sizes: Story = {
         Small
       </Link>
       <br />
-      <Link {...otherArgs} size="medium">
+      <Link {...otherArgs} size="body">
         Medium
       </Link>
       <br />
-      <Link {...otherArgs} size="large">
+      <Link {...otherArgs} size="intro-lede">
         Large
       </Link>
     </>

diff --git a/packages/components/src/Link/subcomponents/LinkContent.tsx b/packages/components/src/Link/subcomponents/LinkContent.tsx
@@ -8,60 +8,26 @@ export type LinkContentProps = {
   iconPosition?: string
   underlined: boolean
   isInline: boolean
-  size: string
-}
-
-const LinkIcon = ({
-  size,
-  isInline,
-  icon,
-}: {
-  size: string
-  isInline: boolean
-  icon: JSX.Element
-}): JSX.Element => {
-  return (
-    <span
-      className={mergeClassNames(
-        styles.icon,
-        styles[size],
-        isInline && styles.isInline,
-        styles.negativeVerticalMargin,
-      )}
-    >
-      {icon}
-    </span>
-  )
 }
 
 export const LinkContent = ({
   children,
   icon,
   iconPosition,
   underlined,
-  size,
   isInline,
 }: LinkContentProps): JSX.Element => {
   return (
-    <span
-      className={mergeClassNames(
-        styles.link,
-        underlined && styles.isUnderlined,
-        styles[size],
-        isInline && styles.isInline,
+    <span className={mergeClassNames(styles.link, underlined && styles.isUnderlined)}>
+      {icon && iconPosition === 'start' && (
+        <span className={mergeClassNames(styles.icon)}>{icon}</span>
       )}
-    >
-      {icon && iconPosition === 'start' && <LinkIcon size={size} isInline={isInline} icon={icon} />}
-      <span
-        className={mergeClassNames(
-          styles[size],
-          isInline && styles.isInline,
-          styles.negativeVerticalMargin,
-        )}
-      >
+      <span className={mergeClassNames(isInline && styles.isInline, styles.negativeVerticalMargin)}>
         {children}
       </span>
-      {icon && iconPosition === 'end' && <LinkIcon size={size} isInline={isInline} icon={icon} />}
+      {icon && iconPosition === 'end' && (
+        <span className={mergeClassNames(styles.icon)}>{icon}</span>
+      )}
     </span>
   )
 }