feat: action card [WIP]

build-tools/utils/custom-css-properties.js

@@ -184,5 +184,29 @@ const customCssPropertiesList = [
   'styleItemCardBorderRadius',
   'styleItemCardBorderWidthDefault',
   'styleItemCardBoxShadowDefault',
+  // Action card specific style properties
+  'styleActionCardBackgroundDefault',
+  'styleActionCardBackgroundHover',
+  'styleActionCardBackgroundActive',
+  'styleActionCardBackgroundDisabled',
+  'styleActionCardBorderColorDefault',
+  'styleActionCardBorderColorHover',
+  'styleActionCardBorderColorActive',
+  'styleActionCardBorderColorDisabled',
+  'styleActionCardBorderRadiusDefault',
+  'styleActionCardBorderRadiusHover',
+  'styleActionCardBorderRadiusActive',
+  'styleActionCardBorderRadiusDisabled',
+  'styleActionCardBorderWidthDefault',
+  'styleActionCardBorderWidthHover',
+  'styleActionCardBorderWidthActive',
+  'styleActionCardBorderWidthDisabled',
+  'styleActionCardBoxShadowDefault',
+  'styleActionCardBoxShadowHover',
+  'styleActionCardBoxShadowActive',
+  'styleActionCardBoxShadowDisabled',
+  'styleActionCardFocusRingBorderColor',
+  'styleActionCardFocusRingBorderRadius',
+  'styleActionCardFocusRingBorderWidth',
 ];
 module.exports = customCssPropertiesList;

build-tools/utils/pluralize.js

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 const pluralizationMap = {
+  ActionCard: 'ActionCards',
   Alert: 'Alerts',
   AnchorNavigation: 'AnchorNavigations',
   Annotation: 'Annotations',

package.json

@@ -177,7 +177,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1250 kB",
+      "limit": "1260 kB",
       "ignore": "react-dom"
     }
   ],

pages/action-card/common.tsx

@@ -0,0 +1,27 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box, Icon } from '~components';
+
+export const shortHeader = 'Card header';
+export const longHeader =
+  'A very long header text that should wrap to multiple lines to test the layout behavior of the action card component';
+
+export const shortDescription = 'A description of the action card';
+export const longDescription =
+  'A very long description text that should wrap to multiple lines to test the layout behavior of the action card component when content overflows';
+
+export const shortContent = 'Card content';
+export const longContent =
+  'Very long content that should wrap to multiple lines to test the layout behavior of the action card component when the content area has a lot of text';
+
+export const icon = <Icon name="angle-right" />;
+
+export const reactNodeContent = (
+  <Box padding="xs">
+    <span>This is a React Node</span>
+  </Box>
+);
+
+export const onClick = () => {};

pages/action-card/padding-permutations.page.tsx

@@ -0,0 +1,71 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ActionCard, { ActionCardProps } from '~components/action-card';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+import { longHeader, onClick, reactNodeContent, shortContent, shortDescription } from './common';
+
+/* Disable-padding permutations for header and content */
+const permutations = createPermutations<ActionCardProps>([
+  // All padding toggle combinations with all slots present
+  {
+    header: [longHeader],
+    description: [shortDescription],
+    children: [shortContent],
+    disableHeaderPaddings: [false, true],
+    disableContentPaddings: [false, true],
+    onClick: [onClick],
+  },
+  // Disabled paddings with custom React node content
+  {
+    children: [reactNodeContent],
+    disableContentPaddings: [false, true],
+    ariaLabel: ['Action card'],
+    onClick: [onClick],
+  },
+  // Header padding only (no content)
+  {
+    header: [longHeader],
+    disableHeaderPaddings: [false, true],
+    onClick: [onClick],
+  },
+  // Content padding only (no header)
+  {
+    children: [shortContent],
+    disableContentPaddings: [false, true],
+    ariaLabel: ['Action card'],
+    onClick: [onClick],
+  },
+  // All disabled paddings with disabled state
+  {
+    header: [longHeader],
+    description: [shortDescription],
+    children: [shortContent],
+    disabled: [true],
+    disableHeaderPaddings: [true],
+    disableContentPaddings: [true],
+    onClick: [onClick],
+  },
+]);
+
+export default function ActionCardPaddingPermutations() {
+  return (
+    <>
+      <h1>Action card padding permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => (
+            <div style={{ maxInlineSize: '400px' }}>
+              <ActionCard {...permutation} />
+            </div>
+          )}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}

pages/action-card/permutations.page.tsx

