w-design-system 0.0.2 → 0.0.4

package/src/components/Button/styles.ts

@@ -1,198 +0,0 @@
-import styled, { css } from 'styled-components'
-import { theme } from '../Themes'
-import { ButtonTypes } from '../Types'
-
-const { colors } = theme
-const buttonRadiusWrapperIconStyles = (color: string) => css`
-  .buttonRadiusWrapperIcon {
-    margin-top: 4px;
-    svg {
-      fill: ${color};
-      path {
-        fill: ${color};
-      }
-    }
-  }
-`
-const colorScheme = {
-  primary: css`
-    background: ${colors.cyan50};
-    &:hover {
-      background-color: ${colors.cyan40};
-    }
-    &:active {
-      background-color: ${colors.cyan50};
-    }
-  `,
-  secondary: css`
-    background: ${colors.cyan30};
-    &:hover {
-      background-color: ${colors.cyan40};
-    }
-    &:active {
-      background-color: ${colors.cyan30};
-    }
-  `,
-  danger: css`
-    background: ${colors.red40};
-    &:hover {
-      background-color: ${colors.red30};
-    }
-    &:active {
-      background-color: ${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.mint40};
-    &:hover {
-      background-color: ${colors.mint30};
-    }
-    &:active {
-      background-color: ${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};
-    }
-    &:active {
-      background-color: ${colors.yellow10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.yellow30)};
-  `,
-} as const
-
-const colorSchemeOutilne = {
-  primary: css`
-    color: ${colors.cyan50};
-    border: 2px solid ${colors.cyan50};
-    &:hover {
-      background-color: ${colors.cyan10};
-    }
-    &:active {
-      background-color: ${colors.cyan10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.cyan50)};
-  `,
-  secondary: css`
-    color: ${colors.cyan40};
-    border: 2px solid ${colors.cyan40};
-    &:hover {
-      background-color: ${colors.cyan10};
-    }
-    &:active {
-      background-color: ${colors.cyan10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.cyan40)};
-  `,
-  danger: css`
-    color: ${colors.red40};
-    border: 2px solid ${colors.red40};
-    &:hover {
-      background-color: ${colors.red10};
-    }
-    &:active {
-      background-color: ${colors.red10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.red40)};
-  `,
-  warning: css`
-    color: ${colors.honey40};
-    border: 2px solid ${colors.honey40};
-    &:hover {
-      background-color: ${colors.honey10};
-    }
-    &:active {
-      background-color: ${colors.honey10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.honey40)};
-  `,
-  success: css`
-    color: ${colors.mint40};
-    border: 2px solid ${colors.mint40};
-    &:hover {
-      background-color: ${colors.mint10};
-    }
-    &:active {
-      background-color: ${colors.mint10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.mint40)};
-  `,
-  gray: css`
-    color: ${colors.shade40};
-    border: 2px solid ${colors.shade40};
-    &:hover {
-      background-color: ${colors.shade20};
-    }
-    &:active {
-      background-color: ${colors.shade10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.shade40)};
-  `,
-  yellow: css`
-    color: ${colors.yellow30};
-    border: 2px solid ${colors.yellow30};
-    &:hover {
-      background-color: ${colors.yellow10};
-    }
-    &:active {
-      background-color: ${colors.yellow10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.yellow30)};
-  `,
-} as const
-
-export const ButtonStyled = styled.button<ButtonTypes>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: 48px;
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-  padding: 12px 24px;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 140%;
-  border: none;
-  border-radius: ${({ radius }) => (radius ? '24px' : '5px')};
-  font-family: 'Nunito Sans', sans-serif;
-  transition:
-    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 }) => (!outline ? colorScheme[variant] : colorSchemeOutilne[variant])};
-  background: ${({ outline }) => outline && 'white'};
-  border-radius: ${({ halfLeft, halfRight, radius }) =>
-    !halfLeft && !halfRight ? (radius ? '24px' : '5px') : halfLeft ? '24px 0 0 24px' : '0 24px 24px 0'};
-
-  .buttonRadiusWrapperIcon {
-    margin-top: 4px;
-  }
-`

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>
-)