DT-2565 - add collapsible divider component and icons for billing pla…

…ns page (#2452)

* add collapsible component and icons for billing plans page

* rename component

src/lib/holocene/collapsible-divider/collapsible-divider.stories.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" context="module">
+  import type { Meta } from '@storybook/svelte';
+
+  import CollapsibleDivider from './collapsible-divider.svelte';
+
+  export const meta = {
+    title: 'Collapsible Divider',
+    component: CollapsibleDivider,
+    args: {
+      label: 'Expand me',
+    },
+
+    argTypes: {
+      label: { name: 'Label', control: 'text' },
+    },
+  } satisfies Meta<CollapsibleDivider>;
+</script>
+
+<script lang="ts">
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+  <CollapsibleDivider label={args.label}>
+    <p>This is the content</p>
+  </CollapsibleDivider>
+</Template>
+
+<Story name="Default" />

src/lib/holocene/collapsible-divider/collapsible-divider.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  import { twMerge as merge } from 'tailwind-merge';
+
+  import Icon from '../icon/icon.svelte';
+
+  type $$Props = HTMLAttributes<HTMLDivElement> & {
+    label: string;
+    open?: boolean;
+  };
+
+  let className: string | undefined = undefined;
+
+  export let label: string;
+  export let open: boolean = false;
+  export { className as class };
+
+  const toggleOpen = () => (open = !open);
+</script>
+
+<div
+  class={merge(
+    'flex w-full flex-row items-center justify-evenly gap-4',
+    className,
+  )}
+  {...$$restProps}
+>
+  <div class="w-full border border-subtle" />
+  <button
+    class="flex grow items-center gap-2 whitespace-nowrap"
+    on:click={toggleOpen}
+  >
+    {label}
+    <Icon name={open ? 'chevron-up' : 'chevron-down'} />
+  </button>
+  <div class="w-full border border-subtle" />
+</div>
+
+<div class:hidden={!open}>
+  <slot />
+</div>

src/lib/holocene/icon/paths.ts

@@ -14,6 +14,7 @@ import bookmark from './svg/bookmark.svelte';
 import calendarPlus from './svg/calendar-plus.svelte';
 import calendar from './svg/calendar.svelte';
 import canceled from './svg/canceled.svelte';
+import chartAscending from './svg/chart-ascending.svelte';
 import chart from './svg/chart.svelte';
 import checkmark from './svg/checkmark.svelte';
 import chevronDown from './svg/chevron-down.svelte';
@@ -67,6 +68,7 @@ import moon from './svg/moon.svelte';
 import namespaceSwitcher from './svg/namespace-switcher.svelte';
 import namespace from './svg/namespace.svelte';
 import nexus from './svg/nexus.svelte';
+import officeBuildings from './svg/office-buildings.svelte';
 import pause from './svg/pause.svelte';
 import pinFilled from './svg/pin-filled.svelte';
 import pin from './svg/pin.svelte';
@@ -93,6 +95,7 @@ import table from './svg/table.svelte';
 import temporalLogo from './svg/temporal-logo.svelte';
 import terminal from './svg/terminal.svelte';
 import timeline from './svg/timeline.svelte';
+import toolbox from './svg/toolbox.svelte';
 import transcoderError from './svg/transcoder-error.svelte';
 import transcoderOff from './svg/transcoder-off.svelte';
 import transcoderOn from './svg/transcoder-on.svelte';
@@ -121,6 +124,7 @@ export const icons = {
   'calendar-plus': calendarPlus,
   calendar,
   canceled,
+  'chart-ascending': chartAscending,
   chart,
   checkmark,
   'chevron-down': chevronDown,
@@ -174,6 +178,7 @@ export const icons = {
   'namespace-switcher': namespaceSwitcher,
   namespace,
   nexus,
+  'office-buildings': officeBuildings,
   play,
   pause,
   'pin-filled': pinFilled,
@@ -201,6 +206,7 @@ export const icons = {
   'temporal-logo': temporalLogo,
   terminal,
   timeline,
+  toolbox,
   'transcoder-error': transcoderError,
   'transcoder-on': transcoderOn,
   'transcoder-off': transcoderOff,

src/lib/holocene/icon/svg/chart-ascending.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+</script>
+
+<Svg {...$$props}>
+  <path
+    d="m 2.2500001,2.6250003 v -1.125 H 1.25e-7 v 1.125 V 21.375 22.5 H 1.1250001 22.875 24 V 20.25 H 22.875 2.2500001 Z m 19.9217999,5.296875 0.79695,-0.796875 -1.59375,-1.58907 -0.7968,0.79689 -5.578199,5.5781257 -3.703125,-3.7031257 -0.796875,-0.796875 -0.7968759,0.796875 -4.5,4.5000007 -0.796875,0.796875 1.59375,1.584405 0.796875,-0.79692 3.7031259,-3.703125 3.703125,3.703125 0.796875,0.79692 0.796799,-0.79692 z"
+    fill="currentcolor"
+  />
+</Svg>

src/lib/holocene/icon/svg/office-buildings.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+</script>
+
+<Svg {...$$props}>
+  <path
+    d="m 21.75,2.25 v 19.5 h -9 V 2.25 Z M 12.75,0 H 10.5 V 2.25 21.75 24 h 2.25 9 H 24 V 21.75 2.25 0 H 21.75 Z M 9,6 H 1.125 0 V 7.125 22.875 24 H 1.125 9 V 21.75 H 2.25 V 8.25 H 9 Z m -1.5,9 h -3 v 3 h 3 z m 8.25,1.5 h 3 v -3 h -3 z m -8.25,-6 h -3 v 3 h 3 z m 8.25,-6 v 3 h 3 v -3 z m 3,7.5 V 9 h -3 v 3 z"
+    fill="currentcolor"
+  />
+</Svg>

src/lib/holocene/icon/svg/toolbox.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+</script>
+
+<Svg {...$$props}>
+  <path
+    d="M 6,1.5 H 7.125 16.875 18 V 2.625 6 h 2.25 L 24,9.75 v 4.125 2.25 4.125 2.25 H 21.75 2.25 0 V 20.25 16.125 13.875 9.75 L 3.75,6 H 6 V 2.625 Z M 2.25,16.125 v 4.125 h 19.5 v -4.125 h -4.5 V 16.875 18 H 15 v -1.125 -0.75 H 9 V 16.875 18 H 6.75 v -1.125 -0.75 z m 19.5,-2.25 V 10.68285 L 19.31715,8.25 H 4.68282 L 2.25,10.68285 V 13.875 h 4.5 V 13.125 12 H 9 v 1.125 0.75 h 6 V 13.125 12 h 2.25 v 1.125 0.75 z M 15.75,3.75 H 8.25 V 6 h 7.5 z"
+    fill="currentcolor"
+  />
+</Svg>