@automattic/vip-design-system 0.23.3 → 0.23.5

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 (11) hide show
  1. package/build/system/Button/Button.js +1 -2
  2. package/build/system/OptionRow/OptionRow.js +21 -13
  3. package/build/system/OptionRow/OptionRow.stories.js +10 -4
  4. package/build/system/OptionRow/OptionRow.test.js +6 -11
  5. package/build/system/Table/TableCell.js +1 -4
  6. package/package.json +1 -1
  7. package/src/system/Button/Button.js +1 -2
  8. package/src/system/OptionRow/OptionRow.js +19 -14
  9. package/src/system/OptionRow/OptionRow.stories.jsx +11 -1
  10. package/src/system/OptionRow/OptionRow.test.js +1 -10
  11. package/src/system/Table/TableCell.js +0 -3
package/build/system/Button/Button.js CHANGED
@@ -32,7 +32,7 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
32
32
  justifyContent: 'center',
33
33
  height: '36px',
34
34
  py: 0,
35
- textDecoration: props != null && props.to ? 'underline' : 'none',
35
+ textDecoration: 'none',
36
36
  '&:hover': {
37
37
  textDecoration: 'none'
38
38
  },
@@ -58,6 +58,5 @@ exports.Button = Button;
58
58
  Button.displayName = 'Button';
59
59
  Button.propTypes = {
60
60
  sx: _propTypes["default"].object,
61
- to: _propTypes["default"].any,
62
61
  className: _propTypes["default"].any
63
62
  };
package/build/system/OptionRow/OptionRow.js CHANGED
@@ -21,24 +21,23 @@ var _classnames = _interopRequireDefault(require("classnames"));
21
21
 
22
22
  var _jsxRuntime = require("theme-ui/jsx-runtime");
23
23
 
24
- var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled", "order", "className"];
24
+ var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled", "order", "className", "variant"];
25
25
  var disabledStyles = {
26
26
  border: '1px solid',
27
27
  borderColor: 'borders.2',
28
28
  background: 'none',
29
29
  boxShadow: 'none',
30
- color: 'grey.70'
30
+ color: 'text'
31
31
  };
32
32
  var gridInlineStyle = {
33
33
  py: 2,
34
- px: 2,
35
- mx: -2
34
+ px: 2
36
35
  };
37
36
 
38
- var regularGridStyle = function regularGridStyle(small) {
37
+ var regularGridStyle = function regularGridStyle() {
39
38
  return {
40
39
  py: 3,
41
- px: [3, 3, small ? 3 : 5],
40
+ px: 3,
42
41
  borderBottom: '1px solid',
43
42
  borderColor: 'borders.2'
44
43
  };
@@ -63,6 +62,8 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
63
62
  order = _ref$order === void 0 ? null : _ref$order,
64
63
  _ref$className = _ref.className,
65
64
  className = _ref$className === void 0 ? null : _ref$className,
65
+ _ref$variant = _ref.variant,
66
+ variant = _ref$variant === void 0 ? 'h3' : _ref$variant,
66
67
  props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
67
68
  var mergedCard = disabled ? disabledStyles : {};
68
69
  var inlineStyles = inline ? gridInlineStyle : regularGridStyle(small);
@@ -78,7 +79,7 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
78
79
  alignItems: 'center',
79
80
  cursor: disabled ? 'auto' : 'pointer',
80
81
  textDecoration: 'none',
81
- color: 'inherit',
82
+ color: 'text',
82
83
  '&:hover': !disabled && {
83
84
  backgroundColor: 'hover'
84
85
  }
@@ -99,7 +100,7 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
99
100
  sx: {
100
101
  display: 'block'
101
102
  },
102
- alt: "Image representing the list item"
103
+ alt: ""
103
104
  })
104
105
  }) : icon && icon
