@primer/components 31.2.0-rc.c53cfd9e → 31.2.0

package/lib-esm/stories/ActionList.stories.js

@@ -1,395 +0,0 @@
-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); }
-
-import { ServerIcon, PlusCircleIcon, TypographyIcon, VersionsIcon, SearchIcon, NoteIcon, ProjectIcon, FilterIcon, GearIcon, ArrowRightIcon, ArrowLeftIcon } from '@primer/octicons-react';
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import { Label, ThemeProvider } from '..';
-import { ActionList as _ActionList } from '../ActionList';
-import { Header } from '../ActionList/Header';
-import BaseStyles from '../BaseStyles';
-import sx from '../sx';
-const ActionList = Object.assign(_ActionList, {
-  Header
-});
-const meta = {
-  title: 'Composite components/ActionList',
-  component: ActionList,
-  decorators: [Story => /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)))],
-  parameters: {
-    controls: {
-      disable: true
-    }
-  }
-};
-export default meta;
-const ErsatzOverlay = styled.div.withConfig({
-  displayName: "ActionListstories__ErsatzOverlay",
-  componentId: "akdcn0-0"
-})(["border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 8px 24px rgba(149,157,165,0.2);overflow:hidden;max-width:", ";"], ({
-  maxWidth
-}) => maxWidth || 'none');
-export function ActionsStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    showItemDividers: true,
-    items: [{
-      leadingVisual: 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'
-    }, {
-      leadingVisual: PlusCircleIcon,
-      text: 'Create new Codespace',
-      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
-      descriptionVariant: 'block'
-    }]
-  })));
-}
-ActionsStory.storyName = 'Actions';
-export function SimpleListStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    items: [{
-      text: 'New file',
-      showDivider: true
-    }, ActionList.Divider, {
-      text: 'Copy link',
-      showDivider: true
-    }, {
-      text: 'Edit file',
-      showDivider: true
-    }, {
-      text: 'Delete file',
-      variant: 'danger',
-      showDivider: true
-    }]
-  })));
-}
-SimpleListStory.storyName = 'Simple List';
-const selectListItems = new Array(6).fill(undefined).map((_, i) => {
-  return {
-    text: `Item ${i}`,
-    id: i
-  };
-});
-export function SingleSelectListStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    items: selectListItems.map((item, index) => ({ ...item,
-      selected: index === 1
-    }))
-  })));
-}
-SingleSelectListStory.storyName = 'Single Select';
-export function MultiSelectListStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Multi Select List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    selectionVariant: "multiple",
-    items: selectListItems.map((item, index) => ({ ...item,
-      selected: index === 1 || index === 3
-    }))
-  })));
-}
-MultiSelectListStory.storyName = 'Multi Select';
-export function ComplexListInsetVariantStory() {
-  const StyledDiv = styled.div.withConfig({
-    displayName: "ActionListstories__StyledDiv",
-    componentId: "akdcn0-1"
-  })(["", ""], sx);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Inset Variant"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    groupMetadata: [{
-      groupId: '0'
-    }, {
-      groupId: '1',
-      header: {
-        title: 'Live query',
-        variant: 'filled'
-      }
-    }, {
-      groupId: '2',
-      header: {
-        title: 'Layout',
-        variant: 'subtle'
-      },
-      showItemDividers: true
-    }, {
-      groupId: '3',
-      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
-        style: {
-          fontWeight: 'bold'
-        }
-      }, props))
-    }, {
-      groupId: '4',
-      renderItem: ({
-        leadingVisual: LeadingVisual,
-        ...props
-      }) => /*#__PURE__*/React.createElement(ActionList.Item, _extends({}, props, {
-        leadingVisual: () => /*#__PURE__*/React.createElement(StyledDiv, {
-          sx: {
-            '&>svg': {
-              fill: 'white'
-            }
-          }
-        }, LeadingVisual && /*#__PURE__*/React.createElement(LeadingVisual, null))
-      })),
-      renderGroup: ({
-        sx: sxProps,
-        ...props
-      }) => /*#__PURE__*/React.createElement(ActionList.Group, _extends({}, props, {
-        sx: { ...sxProps,
-          backgroundColor: 'cornflowerblue',
-          color: 'white'
-        }
-      }))
-    }],
-    items: [{
-      leadingVisual: TypographyIcon,
-      text: 'Rename',
-      groupId: '0'
-    }, {
-      leadingVisual: VersionsIcon,
-      text: 'Duplicate',
-      description: 'Create a copy',
-      descriptionVariant: 'inline',
-      groupId: '0'
-    }, {
-      leadingVisual: SearchIcon,
-      text: 'repo:github/memex,github/github',
-      groupId: '1',
-      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
-        style: {
-          color: 'rebeccapurple'
-        }
-      }, props))
-    }, {
-      leadingVisual: NoteIcon,
-      text: 'Table',
-      description: 'Information-dense table optimized for operations across teams',
-      descriptionVariant: 'block',
-      groupId: '2'
-    }, {
-      leadingVisual: ProjectIcon,
-      text: 'Board',
-      description: 'Kanban-style board focused on visual states',
-      descriptionVariant: 'block',
-      groupId: '2'
-    }, {
-      leadingVisual: FilterIcon,
-      text: 'Save sort and filters to current view',
-      groupId: '3'
-    }, {
-      leadingVisual: FilterIcon,
-      text: 'Save sort and filters to new view',
-      groupId: '3'
-    }, {
-      leadingVisual: GearIcon,
-      text: 'View settings',
-      groupId: '4'
-    }]
-  })));
-}
-ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant';
-export function ComplexListFullVariantStory() {
-  const StyledDiv = styled.div.withConfig({
-    displayName: "ActionListstories__StyledDiv",
-    componentId: "akdcn0-2"
-  })(["", ""], sx);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Full Variant"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    variant: "full",
-    groupMetadata: [{
-      groupId: '0'
-    }, {
-      groupId: '1',
-      header: {
-        title: 'Live query',
-        variant: 'filled'
-      }
-    }, {
-      groupId: '2',
-      header: {
-        title: 'Layout',
-        variant: 'subtle'
-      }
-    }, {
-      groupId: '3',
-      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
-        style: {
-          fontWeight: 'bold'
-        }
-      }, props))
-    }, {
-      groupId: '4',
-      renderItem: ({
-        leadingVisual: LeadingVisual,
-        ...props
-      }) => /*#__PURE__*/React.createElement(ActionList.Item, _extends({}, props, {
-        leadingVisual: () => /*#__PURE__*/React.createElement(StyledDiv, {
-          sx: {
-            '&>svg': {
-              fill: 'white'
-            }
-          }
-        }, LeadingVisual && /*#__PURE__*/React.createElement(LeadingVisual, null))
-      })),
-      renderGroup: ({
-        sx: sxProps,
-        ...props
-      }) => /*#__PURE__*/React.createElement(ActionList.Group, _extends({}, props, {
-        sx: { ...sxProps,
-          backgroundColor: 'cornflowerblue',
-          color: 'white'
-        }
-      }))
-    }],
-    items: [{
-      leadingVisual: TypographyIcon,
-      text: 'Rename',
-      groupId: '0'
-    }, {
-      leadingVisual: VersionsIcon,
-      text: 'Duplicate',
-      groupId: '0'
-    }, {
-      leadingVisual: SearchIcon,
-      text: 'repo:github/memex,github/github',
-      groupId: '1',
-      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
-        style: {
-          color: 'rebeccapurple'
-        }
-      }, props))
-    }, {
-      leadingVisual: NoteIcon,
-      text: 'Table',
-      description: 'Information-dense table optimized for operations across teams',
-      descriptionVariant: 'block',
-      groupId: '2'
-    }, {
-      leadingVisual: ProjectIcon,
-      text: 'Board',
-      description: 'Kanban-style board focused on visual states',
-      descriptionVariant: 'block',
-      groupId: '2'
-    }, {
-      leadingVisual: FilterIcon,
-      text: 'Save sort and filters to current view',
-      groupId: '3'
-    }, {
-      leadingVisual: FilterIcon,
-      text: 'Save sort and filters to new view',
-      groupId: '3'
-    }, {
-      leadingVisual: GearIcon,
-      text: 'View settings',
-      groupId: '4'
-    }]
-  })));
-}
-ComplexListFullVariantStory.storyName = 'Complex List — Full Variant';
-export function HeaderStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Header"), /*#__PURE__*/React.createElement("h2", null, "Filled Variant"), /*#__PURE__*/React.createElement(ActionList.Header, {
-    title: "Layout",
-    variant: "filled"
-  }), /*#__PURE__*/React.createElement("h2", null, "Subtle Variant"), /*#__PURE__*/React.createElement(ActionList.Header, {
-    title: "Layout",
-    variant: "subtle"
-  }));
-}
-HeaderStory.storyName = 'Header';
-export function CustomItemChildren() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Custom Item Children"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    items: [{
-      leadingVisual: ArrowRightIcon,
-      children: /*#__PURE__*/React.createElement(Label, {
-        outline: true,
-        borderColor: "success.emphasis"
-      }, "Choose this one"),
-      trailingIcon: ArrowLeftIcon
-    }]
-  })));
-}
-CustomItemChildren.storyName = 'Custom Item Children';
-export function SizeStressTestingStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Size Stress Testing"), /*#__PURE__*/React.createElement(ErsatzOverlay, {
-    maxWidth: "300px"
-  }, /*#__PURE__*/React.createElement(ActionList, {
-    items: [{
-      leadingVisual: ArrowRightIcon,
-      text: 'Block Description.  Long text should wrap',
-      description: 'This description is long, but it is block so it wraps',
-      descriptionVariant: 'block',
-      trailingVisual: ArrowLeftIcon,
-      showDivider: true
-    }, {
-      leadingVisual: ArrowRightIcon,
-      text: 'Inline Description',
-      description: 'This description gets truncated because it is inline',
-      trailingVisual: ArrowLeftIcon,
-      showDivider: true
-    }, {
-      leadingVisual: ArrowRightIcon,
-      text: 'Really long text without a description should wrap',
-      trailingIcon: ArrowLeftIcon,
-      // backward compatible
-      showDivider: true
-    }]
-  })));
-}
-SizeStressTestingStory.storyName = 'Size Stress Testing';
-const ReactRouterLikeLink = /*#__PURE__*/forwardRef(({
-  to,
-  ...props
-}, ref) => {
-  // eslint-disable-next-line jsx-a11y/anchor-has-content
-  return /*#__PURE__*/React.createElement("a", _extends({
-    ref: ref,
-    href: to
-  }, props));
-});
-const NextJSLikeLink = /*#__PURE__*/forwardRef(({
-  href,
-  children
-}, ref) => {
-  const child = React.Children.only(children);
-  const childProps = {
-    ref,
-    href
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, childProps) : null);
-});
-export function LinkItemStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    items: [{
-      text: 'A. Vanilla action',
-      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
-        onAction: () => alert('hi?')
-      }, props))
-    }, {
-      text: 'B. Vanilla link',
-      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
-        as: "a",
-        href: "/about"
-      }, props))
-    }, {
-      text: 'C. React Router link',
-      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
-        as: ReactRouterLikeLink,
-        to: "/about"
-      }, props))
-    }, {
-      text: 'D. NextJS style',
-      renderItem: props => /*#__PURE__*/React.createElement(NextJSLikeLink, {
-        href: "/about"
-      }, /*#__PURE__*/React.createElement(ActionList.Item, _extends({
-        as: "a"
-      }, props)))
-    }]
-  })));
-}
-LinkItemStory.storyName = 'List with a link item';
-export function DOMPropsStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    items: [{
-      text: 'One',
-      onClick: () => alert('Hello')
-    }]
-  })));
-}
-DOMPropsStory.storyName = 'List an item input including DOM props';