w-design-system 0.0.1

package/src/components/Button /styles.ts

@@ -0,0 +1,198 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,24 @@
+import React from 'react'
+import IconWrapper from '../IconWrapper'
+import { ButtonStyled } from './styles'
+import { ButtonRadiusIconTypes } from '../Types'
+
+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>
+)
+
+export default ButtonRadiusIcon

package/src/components/ButtonRadiusIcon/stories.tsx

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,27 @@
+import React from 'react'
+import IconWrapper from '../IconWrapper'
+import { ButtonStyled } from './styles'
+import { ButtonRoundTypes } from '../Types'
+
+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>
+)
+
+export default ButtonRound

package/src/components/ButtonRound/stories.tsx

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,136 @@
+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

@@ -0,0 +1,45 @@
+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'};
+    }
+  }
+`
+
+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>
+)
+
+export default IconWrapper