@pingux/astro 2.40.0 → 2.40.1-alpha.1

package/lib/cjs/components/Callout/Callout.mdx

@@ -9,7 +9,7 @@ Callouts should contain only 1 or 2 pieces of information and display at the top
 
 ### Required components
 
-This component requires the [Link](./?path=/docs/components-link--default) and [Text](./?path=/docs/components-text--default) components. 
+This component requires the [Text](./?path=/docs/components-text--default) component. 
 
 ### Accessibility
 

package/lib/cjs/components/Callout/Callout.stories.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StoryFn } from '@storybook/react';
 import { CalloutProps } from '../../types/callout';
 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;
 export declare const Default: StoryFn<CalloutProps>;
 export declare const ErrorStatus: StoryFn;
 export declare const Success: StoryFn;
+export declare const WithLink: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
 export declare const Warning: StoryFn;

package/lib/cjs/components/Callout/Callout.stories.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
+exports["default"] = exports.WithLink = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
@@ -43,12 +43,7 @@ var _default = {
 }; // main
 exports["default"] = _default;
 var Default = function Default(args) {
-  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, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(_statuses["default"].DEFAULT, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  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."));
 };
 exports.Default = Default;
 Default.parameters = {
@@ -60,36 +55,54 @@ Default.parameters = {
 var ErrorStatus = function ErrorStatus() {
   return (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].ERROR
-  }, (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, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(_statuses["default"].ERROR, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  }, (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."));
+};
+exports.ErrorStatus = ErrorStatus;
+ErrorStatus.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.callout.errorStatus
+  }
 };
 
 // Avoiding using Error as the function name due to it being a JS built-in method
-exports.ErrorStatus = ErrorStatus;
 ErrorStatus.storyName = 'Error';
 var Success = function Success() {
   return (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].SUCCESS
-  }, (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, {
+  }, (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."));
+};
+exports.Success = Success;
+Success.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.callout.success
+  }
+};
+var WithLink = function WithLink(args) {
+  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, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(_statuses["default"].SUCCESS, "-callout"),
+    "aria-label": "".concat(_statuses["default"].DEFAULT, "-callout"),
     variant: "app"
-  }, ' ', "Read More")));
+  }, "Learn More")));
+};
+exports.WithLink = WithLink;
+WithLink.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.callout.withLink
+  }
 };
-exports.Success = Success;
 var Warning = function Warning() {
   return (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].WARNING
-  }, (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, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(_statuses["default"].WARNING, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  }, (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."));
 };
-exports.Warning = Warning;
+exports.Warning = Warning;
+Warning.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.callout.warning
+  }
+};

package/lib/cjs/styles/themes/end-user/end-user.js

@@ -163,6 +163,9 @@ var fieldHelperText = {
     }
   })
 };
