@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib/stories/ActionMenu.stories.js

@@ -0,0 +1,338 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionsStory = ActionsStory;
+exports.SimpleListStory = SimpleListStory;
+exports.ExternalOpenState = ExternalOpenState;
+exports.ComplexListStory = ComplexListStory;
+exports.CustomTrigger = CustomTrigger;
+exports.ActionMenuWithExternalAnchor = ActionMenuWithExternalAnchor;
+exports.ActionMenuWithDoubleClickStory = ActionMenuWithDoubleClickStory;
+exports.default = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ = require("..");
+
+var _ActionMenu = require("../ActionMenu");
+
+var _Link = _interopRequireDefault(require("../Link"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _ActionList = require("../ActionList");
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+var _DropdownMenu = require("../DropdownMenu");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const meta = {
+  title: 'Composite components/ActionMenu',
+  component: _ActionMenu.ActionMenu,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(Story, null)))],
+  parameters: {
+    controls: {
+      disabled: true
+    }
+  }
+};
+var _default = meta;
+exports.default = _default;
+
+const ErsatzOverlay = _styledComponents.default.div.withConfig({
+  displayName: "ActionMenustories__ErsatzOverlay",
+  componentId: "sc-1bfovxa-0"
+})(["border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 8px 24px rgba(149,157,165,0.2);padding:8px;"]);
+
+function ActionsStory() {
+  const [option, setOption] = (0, _react.useState)('Select an option');
+
+  const onAction = itemProps => {
+    var _itemProps$text;
+
+    setOption((_itemProps$text = itemProps.text) !== null && _itemProps$text !== void 0 ? _itemProps$text : '');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Actions"), /*#__PURE__*/_react.default.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
+    onAction: onAction,
+    anchorContent: /*#__PURE__*/_react.default.createElement(_octiconsReact.ServerIcon, null),
+    items: [{
+      leadingVisual: _octiconsReact.ServerIcon,
+      text: 'Open current Codespace',
+      description: "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.",
+      descriptionVariant: 'block',
+      trailingText: '⌘O'
+    }, {
+      leadingVisual: _octiconsReact.PlusCircleIcon,
+      text: 'Create new Codespace',
+      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
+      descriptionVariant: 'block',
+      trailingText: '⌘C'
+    }]
+  })));
+}
+
+ActionsStory.storyName = 'Actions';
+
+function SimpleListStory() {
+  const [option, setOption] = (0, _react.useState)('Select an option');
+
+  const onAction = itemProps => {
+    setOption(itemProps.text || '');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
+    onAction: onAction,
+    anchorContent: "Menu",
+    overlayProps: {
+      'data-test-id': 'some_test_id',
+      onMouseDown: e => // eslint-disable-next-line no-console
+      console.log('onMouseDown in the internal Overlay can be useful for controlling event interactions', e)
+    },
+    items: [{
+      text: 'New file',
+      trailingText: '⌘O',
+      disabled: true,
+      leadingVisual: _octiconsReact.ProjectIcon
+    }, _ActionList.ActionList.Divider, {
+      text: 'Copy link',
+      trailingText: 'ctrl+C'
+    }, {
+      text: 'Edit file',
+      trailingText: '⌘E'
+    }, {
+      text: 'Delete file',
+      variant: 'danger',
+      trailingText: '⌘D'
+    }]
+  })));
+}
+
+SimpleListStory.storyName = 'Simple List';
+
+function ExternalOpenState() {
+  const [option, setOption] = (0, _react.useState)('Select an option');
+  const [open, setOpen] = (0, _react.useState)(false);
+
+  const onAction = itemProps => {
+    setOption(itemProps.text);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/_react.default.createElement("h2", null, "External Open State: ", open ? 'Open' : 'Closed'), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setOpen(!open)
+  }, "Toggle External State")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
+    onAction: onAction,
+    anchorContent: "Menu",
+    open: open,
+    setOpen: setOpen,
+    items: [{
+      text: 'New file',
+      trailingText: '⌘O',
+      disabled: true,
+      leadingVisual: _octiconsReact.ProjectIcon
+    }, _ActionList.ActionList.Divider, {
+      text: 'Copy link',
+      trailingText: 'ctrl+C'
+    }, {
+      text: 'Edit file',
+      trailingText: '⌘E'
+    }, {
+      text: 'Delete file',
+      variant: 'danger',
+      trailingText: '⌘D'
+    }]
+  })));
+}
+
+ExternalOpenState.storyName = 'External Open State';
+
+function ComplexListStory() {
+  const [option, setOption] = (0, _react.useState)('Select an option');
+
+  const onAction = itemProps => {
+    setOption(itemProps.text || '');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Complex List"), /*#__PURE__*/_react.default.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
+    onAction: onAction,
+    anchorContent: "Menu",
+    groupMetadata: [{
+      groupId: '0'
+    }, {
+      groupId: '1',
+      header: {
+        title: 'Live query',
+        variant: 'subtle'
+      }
+    }, {
+      groupId: '2',
+      header: {
+        title: 'Layout',
+        variant: 'subtle'
+      }
+    }, {
+      groupId: '3',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(_ActionList.ActionList.Item, _extends({
+        style: {
+          fontWeight: 'bold'
+        }
+      }, props))
+    }, {
+      groupId: '4'
+    }],
+    items: [{
+      leadingVisual: _octiconsReact.TypographyIcon,
+      text: 'Rename',
+      groupId: '0'
+    }, {
+      leadingVisual: _octiconsReact.VersionsIcon,
+      text: 'Duplicate',
+      groupId: '0'
+    }, {
+      leadingVisual: _octiconsReact.SearchIcon,
+      text: 'repo:github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(_ActionList.ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props)),
+      trailingText: '⌘S',
+      trailingIcon: _octiconsReact.ArrowRightIcon
+    }, {
+      leadingVisual: _octiconsReact.NoteIcon,
+      text: 'Table',
+      description: 'Information-dense table optimized for operations across teams',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: _octiconsReact.ProjectIcon,
+      text: 'Board',
+      description: 'Kanban-style board focused on visual states',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: _octiconsReact.FilterIcon,
+      text: 'Save sort and filters to current view',
+      groupId: '3'
+    }, {
+      leadingVisual: _octiconsReact.FilterIcon,
+      text: 'Save sort and filters to new view',
+      groupId: '3'
+    }, {
+      leadingVisual: _octiconsReact.GearIcon,
+      text: 'View settings',
+      groupId: '4'
+    }]
+  })));
+}
+
+ComplexListStory.storyName = 'Complex List';
+
+function CustomTrigger() {
+  const customAnchor = props => /*#__PURE__*/_react.default.createElement(_Link.default, _extends({}, props, {
+    sx: {
+      cursor: 'pointer'
+    }
+  }));
+
+  const [option, setOption] = (0, _react.useState)('Select an option');
+  const onAction = (0, _react.useCallback)(itemProps => {
+    setOption(itemProps.text || '');
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Custom Trigger"), /*#__PURE__*/_react.default.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
+    onAction: onAction,
+    anchorContent: "Menu",
+    renderAnchor: customAnchor,
+    items: [{
+      text: 'New file'
+    }, _ActionList.ActionList.Divider, {
+      text: 'Copy link'
+    }, {
+      text: 'Edit file'
+    }, {
+      text: 'Delete file',
+      variant: 'danger'
+    }]
+  })));
+}
+
+CustomTrigger.storyName = 'Custom Trigger';
+
+function ActionMenuWithExternalAnchor() {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Open Menu"), /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
+    renderAnchor: null,
+    anchorRef: buttonRef,
+    open: isOpen,
+    setOpen: setIsOpen,
+    items: [{
+      text: 'New file'
+    }, _ActionList.ActionList.Divider, {
+      text: 'Copy link'
+    }, {
+      text: 'Edit file'
+    }, {
+      text: 'Delete file',
+      variant: 'danger'
+    }]
+  }));
+}
+
+const DoubleClickableAnchor = ({
+  onClick: callback,
+  ...rest
+}) => {
+  const onClick = (0, _react.useCallback)(event => {
+    if (event.detail === 2) {
+      event.preventDefault();
+    }
+
+    callback === null || callback === void 0 ? void 0 : callback(event);
+  }, [callback]);
+  return /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+    onClick: onClick
+  }, rest));
+};
+
+DoubleClickableAnchor.displayName = "DoubleClickableAnchor";
+
+function ActionMenuWithDoubleClickStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Actions"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_ActionMenu.ActionMenu, {
+    renderAnchor: DoubleClickableAnchor,
+    anchorContent: /*#__PURE__*/_react.default.createElement(_octiconsReact.ServerIcon, null),
+    items: [{
+      leadingVisual: _octiconsReact.ServerIcon,
+      text: 'Open current Codespace',
+      description: "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.",
+      descriptionVariant: 'block',
+      trailingText: '⌘O'
+    }, {
+      leadingVisual: _octiconsReact.PlusCircleIcon,
+      text: 'Create new Codespace',
+      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
+      descriptionVariant: 'block',
+      trailingText: '⌘C'
+    }]
+  })));
+}
+
+ActionMenuWithDoubleClickStory.storyName = 'ActionMenu with double-clickable anchor';

