From 7d1fbadf831b664c2229ffd1b4962fdbdefdc768 Mon Sep 17 00:00:00 2001 From: Lea Date: Fri, 29 Nov 2024 15:52:54 +0100 Subject: [PATCH] chore(documentation, styles): remove carousel (#4075) --- .changeset/slimy-plums-sniff.md | 6 + .../ngb-component-internationalization.mdx | 12 -- .../carousel/carousel-basic.sample.html | 32 ---- .../carousel/carousel-light.sample.html | 32 ---- .../components/carousel/carousel.docs.mdx | 74 -------- .../components/carousel/carousel.stories.ts | 17 -- packages/styles/src/components/_index.scss | 1 - packages/styles/src/components/carousel.scss | 168 ------------------ .../src/themes/bootstrap/_carousel.scss | 2 - .../bootstrap/_overrides-variables.scss | 1 - .../src/variables/components/_carousel.scss | 27 --- .../src/variables/components/_index.scss | 1 - .../tests/components/carousel.test.scss | 7 - 13 files changed, 6 insertions(+), 374 deletions(-) create mode 100644 .changeset/slimy-plums-sniff.md delete mode 100644 packages/documentation/src/stories/components/carousel/carousel-basic.sample.html delete mode 100644 packages/documentation/src/stories/components/carousel/carousel-light.sample.html delete mode 100644 packages/documentation/src/stories/components/carousel/carousel.docs.mdx delete mode 100644 packages/documentation/src/stories/components/carousel/carousel.stories.ts delete mode 100644 packages/styles/src/components/carousel.scss delete mode 100644 packages/styles/src/themes/bootstrap/_carousel.scss delete mode 100644 packages/styles/src/variables/components/_carousel.scss delete mode 100644 packages/styles/tests/components/carousel.test.scss diff --git a/.changeset/slimy-plums-sniff.md b/.changeset/slimy-plums-sniff.md new file mode 100644 index 0000000000..19961ed7b7 --- /dev/null +++ b/.changeset/slimy-plums-sniff.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': major +'@swisspost/design-system-styles': major +--- + +Removed deprecated `carousel` component. diff --git a/packages/documentation/src/shared/nb-bootstrap/ngb-component-internationalization.mdx b/packages/documentation/src/shared/nb-bootstrap/ngb-component-internationalization.mdx index e8d2c351b1..ca901b267f 100644 --- a/packages/documentation/src/shared/nb-bootstrap/ngb-component-internationalization.mdx +++ b/packages/documentation/src/shared/nb-bootstrap/ngb-component-internationalization.mdx @@ -16,9 +16,6 @@ import { loadTranslations } from '@angular/localize'; const I18N_VALUES = { de: { 'ngb.alert.close': 'Schließen', - 'ngb.carousel.slide-number': ' Folie {$INTERPOLATION} von {$INTERPOLATION_1} ', - 'ngb.carousel.previous': 'Vorherige', - 'ngb.carousel.next': 'Nächste', 'ngb.datepicker.select-year': 'Jahr auswählen', 'ngb.datepicker.select-month': 'Monat auswählen', 'ngb.datepicker.previous-month': 'Vorheriger Monat', @@ -39,9 +36,6 @@ const I18N_VALUES = { }, fr: { 'ngb.alert.close': 'Fermer', - 'ngb.carousel.slide-number': 'Diapositive {$INTERPOLATION} sur {$INTERPOLATION_1}', - 'ngb.carousel.previous': 'Précédente', - 'ngb.carousel.next': 'Suivante', 'ngb.datepicker.select-year': "Sélectionner l'année", 'ngb.datepicker.select-month': 'Sélectionner le mois', 'ngb.datepicker.previous-month': 'Mois précédent', @@ -62,9 +56,6 @@ const I18N_VALUES = { }, it: { 'ngb.alert.close': 'Chiudi', - 'ngb.carousel.slide-number': 'Diapositiva {$INTERPOLATION} di {$INTERPOLATION_1}', - 'ngb.carousel.previous': 'Precedente', - 'ngb.carousel.next': 'Successiva', 'ngb.datepicker.select-year': "Seleziona l'anno", 'ngb.datepicker.select-month': 'Seleziona il mese', 'ngb.datepicker.previous-month': 'Mese precedente', @@ -85,9 +76,6 @@ const I18N_VALUES = { }, en: { 'ngb.alert.close': 'Close', - 'ngb.carousel.slide-number': 'Slide {$INTERPOLATION} of {$INTERPOLATION_1}', - 'ngb.carousel.previous': 'Previous', - 'ngb.carousel.next': 'Next', 'ngb.datepicker.select-year': 'Select Year', 'ngb.datepicker.select-month': 'Select Month', 'ngb.datepicker.previous-month': 'Previous Month', diff --git a/packages/documentation/src/stories/components/carousel/carousel-basic.sample.html b/packages/documentation/src/stories/components/carousel/carousel-basic.sample.html deleted file mode 100644 index 1e82b724cb..0000000000 --- a/packages/documentation/src/stories/components/carousel/carousel-basic.sample.html +++ /dev/null @@ -1,32 +0,0 @@ - - - First slide -
-

First slide label

-

Nulla vitae elit libero, a pharetra augue mollis interdum.

- -
- - - Second slide -
-

Second slide label

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -
- - - Third slide -
-

Third slide label

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

- -
- - diff --git a/packages/documentation/src/stories/components/carousel/carousel-light.sample.html b/packages/documentation/src/stories/components/carousel/carousel-light.sample.html deleted file mode 100644 index d79d71bf29..0000000000 --- a/packages/documentation/src/stories/components/carousel/carousel-light.sample.html +++ /dev/null @@ -1,32 +0,0 @@ - - - First slide -
-

First slide label

-

Nulla vitae elit libero, a pharetra augue mollis interdum.

- -
- - - Second slide -
-

Second slide label

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -
- - - Third slide -
-

Third slide label

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

- -
- - diff --git a/packages/documentation/src/stories/components/carousel/carousel.docs.mdx b/packages/documentation/src/stories/components/carousel/carousel.docs.mdx deleted file mode 100644 index f60e63fcf1..0000000000 --- a/packages/documentation/src/stories/components/carousel/carousel.docs.mdx +++ /dev/null @@ -1,74 +0,0 @@ -import { Meta, Source } from '@storybook/blocks'; -import * as carouselStories from './carousel.stories'; -import StylesPackageImport from '@/shared/styles-package-import.mdx'; -import NgbComponentDemoLink from '@/shared/nb-bootstrap/ngb-component-demo-link.mdx'; -import NgbComponentBanner from '@/shared/nb-bootstrap/ngb-component-banner.mdx'; -import NgbComponentImport from '@/shared/nb-bootstrap/ngb-component-import.mdx'; -import NgbComponentInternationalization from '@/shared/nb-bootstrap/ngb-component-internationalization.mdx'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; -import SampleBasic from './carousel-basic.sample.html?raw'; -import SampleLight from './carousel-light.sample.html?raw'; - - - -
- # Carousel - - -
- -

- A slideshow component for cycling through elements—images or slides of text—like a carousel. -

- -
- The carousel is deprecated and will be removed in a future version. -
- - - - - - - - - - - -## Examples - - - Basic example - - - - - Light caption - - - - diff --git a/packages/documentation/src/stories/components/carousel/carousel.stories.ts b/packages/documentation/src/stories/components/carousel/carousel.stories.ts deleted file mode 100644 index e6c063f15f..0000000000 --- a/packages/documentation/src/stories/components/carousel/carousel.stories.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { StoryObj } from '@storybook/web-components'; -import { MetaComponent } from '@root/types'; - -const meta: MetaComponent = { - id: 'cb3ba4a2-1265-4a20-b184-b85443146efa', - title: 'Components/Carousel', - tags: ['package:Angular'], - parameters: { - badges: [], - }, -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss index e4de4b9be8..d94c7f8902 100644 --- a/packages/styles/src/components/_index.scss +++ b/packages/styles/src/components/_index.scss @@ -11,7 +11,6 @@ @use 'button-group'; @use 'card'; @use 'card-control'; -@use 'carousel'; @use 'chip'; @use 'close'; @use 'elevation'; diff --git a/packages/styles/src/components/carousel.scss b/packages/styles/src/components/carousel.scss deleted file mode 100644 index ef5cbd4d03..0000000000 --- a/packages/styles/src/components/carousel.scss +++ /dev/null @@ -1,168 +0,0 @@ -@forward './../variables/options'; - -@use './../themes/bootstrap/carousel' as bc; -@use './../themes/bootstrap/core' as *; - -@use './../functions/icons'; -@use './../variables/color'; -@use './../variables/commons'; -@use './../variables/type'; -@use './../variables/spacing'; -@use './../mixins/utilities'; - -.carousel { - &:focus-visible { - outline: transparent; - box-shadow: - 0 0 0 2px #fff, - 0 0 0 4px #000, - 0 0 12px 5px rgba(0, 0, 0, 0.24); - } - - @include utilities.high-contrast-mode() { - &:focus-visible { - border-radius: commons.$border-radius; - outline: spacing.$size-line solid highlight; - outline-offset: spacing.$size-micro; - box-shadow: none; - } - } -} - -.carousel-inner { - padding-bottom: calc(10% - 0.5rem); - - @include media-breakpoint-down(sm) { - padding-bottom: 1.5rem; - } - - @include media-breakpoint-down(md) { - padding-bottom: calc(10% - 1rem); - } - - img { - aspect-ratio: 16/9; - object-fit: cover; - } -} - -.carousel-caption { - bottom: -5rem; - left: 0; - width: 40%; - padding: 2rem; - padding-bottom: 5rem; - color: color.$white; - text-align: left; - - @include media-breakpoint-up(lg) { - bottom: -7rem; - } - - @include media-breakpoint-down(lg) { - width: 50%; - padding: 1.5rem; - padding-bottom: 5rem; - } - - @include media-breakpoint-down(md) { - width: 55%; - } - - @include media-breakpoint-down(sm) { - position: relative; - bottom: 0; - width: calc(100% - 2rem); - margin-top: -3rem; - margin-left: 1rem; - } - - .bold { - margin-bottom: 0; - font-size: type.$font-size-small-big; - font-weight: type.$font-weight-bold; - } - - .subtitle, - .light { - font-size: type.$font-size-small-big; - font-weight: type.$font-weight-light; - } -} - -.carousel-caption::before { - content: ''; - position: absolute; - z-index: 0; - bottom: 3rem; - left: 0; - width: 192px; //width from logo - border-bottom: 10px solid color.$yellow; - - @include media-breakpoint-down(lg) { - bottom: 2.5rem; - } -} - -.caption-right .carousel-caption { - right: 0; - left: auto; -} - -.caption-light .carousel-caption { - background-color: rgba(color.$light, 0.85); - color: color.$black; -} - -.carousel-indicators { - right: 2%; - bottom: spacing.$size-huge; - left: inherit; - margin: 0; - float: right; - text-align: right; - - @include media-breakpoint-down(lg) { - bottom: 2rem; - } - - @include media-breakpoint-down(sm) { - right: 0; - bottom: 0.8rem; - left: 0; - } -} - -.caption-right .carousel-indicators { - right: auto; - left: 2%; - float: left; - text-align: left; -} - -.carousel-indicators [data-bs-target] { - width: 0.75rem; - height: 0.75rem; - border: 1px color.$black solid; - border-radius: 50%; - background-color: transparent; - - &:not(:last-child) { - margin-right: spacing.$size-regular; - } -} - -.carousel-indicators [data-bs-target].active { - border-color: color.$yellow; - background-color: color.$yellow; - - @include utilities.high-contrast-mode() { - border-color: highlight; - background-color: highlight; - } -} - -.carousel-control-prev, -.carousel-control-next { - display: none; -} diff --git a/packages/styles/src/themes/bootstrap/_carousel.scss b/packages/styles/src/themes/bootstrap/_carousel.scss deleted file mode 100644 index d50b6dae05..0000000000 --- a/packages/styles/src/themes/bootstrap/_carousel.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use './core' as *; -@import 'bootstrap/scss/carousel'; diff --git a/packages/styles/src/themes/bootstrap/_overrides-variables.scss b/packages/styles/src/themes/bootstrap/_overrides-variables.scss index c7fe19486d..06e50c9140 100644 --- a/packages/styles/src/themes/bootstrap/_overrides-variables.scss +++ b/packages/styles/src/themes/bootstrap/_overrides-variables.scss @@ -14,7 +14,6 @@ @forward './../../variables/components/breadcrumbs'; @forward './../../variables/components/button'; @forward './../../variables/components/card'; -@forward './../../variables/components/carousel'; @forward './../../variables/components/chip'; @forward './../../variables/components/close'; @forward './../../variables/components/datepicker'; diff --git a/packages/styles/src/variables/components/_carousel.scss b/packages/styles/src/variables/components/_carousel.scss deleted file mode 100644 index 4d811188d5..0000000000 --- a/packages/styles/src/variables/components/_carousel.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use './../color'; - -// Carousel - -$carousel-control-color: color.$white !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: 0.5 !default; -$carousel-control-hover-opacity: 0.9 !default; -$carousel-control-transition: opacity 0.15s ease !default; - -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-hit-area-height: 10px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: color.$white !default; -$carousel-indicator-transition: opacity 0.6s ease !default; - -$carousel-caption-width: 70% !default; -$carousel-caption-color: color.$white !default; - -$carousel-control-icon-width: 20px !default; - -$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; -$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; - -$carousel-transition-duration: 0.6s !default; -$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) diff --git a/packages/styles/src/variables/components/_index.scss b/packages/styles/src/variables/components/_index.scss index d69a673607..091c188066 100644 --- a/packages/styles/src/variables/components/_index.scss +++ b/packages/styles/src/variables/components/_index.scss @@ -3,7 +3,6 @@ @forward 'breadcrumbs'; @forward 'button'; @forward 'card'; -@forward 'carousel'; @forward 'chip'; @forward 'close'; @forward 'datepicker'; diff --git a/packages/styles/tests/components/carousel.test.scss b/packages/styles/tests/components/carousel.test.scss deleted file mode 100644 index 7762069bee..0000000000 --- a/packages/styles/tests/components/carousel.test.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'tests/jest'; -@use 'src/components/carousel'; - -// Check if component forwards options -@include jest.true(map.has-key(meta.module-variables('carousel'), 'font-base-path'));