CSS tweaks to accordion and details components (#122)

nationalarchives · May 22, 2024 · e237a69 · e237a69
1 parent 5f7d6a2
commit e237a69
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 5 deletions.
diff --git a/src/nationalarchives/components/accordion/accordion.scss b/src/nationalarchives/components/accordion/accordion.scss
@@ -22,7 +22,7 @@
   }
 
   &__summary {
-    padding: spacing.space(0.5) spacing.space(2.5) spacing.space(0.5)
+    padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5)
       spacing.space(1);
 
     position: relative;
@@ -45,7 +45,7 @@
       height: 0;
 
       position: absolute;
-      top: calc(50% - 0.5rem);
+      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);
       right: 0.75rem;
 
       border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;
@@ -99,8 +99,6 @@
 
   &__details[open] &__summary {
     &::before {
-      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);
-
       border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;
     }
   }

diff --git a/src/nationalarchives/components/accordion/accordion.stories.js b/src/nationalarchives/components/accordion/accordion.stories.js
@@ -96,6 +96,81 @@ Standard.args = {
   classes: "tna-accordion--demo",
 };
 
+export const OpenItems = Template.bind({});
+OpenItems.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+OpenItems.args = {
+  items: [
+    {
+      title: "Alpha",
+      text: "Content",
+    },
+    {
+      title: "Beta",
+      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>",
+    },
+    {
+      title: "Gamma",
+      body: `<ul class="tna-ul">
+  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+  <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li>
+  <li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
+  <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
+</ul>`,
+      open: true,
+    },
+    {
+      title: "Delta",
+      body: `<div class="tna-table-wrapper">
+  <table class="tna-table">
+    <caption class="tna-table__caption">
+      Records added and removed between 2020 and 2022.
+    </caption>
+    <thead class="tna-table__head">
+      <tr class="tna-table__row">
+        <th class="tna-table__header" scope="col">Year</th>
+        <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
+        <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
+        <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
+      </tr>
+    </thead>
+    <tbody class="tna-table__body">
+      <tr>
+        <th class="tna-table__header" scope="row">2020</th>
+        <td class="tna-table__cell">Rat</td>
+        <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
+        <td class="tna-table__cell tna-table__cell--numeric">789</td>
+      </tr>
+      <tr>
+        <th class="tna-table__header" scope="row">2021</th>
+        <td class="tna-table__cell">Ox</td>
+        <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
+        <td class="tna-table__cell tna-table__cell--numeric">123</td>
+      </tr>
+      <tr>
+        <th class="tna-table__header" scope="row">2022</th>
+        <td class="tna-table__cell">Tiger</td>
+        <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
+        <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
+      </tr>
+    </tbody>
+    <tfoot class="tna-table__foot">
+      <tr>
+        <th class="tna-table__header" scope="row">Totals</th>
+        <td class="tna-table__cell"></td>
+        <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
+        <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
+      </tr>
+    </tfoot>
+  </table>
+</div>`,
+    },
+  ],
+  group: "group-2",
+  classes: "tna-accordion--demo",
+};
+
 export const NoGroup = Template.bind({});
 NoGroup.parameters = {
   chromatic: { disableSnapshot: true },

diff --git a/src/nationalarchives/components/details/details.scss b/src/nationalarchives/components/details/details.scss
@@ -39,7 +39,7 @@
 
       position: absolute;
       top: calc(50% - 0.5rem);
-      left: 1rem;
+      left: 0.75rem;
 
       border-width: 0.5rem 0 0.5rem #{math.div(math.sqrt(3), 2)}rem;
       border-color: transparent transparent transparent