Merge branch 'main' into 3975-remove-rg-and-xxl-breakpoints

.changeset/dry-moons-walk.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed the deprecated `.pi-*` classes, which were previously used to display icons. The `post-icon` component should now be used instead.

.changeset/metal-rivers-look.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added custom styles for the ordered lists.

packages/components/cypress/e2e/list.cy.ts

@@ -58,3 +58,10 @@ describe('PostList Component', { baseUrl: null, includeShadowDom: false }, () =>
     });
   });
 });
+
+describe('Accessibility', () => {
+  it('Has no detectable a11y violations on load for all variants', () => {
+    cy.getSnapshots('post-list');
+    cy.checkA11y('#root-inner');
+  });
+});

packages/documentation/.storybook/preview-head.html

@@ -13,7 +13,7 @@
 <meta name="design-system-settings" data-post-icon-base="/post-icons" />
 <meta
   http-equiv="Content-Security-Policy"
-  content="connect-src 'self' *.coveo.com *.post.ch *.gravatar.com"
+  content="connect-src 'self' *.coveo.com *.post.ch *.gravatar.com *.app.github.dev"
 />
 
 <script>

packages/documentation/cypress/e2e/components/list.cy.ts

@@ -0,0 +1,13 @@
+describe('List', () => {
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      cy.visit('/iframe.html?id=snapshots--list');
+      cy.get('ol', { timeout: 30000 }).should('be.visible');
+      cy.injectAxe();
+    });
+
+    it('Has no detectable a11y violations on load for all variants', () => {
+      cy.checkA11y('#root-inner');
+    });
+  });
+});

packages/documentation/cypress/snapshots/components/list.snapshot.ts

@@ -1,7 +1,7 @@
 describe('List', () => {
   it('default', () => {
-    cy.visit('/iframe.html?id=snapshots--post-list');
-    cy.get('list-example', { timeout: 30000 }).should('be.visible');
-    cy.percySnapshot('List', { widths: [1440] });
+    cy.visit('/iframe.html?id=snapshots--list');
+    cy.get('ol', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Lists', { widths: [1440] });
   });
 });

packages/documentation/src/stories/components/list/list.snapshot.stories.ts

@@ -50,3 +50,47 @@ export const PostList: Story = {
     },
   ],
 };
