From 2af1dc1059ba9dd4728c3988fe9822e696bf01f3 Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Fri, 1 Mar 2024 18:18:19 -0500
Subject: [PATCH 1/7] Add Button component

---
 src/lib/Button/Button.stories.svelte | 146 +++++++++++++++++++++++++++
 src/lib/Button/Button.svelte         | 144 ++++++++++++++++++++++++++
 src/lib/Button/IconDownload.svelte   |  12 +++
 3 files changed, 302 insertions(+)
 create mode 100644 src/lib/Button/Button.stories.svelte
 create mode 100644 src/lib/Button/Button.svelte
 create mode 100644 src/lib/Button/IconDownload.svelte

diff --git a/src/lib/Button/Button.stories.svelte b/src/lib/Button/Button.stories.svelte
new file mode 100644
index 00000000..4c1e4c93
--- /dev/null
+++ b/src/lib/Button/Button.stories.svelte
@@ -0,0 +1,146 @@
+<script context="module">
+  import Button from "./Button.svelte";
+  import IconDownload from "./IconDownload.svelte";
+
+  export const meta = {
+    title: "Components/Button",
+    description: "A basic button component.",
+    component: Button,
+    tags: ["autodocs"],
+    argTypes: {
+      variant: {
+        default: "primary",
+        options: ["primary", "primary-black", "secondary", "secondary-black", "tertiary"],
+        control: "select"
+      },
+      size: {
+        default: "standard",
+        options: ["standard", "small"],
+        control: "select"
+      },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: "Basic HTML Button adhering to Urban styles."
+        }
+      }
+    }
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { fireEvent, within, expect } from "@storybook/test";
+</script>
+
+<Template let:args>
+  <Button {...args} on:click>Button text</Button>
+</Template>
+
+<Story name="primary" args={{}} />
+
+<Story name="primary with icon">
+  <Button
+    >Button text <svelte:fragment slot="icon" let:iconColor
+      ><IconDownload size={16} fill={iconColor} /></svelte:fragment
+    ></Button
+  >
+</Story>
+
+<Story
+  name="primary small"
+  args={{
+    size: "small"
+  }}
+/>
+
+<Story
+  name="primary-black"
+  args={{
+    variant: "primary-black"
+  }}
+/>
+
+<Story name="primary-black with icon">
+  <Button variant="primary-black"
+    >Button text <svelte:fragment slot="icon" let:iconColor
+      ><IconDownload size={16} fill={iconColor} /></svelte:fragment
+    ></Button
+  >
+</Story>
+
+<Story
+  name="primary-black-small"
+  args={{
+    variant: "primary-black",
+    size: "small"
+  }}
+/>
+
+<Story
+  name="secondary"
+  args={{
+    variant: "secondary"
+  }}
+/>
+<Story name="secondary with icon">
+  <Button variant="secondary"
+    >Button text <svelte:fragment slot="icon" let:iconColor
+      ><IconDownload size={16} fill={iconColor} /></svelte:fragment
+    ></Button
+  >
+</Story>
+
+<Story
+  name="secondary-small"
+  args={{
+    variant: "secondary",
+    size: "small"
+  }}
+/>
+
+<Story
+  name="secondary-black"
+  args={{
+    variant: "secondary-black"
+  }}
+/>
+
+<Story name="secondary-black with icon">
+  <Button variant="secondary-black"
+    >Button text <svelte:fragment slot="icon" let:iconColor
+      ><IconDownload size={16} fill={iconColor} /></svelte:fragment
+    ></Button
+  >
+</Story>
+<Story
+  name="secondary-black-small"
+  args={{
+    variant: "secondary-black",
+    size: "small"
+  }}
+/>
+
+<Story
+  name="tertiary"
+  args={{
+    variant: "tertiary"
+  }}
+/>
+
+
+<Story name="tertiary with icon">
+  <Button variant="tertiary"
+    >Button text <svelte:fragment slot="icon" let:iconColor
+      ><IconDownload size={16} fill={iconColor} /></svelte:fragment
+    ></Button
+  >
+</Story>
+<Story
+  name="tertiary-small"
+  args={{
+    variant: "tertiary",
+    size: "small"
+  }}
+/>
diff --git a/src/lib/Button/Button.svelte b/src/lib/Button/Button.svelte
new file mode 100644
index 00000000..238e6625
--- /dev/null
+++ b/src/lib/Button/Button.svelte
@@ -0,0 +1,144 @@
+<!-- @component Button a basic HTML button with Urban styling-->
+<script>
+  import "../style/app.css";
+  import { urbanColors } from "../utils";
+  /**
+   * Which variant of button to use
+   * @type {"primary" | "primary-black" | "secondary" | "secondary-black" | "tertiary"}
+   */
+  export let variant = "primary";
+
+
+  /**
+   * Which size of button to use
+   * @type {"standard" | "small" }
+   */
+  export let size = "standard"
+
+  /**
+   * Is the button disabled?
+   * @type { boolean }
+   */
+  export let disabled = false;
+
+
+  let hovered = false;
+
+  function getIconColor(_variant, _hovered) {
+    // hovered colors
+    if (!_hovered) {
+      if (_variant === "primary" || _variant === "primary-black") {
+        return urbanColors.white;
+      }
+      if (_variant === "secondary") {
+        return urbanColors.blue;
+      }
+      if (_variant === "secondary-black" || _variant === "tertiary") {
+        return urbanColors.black;
+      }
+    }
+    if (_variant === "primary") {
+      return urbanColors.white;
+    }
+    if (_variant === "primary-black") {
+      return urbanColors.black;
+    }
+    // not hovered colors
+    if (_variant === "secondary" || _variant == "secondary-black" || _variant === "tertiary") {
+      return urbanColors.white;
+    }
+    return urbanColors.black;
+  }
+
+  $: iconColor = getIconColor(variant, hovered);
+</script>
+<button class="variant-{variant} size-{size}" on:click {disabled} on:mouseenter={(e) => hovered = true} on:mouseleave={(e) => hovered = false}>
+  <slot>Default button text</slot>
+  {#if $$slots.icon}
+    <span class="button-icon"><slot name="icon" {iconColor}></slot></span>
+  {/if}
+</button>
+<style>
+  button {
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-large);
+    font-weight: var(--font-weight-bold);
+    text-transform: uppercase;
+    --border-size: 2px;
+  }
+
+  .button-icon {
+    display: inline-block;
+    margin-left: 0.5rem;
+  }
+
+  /* sizes */
+  button.size-standard {
+    padding: calc(1rem - var(--border-size) * 2);
+  }
+  button.size-small {
+    padding: calc(0.75rem - var(--border-size) * 2);
+  }
+
+  /* primary variant */
+  button.variant-primary {
+    background-color: var(--color-blue);
+    border: solid var(--border-size) var(--color-blue);
+    color: var(--color-white);
+  }
+  button.variant-primary:hover {
+    background-color: var(--color-blue-shade-dark);
+    border: solid var(--border-size) var(--color-blue-shade-dark);
+  }
+
+  /* primary-black variant */
+  button.variant-primary-black {
+    background-color: var(--color-black);
+    border: solid var(--border-size) var(--color-black);
+    color: var(--color-white);
+  }
+  button.variant-primary-black:hover {
+    background-color: var(--color-white);
+    color: var(--color-black);
+    border: solid var(--border-size) var(--color-black);
+  }
+
+  /* secondary variant */
+  button.variant-secondary {
+    background-color: var(--color-white);
+    border: solid var(--border-size) var(--color-blue);
+    color: var(--color-blue);
+  }
+  button.variant-secondary:hover {
+    background-color: var(--color-blue);
+    color: var(--color-white);
+    border: solid var(--border-size) var(--color-blue);
+  }
+
+  /* secondary-black variant */
+  button.variant-secondary-black {
+    background-color: var(--color-white);
+    border: solid var(--border-size) var(--color-black);
+    color: var(--color-black);
+  }
+  button.variant-secondary-black:hover {
+    background-color: var(--color-black);
+    color: var(--color-white);
+    border: solid var(--border-size) var(--color-black);
+  }
+  /* tertiary variant */
+  button.variant-tertiary {
+    background-color: var(--color-yellow);
+    border: solid var(--border-size) var(--color-yellow);
+    color: var(--color-black);
+  }
+  button.variant-tertiary:hover {
+    background-color: var(--color-black);
+    border: solid var(--border-size) var(--color-black);
+    color: var(--color-white);
+  }
+
+</style>
diff --git a/src/lib/Button/IconDownload.svelte b/src/lib/Button/IconDownload.svelte
new file mode 100644
index 00000000..37108958
--- /dev/null
+++ b/src/lib/Button/IconDownload.svelte
@@ -0,0 +1,12 @@
+<script>
+  export let fill = "#FFFFFF";
+  export let size = 48;
+
+</script>
+
+<svg width={size} height={size} viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M43.6933 42.4229C44.0667 42.4229 44.3467 42.56 44.6267 42.7886C44.9067 43.0171 45 43.3371 45 43.7029V46.72C45 47.0857 44.86 47.36 44.6267 47.6343C44.3933 47.9086 44.0667 48 43.6933 48H4.30667C3.93333 48 3.65333 47.8629 3.37333 47.6343C3.09333 47.4057 3 47.0857 3 46.72V43.7029C3 43.3371 3.14 43.0629 3.37333 42.7886C3.60667 42.5143 3.93333 42.4229 4.30667 42.4229H43.6933ZM41.1733 21.44C41.4067 21.2114 41.5 20.9371 41.5 20.5714C41.5 20.2057 41.36 19.8857 41.08 19.6114L38.98 17.4629C38.7 17.2343 38.3733 17.1429 38 17.1429C37.6267 17.1429 37.3467 17.28 37.1133 17.5543L26.8467 27.9314V1.28C26.8467 0.914286 26.7067 0.64 26.4733 0.365714C26.24 0.0914286 25.9133 0 25.54 0H22.46C22.0867 0 21.8067 0.137143 21.5267 0.365714C21.2467 0.594286 21.1533 0.914286 21.1533 1.28V27.9771L10.8867 17.6C10.6533 17.28 10.3733 17.1429 10 17.1429C9.62667 17.1429 9.3 17.2343 9.02 17.4629L6.82667 19.6114C6.59333 19.8857 6.5 20.2057 6.5 20.5714C6.5 20.9371 6.64 21.2114 6.92 21.44L23.02 37.3029C23.3 37.5771 23.6267 37.7143 24 37.7143C24.3733 37.7143 24.7 37.5771 24.98 37.3029L41.1733 21.44Z"
+    {fill}
+  />
+</svg>

