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

package/lib/recipes/RowLineChart.stories.js

@@ -138,6 +138,34 @@ var zeroData = [{
   id: 12,
   value: 0
 }];
+var sx = {
+  container: {
+    backgroundColor: 'accent.99',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    pr: '20px'
+  },
+  button: {
+    ml: 'md',
+    pr: 'md'
+  },
+  chartTitleContainer: {
+    ml: '20px',
+    pr: 'md'
+  },
+  chartContainer: {
+    width: '100%',
+    height: '100%'
+  },
+  chart: {
+    width: '50',
+    height: '18'
+  },
+  chartTrendContainer: {
+    ml: 'md',
+    width: '50px'
+  }
+};
 export var Default = function Default() {
   var _useResizeObserver = useResizeObserver(),
       ref = _useResizeObserver.ref,
@@ -161,10 +189,7 @@ export var Default = function Default() {
 
   var EmptyData = ___EmotionJSX(Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     ref: ref
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -178,8 +203,7 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -192,8 +216,7 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -202,11 +225,9 @@ export var Default = function Default() {
   }, ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.chart"
   }, ___EmotionJSX(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: chartData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -217,8 +238,7 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "No data yet")), ___EmotionJSX(Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -229,10 +249,7 @@ export var Default = function Default() {
 
   var FullData = ___EmotionJSX(Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -246,8 +263,7 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -260,8 +276,7 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -271,11 +286,9 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: chartData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -286,8 +299,7 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -298,10 +310,7 @@ export var Default = function Default() {
 
   var PartialData = ___EmotionJSX(Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -315,8 +324,7 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -329,8 +337,7 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -340,11 +347,9 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: partialDataData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -355,8 +360,7 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "- 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -367,10 +371,7 @@ export var Default = function Default() {
 
   var ZeroData = ___EmotionJSX(Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -384,8 +385,7 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -398,8 +398,7 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -409,11 +408,9 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: zeroData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -424,8 +421,7 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -436,10 +432,7 @@ export var Default = function Default() {
 
   var ZeroValues = ___EmotionJSX(Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -453,8 +446,7 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -467,8 +459,7 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -478,11 +469,9 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: zeroValuesData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -493,8 +482,7 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {

package/lib/recipes/SelectedFieldOverlay.story.js

@@ -7,35 +7,39 @@ 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, {
-    p: 15,
-    sx: {
-      position: 'relative',
-      borderWidth: 2,
-      borderStyle: 'solid',
-      borderColor: 'active',
-      borderRadius: 4,
-      cursor: 'pointer'
-    }
+    sx: sx.container
   }, ___EmotionJSX(TextField, {
     label: "Name",
     controlProps: {
       tabIndex: '-1'
     }
   }), ___EmotionJSX(Box, {
-    sx: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      top: 0,
-      left: 0,
-      alignItems: 'center',
-      justifyContent: 'center',
-      '&:focus': {
-        outline: 'none'
-      }
-    },
+    sx: sx.overlay,
     tabIndex: "0"
   }, ___EmotionJSX(Icon, {
     icon: VisibilityOffOutlineIcon,

package/lib/recipes/TrialExperienceStatusBar.stories.js

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

package/lib/styles/variants/variants.js

@@ -35,6 +35,7 @@ import table from './table';
 import * as tabs from './tabs';
 import tooltip from './tooltip';
 import collapsiblePanel from './collapsiblePanel';
+import dataTable from './../../components/DataTable/DataTable.styles';
 export default _objectSpread(_objectSpread({
   accordion: accordion,
   boxes: boxes,
@@ -58,5 +59,6 @@ export default _objectSpread(_objectSpread({
   stepper: stepper,
   table: table
 }, tabs), {}, {
-  tooltip: tooltip
+  tooltip: tooltip,
+  dataTable: dataTable
 });