Merge pull request #6 from UrbanInstitute/add-furniture-components

Add furniture components

CHANGELOG.md

@@ -1,5 +1,15 @@
 # @UrbanInstitute/dataviz-components Changelog
 
+## 0.1.2
+
+- Add TextBlock component
+- Add ProjectCredits component
+- Add Navbar component
+
+## 0.1.1
+
+- Fix utls export in package.json
+
 ## 0.1.0
 
 - Update .prettierrc

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbaninstitute/dataviz-components",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",

src/lib/BasicDropdown/BasicDropdown.svelte

@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte";
   import { urbanColors } from "$lib/utils";
-  import "$lib/style/app.css";
+  import "../style/app.css";
 
   // define arguments
 

src/lib/Block/Block.stories.svelte

@@ -0,0 +1,42 @@
+<script context="module">
+	import Block from "./Block.svelte";
+
+	export const meta = {
+		title: "Layout/Block",
+		description: "A basic building block of a page",
+		component: Block,
+		tags: ["autodocs"],
+    argTypes: {
+      width: {
+        default: "body",
+        options: ["body", "full"],
+        control: "select"
+      }
+    },
+      
+	};
+</script>
+
+<script>
+	import { Story, Template } from "@storybook/addon-svelte-csf";
+
+</script>
+
+<Template let:args>
+	<Block {...args} >
+    <div style="width: 100%; height: 200px; background: #d2d2d2; display: flex; align-items: center; justify-content: center;">Block</div>
+  </Block>
+</Template>
+
+<Story
+	name="Default"
+  args={{
+  }}
+/>
+<Story
+	name="Full width"
+  args={{
+    width: "full"
+  }}
+/>
+

src/lib/Block/Block.svelte

@@ -0,0 +1,30 @@
+<script context="module">
+  /**
+   * @typedef {"body" | "full"} blockWidth
+   */
+</script>
+
+<script>
+  /**
+   * The width of the block.
+   * @type {blockWidth} [width="body"]
+   */
+  export let width = "body";
+</script>
+
+<div class="layout-block {width}">
+  <slot />
+</div>
+
+<style>
+  .layout-block {
+    margin: 0 auto;
+    width: 100%;
+  }
+  .layout-block.body {
+    max-width: var(--body-max-width, 760px);
+  }
+  .layout-block.full {
+    max-width: none;
+  }
+</style>

src/lib/HeadingAlt/HeadingAlt.stories.svelte

@@ -0,0 +1,26 @@
+<script context="module">
+	import Heading from "./HeadingAlt.svelte";
+
+	export const meta = {
+		title: "Components/HeadingAlt",
+		description: "A block for an alternate heading",
+		component: Heading,
+		tags: ["autodocs"],
+	};
+</script>
+
+<script>
+	import { Story, Template } from "@storybook/addon-svelte-csf";
+
+</script>
+
+<Template let:args>
+	<Heading {...args} />
+</Template>
+
+<Story
+	name="Default"
+  args={{
+    content: "This is an alternate heading"
+  }}
+/>

src/lib/HeadingAlt/HeadingAlt.svelte

@@ -0,0 +1,17 @@
+<script>
+  import "../style/app.css";
+  export let content = "";
+</script>
+
+<h3 class="heading-alt">{content}</h3>
+
+<style>
+  h3.heading-alt {
+    margin: 0;
+    text-transform: uppercase;
+    font-size: var(--font-size-3xl);
+    font-weight: var(--font-weight-light);
+    margin-bottom: var(--spacing-8);
+    line-height: 1;
+  }
+</style>

src/lib/LogoTPCBadge/LogoTPCBadge.stories.svelte

