diff --git a/.github/ISSUE_TEMPLATE/contributing-request.yml b/.github/ISSUE_TEMPLATE/contributing-request.yml index 91d66e3630..8f69342294 100644 --- a/.github/ISSUE_TEMPLATE/contributing-request.yml +++ b/.github/ISSUE_TEMPLATE/contributing-request.yml @@ -60,7 +60,7 @@ body: label: Please describe the required properties (with type and value) for the component value: | Example: - variant (string): "primary" | "secondary" | "tertiary" | "transparent" + variant (string): "primary" | "secondary" | "accent" | "transparent" size (string): "s" | "m" | "l" - type: textarea id: markup-proposal diff --git a/src/elements/button.ts b/src/elements/button.ts index aca4df253d..e899e62b99 100644 --- a/src/elements/button.ts +++ b/src/elements/button.ts @@ -1,15 +1,15 @@ export * from './button/button.js'; export * from './button/secondary-button.js'; -export * from './button/tertiary-button.js'; +export * from './button/accent-button.js'; export * from './button/transparent-button.js'; export * from './button/mini-button.js'; export * from './button/mini-button-group.js'; export * from './button/button-link.js'; export * from './button/secondary-button-link.js'; -export * from './button/tertiary-button-link.js'; +export * from './button/accent-button-link.js'; export * from './button/transparent-button-link.js'; export * from './button/button-static.js'; export * from './button/secondary-button-static.js'; -export * from './button/tertiary-button-static.js'; +export * from './button/accent-button-static.js'; export * from './button/transparent-button-static.js'; export * from './button/common.js'; diff --git a/src/elements/button/accent-button-link.ts b/src/elements/button/accent-button-link.ts new file mode 100644 index 0000000000..9be40bfac8 --- /dev/null +++ b/src/elements/button/accent-button-link.ts @@ -0,0 +1 @@ +export * from './accent-button-link/accent-button-link.js'; diff --git a/src/elements/button/accent-button-link/__snapshots__/accent-button-link.snapshot.spec.snap.js b/src/elements/button/accent-button-link/__snapshots__/accent-button-link.snapshot.spec.snap.js new file mode 100644 index 0000000000..112ba3d906 --- /dev/null +++ b/src/elements/button/accent-button-link/__snapshots__/accent-button-link.snapshot.spec.snap.js @@ -0,0 +1,114 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-accent-button-link renders a sbb-accent-button-link without icon DOM"] = +` + Label Text + +`; +/* end snapshot sbb-accent-button-link renders a sbb-accent-button-link without icon DOM */ + +snapshots["sbb-accent-button-link renders a sbb-accent-button-link without icon Shadow DOM"] = +` + + + + + + + + . Link target opens in a new window. + + +`; +/* end snapshot sbb-accent-button-link renders a sbb-accent-button-link without icon Shadow DOM */ + +snapshots["sbb-accent-button-link renders a disabled sbb-accent-button-link with slotted icon DOM"] = +` + + Label Text + +`; +/* end snapshot sbb-accent-button-link renders a disabled sbb-accent-button-link with slotted icon DOM */ + +snapshots["sbb-accent-button-link renders a disabled sbb-accent-button-link with slotted icon Shadow DOM"] = +` + + + + + + + +`; +/* end snapshot sbb-accent-button-link renders a disabled sbb-accent-button-link with slotted icon Shadow DOM */ + +snapshots["sbb-accent-button-link renders a sbb-accent-button-link without icon A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "Label Text . Link target opens in a new window." + } + ] +} +

