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

package/src/stories/ProfileToken.stories.tsx

@@ -1,129 +0,0 @@
-import React from 'react'
-import {Meta} from '@storybook/react'
-import {action} from '@storybook/addon-actions'
-
-import {get} from '../constants'
-import {BaseStyles, ThemeProvider} from '..'
-import Box from '../Box'
-import AvatarToken, {AvatarTokenProps} 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 (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ]
-} as Meta
-
-const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove']
-
-const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
-  <Box
-    display="flex"
-    sx={{
-      alignItems: 'start',
-      flexDirection: 'column',
-      gap: get('space.0')
-    }}
-  >
-    {label ? (
-      <Text fontSize={0} color="fg.muted">
-        {label}
-      </Text>
-    ) : null}
-    {children}
-  </Box>
-)
-
-const ExampleCollectionContainer: React.FC = ({children}) => (
-  <Box
-    display="flex"
-    sx={{
-      alignItems: 'start',
-      flexDirection: 'column',
-      gap: get('space.6')
-    }}
-  >
-    <Text fontSize={1} color="fg.subtle">
-      Hint: use the &quot;Controls&quot; tab in the Addons panel to change the token properties
-    </Text>
-    {children}
-  </Box>
-)
-
-export const DefaultToken = (args: Omit<AvatarTokenProps, 'ref'>) => {
-  return (
-    <ExampleCollectionContainer>
-      <AvatarToken {...args} />
-    </ExampleCollectionContainer>
-  )
-}
-DefaultToken.storyName = 'Default'
-DefaultToken.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}
-
-export const Interactive = (args: Omit<AvatarTokenProps, 'ref' | 'text'>) => {
-  return (
-    <ExampleCollectionContainer>
-      <Box
-        display="flex"
-        sx={{
-          alignItems: 'start',
-          gap: get('space.2')
-        }}
-      >
-        <AvatarToken as="a" href="http://google.com/" text="Link" {...args} />
-        <AvatarToken as="button" onClick={action('clicked')} text="Button" {...args} />
-        <AvatarToken as="span" tabIndex={0} onFocus={action('focused')} text="Focusable Span" {...args} />
-      </Box>
-    </ExampleCollectionContainer>
-  )
-}
-Interactive.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']}}
-
-export const WithOnRemoveFn = (args: Omit<AvatarTokenProps, 'ref'>) => {
-  return (
-    <ExampleCollectionContainer>
-      <SingleExampleContainer label="w/ onRemove passed">
-        <AvatarToken onRemove={action('remove me')} {...args} />
-      </SingleExampleContainer>
-      <SingleExampleContainer label="w/ onRemove passed and the token is interactive">
-        <Box
-          display="flex"
-          sx={{
-            alignItems: 'start',
-            gap: get('space.2')
-          }}
-        >
-          <AvatarToken as="a" href="http://google.com/" onRemove={action('remove me')} {...args} text="Link" />
-          <AvatarToken as="button" onClick={action('clicked')} onRemove={action('remove me')} {...args} text="Button" />
-          <AvatarToken
-            as="span"
-            tabIndex={0}
-            onFocus={action('focused')}
-            onRemove={action('remove me')}
-            {...args}
-            text="Focusable Span"
-          />
-        </Box>
-      </SingleExampleContainer>
-    </ExampleCollectionContainer>
-  )
-}
-WithOnRemoveFn.parameters = {controls: {exclude: excludedControlKeys}}

package/src/stories/Radio.stories.tsx

