@reshape-biotech/design-system 2.7.24 → 2.7.26

package/README.md

@@ -1,28 +1,31 @@
-
 ## Local development flow with downstream consumer:
 
 First run
+
 ```sh
 bun link
 ```
+
 To create a soft link you can install in your consuming project's `node_modules`.
 
 Add this to your consumer's `package.json`:
+
 ```sh
 "@reshape-biotech/design-system": "link:@reshape-biotech/design-system"
 ```
 
 or run this:
+
 ```sh
 bun link @reshape-biotech/design-system
 ```
 
 Now, to have the package buidling watch for changes:
+
 ```sh
 bun run package --watch
 ```
 
-
 ## Publishing
 
 Set the package version in the `package.json` file.
@@ -41,6 +44,7 @@ bun publish
 `bun publish` requires a valid NPM publishing token to be set in your environment.
 
 ## Notes about consuming
+
 As this project heavily uses TailwindCSS **you must** have tailwind include the component files when compiling your bundle css
 
 Specifically, your `tailwind.config.js` should have something like this:
@@ -58,21 +62,18 @@ This package contains the core design system for Reshape Biotech frontend projec
 ### Contents
 
 1. **Component Library**
+
    - A collection of shared, reusable Svelte components
    - Standardized UI elements following Reshape Biotech's design guidelines
    - Fully typed components with TypeScript support
 
 2. **Tailwind Configuration**
-   - Pre-configured Tailwind CSS setup
-   - Custom theme extensions
-   - Shared utility classes
 
-3. **DaisyUI**
-   - Pre-configured DaisyUI setup
+   - Pre-configured Tailwind CSS setup
    - Custom theme extensions
    - Shared utility classes
 
-4. **Design Tokens**
+3. **Design Tokens**
    - Color palette
    - Typography
    - Shadow definitions

package/dist/components/activity/Activity.svelte

@@ -56,15 +56,15 @@
 
 <div class={`group flex items-stretch gap-3 ${className}`}>
   <div class="flex min-h-12 flex-col items-center gap-1.5">
-    <div class="w-0.5 grow bg-neutral group-first:invisible"></div>
+    <div class="bg-neutral w-0.5 grow group-first:invisible"></div>
     <div
-      class="flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 text-secondary {ACTIVITY_BACKGROUND[
+      class="text-secondary flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 {ACTIVITY_BACKGROUND[
         activity.icon
       ]}"
     >
       <ActivityIcon icon={activity.icon} />
     </div>
-    <div class="w-0.5 grow bg-neutral group-last:invisible"></div>
+    <div class="bg-neutral w-0.5 grow group-last:invisible"></div>
   </div>
   <div class="flex items-center py-4">
     <div class="text-secondary">

package/dist/components/avatar/Avatar.svelte

@@ -43,7 +43,7 @@
 
 {#snippet avatar()}
   <div
-    class="{sizeClassName} flex items-center justify-center rounded-full border border-static bg-accent text-accent"
+    class="{sizeClassName} border-static bg-accent text-accent flex items-center justify-center rounded-full border"
   >
     {initials}
   </div>

package/dist/components/datepicker/DatePicker.stories.svelte

@@ -5,7 +5,8 @@
   import { userEvent, within } from '@storybook/test';
   import { DateTime } from 'luxon';
   import DatePicker from './DatePicker.svelte';
-  import Dropdown from '../dropdown/Dropdown.svelte';
+  import * as Dropdown from '../dropdown/index';
+  import Button from '../button/Button.svelte';
 
   const { Story } = defineMeta({
     component: DatePicker,
@@ -130,22 +131,21 @@
 
 <Story name="In Dropdown" asChild>
   <div class="p-4">
-    <Dropdown bind:open={isOpen} side="dropdown-bottom" alignEnd={false}>
-      {#snippet trigger({ Trigger })}
-        <Trigger>
-          <Icon class="mr-2" size={16}>
-            {#snippet children(props)}
-              <CalendarBlank {...props} />
-            {/snippet}
-          </Icon>
-          {displayText}
-        </Trigger>
-      {/snippet}
-
-      {#snippet content()}
-        <DatePicker selectedDate={dropdownDate} onClick={handleDropdownSelection} />
-      {/snippet}
-    </Dropdown>
+    <Dropdown.Root bind:open={isOpen}>
+      <Dropdown.Trigger>
+        <Icon class="mr-2" size={16}>
+          {#snippet children(props)}
+            <CalendarBlank {...props} />
+          {/snippet}
+        </Icon>
+        {displayText}
+      </Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.RawContent side="bottom" sideOffset={4}>
+          <DatePicker selectedDate={dropdownDate} onClick={handleDropdownSelection} />
+        </Dropdown.RawContent>
+      </Dropdown.Portal>
+    </Dropdown.Root>
 
     {#if dropdownDate}
       <div class="mt-4 rounded bg-neutral p-2">
@@ -205,27 +205,26 @@
       </div>
 
       <div class="mb-4">
-        <Dropdown bind:open={formIsOpen} side="dropdown-bottom" alignEnd={false}>
-          {#snippet trigger({ Trigger })}
-            <Trigger>
-              <div data-testid="form-date-trigger" class="flex items-center gap-2">
-                <Icon class="mr-2" size={16}>
-                  {#snippet children(props)}
-                    <CalendarBlank {...props} />
-                  {/snippet}
-                </Icon>
-                {formDisplayText}
-              </div>
-            </Trigger>
-          {/snippet}
-
-          {#snippet content()}
-            <DatePicker selectedDate={formDropdownDate} onClick={handleFormDateSelection} />
-          {/snippet}
-        </Dropdown>
+        <Dropdown.Root bind:open={formIsOpen}>
+          <Dropdown.Trigger>
+            <div data-testid="form-date-trigger" class="flex items-center gap-2">
+              <Icon class="mr-2" size={16}>
+                {#snippet children(props)}
+                  <CalendarBlank {...props} />
+                {/snippet}
+              </Icon>
+              {formDisplayText}
+            </div>
+          </Dropdown.Trigger>
+          <Dropdown.Portal>
+            <Dropdown.RawContent side="bottom" sideOffset={4}>
+              <DatePicker selectedDate={formDropdownDate} onClick={handleFormDateSelection} />
+            </Dropdown.RawContent>
+          </Dropdown.Portal>
+        </Dropdown.Root>
       </div>
 
-      <button type="submit" class="btn btn-primary mt-4">Submit Form</button>
+      <Button type="submit" class="mt-4">Submit Form</Button>
     </form>
   </div>
 </Story>