chore(documentation): update CSS card-control styles and merge docs p…

…ages with the one from the web-component (#2847) Co-authored-by: Loïc Fürhoff <[email protected]>
swisspost · Apr 24, 2024 · a1a73b7 · a1a73b7
1 parent 4331404
commit a1a73b7
Show file tree

Hide file tree

Showing 24 changed files with 921 additions and 716 deletions.
diff --git a/.changeset/sixty-dancers-ring.md b/.changeset/sixty-dancers-ring.md
@@ -0,0 +1,8 @@
+---
+'@swisspost/design-system-components-angular-workspace': patch
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Merged the card-control, checkbox-card and radio button card docs pages and updated the choice-card-control styles.
diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
@@ -40,11 +40,6 @@ <h2>Post Icon</h2>
   <post-icon name="1001"></post-icon>
 </div>
 
-<div class="my-4">
-  <h2>Post Rating</h2>
-  <post-rating></post-rating>
-</div>
-
 <div class="my-4">
   <h2>Post Popover</h2>
   <button class="btn btn-secondary btn-large" data-popover-target="popover-one">
@@ -66,6 +61,11 @@ <h2>Post Popovercontainer</h2>
   <post-popovercontainer></post-popovercontainer>
 </div>
 
+<div class="my-4">
+  <h2>Post Rating</h2>
+  <post-rating></post-rating>
+</div>
+
 <div class="my-4">
   <h2>Post Tabs</h2>
   <post-tabs>

diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -30,9 +30,7 @@
   border: post.$size-line solid var(--post-card-control-border-color);
   border-radius: post.$border-radius;
   color: var(--post-card-control-color);
-
   cursor: pointer;
-  transition: background-color 100ms linear, border-color 100ms linear;
 
   .card-control--input {
     grid-area: input;
@@ -41,12 +39,19 @@
     border-color: var(--post-card-control-input-border-color) !important;
     color: var(--post-card-control-input-border-color) !important;
     cursor: inherit;
-    transition: border-color 100ms ease-in-out;
+    transition: none;
 
     &:focus,
     &:focus-visible {
       box-shadow: none;
     }
+
+    @include post.high-contrast-mode() {
+      &::after {
+        forced-color-adjust: none;
+        border-color: transparent;
+      }
+    }
   }
 
   .card-control--label {
@@ -88,6 +93,20 @@
     &.is-checked {
       --post-card-control-border-color: #{post.$black};
       --post-card-control-bg: #{post.$yellow};
+
+      @include post.high-contrast-mode() {
+        --post-card-control-border-color: FieldText;
+        --post-card-control-bg: SelectedItem;
+        --post-card-control-color: SelectedItemText;
+        --post-card-control-input-border-color: SelectedItemText;
+        --post-card-control-input-bg: SelectedItem;
+
+        .card-control--input {
+          &::after {
+            background-color: var(--post-card-control-color) !important;
+          }
+        }
+      }
     }
 
     &.is-invalid {
@@ -101,6 +120,20 @@
       --post-card-control-bg: #{post.$gray-60};
       --post-card-control-color: #{post.$white};
       --post-card-control-input-border-color: #{post.$black};
+
+      @include post.high-contrast-mode() {
+        --post-card-control-border-color: Highlight;
+        --post-card-control-bg: Field;
+        --post-card-control-color: FieldText;
+        --post-card-control-input-border-color: Highlight;
+        --post-card-control-input-bg: Field;
+
+        .card-control--input {
+          &::after {
+            color: FieldText;
+          }
+        }
+      }
     }
   }
 
@@ -126,6 +159,35 @@
     .card-control--input {
       border-style: dashed;
     }
+
+    @include post.high-contrast-mode() {
+      --post-card-control-border-color: GrayText;
+      --post-card-control-color: GrayText;
+      --post-card-control-input-border-color: GrayText;
+
+      &.is-checked {
+        --post-card-control-input-bg: field;
+
+        position: relative;
+
+        &::before {
+          display: block;
+          content: '';
+          position: absolute;
+          inset: post.$size-line;
+          border-radius: post.$size-line * 0.5;
+          background-color: SelectedItem;
+        }
+
+        > * {
+          position: relative;
+        }
+
+        .card-control--input {
+          outline: post.$size-line solid Field;
+        }
+      }
+    }
   }
 
   :host-context(:is(#{post.$dark-backgrounds})) & {
@@ -146,8 +208,12 @@
         --post-card-control-input-border-color: #{post.$gray-80};
         --post-card-control-input-bg: #{post.$white};
 
-        &.is-invalid {
-          --post-card-control-bg: #{post.$yellow};
+        @include post.high-contrast-mode() {
+          --post-card-control-border-color: FieldText;
+          --post-card-control-bg: SelectedItem;
+          --post-card-control-color: SelectedItemText;
+          --post-card-control-input-border-color: SelectedItemText;
+          --post-card-control-input-bg: SelectedItem;
         }
       }
 
@@ -157,6 +223,18 @@
         --post-card-control-color: #{post.$error};
         --post-card-control-input-border-color: #{post.$error};
         --post-card-control-input-bg: #{post.$white};
+
+        &.is-checked {
+          --post-card-control-bg: #{post.$yellow};
+
+          @include post.high-contrast-mode() {
+            --post-card-control-border-color: FieldText;
+            --post-card-control-bg: SelectedItem;
+            --post-card-control-color: SelectedItemText;
+            --post-card-control-input-border-color: SelectedItemText;
+            --post-card-control-input-bg: SelectedItem;
+          }
+        }
       }
 
       &:hover {
@@ -165,6 +243,14 @@
         --post-card-control-color: #{post.$black};
         --post-card-control-input-border-color: #{post.$black};
         --post-card-control-input-bg: #{post.$white};
+
+        @include post.high-contrast-mode() {
+          --post-card-control-border-color: Highlight;
+          --post-card-control-bg: Field;
+          --post-card-control-color: FieldText;
+          --post-card-control-input-border-color: Highlight;
+          --post-card-control-input-bg: Field;
+        }
       }
     }
 
