@pingux/astro 2.91.0 → 2.92.0-alpha.1

package/lib/cjs/styles/themes/next-gen/stories/NextGenNavBar.chromatic.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../../..");
+var _NavBarNextGenComponent = require("./NavBarNextGenComponent");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only NextGen NavBar'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.NextGenTheme
+  }, (0, _react2.jsx)(_NavBarNextGenComponent.NavBarNextGenComponent, null));
+};
+exports.Default = Default;

package/lib/cjs/styles/themes/next-gen/stories/NextGenStickerSheet.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/styles/themes/next-gen/stories/NextGenStickerSheet.chromatic.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../../..");
+var _StickerSheetComponent = _interopRequireDefault(require("./StickerSheetComponent"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'NextGen Sticker Sheet'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.NextGenTheme
+  }, (0, _react2.jsx)(_StickerSheetComponent["default"], null));
+};
+exports.Default = Default;

package/lib/cjs/styles/themes/next-gen/stories/StickerSheetComponent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const StickerSheetComponent: () => React.JSX.Element;
+export default StickerSheetComponent;

package/lib/cjs/styles/themes/next-gen/stories/StickerSheetComponent.js

@@ -0,0 +1,286 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _react = _interopRequireDefault(require("react"));
+var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
+var _index = require("../../../../index");
+var _statuses = _interopRequireDefault(require("../../../../utils/devUtils/constants/statuses"));
+var _react2 = require("@emotion/react");
+var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
+var items = [{
+  id: 1,
+  name: 'Aardvark',
+  key: 'Aardvark'
+}, {
+  id: 2,
+  name: 'Kangaroo',
+  key: 'Kangaroo'
+}, {
+  id: 3,
+  name: 'Snake',
+  key: 'Snake'
+}, {
+  id: 4,
+  name: 'Frog',
+  key: 'Frog'
+}, {
+  id: 5,
+  name: 'Seal',
+  key: 'Seal'
+}, {
+  id: 6,
+  name: 'Orangutan',
+  key: 'Orangutan'
+}, {
+  id: 7,
+  name: 'Shark',
+  key: 'Shark'
+}];
+var textStyling = {
+  fontSize: 'md',
+  fontWeight: 600
+};
+var avatarColors = ['orange', 'cyan', 'green', 'purple', 'pink', 'red', 'yellow', 'teal'];
+var badges = ['primary', 'baseBadge', 'success', 'danger', 'warning', 'info', 'dark'];
+var tabs = [{
+  name: 'Tab 1',
+  children: 'Tab 1 body'
+}, {
+  name: 'Tab 2',
+  children: 'Tab 2 body'
+}, {
+  name: 'Tab 3',
+  children: 'Tab 3 body'
+}];
+var StickerSheetComponent = function StickerSheetComponent() {
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      backgroundColor: 'background.base'
+    },
+    height: "100%",
+    p: "lg",
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.Box, {
+    p: "lg"
+  }, (0, _react2.jsx)(_index.MultivaluesField, {
+    items: items,
+    label: "Multivalues"
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.key,
+      "data-id": item.name,
+      "aria-label": item.name
+    }, item.name);
+  })), (0, _react2.jsx)(_index.Tabs, {
+    items: tabs
+  }, (0, _react2.jsx)(_index.Tab, {
+    key: "tab1",
+    title: "Tab 1"
+  }, (0, _react2.jsx)(_index.Text, null, "This is content for Tab 1")), (0, _react2.jsx)(_index.Tab, {
+    key: "tab2",
+    title: "Tab 2"
+  }, (0, _react2.jsx)(_index.Text, null, "This is content for Tab 2"))), (0, _react2.jsx)(_index.Box, {
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    alignContent: "center"
+  }, (0, _map["default"])(avatarColors).call(avatarColors, function (color) {
+    return (0, _react2.jsx)(_index.IconWrapper, {
+      title: {
+        name: 'trash can'
+      },
+      size: "sm",
+      key: color,
+      icon: _DeleteIcon["default"],
+      color: color
+    });
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    alignContent: "center"
+  }, (0, _map["default"])(avatarColors).call(avatarColors, function (color) {
+    return (0, _react2.jsx)(_index.IconWrapper, {
+      title: {
+        name: 'trash can'
+      },
+      size: "md",
+      key: color,
+      icon: _DeleteIcon["default"],
+      color: color
+    });
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    alignContent: "center",
+    flexWrap: "wrap"
+  }, (0, _map["default"])(avatarColors).call(avatarColors, function (color) {
+    return (0, _react2.jsx)(_index.IconWrapper, {
+      title: {
+        name: 'trash can'
+      },
+      size: "lg",
+      key: color,
+      icon: _DeleteIcon["default"],
+      color: color
+    });
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    alignContent: "center"
+  }, (0, _react2.jsx)(_index.Button, {
+    sx: {
+      maxWidth: 'fit-content'
+    }
+  }, "Default"), (0, _react2.jsx)(_index.Button, {
+    variant: "primary",
+    sx: {
+      maxWidth: 'fit-content'
+    }
+  }, "Primary"), (0, _react2.jsx)(_index.Button, {
+    variant: "critical",
+    sx: {
+      maxWidth: 'fit-content'
+    }
+  }, "Critical"), (0, _react2.jsx)(_index.Button, {
+    variant: "link",
+    sx: {
+      maxWidth: 'fit-content'
+    }
+  }, "Link"), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "default icon button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _DeleteIcon["default"],
+    title: {
+      name: 'Create Icon'
+    }
+  })), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "default icon button",
+    variant: "nextGen"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _DeleteIcon["default"],
+    title: {
+      name: 'Create Icon'
+    }
+  }))), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md"
+  }, (0, _map["default"])(avatarColors).call(avatarColors, function (avatar) {
+    return (0, _react2.jsx)(_index.Avatar, {
+      key: avatar,
+      color: avatar,
+      defaultText: "LK",
+      size: "avatar.md"
+    });
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md"
+  }, (0, _map["default"])(badges).call(badges, function (badge) {
+    return (0, _react2.jsx)(_index.Badge, {
+      key: badge,
+      variant: badge,
+      label: badge
+    });
+  })), (0, _react2.jsx)(_index.Card, {
+    variant: "cards.flat",
+    width: "500px"
+  }, (0, _react2.jsx)(_index.Box, {
+    variant: "cards.header"
+  }, (0, _react2.jsx)(_index.Text, {
+    as: "h5",
+    variant: "h5",
+    sx: textStyling
+  }, "Optional Card Header")), (0, _react2.jsx)(_index.Box, {
+    variant: "cards.body"
+  }, (0, _react2.jsx)(_index.Text, {
+    as: "h5",
+    variant: "h5",
+    sx: textStyling,
+    mb: "md"
+  }, "Card Body"), (0, _react2.jsx)(_index.Box, {
+    gap: "md"
+  }, (0, _react2.jsx)(_index.Button, {
+    sx: {
+      width: 'fit-content'
+    },
+    variant: "primary"
+  }, "Save"), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sed ratione, recusandae ipsam explicabo, quasi vel maxime sint harum qui rerum perferendis. Voluptatem nisi eaque, distinctio accusamus nobis voluptas nemo."))), (0, _react2.jsx)(_index.Box, {
+    variant: "cards.footer"
+  }, (0, _react2.jsx)(_index.Text, {
+    as: "h5",
+    variant: "h5",
+    sx: textStyling
+  }, "Optional Card Footer")))), (0, _react2.jsx)(_index.CheckboxField, {
+    isDefaultSelected: true,
+    label: "Click me"
+  }), (0, _react2.jsx)(_index.RadioGroupField, null, (0, _react2.jsx)(_index.RadioField, {
+    value: "A",
+    label: "A"
+  }), (0, _react2.jsx)(_index.RadioField, {
+    value: "B",
+    label: "B"
+  }), (0, _react2.jsx)(_index.RadioField, {
+    value: "C",
+    label: "C"
+  })), (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Popover"), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_index.Item, {
+    key: "edit"
+  }, "Edit"), (0, _react2.jsx)(_index.Item, {
+    key: "duplicate"
+  }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+    key: "delete",
+    textValue: "delete"
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "critical.bright"
+  }, "Delete"))))), (0, _react2.jsx)(_index.Box, {
+    p: "md",
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.TextField, {
+    helperText: "Does this help",
+    label: "Textfield"
+  }), (0, _react2.jsx)(_index.TextField, {
+    helperText: "Does this help",
+    label: "Disabled Textfield",
+    isDisabled: true
+  }), (0, _react2.jsx)(_index.SearchField, {
+    label: "SearchField"
+  }), (0, _react2.jsx)(_index.TextAreaField, {
+    helperText: "Does this help",
+    label: "TextAreaField"
+  })), (0, _react2.jsx)(_index.Box, {
+    p: "md"
+  }, (0, _react2.jsx)(_index.SelectField, {
+    label: "SelectField"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "edit"
+  }, "Edit"), (0, _react2.jsx)(_index.Item, {
+    key: "duplicate"
+  }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+    key: "delete",
+    textValue: "delete"
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "critical.bright"
+  }, "Delete")))), (0, _react2.jsx)(_index.Messages, null, (0, _react2.jsx)(_index.Item, {
+    key: "message1",
+    "data-id": "message1",
+    status: _statuses["default"].SUCCESS
+  }, loremText), (0, _react2.jsx)(_index.Item, {
+    key: "message2",
+    "data-id": "message2",
+    status: _statuses["default"].WARNING
+  }, loremText), (0, _react2.jsx)(_index.Item, {
+    key: "message3",
+    "data-id": "message3",
+    status: _statuses["default"].ERROR
+  }, loremText), (0, _react2.jsx)(_index.Item, {
+    key: "message4",
+    "data-id": "message4"
+  }, loremText)));
+};
+var _default = StickerSheetComponent;
+exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/variants/avatar.d.ts

