Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 26 commits into from
Jul 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
a0880c4
feat: generate components and folder structure
dauriamarco Jul 9, 2024
88b235f
fix: card details export
dauriamarco Jul 9, 2024
933aaf0
fix: stories
dauriamarco Jul 9, 2024
2152b5a
feat: partial implementation
MarioCastigliano Jul 10, 2024
b785692
fix: image placement
MarioCastigliano Jul 10, 2024
8bcd98f
feat: flip card layout and toggle
dauriamarco Jul 11, 2024
c73679c
feat: flip card logic and focus
dauriamarco Jul 11, 2024
0172aa4
feat: add flip-card stories
dauriamarco Jul 15, 2024
712b84e
fix: flip-card stories
dauriamarco Jul 15, 2024
70a5b23
docs: create documentation
MarioCastigliano Jul 17, 2024
a054d19
fix: use right background color
MarioCastigliano Jul 17, 2024
0285609
test: first part
MarioCastigliano Jul 17, 2024
a40ea4c
feat: stories
MarioCastigliano Jul 17, 2024
e34275e
test: add ssr
MarioCastigliano Jul 17, 2024
4d72c97
test: second part
MarioCastigliano Jul 17, 2024
2f4d982
test: third part
MarioCastigliano Jul 17, 2024
3749b0b
test: add visual spec
MarioCastigliano Jul 17, 2024
22c63a3
feat: localize aria-label
MarioCastigliano Jul 18, 2024
2208e4d
fix: tests
MarioCastigliano Jul 18, 2024
fcc428b
feat: add multiline story
dauriamarco Jul 18, 2024
3a0659f
fix: add visual test cases
MarioCastigliano Jul 18, 2024
8741cb4
fix: review comments
MarioCastigliano Jul 18, 2024
6f981f5
fix: address review comments
MarioCastigliano Jul 18, 2024
8b0a09c
fix: address graphical review
MarioCastigliano Jul 19, 2024
bd1f93b
fix: tests
MarioCastigliano Jul 19, 2024
84273b7
fix: improve data attribute usage
MarioCastigliano Jul 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/elements/core/i18n/i18n.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
3 changes: 3 additions & 0 deletions src/elements/flip-card.ts
Original file line number Diff line number Diff line change
@@ -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';
1 change: 1 addition & 0 deletions src/elements/flip-card/flip-card-details.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './flip-card-details/flip-card-details.js';
Original file line number Diff line number Diff line change
@@ -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 */

25 changes: 25 additions & 0 deletions src/elements/flip-card/flip-card-details/flip-card-details.scss
Original file line number Diff line number Diff line change
@@ -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;
}

kyubisation marked this conversation as resolved.
Show resolved Hide resolved
.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);
}
Original file line number Diff line number Diff line change
@@ -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();
});
Original file line number Diff line number Diff line change
@@ -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);
});
});
Original file line number Diff line number Diff line change
@@ -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);
});
});
Original file line number Diff line number Diff line change
@@ -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;
68 changes: 68 additions & 0 deletions src/elements/flip-card/flip-card-details/flip-card-details.ts
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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)',
},
);
}),
);
});
});
1 change: 1 addition & 0 deletions src/elements/flip-card/flip-card-details/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './flip-card-details.js';
22 changes: 22 additions & 0 deletions src/elements/flip-card/flip-card-details/readme.md
Original file line number Diff line number Diff line change
@@ -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. |
1 change: 1 addition & 0 deletions src/elements/flip-card/flip-card-summary.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './flip-card-summary/flip-card-summary.js';
Loading
Loading