@pingux/astro 1.27.0-alpha.17 → 1.27.0-alpha.19

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -19,29 +19,6 @@ var items = [{
   name: 'Third Option',
   id: '3'
 }];
-var sx = {
-  actionIcon: {
-    color: 'neutral.30'
-  },
-  dragVerticalIcon: {
-    color: 'neutral.50'
-  },
-  iconButton: {
-    ml: 'xs'
-  },
-  iconButtonToggleContainer: {
-    mx: 'sm',
-    flexShrink: 0
-  },
-  iconContainer: {
-    alignItems: 'center',
-    ml: '12px',
-    mr: '12px'
-  },
-  outerContainer: {
-    alignItems: 'center'
-  }
-};
 export var Default = function Default() {
   var CustomOnSvg = function CustomOnSvg(props) {
     return ___EmotionJSX("svg", _extends({
@@ -89,22 +66,24 @@ export var Default = function Default() {
   };
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-    sx: sx.outerContainer,
+    sx: {
+      alignItems: 'center'
+    },
     isRow: true
   }, ___EmotionJSX(Icon, {
     icon: DragVerticalIcon,
     size: 25,
-    sx: sx.dragVerticalIcon
+    color: "neutral.50"
   }), ___EmotionJSX(ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
-    "aria-label": "Row one value",
     containerProps: {
       width: '275px'
     },
     labelProps: {
       mb: 0
     },
+    "aria-label": "Row one value",
     controlProps: {
       'aria-label': 'test'
     }
@@ -114,7 +93,10 @@ export var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), ___EmotionJSX(Box, {
-    sx: sx.iconButtonToggleContainer
+    sx: {
+      mx: 'sm',
+      flexShrink: 0
+    }
   }, ___EmotionJSX(IconButtonToggle, {
     toggledIcon: CustomOnSvg,
     defaultIcon: CustomOffSvg,
@@ -144,29 +126,35 @@ export var Default = function Default() {
     }, item.name);
   }), ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.iconContainer
+    alignItems: "center",
+    sx: {
+      marginLeft: '12px',
+      marginRight: '12px'
+    }
   }, ___EmotionJSX(IconButton, {
     "aria-label": "Edit"
   }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
-    sx: sx.actionIcon,
+    color: "neutral.30",
     size: 20,
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
-    sx: sx.iconButton,
+    ml: "5px",
     "aria-label": "Delete"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
-    sx: sx.actionIcon,
+    color: "neutral.30",
     size: 20,
     title: "delete icon"
   })))), ___EmotionJSX(Box, {
-    sx: sx.outerContainer,
+    sx: {
+      alignItems: 'center'
+    },
     isRow: true
   }, ___EmotionJSX(Icon, {
     icon: DragVerticalIcon,
     size: 25,
-    sx: sx.dragVerticalIcon
+    color: "neutral.50"
   }), ___EmotionJSX(ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
@@ -186,7 +174,10 @@ export var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), ___EmotionJSX(Box, {
-    sx: sx.iconButtonToggleContainer
+    sx: {
+      mx: 'sm',
+      flexShrink: 0
+    }
   }, ___EmotionJSX(IconButtonToggle, {
     toggledIcon: CustomRightSvg,
     defaultIcon: CustomRightSvg,
@@ -216,20 +207,24 @@ export var Default = function Default() {
     }, item.name);
   }), ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.iconContainer
+    alignItems: "center",
+    sx: {
+      marginLeft: '12px',
+      marginRight: '12px'
+    }
   }, ___EmotionJSX(IconButton, {
     "aria-label": "Edit"
   }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
-    sx: sx.actionIcon,
+    color: "neutral.30",
     size: 20,
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
-    sx: sx.iconButton,
+    ml: "5px",
     "aria-label": "Delete"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
-    sx: sx.actionIcon,
+    color: "neutral.30",
     size: 20,
     title: "delete icon"
   })))));

package/lib/recipes/RowLineChart.stories.js

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

package/lib/styles/variants/variants.js

@@ -35,7 +35,6 @@ 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,
@@ -59,6 +58,5 @@ export default _objectSpread(_objectSpread({
   stepper: stepper,
   table: table
 }, tabs), {}, {
-  tooltip: tooltip,
-  dataTable: dataTable
+  tooltip: tooltip
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.27.0-alpha.17",
+  "version": "1.27.0-alpha.19",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",