feat: Update primary link styling and usage (#1405)

cloudscape-design · Aug 7, 2023 · 715264b · 715264b
1 parent 0a43902
commit 715264b
Show file tree

Hide file tree

Showing 26 changed files with 382 additions and 375 deletions.
diff --git a/pages/cards/hooks.page.tsx b/pages/cards/hooks.page.tsx
@@ -14,7 +14,11 @@ import { EmptyState, getMatchesCountText, paginationLabels, pageSizeOptions } fr
 import ScreenshotArea from '../utils/screenshot-area';
 
 export const cardDefinition: CardsProps.CardDefinition<Instance> = {
-  header: item => <Link fontSize="heading-m">{item.id}</Link>,
+  header: item => (
+    <Link fontSize="heading-m" href="#">
+      {item.id}
+    </Link>
+  ),
   sections: [
     {
       id: 'type',

diff --git a/pages/cards/permutations.page.tsx b/pages/cards/permutations.page.tsx
@@ -9,6 +9,7 @@ import Cards, { CardsProps } from '~components/cards/index';
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
+import { Link } from '~components';
 
 interface Item {
   number: number;
@@ -27,7 +28,7 @@ function createSimpleItems(count: number) {
 }
 
 const cardDefinition: CardsProps.CardDefinition<Item> = {
-  header: item => item.text,
+  header: item => (item.number === 2 ? <Link href="#">{item.text}</Link> : item.text),
   sections: [
     {
       id: 'description',

diff --git a/pages/help-panel/permutations.page.tsx b/pages/help-panel/permutations.page.tsx
@@ -6,6 +6,7 @@ import Box from '~components/box';
 import Icon from '~components/icon';
 import ScreenshotArea from '../utils/screenshot-area';
 import styles from './styles.scss';
+import { Link } from '~components';
 
 const mainContent = (
   <div>
@@ -97,7 +98,8 @@ const mainContent = (
         <ul>
           <li>This is a nested list.</li>
           <li>
-            <a>This is a link</a>. Mi proin sed libero enim sed faucibus turpis.
+            <a>This is a link</a>. And a <Link href="#">Cloudscape Link</Link>. Mi proin sed libero enim sed faucibus
+            turpis.
           </li>
           <li>
             <pre>

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -392,9 +392,8 @@ Object {
   "color-text-link-button-underline": "currentColor",
   "color-text-link-button-underline-hover": "currentColor",
   "color-text-link-default": "#0073bb",
-  "color-text-link-hover": "#0073bb",
+  "color-text-link-hover": "#0a4a74",
   "color-text-link-inverted-hover": "#fafafa",
-  "color-text-link-primary-underline": "transparent",
   "color-text-notification-default": "#fafafa",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#16191f",
@@ -450,9 +449,6 @@ Object {
   "font-heading-xs-weight": "400",
   "font-link-button-letter-spacing": "normal",
   "font-link-button-weight": "400",
-  "font-link-primary-decoration": "none",
-  "font-link-primary-letter-spacing": "0.005em",
-  "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "auto",
@@ -1003,9 +999,8 @@ Object {
   "color-text-link-button-underline": "currentColor",
   "color-text-link-button-underline-hover": "currentColor",
   "color-text-link-default": "#44b9d6",
-  "color-text-link-hover": "#44b9d6",
+  "color-text-link-hover": "#99cbe4",
   "color-text-link-inverted-hover": "#fafafa",
-  "color-text-link-primary-underline": "transparent",
   "color-text-notification-default": "#fafafa",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#16191f",
@@ -1061,9 +1056,6 @@ Object {
   "font-heading-xs-weight": "400",
   "font-link-button-letter-spacing": "normal",
   "font-link-button-weight": "400",
-  "font-link-primary-decoration": "none",
-  "font-link-primary-letter-spacing": "0.005em",
-  "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "auto",
@@ -1614,9 +1606,8 @@ Object {
   "color-text-link-button-underline": "currentColor",
   "color-text-link-button-underline-hover": "currentColor",
   "color-text-link-default": "#0073bb",
-  "color-text-link-hover": "#0073bb",
+  "color-text-link-hover": "#0a4a74",
   "color-text-link-inverted-hover": "#fafafa",
-  "color-text-link-primary-underline": "transparent",
   "color-text-notification-default": "#fafafa",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#16191f",
@@ -1672,9 +1663,6 @@ Object {
   "font-heading-xs-weight": "400",
   "font-link-button-letter-spacing": "normal",
   "font-link-button-weight": "400",
-  "font-link-primary-decoration": "none",
-  "font-link-primary-letter-spacing": "0.005em",
-  "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "auto",
@@ -2225,9 +2213,8 @@ Object {
   "color-text-link-button-underline": "currentColor",
   "color-text-link-button-underline-hover": "currentColor",
   "color-text-link-default": "#0073bb",
-  "color-text-link-hover": "#0073bb",
+  "color-text-link-hover": "#0a4a74",
   "color-text-link-inverted-hover": "#fafafa",
-  "color-text-link-primary-underline": "transparent",
   "color-text-notification-default": "#fafafa",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#16191f",
@@ -2283,9 +2270,6 @@ Object {
   "font-heading-xs-weight": "400",
   "font-link-button-letter-spacing": "normal",
   "font-link-button-weight": "400",
-  "font-link-primary-decoration": "none",
-  "font-link-primary-letter-spacing": "0.005em",
-  "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "auto",
@@ -2838,7 +2822,6 @@ Object {
   "color-text-link-default": "#0972d3",
   "color-text-link-hover": "#033160",
   "color-text-link-inverted-hover": "#ffffff",
-  "color-text-link-primary-underline": "#0972d3",
   "color-text-notification-default": "#fbfbfb",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#000716",
@@ -2894,9 +2877,6 @@ Object {
   "font-heading-xs-weight": "700",
   "font-link-button-letter-spacing": "0.005em",
   "font-link-button-weight": "700",
-  "font-link-primary-decoration": "underline",
-  "font-link-primary-letter-spacing": "\\"inherit\\"",
-  "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "grayscale",
@@ -3449,7 +3429,6 @@ Object {
   "color-text-link-default": "#0972d3",
   "color-text-link-hover": "#033160",
   "color-text-link-inverted-hover": "#ffffff",
-  "color-text-link-primary-underline": "#0972d3",
   "color-text-notification-default": "#fbfbfb",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#000716",
@@ -3505,9 +3484,6 @@ Object {
   "font-heading-xs-weight": "700",
   "font-link-button-letter-spacing": "0.005em",
   "font-link-button-weight": "700",
-  "font-link-primary-decoration": "underline",
-  "font-link-primary-letter-spacing": "\\"inherit\\"",
-  "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "grayscale",
@@ -4060,7 +4036,6 @@ Object {
   "color-text-link-default": "#539fe5",
   "color-text-link-hover": "#89bdee",
   "color-text-link-inverted-hover": "#ffffff",
-  "color-text-link-primary-underline": "#539fe5",
   "color-text-notification-default": "#fbfbfb",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#000716",
@@ -4116,9 +4091,6 @@ Object {
   "font-heading-xs-weight": "700",
   "font-link-button-letter-spacing": "0.005em",
   "font-link-button-weight": "700",
-  "font-link-primary-decoration": "underline",
-  "font-link-primary-letter-spacing": "\\"inherit\\"",
-  "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "grayscale",
@@ -4671,7 +4643,6 @@ Object {
   "color-text-link-default": "#539fe5",
   "color-text-link-hover": "#89bdee",
   "color-text-link-inverted-hover": "#ffffff",
-  "color-text-link-primary-underline": "#539fe5",
   "color-text-notification-default": "#fbfbfb",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#000716",
@@ -4727,9 +4698,6 @@ Object {
   "font-heading-xs-weight": "700",
   "font-link-button-letter-spacing": "0.005em",
   "font-link-button-weight": "700",
-  "font-link-primary-decoration": "underline",
-  "font-link-primary-letter-spacing": "\\"inherit\\"",
-  "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "grayscale",

diff --git a/src/__tests__/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/__snapshots__/design-tokens.test.ts.snap
@@ -1815,8 +1815,8 @@ Object {
         "color-text-link-hover": Object {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": Object {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#99cbe4",
+            "light": "#0a4a74",
           },
         },
         "color-text-notification-default": Object {
@@ -3907,8 +3907,8 @@ Object {
         "color-text-link-hover": Object {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": Object {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#99cbe4",
+            "light": "#0a4a74",
           },
         },
         "color-text-notification-default": Object {
@@ -5999,8 +5999,8 @@ Object {
         "color-text-link-hover": Object {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": Object {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#99cbe4",
+            "light": "#0a4a74",
           },
         },
         "color-text-notification-default": Object {
@@ -8091,8 +8091,8 @@ Object {
         "color-text-link-hover": Object {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": Object {
-            "dark": "#44b9d6",
-            "light": "#44b9d6",
+            "dark": "#99cbe4",
+            "light": "#99cbe4",
           },
         },
         "color-text-notification-default": Object {
@@ -10183,8 +10183,8 @@ Object {
     "color-text-link-hover": Object {
       "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
       "$value": Object {
-        "dark": "#44b9d6",
-        "light": "#0073bb",
+        "dark": "#99cbe4",
+        "light": "#0a4a74",
       },
     },
     "color-text-notification-default": Object {

diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -8191,15 +8191,21 @@ For other options see the documentation for <a> tag's
       "type": "string",
     },
     Object {
-      "defaultValue": "'secondary'",
       "description": "Determines the visual style of the link as follows:
 - \`primary\` - Displays the link text with bold styling for sufficient contrast with surrounding text.
     Use this for links where the context doesn't imply interactivity such as
     \\"Learn more\\" links and links within paragraphs.
 - \`secondary\` - Does not provide any additional indicators for interactivity (except for an underline when the user hovers over or focuses the link).
     This can be used in cases where the interactivity is strongly implied by its context,
     such as in a table or a list of external links.
-- \`info\` - Use for \\"info\\" links that link to content in a help panel.",
+- \`info\` - Use for \\"info\\" links that link to content in a help panel.
+The default is \`secondary\`, except inside the following components where it defaults to \`primary\`:
+- Table
+- Cards
+- Alert
+- Popover
+- Help Panel (main \`content\` only)
+",
       "inlineType": Object {
         "name": "LinkProps.Variant",
         "type": "union",

diff --git a/src/alert/internal.tsx b/src/alert/internal.tsx
@@ -18,6 +18,7 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { SomeRequired } from '../internal/types';
 import { useInternalI18n } from '../i18n/context';
 import { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';
+import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 
 const typeToIcon: Record<AlertProps.Type, IconProps['name']> = {
   error: 'status-negative',
@@ -87,36 +88,38 @@ const InternalAlert = React.forwardRef(
         )}
         ref={mergedRef}
       >
-        <VisualContext contextName="alert">
-          <div className={clsx(styles.alert, styles[`type-${type}`], styles[`icon-size-${size}`])}>
-            <div className={styles['alert-mobile-block']}>
-              <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>
-                <div className={clsx(styles.icon, styles.text)} role="img" aria-label={statusIconAriaLabel}>
-                  <InternalIcon name={typeToIcon[type]} size={size} />
-                </div>
-                <div className={styles.body}>
-                  <div className={clsx(styles.message, styles.text)}>
-                    {header && <div className={styles.header}>{header}</div>}
-                    <div className={styles.content}>{children}</div>
+        <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>
+          <VisualContext contextName="alert">
+            <div className={clsx(styles.alert, styles[`type-${type}`], styles[`icon-size-${size}`])}>
+              <div className={styles['alert-mobile-block']}>
+                <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>
+                  <div className={clsx(styles.icon, styles.text)} role="img" aria-label={statusIconAriaLabel}>
+                    <InternalIcon name={typeToIcon[type]} size={size} />
+                  </div>
+                  <div className={styles.body}>
+                    <div className={clsx(styles.message, styles.text)}>
+                      {header && <div className={styles.header}>{header}</div>}
+                      <div className={styles.content}>{children}</div>
+                    </div>
                   </div>
                 </div>
+                {hasAction && <div className={styles.action}>{actionButton}</div>}
               </div>
-              {hasAction && <div className={styles.action}>{actionButton}</div>}
+              {dismissible && (
+                <div className={styles.dismiss}>
+                  <InternalButton
+                    className={styles['dismiss-button']}
+                    variant="icon"
+                    iconName="close"
+                    formAction="none"
+                    ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}
+                    onClick={() => fireNonCancelableEvent(onDismiss)}
+                  />
+                </div>
+              )}
             </div>
-            {dismissible && (
-              <div className={styles.dismiss}>
-                <InternalButton
-                  className={styles['dismiss-button']}
-                  variant="icon"
-                  iconName="close"
-                  formAction="none"
-                  ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}
-                  onClick={() => fireNonCancelableEvent(onDismiss)}
-                />
-              </div>
-            )}
-          </div>
-        </VisualContext>
+          </VisualContext>
+        </LinkDefaultVariantContext.Provider>
       </div>
     );
   }

diff --git a/src/breadcrumb-group/item/styles.scss b/src/breadcrumb-group/item/styles.scss
@@ -20,7 +20,7 @@
   }
 
   > .anchor {
-    @include styles.link-default;
+    @include styles.link-inline;
 
     @include focus-visible.when-visible {
       @include styles.link-focus;