feat: expose card component

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

@@ -178,5 +178,11 @@ const customCssPropertiesList = [
   'tokenStyleDismissColorDisabled',
   'tokenStyleDismissColorHover',
   'tokenStyleDismissColorReadOnly',
+  // Item card specific style properties
+  'styleItemCardBackgroundDefault',
+  'styleItemCardBorderColorDefault',
+  'styleItemCardBorderRadius',
+  'styleItemCardBorderWidthDefault',
+  'styleItemCardBoxShadowDefault',
 ];
 module.exports = customCssPropertiesList;

build-tools/utils/pluralize.js

@@ -45,6 +45,7 @@ const pluralizationMap = {
   Icon: 'Icons',
   IconProvider: 'IconProviders',
   Input: 'Inputs',
+  ItemCard: 'ItemCards',
   KeyValuePairs: 'KeyValuePairs',
   LineChart: 'LineCharts',
   Link: 'Links',

pages/card/common.tsx → pages/item-card/common.tsx

@@ -2,15 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 import { ReactNode, useContext } from 'react';
 import React from 'react';
+import clsx from 'clsx';
 
+import { Box, Button, Icon } from '~components';
 import ButtonGroup from '~components/button-group';
 import FormField from '~components/form-field';
-import Icon from '~components/icon';
 import Input from '~components/input';
 import SpaceBetween from '~components/space-between';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import ScreenshotArea from '../utils/screenshot-area';
+import img from './assets/image-placeholder.png';
+
+import styles from './styles.scss';
 
 type PageContext = React.Context<
   AppContextType<{
@@ -54,6 +58,18 @@ export const longDescription =
 export const longContent =
   'This is long card content with multiple sentences. It provides more detailed information and might wrap across several lines.';
 
+export const longFooter =
+  'Long card footer with multiple sentences. It provides more detailed information and might wrap across several lines.';
+
+export const shortFooter = 'Short card footer';
+
+export const reactNodeContent = (
+  <Box padding="xs">
+    <div>This is a React Node</div>
+    <Button>Test Button</Button>
+  </Box>
+);
+
 export const actions = (
   <ButtonGroup
     variant="icon"
@@ -64,4 +80,16 @@ export const actions = (
   />
 );
 
-export const icon = <Icon name="settings" />;
+export const icon = <Icon name="settings"></Icon>;
+
+export const imageContentEmbedded = (
+  <div className={clsx(styles['image-wrapper--embedded'], styles['image-wrapper'])}>
+    <img src={img} alt="Image placeholder for item card media" className={styles.image} />
+  </div>
+);
+
+export const imageContentDefault = (
+  <div className={clsx(styles['image-wrapper--default'], styles['image-wrapper'])}>
+    <img src={img} alt="Image placeholder for item card media" className={styles.image} />
+  </div>
+);

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

@@ -0,0 +1,48 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ItemCard from '~components/item-card';
+import { ItemCardProps } from '~components/item-card/interfaces';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import { CardPage, longContent, longHeader, reactNodeContent, shortFooter } from './common';
+
+/* Disable-padding permutations for header, content, and footer */
+const permutations = createPermutations<ItemCardProps>([
+  // All padding toggle combinations with all slots present
+  {
+    header: [longHeader],
+    children: [longContent],
+    footer: [shortFooter],
+    disableHeaderPaddings: [false, true],
+    disableContentPaddings: [false, true],
+    disableFooterPaddings: [false, true],
+  },
+  // Disabled paddings with custom React node content
+  {
+    children: [reactNodeContent],
+    disableContentPaddings: [false, true],
+  },
+  // Header padding only (no footer)
+  {
+    header: [longHeader],
+    children: [longContent],
+    disableHeaderPaddings: [false, true],
+  },
+  // Footer padding only (no header)
+  {
+    children: [longContent],
+    footer: [shortFooter],
+    disableFooterPaddings: [false, true],
+  },
+]);
+
+export default function CardPaddingPermutations() {
+  return (
+    <CardPage title="Item card padding permutations">
+      <PermutationsView permutations={permutations} render={permutation => <ItemCard {...permutation} />} />
+    </CardPage>
+  );
+}

pages/item-card/permutations.page.tsx

@@ -0,0 +1,72 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ItemCard from '~components/item-card';
+import { ItemCardProps } from '~components/item-card/interfaces';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import {
+  actions,
+  CardPage,
+  icon,
+  longContent,
+  longDescription,
+  longFooter,
+  longHeader,
+  shortDescription,
+  shortFooter,
+  shortHeader,
+} from './common';
+
+/* Content slot combinations: header, description, children, footer, actions, icon */
+const permutations = createPermutations<ItemCardProps>([
+  // All content slots filled
+  {
+    header: [shortHeader],
+    description: [shortDescription],
+    children: [longContent],
+    footer: [shortFooter],
+    actions: [actions],
+    icon: [icon],
+  },
+  // Header variations
+  {
+    header: [shortHeader, longHeader, undefined],
+    description: [shortDescription],
+    children: [longContent],
+  },
+  // Description variations
+  {
+    header: [shortHeader],
+    description: [shortDescription, longDescription, undefined],
+    children: [longContent],
+    footer: [shortFooter],
+  },
+  // Footer variations
+  {
+    header: [longHeader],
+    children: [longContent],
+    footer: [longFooter, shortFooter, undefined],
+  },
+  // Actions with and without header
+  {
+    header: [shortHeader, undefined],
+    children: [longContent],
+    actions: [actions, undefined],
+    description: [longDescription],
+  },
+  // Minimal: content only
+  {
+    children: [longContent],
+  },
+]);
+
+export default function CardPermutations() {
+  return (
+    <CardPage title="Item card permutations">
+      <PermutationsView permutations={permutations} render={permutation => <ItemCard {...permutation} />} />
+    </CardPage>
+  );
+}