@sanity/ui 1.0.0-beta.8 → 1.0.0-next.3

package/src/primitives/button/button.test.tsx

@@ -0,0 +1,43 @@
+/** @jest-environment jsdom */
+
+import {AddIcon} from '@sanity/icons'
+import {screen} from '@testing-library/react'
+import {axe} from 'jest-axe'
+import {render} from '../../../test'
+import {Button, ButtonProps} from './button'
+
+describe('atoms/button', () => {
+  it('Axe: should have no violations', async () => {
+    const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
+      scheme: 'light',
+    })
+
+    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
+
+    const darkResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
+      scheme: 'dark',
+    })
+
+    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
+  })
+
+  it('should render text', () => {
+    render(<Button text="Button text" />)
+
+    expect(screen.getByText('Button text')).toBeInTheDocument()
+  })
+
+  it('should wrap button', () => {
+    function WrappedButton({button: buttonProps}: {button: ButtonProps}) {
+      return <Button {...buttonProps} />
+    }
+
+    const buttonProps: ButtonProps = {
+      text: 'Button text',
+    }
+
+    render(<WrappedButton button={buttonProps} />)
+
+    expect(screen.getByText('Button text')).toBeInTheDocument()
+  })
+})

package/src/primitives/button/button.tsx

@@ -0,0 +1,186 @@
+import {createElement, forwardRef, isValidElement, memo, useMemo} from 'react'
+import {isValidElementType} from 'react-is'
+import {useArrayProp} from '../../hooks'
+import {compose, ThemeProps} from '../../styles'
+import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {useTheme} from '../../theme'
+import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
+import {Box} from '../box'
+import {Flex} from '../flex'
+import {Spinner} from '../spinner'
+import {Text} from '../text'
+import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
+import {buttonBaseStyles, buttonColorStyles} from './styles'
+
+/**
+ * @public
+ */
+export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  fontSize?: number | number[]
+  mode?: ButtonMode
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
+  justify?: FlexJustify | FlexJustify[]
+  /**
+   * @beta Do not use in production, as this might change.
+   */
+  loading?: boolean
+  selected?: boolean
+  space?: number | number[]
+  textAlign?: ButtonTextAlign
+  text?: React.ReactNode
+  tone?: ButtonTone
+  type?: 'button' | 'reset' | 'submit'
+}
+
+const Root = memo(
+  compose<{$mode: ButtonMode; $tone: ButtonTone} & ResponsiveRadiusStyleProps & ThemeProps>(
+    'button',
+    [responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles]
+  )
+)
+
+const LoadingBox = memo(
+  compose('div', [
+    {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'var(--card-bg-color)',
+      borderRadius: 'inherit',
+      zIndex: 1,
+      boxShadow: 'inherit',
+    },
+  ])
+)
+
+/**
+ * @public
+ */
+export const Button = forwardRef(function Button(
+  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as'>,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const {
+    children,
+    disabled,
+    fontSize,
+    icon,
+    iconRight,
+    justify: justifyProp = 'center',
+    loading,
+    mode = 'default',
+    padding: paddingProp = 3,
+    paddingX: paddingXProp,
+    paddingY: paddingYProp,
+    paddingTop: paddingTopProp,
+    paddingBottom: paddingBottomProp,
+    paddingLeft: paddingLeftProp,
+    paddingRight: paddingRightProp,
+    radius: radiusProp = 2,
+    selected,
+    space: spaceProp = 3,
+    text,
+    textAlign,
+    tone = 'default',
+    type = 'button',
+    ...restProps
+  } = props
+
+  const justify = useArrayProp(justifyProp)
+  const padding = useArrayProp(paddingProp)
+  const paddingX = useArrayProp(paddingXProp)
+  const paddingY = useArrayProp(paddingYProp)
+  const paddingTop = useArrayProp(paddingTopProp)
+  const paddingBottom = useArrayProp(paddingBottomProp)
+  const paddingLeft = useArrayProp(paddingLeftProp)
+  const paddingRight = useArrayProp(paddingRightProp)
+  const radius = useArrayProp(radiusProp)
+  const space = useArrayProp(spaceProp)
+
+  const theme = useTheme()
+
+  const boxProps = useMemo(
+    () => ({
+      // flex: 1,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+    }),
+    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]
+  )
+
+  return (
+    <Root
+      data-ui="Button"
+      {...restProps}
+      $mode={mode}
+      $radius={radius}
+      $tone={tone}
+      data-disabled={Boolean(loading || disabled)}
+      data-selected={selected ? '' : undefined}
+      disabled={Boolean(loading || disabled)}
+      ref={ref}
+      type={type}
+    >
+      {Boolean(loading) && (
+        <LoadingBox>
+          <Spinner />
+        </LoadingBox>
+      )}
+
+      {(icon || text || iconRight) && (
+        <Box as="span" {...boxProps}>
+          <Flex as="span" justify={justify}>
+            {icon && (
+              <Text size={fontSize}>
+                {isValidElement(icon) && icon}
+                {isValidElementType(icon) && createElement(icon)}
+              </Text>
+            )}
+
+            {text && (
+              <Box
+                flex={iconRight ? 1 : undefined}
+                marginLeft={icon ? space : undefined}
+                marginRight={iconRight ? space : undefined}
+              >
+                <Text
+                  align={textAlign}
+                  size={fontSize}
+                  textOverflow="ellipsis"
+                  weight={theme.sanity.button.textWeight}
+                >
+                  {text}
+                </Text>
+              </Box>
+            )}
+
+            {iconRight && (
+              <Text size={fontSize}>
+                {isValidElement(iconRight) && iconRight}
+                {isValidElementType(iconRight) && createElement(iconRight)}
+              </Text>
+            )}
+          </Flex>
+        </Box>
+      )}
+
+      {children && (
+        <Box as="span" {...boxProps}>
+          {children}
+        </Box>
+      )}
+    </Root>
+  )
+})

