@pingux/astro 2.29.0 → 2.30.0-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 (9) hide show
  1. package/lib/cjs/components/Bracket/Bracket.js +8 -5
  2. package/lib/cjs/components/Bracket/Bracket.mdx +4 -2
  3. package/lib/cjs/components/Bracket/Bracket.stories.js +25 -60
  4. package/lib/cjs/utils/designUtils/figmaLinks.js +4 -0
  5. package/lib/components/Bracket/Bracket.js +8 -5
  6. package/lib/components/Bracket/Bracket.mdx +4 -2
  7. package/lib/components/Bracket/Bracket.stories.js +23 -59
  8. package/lib/utils/designUtils/figmaLinks.js +4 -0
  9. package/package.json +1 -1
package/lib/cjs/components/Bracket/Bracket.js CHANGED
@@ -60,22 +60,25 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
60
60
  "aria-labelledby": "bracket-fill-vertical-icon-title-".concat(bracketId)
61
61
  }, (0, _react2.jsx)("title", {
62
62
  id: "bracket-fill-vertical-icon-title-".concat(bracketId)
63
- }, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 3"), (0, _react2.jsx)("line", {
63
+ }, "bracket-fill"), (0, _react2.jsx)("g", {
64
+ transform: "translate(-0.85, 0)"
65
+ }, (0, _react2.jsx)("title", null, "Layer 3"), (0, _react2.jsx)("line", {
64
66
  strokeLinecap: "undefined",
65
67
  strokeLinejoin: "undefined",
66
68
  y2: "0",
67
- x2: "0",
69
+ x2: "1",
68
70
  y1: "10",
69
- x1: "0",
71
+ x1: "1",
70
72
  stroke: color,
71
73
  fill: "none"
74
+ // strokeWidth={2}
72
75
  })))), (0, _react2.jsx)(_index.Box, {
73
76
  flexBasis: "50%"
74
77
  }, (0, _react2.jsx)("svg", {
75
78
  xmlns: "http://www.w3.org/2000/svg",
76
79
  version: "1.1",
77
80
  preserveAspectRatio: "none",
78
- viewBox: "0 0 10 10",
81
+ viewBox: "0 0 5 5",
79
82
  style: {
80
83
  flexGrow: 1
81
84
  },
@@ -99,7 +102,7 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
99
102
  }, (0, _react2.jsx)("title", {
100
103
  id: "bracket-fill-2-icon-title-".concat(bracketFillTwoId)
101
104
  }, "bracket-fill"), (0, _react2.jsx)("g", {
102
- transform: "translate(-1, 0)"
105
+ transform: "translate(-0.5, -0.5)"
103
106
  }, (0, _react2.jsx)("title", null, "Layer 2"), (0, _react2.jsx)("path", {
104
107
  fill: "none",
105
108
  stroke: color,
package/lib/cjs/components/Bracket/Bracket.mdx CHANGED
@@ -10,8 +10,10 @@ Items such as headings, directories, and subitems are displayed in a tree struct
10
10
  Brackets should avoid cross-referencing. Try separating the content into sections instead.
11
11
  Brackets shouldn’t display too many levels of depth to avoid overflow.
12
12
 
13
- ### Required components
13
+ ### Recommended Use
14
14
 
15
- This component requires the [Badge](./?path=/docs/components-badge--default),[Box](./?path=/story/components-box--default), and [Text](./?path=/docs/components-text--default) components.
15
+ The common use case for this component can be checked in [ConditionFilter recipe](?path=/docs/recipes-condition-filter--docs)
16
16
 
17
+ ### Required components
17
18
 
19
+ This component can be used independently and does not require additional components.
package/lib/cjs/components/Bracket/Bracket.stories.js CHANGED
@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
5
5
  _Object$defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = exports.Default = void 0;
9
- var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
8
+ exports["default"] = exports.IsLast = exports.Default = void 0;
10
9
  var _react = _interopRequireDefault(require("react"));
11
10
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
12
11
  var _index = require("../../index");
12
+ var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
13
13
  var _Bracket = _interopRequireDefault(require("./Bracket.mdx"));
14
14
  var _react2 = require("@emotion/react");
15
15
  var _default = {
@@ -28,65 +28,30 @@ var _default = {
28
28
  };
29
29
  exports["default"] = _default;
30
30
  var Default = function Default() {
31
- var anyConditions = [{
32
- field1: 'Group',
33
- field3: 'Marketing',
34
- key: 'Group1Field'
35
- }, {
36
- field1: 'Group',
37
- field3: 'UX Team',
38
- key: 'Group2Field'
39
- }];
40
- var customBadgeStyles = {
41
- '& > span': {
42
- textTransform: 'none',
43
- fontWeight: '500'
44
- },
45
- minWidth: '65px',
46
- 'z-index': '1'
47
- };
48
31
  return (0, _react2.jsx)(_index.Box, {
49
32
  p: "md",
50
- ml: "sm",
51
- bg: "background"
52
- }, (0, _react2.jsx)(_index.Box, {
53
- isRow: true
54
- }, (0, _react2.jsx)(_index.Badge, {
55
- label: "Any",
56
- bg: "neutral.20",
57
- mr: "sm",
58
- sx: customBadgeStyles,
59
- alignSelf: "center"
60
- }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
61
- return (0, _react2.jsx)(_index.Box, {
62
- isRow: true,
63
- key: item.key
64
- }, (0, _react2.jsx)(_index.Bracket, {
65
- isLast: index === anyConditions.length - 1
66
- }), (0, _react2.jsx)(_index.Box, {
67
- mt: "md",
68
- variant: "forms.input.fieldControlWrapper",
69
- bg: "white",
70
- isRow: true,
71
- alignItems: "center",
72
- borderRadius: "4px",
73
- width: "100%",
74
- sx: {
75
- '&::after': {
76
- bg: 'decorative.4'
77
- }
78
- }
79
- }, (0, _react2.jsx)(_index.Text, {
80
- pl: "md",
81
- pr: "sm"
82
- }, item.field1), (0, _react2.jsx)(_index.Badge, {
83
- label: "Equals",
84
- bg: "accent.90",
85
- textColor: "neutral.10",
86
- sx: customBadgeStyles,
87
- mr: "sm",
88
- alignSelf: "center"
89
- }), (0, _react2.jsx)(_index.Text, null, item.field3)));
33
+ ml: "sm"
34
+ }, (0, _react2.jsx)(_index.Bracket, null));
35
+ };
36
+ exports.Default = Default;
37
+ Default.parameters = {
38
+ design: {
39
+ type: 'figma',
40
+ url: _figmaLinks.FIGMA_LINKS.bracket["default"]
41
+ }
42
+ };
43
+ var IsLast = function IsLast() {
44
+ return (0, _react2.jsx)(_index.Box, {
45
+ p: "md",
46
+ ml: "sm"
47
+ }, (0, _react2.jsx)(_index.Bracket, {
48
+ isLast: true
90
49
  }));
91
50
  };
92
- exports.Default = Default;
51
+ exports.IsLast = IsLast;
52
+ IsLast.parameters = {
53
+ design: {
54
+ type: 'figma',
55
+ url: _figmaLinks.FIGMA_LINKS.bracket.isLast
56
+ }
57
+ };
package/lib/cjs/utils/designUtils/figmaLinks.js CHANGED
@@ -23,6 +23,10 @@ var FIGMA_LINKS = {
23
23
  convenienceDefault: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43601%3A18124&mode=dev',
24
24
  calloutBadges: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=12854-33198&mode=design&t=cJyYBxLFH8D5XxOw-0'
25
25
  },
26
+ bracket: {
27
+ "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=45365%3A7834&mode=dev',
28
+ isLast: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=45365%3A7832&mode=dev'
29
+ },
26
30
  breadcrumbs: {
27
31
  "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=1162-11924&t=8Wwd3tIBh3GEjCJB-0'
28
32
  },
package/lib/components/Bracket/Bracket.js CHANGED
@@ -47,22 +47,25 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
47
47
  "aria-labelledby": "bracket-fill-vertical-icon-title-".concat(bracketId)
48
48
  }, ___EmotionJSX("title", {
49
49
  id: "bracket-fill-vertical-icon-title-".concat(bracketId)
50
- }, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 3"), ___EmotionJSX("line", {
50
+ }, "bracket-fill"), ___EmotionJSX("g", {
51
+ transform: "translate(-0.85, 0)"
52
+ }, ___EmotionJSX("title", null, "Layer 3"), ___EmotionJSX("line", {
51
53
  strokeLinecap: "undefined",
52
54
  strokeLinejoin: "undefined",
53
55
  y2: "0",
54
- x2: "0",
56
+ x2: "1",
55
57
  y1: "10",
56
- x1: "0",
58
+ x1: "1",
57
59
  stroke: color,
58
60
  fill: "none"
61
+ // strokeWidth={2}
59
62
  })))), ___EmotionJSX(Box, {
60
63
  flexBasis: "50%"
61
64
  }, ___EmotionJSX("svg", {
62
65
  xmlns: "http://www.w3.org/2000/svg",
63
66
  version: "1.1",
64
67
  preserveAspectRatio: "none",
65
- viewBox: "0 0 10 10",
68
+ viewBox: "0 0 5 5",
66
69
  style: {
67
70
  flexGrow: 1
68
71
  },
@@ -86,7 +89,7 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
86
89
  }, ___EmotionJSX("title", {
87
90
  id: "bracket-fill-2-icon-title-".concat(bracketFillTwoId)
88
91
  }, "bracket-fill"), ___EmotionJSX("g", {
89
- transform: "translate(-1, 0)"
92
+ transform: "translate(-0.5, -0.5)"
90
93
  }, ___EmotionJSX("title", null, "Layer 2"), ___EmotionJSX("path", {
91
94
  fill: "none",
92
95
  stroke: color,
package/lib/components/Bracket/Bracket.mdx CHANGED
@@ -10,8 +10,10 @@ Items such as headings, directories, and subitems are displayed in a tree struct
10
10
  Brackets should avoid cross-referencing. Try separating the content into sections instead.
11
11
  Brackets shouldn’t display too many levels of depth to avoid overflow.
12
12
 
13
- ### Required components
13
+ ### Recommended Use
14
14
 
15
- This component requires the [Badge](./?path=/docs/components-badge--default),[Box](./?path=/story/components-box--default), and [Text](./?path=/docs/components-text--default) components.
15
+ The common use case for this component can be checked in [ConditionFilter recipe](?path=/docs/recipes-condition-filter--docs)
16
16
 
17
+ ### Required components
17
18
 
19
+ This component can be used independently and does not require additional components.
package/lib/components/Bracket/Bracket.stories.js CHANGED
@@ -1,7 +1,7 @@
1
- import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
2
1
  import React from 'react';
3
2
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
4
- import { Badge, Box, Bracket, Text } from '../../index';
3
+ import { Box, Bracket } from '../../index';
4
+ import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
5
5
  import BracketReadme from './Bracket.mdx';
6
6
  import { jsx as ___EmotionJSX } from "@emotion/react";
7
7
  export default {
@@ -19,64 +19,28 @@ export default {
19
19
  }
20
20
  };
21
21
  export var Default = function Default() {
22
- var anyConditions = [{
23
- field1: 'Group',
24
- field3: 'Marketing',
25
- key: 'Group1Field'
26
- }, {
27
- field1: 'Group',
28
- field3: 'UX Team',
29
- key: 'Group2Field'
30
- }];
31
- var customBadgeStyles = {
32
- '& > span': {
33
- textTransform: 'none',
34
- fontWeight: '500'
35
- },
36
- minWidth: '65px',
37
- 'z-index': '1'
38
- };
39
22
  return ___EmotionJSX(Box, {
40
23
  p: "md",
41
- ml: "sm",
42
- bg: "background"
43
- }, ___EmotionJSX(Box, {
44
- isRow: true
45
- }, ___EmotionJSX(Badge, {
46
- label: "Any",
47
- bg: "neutral.20",
48
- mr: "sm",
49
- sx: customBadgeStyles,
50
- alignSelf: "center"
51
- }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
52
- return ___EmotionJSX(Box, {
53
- isRow: true,
54
- key: item.key
55
- }, ___EmotionJSX(Bracket, {
56
- isLast: index === anyConditions.length - 1
57
- }), ___EmotionJSX(Box, {
58
- mt: "md",
59
- variant: "forms.input.fieldControlWrapper",
60
- bg: "white",
61
- isRow: true,
62
- alignItems: "center",
63
- borderRadius: "4px",
64
- width: "100%",
65
- sx: {
66
- '&::after': {
67
- bg: 'decorative.4'
68
- }
69
- }
70
- }, ___EmotionJSX(Text, {
71
- pl: "md",
72
- pr: "sm"
73
- }, item.field1), ___EmotionJSX(Badge, {
74
- label: "Equals",
75
- bg: "accent.90",
76
- textColor: "neutral.10",
77
- sx: customBadgeStyles,
78
- mr: "sm",
79
- alignSelf: "center"
80
- }), ___EmotionJSX(Text, null, item.field3)));
24
+ ml: "sm"
25
+ }, ___EmotionJSX(Bracket, null));
26
+ };
27
+ Default.parameters = {
28
+ design: {
29
+ type: 'figma',
30
+ url: FIGMA_LINKS.bracket["default"]
31
+ }
32
+ };
33
+ export var IsLast = function IsLast() {
34
+ return ___EmotionJSX(Box, {
35
+ p: "md",
36
+ ml: "sm"
37
+ }, ___EmotionJSX(Bracket, {
38
+ isLast: true
81
39
  }));
40
+ };
41
+ IsLast.parameters = {
42
+ design: {
43
+ type: 'figma',
44
+ url: FIGMA_LINKS.bracket.isLast
45
+ }
82
46
  };
package/lib/utils/designUtils/figmaLinks.js CHANGED
@@ -16,6 +16,10 @@ export var FIGMA_LINKS = {
16
16
  convenienceDefault: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43601%3A18124&mode=dev',
17
17
  calloutBadges: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=12854-33198&mode=design&t=cJyYBxLFH8D5XxOw-0'
18
18
  },
19
+ bracket: {
20
+ "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=45365%3A7834&mode=dev',
21
+ isLast: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=45365%3A7832&mode=dev'
22
+ },
19
23
  breadcrumbs: {
20
24
  "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=1162-11924&t=8Wwd3tIBh3GEjCJB-0'
21
25
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.29.0",
3
+ "version": "2.30.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",