@@ -175,13 +261,22 @@
       }
     }
 
-    // TODO: update white alpha colors with design-system alpha colors, once they are defined
     &.is-disabled {
-      --post-card-control-border-color: #{#{rgba(post.$white, 0.8)}};
+      --post-card-control-border-color: post.$white-alpha-80;
       --post-card-control-bg: transparent;
-      --post-card-control-color: #{#{rgba(post.$white, 0.8)}};
-      --post-card-control-input-border-color: #{#{rgba(post.$white, 0.8)}};
+      --post-card-control-color: post.$white-alpha-80;
+      --post-card-control-input-border-color: post.$white-alpha-80;
       --post-card-control-input-bg: transparent;
+
+      @include post.high-contrast-mode() {
+        --post-card-control-border-color: GrayText;
+        --post-card-control-color: GrayText;
+        --post-card-control-input-border-color: GrayText;
+
+        &.is-checked {
+          --post-card-control-input-bg: Field;
+        }
+      }
     }
   }
 }
@@ -213,8 +308,12 @@
         --post-card-control-input-border-color: #{post.$gray-80};
         --post-card-control-input-bg: #{post.$white};
 
-        &.is-invalid {
-          --post-card-control-bg: #{post.$yellow};
+        @include post.high-contrast-mode() {
+          --post-card-control-border-color: FieldText;
+          --post-card-control-bg: SelectedItem;
+          --post-card-control-color: SelectedItemText;
+          --post-card-control-input-border-color: SelectedItemText;
+          --post-card-control-input-bg: SelectedItem;
         }
       }
 
@@ -224,6 +323,18 @@
         --post-card-control-color: #{post.$error};
         --post-card-control-input-border-color: #{post.$error};
         --post-card-control-input-bg: #{post.$white};
+
+        &.is-checked {
+          --post-card-control-bg: #{post.$yellow};
+
+          @include post.high-contrast-mode() {
+            --post-card-control-border-color: FieldText;
+            --post-card-control-bg: SelectedItem;
+            --post-card-control-color: SelectedItemText;
+            --post-card-control-input-border-color: SelectedItemText;
+            --post-card-control-input-bg: SelectedItem;
+          }
+        }
       }
 
       &:hover {
@@ -232,6 +343,14 @@
         --post-card-control-color: #{post.$black};
         --post-card-control-input-border-color: #{post.$black};
         --post-card-control-input-bg: #{post.$white};
+
+        @include post.high-contrast-mode() {
+          --post-card-control-border-color: Highlight;
+          --post-card-control-bg: Field;
+          --post-card-control-color: FieldText;
+          --post-card-control-input-border-color: Highlight;
+          --post-card-control-input-bg: Field;
+        }
       }
     }
 
@@ -242,13 +361,22 @@
       }
     }
 
-    // TODO: update white alpha colors with design-system alpha colors, once they are defined
     &.is-disabled {
       --post-card-control-border-color: post.$white-alpha-80;
       --post-card-control-bg: transparent;
       --post-card-control-color: post.$white-alpha-80;
       --post-card-control-input-border-color: post.$white-alpha-80;
       --post-card-control-input-bg: transparent;
+
+      @include post.high-contrast-mode() {
+        --post-card-control-border-color: GrayText;
+        --post-card-control-color: GrayText;
+        --post-card-control-input-border-color: GrayText;
+
+        &.is-checked {
+          --post-card-control-input-bg: Field;
+        }
+      }
     }
   }
 }
diff --git a/.../cypress/e2e/components/choice-card.cy.ts → ...mponents/card-control-standard-html.cy.ts b/.../cypress/e2e/components/choice-card.cy.ts → ...mponents/card-control-standard-html.cy.ts
@@ -1,7 +1,7 @@
 describe('Choice-card', () => {
   describe('Accessibility', () => {
     beforeEach(() => {
-      cy.visit('/iframe.html?id=snapshots--choice-card');
+      cy.visit('/iframe.html?id=snapshots--card-control-standard-html');
       cy.get('.radio-button-card', { timeout: 30000 }).should('be.visible');
       cy.injectAxe();
     });