@@ -0,0 +1,43 @@
+export declare const avatar: {
+    backgroundColor: string;
+    color: string;
+    cursor: string;
+    '&.is-orange': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&.is-green': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&.is-purple': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&.is-pink': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&.is-red': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&.is-yellow': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&.is-cyan': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&.is-teal': {
+        backgroundColor: string;
+        color: string;
+    };
+    display: string;
+    borderRadius: string;
+    textAlign: string;
+    alignItems: string;
+    justifyContent: string;
+    fontFamily: string;
+};

package/lib/cjs/styles/themes/next-gen/variants/avatar.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.avatar = void 0;
+var avatar = {
+  backgroundColor: 'lightcyan',
+  color: 'darkcyan',
+  cursor: 'pointer',
+  '&.is-orange': {
+    backgroundColor: 'lightorange',
+    color: 'darkorange'
+  },
+  '&.is-green': {
+    backgroundColor: 'lightgreen',
+    color: 'darkgreen'
+  },
+  '&.is-purple': {
+    backgroundColor: 'lightpurple',
+    color: 'darkpurple'
+  },
+  '&.is-pink': {
+    backgroundColor: 'lightpink',
+    color: 'darkpink'
+  },
+  '&.is-red': {
+    backgroundColor: 'lightred',
+    color: 'darkred'
+  },
+  '&.is-yellow': {
+    backgroundColor: 'lightyellow',
+    color: 'darkyellow'
+  },
+  '&.is-cyan': {
+    backgroundColor: 'lightcyan',
+    color: 'darkcyan'
+  },
+  '&.is-teal': {
+    backgroundColor: 'lightteal',
+    color: 'darkteal'
+  },
+  display: 'flex',
+  borderRadius: '50%',
+  textAlign: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontFamily: 'standard'
+};
+exports.avatar = avatar;

