feat(sbb-flip-card): first implementation (#2946)

src/elements/core/i18n/i18n.ts

@@ -629,6 +629,20 @@ export const i18nClearInput: Record<string, string> = {
   it: 'Cancella il valore dell’input',
 };
 
+export const i18nFlipCard: Record<string, string> = {
+  de: 'Klicken Sie auf diese Karte für Details',
+  en: 'Click on this card for details',
+  fr: 'Cliquez sur cette carte pour plus de détails',
+  it: 'Clicca su questa scheda per i dettagli',
+};
+
+export const i18nReverseCard: Record<string, string> = {
+  de: 'Klicken Sie auf diese Karte, um zurück zur Zusammenfassung zu gelangen',
+  en: 'Click on this card to go back to summary',
+  fr: 'Cliquez sur cette carte pour revenir au résumé',
+  it: 'Clicca su questa scheda per tornare al sommario',
+};
+
 export const i18nFileSelectorButtonLabel: Record<string, string> = {
   de: 'Datei auswählen',
   en: 'Choose a file',

src/elements/flip-card.ts

@@ -0,0 +1,3 @@
+export * from './flip-card/flip-card.js';
+export * from './flip-card/flip-card-summary.js';
+export * from './flip-card/flip-card-details.js';

src/elements/flip-card/flip-card-details.ts

@@ -0,0 +1 @@
+export * from './flip-card-details/flip-card-details.js';

src/elements/flip-card/flip-card-details/__snapshots__/flip-card-details.snapshot.spec.snap.js

@@ -0,0 +1,66 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Example text"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot A11y tree Chrome */
+
+snapshots["sbb-flip-card-details DOM"] = 
+`<sbb-flip-card-details slot="details">
+  Example text
+</sbb-flip-card-details>
+`;
+/* end snapshot sbb-flip-card-details DOM */
+
+snapshots["sbb-flip-card-details Shadow DOM"] = 
+`<div class="sbb-flip-card-details">
+  <slot>
+  </slot>
+</div>
+`;
+/* end snapshot sbb-flip-card-details Shadow DOM */
+
+snapshots["sbb-flip-card-details A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Example text"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-flip-card-details A11y tree Chrome */
+
+snapshots["sbb-flip-card-details A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Example text"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-flip-card-details A11y tree Firefox */
+

src/elements/flip-card/flip-card-details/flip-card-details.scss

@@ -0,0 +1,25 @@
+@use '../../core/styles' as sbb;
+
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
+
+:host {
+  --sbb-flip-card-details-opacity: 0;
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
+
+  display: contents;
+}
+
+.sbb-flip-card-details {
+  pointer-events: none;
+  color: var(--sbb-color-milk);
+  opacity: var(--sbb-flip-card-details-opacity);
+  padding: var(--sbb-spacing-responsive-s);
+  padding-block-end: calc(
+    var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m)
+  );
+  transform: translateY(var(--sbb-flip-card-details-translate-y));
+  transition: var(--sbb-flip-card-details-transition-duration) ease-out;
+  transition-delay: var(--sbb-flip-card-details-transition-delay);
+  max-height: var(--sbb-flip-card-details-min-height);
+}

src/elements/flip-card/flip-card-details/flip-card-details.snapshot.spec.ts

@@ -0,0 +1,25 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbFlipCardDetailsElement } from './flip-card-details.js';
+import './flip-card-details.js';
+
+describe(`sbb-flip-card-details`, () => {
+  let element: SbbFlipCardDetailsElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-flip-card-details>Example text</sbb-flip-card-details>`);
+  });
+
+  it('DOM', async () => {
+    await expect(element).dom.to.be.equalSnapshot();
+  });
+
+  it('Shadow DOM', async () => {
+    await expect(element).shadowDom.to.be.equalSnapshot();
+  });
+
+  testA11yTreeSnapshot();
+});

src/elements/flip-card/flip-card-details/flip-card-details.spec.ts

@@ -0,0 +1,18 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../../core/testing/private.js';
+
+import { SbbFlipCardDetailsElement } from './flip-card-details.js';
+
+describe('sbb-flip-card-details', () => {
+  let element: SbbFlipCardDetailsElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-flip-card-details></sbb-flip-card-details>`);
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(element, SbbFlipCardDetailsElement);
+  });
+});

src/elements/flip-card/flip-card-details/flip-card-details.ssr.spec.ts

@@ -0,0 +1,20 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { ssrHydratedFixture } from '../../core/testing/private.js';
+
+import { SbbFlipCardDetailsElement } from './flip-card-details.js';
+
+describe(`sbb-flip-card-details ssr`, () => {
+  let root: SbbFlipCardDetailsElement;
+
+  beforeEach(async () => {
+    root = await ssrHydratedFixture(html`<sbb-flip-card-details></sbb-flip-card-details>`, {
+      modules: ['./flip-card-details.js'],
+    });
+  });
+
+  it('renders', () => {
+    assert.instanceOf(root, SbbFlipCardDetailsElement);
+  });
+});

