@pingux/astro 2.40.1-alpha.0 → 2.40.1-alpha.1

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/Callout/Callout.mdx +1 -1
  2. package/lib/cjs/components/Callout/Callout.stories.d.ts +10 -0
  3. package/lib/cjs/components/Callout/Callout.stories.js +38 -25
  4. package/lib/cjs/utils/designUtils/figmaLinks.d.ts +4 -0
  5. package/lib/cjs/utils/designUtils/figmaLinks.js +5 -1
  6. package/lib/components/Callout/Callout.mdx +1 -1
  7. package/lib/components/Callout/Callout.stories.js +33 -21
  8. package/lib/utils/designUtils/figmaLinks.js +5 -1
  9. package/package.json +1 -1
package/lib/cjs/components/Callout/Callout.mdx CHANGED
@@ -9,7 +9,7 @@ Callouts should contain only 1 or 2 pieces of information and display at the top
9
9
 
10
10
  ### Required components
11
11
 
12
- This component requires the [Link](./?path=/docs/components-link--default) and [Text](./?path=/docs/components-text--default) components.
12
+ This component requires the [Text](./?path=/docs/components-text--default) component.
13
13
 
14
14
  ### Accessibility
15
15
 
package/lib/cjs/components/Callout/Callout.stories.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { StoryFn } from '@storybook/react';
2
3
  import { CalloutProps } from '../../types/callout';
3
4
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
@@ -5,4 +6,13 @@ export default _default;
5
6
  export declare const Default: StoryFn<CalloutProps>;
6
7
  export declare const ErrorStatus: StoryFn;
7
8
  export declare const Success: StoryFn;
9
+ export declare const WithLink: {
10
+ (args: any): React.JSX.Element;
11
+ parameters: {
12
+ design: {
13
+ type: string;
14
+ url: string;
15
+ };
16
+ };
17
+ };
8
18
  export declare const Warning: StoryFn;
package/lib/cjs/components/Callout/Callout.stories.js CHANGED
@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
12
12
  _Object$defineProperty(exports, "__esModule", {
13
13
  value: true
14
14
  });
15
- exports["default"] = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
15
+ exports["default"] = exports.WithLink = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
16
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
17
17
  var _react = _interopRequireDefault(require("react"));
18
18
  var _storybookAddonDesigns = require("storybook-addon-designs");
@@ -43,12 +43,7 @@ var _default = {
43
43
  }; // main
44
44
  exports["default"] = _default;
45
45
  var Default = function Default(args) {
46
- return (0, _react2.jsx)(_index.Callout, args, (0, _react2.jsx)(_index.Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", (0, _react2.jsx)(_index.Link, {
47
- href: "https://pingidentity.com",
48
- target: "_blank",
49
- "aria-label": "".concat(_statuses["default"].DEFAULT, "-callout"),
50
- variant: "app"
51
- }, ' ', "Read More")));
46
+ return (0, _react2.jsx)(_index.Callout, args, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
52
47
  };
53
48
  exports.Default = Default;
54
49
  Default.parameters = {
@@ -60,36 +55,54 @@ Default.parameters = {
60
55
  var ErrorStatus = function ErrorStatus() {
61
56
  return (0, _react2.jsx)(_index.Callout, {
62
57
  status: _statuses["default"].ERROR
63
- }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", (0, _react2.jsx)(_index.Link, {
64
- href: "https://pingidentity.com",
65
- target: "_blank",
66
- "aria-label": "".concat(_statuses["default"].ERROR, "-callout"),
67
- variant: "app"
68
- }, ' ', "Read More")));
58
+ }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat. Etiam at urna erat."));
59
+ };
60
+ exports.ErrorStatus = ErrorStatus;
61
+ ErrorStatus.parameters = {
62
+ design: {
63
+ type: 'figma',
64
+ url: _figmaLinks.FIGMA_LINKS.callout.errorStatus
65
+ }
69
66
  };
70
67
 
71
68
  // Avoiding using Error as the function name due to it being a JS built-in method
