@primer/components 33.0.0 → 33.1.0-rc.6856bcf5

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

@@ -0,0 +1,136 @@
+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 React from 'react';
+import { action } from '@storybook/addon-actions';
+import { get } from '../constants';
+import { BaseStyles, ThemeProvider } from '..';
+import Box from '../Box';
+import AvatarToken from '../Token/AvatarToken';
+import Text from '../Text';
+export default {
+  title: 'Tokens/AvatarToken',
+  component: AvatarToken,
+  argTypes: {
+    text: {
+      defaultValue: 'Mike Perrotti'
+    },
+    avatarSrc: {
+      defaultValue: 'https://avatars.githubusercontent.com/mperrotti'
+    }
+  },
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }]
+};
+const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove'];
+
+const SingleExampleContainer = ({
+  children,
+  label
+}) => /*#__PURE__*/React.createElement(Box, {
+  display: "flex",
+  sx: {
+    alignItems: 'start',
+    flexDirection: 'column',
+    gap: get('space.0')
+  }
+}, label ? /*#__PURE__*/React.createElement(Text, {
+  fontSize: 0,
+  color: "fg.muted"
+}, label) : null, children);
+
+SingleExampleContainer.displayName = "SingleExampleContainer";
+
+const ExampleCollectionContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement(Box, {
+  display: "flex",
+  sx: {
+    alignItems: 'start',
+    flexDirection: 'column',
+    gap: get('space.6')
+  }
+}, /*#__PURE__*/React.createElement(Text, {
+  fontSize: 1,
+  color: "fg.subtle"
+}, "Hint: use the \"Controls\" tab in the Addons panel to change the token properties"), children);
+
+ExampleCollectionContainer.displayName = "ExampleCollectionContainer";
+export const DefaultToken = args => {
+  return /*#__PURE__*/React.createElement(ExampleCollectionContainer, null, /*#__PURE__*/React.createElement(AvatarToken, args));
+};
+DefaultToken.displayName = "DefaultToken";
+DefaultToken.storyName = 'Default';
+DefaultToken.parameters = {
+  controls: {
+    exclude: [...excludedControlKeys, 'hideRemoveButton']
+  }
+};
+export const Interactive = args => {
+  return /*#__PURE__*/React.createElement(ExampleCollectionContainer, null, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    sx: {
+      alignItems: 'start',
+      gap: get('space.2')
+    }
+  }, /*#__PURE__*/React.createElement(AvatarToken, _extends({
+    as: "a",
+    href: "http://google.com/",
+    text: "Link"
+  }, args)), /*#__PURE__*/React.createElement(AvatarToken, _extends({
+    as: "button",
+    onClick: action('clicked'),
+    text: "Button"
+  }, args)), /*#__PURE__*/React.createElement(AvatarToken, _extends({
+    as: "span",
+    tabIndex: 0,
+    onFocus: action('focused'),
+    text: "Focusable Span"
+  }, args))));
+};
+Interactive.displayName = "Interactive";
+Interactive.parameters = {
+  controls: {
+    exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']
+  }
+};
+export const WithOnRemoveFn = args => {
+  return /*#__PURE__*/React.createElement(ExampleCollectionContainer, null, /*#__PURE__*/React.createElement(SingleExampleContainer, {
+    label: "w/ onRemove passed"
+  }, /*#__PURE__*/React.createElement(AvatarToken, _extends({
+    onRemove: action('remove me')
+  }, args))), /*#__PURE__*/React.createElement(SingleExampleContainer, {
+    label: "w/ onRemove passed and the token is interactive"
+  }, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    sx: {
+      alignItems: 'start',
+      gap: get('space.2')
+    }
+  }, /*#__PURE__*/React.createElement(AvatarToken, _extends({
+    as: "a",
+    href: "http://google.com/",
+    onRemove: action('remove me')
+  }, args, {
+    text: "Link"
+  })), /*#__PURE__*/React.createElement(AvatarToken, _extends({
+    as: "button",
+    onClick: action('clicked'),
+    onRemove: action('remove me')
+  }, args, {
+    text: "Button"
+  })), /*#__PURE__*/React.createElement(AvatarToken, _extends({
+    as: "span",
+    tabIndex: 0,
+    onFocus: action('focused'),
+    onRemove: action('remove me')
+  }, args, {
+    text: "Focusable Span"
+  })))));
+};
+WithOnRemoveFn.displayName = "WithOnRemoveFn";
+WithOnRemoveFn.parameters = {
+  controls: {
+    exclude: excludedControlKeys
+  }
+};

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

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { BaseStyles, Box, Radio, Text, ThemeProvider } from '..';
+import { get } from '../constants';
+export default {
+  title: 'Forms/Radio',
+  component: Radio,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        pt: 3
+      }
+    }, Story())));
+  }],
+  argTypes: {
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    disabled: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    checked: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+const StyledLabel = styled.label.withConfig({
+  displayName: "Radiostories__StyledLabel",
+  componentId: "sc-8jrp2c-0"
+})(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:8px;display:flex;cursor:pointer;&:first-child{margin-left:0;}&[aria-disabled='true']{pointer-events:none;cursor:not-allowed;color:", ";}"], get('colors.primer.fg.disabled'));
+export const Default = ({
+  disabled,
+  checked
+}) => {
+  const [isSelected, setSelected] = useState(checked || false);
+
+  const handleChange = () => {
+    setSelected(!isSelected);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    p: 3,
+    sx: {
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Radio, {
+    id: "default-radio",
+    value: "default",
+    name: "default",
+    disabled: disabled,
+    checked: isSelected,
+    onChange: handleChange
+  }), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "default-radio",
+    "aria-disabled": disabled
+  }, "Default radio button")));
+};
+export const MultipleRadios = ({
+  disabled
+}) => {
+  const [activeSelection, setActiveSelection] = useState();
+
+  const handleChange = event => {
+    const target = event.target.value;
+    setActiveSelection(target);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    p: 3,
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "yes-radio",
+    "aria-disabled": disabled
+  }, /*#__PURE__*/React.createElement(Radio, {
+    id: "yes-radio",
+    onChange: handleChange,
+    checked: activeSelection === 'yes',
+    value: "yes",
+    name: "Choice",
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      marginLeft: 2
+    }
+  }, "Yes"))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    p: 3,
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "no-radio",
+    "aria-disabled": disabled
+  }, /*#__PURE__*/React.createElement(Radio, {
+    id: "no-radio",
+    onChange: handleChange,
+    checked: activeSelection === 'no',
+    value: "no",
+    name: "Choice",
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      marginLeft: 2
+    }
+  }, "No"))));
+};

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

