@pingux/astro 2.199.0-alpha.0 → 2.199.1-alpha.0

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 (15) hide show
  1. package/lib/cjs/components/Icon/IconSymbol.js +1 -1
  2. package/lib/cjs/components/Icon/IconSymbol.test.js +8 -1
  3. package/lib/cjs/components/Icon/MaterialSymbolIcon.stories.js +133 -135
  4. package/lib/cjs/index.d.ts +1 -1
  5. package/lib/cjs/index.js +1 -1
  6. package/lib/cjs/types/icon.d.ts +1 -1
  7. package/lib/cjs/types/navBar.d.ts +1 -1
  8. package/lib/cjs/utils/docUtils/iconSizeProps.d.ts +10 -2
  9. package/lib/cjs/utils/docUtils/iconSizeProps.js +17 -5
  10. package/lib/components/Icon/IconSymbol.js +1 -1
  11. package/lib/components/Icon/IconSymbol.test.js +8 -1
  12. package/lib/components/Icon/MaterialSymbolIcon.stories.js +131 -134
  13. package/lib/index.js +1 -1
  14. package/lib/utils/docUtils/iconSizeProps.js +17 -5
  15. package/package.json +2 -2
package/lib/cjs/components/Icon/IconSymbol.js CHANGED
@@ -52,7 +52,7 @@ var IconSymbol = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
52
52
  sx: _objectSpread(_objectSpread({}, rest.sx), {}, {
53
53
  color: color,
54
54
  fontSize: sizeProps.size,
55
- fontVariationSettings: hasFill ? "'FILL' 1" : "'FILL' 0"
55
+ fontVariationSettings: hasFill ? "'FILL' 1, 'opsz' 24" : "'FILL' 0, 'opsz' 24"
56
56
  })
57
57
  }), icon);
58
58
  });
package/lib/cjs/components/Icon/IconSymbol.test.js CHANGED
@@ -63,7 +63,14 @@ test('hasFill prop', function () {
63
63
  hasFill: true
64
64
  });
65
65
  var icon = _react2.screen.getByTestId(testId);
66
- expect(icon).toHaveStyle("font-variation-settings: 'FILL' 1");
66
+ expect(icon).toHaveStyle("font-variation-settings: 'FILL' 1,'opsz' 24");
67
+ });
68
+ test('no hasFill prop', function () {
69
+ getComponent({
70
+ hasFill: false
71
+ });
72
+ var icon = _react2.screen.getByTestId(testId);
73
+ expect(icon).toHaveStyle("font-variation-settings: 'FILL' 0,'opsz' 24");
67
74
  });
68
75
  test('title prop', function () {
69
76
  getComponent();
package/lib/cjs/components/Icon/MaterialSymbolIcon.stories.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
4
4
  var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
5
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
5
+ var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
6
6
  var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
7
  var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
8
8
  var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
@@ -13,17 +13,23 @@ _Object$defineProperty(exports, "__esModule", {
13
13
  value: true
14
14
  });
15
15
  exports["default"] = exports.Sizes = exports.Default = exports.CommonlyUsed = void 0;
16
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
17
+ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
18
+ var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
19
+ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
16
20
  var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
17
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
21
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
18
22
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
19
23
  var _react = _interopRequireDefault(require("react"));
20
24
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
25
+ var _hooks = require("../../hooks");
21
26
  var _index = require("../../index");
22
27
  var _figmaLinks = require("../../utils/designUtils/figmaLinks");
23
28
  var _iconSizeProps = require("../../utils/docUtils/iconSizeProps");
24
29
  var _react2 = require("@emotion/react");
25
- function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
26
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
30
+ var _context6;
31
+ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty2(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
32
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context8, _context9; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(t), !0)).call(_context8, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context9 = ownKeys(Object(t))).call(_context9, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
27
33
  var _default = exports["default"] = {
28
34
  title: 'Components/MaterialSymbolIcon',
29
35
  component: _index.Icon,
@@ -39,22 +45,24 @@ var _default = exports["default"] = {
39
45
  control: {
40
46
  type: 'text'
41
47
  },
42
- description: 'The font icon to render. List of font icons at https://marella.github.io/material-symbols/demo/'
48
+ description: 'The font icon to render. List of font icons at https://marella.github.io/material-symbols/demo/',
49
+ table: {
50
+ type: {
51
+ summary: 'string'
52
+ }
53
+ }
43
54
  }
44
55
  }, _iconSizeProps.sizeArgTypes),
45
56
  args: {
46
- icon: 'disabled_by_default',
47
- className: 'material-symbols-outlined',
48
- size: 'md'
49
- }
50
- };
51
- var Default = exports.Default = function Default(args) {
52
- return (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({}, args, {
53
- icon: "search",
57
+ icon: 'search',
58
+ size: 'md',
54
59
  title: {
55
60
  name: 'Search Icon'
56
61
  }
57
- }));
62
+ }
63
+ };
64
+ var Default = exports.Default = function Default(args) {
65
+ return (0, _react2.jsx)(_index.Icon, args);
58
66
  };
