@primer/components 31.0.0 → 31.0.2-rc.c7dafefb

package/src/stories/Overlay.stories.tsx

@@ -0,0 +1,213 @@
+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

@@ -0,0 +1,109 @@
+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>
+    </>
+  )
+}

package/src/stories/ProfileToken.stories.tsx

@@ -0,0 +1,129 @@
+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}}