Skip to content

Commit

Permalink
feat(PPDSC-2151): add outline override examples (#243)
Browse files Browse the repository at this point in the history 
* feat(PPDSC-2151): add outline override examples

* feat(PPDSC-2151): change ids to fix a11y tests
  • Loading branch information
@tbradbury
tbradbury authored Jun 30, 2022
1 parent 4c052ef commit d40f53c
Show file tree
Hide file tree
Showing 13 changed files with 1,743 additions and 10 deletions.
154 changes: 154 additions & 0 deletions src/accordion/__tests__/accordion.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,66 @@ const myCustomAccordionTheme = createTheme({
iconColor: '{{colors.inkInverse}}',
},
},
customOutlineColor: {
base: {
backgroundColor: '{{colors.interface010}}',
color: '{{colors.inkBase}}',
borderStyle: 'none none solid none',
borderColor: '{{colors.interface050}}',
borderWidth: '{{borders.borderWidth010}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: '{{outlines.outlineStyleDefault}}',
outlineWidth: '{{outlines.outlineWidthDefault}}',
outlineOffset: '{{outlines.outlineOffsetDefault}}',
},
},
customOutlineStyle: {
base: {
backgroundColor: '{{colors.interface010}}',
color: '{{colors.inkBase}}',
borderStyle: 'none none solid none',
borderColor: '{{colors.interface050}}',
borderWidth: '{{borders.borderWidth010}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: 'dotted',
outlineWidth: '{{outlines.outlineWidthDefault}}',
outlineOffset: '{{outlines.outlineOffsetDefault}}',
},
},
customOutlineWidth: {
base: {
backgroundColor: '{{colors.interface010}}',
color: '{{colors.inkBase}}',
borderStyle: 'none none solid none',
borderColor: '{{colors.interface050}}',
borderWidth: '{{borders.borderWidth010}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: 'dotted',
outlineWidth: '5px',
outlineOffset: '{{outlines.outlineOffsetDefault}}',
},
},
customOutlineOffset: {
base: {
backgroundColor: '{{colors.interface010}}',
color: '{{colors.inkBase}}',
borderStyle: 'none none solid none',
borderColor: '{{colors.interface050}}',
borderWidth: '{{borders.borderWidth010}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: 'dotted',
outlineWidth: '5px',
outlineOffset: '5px',
},
},
},
},
});
Expand Down Expand Up @@ -356,3 +416,97 @@ export const StoryAccordionGroupControlled = () => {
);
};
StoryAccordionGroupControlled.storyName = 'accordion-group-controlled';

export const StoryAccordionOutlineOverrides = () => (
<>
<ThemeProvider theme={myCustomAccordionTheme}>
<StorybookSubHeading>Accordion Outline Overrides</StorybookSubHeading>
<Spacer>
<Accordion
header={
<StyledBlock>
<IconFilledAccountBalance
overrides={{size: 'iconSize020', marginInlineEnd: '8px'}}
/>
Custom Color
</StyledBlock>
}
label="Hide"
expanded
overrides={{
header: {
stylePreset: 'customOutlineColor',
},
}}
>
{content}
</Accordion>
</Spacer>
<Spacer>
<Accordion
header={
<StyledBlock>
<IconFilledAccountBalance
overrides={{size: 'iconSize020', marginInlineEnd: '8px'}}
/>
Custom Style
</StyledBlock>
}
label="Hide"
expanded
overrides={{
header: {
stylePreset: 'customOutlineStyle',
},
}}
>
{content}
</Accordion>
</Spacer>
<Spacer>
<Accordion
header={
<StyledBlock>
<IconFilledAccountBalance
overrides={{size: 'iconSize020', marginInlineEnd: '8px'}}
/>
Custom Width
</StyledBlock>
}
label="Hide"
expanded
overrides={{
header: {
stylePreset: 'customOutlineWidth',
},
}}
>
{content}
</Accordion>
</Spacer>
<Spacer>
<Accordion
header={
<StyledBlock>
<IconFilledAccountBalance
overrides={{size: 'iconSize020', marginInlineEnd: '8px'}}
/>
Custom Offset
</StyledBlock>
}
label="Hide"
expanded
overrides={{
header: {
stylePreset: 'customOutlineOffset',
},
}}
>
{content}
</Accordion>
</Spacer>
</ThemeProvider>
</>
);

StoryAccordionOutlineOverrides.storyName = 'accordion-with-outline-overrides';
81 changes: 81 additions & 0 deletions src/button/__tests__/button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,62 @@ const myCustomTheme = createTheme({
backgroundColor: 'transparent',
},
},
customOutlineColor: {
base: {
backgroundColor: '{{colors.interactivePrimary030}}',
borderRadius: '{{borders.borderRadiusDefault}}',
color: '{{colors.inkInverse}}',
iconColor: '{{colors.inkInverse}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: '{{outlines.outlineStyleDefault}}',
outlineWidth: '{{outlines.outlineWidthDefault}}',
outlineOffset: '{{outlines.outlineOffsetDefault}}',
},
},
customOutlineStyle: {
base: {
backgroundColor: '{{colors.interactivePrimary030}}',
borderRadius: '{{borders.borderRadiusDefault}}',
color: '{{colors.inkInverse}}',
iconColor: '{{colors.inkInverse}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: 'dotted',
outlineWidth: '{{outlines.outlineWidthDefault}}',
outlineOffset: '{{outlines.outlineOffsetDefault}}',
},
},
customOutlineWidth: {
base: {
backgroundColor: '{{colors.interactivePrimary030}}',
borderRadius: '{{borders.borderRadiusDefault}}',
color: '{{colors.inkInverse}}',
iconColor: '{{colors.inkInverse}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: 'dotted',
outlineWidth: '5px',
outlineOffset: '{{outlines.outlineOffsetDefault}}',
},
},
customOutlineOffset: {
base: {
backgroundColor: '{{colors.interactivePrimary030}}',
borderRadius: '{{borders.borderRadiusDefault}}',
color: '{{colors.inkInverse}}',
iconColor: '{{colors.inkInverse}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: 'dotted',
outlineWidth: '5px',
outlineOffset: '5px',
},
},
},
},
});
Expand Down Expand Up @@ -633,3 +689,28 @@ export const StoryButtonWithTransitions = () => (
</>
);
StoryButtonWithTransitions.storyName = 'button-with-transition';

