@pingux/astro 1.26.1-alpha.2 → 1.26.1-alpha.5

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

@@ -23,24 +23,28 @@ var _default = {
 };
 exports["default"] = _default;
 var ArrowIcon = "\u25BA";
+var sx = {
+  wrapper: {
+    height: '8px',
+    width: '80px',
+    alignItems: 'center'
+  },
+  arrowLine: {
+    width: '100%',
+    // Use this instead of border property, to avoid cropping of strokes in Safari and FF
+    backgroundImage: "linear-gradient(to right, ".concat(_colors.line.light, " 50%, white 50%)"),
+    backgroundRepeat: 'repeat-x',
+    backgroundSize: '10px 2px',
+    height: '2px'
+  }
+};
 
 var Default = function Default() {
   return (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    height: 8,
-    width: 80,
-    sx: {
-      'align-items': 'center'
-    }
+    sx: sx.wrapper
   }, (0, _react2.jsx)(_Box["default"], {
-    width: "100%" // Use this instead of border property, to avoid cropping of strokes in Safari and FF
-    ,
-    sx: {
-      backgroundImage: "linear-gradient(to right, ".concat(_colors.line.light, " 50%, white 50%)"),
-      backgroundRepeat: 'repeat-x',
-      backgroundSize: '10px 2px',
-      height: 2
-    }
+    sx: sx.arrowLine
   }), (0, _react2.jsx)(_Box["default"], {
     color: "line.regular"
   }, ArrowIcon));

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

@@ -56,6 +56,36 @@ var _default = {
   title: 'Recipes/AttributesP1Mappings'
 };
 exports["default"] = _default;
+var sx = {
+  rowBox: {
+    mb: '24.95px'
+  },
+  textField: {
+    height: '40px !important'
+  },
+  comboBoxField: {
+    height: '40px !important',
+    pt: '5px !important'
+  },
+  headingText: {
+    fontSize: 'sm',
+    fontWeight: 400,
+    color: 'neutral.40'
+  },
+  firstRowTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    maxWidth: '310px',
+    width: 'calc(50% - 26px)',
+    minWidth: '153px'
+  },
+  secondRowTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    ml: '10px',
+    flexGrow: 1
+  }
+};
 var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
   var isDisabled = props.isDisabled,
       isNewRow = props.isNewRow,