src/elements/flip-card/flip-card-details/flip-card-details.stories.ts

@@ -0,0 +1,34 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Decorator, Meta, StoryObj } from '@storybook/web-components';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
+
+import readme from './readme.md?raw';
+
+import '../../link.js';
+import './flip-card-details.js';
+
+const Template = (): TemplateResult =>
+  html`<sbb-flip-card-details style="--sbb-flip-card-details-opacity: 1">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ornare condimentum. Vivamus
+    turpis elit, dapibus eget fringilla pellentesque, lobortis in nibh. Duis dapibus vitae tortor
+    ullamcorper maximus. In convallis consectetur felis.
+    <sbb-link href="https://www.sbb.ch" negative>Link</sbb-link>
+  </sbb-flip-card-details>`;
+
+export const Default: StoryObj = {
+  render: Template,
+};
+
+const meta: Meta = {
+  decorators: [withActions as Decorator],
+  parameters: {
+    backgroundColor: () => 'var(--sbb-color-midnight)',
+    docs: {
+      extractComponentDescription: () => readme,
+    },
+  },
+  title: 'elements/sbb-flip-card/sbb-flip-card-details',
+};
+
+export default meta;

src/elements/flip-card/flip-card-details/flip-card-details.ts

@@ -0,0 +1,68 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { IS_FOCUSABLE_QUERY } from '../../core/a11y.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { AgnosticMutationObserver } from '../../core/observers.js';
+
+import style from './flip-card-details.scss?lit&inline';
+
+/**
+ * Combined with a `sbb-flip-card`, it displays its content when the card is flipped.
+ *
+ * @slot - Use the unnamed slot to provide any kind of content.
+ */
+@customElement('sbb-flip-card-details')
+@hostAttributes({
+  slot: 'details',
+})
+export class SbbFlipCardDetailsElement extends LitElement {
+  public static override styles: CSSResultGroup = style;
+
+  private _flipCardMutationObserver = new AgnosticMutationObserver(() =>
+    this._checkForSlottedActions(),
+  );
+
+  private _checkForSlottedActions(): void {
+    const cardFocusableAttributeName = 'data-card-focusable';
+
+    Array.from(this.querySelectorAll?.(IS_FOCUSABLE_QUERY) ?? [])
+      .filter((el) => !el.hasAttribute(cardFocusableAttributeName))
+      .forEach((el: Element) => el.setAttribute(cardFocusableAttributeName, ''));
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this._checkForSlottedActions();
+    this._flipCardMutationObserver.observe(this, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  protected override firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    this._checkForSlottedActions();
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._flipCardMutationObserver.disconnect();
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="sbb-flip-card-details">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-flip-card-details': SbbFlipCardDetailsElement;
+  }
+}

src/elements/flip-card/flip-card-details/flip-card-details.visual.spec.ts

@@ -0,0 +1,29 @@
+import { html } from 'lit';
+
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import './flip-card-details.js';
+import '../../link.js';
+
+describe(`sbb-flip-card-details`, () => {
+  describeViewports({ viewports: ['medium'] }, () => {
+    it(
+      visualDiffDefault.name,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`
+            <sbb-flip-card-details style="--sbb-flip-card-details-opacity: 1">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ornare
+              condimentum. Vivamus turpis elit, dapibus eget fringilla pellentesque, lobortis in
+              nibh. Duis dapibus vitae tortor ullamcorper maximus. In convallis consectetur felis.
+              <sbb-link href="https://www.sbb.ch" negative>Link</sbb-link>
+            </sbb-flip-card-details>
+          `,
+          {
+            backgroundColor: 'var(--sbb-color-midnight)',
+          },
+        );
+      }),
+    );
+  });
+});

src/elements/flip-card/flip-card-details/index.ts

@@ -0,0 +1 @@
+export * from './flip-card-details.js';

src/elements/flip-card/flip-card-details/readme.md

@@ -0,0 +1,22 @@
+The `sbb-flip-card-details`, when used inside a [sbb-flip-card](/docs/elements-sbb-flip-card-sbb-flip-card--docs), will show its contents when the card is flipped.
+The component's slot is implicitly set to `"details"`.
+
+```html
+<sbb-flip-card>
+  <sbb-flip-card-details>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat ipsum rhoncus viverra
+    dapibus. Aenean id nibh ac tortor elementum vestibulum eu vitae dui. Integer tellus ex, bibendum
+    eget purus id, pellentesque interdum tortor. Sed bibendum neque nisi, ac egestas magna consequat
+    eu.
+    <sbb-link href="https://www.sbb.ch" negative>Link</sbb-link>
+  </sbb-flip-card-details>
+</sbb-flip-card>
+```
+
+<!-- Auto Generated Below -->
+
+## Slots
+
+| Name | Description                                          |
+| ---- | ---------------------------------------------------- |
+|      | Use the unnamed slot to provide any kind of content. |

src/elements/flip-card/flip-card-summary.ts

@@ -0,0 +1 @@
+export * from './flip-card-summary/flip-card-summary.js';