Merge pull request #9 from UrbanInstitute/component-options

Component options
UrbanInstitute · Dec 28, 2023 · ab3e59a · ab3e59a
2 parents e118d41 + c12add4
commit ab3e59a
Show file tree

Hide file tree

Showing 8 changed files with 634 additions and 463 deletions.
diff --git a/.github/workflows/storybook-tests.yml b/.github/workflows/storybook-tests.yml
@@ -14,9 +14,6 @@ jobs:
       - name: Install Playwright
         run: npx playwright install --with-deps
       - name: Build Storybook
-        run: npm run build-storybook --quiet --test
+        run: npm run build-storybook:test
       - name: Serve Storybook and run tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on tcp:6006 && npm run test-storybook -- --index-json"
+        run: npm run test-storybook-run
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @UrbanInstitute/dataviz-components Changelog
 
+## 0.2.1
+
+- Make github URL in ProjectCredits an optional prop
+- Updates storybook to v7.6.6
+- Fixes TextBlock documentation
+- Adds sticky option to Navbar
+
 ## 0.2.0
 
 - Update props for TextBlock component to play better with ArchieML

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@urbaninstitute/dataviz-components",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -14,7 +14,9 @@
     "format": "prettier --plugin-search-dir . --write .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook"
+    "build-storybook:test": "storybook build --quiet --test",
+    "test-storybook": "test-storybook",
+    "test-storybook-run": "npx concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'npx http-server storybook-static --port 6006 --silent' 'npx wait-on tcp:6006 && npm run test-storybook -- --index-json'"
   },
   "exports": {
     ".": {
@@ -35,18 +37,18 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.6.2",
-    "@storybook/addon-essentials": "^7.6.1",
-    "@storybook/addon-interactions": "^7.6.1",
-    "@storybook/addon-links": "^7.6.1",
+    "@storybook/addon-a11y": "^7.6.6",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
     "@storybook/addon-svelte-csf": "^4.0.13",
-    "@storybook/blocks": "^7.6.1",
-    "@storybook/manager-api": "^7.6.1",
-    "@storybook/svelte": "^7.6.1",
-    "@storybook/sveltekit": "^7.6.1",
-    "@storybook/test": "^7.6.1",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/manager-api": "^7.6.6",
+    "@storybook/svelte": "^7.6.6",
+    "@storybook/sveltekit": "^7.6.6",
+    "@storybook/test": "^7.6.6",
     "@storybook/test-runner": "^0.16.0",
-    "@storybook/theming": "^7.6.1",
+    "@storybook/theming": "^7.6.6",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.20.4",
     "@sveltejs/package": "^2.0.0",
@@ -57,7 +59,7 @@
     "publint": "^0.1.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.6.1",
+    "storybook": "^7.6.6",
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.3",
     "tslib": "^2.4.1",

diff --git a/src/lib/Navbar/Navbar.stories.svelte b/src/lib/Navbar/Navbar.stories.svelte
@@ -37,6 +37,15 @@
   }}
 />
 