export const StoryButtonWithOutlineOverride = () => (
<>
<StorybookSubHeading>Button with custom outline</StorybookSubHeading>
<ThemeProvider theme={myCustomTheme}>
<StorybookSubHeading>Custom Color</StorybookSubHeading>
<Container>
<Button overrides={{stylePreset: 'customOutlineColor'}}>Button</Button>
</Container>
<StorybookSubHeading>Custom Style</StorybookSubHeading>
<Container>
<Button overrides={{stylePreset: 'customOutlineStyle'}}>Button</Button>
</Container>
<StorybookSubHeading>Custom Width</StorybookSubHeading>
<Container>
<Button overrides={{stylePreset: 'customOutlineWidth'}}>Button</Button>
</Container>
<StorybookSubHeading>Custom Offset</StorybookSubHeading>
<Container>
<Button overrides={{stylePreset: 'customOutlineOffset'}}>Button</Button>
</Container>
</ThemeProvider>
</>
);
StoryButtonWithOutlineOverride.storyName = 'button-with-outline-overrides';
110 changes: 108 additions & 2 deletions src/checkbox/__tests__/checkbox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
} from '../..';
import {CheckboxIconProps} from '../types';
import {states, sizes} from './helpers';
import {defaultFocusVisible} from '../../utils/default-focus-visible';

const myCustomTheme = compileTheme(
createTheme({
Expand All @@ -35,7 +34,6 @@ const myCustomTheme = compileTheme(
hover: {
backgroundColor: 'blue',
},
'focus-visible': defaultFocusVisible,
},
customCheckboxFeedback: {
base: {
Expand All @@ -49,6 +47,70 @@ const myCustomTheme = compileTheme(
iconColor: '{{colors.inkInverse}}',
},
},
customOutlineColor: {
base: {
backgroundColor: '{{colors.interactiveInput010}}',
borderColor: '{{colors.interactiveInput020}}',
borderWidth: '{{borders.borderWidth020}}',
borderRadius: '{{borders.borderRadiusRounded010}}',
borderStyle: 'solid',
iconColor: '{{colors.inkInverse}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: '{{outlines.outlineStyleDefault}}',
outlineWidth: '{{outlines.outlineWidthDefault}}',
outlineOffset: '{{outlines.outlineOffsetDefault}}',
},
},
customOutlineStyle: {
base: {
backgroundColor: '{{colors.interactiveInput010}}',
borderColor: '{{colors.interactiveInput020}}',
borderWidth: '{{borders.borderWidth020}}',
borderRadius: '{{borders.borderRadiusRounded010}}',
borderStyle: 'solid',
iconColor: '{{colors.inkInverse}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: 'dotted',
outlineWidth: '{{outlines.outlineWidthDefault}}',
outlineOffset: '{{outlines.outlineOffsetDefault}}',
},
},
customOutlineWidth: {
base: {
backgroundColor: '{{colors.interactiveInput010}}',
borderColor: '{{colors.interactiveInput020}}',
borderWidth: '{{borders.borderWidth020}}',
borderRadius: '{{borders.borderRadiusRounded010}}',
borderStyle: 'solid',
iconColor: '{{colors.inkInverse}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: 'dotted',
outlineWidth: '5px',
outlineOffset: '{{outlines.outlineOffsetDefault}}',
},
},
customOutlineOffset: {
base: {
backgroundColor: '{{colors.interactiveInput010}}',
borderColor: '{{colors.interactiveInput020}}',
borderWidth: '{{borders.borderWidth020}}',
borderRadius: '{{borders.borderRadiusRounded010}}',
borderStyle: 'solid',
iconColor: '{{colors.inkInverse}}',
},
'focus-visible': {
outlineColor: 'red',
outlineStyle: 'dotted',
outlineWidth: '5px',
outlineOffset: '5px',
},
},
},
},
}),
Expand Down Expand Up @@ -293,3 +355,47 @@ export const StoryCheckboxTransitions = () => (
);

StoryCheckboxTransitions.storyName = 'checkbox-transitions';

export const StoryCheckboxOutlineOverride = () => (
<ThemeProvider theme={myCustomTheme}>
<StorybookSubHeading>Checkbox Outline override</StorybookSubHeading>
<Container>
<GridLayout rowGap="space040">
<Checkbox
overrides={{
input: {
stylePreset: 'customOutlineColor',
},
}}
label="Custom Color"
/>
<Checkbox
overrides={{
input: {
stylePreset: 'customOutlineStyle',
},
}}
label="Custom Style"
/>
<Checkbox
overrides={{
input: {
stylePreset: 'customOutlineWidth',
},
}}
label="Custom Width"
/>
<Checkbox
overrides={{
input: {
stylePreset: 'customOutlineOffset',
},
}}
label="Custom Offset"
/>
</GridLayout>
</Container>
</ThemeProvider>
);

StoryCheckboxOutlineOverride.storyName = 'checkbox-outline-override';
Loading

0 comments on commit d40f53c

Please sign in to comment.