From dd18b269126c466a73073506aec7916deae78672 Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Fri, 1 Mar 2024 18:19:46 -0500
Subject: [PATCH 2/7] export button and add changelog

---
 CHANGELOG.md     | 1 +
 src/lib/index.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c0bc86a2..69abf179 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # @UrbanInstitute/dataviz-components Changelog
 
 ## Next
+- Add Button component
 
 ## 0.4.0
 
diff --git a/src/lib/index.js b/src/lib/index.js
index b57b87e3..6a46d90d 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -12,3 +12,4 @@ export { default as ReturnTop } from "./ReturnTop/ReturnTop.svelte";
 export { default as Scorecard } from "./Scorecard/Scorecard.svelte";
 export { default as SocialShare } from "./SocialShare/SocialShare.svelte";
 export { default as TextBlock } from "./TextBlock/TextBlock.svelte";
+export { default as Button } from "./Button/Button.svelte";

From 3d08b9ab336dcb1a5a060c1afc7dcbf44a9d2c6f Mon Sep 17 00:00:00 2001
From: Mitchell Thorson <mitchell@mitchellthorson.com>
Date: Mon, 4 Mar 2024 11:50:58 -0500
Subject: [PATCH 3/7] Remove extra imports

---
 src/lib/Button/Button.stories.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/Button/Button.stories.svelte b/src/lib/Button/Button.stories.svelte
