@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.5

package/lib/recipes/RadioButtonsWithLinks.stories.js

@@ -0,0 +1,120 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import CloseIcon from 'mdi-react/CloseIcon';
+import { Box, Button, Icon, IconButton, Text } from '../index';
+import RadioField from '../components/RadioField';
+import RadioGroupField from '../components/RadioGroupField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/RadioButtonsWithLinks'
+};
+export var Default = function Default() {
+  var roles = [{
+    name: 'Client Application Developer'
+  }, {
+    name: 'Environment Admin',
+    isDisabled: true
+  }, {
+    name: 'Identity Data Admin',
+    isDisabled: true
+  }, {
+    name: 'Organization Admin'
+  }];
+  var titleSx = {
+    fontSize: 'md',
+    color: 'neutral.20',
+    fontWeight: 2
+  };
+  var subtitleSx = {
+    fontSize: 'md',
+    color: 'neutral.10'
+  };
+
+  var RadioFieldWithButton = function RadioFieldWithButton(_ref) {
+    var fieldName = _ref.fieldName,
+        isDisabled = _ref.isDisabled;
+
+    var _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        isOpen = _useState2[0],
+        setIsOpen = _useState2[1];
+
+    return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center"
+    }, ___EmotionJSX(RadioField, {
+      value: fieldName,
+      label: fieldName,
+      isDisabled: isDisabled
+    }), ___EmotionJSX(Button, {
+      variant: "text",
+      mb: "xs",
+      ml: "md",
+      onPress: function onPress() {
+        return setIsOpen(function (prev) {
+          return !prev;
+        });
+      },
+      isDisabled: isDisabled
+    }, "".concat(isOpen ? 'Hide' : 'Show', " Permissions"))), isOpen && ___EmotionJSX(PermissionsList, {
+      onPress: function onPress() {
+        return setIsOpen(false);
+      }
+    }));
+  };
+
+  var PermissionsList = function PermissionsList(_ref2) {
+    var onPress = _ref2.onPress;
+    return ___EmotionJSX(Box, {
+      p: "md",
+      bg: "neutral.95"
+    }, ___EmotionJSX(Box, {
+      isRow: true,
+      justifyContent: "space-between",
+      mb: "sm"
+    }, ___EmotionJSX(Text, {
+      sx: {
+        fontWeight: 2
+      }
+    }, "Permissions"), ___EmotionJSX(IconButton, {
+      onPress: onPress
+    }, ___EmotionJSX(Icon, {
+      icon: CloseIcon
+    }))), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Resource"), ___EmotionJSX(Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Push Credentials"), ___EmotionJSX(Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"), ___EmotionJSX(Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Organization"), ___EmotionJSX(Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco"), ___EmotionJSX(Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Image"), ___EmotionJSX(Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod")));
+  };
+
+  return ___EmotionJSX(RadioGroupField, null, _mapInstanceProperty(roles).call(roles, function (_ref3) {
+    var name = _ref3.name,
+        isDisabled = _ref3.isDisabled;
+    return ___EmotionJSX(RadioFieldWithButton, {
+      fieldName: name,
+      isDisabled: isDisabled,
+      key: name
+    });
+  }));
+};

package/lib/recipes/RowLineChart.stories.js

