From 0e528b904c115450d6d807818d527419501fe0d8 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Tue, 7 Nov 2023 14:20:49 +0100 Subject: [PATCH 01/19] fix(.idea): Enable stylelint and disable scss/css in prettier --- .idea/inspectionProfiles/Project_Default.xml | 1 + .idea/prettier.xml | 5 ++--- packages/styles/.stylelintrc | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml index 03d9549ea8..7c4836fbe3 100644 --- a/.idea/inspectionProfiles/Project_Default.xml +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -2,5 +2,6 @@ \ No newline at end of file diff --git a/.idea/prettier.xml b/.idea/prettier.xml index 459e2b9a5b..aa6e1c8b9a 100644 --- a/.idea/prettier.xml +++ b/.idea/prettier.xml @@ -3,7 +3,6 @@ - + \ No newline at end of file diff --git a/packages/styles/.stylelintrc b/packages/styles/.stylelintrc index afc29c9fc2..3ac42097d2 100644 --- a/packages/styles/.stylelintrc +++ b/packages/styles/.stylelintrc @@ -10,6 +10,7 @@ "selector-max-id": 1, "selector-no-qualifying-type": [true, { "ignore": ["attribute", "class"] }], "function-url-quotes": null, - "scss/dollar-variable-colon-space-after": "always-single-line" + "scss/dollar-variable-colon-space-after": "always-single-line", + "order/properties-alphabetical-order": false } } From 2329510b124de3a0418b885c04113c67a0b68ad7 Mon Sep 17 00:00:00 2001 From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com> Date: Tue, 7 Nov 2023 14:28:38 +0100 Subject: [PATCH 02/19] feat(documentation): add visual regression test for select, input and textarea component (#1899) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: b1aserlu <141234680+b1aserlu@users.noreply.github.com> Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Co-authored-by: Oliver Schürch --- .../snapshots/components/select.snapshot.ts | 15 +- .../snapshots/components/textarea.snapshot.ts | 7 + .../select/select.snapshot.stories.ts | 193 +++++++----------- .../components/select/select.stories.ts | 11 +- .../textarea/textarea.snapshot.stories.ts | 71 +++++++ .../components/textarea/textarea.stories.ts | 3 +- 6 files changed, 179 insertions(+), 121 deletions(-) create mode 100644 packages/documentation/cypress/snapshots/components/textarea.snapshot.ts create mode 100644 packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts diff --git a/packages/documentation/cypress/snapshots/components/select.snapshot.ts b/packages/documentation/cypress/snapshots/components/select.snapshot.ts index 107354d6e7..d4baa0ffd1 100644 --- a/packages/documentation/cypress/snapshots/components/select.snapshot.ts +++ b/packages/documentation/cypress/snapshots/components/select.snapshot.ts @@ -1,7 +1,14 @@ +const SELECTBASEURL = '/iframe.html?id=snapshots--select'; +const multiple = ['default', 'multiple']; + describe('Select', () => { - it('default', () => { - cy.visit('/iframe.html?id=snapshots--select'); - cy.get('.form-select', { timeout: 30000 }).should('be.visible'); - cy.percySnapshot('Selects', { widths: [400] }); + describe('multiple', () => { + multiple.forEach(multiple => { + it(multiple, () => { + cy.visit(`${SELECTBASEURL}${multiple}`); + cy.percySnapshot(`Selects-${multiple}`, { widths: [400] }); + }); + }); + }); }); diff --git a/packages/documentation/cypress/snapshots/components/textarea.snapshot.ts b/packages/documentation/cypress/snapshots/components/textarea.snapshot.ts new file mode 100644 index 0000000000..bf29cb92f0 --- /dev/null +++ b/packages/documentation/cypress/snapshots/components/textarea.snapshot.ts @@ -0,0 +1,7 @@ +describe('Textarea', () => { + it('default', () => { + cy.visit('./iframe.html?id=snapshots--textarea'); + cy.percySnapshot('Textareas', { widths: [400] }); + }); + }); + \ No newline at end of file diff --git a/packages/documentation/src/stories/components/select/select.snapshot.stories.ts b/packages/documentation/src/stories/components/select/select.snapshot.stories.ts index e3c3abc527..e8f002e208 100644 --- a/packages/documentation/src/stories/components/select/select.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/select/select.snapshot.stories.ts @@ -1,128 +1,91 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Default, FloatingLabel, FloatingLabelPlaceholder } from './select.stories'; import { html } from 'lit'; -import { bombArgs } from '../../../utils/bombArgs'; +import { getCombinations, COMBINATIONS } from '../../../utils/inputComponentsGetCombinations'; export default { ...meta, title: 'Snapshots', + render: renderSelectSnapshot, }; -type Story = StoryObj; - -export const Select: Story = { - render: (_args: Args, context: StoryContext) => { - //Arguments for Default Version - const bombArgsGeneratedDefault = [ - ...bombArgs({ - label: [ - context.args.label, - 'Label - Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor', - ], - hint: [''], - }), - ...bombArgs({ - hiddenLabel: [true], - hint: ['Hintus textus', context.args.hint], - }), - ...bombArgs({ - size: context.argTypes.size.options, - disabled: [false, true], - validation: context.argTypes.validation.options, - }), - ] - // remove disabled & validated examples - .filter((args: Args) => !(args.disabled && args.validation !== 'null')); +function renderSelectSnapshot(_args: Args, context: StoryContext) { + const combinations = [ + ...COMBINATIONS, + { + label: `Label - small multipleSize`, + multipleSize: 2, + }, + { + label: `Label - large multipleSize`, + multipleSize: 6, + }, + { + label: `Label - With option selected`, + selectedOption: 2, + }, + { + label: `Label - Floating Label with placeholder`, + floatingLabelPlaceholder: true, + }, + ]; + return html` +
+ ${['bg-white', 'bg-dark'].map( + bg => html` +
+

Sizes

+ ${getCombinations('size', context.argTypes.size.options, combinations) + .filter( + (args: Args) => + (!args.multipleSize || (args.multipleSize && context.args.multiple === true)) && + !args.floatingLabelPlaceholder, + ) + .map( + (args: Args) => + html` +
+ ${args.title !== undefined && args.title + ? html` +

+ ${Object.entries(context.argTypes.size.control.labels) + .filter(([key, value]) => key === args.size) + .map(s => s[1])} +

+ ` + : ''} +
${Default.render?.({ ...context.args, ...args }, context)}
+
+ `, + )} +

Floating Label

+ ${getCombinations('floatingLabel', [true], combinations) + .filter( + (args: Args) => + !args.multipleSize || (args.multipleSize && context.args.multiple === true), + ) + .map( + (args: Args) => + html` +
${FloatingLabel.render?.({ ...context.args, ...args }, context)}
+ `, + )} +
+ `, + )} +
+ `; +} - //Arguments for Multiple Version - const bombArgsGeneratedMultiple = [ - ...bombArgs({ - multiple: [true], - label: [ - context.args.label, - 'Label - Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor', - ], - hint: [''], - }), - ...bombArgs({ - multiple: [true], - hiddenLabel: [true], - hint: ['', 'Hintus textus', context.args.hint], - }), - ...bombArgs({ - multiple: [true], - size: context.argTypes.size.options, - disabled: [false, true], - validation: context.argTypes.validation.options, - }), - ] - // remove disabled & validated examples - .filter((args: Args) => !(args.disabled && args.validation !== 'null')); +type Story = StoryObj; - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => - html` -
-

Default

- ${bombArgsGeneratedDefault.map( - (args: Args) => - html` -
- ${Default.render?.({ ...context.args, ...Default.args, ...args }, context)} -
- `, - )} -

Floating Label

- ${bombArgsGeneratedDefault.map( - (args: Args) => - html` -
- ${FloatingLabel.render?.( - { ...context.args, ...FloatingLabel.args, ...args }, - context, - )} -
- `, - )} -

Floating Label - with placeholder

- ${bombArgsGeneratedDefault.map( - (args: Args) => - html` -
- ${FloatingLabelPlaceholder.render?.( - { ...context.args, ...FloatingLabelPlaceholder.args, ...args }, - context, - )} -
- `, - )} -

Multiple - Default

- ${bombArgsGeneratedMultiple.map( - (args: Args) => - html` -
- ${Default.render?.({ ...context.args, ...Default.args, ...args }, context)} -
- `, - )} -

Multiple - Floating Label

- ${bombArgsGeneratedMultiple.map( - (args: Args) => - html` -
- ${FloatingLabel.render?.( - { ...context.args, ...FloatingLabel.args, ...args }, - context, - )} -
- `, - )} -
- `, - )} -
- `; +export const Selectdefault: Story = { + args: { + multiple: false, + }, +}; +export const Selectmultiple: Story = { + args: { + multiple: true, }, }; diff --git a/packages/documentation/src/stories/components/select/select.stories.ts b/packages/documentation/src/stories/components/select/select.stories.ts index 8281b8aa49..4e16df4135 100644 --- a/packages/documentation/src/stories/components/select/select.stories.ts +++ b/packages/documentation/src/stories/components/select/select.stories.ts @@ -243,7 +243,16 @@ const Template: Story = { updateArgs({ value: (e.target as HTMLSelectElement).value }); }}" > - ${options} + ${[ + options[0], + options.slice(1).map( + (option, index) => html` + + `, + ), + ]} `; diff --git a/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts new file mode 100644 index 0000000000..927c5f271b --- /dev/null +++ b/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts @@ -0,0 +1,71 @@ +import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; +import meta from './textarea.stories'; +import { html } from 'lit'; +import { getCombinations, COMBINATIONS } from '../../../utils/inputComponentsGetCombinations'; + +export default { + ...meta, + title: 'Snapshots', +}; + +type Story = StoryObj; + +export const Textarea: Story = { + render: (_args: Args, context: StoryContext) => { + const combinations = [ + ...COMBINATIONS, + { + label: `Label - small rows`, + rows: 3, + }, + { + label: `Label - large rows`, + rows: 8, + }, + { + label: `Label - Text inside the Textarea`, + textInside: + 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.', + },{ + label: `Label - Not resizable`, + resize: 'resize: none' + } + ]; + + return html` +
+ ${['bg-white', 'bg-dark'].map( + bg => html` +
+

Sizes

+ ${getCombinations('size', context.argTypes.size.options, combinations).map( + (args: Args) => + html` +
+ ${args.title !== undefined && args.title + ? html` +

+ ${Object.entries(context.argTypes.size.control.labels) + .filter(([key, value]) => key === args.size) + .map(s => s[1])} +

+ ` + : ''} +
${meta.render?.({ ...context.args, ...args }, context)}
+
+ `, + )} +

Floating Label

+ ${getCombinations('floatingLabel', [true], combinations).map( + (args: Args) => + html` +
${meta.render?.({ ...context.args, ...args }, context)}
+ `, + )} +
+ `, + )} +
+ `; + }, +}; diff --git a/packages/documentation/src/stories/components/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.stories.ts index 63fe82ba98..367f243cc3 100644 --- a/packages/documentation/src/stories/components/textarea/textarea.stories.ts +++ b/packages/documentation/src/stories/components/textarea/textarea.stories.ts @@ -199,7 +199,8 @@ function renderTextarea(args: Args, context: StoryContext) { ?disabled=${args.disabled} aria-label=${useAriaLabel ? args.label : nothing} aria-invalid=${VALIDATION_STATE_MAP[args.validation] ?? nothing} - > + style=${args.resize ?? nothing} + >${args.textInside ?? nothing} `; if (args.floatingLabel) { return html` From 1788527329f4f289af291eebbb2341b6c9824616 Mon Sep 17 00:00:00 2001 From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com> Date: Tue, 7 Nov 2023 14:59:37 +0100 Subject: [PATCH 03/19] feat(documentation): Improve this page links should point to exact file on GitHub (#2132) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .../.storybook/blocks/footer.tsx | 106 ++++++++++-------- .../.storybook/blocks/layout.tsx | 3 +- 2 files changed, 60 insertions(+), 49 deletions(-) diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx index 27a3e344d3..4475b58911 100644 --- a/packages/documentation/.storybook/blocks/footer.tsx +++ b/packages/documentation/.storybook/blocks/footer.tsx @@ -29,59 +29,69 @@ const DEVELOPERS: Developer[] = [ }, ]; -export default () => ( - + + ); diff --git a/packages/documentation/.storybook/blocks/layout.tsx b/packages/documentation/.storybook/blocks/layout.tsx index 7f3813c8b3..f6708bedfe 100644 --- a/packages/documentation/.storybook/blocks/layout.tsx +++ b/packages/documentation/.storybook/blocks/layout.tsx @@ -18,12 +18,13 @@ export default (props: PropsWithChildren) => { context.channel.data.docsPrepared[0].parameters.layout === 'fullscreen' ? 'container-fluid' : 'container'; + const pathToStoryFile = context.storyIdToCSFFile.values().next().value.meta.parameters.fileName; return ( {shouldShowHeader() &&
}
{children}
- {shouldShowFooter() &&