w-design-system 0.0.3 → 0.0.4

package/src/components/Button/test.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { Button } from './index'
-
-describe('Button Component', () => {
-  test('renders button with primary variant', () => {
-    render(<Button variant="primary">Primary Button</Button>)
-    const button = screen.getByText('Primary Button')
-    expect(button).toBeInTheDocument()
-    expect(button).toHaveStyle(`background-color: #1A3D7F`)
-  })
-
-  test('renders button with secondary variant', () => {
-    render(<Button variant="secondary">Secondary Button</Button>)
-    const button = screen.getByText('Secondary Button')
-    expect(button).toBeInTheDocument()
-    expect(button).toHaveStyle(`background-color: #217EFD`)
-  })
-
-  test('button responds to click event', () => {
-    const handleClick = jest.fn()
-    render(
-      <Button variant="primary" onClick={handleClick}>
-        Clickable Button
-      </Button>,
-    )
-    const button = screen.getByText('Clickable Button')
-    fireEvent.click(button)
-    expect(handleClick).toHaveBeenCalledTimes(1)
-  })
-
-  test('button is disabled when the disabled prop is true', () => {
-    render(
-      <Button variant="primary" disabled>
-        Disabled Button
-      </Button>,
-    )
-    const button = screen.getByText('Disabled Button')
-    expect(button).toBeInTheDocument()
-    expect(button).toHaveStyle(`opacity: 0.5`)
-    expect(button).toHaveStyle(`cursor: not-allowed`)
-  })
-})

package/src/components/ButtonRadiusIcon/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { IconWrapper } from '../IconWrapper'
-import { ButtonStyled } from './styles'
-import { ButtonRadiusIconTypes } from '../Types'
-
-export const ButtonRadiusIcon: React.FC<ButtonRadiusIconTypes> = ({
-  variant = 'primary',
-  children,
-  disabled = false,
-  icon,
-  subTitle,
-  ...props
-}) => (
-  <ButtonStyled variant={variant} disabled={disabled} subTitle={subTitle} {...props}>
-    <span className={'buttonRadiusIconContainer'}>
-      {children} {subTitle && <p className={'buttonRadiusIconTitle'}>{subTitle}</p>}
-    </span>
-    <span className={'buttonRadiusIconWrapperIcon'}>
-      <IconWrapper src={icon || ''} color={'white'} className={'buttonRadiusWrapperIcon'} />
-    </span>
-  </ButtonStyled>
-)

package/src/components/ButtonRadiusIcon/stories.tsx

@@ -1,47 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import exampleIcon from '../../assets/icon/image.svg'
-import { ButtonRadiusIcon } from './index'
-import { VARIANTS_TYPES } from '../../utils/constanst' // Update this path to your actual icon
-
-const meta: Meta<typeof ButtonRadiusIcon> = {
-  title: 'Components/ButtonRadiusIcon',
-  component: ButtonRadiusIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: VARIANTS_TYPES,
-      },
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    icon: {
-      control: 'text',
-    },
-    onClick: { action: 'clicked' },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof ButtonRadiusIcon>
-
-export const Playground: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Primary Button',
-    disabled: false,
-    icon: exampleIcon,
-  },
-}
-
-export const PlaygroundTitlePrimary: Story = {
-  args: {
-    variant: 'secondary',
-    children: 'Button:',
-    disabled: false,
-    icon: exampleIcon,
-    subTitle: 'subTitle',
-  },
-}

package/src/components/ButtonRadiusIcon/styles.ts

