chnages to sidenav

palimpsest/src/components/carbon-components/Accordion/API.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { ComponentAPI } from '../../Component';
+
+  const props = [
+    {
+      name: 'type',
+      type: 'string',
+      required: true,
+      value: ['inline', 'single', 'multi'],
+      defaultValue: { value: 'single' },
+      description: `
+      <div>
+        <strong>Inline</strong> An inline <code>CodeSnippet</code> contains
+        </div>
+      `
+    },
+    {
+      name: 'light',
+      type: 'boolean',
+      required: false,
+      value: [],
+      defaultValue: { value: false },
+      description: `
+        <div>Light variant</div>
+      `
+    },
+    {
+      name: 'code',
+      type: 'string',
+      required: true,
+      value: [],
+      defaultValue: { value: undefined },
+      description: `
+        <div>Light variant</div>
+      `
+    }
+  ];
+</script>
+
+<ComponentAPI {props} />

palimpsest/src/components/carbon-components/Accordion/Preview.svelte

@@ -0,0 +1,61 @@
+<script>
+  import {
+    Accordion,
+    AccordionItem,
+    ToggleSmall,
+    NumberInput,
+    FormGroup
+  } from 'carbon-components-svelte';
+  import { ComponentPreview } from '../../Component';
+
+  $: items = [1, 2, 3, 4].map(id => ({ id, open: false }));
+
+  $: props = {
+    count: 4,
+    open: false,
+    skeleton: false
+  };
+
+  $: if (props.skeleton) {
+    items = items.map(_ => ({ ..._, open: false }));
+  }
+
+  $: code = `
+<script>
+  import { Accordion, AccordionItem } from 'carbon-components-svelte';
+< /script>
+
+<Accordion${props.skeleton ? ' skeleton' : ''}${props.skeleton ? ` count={${props.count}}` : ''}${
+    props.open ? ` open` : ''
+  }>
+${items
+  .map(item => {
+    return `  <AccordionItem title="Item ${item.id}"${item.open ? ' open' : ''}>Item ${
+      item.id
+    } content</AccordionItem>`;
+  })
+  .join('\n')}
+</Accordion>
+  `;
+</script>
+
+<ComponentPreview {code} minHeight="16rem">
+  <Accordion {...props}>
+    {#each items as { id }, i (id)}
+      <AccordionItem title={`Item ${id}`} bind:open={items[i].open}>
+        Item {id} content
+      </AccordionItem>
+    {/each}
+  </Accordion>
+  <div slot="props">
+    <FormGroup legendText="Skeleton">
+      <ToggleSmall id="toggle-skeleton" bind:toggled={props.skeleton} />
+    </FormGroup>
+    <FormGroup legendText="Skeleton row count">
+      <NumberInput disabled={!props.skeleton} bind:value={props.count} />
+    </FormGroup>
+    <FormGroup legendText="Skeleton first item open">
+      <ToggleSmall id="toggle-open" disabled={!props.skeleton} bind:toggled={props.open} />
+    </FormGroup>
+  </div>
+</ComponentPreview>

palimpsest/src/components/carbon-components/Accordion/index.js

@@ -0,0 +1,11 @@
+import Preview from './Preview.svelte';
+import API from './API.svelte';
+import KitchenSink from './KitchenSink.svelte';
+
+const tabs = {
+  Preview,
+  API,
+  KitchenSink
+};
+
+export default tabs;

palimpsest/src/components/carbon-components/CodeSnippet/API.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { ComponentAPI } from '../../Component';
+
+  const props = [
+    {
+      name: 'type',
+      type: 'string',
+      required: true,
+      value: ['inline', 'single', 'multi'],
+      defaultValue: { value: 'single' },
+      description: `
+      <div>
+        <strong>Inline</strong> An inline <code>CodeSnippet</code> contains
+        </div>
+      `
+    },
+    {
+      name: 'light',
+      type: 'boolean',
+      required: false,
+      value: [],
+      defaultValue: { value: false },
+      description: `
+        <div>Light variant</div>
+      `
+    },
+    {
+      name: 'code',
+      type: 'string',
+      required: true,
+      value: [],
+      defaultValue: { value: undefined },
+      description: `
+        <div>Light variant</div>
+      `
+    }
+  ];
+</script>
+
+<ComponentAPI {props} />

palimpsest/src/components/carbon-components/CodeSnippet/Preview.svelte

@@ -0,0 +1,72 @@
+<script>
+  import {
+    TextArea,
+    TextInput,
+    ToggleSmall,
+    CodeSnippet,
+    FormGroup,
+    RadioButtonGroup,
+    RadioButton
+  } from 'carbon-components-svelte';
+  import { ComponentPreview } from '../../Component';
+
+  $: props = {
+    code: `
+      This is a <CodeSnippet />
+    `.trim(),
+    light: false,
+    type: 'single',
+    skeleton: false,
+    feedback: 'Copied!'
+  };
+
+  $: code = `
+<script>
+  import { CodeSnippet } from 'carbon-components-svelte';
+
+  $: code = \`${props.code}\`;
+< /script>
+
+<CodeSnippet type="${props.type}"${props.light ? ' light' : ''} {code}${
+    props.skeleton ? ' skeleton' : ''
+  } feedback="${props.feedback}" />
+  `;
+
+  $: if (props.type === 'inline') {
+    props.skeleton = false;
+  }
+</script>
+
+<ComponentPreview light={props.light} {code}>
+  <div>
+    <CodeSnippet {...props} />
+  </div>
+  <div slot="props">
+    <FormGroup legendText="Type">
+      <RadioButtonGroup legend="Type" bind:selected={props.type}>
+        <RadioButton value="inline" id="inline" labelText="inline" />
+        <RadioButton value="single" id="single" labelText="single" />
+        <RadioButton value="multi" id="multi" labelText="multi" />
+      </RadioButtonGroup>
+    </FormGroup>
+    <FormGroup legendText="Light variant">
+      <ToggleSmall id="toggle-light" bind:toggled={props.light} />
+    </FormGroup>
+    <FormGroup legendText="Code">
+      {#if props.type === 'multi'}
+        <TextArea bind:value={props.code} />
+      {:else}
+        <TextInput bind:value={props.code} />
+      {/if}
+    </FormGroup>
+    <FormGroup legendText="Skeleton">
+      <ToggleSmall
+        id="toggle-skeleton"
+        disabled={props.type === 'inline'}
+        bind:toggled={props.skeleton} />
+    </FormGroup>
+    <FormGroup legendText="Feedback text">
+      <TextInput placeholder="Enter text" bind:value={props.feedback} />
+    </FormGroup>
+  </div>
+</ComponentPreview>

palimpsest/src/components/carbon-components/CodeSnippet/index.js

@@ -0,0 +1,11 @@
+import Preview from './Preview.svelte';
+import API from './API.svelte';
+import KitchenSink from './KitchenSink.svelte';
+
+const tabs = {
+  Preview,
+  API,
+  KitchenSink
+};
+
+export default tabs;