@@ -1,126 +0,0 @@
-import React, {ChangeEvent, useState} from 'react'
-import {Meta} from '@storybook/react'
-import styled from 'styled-components'
-
-import {BaseStyles, Box, Radio, RadioProps, Text, ThemeProvider} from '..'
-import {get} from '../constants'
-
-export default {
-  title: 'Forms/Radio',
-  component: Radio,
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Box sx={{pt: 3}}>{Story()}</Box>
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ],
-  argTypes: {
-    sx: {
-      table: {
-        disable: true
-      }
-    },
-    disabled: {
-      defaultValue: false,
-      control: {
-        type: 'boolean'
-      }
-    },
-    checked: {
-      defaultValue: false,
-      control: {
-        type: 'boolean'
-      }
-    }
-  }
-} as Meta
-
-const StyledLabel = styled.label`
-  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}: RadioProps) => {
-  const [isSelected, setSelected] = useState<boolean>(checked || false)
-  const handleChange = () => {
-    setSelected(!isSelected)
-  }
-
-  return (
-    <>
-      <Box as="form" p={3} sx={{display: 'flex', alignItems: 'flex-start'}}>
-        <Radio
-          id="default-radio"
-          value="default"
-          name="default"
-          disabled={disabled}
-          checked={isSelected}
-          onChange={handleChange}
-        />
-        <StyledLabel htmlFor="default-radio" aria-disabled={disabled}>
-          Default radio button
-        </StyledLabel>
-      </Box>
-    </>
-  )
-}
-
-export const MultipleRadios = ({disabled}: RadioProps) => {
-  const [activeSelection, setActiveSelection] = useState<'yes' | 'no' | undefined>()
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const target = event.target.value as 'yes' | 'no'
-    setActiveSelection(target)
-  }
-
-  return (
-    <>
-      <Box as="form" p={3} sx={{display: 'inline-flex', alignItems: 'flex-start'}}>
-        <StyledLabel htmlFor="yes-radio" aria-disabled={disabled}>
-          <Radio
-            id="yes-radio"
-            onChange={handleChange}
-            checked={activeSelection === 'yes'}
-            value="yes"
-            name="Choice"
-            disabled={disabled}
-          />
-          <Text sx={{marginLeft: 2}}>Yes</Text>
-        </StyledLabel>
-      </Box>
-      <Box as="form" p={3} sx={{display: 'inline-flex', alignItems: 'flex-start'}}>
-        <StyledLabel htmlFor="no-radio" aria-disabled={disabled}>
-          <Radio
-            id="no-radio"
-            onChange={handleChange}
-            checked={activeSelection === 'no'}
-            value="no"
-            name="Choice"
-            disabled={disabled}
-          />
-          <Text sx={{marginLeft: 2}}>No</Text>
-        </StyledLabel>
-      </Box>
-    </>
-  )
-}

package/src/stories/SelectPanel.stories.tsx

@@ -1,353 +0,0 @@
-import type {OverlayProps} from '../Overlay'
-import {Meta} from '@storybook/react'
-import React, {useRef, useState} from 'react'
-import {theme, ThemeProvider} from '..'
-import {ItemInput} from '../ActionList/List'
-import BaseStyles from '../BaseStyles'
-import {DropdownButton} from '../DropdownMenu'
-import {SelectPanel} from '../SelectPanel'
-import Box from '../Box'
-
-const meta: Meta = {
-  title: 'Composite components/SelectPanel',
-  component: SelectPanel,
-  decorators: [
-    (Story: React.ComponentType): JSX.Element => {
-      return (
-        <ThemeProvider theme={theme}>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ],
-  parameters: {
-    controls: {
-      disable: true
-    }
-  }
-}
-export default meta
-
-function getColorCircle(color: string) {
-  return function () {
-    return (
-      <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(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput[]>([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 (
-    <>
-      <h1>Multi Select Panel</h1>
-      <div>Please select labels that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        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(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        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(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(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<HTMLButtonElement>(null)
-
-  return (
-    <>
-      <h1>Select Panel With External Anchor</h1>
-      <DropdownButton ref={buttonRef} onClick={() => setOpen(!open)}>
-        Custom: {selected?.text || 'Click Me'}
-      </DropdownButton>
-      <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(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        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(): JSX.Element {
-  const underflowingItems = [items[0], items[1]]
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(underflowingItems[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        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(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const [fetchedItems, setFetchedItems] = useState<typeof items>([])
-  const filteredItems = React.useMemo(
-    () => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())),
-    [fetchedItems, filter]
-  )
-  const [open, setOpen] = useState(false)
-  const [height, setHeight] = useState<OverlayProps['height']>('auto')
-
-  const onOpenChange = () => {
-    setOpen(!open)
-    setTimeout(() => {
-      setFetchedItems([items[0], items[1]])
-      setHeight('initial')
-    }, 1500)
-  }
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        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(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'xsmall'}}
-      />
-      <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
-      </div>
-    </>
-  )
-}
-SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body'
-
-export function SelectPanelHeightAndScroll(): JSX.Element {
-  const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items]
-  const [selectedA, setSelectedA] = React.useState<ItemInput | undefined>(longItems[0])
-  const [selectedB, setSelectedB] = React.useState<ItemInput | undefined>(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 (
-    <>
-      <h2>With height:medium</h2>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        placeholderText="Filter Labels"
-        open={openA}
-        onOpenChange={setOpenA}
-        items={filteredItems}
-        selected={selectedA}
-        onSelectedChange={setSelectedA}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{height: 'medium'}}
-      />
-      <h2>With height:auto, maxheight:medium</h2>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        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'