Merge pull request #8 from UrbanInstitute/patch-textblock-props

Patch textblock props

CHANGELOG.md

@@ -1,5 +1,11 @@
 # @UrbanInstitute/dataviz-components Changelog
 
+## 0.2.0
+
+- Update props for TextBlock component to play better with ArchieML
+- Better spacing for Block component on mobile
+- Add wide option for Block component
+
 ## 0.1.3
 
 - Bugfix Add Block component to exports

README.md

@@ -2,20 +2,21 @@
 
 Svelte components built for Urban Institute data viz projects.
 
-This repo is based on the SvelteKit library template.
+Library documentation: https://urbaninstitute.github.io/dataviz-components
 
 ## Developing
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+The primrary method for developing new components locally is by running [Storybook](https://storybook.js.org/) locally. To do this, first install dependencies with
 
 ```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+npm install
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+You can then run storybook with
+
+```bash
+npm run storybook
+```
 
 ## Building
 
@@ -24,13 +25,3 @@ To build your library:
 ```bash
 npm run package
 ```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package.json

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

src/lib/Block/Block.stories.svelte

@@ -39,4 +39,10 @@
     width: "full"
   }}
 />
+<Story
+	name="Wide"
+  args={{
+    width: "wide"
+  }}
+/>
 

src/lib/Block/Block.svelte

@@ -1,6 +1,6 @@
 <script context="module">
   /**
-   * @typedef {"body" | "full"} blockWidth
+   * @typedef {"body" | "full" | "wide"} blockWidth
    */
 </script>
 
@@ -18,13 +18,29 @@
 
 <style>
   .layout-block {
-    margin: 0 auto;
-    width: 100%;
+    margin: 0 var(--spacing-4);
   }
   .layout-block.body {
     max-width: var(--body-max-width, 760px);
   }
   .layout-block.full {
     max-width: none;
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .layout-block.wide {
+    max-width: var(--wide-max-width, 1165px);
+  }
+
+  @media screen and (min-width: 792px) {
+    .layout-block.body {
+      margin: 0 auto;
+    }
+  }
+  @media screen and (min-width: 1197px) {
+    .layout-block.wide {
+      margin: 0 auto;
+    }
   }
 </style>

src/lib/ProjectCredits/ProjectCredits.svelte

@@ -33,8 +33,8 @@
 <Block>
   <Heading content={heading} />
 </Block>
-{#each text as content}
-  <TextBlock {content} />
+{#each text as value}
+  <TextBlock {value} />
 {/each}
 <Block>
 <ul>

src/lib/TextBlock/TextBlock.svelte

@@ -3,9 +3,9 @@
   import Block from "$lib/Block/Block.svelte";
   /**
    * The text to display in the block. Allows HTML content.
-   * @type {string} [textBlock]
+   * @type {string} [value]
    */
-  export let content;
+  export let value;
 
   /**
    * The width of the text block. Defaults to "body" (max-width: 760px)
@@ -15,7 +15,7 @@
 </script>
 
 <Block {width}>
-  <p class="text-block">{@html content}</p>
+  <p class="text-block">{@html value}</p>
 </Block>
 
 <style>

src/lib/style/app.css

@@ -107,6 +107,7 @@
 	--spacing-16: 4rem;
 	--spacing-20: 5rem;
   --body-max-width: 760px;
+  --wide-max-width: 1165px;
   --color-text-primary: var(--color-gray-shade-darkest);
   --color-text-secondary: var(--color-black);
   --color-text-accent: var(--color-blue);