package/src/primitives/button/index.ts

@@ -0,0 +1 @@
+export * from './button'

package/src/primitives/button/styles.ts

@@ -0,0 +1,80 @@
+import {CSSObject} from 'styled-components'
+import {ThemeProps} from '../../styles'
+import {_colorVarsStyle} from '../../styles/colorVars'
+import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+import {ButtonMode, ButtonTone} from '../../types'
+
+/**
+ * @internal
+ */
+export function buttonBaseStyles(): CSSObject {
+  return {
+    WebkitFontSmoothing: 'inherit',
+    appearance: 'none',
+    display: 'inline-flex',
+    alignItems: 'center',
+    font: 'inherit',
+    border: 0,
+    outline: 'none',
+    userSelect: 'none',
+    textDecoration: 'none',
+    boxSizing: 'border-box',
+    padding: 0,
+    margin: 0,
+    whiteSpace: 'nowrap',
+    textAlign: 'left',
+    position: 'relative',
+
+    '& > span': {
+      display: 'block',
+      flex: 1,
+      minWidth: 0,
+      borderRadius: 'inherit',
+    },
+
+    '&::-moz-focus-inner': {
+      border: 0,
+      padding: 0,
+    },
+  }
+}
+
+const buttonTheme = {border: {width: 1}}
+
+/**
+ * @internal
+ */
+export function buttonColorStyles(
+  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps
+): CSSObject[] {
+  const {$mode, theme} = props
+  const {focusRing} = theme.sanity
+  const base = theme.sanity.color.base
+  const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default
+  const color = mode[props.$tone] || mode.default
+  const border = {width: buttonTheme.border.width, color: 'var(--card-border-color)'}
+
+  return [
+    _colorVarsStyle(base, color.enabled),
+    {
+      backgroundColor: 'var(--card-bg-color)',
+      color: 'var(--card-fg-color)',
+      boxShadow: focusRingBorderStyle(border),
+      '&:disabled, &[data-disabled="true"]': _colorVarsStyle(base, color.disabled),
+      "&:not([data-disabled='true'])": {
+        '&:focus': {
+          boxShadow: focusRingStyle({base, border, focusRing}),
+        },
+        '&:focus:not(:focus-visible)': {
+          boxShadow: focusRingBorderStyle(border),
+        },
+        '@media (hover: hover)': {
+          '&:hover': _colorVarsStyle(base, color.hovered),
+          '&:active': _colorVarsStyle(base, color.pressed),
+        },
+        '&[data-selected]': _colorVarsStyle(base, color.pressed),
+      },
+    },
+    theme.sanity.styles?.button?.root,
+  ].filter(Boolean) as CSSObject[]
+}

package/src/primitives/card/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/primitives/card/__workshop__/allTones.tsx

@@ -0,0 +1,27 @@
+import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function AllTonesStory() {
+  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width={0}>
+        <Stack space={5}>
+          {tones.map(([title, tone]) => (
+            <Card
+              key={tone}
+              padding={4}
+              radius={2}
+              shadow={4}
+              style={{textAlign: 'center'}}
+              tone={tone}
+            >
+              <Text>{title}</Text>
+            </Card>
+          ))}
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}

package/src/primitives/card/__workshop__/asButton.tsx

@@ -0,0 +1,88 @@
+import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function AsButtonStory() {
+  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container>
+        <Grid columns={3} gap={2}>
+          <Box>
+            <Text align="center" size={1} weight="semibold">
+              Enabled
+            </Text>
+            <Stack marginTop={3} space={2}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  key={tone}
+                  padding={4}
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack space={2}>
+                    <Text weight="semibold">{title}</Text>
+                    <Text muted>Muted</Text>
+                    <Text accent>Accent</Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text align="center" size={1} weight="semibold">
+              Disabled
+            </Text>
+            <Stack marginTop={3} space={2}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  disabled
+                  key={tone}
+                  padding={4}
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack space={2}>
+                    <Text weight="semibold">{title}</Text>
+                    <Text muted>Muted</Text>
+                    <Text accent>Accent</Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text align="center" size={1} weight="semibold">
+              Selected
+            </Text>
+            <Stack marginTop={3} space={2}>
+              {tones.map(([title, tone]) => (
+                <div aria-selected key={tone}>
+                  <Card
+                    __unstable_focusRing
+                    as="button"
+                    padding={4}
+                    style={{textAlign: 'center'}}
+                    tone={tone}
+                  >
+                    <Stack space={2}>
+                      <Text weight="semibold">{title}</Text>
+                      <Text muted>Muted</Text>
+                      <Text accent>Accent</Text>
+                    </Stack>
+                  </Card>
+                </div>
+              ))}
+            </Stack>
+          </Box>
+        </Grid>
+      </Container>
+    </Flex>
+  )
+}