@@ -0,0 +1,507 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useCallback, useMemo } from 'react';
+import { Line, LineChart, ResponsiveContainer } from 'recharts';
+import { action } from '@storybook/addon-actions';
+import useResizeObserver from 'use-resize-observer';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import { neutral } from '../styles/colors';
+import { Box, Button, SwitchField, Text, Tooltip, TooltipTrigger } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/RowLineChart',
+  parameters: {
+    chromatic: {
+      diffThreshold: 0.9
+    }
+  }
+};
+var chartData = [{
+  id: 1,
+  emptyData: 0,
+  fullData: 1
+}, {
+  id: 2,
+  emptyData: 0,
+  fullData: 5
+}, {
+  id: 3,
+  emptyData: 0,
+  fullData: 3
+}, {
+  id: 4,
+  emptyData: 0,
+  fullData: 2
+}, {
+  id: 5,
+  emptyData: 0,
+  fullData: 5
+}, {
+  id: 6,
+  emptyData: 0,
+  fullData: 1
+}, {
+  id: 7,
+  emptyData: 0,
+  fullData: 5
+}, {
+  id: 8,
+  emptyData: 0,
+  fullData: 5
+}, {
+  id: 9,
+  emptyData: 0,
+  fullData: 1
+}, {
+  id: 10,
+  emptyData: 0,
+  fullData: 2
+}, {
+  id: 11,
+  emptyData: 0,
+  fullData: 4
+}, {
+  id: 12,
+  emptyData: 0,
+  fullData: 11
+}];
+var partialDataData = [{
+  id: 1
+}, {
+  id: 2
+}, {
+  id: 3
+}, {
+  id: 4
+}, {
+  id: 5
+}, {
+  id: 6
+}, {
+  id: 7,
+  value: 6
+}, {
+  id: 8,
+  value: 5
+}, {
+  id: 9,
+  value: 4
+}, {
+  id: 10,
+  value: 3
+}, {
+  id: 11,
+  value: 2
+}, {
+  id: 12,
+  value: 1
+}];
+var zeroValuesData = [{
+  id: 1,
+  value: 0
+}, {
+  id: 2,
+  value: 0
+}, {
+  id: 3,
+  value: 0
+}, {
+  id: 4,
+  value: 0
+}];
+var zeroData = [{
+  id: 1
+}, {
+  id: 2
+}, {
+  id: 3
+}, {
+  id: 4
+}, {
+  id: 5
+}, {
+  id: 6
+}, {
+  id: 7
+}, {
+  id: 8,
+  value: 0
+}, {
+  id: 9,
+  value: 0
+}, {
+  id: 10,
+  value: 0
+}, {
+  id: 11,
+  value: 0
+}, {
+  id: 12,
+  value: 0
+}];
+export var Default = function Default() {
+  var _useResizeObserver = useResizeObserver(),
+      ref = _useResizeObserver.ref,
+      width = _useResizeObserver.width;
+
+  var _useVisuallyHidden = useVisuallyHidden(),
+      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+
+  var isTablet = useMemo(function () {
+    return width <= 605;
+  }, [width]);
+  var isMobile = useMemo(function () {
+    return width <= 350;
+  }, [width]);
+  var hideIfTablet = useCallback(function () {
+    return isTablet && visuallyHiddenProps;
+  }, [isTablet]);
+  var hideIfMobile = useCallback(function () {
+    return isMobile && visuallyHiddenProps;
+  }, [isMobile]);
+
+  var EmptyData = ___EmotionJSX(Box, {
+    isRow: true,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
+    ref: ref
+  }, ___EmotionJSX(Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
+    variant: "expandableRow.subtitle"
+  }, "Empty Data")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    ml: 20,
+    pr: 15
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "0"), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "expandableRow.chartWrapper",
+    onPress: action('seeContributingDataAction'),
+    ml: 15,
+    pr: 15,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: 15
+  }, ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.chart"
+  }, ___EmotionJSX(ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, ___EmotionJSX(LineChart, {
+    width: 50,
+    height: 18,
+    data: chartData
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: "emptyData",
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "No data yet")), ___EmotionJSX(Box, {
+    size: "sm",
+    ml: 15,
+    width: 50
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
+    size: "sm"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+
+  var FullData = ___EmotionJSX(Box, {
+    isRow: true,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
+    mt: 20
+  }, ___EmotionJSX(Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
+    variant: "expandableRow.subtitle"
+  }, "Full Data")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    ml: 20,
+    pr: 15
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "1,234,234"), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "expandableRow.chartWrapper",
+    onPress: action('seeContributingDataAction'),
+    ml: 15,
+    pr: 15,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: 15
+  }, ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, ___EmotionJSX(ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, ___EmotionJSX(LineChart, {
+    width: 50,
+    height: 18,
+    data: chartData
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: "fullData",
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), ___EmotionJSX(Box, {
+    size: "sm",
+    ml: 15,
+    width: 50
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
+    size: "sm"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+
+  var PartialData = ___EmotionJSX(Box, {
+    isRow: true,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
+    mt: 20
+  }, ___EmotionJSX(Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
+    variant: "expandableRow.subtitle"
+  }, "Partial Data")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    ml: 20,
+    pr: 15
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "234,234"), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "expandableRow.chartWrapper",
+    onPress: action('seeContributingDataAction'),
+    ml: 15,
+    pr: 15,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: 15
+  }, ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, ___EmotionJSX(ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, ___EmotionJSX(LineChart, {
+    width: 50,
+    height: 18,
+    data: partialDataData
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: "value",
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), ___EmotionJSX(Box, {
+    size: "sm",
+    ml: 15,
+    width: 50
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "- 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
+    size: "sm"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+
+  var ZeroData = ___EmotionJSX(Box, {
+    isRow: true,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
+    mt: 20
+  }, ___EmotionJSX(Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
+    variant: "expandableRow.subtitle"
+  }, "Zero Data")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    ml: 20,
+    pr: 15
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "0"), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "expandableRow.chartWrapper",
+    onPress: action('seeContributingDataAction'),
+    ml: 15,
+    pr: 15,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: 15
+  }, ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, ___EmotionJSX(ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, ___EmotionJSX(LineChart, {
+    width: 50,
+    height: 18,
+    data: zeroData
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: "value",
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), ___EmotionJSX(Box, {
+    size: "sm",
+    ml: 15,
+    width: 50
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
+    size: "sm"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+
+  var ZeroValues = ___EmotionJSX(Box, {
+    isRow: true,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
+    mt: 20
+  }, ___EmotionJSX(Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
+    variant: "expandableRow.subtitle"
+  }, "Zero Values")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    ml: 20,
+    pr: 15
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "0"), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "expandableRow.chartWrapper",
+    onPress: action('seeContributingDataAction'),
+    ml: 15,
+    pr: 15,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: 15
+  }, ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, ___EmotionJSX(ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, ___EmotionJSX(LineChart, {
+    width: 50,
+    height: 18,
+    data: zeroValuesData
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: "value",
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), ___EmotionJSX(Box, {
+    size: "sm",
+    ml: 15,
+    width: 50
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
+    size: "sm"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+
+  return ___EmotionJSX(React.Fragment, null, EmptyData, FullData, PartialData, ZeroData, ZeroValues);
+};