+`; +/* end snapshot sbb-accent-button-link renders a sbb-accent-button-link without icon A11y tree Chrome */ + +snapshots["sbb-accent-button-link renders a sbb-accent-button-link without icon A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "link", + "name": "Label Text . Link target opens in a new window.", + "value": "https://www.sbb.ch/" + } + ] +} +

+`; +/* end snapshot sbb-accent-button-link renders a sbb-accent-button-link without icon A11y tree Firefox */ + diff --git a/src/elements/button/tertiary-button-link/tertiary-button-link.snapshot.spec.ts b/src/elements/button/accent-button-link/accent-button-link.snapshot.spec.ts similarity index 57% rename from src/elements/button/tertiary-button-link/tertiary-button-link.snapshot.spec.ts rename to src/elements/button/accent-button-link/accent-button-link.snapshot.spec.ts index d828680071..8483cde953 100644 --- a/src/elements/button/tertiary-button-link/tertiary-button-link.snapshot.spec.ts +++ b/src/elements/button/accent-button-link/accent-button-link.snapshot.spec.ts @@ -3,15 +3,15 @@ import { expect } from '@open-wc/testing'; import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; import { buttonLinkIconTestTemplate, buttonLinkTestTemplate } from '../common/button-test-utils.js'; -import type { SbbTertiaryButtonLinkElement } from './tertiary-button-link.js'; -import './tertiary-button-link.js'; +import type { SbbAccentButtonLinkElement } from './accent-button-link.js'; +import './accent-button-link.js'; -describe(`sbb-tertiary-button-link`, () => { - let element: SbbTertiaryButtonLinkElement; +describe(`sbb-accent-button-link`, () => { + let element: SbbAccentButtonLinkElement; - describe('renders a sbb-tertiary-button-link without icon', async () => { + describe('renders a sbb-accent-button-link without icon', async () => { beforeEach(async () => { - element = await fixture(buttonLinkTestTemplate('sbb-tertiary-button-link')); + element = await fixture(buttonLinkTestTemplate('sbb-accent-button-link')); }); it('DOM', async () => { @@ -25,9 +25,9 @@ describe(`sbb-tertiary-button-link`, () => { testA11yTreeSnapshot(); }); - describe('renders a disabled sbb-tertiary-button-link with slotted icon', async () => { + describe('renders a disabled sbb-accent-button-link with slotted icon', async () => { beforeEach(async () => { - element = await fixture(buttonLinkIconTestTemplate('sbb-tertiary-button-link')); + element = await fixture(buttonLinkIconTestTemplate('sbb-accent-button-link')); }); it('DOM', async () => { diff --git a/src/elements/button/accent-button-link/accent-button-link.ssr.spec.ts b/src/elements/button/accent-button-link/accent-button-link.ssr.spec.ts new file mode 100644 index 0000000000..7cf1e9f6ed --- /dev/null +++ b/src/elements/button/accent-button-link/accent-button-link.ssr.spec.ts @@ -0,0 +1,20 @@ +import { assert } from '@open-wc/testing'; +import { html } from 'lit'; + +import { ssrHydratedFixture } from '../../core/testing/private.js'; + +import { SbbAccentButtonLinkElement } from './accent-button-link.js'; + +describe(`sbb-accent-button-link ssr`, () => { + let root: SbbAccentButtonLinkElement; + + beforeEach(async () => { + root = await ssrHydratedFixture(html`Button`, { + modules: ['./accent-button-link.js'], + }); + }); + + it('renders', () => { + assert.instanceOf(root, SbbAccentButtonLinkElement); + }); +}); diff --git a/src/elements/button/tertiary-button-link/tertiary-button-link.stories.ts b/src/elements/button/accent-button-link/accent-button-link.stories.ts similarity index 93% rename from src/elements/button/tertiary-button-link/tertiary-button-link.stories.ts rename to src/elements/button/accent-button-link/accent-button-link.stories.ts index afe32da691..21d093d509 100644 --- a/src/elements/button/tertiary-button-link/tertiary-button-link.stories.ts +++ b/src/elements/button/accent-button-link/accent-button-link.stories.ts @@ -24,13 +24,13 @@ import { import readme from './readme.md?raw'; import '../../loading-indicator.js'; -import './tertiary-button-link.js'; +import './accent-button-link.js'; const defaultArgTypes: ArgTypes = { ...buttonLinkDefaultArgTypes }; const defaultArgs: Args = { ...buttonLinkDefaultArgs, - tag: 'sbb-tertiary-button-link', + tag: 'sbb-accent-button-link', }; export const Default: StoryObj = primary; @@ -62,7 +62,7 @@ const meta: Meta = { extractComponentDescription: () => readme, }, }, - title: 'elements/sbb-button/sbb-tertiary-button-link', + title: 'elements/sbb-button/sbb-accent-button-link', }; export default meta; diff --git a/src/elements/button/tertiary-button-link/tertiary-button-link.ts b/src/elements/button/accent-button-link/accent-button-link.ts similarity index 54% rename from src/elements/button/tertiary-button-link/tertiary-button-link.ts rename to src/elements/button/accent-button-link/accent-button-link.ts index fe9d4b5810..beff214188 100644 --- a/src/elements/button/tertiary-button-link/tertiary-button-link.ts +++ b/src/elements/button/accent-button-link/accent-button-link.ts @@ -3,25 +3,25 @@ import { customElement } from 'lit/decorators.js'; import { SbbLinkBaseElement } from '../../core/base-elements.js'; import { SbbDisabledInteractiveMixin, SbbDisabledMixin } from '../../core/mixins.js'; -import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common.js'; +import { buttonCommonStyle, buttonAccentStyle, SbbButtonCommonElementMixin } from '../common.js'; /** - * It displays a button enhanced with the SBB Design in the 'tertiary' variant, which will behave as a link. + * It displays a button enhanced with the SBB Design in the 'accent' variant, which will behave as a link. * - * @slot - Use the unnamed slot to add content to the tertiary-button-link. + * @slot - Use the unnamed slot to add content to the accent-button-link. * @slot icon - Slot used to display the icon, if one is set */ export -@customElement('sbb-tertiary-button-link') -class SbbTertiaryButtonLinkElement extends SbbButtonCommonElementMixin( +@customElement('sbb-accent-button-link') +class SbbAccentButtonLinkElement extends SbbButtonCommonElementMixin( SbbDisabledInteractiveMixin(SbbDisabledMixin(SbbLinkBaseElement)), ) { - public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTertiaryStyle]; + public static override styles: CSSResultGroup = [buttonCommonStyle, buttonAccentStyle]; } declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-tertiary-button-link': SbbTertiaryButtonLinkElement; + 'sbb-accent-button-link': SbbAccentButtonLinkElement; } } diff --git a/src/elements/button/tertiary-button-link/readme.md b/src/elements/button/accent-button-link/readme.md similarity index 78% rename from src/elements/button/tertiary-button-link/readme.md rename to src/elements/button/accent-button-link/readme.md index 3d08544f5d..07af0ddc07 100644 --- a/src/elements/button/tertiary-button-link/readme.md +++ b/src/elements/button/accent-button-link/readme.md @@ -1,31 +1,31 @@ -The `sbb-tertiary-button-link` component provides the same functionality as a native ``, -despite its appearance as a button enhanced with the SBB Design in the 'tertiary' variant. +The `sbb-accent-button-link` component provides the same functionality as a native ``, +despite its appearance as a button enhanced with the SBB Design in the 'accent' variant. ```html -Button text +Button text ``` ## Slots The text is provided via an unnamed slot; the component can optionally display a `sbb-icon` at the component start using the `iconName` property or via custom content using the `icon` slot. -At least one is mandatory, so you can have a `sbb-tertiary-button-link` with icon only, text only, or with both. +At least one is mandatory, so you can have a `sbb-accent-button-link` with icon only, text only, or with both. ```html - + Button text - + - + Button text - + - +> ``` ## Link properties @@ -34,12 +34,12 @@ The component is internally rendered as a link, accepting its associated properties (`href`, `target`, `rel` and `download`). ```html - Go to site - + ``` ## Style @@ -51,27 +51,27 @@ There are two different sizes (`m` and `l`, which is the default) that can be se The component can be displayed in `disabled` state using the self-named property. ```html -Button +Button -Button +Button -Button +Button ``` ### Focus outline Please make sure that the focus outline appears in the correct color if the component is used on a dark background. -You can set it by re-defining the css var on `sbb-tertiary-button-link` or any parent element: +You can set it by re-defining the css var on `sbb-accent-button-link` or any parent element: ```css -sbb-tertiary-button-link { +sbb-accent-button-link { --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark); } ``` ## Accessibility -Use the accessibility properties in case of an icon-only button to describe the purpose of the `sbb-tertiary-button-link` for screen-reader users. +Use the accessibility properties in case of an icon-only button to describe the purpose of the `sbb-accent-button-link` for screen-reader users. @@ -92,7 +92,7 @@ Use the accessibility properties in case of an icon-only button to describe the ## Slots -| Name | Description | -| ------ | ---------------------------------------------------------------- | -| | Use the unnamed slot to add content to the tertiary-button-link. | -| `icon` | Slot used to display the icon, if one is set | +| Name | Description | +| ------ | -------------------------------------------------------------- | +| | Use the unnamed slot to add content to the accent-button-link. | +| `icon` | Slot used to display the icon, if one is set | diff --git a/src/elements/button/accent-button-static.ts b/src/elements/button/accent-button-static.ts new file mode 100644 index 0000000000..915ad8487b --- /dev/null +++ b/src/elements/button/accent-button-static.ts @@ -0,0 +1 @@ +export * from './accent-button-static/accent-button-static.js'; diff --git a/src/elements/button/accent-button-static/__snapshots__/accent-button-static.snapshot.spec.snap.js b/src/elements/button/accent-button-static/__snapshots__/accent-button-static.snapshot.spec.snap.js new file mode 100644 index 0000000000..2c9cc10236 --- /dev/null +++ b/src/elements/button/accent-button-static/__snapshots__/accent-button-static.snapshot.spec.snap.js @@ -0,0 +1,93 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-accent-button-static renders without icon DOM"] = +` + Label Text + +`; +/* end snapshot sbb-accent-button-static renders without icon DOM */ + +snapshots["sbb-accent-button-static renders without icon Shadow DOM"] = +` + + + + + + + +`; +/* end snapshot sbb-accent-button-static renders without icon Shadow DOM */ + +snapshots["sbb-accent-button-static renders with slotted icon DOM"] = +` + + Label Text + +`; +/* end snapshot sbb-accent-button-static renders with slotted icon DOM */ + +snapshots["sbb-accent-button-static renders with slotted icon Shadow DOM"] = +` + + + + + + + +`; +/* end snapshot sbb-accent-button-static renders with slotted icon Shadow DOM */ + +snapshots["sbb-accent-button-static renders with slotted icon A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Label Text" + } + ] +} +

+`; +/* end snapshot sbb-accent-button-static renders with slotted icon A11y tree Chrome */ + +snapshots["sbb-accent-button-static renders with slotted icon A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Label Text " + } + ] +} +

+`; +/* end snapshot sbb-accent-button-static renders with slotted icon A11y tree Firefox */ + diff --git a/src/elements/button/tertiary-button-static/tertiary-button-static.snapshot.spec.ts b/src/elements/button/accent-button-static/accent-button-static.snapshot.spec.ts similarity index 73% rename from src/elements/button/tertiary-button-static/tertiary-button-static.snapshot.spec.ts rename to src/elements/button/accent-button-static/accent-button-static.snapshot.spec.ts index 07d6f2e682..d7ccadf0e4 100644 --- a/src/elements/button/tertiary-button-static/tertiary-button-static.snapshot.spec.ts +++ b/src/elements/button/accent-button-static/accent-button-static.snapshot.spec.ts @@ -3,16 +3,16 @@ import { expect } from '@open-wc/testing'; import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; import { buttonSlottedIconTestTemplate, buttonTestTemplate } from '../common/button-test-utils.js'; -import type { SbbTertiaryButtonStaticElement } from './tertiary-button-static.js'; +import type { SbbAccentButtonStaticElement } from './accent-button-static.js'; -import './tertiary-button-static.js'; +import './accent-button-static.js'; -describe(`sbb-tertiary-button-static`, () => { - let element: SbbTertiaryButtonStaticElement; +describe(`sbb-accent-button-static`, () => { + let element: SbbAccentButtonStaticElement; describe('renders without icon', async () => { beforeEach(async () => { - element = await fixture(buttonTestTemplate('sbb-tertiary-button-static', true)); + element = await fixture(buttonTestTemplate('sbb-accent-button-static', true)); }); it('DOM', async () => { @@ -26,7 +26,7 @@ describe(`sbb-tertiary-button-static`, () => { describe('renders with slotted icon', async () => { beforeEach(async () => { - element = await fixture(buttonSlottedIconTestTemplate('sbb-tertiary-button-static')); + element = await fixture(buttonSlottedIconTestTemplate('sbb-accent-button-static')); }); it('DOM', async () => { diff --git a/src/elements/button/tertiary-button-static/tertiary-button-static.spec.ts b/src/elements/button/accent-button-static/accent-button-static.spec.ts similarity index 61% rename from src/elements/button/tertiary-button-static/tertiary-button-static.spec.ts rename to src/elements/button/accent-button-static/accent-button-static.spec.ts index be675e0236..6a861e7802 100644 --- a/src/elements/button/tertiary-button-static/tertiary-button-static.spec.ts +++ b/src/elements/button/accent-button-static/accent-button-static.spec.ts @@ -5,18 +5,18 @@ import { buttonIconTestTemplate, buttonSpaceIconTestTemplate, } from '../common/button-test-utils.js'; -import './tertiary-button-static.js'; +import './accent-button-static.js'; -describe(`sbb-tertiary-button-static`, () => { - it('should detect icon in sbb-tertiary-button-static', async () => { - const root = await fixture(buttonIconTestTemplate('sbb-tertiary-button-static')); +describe(`sbb-accent-button-static`, () => { + it('should detect icon in sbb-accent-button-static', async () => { + const root = await fixture(buttonIconTestTemplate('sbb-accent-button-static')); const dataSlots = root.getAttribute('data-slot-names'); expect(dataSlots).to.contain('icon'); expect(dataSlots).not.to.contain('unnamed'); }); - it('should detect icon in sbb-tertiary-button-static when there is space around icon', async () => { - const root = await fixture(buttonSpaceIconTestTemplate('sbb-tertiary-button-static')); + it('should detect icon in sbb-accent-button-static when there is space around icon', async () => { + const root = await fixture(buttonSpaceIconTestTemplate('sbb-accent-button-static')); const dataSlots = root.getAttribute('data-slot-names'); expect(dataSlots).to.contain('icon'); expect(dataSlots).not.to.contain('unnamed'); diff --git a/src/elements/button/accent-button-static/accent-button-static.ssr.spec.ts b/src/elements/button/accent-button-static/accent-button-static.ssr.spec.ts new file mode 100644 index 0000000000..6ae0ea69a8 --- /dev/null +++ b/src/elements/button/accent-button-static/accent-button-static.ssr.spec.ts @@ -0,0 +1,23 @@ +import { assert } from '@open-wc/testing'; +import { html } from 'lit'; + +import { ssrHydratedFixture } from '../../core/testing/private.js'; + +import { SbbAccentButtonStaticElement } from './accent-button-static.js'; + +describe(`sbb-accent-button-static ssr`, () => { + let root: SbbAccentButtonStaticElement; + + beforeEach(async () => { + root = await ssrHydratedFixture( + html`Button`, + { + modules: ['./accent-button-static.js'], + }, + ); + }); + + it('renders', () => { + assert.instanceOf(root, SbbAccentButtonStaticElement); + }); +}); diff --git a/src/elements/button/tertiary-button-static/tertiary-button-static.stories.ts b/src/elements/button/accent-button-static/accent-button-static.stories.ts similarity index 93% rename from src/elements/button/tertiary-button-static/tertiary-button-static.stories.ts rename to src/elements/button/accent-button-static/accent-button-static.stories.ts index d616ddb3a8..2a47532b9a 100644 --- a/src/elements/button/tertiary-button-static/tertiary-button-static.stories.ts +++ b/src/elements/button/accent-button-static/accent-button-static.stories.ts @@ -23,7 +23,7 @@ import { import readme from './readme.md?raw'; import '../../loading-indicator.js'; -import './tertiary-button-static.js'; +import './accent-button-static.js'; const disabled: InputType = { control: { @@ -41,7 +41,7 @@ const defaultArgTypes: ArgTypes = { const defaultArgs: Args = { ...commonDefaultArgs, - tag: 'sbb-tertiary-button-static', + tag: 'sbb-accent-button-static', disabled: false, }; @@ -74,7 +74,7 @@ const meta: Meta = { extractComponentDescription: () => readme, }, }, - title: 'elements/sbb-button/sbb-tertiary-button-static', + title: 'elements/sbb-button/sbb-accent-button-static', }; export default meta; diff --git a/src/elements/button/tertiary-button-static/tertiary-button-static.ts b/src/elements/button/accent-button-static/accent-button-static.ts similarity index 59% rename from src/elements/button/tertiary-button-static/tertiary-button-static.ts rename to src/elements/button/accent-button-static/accent-button-static.ts index 2350e6f57b..789a4f3d61 100644 --- a/src/elements/button/tertiary-button-static/tertiary-button-static.ts +++ b/src/elements/button/accent-button-static/accent-button-static.ts @@ -3,25 +3,25 @@ import { customElement } from 'lit/decorators.js'; import { SbbActionBaseElement } from '../../core/base-elements.js'; import { SbbDisabledMixin } from '../../core/mixins.js'; -import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common.js'; +import { buttonCommonStyle, buttonAccentStyle, SbbButtonCommonElementMixin } from '../common.js'; /** - * It displays a static button enhanced with the SBB Design in the 'tertiary' variant. + * It displays a static button enhanced with the SBB Design in the 'accent' variant. * - * @slot - Use the unnamed slot to add content to the tertiary-button-static. + * @slot - Use the unnamed slot to add content to the accent-button-static. * @slot icon - Slot used to display the icon, if one is set */ export -@customElement('sbb-tertiary-button-static') -class SbbTertiaryButtonStaticElement extends SbbButtonCommonElementMixin( +@customElement('sbb-accent-button-static') +class SbbAccentButtonStaticElement extends SbbButtonCommonElementMixin( SbbDisabledMixin(SbbActionBaseElement), ) { - public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTertiaryStyle]; + public static override styles: CSSResultGroup = [buttonCommonStyle, buttonAccentStyle]; } declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-tertiary-button-static': SbbTertiaryButtonStaticElement; + 'sbb-accent-button-static': SbbAccentButtonStaticElement; } } diff --git a/src/elements/button/tertiary-button-static/readme.md b/src/elements/button/accent-button-static/readme.md similarity index 74% rename from src/elements/button/tertiary-button-static/readme.md rename to src/elements/button/accent-button-static/readme.md index 0540d86a47..5a2440670c 100644 --- a/src/elements/button/tertiary-button-static/readme.md +++ b/src/elements/button/accent-button-static/readme.md @@ -1,28 +1,28 @@ -The `sbb-tertiary-button-static` component mimics the look of the ``, +The `sbb-accent-button-static` component mimics the look of the ``, and it's meant to be used whenever is required to nest one button inside another without breaking the HTML functionality. ```html -Fake button +Fake button ``` ## Slots The button text is provided via an unnamed slot; the component can optionally display a `sbb-icon` at the component start using the `iconName` property or via custom content using the `icon` slot. -At least one is mandatory, so you can have a `sbb-tertiary-button-static` with icon only, text only, or with both. +At least one is mandatory, so you can have a `sbb-accent-button-static` with icon only, text only, or with both. ```html - Button text + Button text - + Button text - + - +> ``` ## Style @@ -34,11 +34,11 @@ There are two different sizes (`m` and `l`, which is the default) that can be se The component can be displayed in `disabled` state using the self-named property. ```html -Button +Button -Button +Button -Button +Button ``` ### Focus outline @@ -47,14 +47,14 @@ Please make sure that the focus outline appears in the correct color if the comp You can set it by re-defining the css var on `sbb-button-static` or any parent element: ```css -sbb-tertiary-button-static { +sbb-accent-button-static { --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark); } ``` ## Accessibility -Use the accessibility properties in case of an icon-only button to describe the purpose of the `sbb-tertiary-button-static` for screen-reader users. +Use the accessibility properties in case of an icon-only button to describe the purpose of the `sbb-accent-button-static` for screen-reader users. @@ -69,7 +69,7 @@ Use the accessibility properties in case of an icon-only button to describe the ## Slots -| Name | Description | -| ------ | ------------------------------------------------------------------ | -| | Use the unnamed slot to add content to the tertiary-button-static. | -| `icon` | Slot used to display the icon, if one is set | +| Name | Description | +| ------ | ---------------------------------------------------------------- | +| | Use the unnamed slot to add content to the accent-button-static. | +| `icon` | Slot used to display the icon, if one is set | diff --git a/src/elements/button/accent-button.ts b/src/elements/button/accent-button.ts new file mode 100644 index 0000000000..5121bf49b3 --- /dev/null +++ b/src/elements/button/accent-button.ts @@ -0,0 +1 @@ +export * from './accent-button/accent-button.js'; diff --git a/src/elements/button/accent-button/__snapshots__/accent-button.snapshot.spec.snap.js b/src/elements/button/accent-button/__snapshots__/accent-button.snapshot.spec.snap.js new file mode 100644 index 0000000000..a012aa8c48 --- /dev/null +++ b/src/elements/button/accent-button/__snapshots__/accent-button.snapshot.spec.snap.js @@ -0,0 +1,100 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-accent-button renders a sbb-accent-button without icon DOM"] = +` + Label Text + +`; +/* end snapshot sbb-accent-button renders a sbb-accent-button without icon DOM */ + +snapshots["sbb-accent-button renders a sbb-accent-button without icon Shadow DOM"] = +` + + + + + + + +`; +/* end snapshot sbb-accent-button renders a sbb-accent-button without icon Shadow DOM */ + +snapshots["sbb-accent-button renders a sbb-accent-button with slotted icon DOM"] = +` + + Label Text + +`; +/* end snapshot sbb-accent-button renders a sbb-accent-button with slotted icon DOM */ + +snapshots["sbb-accent-button renders a sbb-accent-button with slotted icon Shadow DOM"] = +` + + + + + + + +`; +/* end snapshot sbb-accent-button renders a sbb-accent-button with slotted icon Shadow DOM */ + +snapshots["sbb-accent-button renders a sbb-accent-button with slotted icon A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Label Text" + } + ] +} +

+`; +/* end snapshot sbb-accent-button renders a sbb-accent-button with slotted icon A11y tree Chrome */ + +snapshots["sbb-accent-button renders a sbb-accent-button with slotted icon A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Label Text" + } + ] +} +

+`; +/* end snapshot sbb-accent-button renders a sbb-accent-button with slotted icon A11y tree Firefox */ + diff --git a/src/elements/button/tertiary-button/tertiary-button.snapshot.spec.ts b/src/elements/button/accent-button/accent-button.snapshot.spec.ts similarity index 65% rename from src/elements/button/tertiary-button/tertiary-button.snapshot.spec.ts rename to src/elements/button/accent-button/accent-button.snapshot.spec.ts index 4c2d3b6d99..6041b44507 100644 --- a/src/elements/button/tertiary-button/tertiary-button.snapshot.spec.ts +++ b/src/elements/button/accent-button/accent-button.snapshot.spec.ts @@ -3,15 +3,15 @@ import { expect } from '@open-wc/testing'; import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; import { buttonSlottedIconTestTemplate, buttonTestTemplate } from '../common/button-test-utils.js'; -import type { SbbTertiaryButtonElement } from './tertiary-button.js'; -import './tertiary-button.js'; +import type { SbbAccentButtonElement } from './accent-button.js'; +import './accent-button.js'; -describe(`sbb-tertiary-button`, () => { - let element: SbbTertiaryButtonElement; +describe(`sbb-accent-button`, () => { + let element: SbbAccentButtonElement; - describe('renders a sbb-tertiary-button without icon', async () => { + describe('renders a sbb-accent-button without icon', async () => { beforeEach(async () => { - element = await fixture(buttonTestTemplate('sbb-tertiary-button')); + element = await fixture(buttonTestTemplate('sbb-accent-button')); }); it('DOM', async () => { @@ -23,9 +23,9 @@ describe(`sbb-tertiary-button`, () => { }); }); - describe('renders a sbb-tertiary-button with slotted icon', async () => { + describe('renders a sbb-accent-button with slotted icon', async () => { beforeEach(async () => { - element = await fixture(buttonSlottedIconTestTemplate('sbb-tertiary-button')); + element = await fixture(buttonSlottedIconTestTemplate('sbb-accent-button')); }); it('DOM', async () => { diff --git a/src/elements/button/tertiary-button/tertiary-button.spec.ts b/src/elements/button/accent-button/accent-button.spec.ts similarity index 64% rename from src/elements/button/tertiary-button/tertiary-button.spec.ts rename to src/elements/button/accent-button/accent-button.spec.ts index 8c3131bbe7..2d24fe8fa7 100644 --- a/src/elements/button/tertiary-button/tertiary-button.spec.ts +++ b/src/elements/button/accent-button/accent-button.spec.ts @@ -6,18 +6,18 @@ import { buttonSpaceIconTestTemplate, } from '../common/button-test-utils.js'; -import './tertiary-button.js'; +import './accent-button.js'; -describe(`sbb-tertiary-button`, () => { - it('should detect icon in sbb-tertiary-button', async () => { - const root = await fixture(buttonIconTestTemplate('sbb-tertiary-button')); +describe(`sbb-accent-button`, () => { + it('should detect icon in sbb-accent-button', async () => { + const root = await fixture(buttonIconTestTemplate('sbb-accent-button')); const dataSlots = root.getAttribute('data-slot-names'); expect(dataSlots).to.contain('icon'); expect(dataSlots).not.to.contain('unnamed'); }); - it('should detect icon in sbb-tertiary-button when there is space around icon', async () => { - const root = await fixture(buttonSpaceIconTestTemplate('sbb-tertiary-button')); + it('should detect icon in sbb-accent-button when there is space around icon', async () => { + const root = await fixture(buttonSpaceIconTestTemplate('sbb-accent-button')); const dataSlots = root.getAttribute('data-slot-names'); expect(dataSlots).to.contain('icon'); expect(dataSlots).not.to.contain('unnamed'); diff --git a/src/elements/button/accent-button/accent-button.ssr.spec.ts b/src/elements/button/accent-button/accent-button.ssr.spec.ts new file mode 100644 index 0000000000..cef6d6515f --- /dev/null +++ b/src/elements/button/accent-button/accent-button.ssr.spec.ts @@ -0,0 +1,20 @@ +import { assert } from '@open-wc/testing'; +import { html } from 'lit'; + +import { ssrHydratedFixture } from '../../core/testing/private.js'; + +import { SbbAccentButtonElement } from './accent-button.js'; + +describe(`sbb-accent-button ssr`, () => { + let root: SbbAccentButtonElement; + + beforeEach(async () => { + root = await ssrHydratedFixture(html`Button`, { + modules: ['./accent-button.js'], + }); + }); + + it('renders', () => { + assert.instanceOf(root, SbbAccentButtonElement); + }); +}); diff --git a/src/elements/button/tertiary-button/tertiary-button.stories.ts b/src/elements/button/accent-button/accent-button.stories.ts similarity index 94% rename from src/elements/button/tertiary-button/tertiary-button.stories.ts rename to src/elements/button/accent-button/accent-button.stories.ts index dcf371f9b2..dcddfda2e6 100644 --- a/src/elements/button/tertiary-button/tertiary-button.stories.ts +++ b/src/elements/button/accent-button/accent-button.stories.ts @@ -24,13 +24,13 @@ import { } from '../common/common-stories.js'; import readme from './readme.md?raw'; -import './tertiary-button.js'; +import './accent-button.js'; const defaultArgTypes: ArgTypes = { ...buttonDefaultArgTypes }; const defaultArgs: Args = { ...buttonDefaultArgs, - tag: 'sbb-tertiary-button', + tag: 'sbb-accent-button', }; export const Default: StoryObj = primary; @@ -63,7 +63,7 @@ const meta: Meta = { extractComponentDescription: () => readme, }, }, - title: 'elements/sbb-button/sbb-tertiary-button', + title: 'elements/sbb-button/sbb-accent-button', }; export default meta; diff --git a/src/elements/button/tertiary-button/tertiary-button.ts b/src/elements/button/accent-button/accent-button.ts similarity index 56% rename from src/elements/button/tertiary-button/tertiary-button.ts rename to src/elements/button/accent-button/accent-button.ts index e2bb6e329b..064dc33df3 100644 --- a/src/elements/button/tertiary-button/tertiary-button.ts +++ b/src/elements/button/accent-button/accent-button.ts @@ -3,25 +3,25 @@ import { customElement } from 'lit/decorators.js'; import { SbbButtonBaseElement } from '../../core/base-elements.js'; import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js'; -import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common.js'; +import { buttonCommonStyle, buttonAccentStyle, SbbButtonCommonElementMixin } from '../common.js'; /** - * It displays a button enhanced with the SBB Design in the 'tertiary' variant. + * It displays a button enhanced with the SBB Design in the 'accent' variant. * - * @slot - Use the unnamed slot to add content to the tertiary-button. + * @slot - Use the unnamed slot to add content to the accent-button. * @slot icon - Slot used to display the icon, if one is set */ export -@customElement('sbb-tertiary-button') -class SbbTertiaryButtonElement extends SbbButtonCommonElementMixin( +@customElement('sbb-accent-button') +class SbbAccentButtonElement extends SbbButtonCommonElementMixin( SbbDisabledTabIndexActionMixin(SbbButtonBaseElement), ) { - public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTertiaryStyle]; + public static override styles: CSSResultGroup = [buttonCommonStyle, buttonAccentStyle]; } declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-tertiary-button': SbbTertiaryButtonElement; + 'sbb-accent-button': SbbAccentButtonElement; } } diff --git a/src/elements/button/tertiary-button/tertiary-button.visual.spec.ts b/src/elements/button/accent-button/accent-button.visual.spec.ts similarity index 89% rename from src/elements/button/tertiary-button/tertiary-button.visual.spec.ts rename to src/elements/button/accent-button/accent-button.visual.spec.ts index 5126b9ccdf..14e3489636 100644 --- a/src/elements/button/tertiary-button/tertiary-button.visual.spec.ts +++ b/src/elements/button/accent-button/accent-button.visual.spec.ts @@ -7,10 +7,10 @@ import { visualRegressionFixture, } from '../../core/testing/private.js'; -import './tertiary-button.js'; +import './accent-button.js'; // We test only the differences to the sbb-button -describe(`sbb-tertiary-button`, () => { +describe(`sbb-accent-button`, () => { let root: HTMLElement; const cases = { @@ -24,13 +24,13 @@ describe(`sbb-tertiary-button`, () => { beforeEach(async function () { root = await visualRegressionFixture( html` - Button - + `, { backgroundColor: negative ? 'var(--sbb-color-iron)' : undefined, diff --git a/src/elements/button/tertiary-button/readme.md b/src/elements/button/accent-button/readme.md similarity index 81% rename from src/elements/button/tertiary-button/readme.md rename to src/elements/button/accent-button/readme.md index 0c7102b851..82cfa44bb6 100644 --- a/src/elements/button/tertiary-button/readme.md +++ b/src/elements/button/accent-button/readme.md @@ -1,28 +1,25 @@ -The `sbb-tertiary-button` component provides the same functionality as a native `