Merge branch 'NXSTAGE-918-accordion-improvements' into 'development'

NXSTAGE-918: Accordion improvements

See merge request julkiset-sivut/design-system-lib!127

src/components/accordion-item/accordion-item.scss

@@ -104,6 +104,21 @@
     span {
       text-align: left;
     }
+
+    // When accordion item is open.
+    &[aria-expanded='true'] {
+      position: relative;
+
+      &:after {
+        background: linear-gradient(to right, var(--grayscale-medium), var(--grayscale-white));
+        bottom: 0;
+        content: '';
+        height: 2px;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+    }
   }
 
   .hy-accordion--heading__icon {
@@ -187,9 +202,15 @@
     display: block;
   }
 
-  hy-box {
+  > hy-box {
+    padding: 20px 16px 0;
+
     @include breakpoint($narrow) {
-      padding: 0 2rem;
+      padding: 20px 24px 0;
+    }
+
+    @include breakpoint($extrawide) {
+      padding: 24px 32px 0;
     }
   }
 }

src/components/hy-two-columns/hy-two-columns.scss

@@ -29,18 +29,35 @@
       flex-direction: row-reverse;
     }
 
-    .hy-two-columns--side {
+    .hy-two-columns__item--side {
       margin-left: 0;
       margin-right: 0;
 
       @include breakpoint($narrow) {
         margin-right: 5.79%;
       }
+
       @include breakpoint($wide) {
         margin-right: 8.5%;
       }
     }
   }
+}
+
+.hy-two-columns__item {
+  width: 100%;
+
+  [slot='main'] {
+    width: 100%;
+
+    .hy-paragraph-text {
+      width: 100% !important;
+    }
+  }
+
+  [slot='side'] {
+    width: 100%;
+  }
 
   &--main {
     display: flex;
@@ -50,16 +67,10 @@
     @include breakpoint($narrow) {
       flex-basis: 67.01%;
     }
+
     @include breakpoint($wide) {
       flex-basis: 63%;
     }
-
-    [slot='main'] {
-      width: 100%;
-      .hy-paragraph-text {
-        width: 100% !important;
-      }
-    }
   }
 
   &--side {
@@ -75,16 +86,13 @@
       flex-basis: 32.99%; // sidebar width is always 4.5 column of the global 12-col content area grid.
       margin-left: 5.79%; // (half of the column+gutter) of global 12-col grid = gap between main and sidebar
     }
+
     @include breakpoint($wide) {
       flex-basis: 37%;
       margin-left: 8.5%; // (1 column + gutter) of global 12-col grid = gap between main and sidebar
       padding: 0;
     }
 
-    [slot='side'] {
-      width: 100%;
-    }
-
     // Key figure block inside Sidebar
     hy-key-figure {
       padding: 0 10.67%;

src/components/hy-two-columns/hy-two-columns.tsx

@@ -14,10 +14,10 @@ export class HyTwoColumns {
     return (
       <Host>
         <div class={classAttributes}>
-          <div class="hy-two-columns--main">
+          <div class="hy-two-columns__item hy-two-columns__item--main">
             <slot name="main"></slot>
           </div>
-          <div class="hy-two-columns--side">
+          <div class="hy-two-columns__item hy-two-columns__item--side">
             <slot name="side"></slot>
           </div>
         </div>

src/components/hy-two-columns/test/hy-two-columns.spec.tsx

@@ -14,10 +14,10 @@ describe('hy-two-columns', () => {
     expect(page.root).toEqualHtml(`
       <hy-two-columns>
         <div class="hy-two-columns">
-          <div class="hy-two-columns--main">
+          <div class="hy-two-columns__item hy-two-columns__item--main">
             <div slot="main"></div>
           </div>
-          <div class="hy-two-columns--side">
+          <div class="hy-two-columns__item hy-two-columns__item--side">
             <div slot="side"></div>
           </div>
         </div>

src/components/paragraph-text/paragraph-text.scss

@@ -65,6 +65,10 @@
   p {
     margin-top: 0;
     padding-top: 0;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
   }
 
   // When hy-paragraph-text is the first child it will not add spacing to top. Will fix heading + text spacing issue.