chore: merge main

cloudscape-design · Aug 7, 2023 · 8f3073c · 8f3073c
2 parents 30f539c + 5fb7188
commit 8f3073c
Show file tree

Hide file tree

Showing 54 changed files with 1,012 additions and 930 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -13,8 +13,74 @@ permissions:
   contents: read
 
 jobs:
+  unitTest:
+    name: Components unit tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install --force
+      - run: npm run build
+      - run: npm run test:unit
+
+  integTest:
+    name: Components integ tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install --force
+      - run: npm run build
+      - run: npm run test:integ
+
+  a11yTest:
+    name: Components a11y tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install --force
+      - run: npm run build
+      - run: npm run test:a11y
+
   release:
-    uses: cloudscape-design/.github/.github/workflows/release.yml@main
-    secrets: inherit
-    with:
-      publish-packages: lib/components,lib/design-tokens,lib/style-dictionary,lib/components-themeable,lib/dev-pages,lib/components-definitions
+    concurrency: release-${{ github.ref }}
+    runs-on: ubuntu-latest
+    needs:
+      - unitTest
+      - integTest
+      - a11yTest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install --force
+      - run: npm run build
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          role-to-assume: ${{ secrets.AWS_CODEARTIFACT_ROLE }}
+          aws-region: us-west-2
+      - name: Login and configure codeartifact
+        env:
+          CODE_ARTIFACT_REPO: ${{ startsWith(github.ref_name, 'dev-v3-') && format('AwsUI-Artifacts-{0}', github.ref_name) || 'github-artifacts' }}
+        run: |
+          echo Logging into repository $CODE_ARTIFACT_REPO
+          aws codeartifact login --tool npm --repository $CODE_ARTIFACT_REPO --domain awsui --domain-owner ${{ secrets.AWS_ACCOUNT_ID }} --region us-west-2 --namespace @cloudscape-design
+
+      - name: Release package to private CodeArtifact
+        uses: cloudscape-design/.github/.github/actions/release-package@main
+        with:
+          publish-packages: lib/components,lib/design-tokens,lib/style-dictionary,lib/components-themeable,lib/dev-pages,lib/components-definitions
diff --git a/pages/alert/simple.page.tsx b/pages/alert/simple.page.tsx
@@ -1,7 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
-import Alert from '~components/alert';
+import React, { useEffect, useRef, useState } from 'react';
+import Alert, { AlertProps } from '~components/alert';
+import Button from '~components/button';
 import Link from '~components/link';
 import ScreenshotArea from '../utils/screenshot-area';
 import SpaceBetween from '~components/space-between';
@@ -12,10 +13,19 @@ import messages from '~components/i18n/messages/all.en';
 
 export default function AlertScenario() {
   const [visible, setVisible] = useState(true);
+  const alertRef = useRef<AlertProps.Ref>(null);
+
+  useEffect(() => {
+    if (visible) {
+      alertRef.current?.focus();
+    }
+  }, [visible]);
+
   return (
     <I18nProvider messages={[messages]} locale="en">
       <article>
         <h1>Simple alert</h1>
+        <Button onClick={() => setVisible(!visible)}>Toggle visibility</Button>
         <ScreenshotArea>
           <SpaceBetween size="s">
             <div className={styles['alert-container']}>
@@ -27,6 +37,7 @@ export default function AlertScenario() {
                 buttonText="Button text"
                 type="warning"
                 onDismiss={() => setVisible(false)}
+                ref={alertRef}
               >
                 Content
                 <br />

diff --git a/pages/app-layout/full-page-table-with-variable-header-height.page.tsx b/pages/app-layout/full-page-table-with-variable-header-height.page.tsx
@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import AppLayout from '~components/app-layout';
+import labels from './utils/labels';
+import Table from '~components/table';
+import { generateItems, Instance } from '../table/generate-data';
+import { columnsConfig } from '../table/shared-configs';
+import ExpandableSection from '~components/expandable-section';
+import Header from '~components/header';
+
+const items = generateItems(20);
+
+export default function () {
+  return (
+    <AppLayout
+      ariaLabels={labels}
+      contentType="table"
+      navigationHide={true}
+      content={
+        <Table<Instance>
+          header={
+            <>
+              <Header variant="awsui-h1-sticky">Header that changes size when scrolling</Header>
+              <ExpandableSection headerText="Click to expand header area">
+                <div style={{ height: '300px' }}>Content</div>
+              </ExpandableSection>
+            </>
+          }
+          stickyHeader={true}
+          variant="full-page"
+          columnDefinitions={columnsConfig}
+          items={items}
+        />
+      }
+    />
+  );
+}
diff --git a/pages/app-layout/with-sticky-columns.page.tsx b/pages/app-layout/with-sticky-columns.page.tsx
@@ -66,6 +66,7 @@ export default function () {
         <Table
           resizableColumns={true}
           variant="full-page"
+          selectionType="multi"
           stickyHeader={true}
           footer={
             <Box textAlign="center">

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",