@@ -0,0 +1,20 @@
+<script context="module">
+  import Logo from "./LogoTPCBadge.svelte";
+
+  export const meta = {
+    title: "Components/LogoTPCBadge",
+    description: "A Tax Policy Center logo",
+    component: Logo,
+    tags: ["autodocs"]
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+  <Logo {...args} />
+</Template>
+
+<Story name="Default" />

src/lib/LogoTPCBadge/LogoTPCBadge.svelte

@@ -0,0 +1,37 @@
+<script>
+  const naturalWidth = 100;
+  const naturalHeight = 85;
+  export let width = 100;
+  $: height = width * (naturalHeight / naturalWidth);
+</script>
+
+<svg {width} {height} viewBox="0 0 {naturalWidth} {naturalHeight}" fill="none" xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-label="Tax Policy Center logo"
+>
+  <rect width="100" height="85" fill="white" />
+  <path d="M100 85.4111H0V-0.000372067H100V85.4111Z" fill="#25518C" />
+  <path
+    d="M17.863 54.169H9.18555V48.384H32.8131V54.169H24.1359V76.9014H17.863V54.169Z"
+    fill="white"
+  />
+  <path
+    d="M50.0832 62.7651C53.2183 62.7651 55.0526 60.8922 55.0526 58.4485V58.3647C55.0526 55.5549 53.0968 54.0488 49.9605 54.0488H45.1135V62.7651H50.0832ZM38.8394 48.384H50.4899C57.2937 48.384 61.4079 52.4181 61.4079 58.2445V58.3253C61.4079 64.9235 56.2739 68.3454 49.8793 68.3454H45.1135V76.9014H38.8394V48.384Z"
+    fill="white"
+  />
+  <path
+    d="M64.9502 62.724V62.6431C64.9502 54.5368 71.0611 47.8976 79.8184 47.8976C85.1958 47.8976 88.4135 49.6874 91.0598 52.2955L87.0695 56.9001C84.8705 54.9032 82.6292 53.6814 79.7791 53.6814C74.9705 53.6814 71.5083 57.6747 71.5083 62.5617V62.6431C71.5083 67.5307 74.8893 71.6051 79.7791 71.6051C83.0359 71.6051 85.0325 70.3018 87.2736 68.2646L91.2658 72.297C88.3321 75.4343 85.0741 77.3906 79.5728 77.3906C71.1818 77.3906 64.9502 70.9116 64.9502 62.724Z"
+    fill="white"
+  />
+  <path d="M22.8724 23.2734H9.05371V9.43662H22.8724V23.2734Z" fill="#3B96BC" />
+  <path d="M39.8899 23.2734H26.0723V9.43662H39.8899V23.2734Z" fill="#6BC2D8" />
+  <path d="M56.9112 23.2734H43.0908V9.43662H56.9112V23.2734Z" fill="#6BC2D8" />
+  <path d="M73.9238 23.2734H60.1094V9.43662H73.9238V23.2734Z" fill="#3B96BC" />
+  <path d="M90.9426 23.2734H77.1265V9.43662H90.9426V23.2734Z" fill="#3B96BC" />
+  <path d="M22.8724 40.1641H9.05371V26.3253H22.8724V40.1641Z" fill="#6BC2D8" />
+  <path d="M39.8899 40.1641H26.0723V26.3253H39.8899V40.1641Z" fill="#6BC2D8" />
+  <path d="M56.9112 40.1641H43.0908V26.3253H56.9112V40.1641Z" fill="#6BC2D8" />
+  <path d="M73.9238 40.1641H60.1094V26.3253H73.9238V40.1641Z" fill="#3B96BC" />
+  <path d="M90.9426 40.1641H77.1265V26.3253H90.9426V40.1641Z" fill="#6BC2D8" />
+</svg>
+

src/lib/LogoUrban/LogoUrban.stories.svelte

@@ -0,0 +1,36 @@
+<script context="module">
+  import Logo from "./LogoUrban.svelte";
+
+  export const meta = {
+    title: "Components/LogoUrban",
+    description: "An Urban Institute full logo",
+    component: Logo,
+    tags: ["autodocs"],
+    argTypes: {
+      variant: {
+        options: ["color", "white"],
+        control: "select"
+      }
+    },
+    parameters: {
+      backgrounds: {
+        default: "light",
+        values: [
+          { name: "light", value: "#ffffff" },
+          { name: "dark", value: "#0A4C6A" }
+        ]
+      }
+    }
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+  <Logo {...args} />
+</Template>
+
+<Story name="Default" />
+<Story name="Variant - white" args={{variant: "white"}} parameters={{backgrounds: {default: "dark"}}}/>