+
+export const List: Story = {
+  render: () => {
+    return html`
+      <div class="d-flex">
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div class="${bg} p-5">
+              <ol>
+                <li>This is an ordered list.</li>
+                <li>It appears in its default style.</li>
+                <li>
+                  Therefore it should be rendered with sequential numbers at the beginning of each
+                  list item.
+                </li>
+                <li>
+                  Nested list:
+                  <ol>
+                    <li>This is a nested list</li>
+                    <li>It is further indented, depending on the depth of nesting.</li>
+                    <li>Nested lists numbers are independent form the numbers of their parents.</li>
+                  </ol>
+                  After nested list item
+                </li>
+                <li>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                  pariatur
+                </li>
+                <li>Ordered list item</li>
+                <li>Ordered list item</li>
+                <li>Ordered list item</li>
+                <li>Ordered list item</li>
+                <li>Ordered list item</li>
+              </ol>
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};

packages/styles/src/components/_index.scss

@@ -26,7 +26,6 @@
 @use 'grid';
 @use 'icon-button';
 @use 'icon-close-button';
-@use 'icons';
 @use 'lead';
 @use 'list-group';
 @use 'modal';

packages/styles/src/components/card.scss

@@ -59,7 +59,6 @@
   .link-icon {
     text-decoration: none;
 
-    .pi,
     post-icon {
       width: 1.5rem;
       height: 1.5rem;

packages/styles/src/components/datepicker.scss

@@ -146,13 +146,6 @@ span.ngb-dp-navigation-chevron {
   width: forms.$input-height-inner;
   background: transparent;
 
-  // DEPRECATED
-  .pi-calendar {
-    @include icons-mx.icon(3203);
-  }
-
-  .pi-calendar,
-  .pi-3203,
   post-icon {
     width: datepicker.$ngb-dp-icon-size;
     height: datepicker.$ngb-dp-icon-size;
@@ -174,8 +167,6 @@ span.ngb-dp-navigation-chevron {
   height: calc(#{forms.$form-floating-height} - #{forms.$input-border-width * 2});
   width: forms.$input-height-inner-lg;
 
-  .pi-3203,
-  .pi-calendar,
   post-icon {
     width: datepicker.$ngb-dp-icon-size-lg;
     height: datepicker.$ngb-dp-icon-size-lg;

packages/styles/src/components/intranet-header/_icon.scss

@@ -2,5 +2,5 @@
 
 .navbar-toggler .pi-menu,
 #sidebar .pi-menu {
-  @include icon-mixin.pi(2070);
+  @include icon-mixin.icon(2070);
 }

packages/styles/src/components/intranet-header/_sidebar.scss

@@ -62,12 +62,6 @@
       &:focus {
         background-color: color.$light;
       }
-
-      i.pi {
-        height: spacing.$spacer;
-        line-height: spacing.$spacer;
-        vertical-align: text-top;
-      }
     }
 
     &:not(.closed) > div > ul > li:first-child {

packages/styles/src/components/product-card.scss

@@ -48,7 +48,6 @@
     color: inherit;
     text-decoration: none;
 
-    > .pi,
     > post-icon {
       flex-shrink: 0;
       width: 3rem;

packages/styles/src/elements/_index.scss

@@ -5,4 +5,5 @@
 @use 'list-bullet';
 @use 'paragraph';
 @use 'fieldset-legend';
+@use 'list';
 @use 'heading';

packages/styles/src/elements/list.scss

@@ -0,0 +1,28 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-listnumber;
+
+ol {
+  display: grid;
+  grid-template-columns: [marker] auto [item] 1fr;
+  list-style: none;
+  counter-reset: ol;
+  padding: tokens.get('list-number-item-gap-block');
+  gap: tokens.get('list-number-margin-block');
+
+  > li {
+    display: grid;
+    grid-template-columns: subgrid;
+    counter-increment: ol;
+    column-gap: tokens.get('list-number-item-icon-gap-inline');
+    grid-column: span 2;
+
+    &::before {
+      text-align: right;
+      content: counter(ol) '.';
+      grid-column: marker;
+      grid-row: span 30000;
+    }
+  }
+}

packages/styles/src/functions/_icons.scss

@@ -61,9 +61,9 @@
 
   @if (map.has-key(icons.$svg-icon-map, #{$icon-name})) {
     $svg-url: map.get(icons.$svg-icon-map, #{$icon-name});
-  } @else if(map.has-key(icons.$svg-unofficial-icon-map, #{$icon-name})) {
+  } @else if(map.has-key(icons.$notification-icons, #{$icon-name})) {
     $svg-url: icons.$svg-pre-path +
-      map.get(icons.$svg-unofficial-icon-map, #{$icon-name}) +
+      map.get(icons.$notification-icons, #{$icon-name}) +
       icons.$svg-post-path;
   } @else {
     @error "Icon '#{$icon-name}' does not exist.";
@@ -75,15 +75,3 @@
 @function get-colored-svg-url($icon-name, $color) {
   @return add-fill-color(get-svg-url($icon-name), $color);
 }
-
-@function get-pre-colored-svg-url($icon-name) {
-  $path-definition: map.get(icons.$svg-pre-colored-icon-map, #{$icon-name});
-
-  @if (not map.has-key(icons.$svg-pre-colored-icon-map, #{$icon-name})) {
-    @error "Icon '#{$icon-name}' does not exist.";
-  }
-
-  $svg-url: icons.$svg-pre-path + $path-definition + icons.$svg-post-path;
-
-  @return $svg-url;
-}

packages/styles/src/mixins/_button.scss

@@ -28,7 +28,6 @@ tokens.$default-map: components.$post-button;
   gap: map.get(button.$btn-gap-x-map, $size);
   padding: 0 map.get(button.$btn-padding-x-map, $size);
 
-  > .pi,
   > post-icon {
     width: map.get(button.$btn-icon-size-map, $size);
     height: map.get(button.$btn-icon-size-map, $size);

packages/styles/src/mixins/_icon-button.scss

@@ -17,7 +17,6 @@ tokens.$default-map: components.$post-icon-button;
   width: tokens.get('icon-button-#{$actual-size}-outer');
   height: tokens.get('icon-button-#{$actual-size}-outer');
 
-  > .pi,
   > post-icon {
     min-width: tokens.get('icon-button-#{$actual-size}-icon');
     height: tokens.get('icon-button-#{$actual-size}-icon');

packages/styles/src/mixins/_icons.scss

@@ -17,32 +17,3 @@
 @mixin remove-icon() {
   mask-image: none;
 }
-
-// DEPRECATED
-@mixin pi($name, $color: color.$black) {
-  $type: meta.type-of($color);
-  $final-color: $color;
-
-  @if ($type != color) {
-    $final-color: map.get(color.$background-colors, $color);
-
-    @if (not $final-color) {
-      @error "Error in Mixin 'pi(name, color?)'. Color '#{$color}' is not available. Please choose one of the following: #{map.keys(color.$background-colors)}.";
-    }
-  }
-  border-color: $final-color;
-  background-image: url('#{icon-fn.get-colored-svg-url($name, $final-color)}');
-
-  // set icon to white on hcm
-  @include utilities.high-contrast-mode() {
-    @if ($final-color == color.$black) {
-      filter: invert(100%);
-    } @else {
-      background-image: url('#{icon-fn.get-colored-svg-url($name, color.$white)}');
-    }
-  }
-}
-
-@mixin pi-pre($name) {
-  background-image: url('#{icon-fn.get-pre-colored-svg-url($name)}');
-}

packages/styles/src/mixins/_notification.scss

@@ -26,24 +26,6 @@
   font-size: $font-size;
   font-weight: notification.$notification-font-weight;
 
-  &.no-icon {
-    min-height: 2 * $padding-y + close.$close-size;
-    padding-inline-start: $padding-x;
-  }
-
-  // for notifications with .pi-* icons (deprecated)
-  &[class^='pi-'],
-  &[class*=' pi-'] {
-    background-size: $icon-size;
-    background-position: $padding-x $padding-y;
-    background-repeat: no-repeat;
-
-    &.no-icon {
-      background-image: none;
-    }
-  }
-
-  // for notifications with mask-image icons and post-icon override
   &::before {
     content: '';
     display: block;
@@ -58,9 +40,10 @@
     top: $padding-y;
   }
 
-  &.no-icon,
-  &[class^='pi-'],
-  &[class*=' pi-'] {
+  &.no-icon {
+    min-height: 2 * $padding-y + close.$close-size;
+    padding-inline-start: $padding-x;
+
     &::before {
       content: unset;
     }
@@ -109,7 +92,7 @@
   @include color-mx.colored-background($color, $allow-alpha: false);
 
   // default icon (mask-image)
-  &:not(.no-icon, [class^='pi-'], [class*=' pi-'])::before {
+  &:not(.no-icon)::before {
     @include icons-mx.icon($icon);
   }