@automattic/vip-design-system 2.8.1 → 2.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/build/system/Card/Card.d.ts +3 -1
  2. package/build/system/Card/Card.js +7 -5
  3. package/build/system/Card/Card.stories.d.ts +1 -0
  4. package/build/system/Card/Card.stories.js +12 -1
  5. package/build/system/theme/index.js +3 -3
  6. package/package.json +1 -1
  7. package/src/system/Card/Card.stories.tsx +5 -0
  8. package/src/system/Card/Card.tsx +14 -2
  9. package/src/system/theme/index.js +3 -3
package/build/system/Card/Card.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /** @jsxImportSource theme-ui */
2
2
  /// <reference types="react" />
3
- import { BoxProps } from 'theme-ui';
3
+ import { BoxProps, ThemeUIStyleObject } from 'theme-ui';
4
4
  export declare enum CardVariant {
5
5
  'primary' = 0,
6
6
  'secondary' = 1,
@@ -12,5 +12,7 @@ export interface CardProps {
12
12
  title?: string;
13
13
  children?: React.ReactNode;
14
14
  renderHeader?: (title?: string) => React.ReactNode;
15
+ bodyStyles?: ThemeUIStyleObject;
16
+ headerStyles?: ThemeUIStyleObject;
15
17
  }
16
18
  export declare const Card: import("react").ForwardRefExoticComponent<CardProps & BoxProps & import("react").RefAttributes<HTMLElement>>;
package/build/system/Card/Card.js CHANGED
@@ -5,7 +5,7 @@ exports.CardVariant = exports.Card = void 0;
5
5
  var _react = require("react");
6
6
  var _ = require("..");
7
7
  var _jsxRuntime = require("theme-ui/jsx-runtime");
8
- var _excluded = ["variant", "title", "renderHeader", "children"];
8
+ var _excluded = ["variant", "title", "renderHeader", "bodyStyles", "headerStyles", "children"];
9
9
  /** @jsxImportSource theme-ui */
10
10
  /**
11
11
  * External dependencies
@@ -27,6 +27,8 @@ var Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
27
27
  variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
28
28
  title = _ref.title,
29
29
  renderHeader = _ref.renderHeader,
30
+ bodyStyles = _ref.bodyStyles,
31
+ headerStyles = _ref.headerStyles,
30
32
  children = _ref.children,
31
33
  rest = _objectWithoutPropertiesLoose(_ref, _excluded);
32
34
  return (0, _jsxRuntime.jsxs)(_.Box, _extends({
@@ -38,15 +40,15 @@ var Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
38
40
  }, rest, {
39
41
  children: [renderHeader ? renderHeader(title) : '', title && !renderHeader && (0, _jsxRuntime.jsx)(_.Box, {
40
42
  className: "vip-card-header-component",
41
- sx: {
43
+ sx: _extends({
42
44
  variant: "cards." + variant + ".header"
43
- },
45
+ }, headerStyles),
44
46
  children: title
45
47
  }), (0, _jsxRuntime.jsx)(_.Box, {
46
48
  className: "vip-card-body-component",
47
- sx: {
49
+ sx: _extends({
48
50
  variant: "cards." + variant + ".children"
49
- },
51
+ }, bodyStyles),
50
52
  children: children
51
53
  })]
52
54
  }));
package/build/system/Card/Card.stories.d.ts CHANGED
@@ -11,3 +11,4 @@ export declare const WithCustomHeader: () => import("react").JSX.Element;
11
11
  export declare const DefaultSecondary: () => import("react").JSX.Element;
12
12
  export declare const WithHeaderSecondary: () => import("react").JSX.Element;
13
13
  export declare const DefaultIndent: () => import("react").JSX.Element;
14
+ export declare const StyledBody: () => import("react").JSX.Element;
package/build/system/Card/Card.stories.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports["default"] = exports.WithHeaderSecondary = exports.WithHeader = exports.WithCustomHeader = exports.DefaultSecondary = exports.DefaultIndent = exports.Default = void 0;
4
+ exports["default"] = exports.WithHeaderSecondary = exports.WithHeader = exports.WithCustomHeader = exports.StyledBody = exports.DefaultSecondary = exports.DefaultIndent = exports.Default = void 0;
5
5
  var _ = require("..");
6
6
  var _jsxRuntime = require("theme-ui/jsx-runtime");
7
7
  /** @jsxImportSource theme-ui */
@@ -58,4 +58,15 @@ var DefaultIndent = exports.DefaultIndent = function DefaultIndent() {
58
58
  variant: "indent",
59
59
  children: "Hello"
60
60
  });
