diff --git a/CHANGELOG.md b/CHANGELOG.md index fea346bc..e2c34abb 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index ce17976e..2ca0dee4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@urbaninstitute/dataviz-components", - "version": "0.1.1", + "version": "0.1.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@urbaninstitute/dataviz-components", - "version": "0.1.1", + "version": "0.1.2", "dependencies": { "layercake": "^8.0.0" }, diff --git a/package.json b/package.json index b89b4f9e..5ec26759 100644 --- a/package.json +++ b/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", diff --git a/src/lib/BasicDropdown/BasicDropdown.svelte b/src/lib/BasicDropdown/BasicDropdown.svelte index 3c1472f7..a00b556d 100644 --- a/src/lib/BasicDropdown/BasicDropdown.svelte +++ b/src/lib/BasicDropdown/BasicDropdown.svelte @@ -1,7 +1,7 @@ + + + + + + + + diff --git a/src/lib/Block/Block.svelte b/src/lib/Block/Block.svelte new file mode 100644 index 00000000..3859f872 --- /dev/null +++ b/src/lib/Block/Block.svelte @@ -0,0 +1,30 @@ + + + + +
+ +
+ + diff --git a/src/lib/HeadingAlt/HeadingAlt.stories.svelte b/src/lib/HeadingAlt/HeadingAlt.stories.svelte new file mode 100644 index 00000000..863fbedc --- /dev/null +++ b/src/lib/HeadingAlt/HeadingAlt.stories.svelte @@ -0,0 +1,26 @@ + + + + + + + diff --git a/src/lib/HeadingAlt/HeadingAlt.svelte b/src/lib/HeadingAlt/HeadingAlt.svelte new file mode 100644 index 00000000..32eef86f --- /dev/null +++ b/src/lib/HeadingAlt/HeadingAlt.svelte @@ -0,0 +1,17 @@ + + +

{content}

