@pingux/astro 2.78.0-alpha.0 → 2.78.0-alpha.2

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

@@ -74,8 +74,8 @@ export declare const ControlledWithButton: {
         };
     };
 };
-export declare const WithCustomColorsAndIcons: {
-    (args: any): React.JSX.Element;
+export declare const UseReducer: {
+    (): React.JSX.Element;
     parameters: {
         a11y: {
             config: {
@@ -87,7 +87,7 @@ export declare const WithCustomColorsAndIcons: {
         };
     };
 };
-export declare const UseReducer: {
+export declare const UseReducerWithMultipleContainers: {
     (): React.JSX.Element;
     parameters: {
         a11y: {
@@ -100,9 +100,13 @@ export declare const UseReducer: {
         };
     };
 };
-export declare const UseReducerWithMultipleContainers: {
-    (): React.JSX.Element;
+export declare const WithTextStyling: {
+    (args: any): React.JSX.Element;
     parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
         a11y: {
             config: {
                 rules: {
@@ -113,7 +117,24 @@ export declare const UseReducerWithMultipleContainers: {
         };
     };
 };
-export declare const WithTextStyling: {
+export declare const WithLink: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const Customization: {
     (args: any): React.JSX.Element;
     parameters: {
         a11y: {

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

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithTextStyling = exports.WithCustomColorsAndIcons = exports.UseReducerWithMultipleContainers = exports.UseReducer = exports.DefaultDynamic = exports.Default = exports.ControlledWithButton = exports.Controlled = void 0;
+exports["default"] = exports.WithTextStyling = exports.WithLink = exports.UseReducerWithMultipleContainers = exports.UseReducer = exports.DefaultDynamic = exports.Default = exports.Customization = exports.ControlledWithButton = exports.Controlled = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
@@ -66,7 +66,7 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
 var messages = [{
   key: 'message1',
   text: loremText
@@ -86,11 +86,19 @@ var messages = [{
 var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
     key: "message1",
-    "data-id": "message1"
+    "data-id": "message1",
+    status: _statuses["default"].SUCCESS
   }, loremText), (0, _react2.jsx)(_reactStately.Item, {
     key: "message2",
     "data-id": "message2",
-    status: _statuses["default"].SUCCESS
+    status: _statuses["default"].WARNING
+  }, loremText), (0, _react2.jsx)(_reactStately.Item, {
+    key: "message2",
+    "data-id": "message3",
+    status: _statuses["default"].ERROR
+  }, loremText), (0, _react2.jsx)(_reactStately.Item, {
+    key: "message2",
+    "data-id": "message4"
   }, loremText));
 };
 exports.Default = Default;
@@ -207,26 +215,6 @@ ControlledWithButton.parameters = {
     }
   }
 };
-var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
-  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
-    bg: "accent.99",
-    color: "active",
-    icon: _AccountIcon["default"]
-  }, loremText));
-};
-
-// Added to bypass color contrast in safari
-exports.WithCustomColorsAndIcons = WithCustomColorsAndIcons;
-WithCustomColorsAndIcons.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
 var UseReducer = function UseReducer() {
   // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
   // const messagesReducer = messagesReducerCore;
@@ -352,15 +340,7 @@ var WithTextStyling = function WithTextStyling(args) {
     node: (0, _react2.jsx)("strong", null, loremText)
   }, {
     key: 'message2',
-    text: loremText,
-    status: 'success'
-  }, {
-    key: 'message3',
-    text: loremText,
-    status: 'warning'
-  }, {
-    key: 'message4',
-    node: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)("b", null, "Lorem Ipsum! "), loremText),
+    node: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)("b", null, "Lorem Ipsum! "), "dolor sit amet, consectetur adipiscing elit"),
     status: 'error'
   }];
   return (0, _react2.jsx)(_index.Messages, (0, _extends2["default"])({}, args, {
@@ -373,6 +353,54 @@ var WithTextStyling = function WithTextStyling(args) {
 // Added to bypass color contrast in safari
 exports.WithTextStyling = WithTextStyling;
 WithTextStyling.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.messages.withTextStyling
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+var WithLink = function WithLink(args) {
+  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
+    key: "message1"
+  }, loremText, ' ', (0, _react2.jsx)(_index.Link, {
+    href: "https://lorem.ipsum"
+  }, "Learn More")));
+};
+
+// Added to bypass color contrast in safari
+exports.WithLink = WithLink;
+WithLink.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.messages.withLink
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+var Customization = function Customization(args) {
+  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
+    bg: "accent.99",
+    color: "active",
+    icon: _AccountIcon["default"]
+  }, loremText));
+};
+
+// Added to bypass color contrast in safari
+exports.Customization = Customization;
+Customization.parameters = {
   a11y: {
     config: {
       rules: [{

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

@@ -14,6 +14,14 @@ declare const _default: {
             };
             page: () => React.JSX.Element;
         };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
     };
     argTypes: {};
 };

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

@@ -32,6 +32,14 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TimeField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
     }
   },
   argTypes: {}

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