@@ -1,139 +0,0 @@
-import styled, { css } from 'styled-components'
-import { theme } from '../Themes'
-import { ButtonRadiusIconTypes } from '../Types'
-
-const { colors } = theme
-const buttonRadiusWrapperIconStyles = (color: string) => css`
-  .buttonRadiusIconWrapperIcon {
-    background: ${color};
-    width: 56px;
-    height: 100%;
-    overflow: hidden;
-  }
-`
-const colorScheme = {
-  primary: css`
-    background: ${colors.cyan10};
-    color: ${colors.cyan50};
-    &:hover {
-      background-color: ${colors.cyan10};
-    }
-    &:active {
-      background-color: ${colors.cyan10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.cyan50)};
-  `,
-  secondary: css`
-    background: ${colors.cyan10};
-    color: ${colors.cyan30};
-    &:hover {
-      background-color: ${colors.cyan10};
-      opacity: 0.9;
-    }
-    &:active {
-      background-color: ${colors.cyan10};
-      opacity: 1;
-    }
-    ${buttonRadiusWrapperIconStyles(colors.cyan30)};
-  `,
-  danger: css`
-    background: ${colors.red10};
-    color: ${colors.red40};
-    &:hover {
-      background-color: ${colors.red20};
-    }
-    &:active {
-      background-color: ${colors.red10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.red40)};
-  `,
-  warning: css`
-    background: ${colors.honey10};
-    color: ${colors.honey30};
-    &:hover {
-      background-color: ${colors.honey20};
-    }
-    &:active {
-      background-color: ${colors.honey10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.honey30)};
-  `,
-  success: css`
-    background: ${colors.mint10};
-    color: ${colors.mint40};
-    &:hover {
-      background-color: ${colors.mint20};
-    }
-    &:active {
-      background-color: ${colors.mint10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.mint40)};
-  `,
-  gray: css`
-    background: ${colors.shade10};
-    color: ${colors.shade40};
-    &:hover {
-      background-color: ${colors.shade20};
-    }
-    &:active {
-      background-color: ${colors.shade10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.shade40)};
-  `,
-  yellow: css`
-    background: ${colors.yellow10};
-    color: ${colors.yellow30};
-    &:hover {
-      background-color: ${colors.yellow20};
-      opacity: 0.9;
-    }
-    &:active {
-      background-color: ${colors.yellow10};
-      opacity: 1;
-    }
-    ${buttonRadiusWrapperIconStyles(colors.yellow30)};
-  `,
-} as const
-
-export const ButtonStyled = styled.button<ButtonRadiusIconTypes>`
-  display: inline-flex;
-  box-sizing: border-box;
-  height: 48px;
-  padding: 0;
-  margin: 0;
-  justify-content: space-between;
-  min-width: 190px;
-  font-style: normal;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 140%;
-  border: none;
-  border-radius: 24px;
-  overflow: hidden;
-  font-family: 'Nunito Sans', sans-serif;
-  transition:
-    background-color 0.3s,
-    opacity 0.3s;
-  color: white;
-
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
-  ${({ variant = 'primary' }) => colorScheme[variant]};
-
-  .buttonRadiusIconContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 24px;
-    gap: 6px;
-    height: 48px;
-  }
-  .buttonRadiusIconTitle {
-    color: ${colors.shade40};
-    font-weight: 400;
-  }
-
-  .buttonRadiusWrapperIcon {
-    margin-top: 2px;
-  }
-`

package/src/components/ButtonRound/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { IconWrapper } from '../IconWrapper'
-import { ButtonStyled } from './styles'
-import { ButtonRoundTypes } from '../Types'
-
-export const ButtonRound: React.FC<ButtonRoundTypes> = ({
-  variant = 'primary',
-  children,
-  disabled = false,
-  icon,
-  outline,
-  badge,
-  ...props
-}) => (
-  <ButtonStyled variant={variant} disabled={disabled} outline={outline} badge={badge} {...props}>
-    {badge && <span className={'buttonRoundBadge'}>{badge}</span>}
-    <IconWrapper
-      src={icon || ''}
-      color={'white'}
-      width={'20px'}
-      height={'20px'}
-      className={'buttonRadiusWrapperIcon'}
-    />
-  </ButtonStyled>
-)

package/src/components/ButtonRound/stories.tsx

@@ -1,50 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import exampleIcon from '../../assets/icon/image.svg'
-
-import { VARIANTS_TYPES } from '../../utils/constanst'
-import { ButtonRound } from './index'
-
-const meta: Meta<typeof ButtonRound> = {
-  title: 'Components/ButtonRound',
-  component: ButtonRound,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: VARIANTS_TYPES,
-      },
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    icon: {
-      control: 'object',
-      options: [exampleIcon],
-      description: exampleIcon,
-    },
-
-    onClick: { action: 'clicked' },
-  },
-} satisfies Meta<typeof ButtonRound>
-
-export default meta
-type Story = StoryObj<typeof ButtonRound>
-
-export const Playground: Story = {
-  args: {
-    variant: 'primary',
-    children: 'ButtonPlayground',
-    disabled: false,
-    icon: exampleIcon,
-  },
-}
-export const ButtonBadge: Story = {
-  args: {
-    variant: 'success',
-    children: 'ButtonPlayground',
-    disabled: false,
-    icon: exampleIcon,
-    badge: 10,
-  },
-}

