Merge branch 'main' into feat-steps

CONTRIBUTING.md

@@ -162,6 +162,12 @@ npx jest -c jest.motion.config.js src/flashbar
 npx jest -c jest.build-tools.config.js build-tools/stylelint
 ```
 
+Note: when running jest directly you may see errors about `--experimental-vm-modules`, to fix this you can set this NodeJS flag as follows:
+
+```
+export NODE_OPTIONS="$NODE_OPTIONS --experimental-vm-modules"
+```
+
 ### Run visual regression tests
 
 Visual regression tests for the permutation pages are automatically run when opening a pull request in GitHub.

build-tools/tasks/integ.js

@@ -14,7 +14,10 @@ module.exports = task('test:integ', async () => {
   await waitOn({ resources: ['http://localhost:8080'] });
 
   const files = glob.sync('src/**/__integ__/**/*.test.ts');
-  await execa('jest', ['-c', 'jest.integ.config.js', ...files], { stdio: 'inherit' });
+  await execa('jest', ['-c', 'jest.integ.config.js', ...files], {
+    stdio: 'inherit',
+    env: { ...process.env, NODE_OPTIONS: '--experimental-vm-modules' },
+  });
 
   devServer.cancel();
 });

build-tools/tasks/motion.js

@@ -14,7 +14,10 @@ module.exports = task('test:motion', async () => {
   await waitOn({ resources: ['http://localhost:8080'] });
 
   const files = glob.sync('src/**/__motion__/**/*.test.ts');
-  await execa('jest', ['-c', 'jest.motion.config.js', ...files], { stdio: 'inherit' });
+  await execa('jest', ['-c', 'jest.motion.config.js', ...files], {
+    stdio: 'inherit',
+    env: { ...process.env, NODE_OPTIONS: '--experimental-vm-modules' },
+  });
 
   devServer.cancel();
 });

build-tools/tasks/styles.js

@@ -74,7 +74,6 @@ function stylesTask(theme) {
       variablesMap,
       scssDir: workspace.sourcePath,
       componentsOutputDir: theme.outputPath,
-      skip: designTokensOutputDir ? [] : ['design-tokens'],
       designTokensOutputDir,
       designTokensFileName: theme.designTokensOutput,
       descriptions,

package.json

@@ -138,7 +138,7 @@
     "ts-loader": "^9.2.6",
     "typescript": "^4.6.4",
     "wait-on": "^7.2.0",
-    "webpack": "^5.76.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.7.4"
   },

pages/app-layout/default.page.tsx

@@ -15,6 +15,10 @@ export default function () {
     <ScreenshotArea gutters={false}>
       <AppLayout
         ariaLabels={labels}
+        analyticsMetadata={{
+          flowType: 'home',
+          instanceIdentifier: 'demo-page',
+        }}
         breadcrumbs={<Breadcrumbs />}
         navigation={<Navigation />}
         tools={<Tools>{toolsContent.long}</Tools>}

pages/app-layout/multi-layout-iframe.page.tsx

@@ -7,9 +7,9 @@ import Header from '~components/header';
 import ScreenreaderOnly from '~components/internal/components/screenreader-only';
 import SpaceBetween from '~components/space-between';
 
+import { IframeWrapper } from '../utils/iframe-wrapper';
 import ScreenshotArea from '../utils/screenshot-area';
 import { Breadcrumbs, Containers, Navigation, Tools } from './utils/content-blocks';
-import { IframeWrapper } from './utils/iframe-wrapper';
 import labels from './utils/labels';
 import * as toolsContent from './utils/tools-content';
 

pages/app-layout/runtime-drawers.page.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 
 import {
   AppLayout,
@@ -35,6 +35,7 @@ export default function WithDrawers() {
   const hasTools = urlParams.hasTools ?? false;
   const hasDrawers = urlParams.hasDrawers ?? true;
   const [isToolsOpen, setIsToolsOpen] = useState(false);
+  const appLayoutRef = useRef<AppLayoutProps.Ref>(null);
 
   const drawersProps: Pick<AppLayoutProps, 'activeDrawerId' | 'onDrawerChange' | 'drawers'> | null = !hasDrawers
     ? null
@@ -64,6 +65,7 @@ export default function WithDrawers() {
     <AppLayout
       ariaLabels={appLayoutLabels}
       breadcrumbs={<Breadcrumbs />}
+      ref={appLayoutRef}
       content={
         <ContentLayout
           disableOverlap={true}
@@ -79,6 +81,7 @@ export default function WithDrawers() {
                     onFollow={() => {
                       setHelpPathSlug('header');
                       setIsToolsOpen(true);
+                      appLayoutRef.current?.focusToolsClose();
                     }}
                   >
                     Info

pages/autosuggest/events.page.tsx

@@ -59,6 +59,7 @@ export default function AutosuggestEventsPage() {
             appendLog('onChange');
             setValue(event.detail.value);
           }}
+          onSelect={event => appendLog(`onSelect: ${event.detail.value}`)}
           onBlur={() => appendLog('onBlur')}
           onFocus={() => appendLog('onFocus')}
           enteredTextLabel={enteredTextLabel}

pages/badge.page.tsx

@@ -10,7 +10,17 @@ import ScreenshotArea from './utils/screenshot-area';
 
 const permutations = createPermutations<BadgeProps>([
   {
-    color: ['blue', 'grey', 'green', 'red'],
+    color: [
+      'blue',
+      'grey',
+      'green',
+      'red',
+      'severity-critical',
+      'severity-high',
+      'severity-medium',
+      'severity-low',
+      'severity-neutral',
+    ],
     children: [
       'ABC',
       'Badge With A Very Long Text',

pages/breadcrumb-group/responsive.page.tsx

@@ -0,0 +1,75 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import BreadcrumbGroup from '~components/breadcrumb-group';
+import SpaceBetween from '~components/space-between';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+let counter = 0;
+
+export default function ResponsiveBreadcrumbsPage() {
+  return (
+    <ScreenshotArea disableAnimations={true}>
+      <article>
+        <Box padding="xl">
+          <SpaceBetween size="xxl">
+            <h1>Responsive breadcrumbs</h1>
+            <ResponsiveBreadcrumbs
+              widths={[900, 800, 700, 600, 500, 400, 300, 200]}
+              items={[
+                'A',
+                'Longer breadrcumb',
+                'ABC',
+                'Another even longer breadcrumb',
+                'ABCDEF',
+                'ABCDEFGHIJsjbdkasbdhjabsjdhasjhdabsjd',
+              ]}
+            />
+            <ResponsiveBreadcrumbs widths={[150]} items={['Small', 'Small', 'Small', 'Small', 'Small']} />
+            <ResponsiveBreadcrumbs
+              widths={[150]}
+              items={[
+                'Large breadcrumb',
+                'Large breadcrumb',
+                'Large breadcrumb',
+                'Large breadcrumb',
+                'Large breadcrumb',
+              ]}
+            />
+            <ResponsiveBreadcrumbs widths={[100]} items={['Small', 'Small']} />
+            <ResponsiveBreadcrumbs widths={[100]} items={['Large breadcrumb', 'Large breadcrumb']} />
+            <ResponsiveBreadcrumbs widths={[100]} items={['Large breadcrumb', 'Small']} />
+            <ResponsiveBreadcrumbs widths={[30]} items={['Small']} />
+            <ResponsiveBreadcrumbs widths={[30]} items={['Large breadcrumb']} />
+          </SpaceBetween>
+        </Box>
+      </article>
+    </ScreenshotArea>
+  );
+}
+
+interface ResponsiveBreadcrumbsProps {
+  items: Array<string>;
+  widths: Array<number>;
+}
+
+const ResponsiveBreadcrumbs = ({ items, widths }: ResponsiveBreadcrumbsProps) => {
+  const breadcrumbs = items.map(text => ({ text, href: `#` }));
+  return (
+    <SpaceBetween size="xxl">
+      {widths.map((width, key) => (
+        <div key={key} style={{ width, borderInlineEnd: '2px solid blue' }}>
+          <BreadcrumbGroup
+            key={key}
+            ariaLabel={`label - ${counter++}`}
+            expandAriaLabel="Show path for long text"
+            items={breadcrumbs}
+          />
+        </div>
+      ))}
+    </SpaceBetween>
+  );
+};