@@ -115,6 +115,8 @@ export declare const FIGMA_LINKS: {
     };
     messages: {
         default: string;
+        withTextStyling: string;
+        withLink: string;
     };
     modal: {
         default: string;

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

@@ -121,7 +121,9 @@ var FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=12726-41720&t=8Wwd3tIBh3GEjCJB-0'
   },
   messages: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14579-33504&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-6582&t=hqi8rId3S2ABv1E0-4',
+    withTextStyling: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-9032&t=LVprZy9fVRpCA9Jd-4',
+    withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-9074&t=LVprZy9fVRpCA9Jd-4'
   },
   modal: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=7513-27244&t=8Wwd3tIBh3GEjCJB-0'

package/lib/components/Messages/Messages.stories.js

@@ -20,7 +20,7 @@ import { Item } from 'react-stately';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Button, Messages } from '../../index';
+import { Box, Button, Link, Messages } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
@@ -53,7 +53,7 @@ export default {
     }
   }
 };
-var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
 var messages = [{
   key: 'message1',
   text: loremText
@@ -73,11 +73,19 @@ var messages = [{
 export var Default = function Default(args) {
   return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
     key: "message1",
-    "data-id": "message1"
+    "data-id": "message1",
+    status: statuses.SUCCESS
   }, loremText), ___EmotionJSX(Item, {
     key: "message2",
     "data-id": "message2",
-    status: statuses.SUCCESS
+    status: statuses.WARNING
+  }, loremText), ___EmotionJSX(Item, {
+    key: "message2",
+    "data-id": "message3",
+    status: statuses.ERROR
+  }, loremText), ___EmotionJSX(Item, {
+    key: "message2",
+    "data-id": "message4"
   }, loremText));
 };
 Default.parameters = {
@@ -190,25 +198,6 @@ ControlledWithButton.parameters = {
     }
   }
 };
-export var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
-  return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
-    bg: "accent.99",
-    color: "active",
-    icon: AccountIcon
-  }, loremText));
-};
-
-// Added to bypass color contrast in safari
-WithCustomColorsAndIcons.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
 export var UseReducer = function UseReducer() {
   // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
   // const messagesReducer = messagesReducerCore;
@@ -332,15 +321,7 @@ export var WithTextStyling = function WithTextStyling(args) {
     node: ___EmotionJSX("strong", null, loremText)
   }, {
     key: 'message2',
-    text: loremText,
-    status: 'success'
-  }, {
-    key: 'message3',
-    text: loremText,
-    status: 'warning'
-  }, {
-    key: 'message4',
-    node: ___EmotionJSX(React.Fragment, null, ___EmotionJSX("b", null, "Lorem Ipsum! "), loremText),
+    node: ___EmotionJSX(React.Fragment, null, ___EmotionJSX("b", null, "Lorem Ipsum! "), "dolor sit amet, consectetur adipiscing elit"),
     status: 'error'
   }];
   return ___EmotionJSX(Messages, _extends({}, args, {
@@ -352,6 +333,52 @@ export var WithTextStyling = function WithTextStyling(args) {
 
 // Added to bypass color contrast in safari
 WithTextStyling.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.messages.withTextStyling
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+export var WithLink = function WithLink(args) {
+  return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
+    key: "message1"
+  }, loremText, ' ', ___EmotionJSX(Link, {
+    href: "https://lorem.ipsum"
+  }, "Learn More")));
+};
+
+// Added to bypass color contrast in safari
+WithLink.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.messages.withLink
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+export var Customization = function Customization(args) {
+  return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
+    bg: "accent.99",
+    color: "active",
+    icon: AccountIcon
+  }, loremText));
+};
+
+// Added to bypass color contrast in safari
+Customization.parameters = {
   a11y: {
     config: {
       rules: [{

package/lib/components/TimeField/TimeField.stories.js

@@ -19,6 +19,14 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TimeFieldReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
     }
   },
   argTypes: {}

package/lib/utils/designUtils/figmaLinks.js

@@ -114,7 +114,9 @@ export var FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=12726-41720&t=8Wwd3tIBh3GEjCJB-0'
   },
   messages: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14579-33504&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-6582&t=hqi8rId3S2ABv1E0-4',
+    withTextStyling: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-9032&t=LVprZy9fVRpCA9Jd-4',
+    withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-9074&t=LVprZy9fVRpCA9Jd-4'
   },
   modal: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=7513-27244&t=8Wwd3tIBh3GEjCJB-0'

package/package.json

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