@pingux/astro 1.27.0-alpha.12 → 1.27.0-alpha.14

package/lib/recipes/SelectedFieldOverlay.story.js

@@ -7,39 +7,35 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Selected Field Overlay'
 };
-var sx = {
-  container: {
-    padding: 'md',
-    position: 'relative',
-    borderWidth: 2,
-    borderStyle: 'solid',
-    borderColor: 'active',
-    borderRadius: 4,
-    cursor: 'pointer'
-  },
-  overlay: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    top: 0,
-    left: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    '&:focus': {
-      outline: 'none'
-    }
-  }
-};
 export var Default = function Default() {
   return ___EmotionJSX(Box, {
-    sx: sx.container
+    p: 15,
+    sx: {
+      position: 'relative',
+      borderWidth: 2,
+      borderStyle: 'solid',
+      borderColor: 'active',
+      borderRadius: 4,
+      cursor: 'pointer'
+    }
   }, ___EmotionJSX(TextField, {
     label: "Name",
     controlProps: {
       tabIndex: '-1'
     }
   }), ___EmotionJSX(Box, {
-    sx: sx.overlay,
+    sx: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      left: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&:focus': {
+        outline: 'none'
+      }
+    },
     tabIndex: "0"
   }, ___EmotionJSX(Icon, {
     icon: VisibilityOffOutlineIcon,

package/lib/recipes/TrialExperienceStatusBar.stories.js

@@ -104,79 +104,6 @@ var data = [{
     title: 'View a workflow'
   }]
 }];
-var sx = {
-  iconContainer: {
-    backgroundColor: 'accent.80',
-    alignItems: 'center',
-    justifyContent: 'center',
-    mr: 'sm',
-    borderRadius: '50%',
-    zIndex: 3
-  },
-  headingSeparator: {
-    flexGrow: 1,
-    backgroundColor: 'accent.80',
-    maxHeight: '100%',
-    width: '6px !important',
-    zIndex: 2,
-    m: '0px 5px 0px 17px !important'
-  },
-  title: {
-    fontSize: 'md',
-    color: 'accent.30',
-    lineHeight: '18px',
-    fontWeight: '3',
-    m: '12px 0px 28px 5px',
-    maxWidth: '195px'
-  },
-  linkRowIconButton: {
-    '&.is-pressed': {
-      backgroundColor: 'transparent'
-    },
-    '&.is-pressed > svg > path': {
-      fill: 'accent.30'
-    },
-    '&.is-hovered': {
-      backgroundColor: 'transparent'
-    }
-  },
-  linkRowIconSelected: {
-    zIndex: 3,
-    'path': {
-      fill: 'accent.30'
-    }
-  },
-  linkRowIconNotSelected: {
-    zIndex: 3,
-    'path': {
-      fill: 'accent.80'
-    }
-  },
-  linkRowSeparator: {
-    flexGrow: 1,
-    backgroundColor: 'accent.30',
-    maxHeight: '100%',
-    width: '1px !important',
-    zIndex: 2,
-    m: '-5px 5px -5px 11.5px !important'
-  },
-  linkRowText: {
-    fontSize: 'md',
-    color: '#163CE3',
-    lineHeight: '18px',
-    fontWeight: '0',
-    m: '3px 0px 20px 10px',
-    maxWidth: '140px'
-  },
-  container: {
-    p: '15px 15px 0px 15px',
-    width: '280px',
-    backgroundColor: 'accent.95',
-    borderRadius: '8px',
-    zIndex: 1,
-    boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
-  }
-};
 
 var Stage = function Stage(props) {
   var title = props.title,
@@ -212,7 +139,14 @@ var Stage = function Stage(props) {
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     minWidth: "39.5px",
     minHeight: "39.5px",
-    sx: sx.iconContainer
+    sx: {
+      backgroundColor: 'accent.80',
+      alignItems: 'center',
+      justifyContent: 'center',
+      mr: '10px',
+      borderRadius: '50%',
+      zIndex: 3
+    }
   }, ___EmotionJSX(Icon, {
     icon: icon,
     color: "accent.40",
@@ -221,10 +155,24 @@ var Stage = function Stage(props) {
       zIndex: 3
     }
   })), !isLastStage && ___EmotionJSX(Separator, {
-    sx: sx.headingSeparator,
+    sx: {
+      flexGrow: 1,
+      backgroundColor: 'accent.80',
+      maxHeight: '100%',
+      width: '6px !important',
+      zIndex: 2,
+      m: '0px 5px 0px 17px !important'
+    },
     orientation: "vertical"
   })), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-    sx: sx.title