package/src/components/ButtonRound/styles.ts

@@ -1,136 +0,0 @@
-import styled, { css } from 'styled-components'
-import { theme } from '../Themes'
-import { ButtonRoundTypes } from '../Types'
-
-const { colors } = theme
-const buttonRadiusWrapperIconStyles = (color: string) => css`
-  .buttonRadiusWrapperIcon {
-    svg {
-      fill: ${color};
-      path {
-        fill: ${color};
-      }
-    }
-  }
-  .buttonRoundBadge {
-    background: ${color};
-  }
-`
-const colorScheme = {
-  primary: css`
-    background: ${colors.shade10};
-    ${buttonRadiusWrapperIconStyles(colors.shade30)}
-    &:hover {
-      background-color: ${colors.shade20};
-      ${buttonRadiusWrapperIconStyles(colors.cyan40)};
-    }
-    &:active {
-      background-color: ${colors.shade10};
-      ${buttonRadiusWrapperIconStyles(colors.shade30)};
-    }
-  `,
-  secondary: css`
-    background: ${colors.cyan10};
-    &:hover {
-      background-color: ${colors.cyan10};
-      ${buttonRadiusWrapperIconStyles(colors.cyan30)}
-    }
-    &:active {
-      background-color: ${colors.cyan10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.cyan40)};
-  `,
-  danger: css`
-    background: ${colors.red10};
-    &:hover {
-      background-color: ${colors.red20};
-    }
-    &:active {
-      background-color: ${colors.red10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.red40)};
-  `,
-  warning: css`
-    background: ${colors.honey10};
-    color: ${colors.honey30};
-    &:hover {
-      background-color: ${colors.honey20};
-    }
-    &:active {
-      background-color: ${colors.honey10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.honey30)};
-  `,
-  success: css`
-    background: ${colors.mint10};
-    &:hover {
-      background-color: ${colors.mint20};
-    }
-    &:active {
-      background-color: ${colors.mint10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.mint40)};
-  `,
-  gray: css`
-    background: ${colors.shade10};
-    &:hover {
-      background-color: ${colors.shade20};
-    }
-    &:active {
-      background-color: ${colors.shade10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.shade40)};
-  `,
-  yellow: css`
-    background: ${colors.yellow10};
-    &:hover {
-      background-color: ${colors.yellow20};
-    }
-    &:active {
-      background-color: ${colors.yellow10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.yellow30)};
-  `,
-} as const
-
-export const ButtonStyled = styled.button<ButtonRoundTypes>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: 48px;
-  width: 48px;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 140%;
-  border: none;
-  border-radius: 100%;
-  font-family: 'Nunito Sans', sans-serif;
-  transition:
-    color 0.3s,
-    background-color 0.3s,
-    opacity 0.3s;
-  color: white;
-  gap: 12px;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
-  ${({ variant = 'primary', outline }) => colorScheme[variant]};
-
-  .buttonRadiusWrapperIcon {
-    margin-top: 4px;
-  }
-  .buttonRoundBadge {
-    box-sizing: border-box;
-    margin-bottom: 24px;
-    margin-left: 54px;
-    position: absolute;
-    width: 26px;
-    height: 26px;
-    border-radius: 100%;
-    font-size: 12px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 2px solid;
-  }
-`

package/src/components/IconWrapper/index.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { ReactSVG } from 'react-svg'
-
-interface IconWrapperProps {
-  src: string
-  color?: string
-  width?: string
-  height?: string
-  className?: string
-  onClick?: () => void
-}
-
-interface IconWrappeProps {
-  color?: string
-  width?: string
-  height?: string
-  onClick?: () => void
-}
-
-const StyledIconWrapper = styled.div<IconWrappeProps>`
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  cursor: ${props => (props.onClick ? 'pointer' : 'default')};
-  svg {
-    width: ${props => props.width || '24px'};
-    height: ${props => props.height || '24px'};
-    fill: ${props => props.color || 'black'};
-
-    path {
-      fill: ${props => props.color || 'black'};
-    }
-  }
-`
-
-export const IconWrapper: React.FC<IconWrapperProps> = ({ src, color, width, height, className, onClick }) => (
-  <StyledIconWrapper color={color} width={width} height={height} className={className} onClick={onClick}>
-    <ReactSVG src={src} />
-  </StyledIconWrapper>
-)

package/src/components/Modal/index.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { closeSVG } from '../../assets/icon'
-import { theme } from '../Themes'
-import { Title } from '../Title'
-import { IconWrapper } from '../IconWrapper'
-import { ModalTypes } from '../Types'
-import { ModalContainer, Overlay } from './styles'
-const {
-  colors: { cyan50, shade30 },
-} = theme
-
-export const Modal: React.FC<ModalTypes> = ({ children, onClose, footer, ...props }) => {
-  return ReactDOM.createPortal(
-    <>
-      <Overlay onClick={onClose} />
-      <ModalContainer {...props}>
-        <div className={'modalHeader'}>
-          <Title size={'medium'} bold color={cyan50}>
-            Enviar
-          </Title>
-          <IconWrapper src={closeSVG} width={'14px'} height={'14px'} color={shade30} onClick={onClose} />
-        </div>
-        <div className={'modalContainer'}>{children}</div>
-        <div className={'modalFooter'}>{footer}</div>
-      </ModalContainer>
-    </>,
-    document.body,
-  )
-}

package/src/components/Modal/stories.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import { useState } from 'react'
-import { Modal } from './index'
-import { Paragraph } from '../Paragraph'
-import { Button } from '../Button'
-
-const meta: Meta<typeof Modal> = {
-  title: 'Components/Modal',
-  component: Modal,
-} satisfies Meta<typeof Modal>
-
-export default meta
-
-type Story = StoryObj<typeof Modal>
-
-export const Playground: Story = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isOpen, setIsOpen] = useState(false)
-
-    return (
-      <>
-        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-        {isOpen && (
-          <Modal
-            onClose={() => setIsOpen(false)}
-            footer={
-              <>
-                <Button onClick={() => setIsOpen(true)} variant={'gray'}>
-                  Cancelar
-                </Button>
-                <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-              </>
-            }
-          >
-            <Paragraph size={'medium'} weight={800}>
-              Modal Title
-            </Paragraph>
-            <Paragraph>
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-              industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-              scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
-              electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
-              of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
-              like Aldus PageMaker including versions of Lorem Ipsum.
-            </Paragraph>
-          </Modal>
-        )}
-      </>
-    )
-  },
-}

package/src/components/Modal/styles.ts

@@ -1,51 +0,0 @@
-import styled from 'styled-components'
-import { theme } from '../Themes'
-const {
-  colors: { shade20 },
-  zIndex: { z8, z9 },
-} = theme
-
-export const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: ${z8};
-`
-export const ModalContainer = styled.div`
-  display: flex;
-  min-width: 360px;
-  width: auto;
-  height: auto;
-  padding: 30px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 24px;
-  flex-shrink: 0;
-  border-radius: 24px;
-  border: 1px solid ${shade20};
-  background: white;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: ${z9};
-
-  .modalContainer {
-    min-height: 100px;
-  }
-  .modalHeader {
-    display: inline-flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-  .modalFooter {
-    display: inline-flex;
-    justify-content: flex-end;
-    width: 100%;
-    gap: 0 24px;
-  }
-`

