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": "1255 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 = () => {};