Fix(web): Collapse minor updates #DS-275

lmc-eu · Oct 24, 2022 · 565c032 · 565c032
1 parent 8ad0b2b
commit 565c032
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 53 deletions.
diff --git a/packages/web/src/scss/components/Collapse/README.md b/packages/web/src/scss/components/Collapse/README.md
@@ -55,9 +55,9 @@ Hide button when collapse
 
 ## Wrapper attributes
 
-| Prop name         | Type                   | Default | Required | Description           |
-| ----------------- | ---------------------- | ------- | -------- | --------------------- |
-| `data-breakpoint` | `'tablet'`,`'desktop'` | -       | no       | Breakpoint feature \* |
+| Prop name         | Type                   | Default | Required | Description                                                      |
+| ----------------- | ---------------------- | ------- | -------- | ---------------------------------------------------------------- |
+| `data-breakpoint` | `'tablet'`,`'desktop'` | -       | no       | Breakpoint on which the collapsed content is forced to reveal \* |
 
 There can be several triggers, the same rules apply to each.
 

diff --git a/packages/web/src/scss/components/Collapse/_Collapse.scss b/packages/web/src/scss/components/Collapse/_Collapse.scss
@@ -14,8 +14,7 @@
         @if $breakpoint-value > 0 {
             &[data-breakpoint='#{$breakpoint-name}'] {
                 @include breakpoint.up(map.get(theme.$breakpoints, $breakpoint-name)) {
-                    /* This Important rule is important here because it overrides inline styles applied by JavaScript */
-                    /* stylelint-disable declaration-no-important */
+                    /* stylelint-disable declaration-no-important -- This Important rule is important here because it overrides inline styles applied by JavaScript */
                     height: auto !important;
                     /* stylelint-enable declaration-no-important */
                 }

diff --git a/packages/web/src/scss/components/Collapse/index.html b/packages/web/src/scss/components/Collapse/index.html
@@ -7,17 +7,17 @@ <h2 class="docs-Heading">Default with button</h2>
   <!--
     Default Collapse
   -->
-  <button
-    type="button"
-    role="button"
-    data-toggle="collapse"
-    data-target="CollapseExample0"
-    class="Button Button--primary Button--medium"
-  >
-    Collapse trigger
-  </button>
-  <br />
-  <br />
+  <div class="mb-400">
+    <button
+      type="button"
+      role="button"
+      data-toggle="collapse"
+      data-target="CollapseExample0"
+      class="Button Button--primary Button--medium"
+    >
+      Collapse trigger
+    </button>
+  </div>
   <div
     id="CollapseExample0"
     class="Collapse"
@@ -40,18 +40,18 @@ <h2 class="docs-Heading">Collapsed on init with aria or class</h2>
     Collapse with auto open by aria
   -->
   <div class="mb-400">
-    <button
-      type="button"
-      role="button"
-      data-toggle="collapse"
-      data-target="CollapseExampleI"
-      aria-expanded="true"
-      class="Button Button--primary Button--medium"
-    >
-      Collapse trigger
-    </button>
-    <br />
-    <br />
+    <div class="mb-400">
+      <button
+        type="button"
+        role="button"
+        data-toggle="collapse"
+        data-target="CollapseExampleI"
+        aria-expanded="true"
+        class="Button Button--primary Button--medium"
+      >
+        Collapse trigger
+      </button>
+    </div>
     <div
       id="CollapseExampleI"
       class="Collapse"
@@ -71,17 +71,17 @@ <h2 class="docs-Heading">Collapsed on init with aria or class</h2>
     Collapse with auto open by class
   -->
   <div class="mb-400">
-    <button
-      type="button"
-      role="button"
-      data-toggle="collapse"
-      data-target="CollapseExampleII"
-      class="Button Button--primary Button--medium is-expanded"
-    >
-      Collapse trigger
-    </button>
-    <br />
-    <br />
+    <div class="mb-400">
+      <button
+        type="button"
+        role="button"
+        data-toggle="collapse"
+        data-target="CollapseExampleII"
+        class="Button Button--primary Button--medium is-expanded"
+      >
+        Collapse trigger
+      </button>
+    </div>
     <div
       id="CollapseExampleII"
       class="Collapse"
@@ -206,17 +206,17 @@ <h2 class="docs-Heading">Multiple triggers</h2>
   <!--
     Default Collapse
   -->
-  <button
-    type="button"
-    role="button"
-    data-toggle="collapse"
-    data-target="CollapseExampleIV"
-    class="Button Button--primary Button--medium"
-  >
-    Collapse trigger
-  </button>
-  <br />
-  <br />
+  <div class="mb-400">
+    <button
+      type="button"
+      role="button"
+      data-toggle="collapse"
+      data-target="CollapseExampleIV"
+      class="Button Button--primary Button--medium"
+    >
+      Collapse trigger
+    </button>
+  </div>
   <div
     id="CollapseExampleIV"
     class="Collapse"
@@ -228,9 +228,7 @@ <h2 class="docs-Heading">Multiple triggers</h2>
       bibendum nunc aenean facilisis. Phasellus euismod, donec sem odio ligula praesent finibus nibh convallis, tristique aliquam sed id tortor sem lobortis.
     </div>
   </div>
-  <br />
-  <br />
-  <div>
+  <div class="pt-400">
     <button
       type="button"
       role="button"