72
- exports.ErrorStatus = ErrorStatus;
73
69
  ErrorStatus.storyName = 'Error';
74
70
  var Success = function Success() {
75
71
  return (0, _react2.jsx)(_index.Callout, {
76
72
  status: _statuses["default"].SUCCESS
77
- }, (0, _react2.jsx)(_index.Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", (0, _react2.jsx)(_index.Link, {
73
+ }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
74
+ };
75
+ exports.Success = Success;
76
+ Success.parameters = {
77
+ design: {
78
+ type: 'figma',
79
+ url: _figmaLinks.FIGMA_LINKS.callout.success
80
+ }
81
+ };
82
+ var WithLink = function WithLink(args) {
83
+ return (0, _react2.jsx)(_index.Callout, args, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.", ' ', (0, _react2.jsx)(_index.Link, {
78
84
  href: "https://pingidentity.com",
79
85
  target: "_blank",
80
- "aria-label": "".concat(_statuses["default"].SUCCESS, "-callout"),
86
+ "aria-label": "".concat(_statuses["default"].DEFAULT, "-callout"),
81
87
  variant: "app"
82
- }, ' ', "Read More")));
88
+ }, "Learn More")));
89
+ };
90
+ exports.WithLink = WithLink;
91
+ WithLink.parameters = {
92
+ design: {
93
+ type: 'figma',
94
+ url: _figmaLinks.FIGMA_LINKS.callout.withLink
95
+ }
83
96
  };
84
- exports.Success = Success;
85
97
  var Warning = function Warning() {
86
98
  return (0, _react2.jsx)(_index.Callout, {
87
99
  status: _statuses["default"].WARNING
88
- }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Callout box will grow in height with the content", (0, _react2.jsx)(_index.Link, {
89
- href: "https://pingidentity.com",
90
- target: "_blank",
91
- "aria-label": "".concat(_statuses["default"].WARNING, "-callout"),
92
- variant: "app"
93
- }, ' ', "Read More")));
100
+ }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
94
101
  };
95
- exports.Warning = Warning;
102
+ exports.Warning = Warning;
103
+ Warning.parameters = {
104
+ design: {
105
+ type: 'figma',
106
+ url: _figmaLinks.FIGMA_LINKS.callout.warning
107
+ }
108
+ };
package/lib/cjs/utils/designUtils/figmaLinks.d.ts CHANGED
@@ -52,6 +52,10 @@ export declare const FIGMA_LINKS: {
52
52
  };
53
53
  callout: {
54
54
  default: string;
55
+ errorStatus: string;
56
+ success: string;
57
+ warning: string;
58
+ withLink: string;
55
59
  };