105
106
  }), (0, _jsxRuntime.jsxs)(_.Box, {
@@ -107,9 +108,11 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
107
108
  flex: '1 1 auto'
108
109
  },
109
110
  children: [(0, _jsxRuntime.jsxs)(_.Heading, {
110
- variant: "h4",
111
+ variant: variant,
111
112
  sx: {
112
- mb: subTitle || body ? 1 : 0
113
+ mb: subTitle || body ? 1 : 0,
114
+ fontSize: 2,
115
+ fontWeight: 'bold'
113
116
  },
114
117
  children: [label, badge && (0, _jsxRuntime.jsx)(_.Badge, {
115
118
  sx: {
@@ -120,7 +123,7 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
120
123
  }), subTitle && (0, _jsxRuntime.jsx)(_.Text, {
121
124
  sx: {
122
125
  mb: 1,
123
- color: 'muted'
126
+ color: 'text'
124
127
  },
125
128
  children: subTitle
126
129
  }), body && (0, _jsxRuntime.jsx)(_.Text, {
@@ -132,7 +135,11 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
132
135
  }), false !== meta && '' !== meta && (0, _jsxRuntime.jsx)(_.Box, {
133
136
  "data-testid": "meta",
134
137
  children: meta ? meta : (0, _jsxRuntime.jsx)(_md.MdArrowForward, {
135
- size: 24
138
+ size: 24,
139
+ sx: {
140
+ color: 'text'
141
+ },
142
+ "aria-hidden": "true"
136
143
  })
137
144
  })]
138
145
  }));
@@ -153,5 +160,6 @@ OptionRow.propTypes = {
153
160
  small: _propTypes["default"].bool,
154
161
  disabled: _propTypes["default"].bool,
155
162
  order: _propTypes["default"].number,
156
- className: _propTypes["default"].any
163
+ className: _propTypes["default"].any,
164
+ variant: _propTypes["default"].string
157
165
  };
package/build/system/OptionRow/OptionRow.stories.js CHANGED
@@ -22,19 +22,18 @@ var image2 = // eslint-disable-next-line max-len
22
22
 
23
23
  var Default = function Default() {
24
24
  return (0, _jsxRuntime.jsxs)(_.Box, {
25
- sx: {
26
- mx: -5
27
- },
28
25
  children: [(0, _jsxRuntime.jsx)(_.OptionRow, {
29
26
  image: image1,
30
27
  label: "Option Row",
31
28
  subTitle: "Mostly used to link off to other pages.",
32
- as: "a"
29
+ as: "a",
30
+ href: "http://google.com/"
33
31
  }), (0, _jsxRuntime.jsx)(_.OptionRow, {
34
32
  image: image2,
35
33
  label: "Option Row",
36
34
  subTitle: "Mostly used to link off to other pages.",
37
35
  as: "a",
36
+ href: "http://google.com/",
38
37
  order: 2
39
38
  }), (0, _jsxRuntime.jsx)(_.OptionRow, {
40
39
  image: image2,
@@ -43,6 +42,13 @@ var Default = function Default() {
43
42
  as: _.Box,
44
43
  disabled: true,
45
44
  meta: ""
45
+ }), (0, _jsxRuntime.jsx)(_.OptionRow, {
46
+ image: image2,
47
+ label: "Custom heading HTML h5",
48
+ subTitle: "Use the variant prop to adjust the heading structure",
49
+ as: _.Box,
50
+ variant: "h5",
51
+ meta: ""
46
52
  })]
47
53
  });
48
54
  };
package/build/system/OptionRow/OptionRow.test.js CHANGED
@@ -53,37 +53,32 @@ describe('<OptionRow />', function () {
53
53
  }, _callee);
54
54
  })));
