docs: add demos for common package features

Author: hperrin

README.md

@@ -46,13 +46,14 @@ If you need help using SMUI, join the new [Discord server](https://discord.gg/aF
 
 # Components
 
-Click a component below to go to its documentation. (Note that this documentation is a work in progress. The demo code should be your main source of truth for how something works.)
+Click a component/package below to go to the documentation. (Note that this documentation is a work in progress. The demo code should be your main source of truth for how something works.)
 
 - [Banner](packages/banner/README.md)
 - [Button](packages/button/README.md)
   - [Floating Action Button](packages/fab/README.md)
   - [Icon Button](packages/icon-button/README.md)
 - [Card](packages/card/README.md)
+- [Common](packages/common/README.md)
 - [Data Table](packages/data-table/README.md)
 - [Dialog](packages/dialog/README.md)
 - [Drawer](packages/drawer/README.md)

packages/common/README.md

@@ -1,15 +1,21 @@
 # Svelte Material UI - Common Components
 
-These common components are used in other components.
+Common Label and Icon components, elemental components, and helper utilities.
 
-You can also use the elemental components to switch the HTML element that an SMUI component with a `component` prop uses.
+You can use the elemental components to switch the HTML element that an SMUI component with a `component` prop uses.
 
 # Installation
 
 ```sh
 npm install --save-dev @smui/common
 ```
 
+# Demo
+
+[See it in action.](https://sveltematerialui.com/demo/common)
+
+[See the demo code.](/site/src/routes/demo/common/)
+
 # Exports
 
 ## Label

site/package-lock.json

@@ -132,6 +132,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "sapper": "^0.29.1",
     "smui-theme": "file:../packages/smui-theme",
-    "svelte": "^3.37.0"
+    "svelte": "^3.37.0",
+    "tinygesture": "^1.1.4"
   }
 }

site/package.json

@@ -256,6 +256,14 @@
         'https://github.com/hperrin/svelte-material-ui/tree/master/packages/card',
       ],
     },
+    {
+      name: 'Common',
+      route: '/demo/common/',
+      indent: 0,
+      repos: [
+        'https://github.com/hperrin/svelte-material-ui/tree/master/packages/common',
+      ],
+    },
     {
       name: 'Data Table',
       route: '/demo/data-table/',

site/src/routes/_layout.svelte

@@ -0,0 +1,18 @@
+<div>
+  <MyClassAdder>I'm a component with an added class!</MyClassAdder>
+</div>
+
+<script>
+  import MyClassAdder from './_ClassAdderBuilderComponent.js';
+</script>
+
+<style>
+  * :global(.my-added-class) {
+    display: flex;
+    text-align: center;
+    align-items: center;
+    height: 150px;
+    width: 150px;
+    border: 2px solid currentColor;
+  }
+</style>

site/src/routes/demo/common/_ClassAdderBuilder.svelte

@@ -0,0 +1,7 @@
+import { classAdderBuilder } from '@smui/common/internal.js';
+import Div from '@smui/common/Div.svelte';
+
+export default classAdderBuilder({
+  class: 'my-added-class',
+  component: Div,
+});

site/src/routes/demo/common/_ClassAdderBuilderComponent.js

@@ -0,0 +1,51 @@
+<div>
+  <Button
+    class={classMap({
+      big: big,
+      [color]: true,
+    })}
+  >
+    <Label>I'm a Colored Button</Label>
+  </Button>
+</div>
+
+<div>
+  <FormField style="margin-right: 1em;">
+    <Checkbox bind:checked={big} />
+    <span slot="label">Big</span>
+  </FormField>
+  {#each ['red', 'blue', 'green'] as option}
+    <FormField style="margin-right: 1em;">
+      <Radio bind:group={color} value={option} />
+      <span slot="label">{`${option[0].toUpperCase()}${option.slice(1)}`}</span>
+    </FormField>
+  {/each}
+</div>
+
+<script>
+  import { classMap } from '@smui/common/internal.js';
+  import { Label } from '@smui/common';
+  import Button from '@smui/button';
+  import FormField from '@smui/form-field';
+  import Radio from '@smui/radio';
+  import Checkbox from '@smui/checkbox';
+
+  let big = false;
+  let color = 'red';
+</script>
+
+<style>
+  * :global(.red) {
+    color: red;
+  }
+  * :global(.blue) {
+    color: blue;
+  }
+  * :global(.green) {
+    color: green;
+  }
+
+  * :global(.big) {
+    font-size: 1.5em;
+  }
+</style>

site/src/routes/demo/common/_ClassMap.svelte

@@ -0,0 +1,16 @@
+<div style="display: flex; flex-wrap: wrap; align-items: center;">
+  <Button><Label>Button with a Label</Label></Button>
+
+  <Fab extended><Label>Fab with a Label</Label></Fab>
+
+  <IconButton><Icon class="material-icons">favorite</Icon></IconButton>
+
+  <Fab><Icon class="material-icons">favorite</Icon></Fab>
+</div>
+
+<script>
+  import Button from '@smui/button';
+  import IconButton from '@smui/icon-button';
+  import Fab from '@smui/fab';
+  import { Icon, Label } from '@smui/common';
+</script>

site/src/routes/demo/common/_CommonLabelIcon.svelte

@@ -0,0 +1,48 @@
+<!-- This event will continue to bubble up beyond this component. -->
+<div class="event" on:MyEvent={(e) => (event = e)}>
+  I'm the event listener.
+
+  <div class="event">
+    <div class="event">
+      <div class="event" bind:this={target}>I'm the event target.</div>
+    </div>
+  </div>
+</div>
+
+<br />
+
+<Button on:click={dispatchEvent}>Dispatch Event</Button>
+
+<pre
+  class="status">Caught Event Detail: {event && JSON.stringify(event.detail)}</pre>
+
+<script>
+  import { dispatch } from '@smui/common/internal.js';
+  import Button from '@smui/button';
+
+  let target;
+  let event;
+
+  function dispatchEvent() {
+    dispatch(
+      target,
+      'MyEvent',
+      {
+        // This is the event.details object.
+        time: new Date().toLocaleTimeString(),
+      },
+      {
+        // This is the eventInit object.
+        bubbles: true, // this is the default when no eventInit object is provided.
+        cancelable: true, // you can make it cancelable like this.
+      }
+    );
+  }
+</script>
+
+<style>
+  .event {
+    padding: 1em;
+    border: 1px solid currentColor;
+  }
+</style>