59
67
  Default.parameters = {
60
68
  design: {
@@ -62,141 +70,131 @@ Default.parameters = {
62
70
  url: _figmaLinks.FIGMA_LINKS.icon["default"]
63
71
  }
64
72
  };
73
+ var iconSizes = ['xxs', 'xs', 'sm', 'md'];
74
+ var iconNumericSizes = ['icon-50', 'icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
65
75
  var rowHeadings = ['Size', 'Code Example', 'Icon Example'];
66
- var Sizes = exports.Sizes = function Sizes() {
67
- return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
68
- key: "head"
69
- }, (0, _map["default"])(rowHeadings).call(rowHeadings, function (head) {
70
- return (0, _react2.jsx)(_index.TableCell, {
71
- isHeading: true,
72
- key: head
73
- }, head);
74
- }))), (0, _react2.jsx)(_index.TableBody, {
75
- sx: {
76
- borderBottom: 'unset'
77
- }
78
- }, (0, _react2.jsx)(_index.TableRow, {
76
+ var SizeRow = function SizeRow(_ref) {
77
+ var _context;
78
+ var size = _ref.size,
79
+ px = _ref.px;
80
+ return (0, _react2.jsx)(_index.TableRow, {
81
+ key: size,
79
82
  height: "80px",
80
83
  bg: "transparent !important"
81
84
  }, (0, _react2.jsx)(_index.TableCell, {
82
85
  justifyContent: "center"
83
- }, (0, _react2.jsx)(_index.Text, null, "XXS | 9px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
86
+ }, (0, _react2.jsx)(_index.Text, null, (0, _concat["default"])(_context = "".concat(size.toUpperCase(), " | ")).call(_context, px))), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
84
87
  fontFamily: "monospace"
85
- }, '<Icon icon="search" size="xxs"/>')), (0, _react2.jsx)(_index.TableCell, {
88
+ }, "<Icon icon=\"search\" size=\"".concat(size, "\" />"))), (0, _react2.jsx)(_index.TableCell, {
86
89
  justifyContent: "center"
87
90
  }, (0, _react2.jsx)(_index.Icon, {
88
91
  icon: "search",
89
- title: {
90
- name: 'Search Icon'
91
- },
92
- size: "xxs"
93
- }))), (0, _react2.jsx)(_index.TableRow, {
94
- height: "80px",
95
- bg: "transparent !important"
96
- }, (0, _react2.jsx)(_index.TableCell, {
97
- justifyContent: "center"
98
- }, (0, _react2.jsx)(_index.Text, null, "XS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
99
- fontFamily: "monospace"
100
- }, '<Icon icon="search" size="xs"/>')), (0, _react2.jsx)(_index.TableCell, {
101
- justifyContent: "center"
102
- }, (0, _react2.jsx)(_index.Icon, {
103
- icon: "search",
104
- size: "xs",
92
+ size: size,
105
93
  title: {
106
94
  name: 'Search Icon'
107
95
  }
108
- }))), (0, _react2.jsx)(_index.TableRow, {
109
- height: "80px",
110
- bg: "transparent !important"
111
- }, (0, _react2.jsx)(_index.TableCell, {
112
- justifyContent: "center"
113
- }, (0, _react2.jsx)(_index.Text, null, "SM | 20px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
114
- fontFamily: "monospace"
115
- }, '<Icon icon="search" size="sm"/>')), (0, _react2.jsx)(_index.TableCell, {
116
- justifyContent: "center"
117
- }, (0, _react2.jsx)(_index.Icon, {
118
- icon: "search",
119
- size: "sm",
120
- title: {
121
- name: 'Search Icon'
96
+ })));
97
+ };
98
+ var Sizes = exports.Sizes = function Sizes() {
99
+ var _context2, _context4;
100
+ var theme = (0, _hooks.useGetTheme)();
101
+ var tShirtRows = (0, _filter["default"])(_context2 = (0, _entries["default"])(theme.tShirtSizes)).call(_context2, function (_ref2) {
102
+ var _context3;
103
+ var _ref3 = (0, _slicedToArray2["default"])(_ref2, 1),
104
+ size = _ref3[0];
105
+ return (0, _includes["default"])(_context3 = iconSizes).call(_context3, size);
106
+ });
107
+ var numericRows = (0, _filter["default"])(_context4 = (0, _entries["default"])(theme.tShirtSizes)).call(_context4, function (_ref4) {
108
+ var _context5;
109
+ var _ref5 = (0, _slicedToArray2["default"])(_ref4, 1),
110
+ size = _ref5[0];
111
+ return (0, _includes["default"])(_context5 = iconNumericSizes).call(_context5, size);
112
+ });
113
+ return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
114
+ key: "head"
115
+ }, (0, _map["default"])(rowHeadings).call(rowHeadings, function (head) {
116
+ return (0, _react2.jsx)(_index.TableCell, {
117
+ isHeading: true,
118
+ key: head
119
+ }, head);
120
+ }))), (0, _react2.jsx)(_index.TableBody, {
121
+ sx: {
122
+ borderBottom: 'unset'
122
123
  }
123
- }))), (0, _react2.jsx)(_index.TableRow, {
124
- height: "80px",
125
- bg: "transparent !important"
126
- }, (0, _react2.jsx)(_index.TableCell, {
127
- justifyContent: "center"
128
- }, (0, _react2.jsx)(_index.Text, null, "MD | 25px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
129
- fontFamily: "monospace"
130
- }, '<Icon icon="search" size="md"/>')), (0, _react2.jsx)(_index.TableCell, {
131
- justifyContent: "center"
132
- }, (0, _react2.jsx)(_index.Icon, {
133
- icon: "search",
134
- size: "md",
135
- title: {
136
- name: 'Search Icon'
124
+ }, (0, _map["default"])(tShirtRows).call(tShirtRows, function (_ref6) {
125
+ var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
126
+ size = _ref7[0],
127
+ px = _ref7[1];
128
+ return (0, _react2.jsx)(SizeRow, {
129
+ key: size,
130
+ size: size,
131
+ px: px
132
+ });
133
+ }), (0, _map["default"])(numericRows).call(numericRows, function (_ref8) {
134
+ var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
135
+ size = _ref9[0],
136
+ px = _ref9[1];
137
+ return (0, _react2.jsx)(SizeRow, {
138
+ key: size,
139
+ size: size,
140
+ px: px
141
+ });
142
+ })));
143
+ };
144
+ var allSizes = (0, _concat["default"])(_context6 = []).call(_context6, iconSizes, iconNumericSizes);
145
+ Sizes.parameters = {
146
+ docs: {
147
+ source: {
148
+ code: (0, _map["default"])(allSizes).call(allSizes, function (size) {
149
+ return "<Icon icon=\"search\" size=\"".concat(size, "\" title={{ name: 'Search Icon' }} />");
150
+ }).join('\n')
137
151
  }
138
- })))));
152
+ }
139
153
  };
