From 21154747ed0336b1b575a1ad827eaca521dde834 Mon Sep 17 00:00:00 2001 From: Lea Date: Mon, 25 Nov 2024 10:32:42 +0100 Subject: [PATCH] chore(documentation, styles): remove topic teaser (#4056) --- .changeset/tidy-keys-push.md | 6 + .../cypress/e2e/components/topic-teaser.cy.ts | 13 -- .../components/topic-teaser.snapshot.ts | 7 - .../topic-teaser/topic-teaser.docs.mdx | 35 ---- .../topic-teaser.snapshot.stories.ts | 45 ----- .../topic-teaser/topic-teaser.stories.ts | 163 ----------------- .../topic-teaser/topic-teaser.styles.scss | 6 - packages/nextjs-integration/src/app/page.tsx | 52 ------ packages/styles/src/components/_index.scss | 1 - .../styles/src/components/topic-teaser.scss | 172 ------------------ .../variables/components/_topic-teaser.scss | 30 --- .../tests/components/topic-teaser.test.scss | 7 - 12 files changed, 6 insertions(+), 531 deletions(-) create mode 100644 .changeset/tidy-keys-push.md delete mode 100644 packages/documentation/cypress/e2e/components/topic-teaser.cy.ts delete mode 100644 packages/documentation/cypress/snapshots/components/topic-teaser.snapshot.ts delete mode 100644 packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx delete mode 100644 packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts delete mode 100644 packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts delete mode 100644 packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss delete mode 100644 packages/styles/src/components/topic-teaser.scss delete mode 100644 packages/styles/src/variables/components/_topic-teaser.scss delete mode 100644 packages/styles/tests/components/topic-teaser.test.scss diff --git a/.changeset/tidy-keys-push.md b/.changeset/tidy-keys-push.md new file mode 100644 index 0000000000..63eefaf000 --- /dev/null +++ b/.changeset/tidy-keys-push.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': major +'@swisspost/design-system-styles': major +--- + +Removed deprecated `topic-teaser`. diff --git a/packages/documentation/cypress/e2e/components/topic-teaser.cy.ts b/packages/documentation/cypress/e2e/components/topic-teaser.cy.ts deleted file mode 100644 index 2cfe9bf52c..0000000000 --- a/packages/documentation/cypress/e2e/components/topic-teaser.cy.ts +++ /dev/null @@ -1,13 +0,0 @@ -describe('Topic teaser', () => { - describe('Accessibility', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=snapshots--topic-teaser'); - cy.get('.topic-teaser-image', { timeout: 30000 }).should('be.visible'); - cy.injectAxe(); - }); - - it('Has no detectable a11y violations on load for all variants', () => { - cy.checkA11y('#root-inner'); - }); - }); -}); diff --git a/packages/documentation/cypress/snapshots/components/topic-teaser.snapshot.ts b/packages/documentation/cypress/snapshots/components/topic-teaser.snapshot.ts deleted file mode 100644 index 5ca94fe191..0000000000 --- a/packages/documentation/cypress/snapshots/components/topic-teaser.snapshot.ts +++ /dev/null @@ -1,7 +0,0 @@ -describe('Topic-Teaser', () => { - it('default', () => { - cy.visit('/iframe.html?id=snapshots--topic-teaser'); - cy.get('.topic-teaser-image', { timeout: 30000 }).should('be.visible'); - cy.percySnapshot('Topic-Teaser', { widths: [320, 600, 1024] }); - }); -}); diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx deleted file mode 100644 index 99a15e3739..0000000000 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx +++ /dev/null @@ -1,35 +0,0 @@ -import { Canvas, Controls, Meta } from '@storybook/blocks'; -import * as TopicTeaserStories from './topic-teaser.stories'; -import StylesPackageImport from '@/shared/styles-package-import.mdx'; -import './topic-teaser.styles.scss'; - - - -
- -
- # Topic Teaser - - -
- -
- Topic Teaser provides a flexible and responsive content container with options to align the image, - adding topic content and links as well as contextual background colors. -
- -If you use multiple topic teasers on one page, each topic teaser must have a different background. - -
- - - -
- -
- -
- -
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts deleted file mode 100644 index 680e52cec0..0000000000 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; -import meta, { Default } from './topic-teaser.stories'; -import { html } from 'lit'; -import { bombArgs } from '@/utils'; - -const { id, ...metaWithoutId } = meta; - -export default { - ...metaWithoutId, - title: 'Snapshots', -}; - -type Story = StoryObj; - -export const TopicTeaser: Story = { - render: (_args: Args, context: StoryContext) => { - const short = 'Loremipsum'; - const long = 'Vero siteos et accusam iretea et justo'; - return html` -
- ${['white', 'dark'].map( - bg => html` -
- ${bombArgs({ - subtitle: [short, long], - title: [short, long], - alignment: context.argTypes.alignment.options, - backgroundColor: ['bg-light', 'bg-yellow'], - linkCount: [1, 5, 10], - }) - .filter((args: Args) => args.title !== args.subtitle || args.linkCount == 5) - .map((args: Args) => { - return html` -
- ${Default.render?.({ ...context.args, ...Default.args, ...args }, context)} -
- `; - })} -
- `, - )} -
- `; - }, -}; diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts deleted file mode 100644 index d60948a87c..0000000000 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts +++ /dev/null @@ -1,163 +0,0 @@ -import type { Args, StoryObj } from '@storybook/web-components'; -import { html, TemplateResult } from 'lit'; -import { mapClasses } from '@/utils'; -import { MetaComponent } from '@root/types'; - -const meta: MetaComponent = { - id: '2ffc7a53-c1aa-4ff5-b1e4-fa638591399c', - title: 'Components/Topic Teaser', - tags: ['package:HTML'], - parameters: { - badges: [], - layout: 'fullscreen', - design: { - type: 'figma', - url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=9362-36051&mode=design&t=rXQXLIbDtUBHn9jE-4', - }, - }, - args: { - title: 'Loremipsum', - subtitle: 'Vero siteos et accusam iretea et justo', - linkCount: 5, - alignment: 'null', - backgroundColor: 'bg-yellow', - }, - argTypes: { - title: { - name: 'Title', - description: 'The text to include in the component title.', - control: { - type: 'text', - }, - table: { - category: 'General', - }, - }, - subtitle: { - name: 'Subtitle', - description: 'The text to include in the component subtitle.', - control: { - type: 'text', - }, - table: { - category: 'General', - }, - }, - linkCount: { - name: 'Amount of links', - description: 'The amount of the renderd links.', - control: { - type: 'number', - min: 1, - max: 10, - }, - table: { - category: 'General', - }, - }, - alignment: { - name: 'Image alignment', - description: 'The alignment of the image.', - control: { - type: 'radio', - labels: { - 'topic-teaser-reverse': 'Image left', - 'null': 'Image right', - }, - }, - options: ['topic-teaser-reverse', 'null'], - table: { - category: 'General', - }, - }, - backgroundColor: { - name: 'Background Color', - description: 'The color the component uses as background.', - control: { - type: 'select', - labels: { - 'bg-light': 'Light', - 'bg-dark': 'Dark', - }, - }, - options: ['bg-light', 'bg-yellow'], - table: { - category: 'General', - }, - }, - }, -}; - -export default meta; - -type Story = StoryObj; - -const linkTexts: string[] = [ - 'At vero eos et accusam et', - 'Dolores et ea rebum', - 'Stet clita kasd gubergren', - 'Sed diam nonumy eirmod', - 'Duo dolores et ea rebum', - 'Magna aliquyam erat', - 'Consetetur sadipscing elitr', - 'Justo duo dolores', - 'Takimata sanctus est', - 'Nonummy nibh euismod', -]; - -export const Default: Story = { - render: (args: Args) => { - const classes = mapClasses({ - 'topic-teaser': true, - 'mb-huge-r': true, - [args.backgroundColor]: args.backgroundColor !== 'null', - [args.alignment]: args.alignment !== 'null', - }); - - const links: TemplateResult[] = linkTexts.slice(0, args.linkCount).map( - text => html` -
  • - - ${text} - -
    • - `, - ); - - const image = html` -
    - -
    - `; - - const content = html` -
    -

    - ${args.title} - ${args.subtitle} -

    -
      - ${links} -
    -
    - `; - - return html` -
    -
    -
    -
    - ${args.alignment === 'null' ? html` ${content}${image} ` : html` ${image}${content} `} -
    -
    -
    -
    - `; - }, -}; diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss deleted file mode 100644 index aeeee57ac2..0000000000 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@swisspost/design-system-styles/core' as post; - -.topic-teaser-full-width-storybook > div > div:first-child { - overflow: hidden; - @include post.responsive-size('huge', 'padding-bottom', 'calc($value + 2rem)'); -} diff --git a/packages/nextjs-integration/src/app/page.tsx b/packages/nextjs-integration/src/app/page.tsx index 2f610dd0e1..5d0b4f9713 100644 --- a/packages/nextjs-integration/src/app/page.tsx +++ b/packages/nextjs-integration/src/app/page.tsx @@ -108,58 +108,6 @@ export default function Home() { -
    -
    -
    -
    -
    -
    -

    - Post für Sie - Einfach versenden, schnell ankommen -

    - -
    - -
    - -
    -
    -
    -
    -
    -
    -
    diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss index 81ccb0ce44..0adb4f20ae 100644 --- a/packages/styles/src/components/_index.scss +++ b/packages/styles/src/components/_index.scss @@ -46,7 +46,6 @@ @use 'timepicker'; @use 'toast'; @use 'tooltip'; -@use 'topic-teaser'; @use 'transitions'; @use 'tag'; diff --git a/packages/styles/src/components/topic-teaser.scss b/packages/styles/src/components/topic-teaser.scss deleted file mode 100644 index 5ac1fcd211..0000000000 --- a/packages/styles/src/components/topic-teaser.scss +++ /dev/null @@ -1,172 +0,0 @@ -@forward './../variables/options'; - -@use 'sass:map'; - -@use './../themes/bootstrap/core' as *; - -@use './../variables/color'; -@use './../variables/grid'; -@use './../variables/spacing'; -@use './../variables/type'; -@use './../variables/components/topic-teaser'; -@use './../mixins/size'; -@use './../mixins/icons' as icons-mx; - -.topic-teaser { - &:not(.topic-teaser-reverse) { - @each $breakpoint in topic-teaser.$grid-breakpoints-upper { - @include media-breakpoint-only($breakpoint) { - .container { - padding-right: 0; - } - } - } - - .topic-teaser-container { - > .row { - justify-content: flex-end; - } - } - - .topic-teaser-image-container { - @each $breakpoint in topic-teaser.$grid-breakpoints-lower { - @include media-breakpoint-only($breakpoint) { - margin-right: map.get(grid.$grid-container-padding, $breakpoint) * -1; - } - } - } - } -} - -.topic-teaser-reverse { - @each $breakpoint in topic-teaser.$grid-breakpoints-upper { - @include media-breakpoint-only($breakpoint) { - .container { - padding-left: 0; - } - } - } - - .topic-teaser-container { - > .row { - @include media-breakpoint-down(lg) { - flex-direction: column-reverse; - } - } - } - - .topic-teaser-image-container { - @each $breakpoint in topic-teaser.$grid-breakpoints-lower { - @include media-breakpoint-only($breakpoint) { - margin-left: map.get(grid.$grid-container-padding, $breakpoint) * -1; - } - } - } -} - -.topic-teaser-image-container { - @include make-col-ready(); - @include size.responsive-size('huge', 'margin-bottom', '-$value'); - - @each $breakpoint, $size in topic-teaser.$image-cols { - @include media-breakpoint-up($breakpoint) { - @include make-col($size); - } - } -} - -.topic-teaser-image { - object-fit: cover; - - @each $breakpoint, $aspectratio in topic-teaser.$image-aspectratio { - @include media-breakpoint-up($breakpoint) { - aspect-ratio: $aspectratio; - } - } -} - -.topic-teaser-content { - @include make-col-ready(); - display: flex; - flex-direction: column; - - @each $breakpoint, $size in topic-teaser.$content-cols { - @include media-breakpoint-up($breakpoint) { - @include make-col($size); - } - } - @each $breakpoint, $gap in topic-teaser.$content-gap { - @include media-breakpoint-up($breakpoint) { - gap: $gap; - } - } - - @include media-breakpoint-up(sm) { - flex-direction: row; - } -} - -.topic-teaser-content > .link-list { - width: 50%; - - @include media-breakpoint-down(sm) { - width: 100%; - } -} - -.topic-teaser-title { - width: 50%; - - @include media-breakpoint-down(sm) { - width: auto; - } -} - -.topic-teaser-title > span { - display: block; -} - -.link-list { - padding: 0; - list-style-type: none; - font-size: type.$font-size-small; - - @include media-breakpoint-up(lg) { - font-size: type.$font-size-medium; - } -} - -.link-list-item > a { - display: flex; - align-items: center; - justify-content: space-between; - padding: spacing.$size-small-regular spacing.$size-regular; - transition: opacity 200ms; - border: 0; - border-top: 1px solid rgba(var(--post-contrast-color-rgb), 0.2); - text-decoration: none; - - &::after { - @include icons-mx.icon(2050); - content: ''; - display: inline-block; - height: spacing.$size-regular; - width: spacing.$size-regular; - flex: 0 0 auto; - transform: translateX(#{spacing.$size-micro}); - transition: transform 200ms; - } - - &[href]:hover::after { - transform: translateX(#{spacing.$size-mini}); - } - - @include media-breakpoint-up(lg) { - padding-top: spacing.$size-small-large; - padding-bottom: spacing.$size-small-large; - } -} - -.topic-teaser.bg-light .link-list-item > a { - border-top-color: color.$gray-10; -} diff --git a/packages/styles/src/variables/components/_topic-teaser.scss b/packages/styles/src/variables/components/_topic-teaser.scss deleted file mode 100644 index e398451082..0000000000 --- a/packages/styles/src/variables/components/_topic-teaser.scss +++ /dev/null @@ -1,30 +0,0 @@ -@use 'sass:list'; - -$grid-breakpoints-lower: (xs, sm, md); -$grid-breakpoints-upper: (lg, xl); - -$content-cols: ( - xs: 12, - lg: 8, - xl: 7, -); - -$content-gap: ( - sm: 32px, - xl: 40px, -); - -$image-cols: ( - xs: 10, - sm: 8, - lg: 4, - xl: 5, -); - -$image-aspectratio: ( - xs: list.slash(1, 0.7), - sm: list.slash(1, 0.7), - md: list.slash(1, 0.7), - lg: list.slash(0.66, 1), - xl: list.slash(0.9, 1), -); diff --git a/packages/styles/tests/components/topic-teaser.test.scss b/packages/styles/tests/components/topic-teaser.test.scss deleted file mode 100644 index b2e97a0243..0000000000 --- a/packages/styles/tests/components/topic-teaser.test.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'tests/jest'; -@use 'src/components/topic-teaser'; - -// Check if component forwards options -@include jest.true(map.has-key(meta.module-variables('topic-teaser'), 'font-base-path'));