Skip to content

Commit

Permalink
refactor(sbb-tertiary-button): rename tertiary to accent button (#3260)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: `sbb-tertiary-button` was renamed to `sbb-accent-button`
  • Loading branch information
jeripeierSBB authored Dec 2, 2024
1 parent fb2eac5 commit 449b04d
Show file tree
Hide file tree
Showing 40 changed files with 512 additions and 518 deletions.
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/contributing-request.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions src/elements/button.ts
Original file line number Diff line number Diff line change
@@ -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';
1 change: 1 addition & 0 deletions src/elements/button/accent-button-link.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './accent-button-link/accent-button-link.js';
Original file line number Diff line number Diff line change
@@ -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"] =
`<sbb-accent-button-link
data-action=""
data-link=""
data-sbb-button=""
data-slot-names="unnamed"
download=""
href="https://www.sbb.ch"
rel="noopener"
size="m"
target="_blank"
>
Label Text
</sbb-accent-button-link>
`;
/* 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"] =
`<a
class="sbb-accent-button-link sbb-action-base"
download=""
href="https://www.sbb.ch"
rel="noopener"
target="_blank"
>
<slot name="icon">
</slot>
<span class="sbb-button__label">
<slot>
</slot>
</span>
<sbb-screen-reader-only>
. Link target opens in a new window.
</sbb-screen-reader-only>
</a>
`;
/* 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"] =
`<sbb-accent-button-link
data-action=""
data-link=""
data-sbb-button=""
data-slot-names="icon unnamed"
disabled=""
href="https://www.sbb.ch"
size="l"
>
<sbb-icon
aria-hidden="true"
data-namespace="default"
name="chevron-small-left-small"
role="img"
slot="icon"
>
</sbb-icon>
Label Text
</sbb-accent-button-link>
`;
/* 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"] =
`<a
aria-disabled="true"
class="sbb-accent-button-link sbb-action-base"
href="https://www.sbb.ch"
tabindex="-1"
>
<slot name="icon">
</slot>
<span class="sbb-button__label">
<slot>
</slot>
</span>
</a>
`;
/* 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"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "link",
"name": "Label Text . Link target opens in a new window."
}
]
}
</p>
`;
/* 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"] =
`<p>
{
"role": "document",
"name": "",
"children": [
{
"role": "link",
"name": "Label Text . Link target opens in a new window.",
"value": "https://www.sbb.ch/"
}
]
}
</p>
`;
/* end snapshot sbb-accent-button-link renders a sbb-accent-button-link without icon A11y tree Firefox */

Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand All @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -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`<sbb-accent-button-link>Button</sbb-accent-button-link>`, {
modules: ['./accent-button-link.js'],
});
});

it('renders', () => {
assert.instanceOf(root, SbbAccentButtonLinkElement);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
The `sbb-tertiary-button-link` component provides the same functionality as a native `<a>`,
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 `<a>`,
despite its appearance as a button enhanced with the SBB Design in the 'accent' variant.

```html
<sbb-tertiary-button-link href="https://www.sbb.ch">Button text</sbb-tertiary-button-link>
<sbb-accent-button-link href="https://www.sbb.ch">Button text</sbb-accent-button-link>
```

## 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
<sbb-tertiary-button-link href="https://www.sbb.ch" icon-name="info">
<sbb-accent-button-link href="https://www.sbb.ch" icon-name="info">
Button text
</sbb-tertiary-button-link>
</sbb-accent-button-link>

<sbb-tertiary-button-link href="https://www.sbb.ch">
<sbb-accent-button-link href="https://www.sbb.ch">
<sbb-icon slot="icon" name="info"></sbb-icon>
Button text
</sbb-tertiary-button-link>
</sbb-accent-button-link>

<sbb-tertiary-button-link
<sbb-accent-button-link
href="https://www.sbb.ch"
icon-name="info"
accessibility-label="Click for more information."
></sbb-tertiary-button-link>
></sbb-accent-button-link>
```

## Link properties
Expand All @@ -34,12 +34,12 @@ The component is internally rendered as a link,
accepting its associated properties (`href`, `target`, `rel` and `download`).

```html
<sbb-tertiary-button-link
<sbb-accent-button-link
href="https://github.com/sbb-design-systems/lyne-components"
target="_blank"
>
Go to site
</sbb-tertiary-button-link>
</sbb-accent-button-link>
```

## Style
Expand All @@ -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
<sbb-tertiary-button-link href="https://www.sbb.ch" negative>Button</sbb-tertiary-button-link>
<sbb-accent-button-link href="https://www.sbb.ch" negative>Button</sbb-accent-button-link>

<sbb-tertiary-button-link href="https://www.sbb.ch" size="m">Button</sbb-tertiary-button-link>
<sbb-accent-button-link href="https://www.sbb.ch" size="m">Button</sbb-accent-button-link>

<sbb-tertiary-button-link href="https://www.sbb.ch" disabled>Button</sbb-tertiary-button-link>
<sbb-accent-button-link href="https://www.sbb.ch" disabled>Button</sbb-accent-button-link>
```

### 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.

<!-- Auto Generated Below -->

Expand All @@ -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 |
1 change: 1 addition & 0 deletions src/elements/button/accent-button-static.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './accent-button-static/accent-button-static.js';
Loading

0 comments on commit 449b04d

Please sign in to comment.