@@ -0,0 +1,109 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ActionCard, { ActionCardProps } from '~components/action-card';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+import {
+  icon,
+  longContent,
+  longDescription,
+  longHeader,
+  onClick,
+  shortContent,
+  shortDescription,
+  shortHeader,
+} from './common';
+
+/* Content slot combinations: header, description, children, icon */
+const permutations = createPermutations<ActionCardProps>([
+  // All content slots filled
+  {
+    header: [shortHeader],
+    description: [shortDescription],
+    children: [shortContent],
+    icon: [icon],
+    iconVerticalAlignment: ['top'],
+    onClick: [onClick],
+  },
+  // Header variations
+  {
+    header: [shortHeader, longHeader, undefined],
+    description: [shortDescription],
+    children: [shortContent],
+    ariaLabel: ['Action card'],
+    onClick: [onClick],
+  },
+  // Description variations
+  {
+    header: [shortHeader],
+    description: [shortDescription, longDescription, undefined],
+    children: [shortContent],
+    onClick: [onClick],
+  },
+  // Icon with alignment variations
+  {
+    header: [shortHeader],
+    description: [shortDescription],
+    icon: [icon],
+    iconVerticalAlignment: ['top', 'center'],
+    onClick: [onClick],
+  },
+  // Icon with children content
+  {
+    header: [shortHeader],
+    children: [shortContent],
+    icon: [icon],
+    iconVerticalAlignment: ['top', 'center'],
+    onClick: [onClick],
+  },
+  // Disabled state
+  {
+    header: [shortHeader],
+    description: [shortDescription],
+    children: [shortContent],
+    disabled: [false, true],
+    onClick: [onClick],
+  },
+  // Long content wrapping
+  {
+    header: [longHeader],
+    description: [longDescription],
+    children: [longContent],
+    icon: [icon],
+    iconVerticalAlignment: ['top', 'center'],
+    onClick: [onClick],
+  },
+  // Minimal: content only
+  {
+    children: [shortContent],
+    ariaLabel: ['Minimal card'],
+    onClick: [onClick],
+  },
+  // Header only
+  {
+    header: [shortHeader],
+    onClick: [onClick],
+  },
+]);
+
+export default function ActionCardPermutations() {
+  return (
+    <>
+      <h1>Action card permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => (
+            <div style={{ maxInlineSize: '400px' }}>
+              <ActionCard {...permutation} />
+            </div>
+          )}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}

pages/action-card/simple.page.tsx

@@ -0,0 +1,61 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+
+import { ActionCard, Badge, Box, Icon, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+export default function ActionCardSimplePage() {
+  const [clickedCard, setClickedCard] = React.useState<string | null>(null);
+
+  return (
+    <SimplePage title="Action Card simple page" screenshotArea={{}}>
+      <SpaceBetween size="l">
+        <div>Last clicked: {clickedCard ?? 'None'}</div>
+
+        <div style={{ maxInlineSize: '400px' }}>
+          <SpaceBetween size="m">
+            <ActionCard
+              variant="embedded"
+              disableContentPaddings={true}
+              disableHeaderPaddings={true}
+              onClick={() => setClickedCard('Juice')}
+            >
+              <Box padding="xs">
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <Icon name="expand" />
+                  <div style={{ flex: 1 }}>Lambda Execution Role - Current IAM Policies</div>
+                  <Badge>Table</Badge>
+                </div>
+              </Box>
+            </ActionCard>
+            <ActionCard
+              icon={<Icon name="angle-right" />}
+              iconVerticalAlignment="center"
+              onClick={() => setClickedCard('Basic')}
+            >
+              Test
+            </ActionCard>
+            <ActionCard
+              header={<b>EC2 access to S3</b>}
+              description="A description of the template/icebreaker"
+              icon={<Icon name="arrow-right" />}
+              iconVerticalAlignment="top"
+              onClick={() => setClickedCard('Basic')}
+            ></ActionCard>
+            <ActionCard
+              header={<b>Account alias (111112222233333)</b>}
+              description="Dev/john.doe@amazon.com"
+              icon={<Icon name="angle-right" />}
+              iconVerticalAlignment="top"
+              onClick={() => setClickedCard('Basic')}
+            >
+              Logged in 1 minute ago
+            </ActionCard>
+          </SpaceBetween>
+        </div>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}

pages/action-card/variant-permutations.page.tsx

@@ -0,0 +1,80 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ActionCard, { ActionCardProps } from '~components/action-card';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+import { icon, longContent, longDescription, onClick, shortContent, shortDescription, shortHeader } from './common';
+
+/* Visual variant permutations: default vs embedded */
+const permutations = createPermutations<ActionCardProps>([
+  // Variants with all slots
+  {
+    header: [shortHeader],
+    description: [shortDescription],
+    children: [shortContent],
+    icon: [icon],
+    variant: ['default', 'embedded'],
+    onClick: [onClick],
+  },
+  // Variants with minimal content
+  {
+    children: [shortContent],
+    variant: ['default', 'embedded'],
+    ariaLabel: ['Action card'],
+    onClick: [onClick],
+  },
+  // Variants with header only
+  {
+    header: [shortHeader],
+    variant: ['default', 'embedded'],
+    onClick: [onClick],
+  },
+  // Variants with icon and alignment
+  {
+    header: [shortHeader],
+    description: [shortDescription],
+    icon: [icon],
+    iconVerticalAlignment: ['top', 'center'],
+    variant: ['default', 'embedded'],
+    onClick: [onClick],
+  },
+  // Variants with long content
+  {
+    header: [shortHeader],
+    description: [longDescription],
+    children: [longContent],
+    variant: ['default', 'embedded'],
+    onClick: [onClick],
+  },
+  // Variants with disabled state
+  {
+    header: [shortHeader],
+    description: [shortDescription],
+    children: [shortContent],
+    disabled: [true],
+    variant: ['default', 'embedded'],
+    onClick: [onClick],
+  },
+]);
+
+export default function ActionCardVariantPermutations() {
+  return (
+    <>
+      <h1>Action card variant permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => (
+            <div style={{ maxInlineSize: '400px' }}>
+              <ActionCard {...permutation} />
+            </div>
+          )}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}