@automattic/vip-design-system 2.6.1 → 2.7.0

package/build/system/Card/Card.d.ts

@@ -1,12 +1,20 @@
+/** @jsxImportSource theme-ui */
 /// <reference types="react" />
 /**
  * External dependencies
  */
 import { Argument } from 'classnames';
 import { BoxProps } from 'theme-ui';
+export declare enum CardVariant {
+    'primary' = 0,
+    'secondary' = 1,
+    'indent' = 2
+}
 export interface CardProps {
-    variant?: string;
+    variant?: keyof typeof CardVariant;
     sx?: BoxProps['sx'];
     className?: Argument;
+    header?: React.ReactNode;
+    children?: React.ReactNode;
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & BoxProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Card/Card.js

@@ -1,12 +1,13 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Card = void 0;
+exports.CardVariant = exports.Card = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["variant", "sx", "className"];
+var _excluded = ["variant", "header", "sx", "className", "children"];
+/** @jsxImportSource theme-ui */
 /**
  * External dependencies
  */
@@ -16,20 +17,40 @@ var _excluded = ["variant", "sx", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var CardVariant = exports.CardVariant = /*#__PURE__*/function (CardVariant) {
+  CardVariant[CardVariant["primary"] = 0] = "primary";
+  CardVariant[CardVariant["secondary"] = 1] = "secondary";
+  CardVariant[CardVariant["indent"] = 2] = "indent";
+  return CardVariant;
+}({});
 var Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    header = _ref.header,
     _ref$sx = _ref.sx,
     sx = _ref$sx === void 0 ? {} : _ref$sx,
     className = _ref.className,
+    children = _ref.children,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(_.Box, _extends({
+  return (0, _jsxRuntime.jsxs)(_.Box, _extends({
     ref: ref,
     sx: _extends({
       // pass variant prop to sx
       variant: "cards." + variant
     }, sx),
     className: (0, _classnames["default"])('vip-card-component', className)
-  }, props));
+  }, props, {
+    children: [header && (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        variant: "cards." + variant + ".header"
+      },
+      children: header
+    }), (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        variant: "cards." + variant + ".children"
+      },
+      children: children
+    })]
+  }));
 });
 Card.displayName = 'Card';

package/build/system/Card/Card.stories.d.ts

@@ -5,3 +5,8 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
+export declare const WithHeader: () => import("react").JSX.Element;
+export declare const DefaultSecondary: () => import("react").JSX.Element;
+export declare const WithHeaderSecondary: () => import("react").JSX.Element;
+export declare const DefaultIndent: () => import("react").JSX.Element;
+export declare const WithHeaderIndent: () => import("react").JSX.Element;

package/build/system/Card/Card.stories.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithHeaderSecondary = exports.WithHeaderIndent = exports.WithHeader = exports.DefaultSecondary = exports.DefaultIndent = exports.Default = void 0;
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
@@ -13,6 +13,38 @@ var _default = exports["default"] = {
 };
 var Default = exports.Default = function Default() {
   return (0, _jsxRuntime.jsx)(_.Card, {
-    children: " Hello "
+    children: "Hello"
+  });
+};
+var WithHeader = exports.WithHeader = function WithHeader() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    header: "Header",
+    children: "This is a card with a header."
+  });
+};
+var DefaultSecondary = exports.DefaultSecondary = function DefaultSecondary() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    variant: "secondary",
+    children: "Hello"
+  });
+};
+var WithHeaderSecondary = exports.WithHeaderSecondary = function WithHeaderSecondary() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    header: "Header",
+    variant: "secondary",
+    children: "This is a card with a header."
+  });
+};
+var DefaultIndent = exports.DefaultIndent = function DefaultIndent() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    variant: "indent",
+    children: "Hello"
+  });
+};
+var WithHeaderIndent = exports.WithHeaderIndent = function WithHeaderIndent() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    header: "Header",
+    variant: "indent",
+    children: "This is a card with a header."
   });
 };

