Merge pull request #49 from agilecollective/feature/section

Section component

Author: tillywoodfield

src/scss/components/_index.scss

@@ -9,6 +9,7 @@
 @forward "icon/icon";
 @forward "jump-menu/jump-menu";
 @forward "search-bar/search-bar";
+@forward "section/section";
 @forward "table/table";
 @forward "menu-toggle/menu-toggle";
 @forward "message/message";

src/scss/components/section/_section.scss

@@ -0,0 +1,29 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/spacing" as *;
+
+.iati-section {
+  &__title {
+    text-transform: uppercase;
+    background-color: $color-teal-90;
+    color: #fff;
+    font-size: 1.0625rem;
+    padding: 0.5rem 1rem;
+    font-weight: 700;
+    margin: 0;
+  }
+  &__content {
+    padding-block: 1rem;
+    > * {
+      margin: 0 0 1rem;
+    }
+    > *:last-child {
+      margin: 0;
+    }
+  }
+  &--fill {
+    .iati-section__content {
+      padding-inline: 1rem;
+      background-color: $color-teal-10;
+    }
+  }
+}

src/scss/components/section/section.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { html } from "lit";
+
+const meta: Meta = {
+  title: "Components/Section",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => html`
+    <div class="iati-section">
+      <h2 class="iati-section__title">About</h2>
+      <div class="iati-section__content">
+        <p>
+          The time-lag statistics attempt to assess how up to date the data
+          is at the point that it is refreshed. For instance a publisher may
+          refresh their data monthly, but the refreshed data is in fact three
+          months old. Alternatively a publisher may only refresh their data once
+          a year, but when they do it contains current data that is less than
+          one month out of date.
+        </p>
+        <p>
+          Transactions are the most numerous and most regularly refreshed
+          elements in reported IATI activities and they are therefore used to
+          make this assessment.
+        </p>
+        <p>
+          The table of statistics shows the number of transaction dates reported
+          in each of the last twelve calendar months. The current month is shown
+          for informational purposes, but excluded from the assessment.
+        </p>
+      </div>
+    </div>
+  `,
+};
+
+export const Fill: Story = {
+  render: () => html`
+    <div class="iati-section iati-section--fill">
+      <h2 class="iati-section__title">About</h2>
+      <div class="iati-section__content">
+        <p>
+          The time-lag statistics attempt to assess how up to date the data
+          is at the point that it is refreshed. For instance a publisher may
+          refresh their data monthly, but the refreshed data is in fact three
+          months old. Alternatively a publisher may only refresh their data once
+          a year, but when they do it contains current data that is less than
+          one month out of date.
+        </p>
+        <p>
+          Transactions are the most numerous and most regularly refreshed
+          elements in reported IATI activities and they are therefore used to
+          make this assessment.
+        </p>
+        <p>
+          The table of statistics shows the number of transaction dates reported
+          in each of the last twelve calendar months. The current month is shown
+          for informational purposes, but excluded from the assessment.
+        </p>
+      </div>
+    </div>
+  `,
+};