package/lib/stories/AnchoredOverlay.stories.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PortalInsideScrollingElement = exports.DefaultPortal = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _2 = require("..");
+
+var _Heading = _interopRequireDefault(require("../Heading"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _AnchoredOverlay = require("../AnchoredOverlay");
+
+var _Portal = require("../Portal");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Generic behaviors/AnchoredOverlay',
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_2.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_2.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }]
+};
+exports.default = _default;
+
+const HeaderAndLayout = ({
+  children
+}) => {
+  const scrollingElementRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (scrollingElementRef.current) {
+      (0, _Portal.registerPortalRoot)(scrollingElementRef.current, 'scrollingPortal');
+    }
+  }, [scrollingElementRef]);
+  return /*#__PURE__*/_react.default.createElement(_2.Box, {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    padding: 4,
+    backgroundColor: "lavenderblush"
+  }, /*#__PURE__*/_react.default.createElement(_Heading.default, null, "Header or some such"), /*#__PURE__*/_react.default.createElement(_2.Box, {
+    position: "absolute",
+    top: 10,
+    right: 4,
+    bottom: 4,
+    left: 4,
+    overflow: "scroll",
+    backgroundColor: "powderblue"
+  }, children, /*#__PURE__*/_react.default.createElement(_2.Box, {
+    ref: scrollingElementRef,
+    position: "absolute",
+    top: 0,
+    left: 0
+  })));
+};
+
+HeaderAndLayout.displayName = "HeaderAndLayout";
+
+const ButtonWithAnchoredOverlay = ({
+  portalContainerName
+}) => {
+  const [open, setOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
+    open: open,
+    onOpen: () => setOpen(true),
+    onClose: () => setOpen(false),
+    width: "small",
+    height: "auto",
+    renderAnchor: props => /*#__PURE__*/_react.default.createElement(_Button.default, props, "Kitten, please"),
+    overlayProps: {
+      portalContainerName
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Box, {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "thistle",
+    display: "flex",
+    flexDirection: "column"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: `//placekitten.com/200/300`,
+    alt: "kitten"
+  })));
+};
+
+ButtonWithAnchoredOverlay.displayName = "ButtonWithAnchoredOverlay";
+
+const DefaultPortal = () => {
+  const rows = 40;
+  const columns = 20;
+  return /*#__PURE__*/_react.default.createElement(HeaderAndLayout, null, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, Array(rows).fill(null).map((_, i) => /*#__PURE__*/_react.default.createElement("tr", {
+    key: i
+  }, Array(columns).fill(null).map((_1, j) => /*#__PURE__*/_react.default.createElement("td", {
+    key: `${i}${j}`
+  }, /*#__PURE__*/_react.default.createElement(_2.Box, {
+    m: 2
+  }, /*#__PURE__*/_react.default.createElement(ButtonWithAnchoredOverlay, null)))))))));
+};
+
+exports.DefaultPortal = DefaultPortal;
+DefaultPortal.displayName = "DefaultPortal";
+
+const PortalInsideScrollingElement = () => {
+  const rows = 40;
+  const columns = 20;
+  return /*#__PURE__*/_react.default.createElement(HeaderAndLayout, null, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, Array(rows).fill(null).map((_, i) => /*#__PURE__*/_react.default.createElement("tr", {
+    key: i
+  }, Array(columns).fill(null).map((_1, j) => /*#__PURE__*/_react.default.createElement("td", {
+    key: `${i}${j}`
+  }, /*#__PURE__*/_react.default.createElement(_2.Box, {
+    m: 2
+  }, /*#__PURE__*/_react.default.createElement(ButtonWithAnchoredOverlay, {
+    portalContainerName: "scrollingPortal"
+  })))))))));
+};
+
+exports.PortalInsideScrollingElement = PortalInsideScrollingElement;
+PortalInsideScrollingElement.displayName = "PortalInsideScrollingElement";