package/build/system/Card/Card.test.js

@@ -61,4 +61,29 @@ describe('<Card />', function () {
       }
     }, _callee2);
   })));
+  it('renders the Card component with a header', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var _render3, container;
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_Card.Card, {
+            header: "Card Header",
+            children: "Card text"
+          })), container = _render3.container;
+          expect(_react.screen.getByText('Card Header')).toBeInTheDocument();
+          expect(_react.screen.getByText('Card text')).toBeInTheDocument();
+
+          // Check for accessibility issues
+          _context3.t0 = expect;
+          _context3.next = 6;
+          return (0, _jestAxe.axe)(container);
+        case 6:
+          _context3.t1 = _context3.sent;
+          (0, _context3.t0)(_context3.t1).toHaveNoViolations();
+        case 8:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
 });

package/build/system/theme/index.d.ts

@@ -33,29 +33,72 @@ declare namespace _default {
     }
     export namespace cards {
         namespace primary {
-            let padding: number;
             let borderRadius: number;
             let backgroundColor: string;
             let boxShadow: string;
+            namespace header {
+                let backgroundColor_1: string;
+                export { backgroundColor_1 as backgroundColor };
+                export let borderTopLeftRadius: number;
+                export let borderTopRightRadius: number;
+                export let p: number;
+                export let fontWeight: string;
+                export let display: string;
+            }
+            namespace children {
+                let p_1: number;
+                export { p_1 as p };
+            }
         }
         namespace secondary {
             let borderRadius_1: number;
             export { borderRadius_1 as borderRadius };
-            export let p: number;
             let boxShadow_1: string;
             export { boxShadow_1 as boxShadow };
             export let border: string;
             export let borderColor: string;
+            export namespace header_1 {
+                let backgroundColor_2: string;
+                export { backgroundColor_2 as backgroundColor };
+                let borderTopLeftRadius_1: number;
+                export { borderTopLeftRadius_1 as borderTopLeftRadius };
+                let borderTopRightRadius_1: number;
+                export { borderTopRightRadius_1 as borderTopRightRadius };
+                let p_2: number;
+                export { p_2 as p };
+                let fontWeight_1: string;
+                export { fontWeight_1 as fontWeight };
+                let display_1: string;
+                export { display_1 as display };
+            }
+            export { header_1 as header };
+            export namespace children_1 {
+                let p_3: number;
+                export { p_3 as p };
+            }
+            export { children_1 as children };
         }
         namespace indent {
             let borderRadius_2: number;
             export { borderRadius_2 as borderRadius };
-            let p_1: number;
-            export { p_1 as p };
             let boxShadow_2: string;
             export { boxShadow_2 as boxShadow };
-            let backgroundColor_1: string;
-            export { backgroundColor_1 as backgroundColor };
+            let backgroundColor_3: string;
+            export { backgroundColor_3 as backgroundColor };
+            export namespace header_2 {
+                let display_2: string;
+                export { display_2 as display };
+                let fontWeight_2: string;
+                export { fontWeight_2 as fontWeight };
+                let p_4: number;
+                export { p_4 as p };
+            }
+            export { header_2 as header };
+            export namespace children_2 {
+                let p_5: number;
+                export { p_5 as p };
+            }
+            export { children_2 as children };
         }
     }
     export namespace buttons {
@@ -112,7 +155,7 @@ declare namespace _default {
                 borderColor: string;
             };
         };
