@primer/components 33.0.0-rc.cface7dc → 33.1.0

package/src/stories/IssueLabelToken.stories.tsx

@@ -1,138 +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 IssueLabelToken, {IssueLabelTokenProps} from '../Token/IssueLabelToken'
-import Text from '../Text'
-
-export default {
-  title: 'Tokens/IssueLabelToken',
-  component: IssueLabelToken,
-  argTypes: {
-    fillColor: {
-      defaultValue: '#0366d6',
-      control: {
-        type: 'color'
-      }
-    },
-    text: {
-      defaultValue: 'good first issue'
-    }
-  },
-  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<IssueLabelTokenProps, 'ref'>) => {
-  return (
-    <ExampleCollectionContainer>
-      <IssueLabelToken {...args} />
-    </ExampleCollectionContainer>
-  )
-}
-DefaultToken.storyName = 'Default'
-DefaultToken.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}
-
-export const Interactive = (args: Omit<IssueLabelTokenProps, 'ref' | 'text'>) => {
-  return (
-    <ExampleCollectionContainer>
-      <Box
-        display="flex"
-        sx={{
-          alignItems: 'start',
-          gap: get('space.2')
-        }}
-      >
-        <IssueLabelToken as="a" href="http://google.com/" text="Link" {...args} />
-        <IssueLabelToken as="button" onClick={action('clicked')} text="Button" {...args} />
-        <IssueLabelToken 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<IssueLabelTokenProps, 'ref'>) => {
-  return (
-    <ExampleCollectionContainer>
-      <SingleExampleContainer label="w/ onRemove passed">
-        <IssueLabelToken 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')
-          }}
-        >
-          <IssueLabelToken as="a" href="http://google.com/" onRemove={action('remove me')} {...args} text="Link" />
-          <IssueLabelToken
-            as="button"
-            onClick={action('clicked')}
-            onRemove={action('remove me')}
-            {...args}
-            text="Button"
-          />
-          <IssueLabelToken
-            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/NewButton.stories.tsx

@@ -1,201 +0,0 @@
-import React, {useState} from 'react'
-import {NewButton as Button, NewButtonProps as ButtonProps} from '../NewButton'
-import {BaseStyles, ThemeProvider} from '..'
-import {Meta} from '@storybook/react'
-import {XIcon, SearchIcon, EyeIcon, EyeClosedIcon, TriangleDownIcon} from '@primer/octicons-react'
-import Box from '../Box'
-
-export default {
-  title: 'Composite components/New Button',
-
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ],
-  argTypes: {
-    size: {
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large']
-      }
-    }
-  }
-} as Meta
-
-export const defaultButton = ({size = 'medium', ...args}: ButtonProps) => {
-  return (
-    <Button size={size} {...args}>
-      Default
-    </Button>
-  )
-}
-
-export const primaryButton = (args: ButtonProps) => {
-  return (
-    <Button {...args} variant="primary">
-      Primary
-    </Button>
-  )
-}
-
-export const dangerButton = (args: ButtonProps) => {
-  return (
-    <Button {...args} variant="danger">
-      Danger
-    </Button>
-  )
-}
-
-export const invisibleButton = (args: ButtonProps) => {
-  return (
-    <Button {...args} variant="invisible">
-      Invisible
-    </Button>
-  )
-}
-
-export const iconBeforeButton = (args: ButtonProps) => {
-  return (
-    <Button leadingIcon={SearchIcon} {...args}>
-      Before
-    </Button>
-  )
-}
-
-export const iconButton = ({...args}: ButtonProps) => {
-  return (
-    <>
-      <Box mb={2}>
-        <Button icon={XIcon} {...args}>
-          Close
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button icon={XIcon} {...args} variant="invisible">
-          Close
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button icon={XIcon} {...args} variant="danger">
-          Close
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button icon={XIcon} {...args} variant="primary">
-          Close
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button icon={XIcon} {...args} variant="outline">
-          Close
-        </Button>
-      </Box>
-    </>
-  )
-}
-
-export const WatchCounterButton = ({...args}: ButtonProps) => {
-  const [count, setCount] = useState(0)
-  return (
-    <>
-      <Box mb={2}>
-        <Button onClick={() => setCount(count + 1)} {...args}>
-          Watch
-          <Button.Counter>{count}</Button.Counter>
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button onClick={() => setCount(count + 1)} {...args} variant="primary">
-          Watch
-          <Button.Counter>{count}</Button.Counter>
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button onClick={() => setCount(count + 1)} {...args} variant="invisible">
-          Watch
-          <Button.Counter>{count}</Button.Counter>
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button onClick={() => setCount(count + 1)} {...args} variant="danger">
-          Watch
-          <Button.Counter>{count}</Button.Counter>
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button onClick={() => setCount(count + 1)} {...args} variant="outline">
-          Watch
-          <Button.Counter>{count}</Button.Counter>
-        </Button>
-      </Box>
-    </>
-  )
-}
-
-export const WatchIconButton = ({...args}: ButtonProps) => {
-  const [watching, setWatching] = useState(false)
-  const icon = watching ? EyeClosedIcon : () => <EyeIcon />
-  return (
-    <Button onClick={() => setWatching(!watching)} trailingIcon={icon} {...args}>
-      Watch
-    </Button>
-  )
-}
-
-export const caretButton = ({...args}: ButtonProps) => {
-  return (
-    <Button trailingIcon={TriangleDownIcon} {...args}>
-      Dropdown
-    </Button>
-  )
-}
-
-export const blockButton = ({...args}: ButtonProps) => {
-  return (
-    <Button {...args} sx={{width: '100%'}}>
-      Block
-    </Button>
-  )
-}
-
-export const disabledButton = ({...args}: ButtonProps) => {
-  return (
-    <>
-      <Box mb={2}>
-        <Button disabled {...args}>
-          Disabled
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button disabled variant="danger" {...args}>
-          Disabled
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button disabled variant="invisible" {...args}>
-          Disabled
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button disabled variant="primary" {...args}>
-          Disabled
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button disabled variant="outline" {...args}>
-          Disabled
-        </Button>
-      </Box>
-      <Box mb={2}>
-        <Button disabled icon={() => <XIcon />} {...args}></Button>
-      </Box>
-    </>
-  )
-}