index 4c1e4c93..8b56f208 100644
--- a/src/lib/Button/Button.stories.svelte
+++ b/src/lib/Button/Button.stories.svelte
@@ -31,7 +31,6 @@
 
 <script>
   import { Story, Template } from "@storybook/addon-svelte-csf";
-  import { fireEvent, within, expect } from "@storybook/test";
 </script>
 
 <Template let:args>

From 7af0b533c7539dc587e43aa046e5a3553cd65c2a Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Mon, 4 Mar 2024 15:22:32 -0500
Subject: [PATCH 4/7] Add event dispatches for button events

---
 src/lib/Button/Button.stories.svelte |  2 +-
 src/lib/Button/Button.svelte         | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/Button/Button.stories.svelte b/src/lib/Button/Button.stories.svelte
index 8b56f208..0867c2d7 100644
--- a/src/lib/Button/Button.stories.svelte
+++ b/src/lib/Button/Button.stories.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <Template let:args>
-  <Button {...args} on:click>Button text</Button>
+  <Button {...args} on:click on:mouseenter on:mouseleave>Button text</Button>
 </Template>
 
 <Story name="primary" args={{}} />
diff --git a/src/lib/Button/Button.svelte b/src/lib/Button/Button.svelte
index 238e6625..43945632 100644
--- a/src/lib/Button/Button.svelte
+++ b/src/lib/Button/Button.svelte
@@ -2,6 +2,7 @@
 <script>
   import "../style/app.css";
   import { urbanColors } from "../utils";