package/src/primitives/card/__workshop__/asComponent.tsx

@@ -0,0 +1,27 @@
+import {Card, Flex, Text} from '@sanity/ui'
+import {forwardRef} from 'react'
+
+const CustomLink = forwardRef(function CustomLink(
+  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+): React.ReactElement {
+  const {children, req, ...restProps} = props
+
+  return (
+    <a data-required={req} {...restProps} ref={ref}>
+      {children}
+    </a>
+  )
+})
+
+export default function AsComponentStory() {
+  const props = {href: '#'}
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Card as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+        <Text>As component</Text>
+      </Card>
+    </Flex>
+  )
+}

package/src/primitives/card/__workshop__/checkered.tsx

@@ -0,0 +1,16 @@
+import {Card, Flex, Stack} from '@sanity/ui'
+
+export default function CheckeredStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Stack space={1}>
+        <Card __unstable_checkered border style={{width: 120, height: 60}} />
+        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="transparent" />
+        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="primary" />
+        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="positive" />
+        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="caution" />
+        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="critical" />
+      </Stack>
+    </Flex>
+  )
+}

package/src/primitives/card/__workshop__/index.ts

@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/card', 'Card', [
+  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+  {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
+  {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
+  {name: 'tones', title: 'Tones', component: lazy(() => import('./allTones'))},
+  {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
+  {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
+  {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
+  {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
+  {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
+])

package/src/primitives/card/__workshop__/interactive.tsx

@@ -0,0 +1,23 @@
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+export default function InteractiveCardStory() {
+  const selected = useBoolean('Selected', false, 'Props')
+  const pressed = useBoolean('Pressed', false, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <div aria-selected={selected}>
+        <Card __unstable_focusRing aria-pressed={pressed} as="button" padding={3} tabIndex={0}>
+          <Stack space={3}>
+            <Text>
+              Text <code>Code</code>
+            </Text>
+            <Text muted>Muted</Text>
+            <Text accent>Accent</Text>
+          </Stack>
+        </Card>
+      </div>
+    </Flex>
+  )
+}

package/src/primitives/card/__workshop__/listNavigation.tsx

@@ -0,0 +1,77 @@
+import {Box, Card, Flex, Skeleton, Text} from '@sanity/ui'
+import {Stack} from '../../stack'
+
+export default function ListNavigationStory() {
+  return (
+    <Box height="fill" padding={[3, 4, 5]} sizing="border">
+      <Card height="fill" shadow={1}>
+        <Flex height="fill">
+          <Card flex={1} padding={2}>
+            <List1 />
+          </Card>
+          <Card borderLeft flex={1} padding={2}>
+            <List2 />
+          </Card>
+        </Flex>
+      </Card>
+    </Box>
+  )
+}
+
+function List1() {
+  return (
+    <Stack space={1}>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+    </Stack>
+  )
+}
+
+function List2() {
+  return (
+    <Stack space={1}>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2} selected>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+    </Stack>
+  )
+}
+
+function Preview() {
+  return (
+    <Flex align="center">
+      <Skeleton marginRight={2} radius={2} style={{width: 35, height: 35}} />
+      <Stack flex={1} space={2}>
+        <Text>Preview</Text>
+        <Text muted size={1}>
+          Preview
+        </Text>
+      </Stack>
+    </Flex>
+  )
+}

package/src/primitives/card/__workshop__/props.tsx

@@ -0,0 +1,47 @@
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
+import {
+  WORKSHOP_CARD_AS_OPTIONS,
+  WORKSHOP_CARD_TONE_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SHADOW_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PropsStory() {
+  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
+  const border = useBoolean('Border', false, 'Props')
+  const checkered = useBoolean('Checkered', false, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
+  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Card
+        __unstable_checkered={checkered}
+        as={as}
+        border={border}
+        onClick={useAction('onClick')}
+        padding={padding}
+        radius={radius}
+        selected={selected}
+        shadow={shadow}
+        tone={tone}
+      >
+        <Stack space={3}>
+          <Text>
+            Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
+            <code>shadow={shadow}</code>.
+          </Text>
+          <Text>
+            Text with <a>link</a>.
+          </Text>
+          <Text accent>Accented text.</Text>
+        </Stack>
+      </Card>
+    </Flex>
+  )
+}