+ + diff --git a/src/lib/LogoTPCBadge/LogoTPCBadge.stories.svelte b/src/lib/LogoTPCBadge/LogoTPCBadge.stories.svelte new file mode 100644 index 00000000..a513c6e7 --- /dev/null +++ b/src/lib/LogoTPCBadge/LogoTPCBadge.stories.svelte @@ -0,0 +1,20 @@ + + + + + + + diff --git a/src/lib/LogoTPCBadge/LogoTPCBadge.svelte b/src/lib/LogoTPCBadge/LogoTPCBadge.svelte new file mode 100644 index 00000000..fe2b9ab2 --- /dev/null +++ b/src/lib/LogoTPCBadge/LogoTPCBadge.svelte @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/LogoTPCBadge/tpc-logo.png b/src/lib/LogoTPCBadge/tpc-logo.png new file mode 100644 index 00000000..3928c575 Binary files /dev/null and b/src/lib/LogoTPCBadge/tpc-logo.png differ diff --git a/src/lib/LogoUrban/LogoUrban.stories.svelte b/src/lib/LogoUrban/LogoUrban.stories.svelte new file mode 100644 index 00000000..16651046 --- /dev/null +++ b/src/lib/LogoUrban/LogoUrban.stories.svelte @@ -0,0 +1,36 @@ + + + + + + + + diff --git a/src/lib/LogoUrban/LogoUrban.svelte b/src/lib/LogoUrban/LogoUrban.svelte new file mode 100644 index 00000000..8d220884 --- /dev/null +++ b/src/lib/LogoUrban/LogoUrban.svelte @@ -0,0 +1,139 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/LogoUrbanBadge/LogoUrbanBadge.stories.svelte b/src/lib/LogoUrbanBadge/LogoUrbanBadge.stories.svelte new file mode 100644 index 00000000..e2d3afd0 --- /dev/null +++ b/src/lib/LogoUrbanBadge/LogoUrbanBadge.stories.svelte @@ -0,0 +1,19 @@ + + + + + + + diff --git a/src/lib/LogoUrbanBadge/LogoUrbanBadge.svelte b/src/lib/LogoUrbanBadge/LogoUrbanBadge.svelte new file mode 100644 index 00000000..ec7c300e --- /dev/null +++ b/src/lib/LogoUrbanBadge/LogoUrbanBadge.svelte @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/Navbar/Navbar.stories.svelte b/src/lib/Navbar/Navbar.stories.svelte new file mode 100644 index 00000000..bc5f7cf3 --- /dev/null +++ b/src/lib/Navbar/Navbar.stories.svelte @@ -0,0 +1,47 @@ + + + + + + + + + + + diff --git a/src/lib/Navbar/Navbar.svelte b/src/lib/Navbar/Navbar.svelte new file mode 100644 index 00000000..c5a2d35d --- /dev/null +++ b/src/lib/Navbar/Navbar.svelte @@ -0,0 +1,65 @@ + + + + + diff --git a/src/lib/ProjectCredits/ProjectCredits.stories.svelte b/src/lib/ProjectCredits/ProjectCredits.stories.svelte new file mode 100644 index 00000000..39ab4911 --- /dev/null +++ b/src/lib/ProjectCredits/ProjectCredits.stories.svelte @@ -0,0 +1,46 @@ + + + + + + + diff --git a/src/lib/ProjectCredits/ProjectCredits.svelte b/src/lib/ProjectCredits/ProjectCredits.svelte new file mode 100644 index 00000000..4b547b31 --- /dev/null +++ b/src/lib/ProjectCredits/ProjectCredits.svelte @@ -0,0 +1,79 @@ + + + + + +{#each text as content} + +{/each} + +
    + {#each items as item} +
  • + {item.label} + {@html item.content} +
    • + {/each} +
+ +{#if githubUrl} + +{/if} + + diff --git a/src/lib/Scorecard/Scorecard.svelte b/src/lib/Scorecard/Scorecard.svelte index b5843b75..bf76f092 100644 --- a/src/lib/Scorecard/Scorecard.svelte +++ b/src/lib/Scorecard/Scorecard.svelte @@ -1,5 +1,5 @@ + + + + diff --git a/src/lib/SocialShare/IconLinkedin.svelte b/src/lib/SocialShare/IconLinkedin.svelte new file mode 100644 index 00000000..eb7725d9 --- /dev/null +++ b/src/lib/SocialShare/IconLinkedin.svelte @@ -0,0 +1,24 @@ + + + + + diff --git a/src/lib/SocialShare/IconMail.svelte b/src/lib/SocialShare/IconMail.svelte new file mode 100644 index 00000000..70a73941 --- /dev/null +++ b/src/lib/SocialShare/IconMail.svelte @@ -0,0 +1,22 @@ + + + + + diff --git a/src/lib/SocialShare/IconTwitter.svelte b/src/lib/SocialShare/IconTwitter.svelte new file mode 100644 index 00000000..fc35cf46 --- /dev/null +++ b/src/lib/SocialShare/IconTwitter.svelte @@ -0,0 +1,24 @@ + + + + + diff --git a/src/lib/SocialShare/SocialShare.stories.svelte b/src/lib/SocialShare/SocialShare.stories.svelte new file mode 100644 index 00000000..9bf80924 --- /dev/null +++ b/src/lib/SocialShare/SocialShare.stories.svelte @@ -0,0 +1,56 @@ + + + + + + + + + { + await userEvent.click(within(canvasElement).getByLabelText("email-share")); + await expect(args.onClick).toHaveBeenCalled(); + }} +/> diff --git a/src/lib/SocialShare/SocialShare.svelte b/src/lib/SocialShare/SocialShare.svelte new file mode 100644 index 00000000..0286894b --- /dev/null +++ b/src/lib/SocialShare/SocialShare.svelte @@ -0,0 +1,83 @@ + + + + + diff --git a/src/lib/TextBlock/TextBlock.stories.svelte b/src/lib/TextBlock/TextBlock.stories.svelte new file mode 100644 index 00000000..6db35cec --- /dev/null +++ b/src/lib/TextBlock/TextBlock.stories.svelte @@ -0,0 +1,41 @@ + + + + + + + + +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.", + }} +/> diff --git a/src/lib/TextBlock/TextBlock.svelte b/src/lib/TextBlock/TextBlock.svelte new file mode 100644 index 00000000..cef77ede --- /dev/null +++ b/src/lib/TextBlock/TextBlock.svelte @@ -0,0 +1,41 @@ + + + +

{@html content}

+ + + diff --git a/src/lib/index.js b/src/lib/index.js index cca755d8..6e356834 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1,3 +1,10 @@ // Reexport your entry components here export { default as BasicDropdown } from './BasicDropdown/BasicDropdown.svelte'; export { default as Scorecard } from './Scorecard/Scorecard.svelte'; +export { default as HeadingAlt } from './HeadingAlt/HeadingAlt.svelte'; +export { default as LogoTPCBadge } from './LogoTPCBadge/LogoTPCBadge.svelte'; +export { default as LogoUrbanBadge } from './LogoUrbanBadge/LogoUrbanBadge.svelte'; +export { default as Navbar } from './Navbar/Navbar.svelte'; +export { default as ProjectCredits } from './ProjectCredits/ProjectCredits.svelte'; +export { default as SocialShare } from './SocialShare/SocialShare.svelte'; +export { default as TextBlock } from './TextBlock/TextBlock.svelte'; diff --git a/src/lib/style/app.css b/src/lib/style/app.css index a362e311..2c04bc2f 100644 --- a/src/lib/style/app.css +++ b/src/lib/style/app.css @@ -106,6 +106,14 @@ --spacing-12: 3rem; --spacing-16: 4rem; --spacing-20: 5rem; + --body-max-width: 760px; + --color-text-primary: var(--color-gray-shade-darkest); + --color-text-secondary: var(--color-black); + --color-text-accent: var(--color-blue); + --color-text-reverse: var(--color-white); + --color-surface-primary: var(--color-white); + --color-accent-primrary: var(--color-blue); + --color-accent-highlight: var(--color-yellow); font-family: var(--font-family-sans); line-height: 1.5; font-weight: 400; @@ -120,3 +128,4 @@ -webkit-text-size-adjust: 100%; box-sizing: border-box; } +html * {box-sizing: border-box} diff --git a/src/lib/utils/index.js b/src/lib/utils/index.js index 65e4496e..1ce05ff6 100644 --- a/src/lib/utils/index.js +++ b/src/lib/utils/index.js @@ -1 +1,2 @@ -export { default as urbanColors } from "./colors.js"; +export { default as urbanColors } from "./urbanColors.js"; +export { default as tpcColors } from "./tpcColors.js"; diff --git a/src/lib/utils/tpcColors.js b/src/lib/utils/tpcColors.js new file mode 100644 index 00000000..df345777 --- /dev/null +++ b/src/lib/utils/tpcColors.js @@ -0,0 +1,39 @@ +/** + * An object representing all of TPC's color palette. + * @type Record + */ +const colors = { + blue_dark: "#174a7c", + blue: "#008bb0", + blue_shade_light: "#60a1b6", + blue_shade_lighter: "#95c0cf", + blue_shade_lightest: "#cae0e7", + blue_shade_dark: "#1d5669", + blue_shade_darker: "#0e2b35", + orange: "#f0573e", + gray: "#bcbec0", + black: "#000000", + yellow: "#fcb64b" +}; + +/** + * Returns a list of 6 sequential blue hues for data visualization based on TPC's style guide + * @returns {string[]} - An array of colors + */ +function getBlues() { + const shades = [ + colors.blue_shade_lightest, + colors.blue_shade_lighter, + colors.blue_shade_light, + colors.blue, + colors.blue_shade_dark, + colors.blue_shade_darker, + ]; + return shades.slice(); +} + + +export default { + ...colors, + getBlues, +}; diff --git a/src/lib/utils/colors.js b/src/lib/utils/urbanColors.js similarity index 100% rename from src/lib/utils/colors.js rename to src/lib/utils/urbanColors.js diff --git a/src/stories/TPCColors.mdx b/src/stories/TPCColors.mdx new file mode 100644 index 00000000..912964ea --- /dev/null +++ b/src/stories/TPCColors.mdx @@ -0,0 +1,64 @@ +import { Meta, ColorPalette, ColorItem } from "@storybook/blocks"; +import { tpcColors } from "../lib/utils"; + + + +# Colors + +The colors utility module provides easy access to the Tax Policy Center's brand colors. For best practices on selecting colors for data visualizations, see the [Tax Policy Center data visualizaton styleguide](https://apps.urban.org/tpc-styleguide/public.html). + +To use these, utilities, import the module like so: + +```js +import { tpcColors } from "@urbaninstitute/dataviz-components/utils"; +``` + +## Primary Colors + + + + + + + +Any color can be used directly from the `tpcColors` object: + +```js +// equal to "#008bb0" +const blue = tpcColors.blue; + +// equal to "#fcb64b" +const yellow = tpcColors.yellow; +``` + + +## Color shades + +TPC Blue has an array of 6 shades for sequential usage. + + + + + + +Usage: +```js +// returns ["#cae0e7","#95c0cf","#60a1b6","#008bb0","#1d5669","#0e2b35"] +tpcColors.getBlues(); +``` + diff --git a/src/stories/Colors.mdx b/src/stories/UrbanColors.mdx similarity index 99% rename from src/stories/Colors.mdx rename to src/stories/UrbanColors.mdx index 70734aa5..43c3c76f 100644 --- a/src/stories/Colors.mdx +++ b/src/stories/UrbanColors.mdx @@ -1,7 +1,7 @@ import { Meta, ColorPalette, ColorItem } from "@storybook/blocks"; import { urbanColors } from "$lib/utils"; - + # Colors