-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(pie-tag): DSW-1520 tag component functionality
- Loading branch information
Showing
17 changed files
with
604 additions
and
74 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 @@ | ||
--- | ||
"@justeattakeaway/pie-webc-testing": minor | ||
--- | ||
|
||
[Added] getShadowElementStylePropValues helper function |
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 @@ | ||
--- | ||
"@justeattakeaway/pie-button": minor | ||
--- | ||
|
||
[Removed] getShadowElementStylePropValues function from button component test to pie-webc-testing helpers |
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 @@ | ||
--- | ||
"@justeattakeaway/pie-icons-webc": minor | ||
--- | ||
|
||
[Added] :host-context(pie-tag) svg styles |
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 @@ | ||
--- | ||
"@justeattakeaway/pie-tag": minor | ||
--- | ||
|
||
[Added] Tag component functionality |
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,40 @@ | ||
import * as TagStories from '../pie-tag.stories.ts' | ||
import { Meta, Canvas } from '@storybook/blocks'; | ||
|
||
<Meta of={TagStories} /> | ||
|
||
### Neutral | ||
|
||
<Canvas of={TagStories.Neutral} /> | ||
|
||
### Blue | ||
|
||
<Canvas of={TagStories.Blue} /> | ||
|
||
### Green | ||
|
||
<Canvas of={TagStories.Green} /> | ||
|
||
### Yellow | ||
|
||
<Canvas of={TagStories.Yellow} /> | ||
|
||
### Red | ||
|
||
<Canvas of={TagStories.Red} /> | ||
|
||
### Brand | ||
|
||
<Canvas of={TagStories.Brand} /> | ||
|
||
### Neutral Alternative | ||
|
||
<Canvas of={TagStories.NeutralAlternative} /> | ||
|
||
### Outline | ||
|
||
<Canvas of={TagStories.Outline} /> | ||
|
||
### Ghost | ||
|
||
<Canvas of={TagStories.Ghost} /> |
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,36 +1,118 @@ | ||
import { html } from 'lit'; | ||
import { html, nothing } from 'lit'; | ||
|
||
/* eslint-disable import/no-duplicates */ | ||
import '@justeattakeaway/pie-tag'; | ||
import { TagProps } from '@justeattakeaway/pie-tag'; | ||
import { | ||
TagProps as TagBaseProps, variants, sizes, | ||
} from '@justeattakeaway/pie-tag'; | ||
/* eslint-enable import/no-duplicates */ | ||
import '@justeattakeaway/pie-icons-webc/IconHeartFilled'; | ||
|
||
import { type StoryMeta } from '../types'; | ||
import { createStory } from '../utilities'; | ||
import type { StoryMeta, SlottedComponentProps } from '../types'; | ||
import { createStory, type TemplateFunction } from '../utilities'; | ||
|
||
type TagProps = SlottedComponentProps<TagBaseProps>; | ||
type TagStoryMeta = StoryMeta<TagProps>; | ||
|
||
const defaultArgs: TagProps = {}; | ||
const defaultArgs: TagProps = { | ||
variant: 'neutral', | ||
size: 'large', | ||
isStrong: false, | ||
showIcon: false, | ||
slot: 'Label', | ||
}; | ||
|
||
const tagStoryMeta: TagStoryMeta = { | ||
title: 'Tag', | ||
component: 'pie-tag', | ||
argTypes: {}, | ||
argTypes: { | ||
variant: { | ||
description: 'Set the variant of the tag.', | ||
control: 'select', | ||
options: variants, | ||
defaultValue: { | ||
summary: 'neutral', | ||
}, | ||
}, | ||
size: { | ||
description: 'Set the size of the tag.', | ||
control: 'select', | ||
options: sizes, | ||
defaultValue: { | ||
summary: 'large', | ||
}, | ||
}, | ||
isStrong: { | ||
description: 'If `true`, displays strong tag styles for some of the variant', | ||
control: 'boolean', | ||
defaultValue: { | ||
summary: false, | ||
}, | ||
}, | ||
showIcon: { | ||
description: 'Enable to see the example of Tag with icon. Available only for large tag size.', | ||
control: 'boolean', | ||
defaultValue: { | ||
summary: false, | ||
}, | ||
if: { arg: 'size', eq: 'large' }, | ||
}, | ||
}, | ||
args: defaultArgs, | ||
parameters: { | ||
design: { | ||
type: 'figma', | ||
url: '', | ||
url: 'https://www.figma.com/file/OOgnT2oNMdGFytj5AanYvt/branch/QGEtmJqZM3OL9QG33L4053/%E2%9D%8C-%5BBETA%5D-%5BCore%5D-Component-Documentation-%5BPIE-3%5D-%E2%9D%8C?type=design&node-id=419-62146&mode=design', | ||
}, | ||
}, | ||
}; | ||
|
||
export default tagStoryMeta; | ||
|
||
// TODO: remove the eslint-disable rule when props are added | ||
// eslint-disable-next-line no-empty-pattern | ||
const Template = ({}: TagProps) => html` | ||
<pie-tag></pie-tag> | ||
const Template : TemplateFunction<TagProps> = ({ | ||
variant, | ||
size, | ||
isStrong, | ||
showIcon, | ||
slot, | ||
}) => html` | ||
<pie-tag | ||
variant="${variant}" | ||
size="${size}" | ||
?isStrong="${isStrong}"> | ||
${showIcon ? html`<icon-heart-filled slot="icon"></icon-heart-filled>` : nothing} | ||
${slot} | ||
</pie-tag> | ||
`; | ||
|
||
export const Default = createStory<TagProps>(Template, defaultArgs)(); | ||
const createTagStory = createStory<TagProps>(Template, defaultArgs); | ||
|
||
export const Default = createTagStory(); | ||
export const Neutral = createTagStory({ variant: 'neutral' }); | ||
export const Blue = createTagStory({ variant: 'blue' }); | ||
export const Green = createTagStory({ variant: 'green' }); | ||
export const Yellow = createTagStory({ variant: 'yellow' }); | ||
export const Red = createTagStory({ variant: 'red' }); | ||
|
||
// For the following stories isStrong prop won't have any effect so it is excluded | ||
export const Brand = createTagStory({ variant: 'brand' }, { | ||
controls: { | ||
exclude: ['isStrong'], | ||
}, | ||
}); | ||
export const NeutralAlternative = createTagStory({ variant: 'neutral-alternative' }, { | ||
bgColor: 'dark (container-dark)', | ||
controls: { | ||
exclude: ['isStrong'], | ||
}, | ||
}); | ||
export const Outline = createTagStory({ variant: 'outline' }, { | ||
controls: { | ||
exclude: ['isStrong'], | ||
}, | ||
}); | ||
export const Ghost = createTagStory({ variant: 'ghost' }, { | ||
controls: { | ||
exclude: ['isStrong'], | ||
}, | ||
}); |
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,3 +1,19 @@ | ||
// TODO - please remove the eslint disable comment below when you add props to this interface | ||
// eslint-disable-next-line @typescript-eslint/no-empty-interface | ||
export interface TagProps {} | ||
export const variants = ['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand'] as const; | ||
export const sizes = ['small', 'large'] as const; | ||
|
||
export interface TagProps { | ||
/** | ||
* What style variant the tag should be such as neutral/ghost etc. | ||
*/ | ||
variant: typeof variants[number]; | ||
|
||
/** | ||
* When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder | ||
*/ | ||
isStrong: boolean; | ||
|
||
/** | ||
* What size the tag should be. | ||
*/ | ||
size: typeof sizes[number]; | ||
} |
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.