154
+ var commonIcons = [{
155
+ icon: 'account_circle',
156
+ title: 'Account Icon'
157
+ }, {
158
+ icon: 'groups',
159
+ title: 'Account Group Icon'
160
+ }, {
161
+ icon: 'lock',
162
+ title: 'Lock Icon'
163
+ }, {
164
+ icon: 'search',
165
+ title: 'Search Icon'
166
+ }, {
167
+ icon: 'notifications',
168
+ title: 'Notification Icon'
169
+ }];
140
170
  var CommonlyUsed = exports.CommonlyUsed = function CommonlyUsed() {
141
- return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
142
- isRow: true,
143
- gap: "md",
144
- mb: "xs"
145
- }, (0, _react2.jsx)(_index.Icon, {
146
- icon: "account_circle",
147
- color: "accent.40",
148
- size: "sm",
149
- title: {
150
- name: 'Account Icon'
151
- },
152
- hasFill: true
153
- })), (0, _react2.jsx)(_index.Box, {
154
- isRow: true,
155
- gap: "md",
156
- mb: "xs"
157
- }, (0, _react2.jsx)(_index.Icon, {
158
- icon: "groups",
159
- color: "accent.40",
160
- size: "sm",
161
- title: {
162
- name: 'Account Group Icon'
163
- },
164
- hasFill: true
165
- })), (0, _react2.jsx)(_index.Box, {
166
- isRow: true,
167
- gap: "md",
168
- mb: "xs"
169
- }, (0, _react2.jsx)(_index.Icon, {
170
- icon: "lock",
171
- color: "accent.40",
172
- size: "sm",
173
- title: {
174
- name: 'Lock Icon'
175
- },
176
- hasFill: true
177
- })), (0, _react2.jsx)(_index.Box, {
178
- isRow: true,
179
- gap: "md",
180
- mb: "xs"
181
- }, (0, _react2.jsx)(_index.Icon, {
182
- icon: "search",
183
- color: "accent.40",
184
- size: "sm",
185
- title: {
186
- name: 'Search Icon'
187
- },
188
- hasFill: true
189
- })), (0, _react2.jsx)(_index.Box, {
190
- isRow: true,
191
- gap: "md",
192
- mb: "xs"
193
- }, (0, _react2.jsx)(_index.Icon, {
194
- icon: "notifications",
195
- color: "accent.40",
196
- size: "sm",
197
- title: {
198
- name: 'Notification Icon'
199
- },
200
- hasFill: true
201
- })));
171
+ return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(commonIcons).call(commonIcons, function (_ref0) {
172
+ var icon = _ref0.icon,
173
+ title = _ref0.title;
174
+ return (0, _react2.jsx)(_index.Box, {
175
+ key: icon,
176
+ isRow: true,
177
+ gap: "md",
178
+ mb: "xs"
179
+ }, (0, _react2.jsx)(_index.Icon, {
180
+ icon: icon,
181
+ size: "md",
182
+ title: {
183
+ name: title
184
+ },
185
+ hasFill: true
186
+ }));
187
+ }));
188
+ };
189
+ CommonlyUsed.parameters = {
190
+ docs: {
191
+ source: {
192
+ code: (0, _map["default"])(commonIcons).call(commonIcons, function (_ref1) {
193
+ var _context7;
194
+ var icon = _ref1.icon,
195
+ title = _ref1.title;
196
+ return (0, _concat["default"])(_context7 = "<Icon icon=\"".concat(icon, "\" size=\"md\" title={{ name: '")).call(_context7, title, "' }} hasFill />");
197
+ }).join('\n')
198
+ }
199
+ }
202
200
  };