package/src/stories/Overlay.stories.tsx

@@ -1,213 +0,0 @@
-import React, {useState, useRef, useCallback} from 'react'
-import {Meta} from '@storybook/react'
-import styled from 'styled-components'
-import {BaseStyles, Overlay, Button, Text, ButtonDanger, ThemeProvider, Box} from '..'
-import {AnchorSide} from '../behaviors/anchoredPosition'
-import {DropdownMenu, DropdownButton} from '../DropdownMenu'
-import {ItemInput} from '../ActionList/List'
-
-export default {
-  title: 'Internal components/Overlay',
-  component: Overlay,
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ],
-  argTypes: {
-    anchorSide: {
-      defaultValue: 'inside-top',
-      control: {
-        type: 'radio',
-        options: [
-          'inside-top',
-          'inside-bottom',
-          'inside-left',
-          'inside-right',
-          'inside-center',
-          'outside-top',
-          'outside-bottom',
-          'outside-left',
-          'outside-right'
-        ]
-      }
-    }
-  }
-} as Meta
-
-const DummyItem = styled.button`
-  border-radius: 6px;
-  font-weight: 400;
-  padding: 6px 8px;
-  font-weight: 400;
-  text-align: left;
-  margin: 0;
-  font-size: 14px;
-  background: none;
-  border: none;
-  &:hover {
-    background: #f0f3f5;
-  }
-
-  &:focus {
-    background: red;
-  }
-`
-interface OverlayProps {
-  anchorSide: AnchorSide
-}
-
-export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  return (
-    <>
-      <Button ref={buttonRef} sx={{position: 'relative'}} onClick={() => setIsOpen(!isOpen)}>
-        open overlay
-      </Button>
-      {isOpen ? (
-        <Overlay
-          returnFocusRef={buttonRef}
-          height="auto"
-          width="small"
-          ignoreClickRefs={[buttonRef]}
-          onEscape={() => setIsOpen(false)}
-          onClickOutside={() => setIsOpen(false)}
-          anchorSide={anchorSide}
-        >
-          <Box display="flex" flexDirection="column" p={2}>
-            <DummyItem>Copy link</DummyItem>
-            <DummyItem>Quote reply</DummyItem>
-            <DummyItem>Reference in new issue</DummyItem>
-            <DummyItem>Edit</DummyItem>
-            <DummyItem>Delete</DummyItem>
-          </Box>
-        </Overlay>
-      ) : null}
-    </>
-  )
-}
-
-export const DialogOverlay = ({anchorSide}: OverlayProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const confirmButtonRef = useRef<HTMLButtonElement>(null)
-  const anchorRef = useRef<HTMLDivElement>(null)
-  const closeOverlay = () => setIsOpen(false)
-  return (
-    <Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
-      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-        open overlay
-      </Button>
-      {isOpen ? (
-        <Overlay
-          initialFocusRef={confirmButtonRef}
-          returnFocusRef={buttonRef}
-          ignoreClickRefs={[buttonRef]}
-          onEscape={closeOverlay}
-          onClickOutside={closeOverlay}
-          width="small"
-          anchorSide={anchorSide}
-        >
-          <Box display="flex" flexDirection="column" p={2}>
-            <Text>Are you sure?</Text>
-            <ButtonDanger onClick={closeOverlay}>Cancel</ButtonDanger>
-            <Button onClick={closeOverlay} ref={confirmButtonRef}>
-              Confirm
-            </Button>
-          </Box>
-        </Overlay>
-      ) : null}
-    </Box>
-  )
-}
-
-export const OverlayOnTopOfOverlay = ({anchorSide}: OverlayProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [isSecondaryOpen, setIsSecondaryOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const secondaryButtonRef = useRef<HTMLButtonElement>(null)
-  const confirmButtonRef = useRef<HTMLButtonElement>(null)
-  const anchorRef = useRef<HTMLDivElement>(null)
-  const closeOverlay = () => setIsOpen(false) // intentionally not memoized
-  const closeSecondaryOverlay = useCallback(() => setIsSecondaryOpen(false), [setIsSecondaryOpen])
-  const items = React.useMemo(
-    () => [
-      {
-        text: '🔵 Cyan',
-        onMouseDown: (e: React.MouseEvent) => {
-          e.preventDefault()
-        }
-      },
-      {
-        text: '🔴 Magenta',
-        onMouseDown: (e: React.MouseEvent) => {
-          e.preventDefault()
-        }
-      },
-      {
-        text: '🟡 Yellow',
-        onMouseDown: (e: React.MouseEvent) => {
-          e.preventDefault()
-        }
-      }
-    ],
-    []
-  )
-  const [selectedItem, setSelectedItem] = React.useState<ItemInput | undefined>()
-  return (
-    <Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
-      <input placeholder="Input for focus testing" />
-      <br />
-      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-        open overlay
-      </Button>
-      {isOpen ? (
-        <Overlay
-          initialFocusRef={confirmButtonRef}
-          returnFocusRef={buttonRef}
-          onEscape={closeOverlay}
-          onClickOutside={closeOverlay}
-          width="small"
-          anchorSide={anchorSide}
-        >
-          <Button ref={secondaryButtonRef} onClick={() => setIsSecondaryOpen(!isSecondaryOpen)}>
-            open overlay
-          </Button>
-          {isSecondaryOpen ? (
-            <Overlay
-              initialFocusRef={confirmButtonRef}
-              returnFocusRef={secondaryButtonRef}
-              onEscape={closeSecondaryOverlay}
-              onClickOutside={closeSecondaryOverlay}
-              width="small"
-              sx={{top: '40px'}}
-              anchorSide={anchorSide}
-            >
-              <Box display="flex" flexDirection="column" p={2}>
-                <Text>Select an option!</Text>
-                <DropdownMenu
-                  renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-                    <DropdownButton aria-labelledby={`favorite-color-label ${ariaLabelledBy}`} {...anchorProps}>
-                      {children}
-                    </DropdownButton>
-                  )}
-                  placeholder="🎨"
-                  items={items}
-                  selectedItem={selectedItem}
-                  onChange={setSelectedItem}
-                />
-              </Box>
-            </Overlay>
-          ) : null}
-        </Overlay>
-      ) : null}
-    </Box>
-  )
-}