55
55
  it('renders a disabled OptionRow', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
56
- var image1, _render2, container;
56
+ var _render2, container;
57
57
 
58
58
  return _regenerator["default"].wrap(function _callee2$(_context2) {
59
59
  while (1) {
60
60
  switch (_context2.prev = _context2.next) {
61
61
  case 0:
62
- image1 = // eslint-disable-next-line max-len
63
- "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none' %3E%3Cpath d='M71.4 15.3L54.2 4.2C54 4 53.7 4 53.4 4H26.4C26.1 4 25.8 4.1 25.6 4.2L8.29997 15.3C7.89997 15.6 7.59998 16 7.59998 16.5V32.1V63C7.59998 63.5 7.89997 64 8.29997 64.2L25.5 75.3C25.5 75.3 25.6 75.3 25.6 75.4C25.6 75.4 25.7 75.4 25.7 75.5C25.9 75.6 26 75.6 26.2 75.6H53.2C53.4 75.6 53.5 75.6 53.7 75.5C53.8 75.5 53.8 75.5 53.8 75.4C53.8 75.4 53.9 75.4 53.9 75.3L71.4 64.2C71.5 64.1 71.7 64 71.8 63.8C71.8 63.8 71.8 63.7 71.9 63.7C72 63.6 72.1 63.4 72.1 63.2V63.1C72.1 63 72.1 62.9 72.1 62.8V32.1V16.5C72.1 16 71.8 15.6 71.4 15.3ZM24.9 71.4L10.6 62.2V34.8L24.9 44V71.4ZM51.9 72.6H27.8V44.7H51.9V72.6ZM69.1 31.3L52.9 41.7H26.8L10.6 31.3V17.3L26.8 6.9H52.9L69.1 17.3V31.3Z' fill='%23BD9D70' /%3E%3C/svg%3E";
64
62
  _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_OptionRow.OptionRow, {
65
- image: image1,
66
63
  label: "Option Row",
67
64
  subTitle: "Mostly used to link off to other pages.",
68
65
  as: "a",
69
66
  disabled: true,
67
+ variant: "h3",
70
68
  meta: ""
71
69
  })), container = _render2.container;
72
- expect(_react.screen.getByAltText('Image representing the list item').closest('div')).toHaveStyle({
73
- background: 'none'
74
- });
75
70
  expect(_react.screen.queryByTestId('meta')).not.toBeInTheDocument(); // Check for accessibility issues
76
71
 
77
72
  _context2.t0 = expect;
78
- _context2.next = 7;
73
+ _context2.next = 5;
79
74
  return (0, _jestAxe.axe)(container);
80
75
 
81
- case 7:
76
+ case 5:
82
77
  _context2.t1 = _context2.sent;
83
- _context2.next = 10;
78
+ _context2.next = 8;
84
79
  return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
85
80
 
86
- case 10:
81
+ case 8:
87
82
  case "end":
88
83
  return _context2.stop();
89
84
  }
package/build/system/Table/TableCell.js CHANGED
@@ -29,10 +29,7 @@ var TableCell = function TableCell(_ref) {
29
29
  fontWeight: 'body',
30
30
  px: 3,
31
31
  py: 2,
32
- textAlign: 'left',
33
- '&:first-of-type': {
34
- pl: 5
35
- }
32
+ textAlign: 'left'
36
33
  }, rest.sx);
37
34
  return (0, _jsxRuntime.jsx)(_.Box, (0, _extends2["default"])({
38
35
  as: head ? 'th' : 'td'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "0.23.3",
3
+ "version": "0.23.5",
4
4
  "main": "build/system/index.js",
5
5
  "scripts": {
6
6
  "build-storybook": "build-storybook",
package/src/system/Button/Button.js CHANGED
@@ -17,7 +17,7 @@ const Button = React.forwardRef( ( { sx, ...props }, forwardRef ) => (
17
17
  justifyContent: 'center',
18
18
  height: '36px',
19
19
  py: 0,
20
- textDecoration: props?.to ? 'underline' : 'none',
20
+ textDecoration: 'none',
21
21
  '&:hover': {
22
22
  textDecoration: 'none',
23
23
  },
@@ -40,7 +40,6 @@ Button.displayName = 'Button';
40
40
 
41
41
  Button.propTypes = {
42
42
  sx: PropTypes.object,
43
- to: PropTypes.any,
44
43
  className: PropTypes.any,
45
44
  };
46
45
 
package/src/system/OptionRow/OptionRow.js CHANGED
@@ -18,18 +18,17 @@ const disabledStyles = {
18
18
  borderColor: 'borders.2',
19
19
  background: 'none',
20
20
  boxShadow: 'none',
21
- color: 'grey.70',
21
+ color: 'text',
22
22
  };
23
23
 
24
24
  const gridInlineStyle = {
25
25
  py: 2,
26
26
  px: 2,
27
- mx: -2,
28
27
  };
29
28
 
30
- const regularGridStyle = small => ( {
29
+ const regularGridStyle = () => ( {
31
30
  py: 3,
32
- px: [ 3, 3, small ? 3 : 5 ],
31
+ px: 3,
33
32
  borderBottom: '1px solid',
34
33
  borderColor: 'borders.2',
35
34
  } );
@@ -50,6 +49,7 @@ const OptionRow = React.forwardRef(
50
49
  disabled = false,
51
50
  order = null,
52
51
  className = null,
52
+ variant = 'h3',
53
53
  ...props
54
54
  },
55
55
  forwardRef
@@ -70,7 +70,7 @@ const OptionRow = React.forwardRef(
70
70
  alignItems: 'center',
71
71
  cursor: disabled ? 'auto' : 'pointer',
72
72
  textDecoration: 'none',
73
- color: 'inherit',
73
+ color: 'text',
74
74
  '&:hover': ! disabled && {
75
75
  backgroundColor: 'hover',
76
76
  },
@@ -93,12 +93,7 @@ const OptionRow = React.forwardRef(
93
93
  { React.isValidElement( image ) ? (
94
94
  image
95
95
  ) : (
96
- <img
97
- src={ image }
98
- width={ small ? 32 : 48 }
99
- sx={ { display: 'block' } }
100
- alt="Image representing the list item"
101
- />
96
+ <img src={ image } width={ small ? 32 : 48 } sx={ { display: 'block' } } alt="" />
102
97
  ) }
103
98
  </Box>
104
99
  ) : (
@@ -107,15 +102,24 @@ const OptionRow = React.forwardRef(
107
102
  </Box>
108
103
 
109
104
  <Box sx={ { flex: '1 1 auto' } }>
110
- <Heading variant="h4" sx={ { mb: subTitle || body ? 1 : 0 } }>
105
+ <Heading
106
+ variant={ variant }
107
+ sx={ { mb: subTitle || body ? 1 : 0, fontSize: 2, fontWeight: 'bold' } }
108
+ >
111
109
  { label }
112
110
  { badge && <Badge sx={ { marginLeft: 2 } }>{ badge }</Badge> }
113
111
  </Heading>
114
- { subTitle && <Text sx={ { mb: 1, color: 'muted' } }>{ subTitle }</Text> }
112
+ { subTitle && <Text sx={ { mb: 1, color: 'text' } }>{ subTitle }</Text> }
115
113
  { body && <Text sx={ { mb: 0 } }>{ body }</Text> }
116
114
  </Box>
117
115
  { false !== meta && '' !== meta && (
118
- <Box data-testid="meta">{ meta ? meta : <MdArrowForward size={ 24 } /> }</Box>
116
+ <Box data-testid="meta">
117
+ { meta ? (
118
+ meta
119
+ ) : (
120
+ <MdArrowForward size={ 24 } sx={ { color: 'text' } } aria-hidden="true" />
121
+ ) }
122
+ </Box>
119
123
  ) }
120
124
  </Grid>
121
125
  );
@@ -138,6 +142,7 @@ OptionRow.propTypes = {
138
142
  disabled: PropTypes.bool,
139
143
  order: PropTypes.number,
140
144
  className: PropTypes.any,
145
+ variant: PropTypes.string,
141
146
  };
142
147
 
143
148
  export { OptionRow };
package/src/system/OptionRow/OptionRow.stories.jsx CHANGED
@@ -16,18 +16,20 @@ const image2 =
16
16
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
17
17
 
18
18
  export const Default = () => (
19
- <Box sx={ { mx: -5 } }>
19
+ <Box>
20
20
  <OptionRow
21
21
  image={ image1 }
22
22
  label="Option Row"
23
23
  subTitle="Mostly used to link off to other pages."
24
24
  as="a"
25
+ href="http://google.com/"
25
26
  />
26
27
  <OptionRow
27
28
  image={ image2 }
28
29
  label="Option Row"
29
30
  subTitle="Mostly used to link off to other pages."
30
31
  as="a"
32
+ href="http://google.com/"
31
33
  order={ 2 }
32
34
  />
33
35
  <OptionRow
@@ -38,5 +40,13 @@ export const Default = () => (
38
40
  disabled
39
41
  meta=""
40
42
  />
43
+ <OptionRow
44
+ image={ image2 }
45
+ label="Custom heading HTML h5"
46
+ subTitle="Use the variant prop to adjust the heading structure"
47
+ as={ Box }
48
+ variant="h5"
49
+ meta=""
50
+ />
41
51
  </Box>
42
52
  );
package/src/system/OptionRow/OptionRow.test.js CHANGED
@@ -22,26 +22,17 @@ describe( '<OptionRow />', () => {
22
22
  } );
23
23
 
24
24
  it( 'renders a disabled OptionRow', async () => {
25
- const image1 =
26
- // eslint-disable-next-line max-len
27
- "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none' %3E%3Cpath d='M71.4 15.3L54.2 4.2C54 4 53.7 4 53.4 4H26.4C26.1 4 25.8 4.1 25.6 4.2L8.29997 15.3C7.89997 15.6 7.59998 16 7.59998 16.5V32.1V63C7.59998 63.5 7.89997 64 8.29997 64.2L25.5 75.3C25.5 75.3 25.6 75.3 25.6 75.4C25.6 75.4 25.7 75.4 25.7 75.5C25.9 75.6 26 75.6 26.2 75.6H53.2C53.4 75.6 53.5 75.6 53.7 75.5C53.8 75.5 53.8 75.5 53.8 75.4C53.8 75.4 53.9 75.4 53.9 75.3L71.4 64.2C71.5 64.1 71.7 64 71.8 63.8C71.8 63.8 71.8 63.7 71.9 63.7C72 63.6 72.1 63.4 72.1 63.2V63.1C72.1 63 72.1 62.9 72.1 62.8V32.1V16.5C72.1 16 71.8 15.6 71.4 15.3ZM24.9 71.4L10.6 62.2V34.8L24.9 44V71.4ZM51.9 72.6H27.8V44.7H51.9V72.6ZM69.1 31.3L52.9 41.7H26.8L10.6 31.3V17.3L26.8 6.9H52.9L69.1 17.3V31.3Z' fill='%23BD9D70' /%3E%3C/svg%3E";
28
-
29
25
  const { container } = render(
30
26
  <OptionRow
31
- image={ image1 }
32
27
  label="Option Row"
33
28
  subTitle="Mostly used to link off to other pages."
34
29
  as="a"
35
30
  disabled
31
+ variant="h3"
36
32
  meta=""
37
33
  />
38
34
  );
39
35
 
40
- expect(
41
- screen.getByAltText( 'Image representing the list item' ).closest( 'div' )
42
- ).toHaveStyle( {
43
- background: 'none',
44
- } );
45
36
  expect( screen.queryByTestId( 'meta' ) ).not.toBeInTheDocument();
46
37
 
47
38
  // Check for accessibility issues
package/src/system/Table/TableCell.js CHANGED
@@ -21,9 +21,6 @@ const TableCell = ( { head, children, ...rest } ) => {
21
21
  px: 3,
22
22
  py: 2,
23
23
  textAlign: 'left',
24
- '&:first-of-type': {
25
- pl: 5,
26
- },
27
24
  ...rest.sx,
28
25
  };
29
26