@reshape-biotech/design-system 2.6.4 → 2.7.0

package/dist/components/notification-popup/NotificationPopup.stories.svelte

@@ -1,6 +1,7 @@
 <script module>
+  import Sparkle from 'phosphor-svelte/lib/Sparkle';
+  import { Icon } from 'design-system';
   import NotificationPopup from './NotificationPopup.svelte';
-  import { Icon } from '../icons';
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
   const { Story } = defineMeta({
@@ -19,7 +20,11 @@
 <Story name="Primary" asChild>
   <NotificationPopup onClose={handleClick} title="See what's new" {visible}>
     <a href="_blank" color="transparent" class="flex items-center gap-2">
-      <Icon iconName="Sparkle" />
+      <Icon>
+        {#snippet children(props)}
+          <Sparkle {...props} />
+        {/snippet}
+      </Icon>
       <p>Product updates</p>
     </a>
   </NotificationPopup>

package/dist/components/notification-popup/NotificationPopup.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+  import X from 'phosphor-svelte/lib/X';
+  import { Icon } from 'design-system';
   import { IconButton } from '../icon-button/';
   import { fade, fly } from 'svelte/transition';
   import type { Snippet } from 'svelte';
-  import { Icon } from '../icons';
 
   interface Props {
     onClose: () => void;
@@ -27,7 +28,7 @@
       {@render children?.()}
     </div>
     <IconButton size="xs" variant="transparent" rounded={false} onclick={onClose}>
-      <Icon iconName="X" />
+      <Icon icon={X} />
     </IconButton>
   </div>
 {/if}

package/dist/components/notifications/Notifications.stories.svelte

@@ -46,30 +46,30 @@
       </div>
       <div class="grow"></div>
       <div class="flex flex-col gap-2">
-        <h5>Icons</h5>
+        <h5>With Icons (Automatic)</h5>
         <Button
           onClick={() => {
-            notifications.default('This is a default icon notification', 'Bell');
+            notifications.default('Default notification with bell icon');
           }}>Show default</Button
         >
         <Button
           onClick={() => {
-            notifications.danger('This is a danger icon notification', 'SealWarning');
+            notifications.danger('Danger notification with X icon');
           }}>Show danger</Button
         >
         <Button
           onClick={() => {
-            notifications.warning('This is a warning icon notification', 'Warning');
+            notifications.warning('Warning notification with warning icon');
           }}>Show warning</Button
         >
         <Button
           onClick={() => {
-            notifications.info('This is an info icon notification', 'Info');
+            notifications.info('Info notification with info icon');
           }}>Show info</Button
         >
         <Button
           onClick={() => {
-            notifications.success('This is a success icon notification', 'Check');
+            notifications.success('Success notification with check icon');
           }}>Show success</Button
         >
       </div>
@@ -78,27 +78,27 @@
         <h5>Dismissable</h5>
         <Button
           onClick={() => {
-            notifications.default('This is a default icon notification', 'Bell', true);
+            notifications.default('Dismissable default notification', undefined, true);
           }}>Show default</Button
         >
         <Button
           onClick={() => {
-            notifications.danger('This is a danger icon notification', 'SealWarning', true);
+            notifications.danger('Dismissable danger notification', undefined, true);
           }}>Show danger</Button
         >
         <Button
           onClick={() => {
-            notifications.warning('This is a warning icon notification', 'Warning', true);
+            notifications.warning('Dismissable warning notification', undefined, true);
           }}>Show warning</Button
         >
         <Button
           onClick={() => {
-            notifications.info('This is an info icon notification', 'Info', true);
+            notifications.info('Dismissable info notification', undefined, true);
           }}>Show info</Button
         >
         <Button
           onClick={() => {
-            notifications.success('This is a success icon notification', 'Check', true);
+            notifications.success('Dismissable success notification', undefined, true);
           }}>Show success</Button
         >
       </div>

package/dist/components/pill/Pill.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Icon } from '../icons';
+  import X from 'phosphor-svelte/lib/X';
+  import { Icon } from 'design-system';
 
   interface Props {
     class?: string;
@@ -14,7 +15,7 @@
 
 <button class="{className} " {onclick} {type} data-testid={testID}>
   {text}
-  <Icon iconName="X" class="opacity-50" />
+  <Icon class="opacity-50" icon={X} />
 </button>
 
 <style>

package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Icon } from '../icons';
+  import CheckCircle from 'phosphor-svelte/lib/CheckCircle';
+  import { Icon } from 'design-system';
 
   type Props = {
     currentCount: number;
@@ -15,8 +16,8 @@
 <span class={`flex items-center gap-1 text-sm text-tertiary ${className}`}>
   {currentCount} of {requiredCount} required
   {#if isComplete}
-    <Icon iconName="CheckCircle" weight="fill" color="accent" size={16} />
+    <Icon weight="fill" color="accent" size={16} icon={CheckCircle} />
   {:else}
-    <Icon iconName="CheckCircle" size={16} />
+    <Icon size={16} icon={CheckCircle} />
   {/if}
 </span>

package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
-  import { Icon } from '../icons';
+  import Star from 'phosphor-svelte/lib/Star';
+  import { Icon } from 'design-system';
   import SegmentedControlButtons from './SegmentedControlButtons.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -13,18 +14,54 @@
 <Story name="Primary" asChild>
   <SegmentedControlButtons class="w-[350px]">
     {#snippet children({ ControlButton })}
-      <ControlButton active><Icon iconName="Star" /> Low</ControlButton>
-      <ControlButton><Icon iconName="Star" /> Medium</ControlButton>
-      <ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
+      <ControlButton active
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Low</ControlButton
+      >
+      <ControlButton
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Medium</ControlButton
+      >
+      <ControlButton disabled
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> High</ControlButton
+      >
     {/snippet}
   </SegmentedControlButtons>
 </Story>
 <Story name="Large" asChild>
   <SegmentedControlButtons size="lg" class="w-[350px]">
     {#snippet children({ ControlButton })}
-      <ControlButton active><Icon iconName="Star" /> Low</ControlButton>
-      <ControlButton><Icon iconName="Star" /> Medium</ControlButton>
-      <ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
+      <ControlButton active
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Low</ControlButton
+      >
+      <ControlButton
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Medium</ControlButton
+      >
+      <ControlButton disabled
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> High</ControlButton
+      >
     {/snippet}
   </SegmentedControlButtons>
 </Story>
@@ -32,13 +69,25 @@
   <SegmentedControlButtons class="w-[350px]">
     {#snippet children({ ControlButton })}
       <ControlButton active color="secondary">
-        <Icon iconName="Star" /> Low
+        <Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Low
       </ControlButton>
       <ControlButton color="secondary">
-        <Icon iconName="Star" /> Medium
+        <Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Medium
       </ControlButton>
       <ControlButton color="secondary">
-        <Icon iconName="Star" /> High
+        <Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> High
       </ControlButton>
     {/snippet}
   </SegmentedControlButtons>

package/dist/components/select/components/MultiSelectTrigger.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import X from 'phosphor-svelte/lib/X';
+  import Icon from '../../icons/Icon.svelte';
   import * as Select from '../index';
-  import { Icon, type IconName } from '../../icons';
   import IconButton from '../../icon-button/IconButton.svelte';
 
   type ItemType = {
     value: string;
     label: string;
-    iconName?: IconName | string;
     disabled?: boolean;
   };
 
@@ -45,9 +45,7 @@
             class="flex h-7 w-fit items-center gap-1 rounded-md bg-neutral py-0.5 pl-2 pr-0.5 text-sm"
             aria-label={`Selected item ${item.label}`}
           >
-            {#if item.iconName}
-              <Icon iconName={item.iconName as IconName} color="secondary" />
-            {/if}
+            <!-- Icons not currently supported in multi-select items -->
             <span class:text-secondary={item.disabled}>{item.label}</span>
             {#if !item.disabled}
               <IconButton
@@ -59,7 +57,7 @@
                 rounded={false}
                 class="text-primary focus:outline-none"
               >
-                <Icon iconName="X" color="tertiary" />
+                <Icon color="tertiary" icon={X} />
               </IconButton>
             {/if}
           </div>

package/dist/components/select/components/MultiSelectTrigger.svelte.d.ts

@@ -1,8 +1,6 @@
-import { type IconName } from '../../icons';
 type ItemType = {
     value: string;
     label: string;
-    iconName?: IconName | string;
     disabled?: boolean;
 };
 interface Props {

package/dist/components/select/components/SelectContent.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import CaretUp from 'phosphor-svelte/lib/CaretUp';
+  import CaretDown from 'phosphor-svelte/lib/CaretDown';
+  import { Icon } from 'design-system';
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { ContentProps } from '../types';
 
   import type { Snippet } from 'svelte';
-  import Icon from '../../icons/Icon.svelte';
 
   interface Props extends ContentProps {
     children: Snippet;
@@ -21,13 +23,13 @@
 <SelectPrimitive.Portal>
   <SelectPrimitive.Content {...restProps} {sideOffset} class={baseClasses + ' ' + className}>
     <SelectPrimitive.ScrollUpButton class="flex justify-center">
-      <Icon iconName="CaretUp" color="tertiary" />
+      <Icon color="tertiary" icon={CaretUp} />
     </SelectPrimitive.ScrollUpButton>
     <SelectPrimitive.Viewport class="p-1 ">
       {@render children()}
     </SelectPrimitive.Viewport>
     <SelectPrimitive.ScrollDownButton class="flex justify-center">
-      <Icon iconName="CaretDown" color="tertiary" />
+      <Icon color="tertiary" icon={CaretDown} />
     </SelectPrimitive.ScrollDownButton>
   </SelectPrimitive.Content>
 </SelectPrimitive.Portal>

package/dist/components/select/components/SelectItem.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import Check from 'phosphor-svelte/lib/Check';
+  import { Icon } from 'design-system';
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { ItemProps, ItemSlotProps } from '../types';
 
   import type { Snippet } from 'svelte';
-  import Icon from '../../icons/Icon.svelte';
 
   interface Props extends ItemProps {
     children?: Snippet<[ItemSlotProps]>;
@@ -33,7 +34,7 @@
       >
     {/if}
     {#if params.selected}
-      <Icon iconName="Check" color="accent" />
+      <Icon color="accent" icon={Check} />
     {/if}
   {/snippet}
 </SelectPrimitive.Item>

package/dist/components/select/components/SelectTrigger.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import CaretDown from 'phosphor-svelte/lib/CaretDown';
+  import { Icon } from 'design-system';
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { TriggerProps, IconSnippet } from '../types';
 
   import type { Snippet } from 'svelte';
-  import { Icon } from '../../icons';
 
   interface Props extends TriggerProps {
     TriggerIcon?: IconSnippet;
@@ -43,6 +44,6 @@
   {#if TriggerIcon}
     {@render TriggerIcon()}
   {:else}
-    <Icon iconName="CaretDown" color="secondary" class="mx-1 shrink-0" />
+    <Icon color="secondary" class="mx-1 shrink-0" icon={CaretDown} />
   {/if}
 </SelectPrimitive.Trigger>

package/dist/components/slider/Slider.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Icon } from '../icons';
+  import CaretUpDown from 'phosphor-svelte/lib/CaretUpDown';
+  import { Icon } from 'design-system';
 
   let className = '';
   export { className as class };
@@ -66,7 +67,7 @@
     {disabled}
   />
   <div class="thumb-overlay" style="left: {calculatePosition(value)} + 0.5rem)">
-    <Icon iconName="CaretUpDown" class="rotate-90" />
+    <Icon class="rotate-90" icon={CaretUpDown} />
   </div>
 </div>
 

package/dist/components/stat-card/StatCard.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import Info from 'phosphor-svelte/lib/Info';
+  import PencilSimple from 'phosphor-svelte/lib/PencilSimple';
+  import { Icon } from 'design-system';
   import IconButton from '../icon-button/IconButton.svelte';
-  import { Icon } from '../icons';
   import Spinner from '../spinner/Spinner.svelte';
   import Tooltip from '../tooltip/Tooltip.svelte';
   import { Input } from '../input';
@@ -117,7 +119,7 @@
     {#if titleTooltip && showTitleTooltip}
       <Tooltip>
         {#snippet trigger()}
-          <Icon iconName="Info" color="icon-tertiary" />
+          <Icon color="icon-tertiary" icon={Info} />
         {/snippet}
         {#snippet content()}
           <span>
@@ -156,7 +158,7 @@
         </div>
         {#if editable}
           <IconButton onclick={(e) => startEditing(e)} rounded={false}>
-            <Icon iconName="PencilSimple" />
+            <Icon icon={PencilSimple} />
           </IconButton>
         {/if}
       {/if}