Fix CheckBoxList SVG icons + Move docs source

2022-05-25 17:22:54 -07:00
parent 8da6572074
commit 4ffc90f963
21 changed files with 284 additions and 250 deletions
--- a/src/docs/components/Example.svelte
+++ b/src/docs/components/Example.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { Button } from 'omorphia';
+    import IconMoon from 'virtual:icons/heroicons-outline/moon';
+    import IconSun from 'virtual:icons/heroicons-outline/sun';
+
+    export let meta: { raised: boolean };
+
+    let theme = 'light';
+    let background = meta.raised ? 'var(--color-raised-bg)' : 'var(--color-bg)';
+</script>
+
+<div class="example">
+    <div class="example__preview theme-{theme} base" style:background>
+        <slot name="example" />
+    </div>
+    <div class="example__source">
+        <div class="example__source__options">
+            <Button
+                color="primary-light"
+                on:click={() => (theme === 'light' ? (theme = 'dark') : (theme = 'light'))}
+            >
+                {#if theme === 'light'}
+                    <IconMoon />
+                {:else}
+                    <IconSun />
+                {/if}
+            </Button>
+        </div>
+        <pre class="example__source__code language-svelte"><slot name="code" /></pre>
+    </div>
+</div>
+
+<style lang="postcss">
+    .example {
+        margin: 15px 0 32px;
+
+        &__preview {
+            border-radius: var(--rounded-sm-top);
+            border: solid 2px hsl(0, 0%, 20%);
+            border-bottom: none;
+            display: flex;
+            grid-gap: 16px;
+            flex-wrap: wrap;
+            position: relative;
+            justify-content: flex-start;
+            z-index: 1;
+            padding: 16px;
+        }
+
+        &__source {
+            position: relative;
+
+            &__options {
+                position: absolute;
+                top: 0;
+                right: 0;
+                padding: 8px;
+                display: flex;
+                justify-content: flex-end;
+
+                :global(button) {
+                    color: black;
+                }
+            }
+
+            &__code {
+                margin: 0;
+                border-radius: var(--rounded-sm-bottom) !important;
+                background: hsl(220, 13%, 22%);
+            }
+        }
+    }
+</style>