@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

package/src/components/Tag/Tag.stories.tsx

@@ -1,112 +0,0 @@
-import React from 'react'
-import Tag, { TagProps } from './Tag'
-import type { Meta } from '@storybook/react'
-
-import { Icon as MirandaIcon } from '../Icon'
-import generator from '../../tests/generator'
-
-export default {
-  title: 'Components/Tag',
-  component: Tag,
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: ['default', 'outlined', 'accent', 'danger', 'success', 'warning'],
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'default', 'large'],
-      },
-    },
-    leading: {
-      control: {
-        type: 'input',
-      },
-    },
-  },
-} as Meta
-
-export function Default(args: TagProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center p-4 space-x-2">
-        <Tag {...args}>{generator.animal()}</Tag>
-        <Tag {...args}>{generator.animal()}</Tag>
-        <Tag {...args}>{generator.animal()}</Tag>
-      </div>
-    </div>
-  )
-}
-
-Default.args = {
-  size: 'default',
-  variant: 'default',
-  as: 'a',
-  href: '/',
-}
-
-export function Icon(args: TagProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center p-4 space-x-2">
-        <Tag {...args}>{generator.animal()}</Tag>
-        <Tag {...args}>{generator.animal()}</Tag>
-        <Tag {...args}>{generator.animal()}</Tag>
-      </div>
-    </div>
-  )
-}
-
-Icon.args = {
-  size: 'default',
-  variant: 'default',
-  leading: <MirandaIcon name="close" />,
-  removable: false,
-}
-
-export function Removable(args: TagProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center p-4 space-x-2">
-        <Tag {...args}>{generator.animal()}</Tag>
-        <Tag {...args}>{generator.animal()}</Tag>
-        <Tag {...args} leading={<MirandaIcon name="check" />}>
-          {generator.animal()}
-        </Tag>
-        <Tag {...args} leading={<MirandaIcon name="check" />}>
-          {generator.animal()}
-        </Tag>
-      </div>
-    </div>
-  )
-}
-
-Removable.args = {
-  size: 'default',
-  variant: 'default',
-  leading: null,
-  removable: true,
-  onRemove: () => alert('Removing Tag'),
-}
-
-export function Disabled(args: TagProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center p-4 space-x-2">
-        <Tag {...args}>{generator.animal()}</Tag>
-        <Tag {...args}>{generator.animal()}</Tag>
-        <Tag {...args}>{generator.animal()}</Tag>
-      </div>
-    </div>
-  )
-}
-
-Disabled.args = {
-  size: 'default',
-  variant: 'default',
-  className: 'is-disabled',
-  removable: false,
-}

package/src/components/Tag/Tag.test.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-import Tag from './Tag'
-import generator from '../../tests/generator'
-import renderer from '../../tests/renderer'
-
-const setup = ({ ...overrides }) => renderer(<Tag {...overrides} />).render()
-
-describe('<Tag />', () => {
-  it('renders correctly', () => {
-    const props = {
-      children: generator.word(),
-    }
-
-    setup(props)
-
-    screen.getByText(props.children)
-  })
-})

package/src/components/Tag/Tag.tsx