@@ -0,0 +1,334 @@
+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 React, { useRef, useState } from 'react';
+import { theme, ThemeProvider } from '..';
+import BaseStyles from '../BaseStyles';
+import { DropdownButton } from '../DropdownMenu';
+import { SelectPanel } from '../SelectPanel';
+import Box from '../Box';
+const meta = {
+  title: 'Composite components/SelectPanel',
+  component: SelectPanel,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+export default meta;
+
+function getColorCircle(color) {
+  return function () {
+    return /*#__PURE__*/React.createElement(Box, {
+      bg: color,
+      borderColor: color,
+      width: 14,
+      height: 14,
+      borderRadius: 10,
+      margin: "auto",
+      borderWidth: "1px",
+      borderStyle: "solid"
+    });
+  };
+}
+
+const items = [{
+  leadingVisual: getColorCircle('#a2eeef'),
+  text: 'enhancement',
+  id: 1
+}, {
+  leadingVisual: getColorCircle('#d73a4a'),
+  text: 'bug',
+  id: 2
+}, {
+  leadingVisual: getColorCircle('#0cf478'),
+  text: 'good first issue',
+  id: 3
+}, {
+  leadingVisual: getColorCircle('#ffd78e'),
+  text: 'design',
+  id: 4
+}, {
+  leadingVisual: getColorCircle('#ff0000'),
+  text: 'blocker',
+  id: 5
+}, {
+  leadingVisual: getColorCircle('#a4f287'),
+  text: 'backend',
+  id: 6
+}, {
+  leadingVisual: getColorCircle('#8dc6fc'),
+  text: 'frontend',
+  id: 7
+}];
+export function MultiSelectStory() {
+  const [selected, setSelected] = React.useState([items[0], items[1]]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Multi Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select labels that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+MultiSelectStory.storyName = 'Multi Select';
+export function SingleSelectStory() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+SingleSelectStory.storyName = 'Single Select';
+export function ExternalAnchorStory() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Select Panel With External Anchor"), /*#__PURE__*/React.createElement(DropdownButton, {
+    ref: buttonRef,
+    onClick: () => setOpen(!open)
+  }, "Custom: ", (selected === null || selected === void 0 ? void 0 : selected.text) || 'Click Me'), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: null,
+    anchorRef: buttonRef,
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+ExternalAnchorStory.storyName = 'With External Anchor';
+export function SelectPanelHeightInitialWithOverflowingItemsStory() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'initial',
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+SelectPanelHeightInitialWithOverflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Overflowing Items';
+export function SelectPanelHeightInitialWithUnderflowingItemsStory() {
+  const underflowingItems = [items[0], items[1]];
+  const [selected, setSelected] = React.useState(underflowingItems[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'initial',
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+SelectPanelHeightInitialWithUnderflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Underflowing Items';
+export function SelectPanelHeightInitialWithUnderflowingItemsAfterFetch() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const [fetchedItems, setFetchedItems] = useState([]);
+  const filteredItems = React.useMemo(() => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())), [fetchedItems, filter]);
+  const [open, setOpen] = useState(false);
+  const [height, setHeight] = useState('auto');
+
+  const onOpenChange = () => {
+    setOpen(!open);
+    setTimeout(() => {
+      setFetchedItems([items[0], items[1]]);
+      setHeight('initial');
+    }, 1500);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: onOpenChange,
+    loading: filteredItems.length === 0,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height,
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+SelectPanelHeightInitialWithUnderflowingItemsAfterFetch.storyName = 'SelectPanel, Height: Initial, Underflowing Items (After Fetch)';
+export function SelectPanelAboveTallBody() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: 'cornflowerblue',
+      height: '100vh'
+    }
+  }, "This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal is far down the page"));
+}
+SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body';
+export function SelectPanelHeightAndScroll() {
+  const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items];
+  const [selectedA, setSelectedA] = React.useState(longItems[0]);
+  const [selectedB, setSelectedB] = React.useState(longItems[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = longItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [openA, setOpenA] = useState(false);
+  const [openB, setOpenB] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", null, "With height:medium"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: openA,
+    onOpenChange: setOpenA,
+    items: filteredItems,
+    selected: selectedA,
+    onSelectedChange: setSelectedA,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      height: 'medium'
+    }
+  }), /*#__PURE__*/React.createElement("h2", null, "With height:auto, maxheight:medium"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: openB,
+    onOpenChange: setOpenB,
+    items: filteredItems,
+    selected: selectedB,
+    onSelectedChange: setSelectedB,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      height: 'auto',
+      maxHeight: 'medium'
+    }
+  }));
+}
+SelectPanelHeightAndScroll.storyName = 'SelectPanel, Height and Scroll';