package/lib/cjs/styles/themes/next-gen/variants/badges.d.ts

@@ -0,0 +1,208 @@
+export declare const badgeDeleteButton: {
+    borderRadius: string;
+    cursor: string;
+    height: number;
+    p: number;
+    width: number;
+    transition: string;
+    outline: string;
+    border: string;
+    borderColor: string;
+    path: {
+        fill: string;
+    };
+    '&.is-focused': {
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    '&.is-hovered': {
+        backgroundColor: string;
+        path: {
+            fill: string;
+        };
+    };
+    '&.is-pressed': {
+        backgroundColor: string;
+        borderColor: string;
+        path: {
+            fill: string;
+        };
+    };
+};
+export declare const badges: {
+    primary: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
+    };
+    baseBadge: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
+    };
+    secondary: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
+    };
+    success: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
+    };
+    danger: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
+    };
+    warning: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
+    };
+    dark: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
+    };
+    selectedItemBadge: {
+        backgroundColor: string;
+        paddingRight: string;
+        '& span': {
+            fontSize: string;
+            color: string;
+            fontWeight: number;
+        };
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
+    };
+    readOnlyBadge: {
+        '& span': {
+            fontSize: string;
+        };
+    };
+    badgeDeleteButton: {
+        borderRadius: string;
+        cursor: string;
+        height: number;
+        p: number;
+        width: number;
+        transition: string;
+        outline: string;
+        border: string;
+        borderColor: string;
+        path: {
+            fill: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+        };
+    };
+};