61
+ };
62
+ var StyledBody = exports.StyledBody = function StyledBody() {
63
+ return (0, _jsxRuntime.jsx)(_.Card, {
64
+ variant: "indent",
65
+ title: "Hello world",
66
+ bodyStyles: {
67
+ p: 6,
68
+ backgroundColor: 'layer.2'
69
+ },
70
+ children: "Hello styled body."
71
+ });
61
72
  };
package/build/system/theme/index.js CHANGED
@@ -258,15 +258,15 @@ export default {
258
258
  borderTopLeftRadius: 2,
259
259
  borderTopRightRadius: 2,
260
260
  py: 3,
261
- px: 5,
261
+ px: 4,
262
262
  gap: 2,
263
263
  fontWeight: 'bold',
264
264
  display: 'flex',
265
265
  minHeight: 46,
266
266
  },
267
267
  children: {
268
- padding: 5,
269
- gap: 6,
268
+ padding: 4,
269
+ gap: 3,
270
270
  },
271
271
  },
272
272
  secondary: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "2.8.1",
3
+ "version": "2.8.2",
4
4
  "main": "build/system/index.js",
5
5
  "scripts": {
6
6
  "build-storybook": "storybook build",
package/src/system/Card/Card.stories.tsx CHANGED
@@ -37,3 +37,8 @@ export const WithHeaderSecondary = () => (
37
37
  );
38
38
 
39
39
  export const DefaultIndent = () => <Card variant="indent">Hello</Card>;
40
+ export const StyledBody = () => (
41
+ <Card variant="indent" title="Hello world" bodyStyles={ { p: 6, backgroundColor: 'layer.2' } }>
42
+ Hello styled body.
43
+ </Card>
44
+ );
package/src/system/Card/Card.tsx CHANGED
@@ -4,7 +4,7 @@
4
4
  * External dependencies
5
5
  */
6
6
  import { forwardRef, Ref } from 'react';
7
- import { BoxProps } from 'theme-ui';
7
+ import { BoxProps, ThemeUIStyleObject } from 'theme-ui';
8
8
 
9
9
  /**
10
10
  * Internal dependencies
@@ -23,13 +23,23 @@ export interface CardProps {
23
23
  title?: string;
24
24
  children?: React.ReactNode;
25
25
  renderHeader?: ( title?: string ) => React.ReactNode;
26
+ bodyStyles?: ThemeUIStyleObject;
27
+ headerStyles?: ThemeUIStyleObject;
26
28
  }
27
29
 
28
30
  type CardBoxProps = CardProps & BoxProps;
29
31
 
30
32
  export const Card = forwardRef< HTMLElement, CardBoxProps >(
31
33
  (
32
- { variant = 'primary', title, renderHeader, children, ...rest }: CardProps,
34
+ {
35
+ variant = 'primary',
36
+ title,
37
+ renderHeader,
38
+ bodyStyles,
39
+ headerStyles,
40
+ children,
41
+ ...rest
42
+ }: CardProps,
33
43
  ref: Ref< HTMLElement >
34
44
  ) => {
35
45
  return (
@@ -47,6 +57,7 @@ export const Card = forwardRef< HTMLElement, CardBoxProps >(
47
57
  className="vip-card-header-component"
48
58
  sx={ {
49
59
  variant: `cards.${ variant }.header`,
60
+ ...headerStyles,
50
61
  } }
51
62
  >
52
63
  { title }
@@ -57,6 +68,7 @@ export const Card = forwardRef< HTMLElement, CardBoxProps >(
57
68
  className="vip-card-body-component"
58
69
  sx={ {
59
70
  variant: `cards.${ variant }.children`,
71
+ ...bodyStyles,
60
72
  } }
61
73
  >
62
74
  { children }
package/src/system/theme/index.js CHANGED
@@ -258,15 +258,15 @@ export default {
258
258
  borderTopLeftRadius: 2,
259
259
  borderTopRightRadius: 2,
260
260
  py: 3,
261
- px: 5,
261
+ px: 4,
262
262
  gap: 2,
263
263
  fontWeight: 'bold',
264
264
  display: 'flex',
265
265
  minHeight: 46,
266
266
  },
267
267
  children: {
268
- padding: 5,
269
- gap: 6,
268
+ padding: 4,
269
+ gap: 3,
270
270
  },
271
271
  },
272
272
  secondary: {