DAPP-1552-blocks/Separator

[kalashshah]

Pull Request Template

Ticket Number

• Ticket Number
• Fixes #1552

Description

• Problem/Feature:
• Feature: Introduced a new Separator component in design system. The Separator component accepts the orientation as a prop and renders it accordingly.
• Additional styles can be passed as props and supports an additional prop named css which supports additional styling similar to styled components taking reference from the typography component.

Type of Change

• [x] New feature

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

• [ ] 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

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 code provided, I did not find any mistakes or typos. The logic seems to be well implemented.

All looks good.

[github-actions[bot]]

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

[github-actions[bot]]

All looks good.

[github-actions[bot]]

• In the definition of SpaceType, replace the backtick character with a single quote: export type SpaceType = 's${number}';

• In the StyledSeparator component, the background-color property is using blocksColors.lightGray, which seems to be missing. It should be imported from the correct source file where lightGray color is defined.

Other than these issues, the code looks good.

So, the corrected part of the code is:

export type SpaceType = 's${number}';

import { blocksColors } from 'correct-source-path/Blocks.colors';

// Non-responsive props
background-color: ${blocksColors.lightGray};

All looks good.