chore: action card

pages/card/action-card-in-chat.page.tsx

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Card from '~components/internal/components/card';
+
+import { CardPage } from './common';
+
+export default function ButtonsScenario() {
+  const [isActive, setActive] = useState(false);
+  return (
+    <CardPage title="Action card: action in chat">
+      <Card header="Give EC2 access to S3" variant="action" active={isActive} onClick={() => setActive(true)}>
+        A more detailed description of the action.
+      </Card>
+    </CardPage>
+  );
+}

pages/card/action-card-in-list.page.tsx

@@ -0,0 +1,76 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Box from '~components/box';
+import Container from '~components/container';
+import Header from '~components/header';
+import Card from '~components/internal/components/card';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+const accounts = [
+  {
+    alias: 'Account alias',
+    id: '873423479685',
+    role: 'Dev',
+    email: '[email protected]',
+    lastLogin: '1 minute ago',
+  },
+  {
+    id: '63547903567',
+    role: 'ReadOnly',
+    email: '[email protected]',
+    lastLogin: '10 minute ago',
+  },
+  {
+    id: '583821526507',
+    role: 'Root',
+    lastLogin: '2 hours ago',
+  },
+  {
+    alias: 'acme-staging-infra',
+    id: '886694904548',
+    role: 'Admin',
+    email: '[email protected]',
+    lastLogin: '3 hours ago',
+  },
+  {
+    alias: 'acme-prod-monitoring',
+    id: '634308714948',
+    role: 'PowerUser',
+    email: '[email protected]',
+    lastLogin: '10 hours ago',
+  },
+];
+
+export default function ButtonsScenario() {
+  const [activeId, setActiveId] = useState<string>();
+  return (
+    <article>
+      <h1>Action card: list selection</h1>
+      <ScreenshotArea>
+        <div style={{ inlineSize: 550, marginInline: 'auto' }}>
+          <Container header={<Header variant="h2">Choose an active session</Header>}>
+            <ol style={{ display: 'flex', flexDirection: 'column', gap: 16, margin: 0, padding: 0 }}>
+              {accounts.map(({ alias, id, role, email, lastLogin }) => (
+                <li key={id}>
+                  <Card
+                    header={alias ? `${alias} (${id})` : `Account ID: ${id}`}
+                    description={[role, email].filter(Boolean).join('/')}
+                    key={id}
+                    variant="action"
+                    active={activeId === id}
+                    onClick={() => setActiveId(id)}
+                  >
+                    <Box color="text-body-secondary" fontSize="body-s">{`Logged in ${lastLogin}`}</Box>
+                  </Card>
+                </li>
+              ))}
+            </ol>
+          </Container>
+        </div>
+      </ScreenshotArea>
+    </article>
+  );
+}

pages/card/code-snippet.page.tsx

@@ -0,0 +1,42 @@
+// 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 CopyToClipboard from '~components/copy-to-clipboard';
+import Card from '~components/internal/components/card';
+
+import { CardPage } from './common';
+
+export default function ButtonsScenario() {
+  return (
+    <CardPage title="Code snippet">
+      <Card
+        header="Python"
+        actions={
+          <CopyToClipboard
+            variant="icon"
+            textToCopy="def lambda_handler(event, context):
+bucket = event['Records'][0]['s3']['bucket']['name']
+key = event['Records'][0]['s3']['object']['key']
+print(f'New file uploaded: {key} in bucket {bucket}')
+return {'statusCode': 200}"
+            copySuccessText="Code copied"
+            copyErrorText="Error while copying text"
+            copyButtonAriaLabel="Copy code"
+          />
+        }
+      >
+        <Box variant="code">
+          <pre style={{ backgroundColor: 'light-dark(#f8f8f8, #ffffff1a)', borderRadius: 8, margin: 0, padding: 8 }}>
+            {`def lambda_handler(event, context):
+  bucket = event['Records'][0]['s3']['bucket']['name']
+  key = event['Records'][0]['s3']['object']['key']
+  print(f'New file uploaded: {key} in bucket {bucket}')
+  return {'statusCode': 200}`}
+          </pre>
+        </Box>
+      </Card>
+    </CardPage>
+  );
+}

pages/card/common.tsx

