packages/hooks/examples/ButtonAriaActionPropsExample.tsx - develop - kaws/ui-kit-ce

packages/hooks/examples/ButtonAriaActionPropsExample.tsx
116 строк3 KB
Ivan Iakovlev
docs(hooks): добавлены stories по хукам
20 ноя 2024, 11:54
20 ноя 2024, 11:547538000
import * as React from 'react'
import { useButtonAriaActionProps, createUseStyles } from '@v-uik/base'

const useStyles = createUseStyles((theme) => ({
  button: {
    color: theme.comp.button.colorTextOutlinedSecondary,
    padding: [8, 16],
    borderTopLeftRadius: theme.comp.button.shapeBorderRadiusTopLeftMd,
    borderTopRightRadius: theme.comp.button.shapeBorderRadiusTopRightMd,
    borderBottomLeftRadius: theme.comp.button.shapeBorderRadiusBottomLeftMd,
    borderBottomRightRadius: theme.comp.button.shapeBorderRadiusBottomRightMd,
    cursor: 'pointer',
    fontFamily: theme.comp.button.typographyFontFamily,
    fontWeight: theme.comp.button.typographyFontWeight,
    letterSpacing: theme.comp.button.typographyLetterSpacing,
    fontSize:
      theme.comp.button.typographyFontSizeMd ||
      theme.comp.button.typographyFontSize,
    lineHeight:
      theme.comp.button.typographyLineHeightMd ||
      theme.comp.button.typographyLineHeight,
    position: 'relative',
    '&::after': {
      content: '""',
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      zIndex: 1,
      borderRadius: 'inherit',
      borderStyle: theme.shape.borderStyle,
      borderWidth: theme.shape.borderWidth,
      borderColor: theme.comp.button.colorBorderOutlinedSecondary,
    },

    '&:focus-visible': {
      color: theme.comp.button.colorTextOutlinedSecondaryFocus,
      backgroundColor: theme.comp.button.colorBackgroundOutlinedSecondaryFocus,
      boxShadow: `0 0 0 2px ${theme.comp.button.colorShadowFocus}`,

      '&::after': {
        borderWidth: theme.shape.borderWidth,
        borderColor: theme.comp.button.colorBorderFocus,
      },
    },

    '&:hover': {
      color: theme.comp.button.colorTextOutlinedSecondaryHover,
      backgroundColor: theme.comp.button.colorBackgroundOutlinedSecondaryHover,

      '&::after': {
        borderWidth: 0,
      },
    },

    '&:active': {
      color: theme.comp.button.colorTextOutlinedSecondaryActive,
      backgroundColor: theme.comp.button.colorBackgroundOutlinedSecondaryActive,

      '&::after': {
        borderWidth: 0,
      },
    },

    '&$disabled': {
      color: theme.comp.button.colorTextOutlinedSecondaryDisabled,

      '&::after': {
        borderColor: theme.comp.button.colorBorderOutlinedSecondaryDisabled,
      },
    },
  },

  '&$ghost': {
    color: theme.comp.button.colorTextGhostSecondary,

    '&:focus-visible': {
      boxShadow: `0 0 0 2px ${theme.comp.button.colorShadowFocus}`,
    },

    '&:hover': {
      color: theme.comp.button.colorTextGhostSecondaryHover,
      backgroundColor: theme.comp.button.colorBackgroundGhostSecondaryHover,
    },

    '&:active': {
      color: theme.comp.button.colorTextGhostSecondaryActive,
      backgroundColor: theme.comp.button.colorBackgroundGhostSecondaryActive,
    },

    '&$disabled': {
      color: theme.comp.button.colorTextGhostSecondaryDisabled,
    },
  },
}))

export const ButtonAriaActionPropsExample = (): JSX.Element => {
  const handleClick = () => alert('onClick')
  const handleKeyDown = () => alert('onKeyDown')
  const handleKeyUp = () => alert('onKeyUp')

  const actionProps = useButtonAriaActionProps(
    handleClick,
    handleKeyDown,
    handleKeyUp
  )

  const classes = useStyles()

  return (
    <div tabIndex={0} className={classes.button} {...actionProps}>
      Button-Like Div
    </div>
  )
}