@@ -1,393 +0,0 @@
-import React, { ReactNode } from 'react'
-import styled from 'styled-components'
-
-import { Icon } from 'components/Icon'
-
-// tools
-import conditional, { whenProps } from 'tools/conditional'
-// styles
-import typography from 'styles/typography'
-import disableable from 'styles/disableable'
-import focusable from 'styles/focusable'
-import hoverable from 'styles/hoverable'
-import transition from 'styles/transition'
-import { getToken as token } from 'theming'
-
-import type { ButtonHTMLAttributes } from 'react'
-
-// interfaces
-interface WithSizeProps {
-  size?: 'small' | 'default' | 'large'
-}
-
-interface WithVariantProps {
-  variant?: 'accent' | 'danger' | 'default' | 'outlined' | 'success' | 'warning'
-}
-
-export interface TagProps extends React.HTMLAttributes<HTMLElement>, WithSizeProps {
-  className?: string
-  children?: ReactNode
-  disabled?: boolean
-  leading?: ReactNode
-  removable?: boolean
-  variant?: 'accent' | 'danger' | 'default' | 'outlined' | 'success' | 'warning'
-  onRemove?: () => void
-  getRemoveButtonProps?: () => Partial<ButtonHTMLAttributes<HTMLButtonElement>> & {
-    'data-testid'?: string
-  }
-}
-
-// styled elements
-const StyledTag = styled.span`
-  display: inline-flex;
-
-  position: relative;
-
-  width: auto;
-
-  z-index: 0;
-
-  ${disableable`
-    opacity: ${token('opacity-60')};
-  `}
-`
-
-const StyledSpan = styled.span<TagProps>`
-  ${transition()}
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  box-sizing: border-box;
-
-  text-decoration: none;
-
-  ${typography(
-    conditional({
-      'chips-sm': whenProps({ size: 'small' }),
-      'caption-bold': whenProps({ size: 'default' }),
-      'body-bold': whenProps({ size: 'large' }),
-    })
-  )}
-
-  line-height: initial;
-
-  text-transform: ${conditional({
-    'tag-transform': whenProps({ size: 'default' }),
-    'tag-small-transform': whenProps({ size: 'small' }),
-    'tag-large-transform': whenProps({ size: 'large' }),
-  })};
-
-  padding: ${conditional({
-    'tag-small-spacing': whenProps({ size: 'small', removable: (removable) => !removable }),
-    'tag-spacing': whenProps({
-      size: (size) => !['small', 'large'].includes(size ?? ''),
-      removable: (removable) => !removable,
-    }),
-    'tag-large-spacing': whenProps({ size: 'large', removable: (removable) => !removable }),
-    'tag-removable-spacing': whenProps([{ size: (size) => size !== 'small', removable: true }]),
-    'tag-small-removable-spacing': whenProps([{ size: 'small', removable: true }]),
-  })};
-
-  min-width: ${token('tag-width')};
-  height: ${conditional({
-    'tag-height': whenProps({ size: 'default' }),
-    'tag-small-height': whenProps({ size: 'small' }),
-    'tag-large-height': whenProps({ size: 'large' }),
-  })};
-
-  font-weight: ${conditional({
-    'tag-font-weight': whenProps({ size: 'default' }),
-    'tag-small-font-weight': whenProps({ size: 'small' }),
-    'tag-large-font-weight': whenProps({ size: 'large' }),
-  })};
-
-  color: ${conditional({
-    'tag-default-color': whenProps({ variant: 'default' }),
-    'tag-outlined-color': whenProps({ variant: 'outlined' }),
-    'tag-accent-color': whenProps({ variant: 'accent' }),
-    'tag-success-color': whenProps({ variant: 'success' }),
-    'tag-warning-color': whenProps({ variant: 'warning' }),
-    'tag-danger-color': whenProps({ variant: 'danger' }),
-  })};
-
-  background: ${conditional({
-    'tag-default-background': whenProps({ variant: 'default' }),
-    'tag-outlined-background': whenProps({ variant: 'outlined' }),
-    'tag-accent-background': whenProps({ variant: 'accent' }),
-    'tag-success-background': whenProps({ variant: 'success' }),
-    'tag-warning-background': whenProps({ variant: 'warning' }),
-    'tag-danger-background': whenProps({ variant: 'danger' }),
-  })};
-
-  border-radius: ${token('tag-border-radius')};
-  border-width: ${token('tag-border-width')};
-  border-style: solid;
-
-  border-color: ${conditional({
-    'tag-default-border-color': whenProps({ variant: 'default' }),
-    'tag-outlined-border-color': whenProps({ variant: 'outlined' }),
-    'tag-accent-border-color': whenProps({ variant: 'accent' }),
-    'tag-success-border-color': whenProps({ variant: 'success' }),
-    'tag-warning-border-color': whenProps({ variant: 'warning' }),
-    'tag-danger-border-color': whenProps({ variant: 'danger' }),
-  })};
-
-  ${hoverable`
-    background: ${conditional({
-      'tag-default-background--hover': whenProps([
-        { variant: 'default', removable: true },
-        { variant: 'default', href: Boolean },
-      ]),
-      'tag-outlined-background--hover': whenProps([
-        { variant: 'outlined', removable: true },
-        { variant: 'outlined', href: Boolean },
-      ]),
-      'tag-accent-background--hover': whenProps([
-        { variant: 'accent', removable: true },
-        { variant: 'accent', href: Boolean },
-      ]),
-      'tag-success-background--hover': whenProps([
-        { variant: 'success', removable: true },
-        { variant: 'success', href: Boolean },
-      ]),
-      'tag-warning-background--hover': whenProps([
-        { variant: 'warning', removable: true },
-        { variant: 'warning', href: Boolean },
-      ]),
-      'tag-danger-background--hover': whenProps([
-        { variant: 'danger', removable: true },
-        { variant: 'danger', href: Boolean },
-      ]),
-    })};
-
-    border-color: ${conditional({
-      'tag-default-border-color--hover': whenProps([
-        { variant: 'default', removable: true },
-        { variant: 'default', href: Boolean },
-      ]),
-      'tag-outlined-border-color--hover': whenProps([
-        { variant: 'outlined', removable: true },
-        { variant: 'outlined', href: Boolean },
-      ]),
-      'tag-accent-border-color--hover': whenProps([
-        { variant: 'accent', removable: true },
-        { variant: 'accent', href: Boolean },
-      ]),
-      'tag-success-border-color--hover': whenProps([
-        { variant: 'success', removable: true },
-        { variant: 'success', href: Boolean },
-      ]),
-      'tag-warning-border-color--hover': whenProps([
-        { variant: 'warning', removable: true },
-        { variant: 'warning', href: Boolean },
-      ]),
-      'tag-danger-border-color--hover': whenProps([
-        { variant: 'danger', removable: true },
-        { variant: 'danger', href: Boolean },
-      ]),
-    })};
-
-    color: ${conditional({
-      'tag-default-color--hover': whenProps([
-        { variant: 'default', removable: true },
-        { variant: 'default', href: Boolean },
-      ]),
-      'tag-outlined-color--hover': whenProps([
-        { variant: 'outlined', removable: true },
-        { variant: 'outlined', href: Boolean },
-      ]),
-      'tag-accent-color--hover': whenProps([
-        { variant: 'accent', removable: true },
-        { variant: 'accent', href: Boolean },
-      ]),
-      'tag-success-color--hover': whenProps([
-        { variant: 'success', removable: true },
-        { variant: 'success', href: Boolean },
-      ]),
-      'tag-warning-color--hover': whenProps([
-        { variant: 'warning', removable: true },
-        { variant: 'warning', href: Boolean },
-      ]),
-      'tag-danger-color--hover': whenProps([
-        { variant: 'danger', removable: true },
-        { variant: 'danger', href: Boolean },
-      ]),
-    })};
-  `}
-
-  ${focusable`
-    color: ${conditional({
-      'tag-default-color--focus': whenProps({ variant: 'default' }),
-      'tag-outlined-color--focus': whenProps({ variant: 'outlined' }),
-      'tag-accent-color--focus': whenProps({ variant: 'accent' }),
-      'tag-success-color--focus': whenProps({ variant: 'success' }),
-      'tag-warning-color--focus': whenProps({ variant: 'warning' }),
-      'tag-danger-color--focus': whenProps({ variant: 'danger' }),
-    })};
-    background: ${conditional({
-      'tag-default-background--focus': whenProps({ variant: 'default' }),
-      'tag-outlined-background--focus': whenProps({ variant: 'outlined' }),
-      'tag-accent-background--focus': whenProps({ variant: 'accent' }),
-      'tag-success-background--focus': whenProps({ variant: 'success' }),
-      'tag-warning-background--focus': whenProps({ variant: 'warning' }),
-      'tag-danger-background--focus': whenProps({ variant: 'danger' }),
-    })};
-    box-shadow: ${token('tag-box-shadow')};
-    outline: ${conditional({
-      'tag-default-outline': whenProps({ variant: 'default' }),
-      'tag-outlined-outline': whenProps({ variant: 'outlined' }),
-      'tag-accent-outline': whenProps({ variant: 'accent' }),
-      'tag-success-outline': whenProps({ variant: 'success' }),
-      'tag-warning-outline': whenProps({ variant: 'warning' }),
-      'tag-danger-outline': whenProps({ variant: 'danger' }),
-    })};
-    outline-offset: ${token('tag-outline-offset')};
-  `}
-
-  ${disableable`
-    opacity: ${token('opacity-60')};
-  `}
-`
-
-const Leading = styled.span<WithSizeProps>`
-  display: ${conditional({
-    'tag-leading-display': whenProps({ size: 'default' }),
-    'tag-small-leading-display': whenProps({ size: 'small' }),
-    'tag-large-leading-display': whenProps({ size: 'large' }),
-  })};
-  margin: 0 ${token('tag-icon-spacing')} 0 0;
-
-  color: currentColor;
-
-  fill: currentColor;
-`
-
-const StyledCloseButton = styled.button<WithSizeProps & WithVariantProps>`
-  z-index: 2;
-
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-
-  cursor: pointer;
-
-  background: ${token('tag-remove-button-background')};
-  border-radius: ${token('tag-remove-button-border-radius')};
-  border: 0;
-
-  width: ${conditional({
-    'tag-remove-button-size': whenProps({ size: 'default' }),
-    'tag-small-remove-button-size': whenProps({ size: 'small' }),
-    'tag-large-remove-button-size': whenProps({ size: 'large' }),
-  })};
-
-  height: ${conditional({
-    'tag-remove-button-size': whenProps({ size: 'default' }),
-    'tag-small-remove-button-size': whenProps({ size: 'small' }),
-    'tag-large-remove-button-size': whenProps({ size: 'large' }),
-  })};
-
-  padding: 0;
-
-  ${disableable`
-    opacity: ${token('opacity-60')};
-  `}
-
-  ${focusable``}
-
-  &:focus + ${StyledSpan} {
-    color: ${conditional({
-      'tag-default-color--focus': whenProps({ variant: 'default' }),
-      'tag-outlined-color--focus': whenProps({ variant: 'outlined' }),
-      'tag-accent-color--focus': whenProps({ variant: 'accent' }),
-      'tag-success-color--focus': whenProps({ variant: 'success' }),
-      'tag-warning-color--focus': whenProps({ variant: 'warning' }),
-      'tag-danger-color--focus': whenProps({ variant: 'danger' }),
-    })};
-
-    background: ${conditional({
-      'tag-default-background--focus': whenProps({ variant: 'default' }),
-      'tag-outlined-background--focus': whenProps({ variant: 'outlined' }),
-      'tag-accent-background--focus': whenProps({ variant: 'accent' }),
-      'tag-success-background--focus': whenProps({ variant: 'success' }),
-      'tag-warning-background--focus': whenProps({ variant: 'warning' }),
-      'tag-danger-background--focus': whenProps({ variant: 'danger' }),
-    })};
-    box-shadow: ${token('tag-box-shadow')};
-  }
-`
-
-const CloseIcon = styled(Icon)<WithSizeProps & WithVariantProps>`
-  width: ${conditional({
-    'tag-remove-button-icon-size': whenProps({ size: 'default' }),
-    'tag-small-remove-button-icon-size': whenProps({ size: 'small' }),
-    'tag-large-remove-button-icon-size': whenProps({ size: 'large' }),
-  })};
-
-  height: ${conditional({
-    'tag-remove-button-icon-size': whenProps({ size: 'default' }),
-    'tag-small-remove-button-icon-size': whenProps({ size: 'small' }),
-    'tag-large-remove-button-icon-size': whenProps({ size: 'large' }),
-  })};
-
-  color: ${conditional({
-    'tag-default-color': whenProps({ variant: 'default' }),
-    'tag-outlined-color': whenProps({ variant: 'outlined' }),
-    'tag-accent-color': whenProps({ variant: 'accent' }),
-    'tag-success-color': whenProps({ variant: 'success' }),
-    'tag-warning-color': whenProps({ variant: 'warning' }),
-    'tag-danger-color': whenProps({ variant: 'danger' }),
-  })};
-
-  fill: currentColor;
-`
-
-const StyledSpacer = styled.span<WithSizeProps>`
-  display: inline-block;
-  width: ${conditional({
-    '0': whenProps({ size: 'small' }),
-    'space-xs': whenProps({ size: 'default' }),
-    'space-s': whenProps({ size: 'large' }),
-  })};
-`
-
-// components
-function Tag(props: TagProps): JSX.Element {
-  const {
-    children,
-    leading,
-    size = 'default',
-    onRemove,
-    variant,
-    removable,
-    getRemoveButtonProps,
-    disabled = false,
-    ...others
-  } = props
-
-  return (
-    <StyledTag>
-      <StyledSpan size={size} variant={variant} {...others}>
-        {leading && <Leading size={size}>{leading}</Leading>}
-        {children}
-        {removable && !disabled && (
-          <>
-            <StyledSpacer aria-hidden="true" size={size} />
-            <StyledCloseButton
-              type="button"
-              {...getRemoveButtonProps?.()}
-              size={size}
-              onClick={onRemove}
-            >
-              <CloseIcon name="close" variant={variant} size={size} />
-            </StyledCloseButton>
-          </>
-        )}
-      </StyledSpan>
-    </StyledTag>
-  )
-}
-
-export default Tag