package/src/stories/Portal.stories.tsx

@@ -1,109 +0,0 @@
-import React from 'react'
-import {Meta} from '@storybook/react'
-
-import {BaseStyles, Box, ThemeProvider} from '..'
-import Portal, {registerPortalRoot} from '../Portal'
-
-export default {
-  title: 'Generic behaviors/Portal',
-  component: Portal,
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ]
-} as Meta
-
-export const defaultPortal = () => (
-  <>
-    Root position
-    <Box bg="red.2" p={3}>
-      Outer container
-      <Box bg="green.2" p={3}>
-        Inner container
-        <Portal>
-          Portaled content rendered at <code>&lt;BaseStyles&gt;</code> root.
-        </Portal>
-      </Box>
-    </Box>
-  </>
-)
-
-export const customPortalRootById = () => (
-  <>
-    Root position
-    <Box bg="red.2" p={3} id="__primerPortalRoot__">
-      Outer container
-      <Box bg="green.2" p={3}>
-        Inner container
-        <Portal>Portaled content rendered at the outer container.</Portal>
-      </Box>
-    </Box>
-  </>
-)
-
-export const CustomPortalRootByRegistration: React.FC<Record<string, never>> = () => {
-  const outerContainerRef = React.useRef<HTMLDivElement>(null)
-  const [mounted, setMounted] = React.useState(false)
-  React.useEffect(() => {
-    if (outerContainerRef.current instanceof HTMLElement) {
-      registerPortalRoot(outerContainerRef.current)
-      setMounted(true)
-    }
-  }, [])
-  return (
-    <>
-      Root position
-      <Box bg="red.2" p={3} ref={outerContainerRef}>
-        {mounted ? (
-          <>
-            Outer container
-            <Box bg="green.2" p={3}>
-              Inner container
-              <Portal>Portaled content rendered at the outer container.</Portal>
-            </Box>
-          </>
-        ) : null}
-      </Box>
-    </>
-  )
-}
-
-export const MultiplePortalRoots: React.FC<Record<string, never>> = () => {
-  const outerContainerRef = React.useRef<HTMLDivElement>(null)
-  const innerContainerRef = React.useRef<HTMLDivElement>(null)
-  const [mounted, setMounted] = React.useState(false)
-  React.useEffect(() => {
-    if (outerContainerRef.current instanceof HTMLElement && innerContainerRef.current instanceof HTMLElement) {
-      registerPortalRoot(outerContainerRef.current, 'outer')
-      registerPortalRoot(innerContainerRef.current, 'inner')
-      setMounted(true)
-    }
-  }, [outerContainerRef])
-  return (
-    <>
-      Root position
-      <Box bg="red.2" p={3} ref={outerContainerRef}>
-        Outer container
-        <Box bg="green.2" p={3} ref={innerContainerRef}>
-          {mounted ? (
-            <>
-              <Portal containerName="outer">Portaled content rendered at the outer container.</Portal>
-              <Portal containerName="inner">Portaled content rendered at the end of the inner container.</Portal>
-              <Portal>
-                Portaled content rendered at <code>&lt;BaseStyles&gt;</code> root.
-              </Portal>
-            </>
-          ) : null}
-          Inner container
-        </Box>
-      </Box>
-    </>
-  )
-}