+<Story
+	name="Sticky"
+  args={{
+    title: "Project title",
+    projectUrl: "https://urban.org",
+    sticky: true
+  }}
+/>
+
 <Story
 	name="TPC"
   args={{

diff --git a/src/lib/Navbar/Navbar.svelte b/src/lib/Navbar/Navbar.svelte
@@ -3,16 +3,34 @@
   import LogoUrban from "$lib/LogoUrbanBadge/LogoUrbanBadge.svelte";
   import LogoTPC from "$lib/LogoTPCBadge/LogoTPCBadge.svelte";
 
+  /**
+   * Title to display in the navbar
+   * @type {string}
+   */
   export let title = "";
-  /**@type {string} */
+
+  /**
+   * URL to link to from the title
+   * @type {string}
+   */
   export let projectUrl;
-  /**@type {"urban" | "tpc"} */
+
+  /**
+   * Brand to use for the logo
+   * @type {"urban" | "tpc"}
+   */
   export let brand = "urban";
 
+  /**
+   * Option to make the navbar sticky
+   * @type {boolean} [sticky=false]
+   */
+  export let sticky = false;
+
   $: homeURL = brand == "tpc" ? "https://www.taxpolicycenter.org" : "https://www.urban.org";
 </script>
 
-<nav>
+<nav class:sticky>
   <div class="logo">
     <a href={homeURL}>
       {#if brand === "urban"}
@@ -40,6 +58,11 @@
     position: relative;
     min-height: 48px;
   }
+  nav.sticky {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
   .logo {
     margin-left: var(--spacing-2);
   }

diff --git a/src/lib/ProjectCredits/ProjectCredits.svelte b/src/lib/ProjectCredits/ProjectCredits.svelte
@@ -1,7 +1,7 @@
 <script>
   import Heading from "$lib/HeadingAlt/HeadingAlt.svelte";
   import TextBlock from "$lib/TextBlock/TextBlock.svelte";
-  import Block from "$lib/Block/Block.svelte"
+  import Block from "$lib/Block/Block.svelte";
   import "../style/app.css";
 
   /**
@@ -24,10 +24,9 @@
 
   /**
    * An optional link to a Github repo to display
-   * @type {string}
+   * @type {string | null} [githubUrl=null]
    */
-  export let githubUrl;
-
+  export let githubUrl = null;
 </script>
 
 <Block>
@@ -37,17 +36,17 @@
   <TextBlock {value} />
 {/each}
 <Block>
-<ul>
-  {#each items as item}
-    <li>
-      <span class="label">{item.label}</span>
-      {@html item.content}
-    </li>
-  {/each}
-</ul>
+  <ul>
+    {#each items as item}
+      <li>
+        <span class="label">{item.label}</span>
+        {@html item.content}
+      </li>
+    {/each}
+  </ul>
 </Block>
 {#if githubUrl}
-  <TextBlock content="View the project on <a href='{githubUrl}' target='_blank'>Github</a>."/>
+  <TextBlock content="View the project on <a href='{githubUrl}' target='_blank'>Github</a>." />
 {/if}
 
 <style>
@@ -71,7 +70,7 @@
     color: var(--color-text-accent);
   }
 
-  @media(min-width: 769px) {
+  @media (min-width: 769px) {
     ul {
       font-size: var(--font-size-xl);
     }

diff --git a/src/lib/TextBlock/TextBlock.stories.svelte b/src/lib/TextBlock/TextBlock.stories.svelte
@@ -29,13 +29,13 @@
 <Story
 	name="Default"
   args={{
-    content: "Enim id qui labore labore quis ut enim tempor sint quis proident voluptate ex. Duis nisi minim et occaecat do ullamco nisi dolore ipsum proident tempor aute exercitation duis. Proident pariatur consectetur tempor mollit Lorem deserunt. Ut laboris est cillum ut dolore quis consectetur nostrud ut cupidatat enim ea cupidatat ipsum. Voluptate esse labore incididunt sint eiusmod ullamco mollit consequat.",
+    value: "Enim id qui labore labore quis ut enim tempor sint quis proident voluptate ex. Duis nisi minim et occaecat do ullamco nisi dolore ipsum proident tempor aute exercitation duis. Proident pariatur consectetur tempor mollit Lorem deserunt. Ut laboris est cillum ut dolore quis consectetur nostrud ut cupidatat enim ea cupidatat ipsum. Voluptate esse labore incididunt sint eiusmod ullamco mollit consequat.",
   }}
 />
 
 <Story
 	name="With HTML content"
   args={{
-    content: "Enim id qui <a href='https://urban.org' target='_blank'>labore labore quis</a> ut enim tempor sint quis proident voluptate ex. Duis nisi minim et occaecat do ullamco nisi dolore ipsum proident tempor aute exercitation duis. Proident pariatur consectetur tempor mollit Lorem deserunt. Ut laboris est cillum ut dolore quis consectetur nostrud ut cupidatat enim ea cupidatat ipsum. Voluptate esse labore incididunt sint eiusmod ullamco mollit consequat.",
+    value: "Enim id qui <a href='https://urban.org' target='_blank'>labore labore quis</a> ut enim tempor sint quis proident voluptate ex. Duis nisi minim et occaecat do ullamco nisi dolore ipsum proident tempor aute exercitation duis. Proident pariatur consectetur tempor mollit Lorem deserunt. Ut laboris est cillum ut dolore quis consectetur nostrud ut cupidatat enim ea cupidatat ipsum. Voluptate esse labore incididunt sint eiusmod ullamco mollit consequat.",
   }}
 />