package/src/components/Tag/index.ts

@@ -1,2 +0,0 @@
-export { default as Tag } from './Tag'
-export type { TagProps } from './Tag'

package/src/components/Text/Text.stories.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Text } from '.'
-import type { TextProps } from './Text'
-import { COLORS } from '../../theming/themes/loadsmart.theme'
-import { typographyProperties } from 'styles/typography'
-
-const meta: Meta<typeof Text> = {
-  title: 'Components/Text',
-  component: Text,
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'Children to be passed as text content.',
-    },
-    variant: {
-      control: 'select',
-      options: Object.keys(typographyProperties),
-      description: 'One of the documented typography variants',
-    },
-    italic: {
-      control: 'boolean',
-      description: 'Controls if the text should be on italic mode.',
-    },
-    color: {
-      control: 'select',
-      options: Object.keys(COLORS),
-      description: 'Accepts all colors supported by the theme.',
-    },
-    as: {
-      control: 'text',
-      description:
-        'Which HTML element will be used, such as `span`, `p`, `h1-h6`, `blockquote`, `q`, `abbr`, `address`, `cite`, and others.',
-    },
-  },
-}
-
-export default meta
-
-type Story = StoryObj<TextProps>
-
-export const Playground: Story = {
-  args: {
-    children: 'This is a sample text content.',
-    italic: false,
-    variant: 'body',
-    color: 'color-neutral-darkest',
-  },
-  render: (args) => {
-    return (
-      <div className="flex flex-col space-y-2">
-        <div className="flex items-center">
-          <Text {...args} />
-        </div>
-      </div>
-    )
-  },
-}

