chore(styles): remove deprecated text placeholders (#3623)

Co-authored-by: Alizé Debray <[email protected]>
swisspost · Oct 4, 2024 · 94acccf · 94acccf
1 parent 99336ec
commit 94acccf
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 153 deletions.
diff --git a/.changeset/kind-papayas-provide.md b/.changeset/kind-papayas-provide.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed the following placeholders: `%list-adjustment`, `%module-container`, `%default-module-spacer`, `%text-container`.
diff --git a/packages/styles/src/placeholders/_text.scss b/packages/styles/src/placeholders/_text.scss
@@ -1,38 +1,7 @@
-@use 'sass:map';
-@use './../themes/bootstrap/core' as *;
-@use './../variables/spacing';
 @use './../variables/type';
-@use './../variables/color';
-@use './../mixins/size' as size-mx;
 @use './../mixins/type' as type-mx;
 @use './../variables/components/paragraph';
 
-%list-adjustment {
-  ul {
-    position: relative;
-    margin-top: paragraph.$text-bottom-space;
-    margin-bottom: paragraph.$text-bottom-space;
-    padding-left: map.get(spacing.$post-sizes, 'big');
-    list-style: none;
-    text-align: left;
-
-    li {
-      margin-bottom: paragraph.$text-bottom-space * 0.5;
-
-      &::before {
-        content: '\2013';
-        display: inline-block;
-        position: absolute;
-        left: 0;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
 @each $key, $value in type.$font-curves {
   %font-curve-#{$key} {
     @include type-mx.font-curve($key);
@@ -42,114 +11,3 @@
 %text-bottom-spacer {
   margin-bottom: paragraph.$text-bottom-space; // 0.8 times the size of the current font (20px) = 16px
 }
-
-// Removes margin-top from first and margin-bottom from last child
-%module-container {
-  > :first-child {
-    margin-top: 0;
-  }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-}
-
-%default-module-spacer {
-  margin-top: map.get(spacing.$post-sizes, 'huge'); // 56px
-  margin-bottom: map.get(spacing.$post-sizes, 'huge'); // 56px
-
-  @include media-breakpoint-up(md) {
-    margin-top: map.get(spacing.$post-sizes, 'giant'); // 80px
-    margin-bottom: map.get(spacing.$post-sizes, 'giant'); // 80px
-  }
-}
-
-%text-container {
-  @extend %module-container;
-
-  ul {
-    position: relative;
-    margin-top: paragraph.$text-bottom-space;
-    margin-bottom: paragraph.$text-bottom-space;
-    padding-left: map.get(spacing.$post-sizes, 'big');
-    list-style: none;
-
-    li {
-      @extend %font-curve-regular;
-      @extend %text-bottom-spacer;
-
-      &::before {
-        content: '\2013';
-        display: inline-block;
-        position: absolute;
-        left: 0;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    &.bulletpoints {
-      padding-left: map.get(spacing.$post-sizes, 'big');
-
-      @include media-breakpoint-up(md) {
-        padding-left: map.get(spacing.$post-sizes, 'bigger-big');
-      }
-
-      li {
-        position: relative;
-
-        // stylelint-disable-next-line max-nesting-depth
-        &::before {
-          content: '';
-          position: absolute;
-          top: 2px;
-          left: -(map.get(spacing.$post-sizes, 'big'));
-          width: map.get(spacing.$post-sizes, 'small-large');
-          height: map.get(spacing.$post-sizes, 'small-large');
-          border-radius: 50%;
-
-          @include media-breakpoint-up(md) {
-            left: -(map.get(spacing.$post-sizes, 'bigger-big'));
-            width: map.get(spacing.$post-sizes, 'large');
-            height: map.get(spacing.$post-sizes, 'large');
-          }
-        }
-      }
-    }
-  }
-
-  ol {
-    position: relative;
-    margin-top: paragraph.$text-bottom-space;
-    margin-bottom: paragraph.$text-bottom-space;
-    padding-left: map.get(spacing.$post-sizes, 'big');
-    list-style: none;
-    counter-reset: li-counter;
-
-    li {
-      counter-increment: li-counter;
-
-      &::before {
-        content: counter(li-counter) '.';
-        position: absolute;
-        left: 0;
-      }
-    }
-  }
-
-  .h-highlighted {
-    @extend %font-curve-regular;
-    @extend %text-bottom-spacer;
-    @include size-mx.bezel-regular;
-    background-color: rgba(map.get(color.$background-colors, 'nightblue-bright'), 0.1);
-
-    @include media-breakpoint-up(lg) {
-      @include size-mx.bezel-medium;
-    }
-    @include media-breakpoint-up(xxl) {
-      @include size-mx.bezel-large;
-    }
-  }
-}
diff --git a/packages/styles/tests/placeholders/index.test.scss b/packages/styles/tests/placeholders/index.test.scss
@@ -3,7 +3,3 @@
 .toggler-icon {
   @extend %toggler-icon;
 }
-
-.list-adjustment {
-  @extend %list-adjustment;
-}
diff --git a/packages/styles/tests/placeholders/text.test.scss b/packages/styles/tests/placeholders/text.test.scss
@@ -1,8 +1,6 @@
 @use 'src/placeholders/text';
 
 .list-adjustment {
-  @extend %list-adjustment;
-  @extend %module-container;
   @extend %font-curve-tiny;
   @extend %font-curve-small;
   @extend %font-curve-regular;
@@ -11,9 +9,4 @@
   @extend %font-curve-large;
   @extend %font-curve-big;
   @extend %text-bottom-spacer;
-  @extend %default-module-spacer;
-}
-
-.text-container {
-  @extend %text-container;
 }