package/src/components/Paragraph/index.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-interface ParagraphProps {
-  size?: 'x-small' | 'small' | 'medium' | 'large'
-  weight?: 400 | 600 | 700 | 800
-  as?: 'span' | 'div' | 'label' | 'p'
-  color?: string // Adicionando a propriedade color
-  children: React.ReactNode
-}
-
-const sizes = {
-  'x-small': '12px',
-  small: '14px',
-  medium: '16px',
-  large: '18px',
-}
-
-const weights = {
-  400: 400,
-  600: 600,
-  700: 700,
-  800: 800,
-}
-
-const ParagraphStyled = styled.p<ParagraphProps>`
-  margin: 0;
-  padding: 0;
-  font-size: ${props => sizes[props.size || 'small']};
-  font-weight: ${props => (props.weight ? weights[props.weight] : 400)};
-  line-height: 140%;
-  font-family: 'Nunito Sans', sans-serif;
-  color: ${props => props.color || 'inherit'}; // Aplicando a cor
-`
-
-export const Paragraph: React.FC<ParagraphProps> = ({ size = 'small', weight, as = 'p', color, children }) => {
-  return (
-    <ParagraphStyled as={as} size={size} weight={weight} color={color}>
-      {children}
-    </ParagraphStyled>
-  )
-}