-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FCT 663: add
LeadingIcon component (#2701)
* feat(leading icon): initial implementation of leading icon, add storybook * feat(leading icon): update behavior when neither svg nor icon prop is passed to component * feat(leading icon): remove stale comment * feat(leading icon): simplify getSize function * feat(leading icon): add unit and visual tests, update icon README, refactor component to handle styling for customsvgs * feat(leading icon): incorporate style map from Carlos' PR, update styling for size 10 to make icons 22X22, update styling for light white theme to make sure icon size is same as in other colors, update chageset, remove default values, update tests based on feedback * feat(leading icon): add inverted state to custom svg background, update tests * feat(leading icon): update leading icon description in icons README, remove unnecessary styling functions in leading-icon.styles.ts, update visual spec to be a bit less verbose * feat(leading icon): update readme correctly this time * Update packages/components/icons/README.md Co-authored-by: Stephanie Sprinkle <[email protected]> * feat(leading icon): add type for color theme styles --------- Co-authored-by: Stephanie Sprinkle <[email protected]>
- Loading branch information
1 parent
f31886c
commit a0abf51
Showing
12 changed files
with
420 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@commercetools-uikit/icons': minor | ||
| --- | ||
|
|
||
| We've added a new component to manage icons when you need to render an icon with a themed bounding-box. Icons can be either from the `ui-kit` icons set or a custom SVG. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "main": "dist/commercetools-uikit-icons-leading-icon.cjs.js", | ||
| "module": "dist/commercetools-uikit-icons-leading-icon.esm.js" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './leading-icon'; |
41 changes: 41 additions & 0 deletions
41
packages/components/icons/src/leading-icon/leading-icon.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { ArrowLeftIcon } from '../generated'; | ||
| import { screen, render } from '../../../../../test/test-utils'; | ||
| import rawSvg from '../fixtures/raw-svg'; | ||
| import LeadingIcon, { type TLeadingIconProps } from './leading-icon'; | ||
|
|
||
| type TLeadingIconTestProps = Pick< | ||
| TLeadingIconProps, | ||
| 'color' | 'size' | 'icon' | 'isInverted' | ||
| > & { | ||
| 'data-testid'?: string; | ||
| 'aria-label': string; | ||
| }; | ||
|
|
||
| const createTestProps = ( | ||
| custom?: Partial<TLeadingIconTestProps> | ||
| ): TLeadingIconTestProps => ({ | ||
| color: 'neutral', | ||
| size: '20', | ||
| icon: <ArrowLeftIcon aria-label="arrowLeft" />, | ||
| 'aria-label': 'leading-icon', | ||
| ...custom, | ||
| }); | ||
|
|
||
| describe('LeadingIcon', () => { | ||
| let props: Partial<TLeadingIconTestProps>; | ||
| beforeEach(() => { | ||
| props = createTestProps(); | ||
| }); | ||
| it('should render a react component and pass aria attributes', async () => { | ||
| render(<LeadingIcon {...props} />); | ||
| await screen.findByRole('img', { name: 'leading-icon' }); | ||
| }); | ||
| it('should pass data attributes', async () => { | ||
| render(<LeadingIcon {...props} data-testid="test-testid" />); | ||
| await screen.findByTestId('test-testid'); | ||
| }); | ||
| it('should render a custom svg when svg prop is passed', async () => { | ||
| render(<LeadingIcon svg={rawSvg.clock} />); | ||
| await screen.findByLabelText('custom clock svg'); | ||
| }); | ||
| }); |
Oops, something went wrong.