@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ReactNode } from 'react';
+import React from 'react';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+export function CardPage({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <article>
+      <h1>{title}</h1>
+      <div style={{ maxWidth: 600 }}>
+        <ScreenshotArea>{children}</ScreenshotArea>
+      </div>
+    </article>
+  );
+}

pages/card/image-preview-with-custom-header.page.tsx

@@ -0,0 +1,58 @@
+// 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 ButtonGroup from '~components/button-group';
+import Card from '~components/internal/components/card';
+
+import image from '../container/images/16-9.png';
+import { CardPage } from './common';
+
+export default function ButtonsScenario() {
+  return (
+    <article>
+      <CardPage title="Image preview">
+        <Card
+          header={
+            <div style={{ inlineSize: '100%' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', inlineSize: '100%' }}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>image-title.jpg</div>
+                <ButtonGroup
+                  onItemClick={() => null}
+                  items={[
+                    {
+                      type: 'icon-button',
+                      id: 'download',
+                      iconName: 'download',
+                      text: 'Download',
+                    },
+                    {
+                      type: 'icon-button',
+                      id: 'expand',
+                      iconName: 'expand',
+                      text: 'Expand',
+                    },
+                  ]}
+                  variant={'icon'}
+                />
+              </div>
+              <Box color="text-body-secondary">Metadata about file - 4GB</Box>
+            </div>
+          }
+          disableContentPaddings={true}
+        >
+          <div
+            style={{
+              backgroundImage: `url(${image})`,
+              backgroundPosition: 'center',
+              backgroundSize: 'cover',
+              width: '100%',
+              height: 300,
+            }}
+          />
+        </Card>
+      </CardPage>
+    </article>
+  );
+}

pages/card/image-preview.page.tsx

@@ -0,0 +1,53 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ButtonGroup from '~components/button-group';
+import Card from '~components/internal/components/card';
+
+import image from '../container/images/16-9.png';
+import { CardPage } from './common';
+
+export default function ButtonsScenario() {
+  return (
+    <article>
+      <CardPage title="Image preview">
+        <Card
+          header="image-title.jpg"
+          description="Metadata about file - 4GB"
+          actions={
+            <ButtonGroup
+              onItemClick={() => null}
+              items={[
+                {
+                  type: 'icon-button',
+                  id: 'download',
+                  iconName: 'download',
+                  text: 'Download',
+                },
+                {
+                  type: 'icon-button',
+                  id: 'expand',
+                  iconName: 'expand',
+                  text: 'Expand',
+                },
+              ]}
+              variant={'icon'}
+            />
+          }
+          disableContentPaddings={true}
+        >
+          <div
+            style={{
+              backgroundImage: `url(${image})`,
+              backgroundPosition: 'center',
+              backgroundSize: 'cover',
+              width: '100%',
+              height: 300,
+            }}
+          />
+        </Card>
+      </CardPage>
+    </article>
+  );
+}

pages/card/preview.page.tsx

@@ -0,0 +1,46 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ButtonGroup from '~components/button-group';
+import Card from '~components/internal/components/card';
+
+import image from '../container/images/16-9.png';
+import ScreenshotArea from '../utils/screenshot-area';
+
+export default function ButtonsScenario() {
+  return (
+    <article>
+      <h1>Preview</h1>
+      <ScreenshotArea>
+        <Card
+          header="image-title.jpg"
+          description="Metadata about file - 4GB"
+          actions={
+            <ButtonGroup
+              onItemClick={() => null}
+              items={[
+                {
+                  type: 'icon-button',
+                  id: 'download',
+                  iconName: 'download',
+                  text: 'Download',
+                },
+                {
+                  type: 'icon-button',
+                  id: 'expand',
+                  iconName: 'expand',
+                  text: 'Expand',
+                },
+              ]}
+              variant={'icon'}
+            />
+          }
+          disableContentPaddings={true}
+        >
+          <img style={{ width: '100%', height: '100%', display: 'block' }} src={image} />
+        </Card>
+      </ScreenshotArea>
+    </article>
+  );
+}

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -381,6 +381,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_filtering-match-highlight_1p2cx",
     "awsui_footer_dgs8z",
     "awsui_has-background_15o6u",
+    "awsui_header-inner_1xxz5",
     "awsui_header_dgs8z",
     "awsui_highlighted_15o6u",
     "awsui_icon_x6dl3",