package/lib/cjs/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import '@material-symbols/font-400';
1
+ import 'material-symbols/outlined.css';
2
2
  export { default as AccordionGridGroup } from './components/AccordionGridGroup';
3
3
  export * from './components/AccordionGridGroup';
4
4
  export { default as AccordionGridItem } from './components/AccordionGridItem';
package/lib/cjs/index.js CHANGED
@@ -1189,7 +1189,7 @@ _Object$defineProperty(exports, "useTreeData", {
1189
1189
  return _reactStately.useTreeData;
1190
1190
  }
1191
1191
  });
1192
- require("@material-symbols/font-400");
1192
+ require("material-symbols/outlined.css");
1193
1193
  var _AccordionGridGroup = _interopRequireWildcard(require("./components/AccordionGridGroup"));
1194
1194
  _forEachInstanceProperty(_context = _Object$keys(_AccordionGridGroup)).call(_context, function (key) {
1195
1195
  if (key === "default" || key === "__esModule") return;
package/lib/cjs/types/icon.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
- import type { MaterialSymbol } from '@material-symbols/font-400';
3
2
  import type { MdiReactIconComponentType } from '@pingux/mdi-react';
3
+ import type { MaterialSymbol } from 'material-symbols';
4
4
  import { TestingAttributes } from './shared/test';
5
5
  import { DOMAttributes, IconSize, StyleProps } from './shared';
6
6
  export type SVGComponentProps = {
package/lib/cjs/types/navBar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { Key } from 'react';
2
- import type { MaterialSymbol } from '@material-symbols/font-400';
2
+ import type { MaterialSymbol } from 'material-symbols';
3
3
  import { ThemeUICSSObject } from 'theme-ui';
4
4
  import { IconProps, IconTypeExtended } from './icon';
5
5
  import { DOMAttributes, StyleProps } from './shared';
package/lib/cjs/utils/docUtils/iconSizeProps.d.ts CHANGED
@@ -1,10 +1,18 @@
1
1
  import PropTypes from 'prop-types';
2
2
  export declare const sizeArgTypes: {
3
3
  size: {
4
- control: string;
4
+ control: {
5
+ type: string;
6
+ };
7
+ options: readonly ["xxs", "xs", "sm", "md"];
5
8
  description: string;
9
+ table: {
10
+ type: {
11
+ summary: string;
12
+ };
13
+ };
6
14
  };
7
15
  };
8
16
  export declare const sizePropTypes: {
9
- size: PropTypes.Requireable<string>;
17
+ size: PropTypes.Requireable<"xxs" | "xs" | "sm" | "md">;
10
18
  };
package/lib/cjs/utils/docUtils/iconSizeProps.js CHANGED
@@ -6,15 +6,27 @@ _Object$defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.sizePropTypes = exports.sizeArgTypes = void 0;
9
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
9
+ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
10
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
10
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
- var _tShirtSizes = require("../devUtils/constants/tShirtSizes");
12
+ var _context;
13
+ var iconSizes = ['xxs', 'xs', 'sm', 'md'];
12
14
  var sizeArgTypes = exports.sizeArgTypes = {
13
15
  size: {
14
- control: 'select',
15
- description: "The size of the icon container. If given a number value, it will be converted to pixels. \n Tshirt sizing is recommended and can be passed to the size prop as \"xxs\", \"xs\", \"sm\" , \"md\" \n rendering 9, 15, 20, and 25 pixel svg containers."
16
+ control: {
17
+ type: 'select'
18
+ },
19
+ options: iconSizes,
20
+ description: 'The size of the icon. Accepts a t-shirt size ("xxs", "xs", "sm", "md") or a number value in pixels. Rendered pixel size may vary by theme.',
21
+ table: {
22
+ type: {
23
+ summary: (0, _map["default"])(iconSizes).call(iconSizes, function (k) {
24
+ return "\"".concat(k, "\"");
25
+ }).join(' | ')
26
+ }
27
+ }
16
28
  }
17
29
  };
18
30
  var sizePropTypes = exports.sizePropTypes = {
19
- size: _propTypes["default"].oneOf((0, _keys["default"])(_tShirtSizes.tShirtSizes))
31
+ size: _propTypes["default"].oneOf((0, _concat["default"])(_context = []).call(_context, iconSizes))
20
32
  };
package/lib/components/Icon/IconSymbol.js CHANGED
@@ -42,7 +42,7 @@ var IconSymbol = /*#__PURE__*/forwardRef(function (props, ref) {
42
42
  sx: _objectSpread(_objectSpread({}, rest.sx), {}, {
43
43
  color: color,
44
44
  fontSize: sizeProps.size,
45
- fontVariationSettings: hasFill ? "'FILL' 1" : "'FILL' 0"
45
+ fontVariationSettings: hasFill ? "'FILL' 1, 'opsz' 24" : "'FILL' 0, 'opsz' 24"
46
46
  })
47
47
  }), icon);
48
48
  });