+var fontDefault = {
+  fontFamily: '"pingito", "Helvetica Neue", Helvetica, Roboto, "Segoe UI", sans-serif'
+};
 var text = {
   base: {
     color: 'neutral.20',
@@ -181,15 +184,13 @@ var text = {
     fontSize: 15,
     fontWeight: 500,
     position: 'absolute',
-    fontFamily: 'proxima-nova, sans-serif',
     color: 'text.secondary'
-  }),
-  input: {
+  }, fontDefault),
+  input: _objectSpread({
     color: 'neutral.30',
     fontSize: 15,
-    fontWeight: 500,
-    fontFamily: 'proxima-nova, sans-serif'
-  }
+    fontWeight: 500
+  }, fontDefault)
 };
 var activeFloatLabel = {
   fontWeight: 0,
@@ -237,7 +238,7 @@ var input = _objectSpread(_objectSpread({}, text.input), {}, {
 var _default = {
   name: 'End User',
   fonts: {
-    standard: '"proxima-nova", "helvetica", "arial", sans-serif'
+    standard: fontDefault.fontFamily
   },
   space: spacing,
   shadows: shadows,

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -52,6 +52,10 @@ export declare const FIGMA_LINKS: {
     };
     callout: {
         default: string;
+        errorStatus: string;
+        success: string;
+        warning: string;
+        withLink: string;
     };
     card: {
         default: string;

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -58,7 +58,11 @@ var FIGMA_LINKS = {
     autofocus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16768&mode=design&t=PX1Q47IuuVvOafDQ-4'
   },
   callout: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289-33201&t=VgqEexa1CXAXfPpp-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A506&mode=dev',
+    errorStatus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289%3A33238&mode=dev',
+    success: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A511&mode=dev',
+    warning: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A501&mode=dev',
+    withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45652%3A1604&mode=dev'
   },
   card: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=335%3A1780&mode=dev',

package/lib/components/Callout/Callout.mdx

@@ -9,7 +9,7 @@ Callouts should contain only 1 or 2 pieces of information and display at the top
 
 ### Required components
 
-This component requires the [Link](./?path=/docs/components-link--default) and [Text](./?path=/docs/components-text--default) components. 
+This component requires the [Text](./?path=/docs/components-text--default) component. 
 
 ### Accessibility
 

package/lib/components/Callout/Callout.stories.js

@@ -37,12 +37,7 @@ export default {
 
 // main
 export var Default = function Default(args) {
-  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, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(statuses.DEFAULT, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  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."));
 };
 Default.parameters = {
   design: {
@@ -53,12 +48,13 @@ Default.parameters = {
 export var ErrorStatus = function ErrorStatus() {
   return ___EmotionJSX(Callout, {
     status: statuses.ERROR
-  }, ___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, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(statuses.ERROR, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  }, ___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."));
+};
+ErrorStatus.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.callout.errorStatus
+  }
 };
 
 // Avoiding using Error as the function name due to it being a JS built-in method
@@ -66,20 +62,36 @@ ErrorStatus.storyName = 'Error';
 export var Success = function Success() {
   return ___EmotionJSX(Callout, {
     status: statuses.SUCCESS
-  }, ___EmotionJSX(Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", ___EmotionJSX(Link, {
+  }, ___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."));
+};
+Success.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.callout.success
+  }
+};
+export var WithLink = function WithLink(args) {
+  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, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(statuses.SUCCESS, "-callout"),
+    "aria-label": "".concat(statuses.DEFAULT, "-callout"),
     variant: "app"
-  }, ' ', "Read More")));
+  }, "Learn More")));
+};
+WithLink.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.callout.withLink
+  }
 };
 export var Warning = function Warning() {
   return ___EmotionJSX(Callout, {
     status: statuses.WARNING
-  }, ___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, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(statuses.WARNING, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  }, ___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."));
+};
+Warning.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.callout.warning
+  }
 };

package/lib/styles/themes/end-user/end-user.js

@@ -156,6 +156,9 @@ var fieldHelperText = {
     }
   })
 };
+var fontDefault = {
+  fontFamily: '"pingito", "Helvetica Neue", Helvetica, Roboto, "Segoe UI", sans-serif'
+};
 var text = {
   base: {
     color: 'neutral.20',
@@ -174,15 +177,13 @@ var text = {
     fontSize: 15,
     fontWeight: 500,
     position: 'absolute',
-    fontFamily: 'proxima-nova, sans-serif',
     color: 'text.secondary'
-  }),
-  input: {
+  }, fontDefault),
+  input: _objectSpread({
     color: 'neutral.30',
     fontSize: 15,
-    fontWeight: 500,
-    fontFamily: 'proxima-nova, sans-serif'
-  }
+    fontWeight: 500
+  }, fontDefault)
 };
 var activeFloatLabel = {
   fontWeight: 0,
@@ -230,7 +231,7 @@ var input = _objectSpread(_objectSpread({}, text.input), {}, {
 export default {
   name: 'End User',
   fonts: {
-    standard: '"proxima-nova", "helvetica", "arial", sans-serif'
+    standard: fontDefault.fontFamily
   },
   space: spacing,
   shadows: shadows,

package/lib/utils/designUtils/figmaLinks.js

@@ -51,7 +51,11 @@ export var FIGMA_LINKS = {
     autofocus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16768&mode=design&t=PX1Q47IuuVvOafDQ-4'
   },
   callout: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289-33201&t=VgqEexa1CXAXfPpp-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A506&mode=dev',
+    errorStatus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289%3A33238&mode=dev',
+    success: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A511&mode=dev',
+    warning: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A501&mode=dev',
+    withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45652%3A1604&mode=dev'
   },
   card: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=335%3A1780&mode=dev',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.40.0",
+  "version": "2.40.1-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",