+    sx: {
+      fontSize: '15px',
+      color: 'accent.30',
+      lineHeight: '18px',
+      fontWeight: '3',
+      m: '12px 0px 28px 5px',
+      maxWidth: '195px'
+    }
   }, title), ___EmotionJSX(Box, {
     pl: "0px",
     mb: "25px"
@@ -265,19 +213,53 @@ var LinkRow = function LinkRow(props) {
     }
   }, ___EmotionJSX(IconButton, {
     onPress: onIconPress,
-    sx: sx.linkRowIconButton,
+    sx: {
+      '&.is-pressed': {
+        backgroundColor: 'transparent'
+      },
+      '&.is-pressed > svg > path': {
+        fill: 'accent.30'
+      },
+      '&.is-hovered': {
+        backgroundColor: 'transparent'
+      }
+    },
     "aria-label": "completed step icon indicator"
   }, ___EmotionJSX(Icon, {
     icon: isSelected ? CheckCircleIcon : RadioButtonIcon,
     size: isSelected ? '20px' : '18px',
-    sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
+    sx: isSelected ? {
+      zIndex: 3,
+      'path': {
+        fill: 'accent.30'
+      }
+    } : {
+      zIndex: 3,
+      'path': {
+        fill: 'accent.80'
+      }
+    }
   }))), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
-    sx: sx.linkRowSeparator,
+    sx: {
+      flexGrow: 1,
+      backgroundColor: 'accent.30',
+      maxHeight: '100%',
+      width: '1px !important',
+      zIndex: 2,
+      m: '-5px 5px -5px 11.5px !important'
+    },
     orientation: "vertical"
   })), ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
     href: "https://www.pingidentity.com",
     target: "_blank",
-    sx: sx.linkRowText
+    sx: {
+      fontSize: '15px',
+      color: '#163CE3',
+      lineHeight: '18px',
+      fontWeight: '0',
+      m: '3px 0px 20px 10px',
+      maxWidth: '140px'
+    }
   }, title)));
 };
 
@@ -285,7 +267,16 @@ export var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.
   return ___EmotionJSX(Box, {
     as: "nav",
-    sx: sx.container
+    backgroundColor: "accent.95",
+    width: "280px",
+    sx: {
+      p: '15px 15px 0px 15px',
+      width: '280px',
+      backgroundColor: 'accent.95',
+      borderRadius: '8px',
+      zIndex: 1,
+      boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
+    }
   }, ___EmotionJSX(Box, {
     paddingLeft: "0px"
   }, _mapInstanceProperty(data).call(data, function (stage, index) {

package/package.json

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

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

@@ -1,73 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports["default"] = exports.Default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
-
-var _index = require("../index");
-
-var _react2 = require("@emotion/react");
-
-var _default = {
-  title: 'Recipes/Page Header'
-};
-exports["default"] = _default;
-
-var Default = function Default() {
-  var heading = 'Title of the Page';
-  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-    align: "center",
-    isRow: true,
-    mb: "xs",
-    role: "heading",
-    "aria-level": "1"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "title",
-    fontWeight: 3
-  }, heading), (0, _react2.jsx)(_index.Button, {
-    variant: "inlinePrimary",
-    ml: "sm"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _PlusIcon["default"],
-    color: "white",
-    size: 13,
-    mr: "4px"
-  }), "\xA0", "Add")), (0, _react2.jsx)(_index.Text, {
-    variant: "bodyWeak"
-  }, description)), (0, _react2.jsx)(_index.Box, {
-    mt: "xl"
-  }, (0, _react2.jsx)(_index.Box, {
-    align: "center",
-    isRow: true,
-    mb: "xs",
-    role: "heading",
-    "aria-level": "1"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "title",
-    fontWeight: 3
-  }, heading), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "icon button",
-    ml: "sm",
-    mt: "3px",
-    variant: "inverted"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _PlusIcon["default"],
-    color: "white",
-    size: 13
-  }))), (0, _react2.jsx)(_index.Text, {
-    variant: "bodyWeak"
-  }, description)));
-};
-
-exports.Default = Default;

package/lib/recipes/PageHeader.stories.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import PlusIcon from 'mdi-react/PlusIcon';
-import { Box, Button, IconButton, Icon, Text } from '../index';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Recipes/Page Header'
-};
-export var Default = function Default() {
-  var heading = 'Title of the Page';
-  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
-    align: "center",
-    isRow: true,
-    mb: "xs",
-    role: "heading",
-    "aria-level": "1"
-  }, ___EmotionJSX(Text, {
-    variant: "title",
-    fontWeight: 3
-  }, heading), ___EmotionJSX(Button, {
-    variant: "inlinePrimary",
-    ml: "sm"
-  }, ___EmotionJSX(Icon, {
-    icon: PlusIcon,
-    color: "white",
-    size: 13,
-    mr: "4px"
-  }), "\xA0", "Add")), ___EmotionJSX(Text, {
-    variant: "bodyWeak"
-  }, description)), ___EmotionJSX(Box, {
-    mt: "xl"
-  }, ___EmotionJSX(Box, {
-    align: "center",
-    isRow: true,
-    mb: "xs",
-    role: "heading",
-    "aria-level": "1"
-  }, ___EmotionJSX(Text, {
-    variant: "title",
-    fontWeight: 3
-  }, heading), ___EmotionJSX(IconButton, {
-    "aria-label": "icon button",
-    ml: "sm",
-    mt: "3px",
-    variant: "inverted"
-  }, ___EmotionJSX(Icon, {
-    icon: PlusIcon,
-    color: "white",
-    size: 13
-  }))), ___EmotionJSX(Text, {
-    variant: "bodyWeak"
-  }, description)));
-};