56
60
  card: {
57
61
  default: string;
package/lib/cjs/utils/designUtils/figmaLinks.js CHANGED
@@ -58,7 +58,11 @@ var FIGMA_LINKS = {
58
58
  autofocus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16768&mode=design&t=PX1Q47IuuVvOafDQ-4'
59
59
  },
60
60
  callout: {
61
- "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289-33201&t=VgqEexa1CXAXfPpp-0'
61
+ "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A506&mode=dev',
62
+ errorStatus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289%3A33238&mode=dev',
63
+ success: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A511&mode=dev',
64
+ warning: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A501&mode=dev',
65
+ withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45652%3A1604&mode=dev'
62
66
  },
63
67
  card: {
64
68
  "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=335%3A1780&mode=dev',
package/lib/components/Callout/Callout.mdx CHANGED
@@ -9,7 +9,7 @@ Callouts should contain only 1 or 2 pieces of information and display at the top
9
9
 
10
10
  ### Required components
11
11
 
12
- This component requires the [Link](./?path=/docs/components-link--default) and [Text](./?path=/docs/components-text--default) components.
12
+ This component requires the [Text](./?path=/docs/components-text--default) component.
13
13
 
14
14
  ### Accessibility
15
15
 
package/lib/components/Callout/Callout.stories.js CHANGED
@@ -37,12 +37,7 @@ export default {
37
37
 
38
38
  // main
39
39
  export var Default = function Default(args) {
40
- return ___EmotionJSX(Callout, args, ___EmotionJSX(Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", ___EmotionJSX(Link, {
41
- href: "https://pingidentity.com",
42
- target: "_blank",
43
- "aria-label": "".concat(statuses.DEFAULT, "-callout"),
44
- variant: "app"
45
- }, ' ', "Read More")));
40
+ return ___EmotionJSX(Callout, args, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
46
41
  };
47
42
  Default.parameters = {
48
43
  design: {
@@ -53,12 +48,13 @@ Default.parameters = {
53
48
  export var ErrorStatus = function ErrorStatus() {
54
49
  return ___EmotionJSX(Callout, {
55
50
  status: statuses.ERROR
56
- }, ___EmotionJSX(Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", ___EmotionJSX(Link, {
57
- href: "https://pingidentity.com",
58
- target: "_blank",
59
- "aria-label": "".concat(statuses.ERROR, "-callout"),
60
- variant: "app"
61
- }, ' ', "Read More")));
51
+ }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat. Etiam at urna erat."));
52
+ };
53
+ ErrorStatus.parameters = {
54
+ design: {
55
+ type: 'figma',
56
+ url: FIGMA_LINKS.callout.errorStatus
57
+ }
62
58
  };
63
59
 
64
60
  // Avoiding using Error as the function name due to it being a JS built-in method
@@ -66,20 +62,36 @@ ErrorStatus.storyName = 'Error';
66
62
  export var Success = function Success() {
67
63
  return ___EmotionJSX(Callout, {
68
64
  status: statuses.SUCCESS
69
- }, ___EmotionJSX(Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", ___EmotionJSX(Link, {
65
+ }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
66
+ };
67
+ Success.parameters = {
68
+ design: {
69
+ type: 'figma',
70
+ url: FIGMA_LINKS.callout.success
71
+ }
72
+ };
73
+ export var WithLink = function WithLink(args) {
74
+ return ___EmotionJSX(Callout, args, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.", ' ', ___EmotionJSX(Link, {
70
75
  href: "https://pingidentity.com",
71
76
  target: "_blank",
72
- "aria-label": "".concat(statuses.SUCCESS, "-callout"),
77
+ "aria-label": "".concat(statuses.DEFAULT, "-callout"),
73
78
  variant: "app"
74
- }, ' ', "Read More")));
79
+ }, "Learn More")));
80
+ };
81
+ WithLink.parameters = {
82
+ design: {
83
+ type: 'figma',
84
+ url: FIGMA_LINKS.callout.withLink
85
+ }
75
86
  };
76
87
  export var Warning = function Warning() {
77
88
  return ___EmotionJSX(Callout, {
78
89
  status: statuses.WARNING
79
- }, ___EmotionJSX(Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Callout box will grow in height with the content", ___EmotionJSX(Link, {
80
- href: "https://pingidentity.com",
81
- target: "_blank",
82
- "aria-label": "".concat(statuses.WARNING, "-callout"),
83
- variant: "app"
84
- }, ' ', "Read More")));
90
+ }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
91
+ };
92
+ Warning.parameters = {
93
+ design: {
94
+ type: 'figma',
95
+ url: FIGMA_LINKS.callout.warning
96
+ }
85
97
  };
package/lib/utils/designUtils/figmaLinks.js CHANGED
@@ -51,7 +51,11 @@ export var FIGMA_LINKS = {
51
51
  autofocus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16768&mode=design&t=PX1Q47IuuVvOafDQ-4'
52
52
  },
53
53
  callout: {
54
- "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289-33201&t=VgqEexa1CXAXfPpp-0'
54
+ "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A506&mode=dev',
55
+ errorStatus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289%3A33238&mode=dev',
56
+ success: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A511&mode=dev',
57
+ warning: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A501&mode=dev',
58
+ withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45652%3A1604&mode=dev'
55
59
  },
56
60
  card: {
57
61
  "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=335%3A1780&mode=dev',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.40.1-alpha.0",
3
+ "version": "2.40.1-alpha.1",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",