@pingux/astro 2.20.0-alpha.5 → 2.20.0-alpha.7

package/lib/cjs/recipes/CountryPicker.stories.js

@@ -14,12 +14,15 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _countriesList = require("countries-list");
+var _storybookAddonDesigns = require("storybook-addon-designs");
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _default = {
-  title: 'Recipes/Country Picker'
+  title: 'Recipes/Country Picker',
+  decorators: [_storybookAddonDesigns.withDesign]
 };
 exports["default"] = _default;
 var validatePhoneNumber = function validatePhoneNumber(str) {
@@ -132,4 +135,10 @@ var Default = function Default() {
     value: phoneNumber
   })));
 };
-exports.Default = Default;
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.countryPicker["default"]
+  }
+};

package/lib/cjs/recipes/InlineEditing.stories.js

@@ -20,14 +20,17 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _react = _interopRequireWildcard(require("react"));
 var _CheckIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckIcon"));
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _default = {
-  title: 'Recipes/Inline Editing'
+  title: 'Recipes/Inline Editing',
+  decorators: [_storybookAddonDesigns.withDesign]
 };
 exports["default"] = _default;
 var EditableAreaContext = /*#__PURE__*/(0, _react.createContext)();
@@ -97,12 +100,19 @@ var Default = function Default() {
     controlProps: controlProps
   }));
 };
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.inlineEditing["default"]
+  }
+};
 
 /**
  * Editable
  * Wrapper component that provides context value for all editable components
  */
-exports.Default = Default;
+
 var Editable = function Editable(props) {
   var value = props.value,
     isEditing = props.isEditing;

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

@@ -50,6 +50,9 @@ var FIGMA_LINKS = {
   copyText: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },
+  countryPicker: {
+    "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
+  },
   helpHint: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
     withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'
@@ -63,6 +66,9 @@ var FIGMA_LINKS = {
   iconButton: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A2520&t=We3h7LaaFJQnxdSy-1'
   },
+  inlineEditing: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=5244-14864&mode=design&t=1pPbrQvGkdMYBNqk-0'
+  },
   link: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=8708-29543&t=8Wwd3tIBh3GEjCJB-0'
   },

package/lib/recipes/CountryPicker.stories.js

@@ -3,10 +3,13 @@ import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entrie
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useState } from 'react';
 import { countries as countriesObj } from 'countries-list';
+import { withDesign } from 'storybook-addon-designs';
 import { Box, ComboBoxField, Input, Item } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Country Picker'
+  title: 'Recipes/Country Picker',
+  decorators: [withDesign]
 };
 var validatePhoneNumber = function validatePhoneNumber(str) {
   var reg = /^$|^[\d\-(\d)\s.]+$|^\+/g;
@@ -117,4 +120,10 @@ export var Default = function Default() {
     onChange: onPhoneNumberValueChange,
     value: phoneNumber
   })));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.countryPicker["default"]
+  }
 };

package/lib/recipes/InlineEditing.stories.js

@@ -13,10 +13,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
 import CheckIcon from '@pingux/mdi-react/CheckIcon';
 import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { withDesign } from 'storybook-addon-designs';
 import { Box, Icon, IconButton, TextAreaField } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Inline Editing'
+  title: 'Recipes/Inline Editing',
+  decorators: [withDesign]
 };
 var EditableAreaContext = /*#__PURE__*/createContext();
 var EditableAreaProvider = EditableAreaContext.Provider;
@@ -85,6 +88,12 @@ export var Default = function Default() {
     controlProps: controlProps
   }));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.inlineEditing["default"]
+  }
+};
 
 /**
  * Editable

package/lib/utils/designUtils/figmaLinks.js

@@ -43,6 +43,9 @@ export var FIGMA_LINKS = {
   copyText: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },
+  countryPicker: {
+    "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
+  },
   helpHint: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
     withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'
@@ -56,6 +59,9 @@ export var FIGMA_LINKS = {
   iconButton: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A2520&t=We3h7LaaFJQnxdSy-1'
   },
+  inlineEditing: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=5244-14864&mode=design&t=1pPbrQvGkdMYBNqk-0'
+  },
   link: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=8708-29543&t=8Wwd3tIBh3GEjCJB-0'
   },

package/package.json

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