+  import { createEventDispatcher } from "svelte";
   /**
    * Which variant of button to use
    * @type {"primary" | "primary-black" | "secondary" | "secondary-black" | "tertiary"}
@@ -24,6 +25,8 @@
 
   let hovered = false;
 
+  let dispatch = createEventDispatcher();
+
   function getIconColor(_variant, _hovered) {
     // hovered colors
     if (!_hovered) {
@@ -50,9 +53,18 @@
     return urbanColors.black;
   }
 
+  function onMouseEnter(e) {
+    hovered = true;
+    dispatch("mouseenter", e);
+  }
+  function onMouseLeave(e) {
+    hovered = false;
+    dispatch("mouseleave", e);
+  }
+
   $: iconColor = getIconColor(variant, hovered);
 </script>
-<button class="variant-{variant} size-{size}" on:click {disabled} on:mouseenter={(e) => hovered = true} on:mouseleave={(e) => hovered = false}>
+<button class="variant-{variant} size-{size}" on:click {disabled} on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
   <slot>Default button text</slot>
   {#if $$slots.icon}
     <span class="button-icon"><slot name="icon" {iconColor}></slot></span>

From 1fb0e84437b2d42736d0df68d5f40ad7059edc7e Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Mon, 4 Mar 2024 16:07:28 -0500
Subject: [PATCH 5/7] add tests to button

---
 src/lib/Button/Button.stories.svelte | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/lib/Button/Button.stories.svelte b/src/lib/Button/Button.stories.svelte
index 0867c2d7..1bdbee33 100644
--- a/src/lib/Button/Button.stories.svelte
+++ b/src/lib/Button/Button.stories.svelte
@@ -17,7 +17,7 @@
         default: "standard",
         options: ["standard", "small"],
         control: "select"
-      },
+      }
     },
     parameters: {
       docs: {
@@ -31,6 +31,7 @@
 
 <script>
   import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { within, userEvent, expect, fn } from "@storybook/test";
 </script>
 
 <Template let:args>
@@ -39,6 +40,25 @@
 
 <Story name="primary" args={{}} />
 
+<Story
+  name="primary with event listeners"
+  args={{
+    event_click: fn(),
+    event_mouseenter: fn(),
+    event_mouseleave: fn()
+  }}
+  play={async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await userEvent.click(button);
+    await expect(args.event_click).toHaveBeenCalled();
+    await userEvent.hover(button);
+    await expect(args.event_mouseenter).toHaveBeenCalled();
+    await userEvent.unhover(button);
+    await expect(args.event_mouseleave).toHaveBeenCalled();
+  }}
+/>
+
 <Story name="primary with icon">
   <Button
     >Button text <svelte:fragment slot="icon" let:iconColor
@@ -128,7 +148,6 @@
   }}
 />
 
-
 <Story name="tertiary with icon">
   <Button variant="tertiary"
     >Button text <svelte:fragment slot="icon" let:iconColor

From 7a9f2105f77f4d7b828603495449f3e379586ce4 Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Mon, 4 Mar 2024 16:58:01 -0500
Subject: [PATCH 6/7] update test build to work with new tests

---
 .github/workflows/storybook-tests.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/storybook-tests.yml b/.github/workflows/storybook-tests.yml
index e2e1f332..7584e2ed 100644
--- a/.github/workflows/storybook-tests.yml
+++ b/.github/workflows/storybook-tests.yml
@@ -14,6 +14,6 @@ jobs:
       - name: Install Playwright
         run: npx playwright install --with-deps
       - name: Build Storybook
-        run: npm run build-storybook:test
+        run: npm run build-storybook
       - name: Serve Storybook and run tests
         run: npm run test-storybook-run

From d65b398e664f7928f05ad3a3968c6eaad08bb438 Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Mon, 4 Mar 2024 17:08:54 -0500
Subject: [PATCH 7/7] Update storybook test settings

---
 .github/workflows/storybook-tests.yml |  2 +-
 .storybook/main.js                    | 39 +++++++++++++++------------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/storybook-tests.yml b/.github/workflows/storybook-tests.yml
index 7584e2ed..e2e1f332 100644
--- a/.github/workflows/storybook-tests.yml
+++ b/.github/workflows/storybook-tests.yml
@@ -14,6 +14,6 @@ jobs:
       - name: Install Playwright
         run: npx playwright install --with-deps
       - name: Build Storybook
-        run: npm run build-storybook
+        run: npm run build-storybook:test
       - name: Serve Storybook and run tests
         run: npm run test-storybook-run
diff --git a/.storybook/main.js b/.storybook/main.js
index aa056712..8dc89514 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,21 +1,26 @@
 /** @type { import('@storybook/sveltekit').StorybookConfig } */
 const config = {
-	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)"],
-	addons: [
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		"@storybook/addon-interactions",
-		"@storybook/addon-svelte-csf",
-		"@storybook/addon-a11y"
-	],
-	framework: {
-		name: "@storybook/sveltekit",
-		options: {}
-	},
-	core: { disableTelemetry: true },
-	docs: {
-		autodocs: "tag"
-	},
-	staticDirs: ["../static/"]
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-svelte-csf",
+    "@storybook/addon-a11y"
+  ],
+  framework: {
+    name: "@storybook/sveltekit",
+    options: {}
+  },
+  core: { disableTelemetry: true },
+  docs: {
+    autodocs: "tag"
+  },
+  staticDirs: ["../static/"],
+  build: {
+    test: {
+      disableAutoDocs: false
+    }
+  }
 };
 export default config;