package/src/components/Text/Text.test.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import renderer, { screen } from '../../tests/renderer'
-import generators from '../../tests/generator'
-import typography from '../../styles/typography'
-
-import { Text } from '.'
-
-jest.mock('../../styles/typography')
-
-describe('Text', () => {
-  it('should render a given text as children', () => {
-    const text = generators.sentence()
-
-    renderer(<Text>{text}</Text>).render()
-
-    expect(screen.getByText(text)).toBeInTheDocument()
-  })
-
-  describe('should pass along props to typography helper', () => {
-    it('variant caption', () => {
-      renderer(<Text variant="caption" />).render()
-
-      expect(typography).toHaveBeenCalledWith('caption', {
-        color: undefined,
-        italic: undefined,
-      })
-    })
-
-    it('italic true', () => {
-      renderer(<Text italic />).render()
-
-      expect(typography).toHaveBeenCalledWith(undefined, {
-        color: undefined,
-        italic: true,
-      })
-    })
-
-    it('color "color-success"', () => {
-      renderer(<Text color="color-success" />).render()
-
-      expect(typography).toHaveBeenCalledWith(undefined, {
-        color: 'color-success',
-        italic: undefined,
-      })
-    })
-  })
-})

package/src/components/Text/Text.tsx

@@ -1,14 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import styled from 'styled-components'
-
-import typography, { TypographyOptions, TypographyVariants } from 'styles/typography'
-
-export type TextProps = PropsWithChildren<{
-  variant?: TypographyVariants
-  italic?: TypographyOptions['italic']
-  color?: TypographyOptions['color']
-}>
-
-export default styled.span<TextProps>`
-  ${({ variant, italic, color }) => typography(variant, { italic, color })}
-`

package/src/components/Text/index.ts

@@ -1,2 +0,0 @@
-export { default as Text } from './Text'
-export type { TextProps } from './Text'