-        export let display: {
+        let display_3: {
             variant: string;
             color: string;
             bg: string;
@@ -125,6 +168,7 @@ declare namespace _default {
                 borderColor: string;
             };
         };
+        export { display_3 as display };
         export let ghost: {
             variant: string;
             color: string;
@@ -1081,8 +1125,8 @@ declare namespace _default {
             export let top: string;
             export let left: string;
             export let maxWidth: string;
-            let backgroundColor_2: string;
-            export { backgroundColor_2 as backgroundColor };
+            let backgroundColor_4: string;
+            export { backgroundColor_4 as backgroundColor };
             let boxShadow_3: string;
             export { boxShadow_3 as boxShadow };
         }
@@ -1100,15 +1144,15 @@ declare namespace _default {
             export { borderRadius_3 as borderRadius };
             let boxShadow_4: string;
             export { boxShadow_4 as boxShadow };
-            let backgroundColor_3: string;
-            export { backgroundColor_3 as backgroundColor };
+            let backgroundColor_5: string;
+            export { backgroundColor_5 as backgroundColor };
         }
         export { sidebar_1 as sidebar };
         export namespace cover {
             let position_2: string;
             export { position_2 as position };
-            let backgroundColor_4: string;
-            export { backgroundColor_4 as backgroundColor };
+            let backgroundColor_6: string;
+            export { backgroundColor_6 as backgroundColor };
             export let width: string;
             let left_2: number;
             export { left_2 as left };
@@ -1171,11 +1215,12 @@ declare namespace _default {
         namespace root {
             export let fontFamily: string;
             export let lineHeight: string;
-            export let fontWeight: string;
+            let fontWeight_3: string;
+            export { fontWeight_3 as fontWeight };
             let color_1: string;
             export { color_1 as color };
-            let backgroundColor_5: string;
-            export { backgroundColor_5 as backgroundColor };
+            let backgroundColor_7: string;
+            export { backgroundColor_7 as backgroundColor };
             export let webkitFontSmoothing: string;
             export let mozOsxFontmoothing: string;
             export let a: {
@@ -1187,18 +1232,18 @@ declare namespace _default {
             };
             export namespace svg {
                 export let fill: string;
-                let display_1: string;
-                export { display_1 as display };
+                let display_4: string;
+                export { display_4 as display };
             }
             export namespace pre {
                 let fontFamily_1: string;
                 export { fontFamily_1 as fontFamily };
             }
-            export namespace p_2 {
+            export namespace p_6 {
                 let color_2: string;
                 export { color_2 as color };
             }
-            export { p_2 as p };
+            export { p_6 as p };
         }
     }
 }

package/build/system/theme/index.js

@@ -250,23 +250,50 @@ export default {
 
 	cards: {
 		primary: {
-			padding: 3,
 			borderRadius: 2,
 			backgroundColor: 'layer.2',
 			boxShadow: 'low',
+			header: {
+				backgroundColor: 'layer.1',
+				borderTopLeftRadius: 2,
+				borderTopRightRadius: 2,
+				p: 3,
+				fontWeight: 'bold',
+				display: 'flex',
+			},
+			children: {
+				p: 3,
+			},
 		},
 		secondary: {
 			borderRadius: 2,
-			p: 3,
 			boxShadow: 'none',
 			border: '1px solid',
 			borderColor: 'borders.2',
+			header: {
+				backgroundColor: 'layer.1',
+				borderTopLeftRadius: 2,
+				borderTopRightRadius: 2,
+				p: 3,
+				fontWeight: 'bold',
+				display: 'flex',
+			},
+			children: {
+				p: 3,
+			},
 		},
 		indent: {
 			borderRadius: 2,
-			p: 3,
 			boxShadow: 'none',
 			backgroundColor: 'backgroundMuted',
+			header: {
+				display: 'flex',
+				fontWeight: 'bold',
+				p: 3,
+			},
+			children: {
+				p: 3,
+			},
 		},
 	},
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Card/Card.stories.tsx

@@ -8,4 +8,22 @@ export default {
 	component: Card,
 };
 
-export const Default = () => <Card> Hello </Card>;
+export const Default = () => <Card>Hello</Card>;
+
+export const WithHeader = () => <Card header="Header">This is a card with a header.</Card>;
+
+export const DefaultSecondary = () => <Card variant="secondary">Hello</Card>;
+
+export const WithHeaderSecondary = () => (
+	<Card header="Header" variant="secondary">
+		This is a card with a header.
+	</Card>
+);
+
+export const DefaultIndent = () => <Card variant="indent">Hello</Card>;
+
+export const WithHeaderIndent = () => (
+	<Card header="Header" variant="indent">
+		This is a card with a header.
+	</Card>
+);

package/src/system/Card/Card.test.tsx

@@ -29,4 +29,15 @@ describe( '<Card />', () => {
 		// Check for accessibility issues
 		expect( await axe( container ) ).toHaveNoViolations();
 	} );
+
+	it( 'renders the Card component with a header', async () => {
+		const { container } = render( <Card header="Card Header">Card text</Card> );
+
+		expect( screen.getByText( 'Card Header' ) ).toBeInTheDocument();
+
+		expect( screen.getByText( 'Card text' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
 } );

package/src/system/Card/Card.tsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -10,30 +12,57 @@ import { BoxProps } from 'theme-ui';
  */
 import { Box } from '..';
 
+export enum CardVariant {
+	'primary',
+	'secondary',
+	'indent',
+}
+
 export interface CardProps {
-	variant?: string;
+	variant?: keyof typeof CardVariant;
 	sx?: BoxProps[ 'sx' ];
 	className?: Argument;
+	header?: React.ReactNode;
+	children?: React.ReactNode;
 }
 
 type CardBoxProps = CardProps & BoxProps;
 
 export const Card = forwardRef< HTMLElement, CardBoxProps >(
 	(
-		{ variant = 'primary', sx = {}, className, ...props }: CardBoxProps,
+		{ variant = 'primary', header, sx = {}, className, children, ...props }: CardProps,
 		ref: Ref< HTMLElement >
-	) => (
-		<Box
-			ref={ ref }
-			sx={ {
-				// pass variant prop to sx
-				variant: `cards.${ variant }`,
-				...sx,
-			} }
-			className={ classNames( 'vip-card-component', className ) }
-			{ ...props }
-		/>
-	)
+	) => {
+		return (
+			<Box
+				ref={ ref }
+				sx={ {
+					// pass variant prop to sx
+					variant: `cards.${ variant }`,
+					...sx,
+				} }
+				className={ classNames( 'vip-card-component', className ) }
+				{ ...props }
+			>
+				{ header && (
+					<div
+						sx={ {
+							variant: `cards.${ variant }.header`,
+						} }
+					>
+						{ header }
+					</div>
+				) }
+				<div
+					sx={ {
+						variant: `cards.${ variant }.children`,
+					} }
+				>
+					{ children }
+				</div>
+			</Box>
+		);
+	}
 );
 
 Card.displayName = 'Card';

package/src/system/theme/index.js

@@ -250,23 +250,50 @@ export default {
 
 	cards: {
 		primary: {
-			padding: 3,
 			borderRadius: 2,
 			backgroundColor: 'layer.2',
 			boxShadow: 'low',
+			header: {
+				backgroundColor: 'layer.1',
+				borderTopLeftRadius: 2,
+				borderTopRightRadius: 2,
+				p: 3,
+				fontWeight: 'bold',
+				display: 'flex',
+			},
+			children: {
+				p: 3,
+			},
 		},
 		secondary: {
 			borderRadius: 2,
-			p: 3,
 			boxShadow: 'none',
 			border: '1px solid',
 			borderColor: 'borders.2',
+			header: {
+				backgroundColor: 'layer.1',
+				borderTopLeftRadius: 2,
+				borderTopRightRadius: 2,
+				p: 3,
+				fontWeight: 'bold',
+				display: 'flex',
+			},
+			children: {
+				p: 3,
+			},
 		},
 		indent: {
 			borderRadius: 2,
-			p: 3,
 			boxShadow: 'none',
 			backgroundColor: 'backgroundMuted',
+			header: {
+				display: 'flex',
+				fontWeight: 'bold',
+				p: 3,
+			},
+			children: {
+				p: 3,
+			},
 		},
 	},