package/lib/components/Icon/IconSymbol.test.js CHANGED
@@ -60,7 +60,14 @@ test('hasFill prop', function () {
60
60
  hasFill: true
61
61
  });
62
62
  var icon = screen.getByTestId(testId);
63
- expect(icon).toHaveStyle("font-variation-settings: 'FILL' 1");
63
+ expect(icon).toHaveStyle("font-variation-settings: 'FILL' 1,'opsz' 24");
64
+ });
65
+ test('no hasFill prop', function () {
66
+ getComponent({
67
+ hasFill: false
68
+ });
69
+ var icon = screen.getByTestId(testId);
70
+ expect(icon).toHaveStyle("font-variation-settings: 'FILL' 0,'opsz' 24");
64
71
  });
65
72
  test('title prop', function () {
66
73
  getComponent();
package/lib/components/Icon/MaterialSymbolIcon.stories.js CHANGED
@@ -1,18 +1,23 @@
1
1
  import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
2
  import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
3
  import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
4
  import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
5
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
6
  import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
7
  import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
- import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
8
+ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
10
9
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
+ var _context6;
11
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
12
+ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
13
+ import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
14
+ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
11
15
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
12
16
  function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
17
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context8, _context9; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(t), !0)).call(_context8, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context9 = ownKeys(Object(t))).call(_context9, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
14
18
  import React from 'react';
15
19
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
20
+ import { useGetTheme } from '../../hooks';
16
21
  import { Box, Icon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
17
22
  import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
18
23
  import { sizeArgTypes } from '../../utils/docUtils/iconSizeProps';
@@ -32,22 +37,24 @@ export default {
32
37
  control: {
33
38
  type: 'text'
34
39
  },
35
- description: 'The font icon to render. List of font icons at https://marella.github.io/material-symbols/demo/'
40
+ description: 'The font icon to render. List of font icons at https://marella.github.io/material-symbols/demo/',
41
+ table: {
42
+ type: {
43
+ summary: 'string'
44
+ }
45
+ }
36
46
  }
37
47
  }, sizeArgTypes),
