review comments update

swisspost · Jan 7, 2025 · b1bc75e · b1bc75e
1 parent a185fa4
commit b1bc75e
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 43 deletions.
diff --git a/packages/documentation/cypress/snapshots/utilities/gutters.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/gutters.snapshot.ts
@@ -1,7 +1,7 @@
 describe('Gutters', () => {
   it('Gutters', () => {
     cy.visit('/iframe.html?id=snapshots--gutters');
-    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
-    cy.percySnapshot('Sizing', { widths: [320, 780, 1024, 1440] });
+    cy.get('.gutters-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Gutters', { widths: [320, 780, 1024, 1440] });
   });
 });
diff --git a/packages/documentation/src/stories/foundations/layout/grid/grid.docs.mdx b/packages/documentation/src/stories/foundations/layout/grid/grid.docs.mdx
@@ -106,6 +106,11 @@ To control the space between your columns, add either `.g-*` (horizontal and ver
 
 <Canvas of={GridStories.Gutters} />
 
+<div className="banner banner-info my-24">
+  You can find additional information and examples of grid gutters{' '}
+  <a href="/?path=/docs/64b63483-79fa-4e9f-9441-f7d6b2eabae2--docs">here</a>.
+</div>
+
 ## Nesting
 
 To nest your content with the default grid, add a new `.row` and set of `.col-*` columns within an existing `.col-*` column. Nested rows should include a set of columns that add up to 12 or fewer.

diff --git a/packages/documentation/src/stories/utilities/gutters/gutters.docs.mdx b/packages/documentation/src/stories/utilities/gutters/gutters.docs.mdx
@@ -53,6 +53,6 @@ Gutters can be eliminated by applying the classes `.g-0`, `.gx-0`, or `.gy-0`, w
 
 Breakpoint-specific classes allow precise control of horizontal, vertical, and general gutters at various screen sizes.
 
-- `.gx-{breakpoint}-{size}` (e.g. gx-lg-2s4)
-- `.gy-{breakpoint}-{size}` (e.g. gy-sm-32)
-- `.g-{breakpoint}-{size}` (e.g. g-md-12)
+- `.gx-{breakpoint}-{size}` (e.g. `gx-lg-24`)
+- `.gy-{breakpoint}-{size}` (e.g. `gy-sm-32`)
+- `.g-{breakpoint}-{size}` (e.g. `g-md-12`)
diff --git a/packages/documentation/src/stories/utilities/gutters/gutters.stories.ts b/packages/documentation/src/stories/utilities/gutters/gutters.stories.ts
@@ -21,7 +21,7 @@ const sizes = properties.reduce((options, property) => {
 
 const meta: MetaExtended = {
   id: '64b63483-79fa-4e9f-9441-f7d6b2eabae2',
-  title: 'Utilities/Gutters',
+  title: 'Foundations/Layout/Gutters',
   decorators: [
     (story: StoryFn, context: StoryContext) => {
       const storyTemplate = html`<div class="gutters-example">
@@ -57,16 +57,16 @@ export const HorizontalGutters: Story = {
       <div class="container">
         <div class="row gx${breakpointClass}-${args.gutterX}">
             <div class="col">
-              <div>Text</div>
+             col
             </div>
             <div class="col">
-              <div>Text</div>
+             col
             </div>
             <div class="col">
-              <div>Text</div>
+             col
             </div>
            <div class="col">
-              <div>Text</div>
+           col
             </div>
           </div>
         </div>
@@ -96,22 +96,22 @@ export const VerticalGutters: Story = {
       <div class="container">
         <div class="row gy${breakpointClass}-${args.gutterY}">
             <div class="col-6">
-              <div>Text</div>
+         col
             </div>
             <div class="col-6">
-              <div>Text</div>
+            col
             </div>
             <div class="col-6">
-              <div>Text</div>
+            col
             </div>
            <div class="col-6">
-              <div>Text</div>
+         col
             </div>
              <div class="col-6">
-              <div>Text</div>
+          col
             </div>
             <div class="col-6">
-                  <div>Text</div>
+                  col
             </div>
           </div>
         </div>

diff --git a/packages/documentation/src/stories/utilities/gutters/gutters.styles.scss b/packages/documentation/src/stories/utilities/gutters/gutters.styles.scss
@@ -1,34 +1,15 @@
-@use 'sass:color';
-@use '@swisspost/design-system-styles/core' as post;
-
-$gutter-color: color.adjust(#7566a0, $lightness: 30%);
-$content-color: post.$white;
-$border: 1px solid post.$gray-40;
-
 .gutters-example,
 .gutters-snapshot-example {
-  .row:has(> .col-6) {
-    background-color: $gutter-color;
-
+  text-align: center;
+  .row {
+    .col,
     .col-6 {
-      background-color: $gutter-color;
-      border: $border;
-
-      > div {
-        background-color: $content-color;
-        text-align: center;
-      }
+      background: linear-gradient(#b8e2f3, #b8e2f3), linear-gradient(#a69ce1, #a69ce1);
+      background-clip: content-box, border-box;
+      color: #59718b;
     }
   }
-  .row:has(> .col) {
-    .col {
-      background-color: $gutter-color;
-      border: $border;
-
-      > div {
-        background-color: $content-color;
-        text-align: center;
-      }
-    }
+  .row:has(.col-6) {
+    background: linear-gradient(#a69ce1, #a69ce1);
   }
 }