Refs/heads/6 accordion (#24)

* add accordion, accorfion list, and icon stories

* update error

* update

---------

Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>

components.json

@@ -1,14 +1,14 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
-	"tailwind": {
-		"config": "tailwind.config.js",
-		"css": "src/index.css",
-		"baseColor": "slate"
-	},
-	"aliases": {
-		"components": "src/lib/shadcnComponents",
-		"utils": "src/utils"
-	},
-	"typescript": true
-}
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate"
+  },
+  "aliases": {
+    "components": "$src/lib/shadcnComponents",
+    "utils": "$src/utils"
+  },
+  "typescript": true
+}

package.json

@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@storybook/addons": "^7.6.17",
-    "bits-ui": "^0.21.15",
+    "bits-ui": "^0.21.16",
     "clsx": "^2.1.1",
     "svelte": "^4.2.19",
     "tailwind-merge": "^2.5.2"

src/icons/Check.svelte

@@ -0,0 +1,20 @@
+<svg
+  width="10"
+  height="10"
+  viewBox="0 0 10 10"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <g clip-path="url(#clip0_2578_353)">
+    <path
+      d="M9.80685 1.78353L3.65879 9.16121L0.23584 5.64046L1.43083 4.47867L3.56344 6.67221L8.52648 0.716553L9.80685 1.78353Z"
+      fill="black"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_2578_353">
+      <rect width="10" height="10" fill="black" />
+    </clipPath>
+  </defs>
+</svg>

src/icons/Chevron.svelte

@@ -0,0 +1,6 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg" class={$$restProps.class}>
+  <path
+    d="M10.4711 0.229856L6.93879 4.08615L5.99461 5.1117L5.05522 4.08615L1.5325 0.229856C1.15866 -0.0945539 0.617074 -0.0788567 0.276785 0.297878C-0.0922616 0.700774 -0.0922616 1.34959 0.276785 1.75249L5.06001 6.97445L5.9994 8L6.94358 6.97445L11.7268 1.75249C11.9089 1.55366 12 1.2868 12 1.02518C12 0.763563 11.9089 0.49671 11.7268 0.297878C11.3817 -0.0788567 10.8401 -0.0945539 10.4711 0.229856Z"
+    fill="currentColor"
+  />
+</svg>

src/icons/Chevron.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type ChevronProps = typeof __propDef.props;
+export type ChevronEvents = typeof __propDef.events;
+export type ChevronSlots = typeof __propDef.slots;
+export default class Chevron extends SvelteComponent<ChevronProps, ChevronEvents, ChevronSlots> {
+}
+export {};

src/assets/Error.svelte → src/icons/Error.svelte

@@ -1,4 +1,11 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"

src/icons/Icons.stories.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import Check from './Check.svelte';
+  import Chevron from './Chevron.svelte';
+  import Error from './Error.svelte';
+
+  const icons = {
+    Check,
+    Chevron,
+    Error,
+  };
+</script>
+
+<Meta title="Icons/IconList" />
+
+<Story name="IconList">
+  <div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+    {#each Object.entries(icons) as [name, Icon]}
+      <div class="p-4">
+        <h2 class="mb-2 text-lg font-semibold">{name}</h2>
+        <svelte:component this={Icon} class="mb-1 h-8 w-8" />
+      </div>
+    {/each}
+  </div>
+</Story>

src/lib/features/Accordion.stories.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+  import Accordion from './Accordion.svelte';
+</script>
+
+<Meta title="Design System/Features/Accordion" component={Accordion} />
+
+<!-- Primary -->
+<Story name="Accordion">
+  <Accordion trigger="Hello world." content="Hello there." />
+</Story>

src/lib/features/Accordion.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Root, Item, Trigger, Content } from '../shadcnComponents/ui/accordion';
+
+  export let trigger = '';
+  export let content = '';
+</script>
+
+<Root>
+  <Item value="item-1">
+    <Trigger>{trigger}</Trigger>
+    <Content>{content}</Content>
+  </Item>
+</Root>