38
48
  args: {
39
- icon: 'disabled_by_default',
40
- className: 'material-symbols-outlined',
41
- size: 'md'
42
- }
43
- };
44
- export var Default = function Default(args) {
45
- return ___EmotionJSX(Icon, _extends({}, args, {
46
- icon: "search",
49
+ icon: 'search',
50
+ size: 'md',
47
51
  title: {
48
52
  name: 'Search Icon'
49
53
  }
50
- }));
54
+ }
55
+ };
56
+ export var Default = function Default(args) {
57
+ return ___EmotionJSX(Icon, args);
51
58
  };
52
59
  Default.parameters = {
53
60
  design: {
@@ -55,141 +62,131 @@ Default.parameters = {
55
62
  url: FIGMA_LINKS.icon["default"]
56
63
  }
57
64
  };
65
+ var iconSizes = ['xxs', 'xs', 'sm', 'md'];
66
+ var iconNumericSizes = ['icon-50', 'icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
58
67
  var rowHeadings = ['Size', 'Code Example', 'Icon Example'];
59
- export var Sizes = function Sizes() {
60
- return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
61
- key: "head"
62
- }, _mapInstanceProperty(rowHeadings).call(rowHeadings, function (head) {
63
- return ___EmotionJSX(TableCell, {
64
- isHeading: true,
65
- key: head
66
- }, head);
67
- }))), ___EmotionJSX(TableBody, {
68
- sx: {
69
- borderBottom: 'unset'
70
- }
71
- }, ___EmotionJSX(TableRow, {
72
- height: "80px",
73
- bg: "transparent !important"
74
- }, ___EmotionJSX(TableCell, {
75
- justifyContent: "center"
76
- }, ___EmotionJSX(Text, null, "XXS | 9px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
77
- fontFamily: "monospace"
78
- }, '<Icon icon="search" size="xxs"/>')), ___EmotionJSX(TableCell, {
79
- justifyContent: "center"
80
- }, ___EmotionJSX(Icon, {
81
- icon: "search",
82
- title: {
83
- name: 'Search Icon'
84
- },
85
- size: "xxs"
86
- }))), ___EmotionJSX(TableRow, {
68
+ var SizeRow = function SizeRow(_ref) {
69
+ var _context;
70
+ var size = _ref.size,
71
+ px = _ref.px;
72
+ return ___EmotionJSX(TableRow, {
73
+ key: size,
87
74
  height: "80px",
88
75
  bg: "transparent !important"
89
76
  }, ___EmotionJSX(TableCell, {
90
77
  justifyContent: "center"
91
- }, ___EmotionJSX(Text, null, "XS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
78
+ }, ___EmotionJSX(Text, null, _concatInstanceProperty(_context = "".concat(size.toUpperCase(), " | ")).call(_context, px))), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
92
79
  fontFamily: "monospace"
93
- }, '<Icon icon="search" size="xs"/>')), ___EmotionJSX(TableCell, {
80
+ }, "<Icon icon=\"search\" size=\"".concat(size, "\" />"))), ___EmotionJSX(TableCell, {
94
81
  justifyContent: "center"
95
82
  }, ___EmotionJSX(Icon, {
96
83
  icon: "search",
97
- size: "xs",
84
+ size: size,
98
85
  title: {
99
86
  name: 'Search Icon'
100
87
  }
101
- }))), ___EmotionJSX(TableRow, {
102
- height: "80px",
103
- bg: "transparent !important"
104
- }, ___EmotionJSX(TableCell, {
105
- justifyContent: "center"
106
- }, ___EmotionJSX(Text, null, "SM | 20px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
107
- fontFamily: "monospace"
108
- }, '<Icon icon="search" size="sm"/>')), ___EmotionJSX(TableCell, {
109
- justifyContent: "center"
110
- }, ___EmotionJSX(Icon, {
111
- icon: "search",
112
- size: "sm",
113
- title: {
114
- name: 'Search Icon'
88
+ })));
89
+ };
90
+ export var Sizes = function Sizes() {
91
+ var _context2, _context4;
92
+ var theme = useGetTheme();
93
+ var tShirtRows = _filterInstanceProperty(_context2 = _Object$entries(theme.tShirtSizes)).call(_context2, function (_ref2) {
94
+ var _context3;
95
+ var _ref3 = _slicedToArray(_ref2, 1),
96
+ size = _ref3[0];
97
+ return _includesInstanceProperty(_context3 = iconSizes).call(_context3, size);
98
+ });
99
+ var numericRows = _filterInstanceProperty(_context4 = _Object$entries(theme.tShirtSizes)).call(_context4, function (_ref4) {
100
+ var _context5;
101
+ var _ref5 = _slicedToArray(_ref4, 1),
102
+ size = _ref5[0];
103
+ return _includesInstanceProperty(_context5 = iconNumericSizes).call(_context5, size);
104
+ });
105
+ return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
106
+ key: "head"
107
+ }, _mapInstanceProperty(rowHeadings).call(rowHeadings, function (head) {
108
+ return ___EmotionJSX(TableCell, {
109
+ isHeading: true,
110
+ key: head
111
+ }, head);
112
+ }))), ___EmotionJSX(TableBody, {
113
+ sx: {
114
+ borderBottom: 'unset'
115
115
  }
116
- }))), ___EmotionJSX(TableRow, {
117
- height: "80px",
118
- bg: "transparent !important"
119
- }, ___EmotionJSX(TableCell, {
120
- justifyContent: "center"
121
- }, ___EmotionJSX(Text, null, "MD | 25px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
122
- fontFamily: "monospace"
123
- }, '<Icon icon="search" size="md"/>')), ___EmotionJSX(TableCell, {
124
- justifyContent: "center"
125
- }, ___EmotionJSX(Icon, {
126
- icon: "search",
127
- size: "md",
128
- title: {
129
- name: 'Search Icon'
116
+ }, _mapInstanceProperty(tShirtRows).call(tShirtRows, function (_ref6) {
117
+ var _ref7 = _slicedToArray(_ref6, 2),
118
+ size = _ref7[0],
119
+ px = _ref7[1];
120
+ return ___EmotionJSX(SizeRow, {
121
+ key: size,
122
+ size: size,
123
+ px: px
124
+ });
125
+ }), _mapInstanceProperty(numericRows).call(numericRows, function (_ref8) {
126
+ var _ref9 = _slicedToArray(_ref8, 2),
127
+ size = _ref9[0],
128
+ px = _ref9[1];
129
+ return ___EmotionJSX(SizeRow, {
130
+ key: size,
131
+ size: size,
132
+ px: px
133
+ });
134
+ })));
135
+ };
136
+ var allSizes = _concatInstanceProperty(_context6 = []).call(_context6, iconSizes, iconNumericSizes);
137
+ Sizes.parameters = {
138
+ docs: {
139
+ source: {
140
+ code: _mapInstanceProperty(allSizes).call(allSizes, function (size) {
141
+ return "<Icon icon=\"search\" size=\"".concat(size, "\" title={{ name: 'Search Icon' }} />");
142
+ }).join('\n')
130
143
  }
131
- })))));
144
+ }
132
145
  };
