From 68e2eeb48f9726d37858899988eaa4e10bc30a0a Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Thu, 15 Feb 2024 18:26:22 -0500
Subject: [PATCH 1/4] Add SectionBreak component

---
 .../SectionBreak/SectionBreak.stories.svelte  | 50 +++++++++++
 src/lib/SectionBreak/SectionBreak.svelte      | 82 +++++++++++++++++++
 2 files changed, 132 insertions(+)
 create mode 100644 src/lib/SectionBreak/SectionBreak.stories.svelte
 create mode 100644 src/lib/SectionBreak/SectionBreak.svelte

diff --git a/src/lib/SectionBreak/SectionBreak.stories.svelte b/src/lib/SectionBreak/SectionBreak.stories.svelte
new file mode 100644
index 00000000..c2dacd23
--- /dev/null
+++ b/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)"
+  }}
+/>
diff --git a/src/lib/SectionBreak/SectionBreak.svelte b/src/lib/SectionBreak/SectionBreak.svelte
new file mode 100644
index 00000000..be337198
--- /dev/null
+++ b/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(--fknt-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>

From 292960dbf8ffa34a517d3661e30ac817da8c6753 Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Thu, 15 Feb 2024 18:26:54 -0500
Subject: [PATCH 2/4] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 32f28fc9..caa53b6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 0.3.3
 
+- Add SectionBreak component
 - Update urbanColors module to align more closely with the Urban Institute data visualization styleguide
 - Improve urbanColors documentation
 - Add descriptions to Storybook documentation

From 5e281be7b45173bb1910faf23cf40a33231e4a87 Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Thu, 15 Feb 2024 21:54:55 -0500
Subject: [PATCH 3/4] Fix typo

---
 src/lib/SectionBreak/SectionBreak.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/SectionBreak/SectionBreak.svelte b/src/lib/SectionBreak/SectionBreak.svelte
index be337198..75b7bc3e 100644
--- a/src/lib/SectionBreak/SectionBreak.svelte
+++ b/src/lib/SectionBreak/SectionBreak.svelte
@@ -18,7 +18,7 @@
   export let accentColor = "#9d9d9d";
   /**
    * Font weight of the number
-   * @type { string } [fontWeight="var(--fknt-weight-light)"]
+   * @type { string } [fontWeight="var(--font-weight-light)"]
    **/
   export let fontWeight = "var(--font-weight-light)";
 </script>

From 0b2aecb1b02a0e226c83c6bfdec96c98ffa0da54 Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Mon, 19 Feb 2024 13:45:21 -0500
Subject: [PATCH 4/4] Fix changelog

---
 CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index caa53b6d..d95eabc2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +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