@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -0,0 +1,236 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
+import DeleteIcon from 'mdi-react/DeleteIcon';
+import CogsIcon from 'mdi-react/CogsIcon';
+import Box from '../components/Box';
+import { Icon, ComboBoxField, Item, IconButton, IconButtonToggle } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/OneWayToBidirectionalArrow'
+};
+var items = [{
+  name: 'Last Name',
+  id: '1'
+}, {
+  name: 'First Name',
+  id: '2'
+}, {
+  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({
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), ___EmotionJSX("path", {
+      d: "M5.33325 6.66666V8.66666H9.33325V12H5.33325V14L1.33325 10.3333L5.33325 6.66666Z",
+      fill: "currentColor"
+    }), ___EmotionJSX("path", {
+      d: "M14.6666 5.66667L10.6666 2V4H6.66658V7.33333H10.6666V9.33333L14.6666 5.66667Z",
+      fill: "currentColor"
+    }));
+  };
+
+  var CustomOffSvg = function CustomOffSvg(props) {
+    return ___EmotionJSX("svg", _extends({
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), ___EmotionJSX("path", {
+      d: "M5.33325 6.66667V8.66667H9.33325V12H5.33325V14L1.33325 10.3333L5.33325 6.66667Z",
+      fill: "#CACED3"
+    }), ___EmotionJSX("path", {
+      d: "M14.6666 5.66667L10.6666 2V4H6.66658V7.33333H10.6666V9.33333L14.6666 5.66667Z",
+      fill: "currentColor"
+    }));
+  };
+
+  var CustomRightSvg = function CustomRightSvg(props) {
+    return ___EmotionJSX("svg", _extends({
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), ___EmotionJSX("path", {
+      d: "M8 4L4 0V2.18182H0V5.81818H4V8L8 4Z",
+      fill: "currentColor"
+    }));
+  };
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    sx: sx.outerContainer,
+    isRow: true
+  }, ___EmotionJSX(Icon, {
+    icon: DragVerticalIcon,
+    size: 25,
+    sx: sx.dragVerticalIcon
+  }), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "Last Name",
+    "aria-label": "Row one value",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      'aria-label': 'test'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
+    sx: sx.iconButtonToggleContainer
+  }, ___EmotionJSX(IconButtonToggle, {
+    toggledIcon: CustomOnSvg,
+    defaultIcon: CustomOffSvg,
+    title: "Bidirectional/ Outbound toggle",
+    iconProps: {
+      size: 16
+    },
+    buttonProps: {
+      variant: 'bidirectionalIconButton'
+    }
+  })), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "First Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      'aria-label': 'Row one Pingone value'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.iconContainer
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Edit"
+  }, ___EmotionJSX(Icon, {
+    icon: CogsIcon,
+    sx: sx.actionIcon,
+    size: 20,
+    title: "edit icon"
+  })), ___EmotionJSX(IconButton, {
+    sx: sx.iconButton,
+    "aria-label": "Delete"
+  }, ___EmotionJSX(Icon, {
+    icon: DeleteIcon,
+    sx: sx.actionIcon,
+    size: 20,
+    title: "delete icon"
+  })))), ___EmotionJSX(Box, {
+    sx: sx.outerContainer,
+    isRow: true
+  }, ___EmotionJSX(Icon, {
+    icon: DragVerticalIcon,
+    size: 25,
+    sx: sx.dragVerticalIcon
+  }), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "Last Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    "aria-label": "Row one value",
+    controlProps: {
+      'aria-label': 'test'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
+    sx: sx.iconButtonToggleContainer
+  }, ___EmotionJSX(IconButtonToggle, {
+    toggledIcon: CustomRightSvg,
+    defaultIcon: CustomRightSvg,
+    title: "This attribute does not support write-back.",
+    iconProps: {
+      size: 8
+    },
+    buttonProps: {
+      variant: 'bidirectionalIconButton'
+    }
+  })), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "First Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      'aria-label': 'Row one Pingone value'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.iconContainer
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Edit"
+  }, ___EmotionJSX(Icon, {
+    icon: CogsIcon,
+    sx: sx.actionIcon,
+    size: 20,
+    title: "edit icon"
+  })), ___EmotionJSX(IconButton, {
+    sx: sx.iconButton,
+    "aria-label": "Delete"
+  }, ___EmotionJSX(Icon, {
+    icon: DeleteIcon,
+    sx: sx.actionIcon,
+    size: 20,
+    title: "delete icon"
+  })))));
+};

package/lib/recipes/PageHeader.stories.js

@@ -0,0 +1,53 @@
+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)));
+};

package/lib/recipes/PanelHeader.stories.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import AccountIcon from 'mdi-react/AccountIcon';
+import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
+import CloseIcon from 'mdi-react/CloseIcon';
+import Box from '../components/Box';
+import Icon from '../components/Icon';
+import Text from '../components/Text';
+import IconButton from '../components/IconButton';
+import PopoverMenu from '../components/PopoverMenu';
+import { Item, Menu, OverlayProvider } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/Panel Header'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Box, {
+    bg: "accent.99",
+    py: "sm",
+    pl: "md",
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      width: 'fit-content'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: AccountIcon,
+    size: 25,
+    color: "accent.40"
+  }), ___EmotionJSX(Box, {
+    ml: "sm",
+    mr: "xx"
+  }, ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'md',
+      lineHeight: '18px'
+    },
+    variant: "bodyStrong"
+  }, "Fons Vernall"), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px'
+    },
+    variant: "subtitle"
+  }, "fvernall0@google.it")), ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
+    "aria-label": "Menu Button"
+  }, ___EmotionJSX(Icon, {
+    icon: DotsVerticalIcon,
+    size: 16.8,
+    color: "Neutral.40",
+    m: "0.61px"
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "edit"
+  }, "Edit"), ___EmotionJSX(Item, {
+    key: "duplicate"
+  }, "Duplicate"), ___EmotionJSX(Item, {
+    key: "delete",
+    textValue: "delete"
+  }, ___EmotionJSX(Text, {
+    color: "critical.bright"
+  }, "Delete"))))), ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
+    "aria-label": "Close Button",
+    mx: "10px"
+  }, ___EmotionJSX(Icon, {
+    icon: CloseIcon,
+    size: 16.8,
+    color: "Neutral.40",
+    m: "0.61px"
+  }))));
+};

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: "link",
+      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
+    });
+  }));
+};