146
+ var commonIcons = [{
147
+ icon: 'account_circle',
148
+ title: 'Account Icon'
149
+ }, {
150
+ icon: 'groups',
151
+ title: 'Account Group Icon'
152
+ }, {
153
+ icon: 'lock',
154
+ title: 'Lock Icon'
155
+ }, {
156
+ icon: 'search',
157
+ title: 'Search Icon'
158
+ }, {
159
+ icon: 'notifications',
160
+ title: 'Notification Icon'
161
+ }];
133
162
  export var CommonlyUsed = function CommonlyUsed() {
134
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
135
- isRow: true,
136
- gap: "md",
137
- mb: "xs"
138
- }, ___EmotionJSX(Icon, {
139
- icon: "account_circle",
140
- color: "accent.40",
141
- size: "sm",
142
- title: {
143
- name: 'Account Icon'
144
- },
145
- hasFill: true
146
- })), ___EmotionJSX(Box, {
147
- isRow: true,
148
- gap: "md",
149
- mb: "xs"
150
- }, ___EmotionJSX(Icon, {
151
- icon: "groups",
152
- color: "accent.40",
153
- size: "sm",
154
- title: {
155
- name: 'Account Group Icon'
156
- },
157
- hasFill: true
158
- })), ___EmotionJSX(Box, {
159
- isRow: true,
160
- gap: "md",
161
- mb: "xs"
162
- }, ___EmotionJSX(Icon, {
163
- icon: "lock",
164
- color: "accent.40",
165
- size: "sm",
166
- title: {
167
- name: 'Lock Icon'
168
- },
169
- hasFill: true
170
- })), ___EmotionJSX(Box, {
171
- isRow: true,
172
- gap: "md",
173
- mb: "xs"
174
- }, ___EmotionJSX(Icon, {
175
- icon: "search",
176
- color: "accent.40",
177
- size: "sm",
178
- title: {
179
- name: 'Search Icon'
180
- },
181
- hasFill: true
182
- })), ___EmotionJSX(Box, {
183
- isRow: true,
184
- gap: "md",
185
- mb: "xs"
186
- }, ___EmotionJSX(Icon, {
187
- icon: "notifications",
188
- color: "accent.40",
189
- size: "sm",
190
- title: {
191
- name: 'Notification Icon'
192
- },
193
- hasFill: true
194
- })));
163
+ return ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(commonIcons).call(commonIcons, function (_ref0) {
164
+ var icon = _ref0.icon,
165
+ title = _ref0.title;
166
+ return ___EmotionJSX(Box, {
167
+ key: icon,
168
+ isRow: true,
169
+ gap: "md",
170
+ mb: "xs"
171
+ }, ___EmotionJSX(Icon, {
172
+ icon: icon,
173
+ size: "md",
174
+ title: {
175
+ name: title
176
+ },
177
+ hasFill: true
178
+ }));
179
+ }));
180
+ };
181
+ CommonlyUsed.parameters = {
182
+ docs: {
183
+ source: {
184
+ code: _mapInstanceProperty(commonIcons).call(commonIcons, function (_ref1) {
185
+ var _context7;
186
+ var icon = _ref1.icon,
187
+ title = _ref1.title;
188
+ return _concatInstanceProperty(_context7 = "<Icon icon=\"".concat(icon, "\" size=\"md\" title={{ name: '")).call(_context7, title, "' }} hasFill />");
189
+ }).join('\n')
190
+ }
191
+ }
195
192
  };
