-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feat/235-v5-new-tooltip-component
- Loading branch information
Showing
79 changed files
with
1,939 additions
and
1,385 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
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 |
|---|---|---|
| @@ -1,47 +1,43 @@ | ||
| import { Meta, Story, Canvas, Controls } from '@storybook/blocks' | ||
| import { Meta, Story, Canvas, Controls, Description | ||
| } from '@storybook/blocks' | ||
| import { RenderHtmlMarkup } from '../../storybook/render-html-markup' | ||
| import * as AvatarStories from './avatar.stories' | ||
|
|
||
| <Meta of={AvatarStories} /> | ||
|
|
||
| # Avatar | ||
|
|
||
| An avatar component to be used typically with a `Card` or `Nav` component. The default variant renders a circle with children. | ||
| <Description of={AvatarStories.Default} /> | ||
|
|
||
| There are multiple variants that can be used by utilizing the data props, such as size, colour, and shape (see the HTML version of React usage). In addition to text, it also accepts an Icon as a child. | ||
|
|
||
| ## Style Only Usage | ||
|
|
||
| <Canvas of={AvatarStories.StyleOnlyUsage} /> | ||
| <Controls /> | ||
|
|
||
| <RenderHtmlMarkup of={AvatarStories.StyleOnlyUsage} /> | ||
| ## Default | ||
|
|
||
| <Canvas of={AvatarStories.WithIconUsage} /> | ||
| <Canvas of={AvatarStories.Default} /> | ||
|
|
||
| <RenderHtmlMarkup of={AvatarStories.WithIconUsage} /> | ||
| <RenderHtmlMarkup of={AvatarStories.Default} /> | ||
|
|
||
| ## With Colour | ||
| ## Avatar with Icon | ||
|
|
||
| <Canvas of={AvatarStories.WithColour} /> | ||
| <Canvas of={AvatarStories.AvatarWithIcon} /> | ||
|
|
||
| <RenderHtmlMarkup of={AvatarStories.WithColour} /> | ||
| <RenderHtmlMarkup of={AvatarStories.AvatarWithIcon} /> | ||
|
|
||
| ## With Square Shape | ||
|
|
||
| <Canvas of={AvatarStories.WithSquareShape} /> | ||
| ## Avatar Colour | ||
|
|
||
| <RenderHtmlMarkup of={AvatarStories.WithSquareShape} /> | ||
| <Canvas of={AvatarStories.AvatarColour} /> | ||
|
|
||
| ## With Small Size | ||
| <RenderHtmlMarkup of={AvatarStories.AvatarColour} /> | ||
|
|
||
| <Canvas of={AvatarStories.WithSmallSize} /> | ||
| ## Avatar Shape | ||
|
|
||
| <RenderHtmlMarkup of={AvatarStories.WithSmallSize} /> | ||
| <Canvas of={AvatarStories.AvatarShape} /> | ||
|
|
||
| ## React Usage | ||
| <RenderHtmlMarkup of={AvatarStories.AvatarShape} /> | ||
|
|
||
| <Controls /> | ||
| ## Avatar Size | ||
|
|
||
| <Canvas of={AvatarStories.ReactUsage} /> | ||
| <Canvas of={AvatarStories.AvatarSize} /> | ||
|
|
||
| <RenderHtmlMarkup of={AvatarStories.ReactUsage} />WithColourWithColour | ||
| <RenderHtmlMarkup of={AvatarStories.AvatarSize} /> |
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 |
|---|---|---|
| @@ -1,49 +1,49 @@ | ||
| import type { StoryObj } from '@storybook/react' | ||
| import { Avatar, ElAvatar } from '.' | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import { Avatar } from '.' | ||
| import { Icon } from '../icon' | ||
|
|
||
| export default { | ||
| title: 'Components/Avatar', | ||
| component: Avatar, | ||
| } | ||
| args: { | ||
| children: 'AD', | ||
| }, | ||
| } as Meta<typeof Avatar> | ||
|
|
||
| export const StyleOnlyUsage = { | ||
| render: ({}) => <ElAvatar>AD</ElAvatar>, | ||
| } | ||
| type Story = StoryObj<typeof Avatar> | ||
|
|
||
| /** | ||
| * An avatar component to be used typically with a `Card` or `Nav` component. | ||
| * The default variant renders a circle with children. | ||
| * | ||
| * There are multiple variants that can be used by utilizing the `data-` props | ||
| * such as `size`, `colour`, and `shape` (see the HTML version of each version). | ||
| * In addition to text, it also accepts an Icon as a child. | ||
| */ | ||
| export const Default: Story = {} | ||
|
|
||
| export const WithIconUsage = { | ||
| render: ({}) => ( | ||
| <ElAvatar> | ||
| export const AvatarWithIcon: Story = { | ||
| render: (props) => ( | ||
| <Avatar {...props}> | ||
| <Icon icon="contact" /> | ||
| </ElAvatar> | ||
| </Avatar> | ||
| ), | ||
| } | ||
|
|
||
| export const WithColour = { | ||
| render: ({}) => <ElAvatar data-colour="purple">AD</ElAvatar>, | ||
| name: 'Colour: Purple', | ||
| } | ||
|
|
||
| export const WithSquareShape = { | ||
| render: ({}) => <ElAvatar data-shape="square">AD</ElAvatar>, | ||
| name: 'Shape: Square', | ||
| export const AvatarColour: Story = { | ||
| args: { | ||
| colour: 'purple', | ||
| }, | ||
| } | ||
|
|
||
| export const WithSmallSize = { | ||
| render: ({}) => ( | ||
| <ElAvatar data-size="small"> | ||
| <Icon icon="contact" /> | ||
| </ElAvatar> | ||
| ), | ||
| name: 'Size: Small', | ||
| export const AvatarShape: Story = { | ||
| args: { | ||
| shape: 'square', | ||
| }, | ||
| } | ||
|
|
||
| export const ReactUsage: StoryObj<typeof Avatar> = { | ||
| export const AvatarSize: Story = { | ||
| args: { | ||
| shape: 'circle', | ||
| size: 'medium', | ||
| colour: 'default', | ||
| children: 'AD', | ||
| size: 'small', | ||
| }, | ||
| render: (props) => <Avatar {...props}>{props.children}</Avatar>, | ||
| } |
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
Oops, something went wrong.