pages/breadcrumb-group/scenarios.page.tsx

@@ -31,6 +31,7 @@ export default function ButtonDropdownPage() {
           <BreadcrumbGroup
             key={index}
             ariaLabel={'Navigation' + index}
+            data-testid={`breadcrumbs-${index}`}
             expandAriaLabel="Show path"
             items={testcase.map((text, i) => ({ text, href: `#item-${index}-${i}` }))}
           />

pages/button-dropdown/main-action.page.tsx

@@ -0,0 +1,24 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+
+import ButtonDropdown from '~components/button-dropdown';
+
+export default function ButtonDropdownPage() {
+  return (
+    <>
+      <h1>Button dropdown with main action</h1>
+      <ButtonDropdown
+        items={[
+          {
+            text: 'Launch instance from template',
+            id: 'launch-instance-from-template',
+          },
+        ]}
+        mainAction={{ text: 'Launch instance' }}
+        ariaLabel="More launch options"
+        variant="primary"
+      />
+    </>
+  );
+}

pages/button-dropdown/permutations-main-action.page.tsx

@@ -32,6 +32,7 @@ const permutations = createPermutations<ButtonDropdownProps>([
       { ...launchInstanceItem },
       { ...launchInstanceItem, disabled: true },
       { ...launchInstanceItem, loading: true, loadingText: 'Loading' },
+      { iconName: 'add-plus', ariaLabel: 'Add resource' },
     ],
     items: [
       [
@@ -42,6 +43,7 @@ const permutations = createPermutations<ButtonDropdownProps>([
     disabled: [false, true],
     loading: [false, true],
     variant: ['primary', 'normal'],
+    children: ['Trigger', null],
   },
   {
     mainAction: [{ ...viewInstancesItem }, { ...viewInstancesItem, disabled: true }],

pages/copy-to-clipboard/simple.page.tsx

@@ -60,6 +60,18 @@ export default function DateInputScenario() {
             copySuccessText="Lorem ipsum sentence copied"
             copyErrorText="Lorem ipsum sentence failed to copy"
           />
+
+          <div style={{ width: '150px' }}>
+            <div style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
+              <CopyToClipboard
+                variant="inline"
+                copyButtonAriaLabel="Copy lorem ipsum sentence"
+                textToCopy="Relatively long text that we don't want to wrap"
+                copySuccessText="Lorem ipsum sentence copied"
+                copyErrorText="Lorem ipsum sentence failed to copy"
+              />
+            </div>
+          </div>
         </SpaceBetween>
       </Box>
     </ScreenshotArea>

pages/dropdown/expandable-iframe.page.tsx

@@ -0,0 +1,25 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import AppContext from '../app/app-context';
+import { IframeWrapper } from '../utils/iframe-wrapper';
+import ScreenshotArea from '../utils/screenshot-area';
+import { Configurator, DropdownExpandableContext, DropdownsDemo } from './expandable.page';
+
+export default function () {
+  const {
+    urlParams: { componentType = 'Autosuggest', expandToViewport = true },
+    setUrlParams,
+  } = useContext(AppContext as DropdownExpandableContext);
+  return (
+    <ScreenshotArea>
+      <h1>Expandable dropdown scenarios inside iframe</h1>
+      <Configurator componentType={componentType} expandToViewport={expandToViewport} onChange={setUrlParams} />
+      <IframeWrapper
+        id="expandable-dropdowns-iframe"
+        AppComponent={() => <DropdownsDemo componentType={componentType} expandToViewport={expandToViewport} />}
+      />
+    </ScreenshotArea>
+  );
+}