package/lib/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // NOTE: Named exports must be unique across files, otherwise collisions will occur.
2
2
 
3
3
  /* eslint-disable import/export */
4
- import '@material-symbols/font-400';
4
+ import 'material-symbols/outlined.css';
5
5
  export { default as AccordionGridGroup } from './components/AccordionGridGroup';
6
6
  export * from './components/AccordionGridGroup';
7
7
  export { default as AccordionGridItem } from './components/AccordionGridItem';
package/lib/utils/docUtils/iconSizeProps.js CHANGED
@@ -1,12 +1,24 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
1
+ var _context;
2
+ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
3
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
2
4
  import PropTypes from 'prop-types';
3
- import { tShirtSizes } from '../devUtils/constants/tShirtSizes';
5
+ var iconSizes = ['xxs', 'xs', 'sm', 'md'];
4
6
  export var sizeArgTypes = {
5
7
  size: {
6
- control: 'select',
7
- description: "The size of the icon container. If given a number value, it will be converted to pixels. \n Tshirt sizing is recommended and can be passed to the size prop as \"xxs\", \"xs\", \"sm\" , \"md\" \n rendering 9, 15, 20, and 25 pixel svg containers."
8
+ control: {
9
+ type: 'select'
10
+ },
11
+ options: iconSizes,
12
+ description: 'The size of the icon. Accepts a t-shirt size ("xxs", "xs", "sm", "md") or a number value in pixels. Rendered pixel size may vary by theme.',
13
+ table: {
14
+ type: {
15
+ summary: _mapInstanceProperty(iconSizes).call(iconSizes, function (k) {
16
+ return "\"".concat(k, "\"");
17
+ }).join(' | ')
18
+ }
19
+ }
8
20
  }
9
21
  };
10
22
  export var sizePropTypes = {
11
- size: PropTypes.oneOf(_Object$keys(tShirtSizes))
23
+ size: PropTypes.oneOf(_concatInstanceProperty(_context = []).call(_context, iconSizes))
12
24
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.199.0-alpha.0",
3
+ "version": "2.199.1-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",
@@ -44,7 +44,6 @@
44
44
  "@fortawesome/react-fontawesome": "^0.2.2",
45
45
  "@internationalized/date": "^3.5.3",
46
46
  "@internationalized/number": "^3.6.0",
47
- "@material-symbols/font-400": "^0.40.2",
48
47
  "@monaco-editor/react": "4.4.2",
49
48
  "@pingux/mdi-react": "^1.2.0",
50
49
  "@pingux/onyx-tokens": "^0.18.0",
@@ -110,6 +109,7 @@
110
109
  "listbox-virtualizer": "npm:@react-aria/virtualizer@3.6.0",
111
110
  "lodash": "^4.17.23",
112
111
  "markdown-to-jsx": "^7.7.4",
112
+ "material-symbols": "^0.44.9",
113
113
  "monaco-editor": "0.34.1",
114
114
  "pluralize": "^8.0.0",
115
115
  "prism-react-renderer": "1.2.1",