refactor(sbb-tertiary-button): rename tertiary to accent button

.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

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';

src/elements/button/accent-button-link.ts

@@ -0,0 +1 @@
+export * from './accent-button-link/accent-button-link.js';

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"] = 
+`<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 */
+

src/elements/button/tertiary-button-link/tertiary-button-link.snapshot.spec.ts → 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 () => {

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`<sbb-accent-button-link>Button</sbb-accent-button-link>`, {
+      modules: ['./accent-button-link.js'],
+    });
+  });
+
+  it('renders', () => {
+    assert.instanceOf(root, SbbAccentButtonLinkElement);
+  });
+});

src/elements/button/tertiary-button-link/tertiary-button-link.stories.ts → 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;

src/elements/button/tertiary-button-link/tertiary-button-link.ts → 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;
   }
 }

src/elements/button/tertiary-button-link/readme.md → 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 `<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
@@ -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
@@ -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 -->
 
@@ -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                   |

src/elements/button/accent-button-static.ts

@@ -0,0 +1 @@
+export * from './accent-button-static/accent-button-static.js';