src/lib/features/AccordionList.stories.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+  import AccordionList from './AccordionList.svelte';
+  import Accordion from './Accordion.svelte';
+</script>
+
+<Meta title="Design System/Features/AccordionList" component={AccordionList} />
+
+<!-- Primary -->
+<Story name="AccordionList">
+  <AccordionList>
+    <Accordion trigger="Hello world." content="Hello there." />
+  </AccordionList>
+  <AccordionList>
+    <Accordion trigger="Are you there?" content="Yes I am!" />
+  </AccordionList>
+</Story>

src/lib/features/AccordionList.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Root } from '../shadcnComponents/ui/accordion';
+</script>
+
+<Root>
+  <slot />
+</Root>

src/lib/shadcnComponents/ui/accordion/accordion-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import { slide } from 'svelte/transition';
+  import { cn } from '../../../../utils';
+
+  type $$Props = AccordionPrimitive.ContentProps;
+
+  let className: $$Props['class'] = undefined;
+  export let transition: $$Props['transition'] = slide;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 200,
+  };
+  export { className as class };
+</script>
+
+<AccordionPrimitive.Content
+  class={cn('overflow-hidden text-sm transition-all', className)}
+  {transition}
+  {transitionConfig}
+  {...$$restProps}
+>
+  <div class="pb-4 pt-0 text-normal">
+    <slot />
+  </div>
+</AccordionPrimitive.Content>

src/lib/shadcnComponents/ui/accordion/accordion-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+  import { cn } from '../../../../utils';
+
+	type $$Props = AccordionPrimitive.ItemProps;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
+	<slot />
+</AccordionPrimitive.Item>

src/lib/shadcnComponents/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import Chevron from '../../../../icons/Chevron.svelte';
+  import { cn } from '../../../../utils';
+
+  type $$Props = AccordionPrimitive.TriggerProps;
+  type $$Events = AccordionPrimitive.TriggerEvents;
+
+  let className: $$Props['class'] = undefined;
+  export let level: AccordionPrimitive.HeaderProps['level'] = 3;
+  export { className as class };
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+  <AccordionPrimitive.Trigger
+    class={cn(
+      'flex flex-1 items-center justify-between py-4 text-md font-bold transition-all [&[data-state=open]>svg]:rotate-180',
+      className
+    )}
+    {...$$restProps}
+    on:click
+  >
+    <slot />
+    <Chevron class="h-5 w-5 bg-black p-1 text-white transition-transform duration-200" />
+  </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

src/lib/shadcnComponents/ui/accordion/index.ts

@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+const Root = AccordionPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};

src/lib/shadcnComponents/ui/select/select-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Check from '../../../../assets/Check.svelte';
+  import Check from '../../../../icons/Check.svelte';
   import { Select as SelectPrimitive } from 'bits-ui';
   import { cn } from '../../../../utils';
 

src/lib/shadcnComponents/ui/select/select-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Select as SelectPrimitive } from 'bits-ui';
-  import Chevron from '../../../../assets/Chevron.svelte';
-  import Error from '../../../../assets/Error.svelte';
+  import Chevron from '../../../../icons/Chevron.svelte';
+  import Error from '../../../../icons/Error.svelte';
   import { cn } from '../../../../utils';
 
   export let error: string | undefined;
@@ -16,7 +16,7 @@
 <div class="flex items-center gap-3">
   <SelectPrimitive.Trigger
     class={cn(
-      'flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive [&>span]:line-clamp-1 data-[placeholder]:[&>span]:text-muted-foreground',
+      'border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       error ? 'border-2 border-error' : 'border border-gray3',
       className
     )}

svelte.config.js

@@ -15,6 +15,7 @@ export default {
       $atoms: resolve('./src/lib/atoms'),
       $typography: resolve('./src/lib/typography'),
       $colors: resolve('./src/lib/tailwindColors'),
+      $icons: resolve('./src/icons'),
     },
   },
 };