-
Notifications
You must be signed in to change notification settings - Fork 167
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(fuselage): move size changes into V2 components (#1404)
- Loading branch information
1 parent
d7ebb78
commit c239558
Showing
27 changed files
with
783 additions
and
33 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 @@ | ||
| --- | ||
| "@rocket.chat/fuselage": patch | ||
| --- | ||
|
|
||
| fix(fuselage): move header size changes into V2 components |
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
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
33 changes: 33 additions & 0 deletions
33
packages/fuselage/src/components/ContextualbarV2/Contextualbar.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,33 @@ | ||
| import { composeStories } from '@storybook/testing-react'; | ||
| import { render } from '@testing-library/react'; | ||
| import { axe, toHaveNoViolations } from 'jest-axe'; | ||
| import React from 'react'; | ||
|
|
||
| import * as stories from './Contextualbar.stories'; | ||
|
|
||
| expect.extend(toHaveNoViolations); | ||
|
|
||
| const testCases = Object.values(composeStories(stories)).map((Story) => [ | ||
| Story.storyName || 'Story', | ||
| Story, | ||
| ]); | ||
|
|
||
| describe('[Contextualbar Rendering]', () => { | ||
| test.each(testCases)( | ||
| `renders %s without crashing`, | ||
| async (_storyname, Story) => { | ||
| const tree = render(<Story />); | ||
| expect(tree.baseElement).toMatchSnapshot(); | ||
| } | ||
| ); | ||
|
|
||
| test.each(testCases)( | ||
| '%s should have no a11y violations', | ||
| async (_storyname, Story) => { | ||
| const { container } = render(<Story />); | ||
|
|
||
| const results = await axe(container); | ||
| expect(results).toHaveNoViolations(); | ||
| } | ||
| ); | ||
| }); |
109 changes: 109 additions & 0 deletions
109
packages/fuselage/src/components/ContextualbarV2/Contextualbar.stories.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,109 @@ | ||
| import { action } from '@storybook/addon-actions'; | ||
| import type { ComponentStory, ComponentMeta } from '@storybook/react'; | ||
| import React from 'react'; | ||
|
|
||
| import { | ||
| ContextualbarV2, | ||
| ContextualbarV2Action, | ||
| ContextualbarV2Actions, | ||
| ContextualbarV2Button, | ||
| ContextualbarV2Content, | ||
| ContextualbarV2EmptyContent, | ||
| ContextualbarV2Footer, | ||
| ContextualbarV2Header, | ||
| ContextualbarV2Section, | ||
| ContextualbarV2Skeleton, | ||
| ContextualbarV2Title, | ||
| } from '.'; | ||
| import { Button, ButtonGroup, IconButton, Box, InputBox, Icon } from '..'; | ||
|
|
||
| export default { | ||
| title: 'Containers/ContextualbarV2', | ||
| component: ContextualbarV2, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: `The \`ContextualbarV2\` has the purpose to persist and input information about the scope of the related page. | ||
| `, | ||
| }, | ||
| }, | ||
| }, | ||
| decorators: [ | ||
| (storyFn) => ( | ||
| <Box width='x400' elevation='2'> | ||
| {storyFn()} | ||
| </Box> | ||
| ), | ||
| ], | ||
| } as ComponentMeta<typeof ContextualbarV2>; | ||
|
|
||
| export const Default: ComponentStory<typeof ContextualbarV2> = () => ( | ||
| <ContextualbarV2 position='static' height='x540'> | ||
| <ContextualbarV2Header> | ||
| <ContextualbarV2Action | ||
| title='Back' | ||
| name='arrow-back' | ||
| onClick={action('click')} | ||
| /> | ||
| <ContextualbarV2Title>ContextualbarV2 Title</ContextualbarV2Title> | ||
| <ContextualbarV2Actions> | ||
| <ContextualbarV2Action | ||
| title='Title' | ||
| name='new-window' | ||
| onClick={action('click')} | ||
| /> | ||
| <ContextualbarV2Action | ||
| title='Add user' | ||
| name='add-user' | ||
| onClick={action('click')} | ||
| /> | ||
| <ContextualbarV2Action | ||
| title='Close' | ||
| name='cross' | ||
| onClick={action('click')} | ||
| /> | ||
| </ContextualbarV2Actions> | ||
| </ContextualbarV2Header> | ||
| <ContextualbarV2Section> | ||
| <InputBox | ||
| type='text' | ||
| placeholder='Search' | ||
| addon={<Icon name='magnifier' size='x20' />} | ||
| /> | ||
| </ContextualbarV2Section> | ||
| <ContextualbarV2Content /> | ||
| <ContextualbarV2Footer> | ||
| <ButtonGroup> | ||
| <ContextualbarV2Button width='full' secondary> | ||
| Cancel | ||
| </ContextualbarV2Button> | ||
| <Button width='full' primary> | ||
| Save | ||
| </Button> | ||
| <IconButton title='More' icon='menu' secondary /> | ||
| </ButtonGroup> | ||
| </ContextualbarV2Footer> | ||
| </ContextualbarV2> | ||
| ); | ||
|
|
||
| export const Skeleton: ComponentStory<typeof ContextualbarV2> = () => ( | ||
| <ContextualbarV2Skeleton position='static' height='x540' /> | ||
| ); | ||
|
|
||
| export const Empty: ComponentStory<typeof ContextualbarV2> = () => ( | ||
| <ContextualbarV2 position='static' height='x540'> | ||
| <ContextualbarV2Header> | ||
| <ContextualbarV2Action title='Back' name='arrow-back' /> | ||
| <ContextualbarV2Title>ContextualbarV2 Empty</ContextualbarV2Title> | ||
| <ContextualbarV2Actions> | ||
| <ContextualbarV2Action | ||
| title='Title' | ||
| name='new-window' | ||
| onClick={action('click')} | ||
| /> | ||
| </ContextualbarV2Actions> | ||
| </ContextualbarV2Header> | ||
| <ContextualbarV2EmptyContent /> | ||
| <ContextualbarV2Footer>Footer</ContextualbarV2Footer> | ||
| </ContextualbarV2> | ||
| ); |
Oops, something went wrong.