DApp-1542 blocks/button

[rohitmalhotra1420]

Pull Request Template

Ticket Number

• 1542

Description

• Feature:

• In this PR I have introduced a Button component based on the latest design system mentioned here on figma.

• The Button component accepts like variant, size, trailing and leading icons to render button in different shape, sizes, styles, with and without icons.

• To provide support for icons in the Button component and other components in future I have Introduced an IconWrapper component as well which is used to create icon component for svg icon files.

• This button component will work fine with the new icons created via IconWrapper component and may not be completely compatible with the existing icons due to lack of single approach used to create and use those previous icons.

Type of Change

• [ ] Bug fix
• [x] New feature
• [ ] Code refactor
• [ ] Documentation update
• [ ] Other (please describe):

Checklist

• [ ] Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • [ ] Quick PR label added
• [ ] Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • [ ] DO NOT Merge PR label added

Frontend Guidelines

• [x] Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• [x] No errors in the build terminal
• [x] Engineer has tested the changes on their local environment
• [ ] Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

Here's a SC which shows different forms of all the button variants.

Additional Context

Review & Approvals

• [x] Self-review completed
• [ ] Code review by at least one other engineer
• [ ] Documentation updates if applicable

Notes

[github-actions[bot]]

In the src/App.tsx file:

1. The dotenv module is being used without importing it. It should be imported at the top of the file using import dotenv from 'dotenv';.
2. The createGlobalStyle template literal is not properly closed with a backtick.

In the src/blocks/Blocks.colors.ts file:

1. The createBlocksColors function is missing a closing brace '}' at the end.
2. The return statement inside createBlocksColors function should be enclosed in a pair of curly braces {}.

In the src/blocks/button/Button.constants.ts file:

1. Some of the button variant styles are missing proper closing braces '}'.
2. The getButtonSizeStyles function has incomplete logic and missing closing braces '}' in some conditions.

These are the issues identified in the provided files. Please fix them accordingly.

[github-actions[bot]]

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-06-10 07:17 UTC

[github-actions[bot]]

In the Button.constants.ts file, the buttonVariantStyles object is missing closing curly braces } for some of the style declarations. Also, some of the style declarations are missing closing curly braces for pseudo-classes like :hover, :active, and :focus-visible, which causes the styles to be incomplete.

Here is the corrected buttonVariantStyles object in Button.constants.ts:

export const buttonVariantStyles: ButtonVariantStyles = {
  primary: `
    background-color: var(--pink-400);
    color: var(--white);
    &:hover {
      background-color: var(--pink-400);
    }
    &:active {
      background-color: var(--pink-800);
    }
    &:focus-visible {
      border: 1px solid var(--pink-300);
      outline: none;
    }
    &:disabled {
      background-color: var(--gray-200);
      color: var(--gray-300);
    }
  `,
  secondary: `
    background-color: var(--gray-100);
    color: var(--gray-1000);
      &:hover {
        background-color: var(--gray-300);
      }
      &:active {
        background-color: var(--pink-100);
      }
  `,
  tertiary: `
    background-color: var(--gray-1000);
      &:hover {
        background-color: var(--gray-900);
      }
  `,
  danger: `
    background-color: var(--red-600);
      &:hover {
        background-color: var(--red-500);
      }
      &:active {
        background-color: var(--red-800);
      }
      border: 1px solid var(--red-300);
  `,
  dangerSecondary: `
    background-color: var(--red-200);
    color: var(--red-700);
      &:hover {
        background-color: var(--red-100);
      }
      color: var(--red-700);
  `,
  outline: `
    background-color: var(--white);
    border: 1px solid var(--gray-300);
      &:hover {
        background-color: var(--white);
      }
      border: 1px solid var(--gray-600);
  `,
};

In the Button.types.ts file, the ButtonSize type is imported but not used in the ButtonVariantStyles type. You should remove the imports that are not used to keep the code clean.

Other than this issue, the code looks good.

All looks good.

[github-actions[bot]]

All looks good.

[github-actions[bot]]

All looks good.