package/lib/stories/AvatarStack.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarStackStory = AvatarStackStory;
+exports.default = void 0;
+
+var _AvatarStack = _interopRequireDefault(require("../AvatarStack"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const meta = {
+  title: 'Composite components/AvatarStack',
+  component: _AvatarStack.default,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(Story, null)))],
+  parameters: {
+    controls: {
+      disabled: true
+    }
+  }
+};
+var _default = meta;
+exports.default = _default;
+
+function AvatarStackStory() {
+  return /*#__PURE__*/_react.default.createElement(_AvatarStack.default, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://avatars.githubusercontent.com/primer",
+    alt: ""
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://avatars.githubusercontent.com/github",
+    alt: ""
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://avatars.githubusercontent.com/primer",
+    alt: ""
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://avatars.githubusercontent.com/github",
+    alt: ""
+  }));
+}
+
+AvatarStackStory.displayName = "AvatarStackStory";
+AvatarStackStory.storyName = 'AvatarStack';

package/lib/stories/Button.stories.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buttonTableList = exports.buttonGroup = exports.closeButton = exports.invisibleButton = exports.primaryButton = exports.outlineButton = exports.dangerButton = exports.defaultButton = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = {
+  title: 'Composite components/Button',
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }],
+  argTypes: {
+    as: {
+      table: {
+        disable: true
+      }
+    },
+    theme: {
+      table: {
+        disable: true
+      }
+    },
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    variant: {
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large']
+      }
+    }
+  }
+};
+exports.default = _default;
+
+const defaultButton = args => /*#__PURE__*/_react.default.createElement(_.Button, args, "Default Button");
+
+exports.defaultButton = defaultButton;
+defaultButton.displayName = "defaultButton";
+
+const dangerButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonDanger, args, "Danger Button");
+
+exports.dangerButton = dangerButton;
+dangerButton.displayName = "dangerButton";
+
+const outlineButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonOutline, args, "Outline Button");
+
+exports.outlineButton = outlineButton;
+outlineButton.displayName = "outlineButton";
+
+const primaryButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonPrimary, args, "Primary Button");
+
+exports.primaryButton = primaryButton;
+primaryButton.displayName = "primaryButton";
+
+const invisibleButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonInvisible, args, "Invisible Button");
+
+exports.invisibleButton = invisibleButton;
+invisibleButton.displayName = "invisibleButton";
+
+const closeButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonClose, _extends({}, args, {
+  onClick: () => alert('button clicked.')
+}));
+
+exports.closeButton = closeButton;
+closeButton.displayName = "closeButton";
+
+const buttonGroup = args => /*#__PURE__*/_react.default.createElement(_.ButtonGroup, {
+  display: "block",
+  my: 2
+}, /*#__PURE__*/_react.default.createElement(_.Button, args, "Button 1"), /*#__PURE__*/_react.default.createElement(_.Button, args, "Button 2"), /*#__PURE__*/_react.default.createElement(_.Button, args, "Button 3"));
+
+exports.buttonGroup = buttonGroup;
+buttonGroup.displayName = "buttonGroup";
+
+const buttonTableList = args => /*#__PURE__*/_react.default.createElement(_.ButtonTableList, args, "Button Table List");
+
+exports.buttonTableList = buttonTableList;
+buttonTableList.displayName = "buttonTableList";
+defaultButton.args = {
+  variant: 'medium'
+};
+dangerButton.args = {
+  variant: 'medium'
+};
+outlineButton.args = {
+  variant: 'medium'
+};
+primaryButton.args = {
+  variant: 'medium'
+};
+invisibleButton.args = {
+  variant: 'medium'
+};
+closeButton.args = {
+  variant: 'medium'
+};
+buttonGroup.args = {
+  variant: 'medium'
+};
+buttonTableList.args = {
+  variant: 'medium'
+};