@@ -93,9 +123,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
     ref: rowRef
   }, (0, _react2.jsx)(_index.Box, {
     width: "310px",
-    sx: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? {
-      mb: '24.95px'
-    } : {}
+    sx: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? sx.rowBox : {}
   }, (0, _react2.jsx)(_index.TextField, {
     name: "custom-name",
     "aria-label": "text field",
@@ -104,9 +132,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
       mb: 0
     },
     controlProps: {
-      sx: {
-        height: '40px !important'
-      }
+      sx: sx.textField
     },
     id: "textField ".concat(index),
     key: "textField ".concat(index),
@@ -123,9 +149,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
     ml: "12px",
     isRow: true,
     width: "378px",
-    sx: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? {
-      mb: '24.95px'
-    } : {}
+    sx: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? sx.rowBox : {}
   }, (0, _react2.jsx)(_index.Box, {
     flexGrow: "1",
     maxWidth: "310px"
@@ -143,10 +167,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
     "aria-label": "selection field",
     controlProps: {
       'aria-label': 'selection field',
-      sx: {
-        height: '40px !important',
-        pt: '5px !important'
-      }
+      sx: sx.comboBoxField
     },
     containerProps: {
       'aria-label': 'selection field',
@@ -259,11 +280,7 @@ var Default = function Default() {
     mb: "md",
     ml: "xs"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 400,
-      color: 'neutral.40'
-    }
+    sx: sx.headingText
   }, "Create new attributes and map predefined attributes with their PingOne Mappings."), (0, _react2.jsx)(_index.Button, {
     variant: "inline",
     ml: "auto",
@@ -287,20 +304,9 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      maxWidth: '310px',
-      width: 'calc(50% - 26px)',
-      minWidth: '153px'
-    }
+    sx: sx.firstRowTitle
   }, "Attributes"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      ml: '10px',
-      flexGrow: 1
-    }
+    sx: sx.secondRowTitle
   }, "PingOne Mappings")), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(_index.ScrollBox, {
     mt: "md",
     maxHeight: "700px"

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

@@ -46,6 +46,15 @@ var _default = {
   title: 'Recipes/DatePicker'
 };
 exports["default"] = _default;
+var sx = {
+  calendarIcon: {
+    position: 'absolute',
+    right: 5,
+    top: 8,
+    width: 28,
+    height: 28
+  }
+};
 
 var Default = function Default() {
   var dateFormat = 'YYYY-MM-DD';
@@ -120,13 +129,7 @@ var Default = function Default() {
     slots: {
       inContainer: (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
         "aria-label": "calendar-button",
-        sx: {
-          position: 'absolute',
-          right: 5,
-          top: 8,
-          width: 28,
-          height: 28
-        },
+        sx: sx.calendarIcon,
         onPress: handleCalendarIconPress,
         ref: triggerRef
       }, triggerProps), (0, _react2.jsx)(_index.Icon, {

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

@@ -24,18 +24,21 @@ var _default = {
   title: 'Recipes/StatsCircle'
 };
 exports["default"] = _default;
+var sx = {
+  statsCircle: {
+    border: '3px solid',
+    borderColor: _colors.active,
+    borderRadius: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
 
 var Default = function Default() {
   return (0, _react2.jsx)(_Box["default"], {
     width: "110px",
     height: "110px",
-    sx: {
-      'border': '3px solid',
-      'borderColor': _colors.active,
-      'borderRadius': '100%',
-      'alignItems': 'center',
-      'justifyContent': 'center'
-    }
+    sx: sx.statsCircle
   }, (0, _react2.jsx)(_Text["default"], {
     fontSize: 30
   }, "63"), (0, _react2.jsx)(_Text["default"], {

package/lib/recipes/Arrow.stories.js

@@ -6,23 +6,27 @@ export default {
   title: 'Recipes/Arrow'
 };
 var ArrowIcon = "\u25BA";
+var sx = {
+  wrapper: {
+    height: '8px',
+    width: '80px',
+    alignItems: 'center'
+  },
+  arrowLine: {
+    width: '100%',
+    // Use this instead of border property, to avoid cropping of strokes in Safari and FF
+    backgroundImage: "linear-gradient(to right, ".concat(line.light, " 50%, white 50%)"),
+    backgroundRepeat: 'repeat-x',
+    backgroundSize: '10px 2px',
+    height: '2px'
+  }
+};
 export var Default = function Default() {
   return ___EmotionJSX(Box, {
     isRow: true,
-    height: 8,
-    width: 80,
-    sx: {
-      'align-items': 'center'
-    }
+    sx: sx.wrapper
   }, ___EmotionJSX(Box, {
-    width: "100%" // Use this instead of border property, to avoid cropping of strokes in Safari and FF
-    ,
-    sx: {
-      backgroundImage: "linear-gradient(to right, ".concat(line.light, " 50%, white 50%)"),
-      backgroundRepeat: 'repeat-x',
-      backgroundSize: '10px 2px',
-      height: 2
-    }
+    sx: sx.arrowLine
   }), ___EmotionJSX(Box, {
     color: "line.regular"
   }, ArrowIcon));

package/lib/recipes/AttributesAndPingOneMapping.stories.js

@@ -22,6 +22,36 @@ var items = [{
 export default {
   title: 'Recipes/AttributesP1Mappings'
 };
+var sx = {
+  rowBox: {
+    mb: '24.95px'
+  },
+  textField: {
+    height: '40px !important'
+  },
+  comboBoxField: {
+    height: '40px !important',
+    pt: '5px !important'
+  },
+  headingText: {
+    fontSize: 'sm',
+    fontWeight: 400,
+    color: 'neutral.40'
+  },
+  firstRowTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    maxWidth: '310px',
+    width: 'calc(50% - 26px)',
+    minWidth: '153px'
+  },
+  secondRowTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    ml: '10px',
+    flexGrow: 1
+  }
+};
 var Row = /*#__PURE__*/memo(function (props) {
   var isDisabled = props.isDisabled,
       isNewRow = props.isNewRow,
@@ -59,9 +89,7 @@ var Row = /*#__PURE__*/memo(function (props) {
     ref: rowRef
   }, ___EmotionJSX(Box, {
     width: "310px",
-    sx: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? {
-      mb: '24.95px'
-    } : {}
+    sx: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? sx.rowBox : {}
   }, ___EmotionJSX(TextField, {
     name: "custom-name",
     "aria-label": "text field",
@@ -70,9 +98,7 @@ var Row = /*#__PURE__*/memo(function (props) {
       mb: 0
     },
     controlProps: {
-      sx: {
-        height: '40px !important'
-      }
+      sx: sx.textField
     },
     id: "textField ".concat(index),
     key: "textField ".concat(index),
@@ -89,9 +115,7 @@ var Row = /*#__PURE__*/memo(function (props) {
     ml: "12px",
     isRow: true,
     width: "378px",
-    sx: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? {
-      mb: '24.95px'
-    } : {}
+    sx: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? sx.rowBox : {}
   }, ___EmotionJSX(Box, {
     flexGrow: "1",
     maxWidth: "310px"
@@ -109,10 +133,7 @@ var Row = /*#__PURE__*/memo(function (props) {
     "aria-label": "selection field",
     controlProps: {
       'aria-label': 'selection field',
-      sx: {
-        height: '40px !important',
-        pt: '5px !important'
-      }
+      sx: sx.comboBoxField
     },
     containerProps: {
       'aria-label': 'selection field',
@@ -226,11 +247,7 @@ export var Default = function Default() {
     mb: "md",
     ml: "xs"
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 400,
-      color: 'neutral.40'
-    }
+    sx: sx.headingText
   }, "Create new attributes and map predefined attributes with their PingOne Mappings."), ___EmotionJSX(Button, {
     variant: "inline",
     ml: "auto",
@@ -254,20 +271,9 @@ export var Default = function Default() {
   }, ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      maxWidth: '310px',
-      width: 'calc(50% - 26px)',
-      minWidth: '153px'
-    }
+    sx: sx.firstRowTitle
   }, "Attributes"), ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      ml: '10px',
-      flexGrow: 1
-    }
+    sx: sx.secondRowTitle
   }, "PingOne Mappings")), ___EmotionJSX(Separator, null), ___EmotionJSX(ScrollBox, {
     mt: "md",
     maxHeight: "700px"

package/lib/recipes/DatePicker.stories.js

@@ -12,6 +12,15 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/DatePicker'
 };
+var sx = {
+  calendarIcon: {
+    position: 'absolute',
+    right: 5,
+    top: 8,
+    width: 28,
+    height: 28
+  }
+};
 export var Default = function Default() {
   var dateFormat = 'YYYY-MM-DD';
 
@@ -83,13 +92,7 @@ export var Default = function Default() {
     slots: {
       inContainer: ___EmotionJSX(IconButton, _extends({
         "aria-label": "calendar-button",
-        sx: {
-          position: 'absolute',
-          right: 5,
-          top: 8,
-          width: 28,
-          height: 28
-        },
+        sx: sx.calendarIcon,
         onPress: handleCalendarIconPress,
         ref: triggerRef
       }, triggerProps), ___EmotionJSX(Icon, {

package/lib/recipes/StatsCircle.stories.js

@@ -6,17 +6,20 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/StatsCircle'
 };
+var sx = {
+  statsCircle: {
+    border: '3px solid',
+    borderColor: active,
+    borderRadius: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
 export var Default = function Default() {
   return ___EmotionJSX(Box, {
     width: "110px",
     height: "110px",
-    sx: {
-      'border': '3px solid',
-      'borderColor': active,
-      'borderRadius': '100%',
-      'alignItems': 'center',
-      'justifyContent': 'center'
-    }
+    sx: sx.statsCircle
   }, ___EmotionJSX(Text, {
     fontSize: 30
   }, "63"), ___EmotionJSX(Text, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.26.1-alpha.2",
+  "version": "1.26.1-alpha.5",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",