Merge pull request #27 from UrbanInstitute/section-break

Section break

CHANGELOG.md

@@ -1,9 +1,13 @@
 # @UrbanInstitute/dataviz-components Changelog
 
-## 0.3.3
+## Next
 
+- Add SectionBreak component
 - Update urbanColors module to align more closely with the Urban Institute data visualization styleguide
 - Improve urbanColors documentation
+
+## 0.3.3
+
 - Add descriptions to Storybook documentation
 - Bugfix: remove unchecked call to window in Datawrapper events
 

src/lib/SectionBreak/SectionBreak.stories.svelte

@@ -0,0 +1,50 @@
+<script context="module">
+  import SectionBreak from "./SectionBreak.svelte";
+
+  export const meta = {
+    title: "Components/SectionBreak",
+    description: "Section break element that includes a number, a subhead and a horizontal rule.",
+    component: SectionBreak,
+    tags: ["autodocs"],
+    parameters: {
+      docs: {
+        description: {
+          component:
+            "Section break element that includes a number, a subhead and a horizontal rule."
+        }
+      }
+    }
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+  <SectionBreak {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args={{
+    number: "1",
+    subhead: "This is a subhead"
+  }}
+/>
+<Story
+  name="With accent color"
+  args={{
+    number: "1",
+    subhead: "This is a subhead",
+    accentColor: "var(--color-blue)"
+  }}
+/>
+<Story
+  name="With font weight"
+  args={{
+    number: "1",
+    subhead: "This is a subhead",
+    fontWeight: "var(--font-weight-bold)"
+  }}
+/>

src/lib/SectionBreak/SectionBreak.svelte

@@ -0,0 +1,82 @@
+<!-- @component `SectionBreak` [Read the docs.](https://urbaninstitute.github.io/dataviz-components/?path=/docs/components-sectionbreak--docs) -->
+<script>
+  import "../style/app.css";
+  /**
+   * String to display as the "number" of the section
+   * @type { string }
+   **/
+  export let number;
+  /**
+   * String to display as the subhead
+   * @type { string }
+   **/
+  export let subhead;
+  /**
+   * Color to be used for the number
+   * @type { string } [accentColor="#9d9d9d"]
+   **/
+  export let accentColor = "#9d9d9d";
+  /**
+   * Font weight of the number
+   * @type { string } [fontWeight="var(--font-weight-light)"]
+   **/
+  export let fontWeight = "var(--font-weight-light)";
+</script>
+
+<div class="section-break" style:--accent-color={accentColor} style:--font-weight={fontWeight}>
+  <span class="section-number">{number}.</span>
+  <div class="section-line" />
+</div>
+<h2>{subhead}</h2>
+
+<style>
+  .section-break {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-start;
+    margin-bottom: var(--spacing-12);
+  }
+  .section-number {
+    font-size: 5rem;
+    color: var(--accent-color, #9d9d9d);
+    line-height: 1;
+    margin-right: var(--spacing-6);
+    flex-shrink: 0;
+    font-family: Lato;
+    font-weight: var(--font-weight);
+  }
+  .section-line {
+    width: 100%;
+    border-bottom: solid 1px var(--color-gray, #9d9d9d);
+    transform: translateY(-10px);
+    flex-shrink: 1;
+  }
+
+  h2 {
+    font-family: var(--font-family-sans);
+    color: var(--color-black);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-3xl);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-snug);
+    text-transform: none;
+    margin-bottom: 0;
+  }
+  @media screen and (min-width: 376px) {
+    .section-break {
+      margin-bottom: var(--spacing-10);
+    }
+  }
+  @media screen and (min-width: 768px) {
+    h2 {
+      font-size: var(--font-size-4xl);
+    }
+    .section-number {
+      margin-right: var(--spacing-4);
+    }
+    .section-line {
+      display: inline-block;
+      vertical-align: text-bottom;
+    }
+  }
+</style>