@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/activity/Activity.svelte

@@ -1,127 +1,127 @@
 <script lang="ts">
-	import { Icon, type IconName, type IconColor, type BackgroundClass } from '../icons';
-	import { DateTime } from 'luxon';
+  import { Icon, type IconName, type IconColor, type BackgroundClass } from '../icons';
+  import { DateTime } from 'luxon';
 
-	type ActivityIcon =
-		| 'add'
-		| 'capture'
-		| 'delete'
-		| 'edit'
-		| 'failed'
-		| 'pause'
-		| 'start'
-		| 'stop'
-		| 'warning'
-		| 'success'
-		| 'export-succeeded'
-		| 'export-failed';
+  type ActivityIcon =
+    | 'add'
+    | 'capture'
+    | 'delete'
+    | 'edit'
+    | 'failed'
+    | 'pause'
+    | 'start'
+    | 'stop'
+    | 'warning'
+    | 'success'
+    | 'export-succeeded'
+    | 'export-failed';
 
-	type Activity = {
-		activity_type?: string;
-		icon: ActivityIcon;
-		label: string;
-		timestamp: string;
-		author?: string | null;
-		field?: string | null;
-		previous_value?: string | null;
-		value?: string | null;
-	};
+  type Activity = {
+    activity_type?: string;
+    icon: ActivityIcon;
+    label: string;
+    timestamp: string;
+    author?: string | null;
+    field?: string | null;
+    previous_value?: string | null;
+    value?: string | null;
+  };
 
-	type Props = {
-		activity: Activity;
-		class?: string;
-	};
+  type Props = {
+    activity: Activity;
+    class?: string;
+  };
 
-	const ACTIVITY_ICONS: Record<ActivityIcon, IconName> = {
-		add: 'Plus',
-		capture: 'Aperture',
-		delete: 'Trash',
-		edit: 'PencilSimple',
-		failed: 'WarningCircle',
-		pause: 'Pause',
-		start: 'Play',
-		stop: 'Stop',
-		warning: 'Warning',
-		success: 'Check',
-		'export-succeeded': 'DownloadSimple',
-		'export-failed': 'DownloadSimple'
-	};
+  const ACTIVITY_ICONS: Record<ActivityIcon, IconName> = {
+    add: 'Plus',
+    capture: 'Aperture',
+    delete: 'Trash',
+    edit: 'PencilSimple',
+    failed: 'WarningCircle',
+    pause: 'Pause',
+    start: 'Play',
+    stop: 'Stop',
+    warning: 'Warning',
+    success: 'Check',
+    'export-succeeded': 'DownloadSimple',
+    'export-failed': 'DownloadSimple',
+  };
 
-	const ACTIVITY_COLOR: Record<ActivityIcon, IconColor> = {
-		add: 'icon-secondary',
-		capture: 'icon-secondary',
-		delete: 'icon-danger',
-		edit: 'icon-secondary',
-		failed: 'icon-danger',
-		pause: 'icon-secondary',
-		start: 'icon-secondary',
-		stop: 'icon-secondary',
-		warning: 'icon-warning',
-		success: 'icon-secondary',
-		'export-succeeded': 'icon-secondary',
-		'export-failed': 'icon-danger'
-	};
+  const ACTIVITY_COLOR: Record<ActivityIcon, IconColor> = {
+    add: 'icon-secondary',
+    capture: 'icon-secondary',
+    delete: 'icon-danger',
+    edit: 'icon-secondary',
+    failed: 'icon-danger',
+    pause: 'icon-secondary',
+    start: 'icon-secondary',
+    stop: 'icon-secondary',
+    warning: 'icon-warning',
+    success: 'icon-secondary',
+    'export-succeeded': 'icon-secondary',
+    'export-failed': 'icon-danger',
+  };
 
-	const ACTIVITY_BACKGROUND: Record<ActivityIcon, BackgroundClass> = {
-		add: 'bg-neutral',
-		capture: 'bg-neutral',
-		delete: 'bg-neutral',
-		edit: 'bg-neutral',
-		failed: 'bg-danger',
-		pause: 'bg-neutral',
-		start: 'bg-neutral',
-		stop: 'bg-neutral',
-		warning: 'bg-warning',
-		success: 'bg-neutral',
-		'export-succeeded': 'bg-neutral',
-		'export-failed': 'bg-danger'
-	};
+  const ACTIVITY_BACKGROUND: Record<ActivityIcon, BackgroundClass> = {
+    add: 'bg-neutral',
+    capture: 'bg-neutral',
+    delete: 'bg-neutral',
+    edit: 'bg-neutral',
+    failed: 'bg-danger',
+    pause: 'bg-neutral',
+    start: 'bg-neutral',
+    stop: 'bg-neutral',
+    warning: 'bg-warning',
+    success: 'bg-neutral',
+    'export-succeeded': 'bg-neutral',
+    'export-failed': 'bg-danger',
+  };
 
-	function formatDateTime(timestamp: string): string {
-		try {
-			const dateTime = DateTime.fromISO(timestamp);
+  function formatDateTime(timestamp: string): string {
+    try {
+      const dateTime = DateTime.fromISO(timestamp);
 
-			if (dateTime.isValid) {
-				return dateTime.toLocaleString(DateTime.DATETIME_MED, {
-					locale: navigator.language === 'en-US' ? 'en-US' : 'en-GB'
-				});
-			}
+      if (dateTime.isValid) {
+        return dateTime.toLocaleString(DateTime.DATETIME_MED, {
+          locale: navigator.language === 'en-US' ? 'en-US' : 'en-GB',
+        });
+      }
 
-			return timestamp;
-		} catch (err) {
-			return timestamp;
-		}
-	}
+      return timestamp;
+    } catch (err) {
+      return timestamp;
+    }
+  }
 
-	let { class: className = '', activity }: Props = $props();
+  let { class: className = '', activity }: Props = $props();
 </script>
 
 <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="flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 text-secondary {ACTIVITY_BACKGROUND[
-				activity.icon
-			]}"
-		>
-			<Icon iconName={ACTIVITY_ICONS[activity.icon]} color={ACTIVITY_COLOR[activity.icon]} />
-		</div>
-		<div class="w-0.5 grow bg-neutral group-last:invisible"></div>
-	</div>
-	<div class="flex items-center py-4">
-		<div class="text-secondary">
-			<span class="text-primary">{activity.label}</span>
-			{#if activity.previous_value}
-				<span> from <span class="text-primary">{activity.previous_value}</span></span>
-			{/if}
-			{#if activity.value}
-				<span> to <span class="text-primary">{activity.value}</span></span>
-			{/if}
-			<span class="px-0.5">⸱</span>
-			<span>{formatDateTime(activity.timestamp)}</span>
-			{#if activity.author}
-				<span> by <span class="text-primary">{activity.author}</span></span>
-			{/if}
-		</div>
-	</div>
+  <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="flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 text-secondary {ACTIVITY_BACKGROUND[
+        activity.icon
+      ]}"
+    >
+      <Icon iconName={ACTIVITY_ICONS[activity.icon]} color={ACTIVITY_COLOR[activity.icon]} />
+    </div>
+    <div class="w-0.5 grow bg-neutral group-last:invisible"></div>
+  </div>
+  <div class="flex items-center py-4">
+    <div class="text-secondary">
+      <span class="text-primary">{activity.label}</span>
+      {#if activity.previous_value}
+        <span> from <span class="text-primary">{activity.previous_value}</span></span>
+      {/if}
+      {#if activity.value}
+        <span> to <span class="text-primary">{activity.value}</span></span>
+      {/if}
+      <span class="px-0.5">⸱</span>
+      <span>{formatDateTime(activity.timestamp)}</span>
+      {#if activity.author}
+        <span> by <span class="text-primary">{activity.author}</span></span>
+      {/if}
+    </div>
+  </div>
 </div>

package/dist/components/avatar/Avatar.stories.svelte

@@ -1,27 +1,27 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Avatar from './Avatar.svelte';
-
-	const { Story } = defineMeta({
-		component: Avatar,
-		title: 'Design System/Avatar',
-		tags: ['autodocs'],
-		parameters: {
-			design: {
-				type: 'figma',
-				url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-9253&t=sCuBI8dX6K6NjNR6-0'
-			}
-		}
-	});
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Avatar from './Avatar.svelte';
+
+  const { Story } = defineMeta({
+    component: Avatar,
+    title: 'Design System/Avatar',
+    tags: ['autodocs'],
+    parameters: {
+      design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-9253&t=sCuBI8dX6K6NjNR6-0',
+      },
+    },
+  });
 </script>
 
 <Story name="Default" args={{ name: 'John Doe' }} />
 
 <Story name="Sizes" asChild>
-	<div class="flex gap-2">
-		<Avatar name="John Doe" size="sm" />
-		<Avatar name="John Doe" size="md" />
-	</div>
+  <div class="flex gap-2">
+    <Avatar name="John Doe" size="sm" />
+    <Avatar name="John Doe" size="md" />
+  </div>
 </Story>
 
 <Story name="Email" args={{ name: 'john.doe@example.com' }} />
@@ -33,9 +33,9 @@
 <Story name="Without Tooltip" args={{ showTooltip: false }} />
 
 <Story name="Multiple Avatars" asChild>
-	<div class="flex gap-2">
-		<Avatar name="John Doe" />
-		<Avatar name="Jane Smith" />
-		<Avatar name="Alex Johnson" />
-	</div>
+  <div class="flex gap-2">
+    <Avatar name="John Doe" />
+    <Avatar name="Jane Smith" />
+    <Avatar name="Alex Johnson" />
+  </div>
 </Story>

package/dist/components/avatar/Avatar.svelte

@@ -1,63 +1,63 @@
 <script lang="ts">
-	import Tooltip from '../tooltip/Tooltip.svelte';
-	export interface AvatarProps {
-		name: string | null | undefined;
-		size?: 'sm' | 'md';
-		showTooltip?: boolean;
-	}
-
-	let { name, size = 'md', showTooltip = true }: AvatarProps = $props();
-	const sizes = {
-		sm: 'h-6 w-6 min-w-6 text-xxs font-semibold tracking-wide',
-		md: 'h-8 w-8 min-w-8 text-xs font-semibold tracking-wide'
-	};
-
-	let sizeClassName = $derived(sizes[size]);
-
-	const getInitials = (name: string | null | undefined) => {
-		if (!name) {
-			return '?'; // You can use any default value here
-		}
-		// Check if the name is an email
-		const isEmail = name.includes('@');
-		if (isEmail) {
-			return name.slice(0, 2).toUpperCase();
-		}
-
-		// Split the name by space
-		const splitName = name.split(' ');
-
-		// Check if the name is a single word or already initials
-		if (splitName.length === 1 || (splitName.length === 1 && splitName[0].length <= 2)) {
-			return name.slice(0, 2).toUpperCase();
-		}
-
-		// If the name is multiple words, use the first letter of the first and last word
-		const firstInitial = splitName[0][0];
-		const lastInitial = splitName[splitName.length - 1][0];
-
-		return (firstInitial + lastInitial).toUpperCase();
-	};
-	let initials = $derived(getInitials(name));
+  import Tooltip from '../tooltip/Tooltip.svelte';
+  export interface AvatarProps {
+    name: string | null | undefined;
+    size?: 'sm' | 'md';
+    showTooltip?: boolean;
+  }
+
+  let { name, size = 'md', showTooltip = true }: AvatarProps = $props();
+  const sizes = {
+    sm: 'h-6 w-6 min-w-6 text-xxs font-semibold tracking-wide',
+    md: 'h-8 w-8 min-w-8 text-xs font-semibold tracking-wide',
+  };
+
+  let sizeClassName = $derived(sizes[size]);
+
+  const getInitials = (name: string | null | undefined) => {
+    if (!name) {
+      return '?'; // You can use any default value here
+    }
+    // Check if the name is an email
+    const isEmail = name.includes('@');
+    if (isEmail) {
+      return name.slice(0, 2).toUpperCase();
+    }
+
+    // Split the name by space
+    const splitName = name.split(' ');
+
+    // Check if the name is a single word or already initials
+    if (splitName.length === 1 || (splitName.length === 1 && splitName[0].length <= 2)) {
+      return name.slice(0, 2).toUpperCase();
+    }
+
+    // If the name is multiple words, use the first letter of the first and last word
+    const firstInitial = splitName[0][0];
+    const lastInitial = splitName[splitName.length - 1][0];
+
+    return (firstInitial + lastInitial).toUpperCase();
+  };
+  let initials = $derived(getInitials(name));
 </script>
 
 {#snippet avatar()}
-	<div
-		class="{sizeClassName} flex items-center justify-center rounded-full border border-static bg-accent text-accent"
-	>
-		{initials}
-	</div>
+  <div
+    class="{sizeClassName} flex items-center justify-center rounded-full border border-static bg-accent text-accent"
+  >
+    {initials}
+  </div>
 {/snippet}
 
 {#if showTooltip}
-	<Tooltip>
-		{#snippet trigger()}
-			{@render avatar()}
-		{/snippet}
-		{#snippet content()}
-			<span>{name ? name : 'Unknown'}</span>
-		{/snippet}
-	</Tooltip>
+  <Tooltip>
+    {#snippet trigger()}
+      {@render avatar()}
+    {/snippet}
+    {#snippet content()}
+      <span>{name ? name : 'Unknown'}</span>
+    {/snippet}
+  </Tooltip>
 {:else}
-	{@render avatar()}
+  {@render avatar()}
 {/if}

package/dist/components/banner/Banner.stories.svelte

@@ -1,129 +1,129 @@
 <script module lang="ts">
-	import { Icon } from '../icons';
-	import Banner from './Banner.svelte';
-	import Button from '../button/Button.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Icon } from '../icons';
+  import Banner from './Banner.svelte';
+  import Button from '../button/Button.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Banner,
-		title: 'Design System/Banner',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Banner,
+    title: 'Design System/Banner',
+    tags: ['autodocs'],
+  });
 
-	let showBanner = $state(true);
+  let showBanner = $state(true);
 </script>
 
 <Story name="Well finding warning" asChild>
-	<Banner type="warning" closable={false}>
-		{#snippet icon()}
-			<Icon size={20} iconName="Warning" color="warning" weight="bold" />
-		{/snippet}
-		{#snippet content()}
-			Our system couldn't find the wells in some plates. Analysis can't be done. For more help, <a
-				href="https://docs.reshapebiotech.com/reshape-biotech-knowledgebase/general-info/troubleshooting/well-detection"
-				>check our documentation</a
-			>
-			or <a href="mailto:support@reshapebiotech.com">contact us</a>.
-		{/snippet}
-	</Banner>
+  <Banner type="warning" closable={false}>
+    {#snippet icon()}
+      <Icon size={20} iconName="Warning" color="warning" weight="bold" />
+    {/snippet}
+    {#snippet content()}
+      Our system couldn't find the wells in some plates. Analysis can't be done. For more help, <a
+        href="https://docs.reshapebiotech.com/reshape-biotech-knowledgebase/general-info/troubleshooting/well-detection"
+        >check our documentation</a
+      >
+      or <a href="mailto:support@reshapebiotech.com">contact us</a>.
+    {/snippet}
+  </Banner>
 </Story>
 
 <Story name="No icon" asChild>
-	<Banner type="success">
-		{#snippet content()}
-			This banner has no icon.
-		{/snippet}
-	</Banner>
+  <Banner type="success">
+    {#snippet content()}
+      This banner has no icon.
+    {/snippet}
+  </Banner>
 </Story>
 
 <Story name="No toggle" asChild>
-	<Banner type="progress" closable={false}>
-		{#snippet icon()}
-			<Icon size={20} iconName="Info" color="icon-blue" weight="bold" />
-		{/snippet}
-		{#snippet content()}
-			This banner has no toggle.
-		{/snippet}
-	</Banner>
+  <Banner type="progress" closable={false}>
+    {#snippet icon()}
+      <Icon size={20} iconName="Info" color="icon-blue" weight="bold" />
+    {/snippet}
+    {#snippet content()}
+      This banner has no toggle.
+    {/snippet}
+  </Banner>
 </Story>
 
 <Story name="Toggle back on" asChild>
-	<div class="h-28">
-		<Button onClick={() => (showBanner = true)} disabled={showBanner}>Toggle banner back on</Button>
-		<br />
-		<br />
+  <div class="h-28">
+    <Button onClick={() => (showBanner = true)} disabled={showBanner}>Toggle banner back on</Button>
+    <br />
+    <br />
 
-		<Banner type="error" bind:show={showBanner}>
-			{#snippet icon()}
-				<Icon size={20} iconName="Info" color="danger" weight="bold" />
-			{/snippet}
-			{#snippet content()}
-				This banner can be toggled off with the "x" to the right and back on with the button above.
-			{/snippet}
-		</Banner>
-	</div>
+    <Banner type="error" bind:show={showBanner}>
+      {#snippet icon()}
+        <Icon size={20} iconName="Info" color="danger" weight="bold" />
+      {/snippet}
+      {#snippet content()}
+        This banner can be toggled off with the "x" to the right and back on with the button above.
+      {/snippet}
+    </Banner>
+  </div>
 </Story>
 
 <Story name="Type variations" asChild>
-	<div class="space-y-4">
-		<div class="space-y-2">
-			<h4>Neutral</h4>
-			<Banner type="neutral">
-				{#snippet icon()}
-					<Icon size={20} iconName="Info" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					This is a "neutral" banner.
-				{/snippet}
-			</Banner>
-		</div>
+  <div class="space-y-4">
+    <div class="space-y-2">
+      <h4>Neutral</h4>
+      <Banner type="neutral">
+        {#snippet icon()}
+          <Icon size={20} iconName="Info" weight="bold" />
+        {/snippet}
+        {#snippet content()}
+          This is a "neutral" banner.
+        {/snippet}
+      </Banner>
+    </div>
 
-		<div class="space-y-2">
-			<h4>Success</h4>
-			<Banner type="success">
-				{#snippet icon()}
-					<Icon size={20} iconName="CheckCircle" color="icon-success" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					This is a "success" banner.
-				{/snippet}
-			</Banner>
-		</div>
+    <div class="space-y-2">
+      <h4>Success</h4>
+      <Banner type="success">
+        {#snippet icon()}
+          <Icon size={20} iconName="CheckCircle" color="icon-success" weight="bold" />
+        {/snippet}
+        {#snippet content()}
+          This is a "success" banner.
+        {/snippet}
+      </Banner>
+    </div>
 
-		<div class="space-y-2">
-			<h4>Progress</h4>
-			<Banner type="progress">
-				{#snippet icon()}
-					<Icon size={20} iconName="Circle" color="icon-blue" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					This is a "progress" banner.
-				{/snippet}
-			</Banner>
-		</div>
+    <div class="space-y-2">
+      <h4>Progress</h4>
+      <Banner type="progress">
+        {#snippet icon()}
+          <Icon size={20} iconName="Circle" color="icon-blue" weight="bold" />
+        {/snippet}
+        {#snippet content()}
+          This is a "progress" banner.
+        {/snippet}
+      </Banner>
+    </div>
 
-		<div class="space-y-2">
-			<h4>Warning</h4>
-			<Banner type="warning">
-				{#snippet icon()}
-					<Icon size={20} iconName="Warning" color="icon-warning" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					This is a "warning" banner.
-				{/snippet}
-			</Banner>
-		</div>
+    <div class="space-y-2">
+      <h4>Warning</h4>
+      <Banner type="warning">
+        {#snippet icon()}
+          <Icon size={20} iconName="Warning" color="icon-warning" weight="bold" />
+        {/snippet}
+        {#snippet content()}
+          This is a "warning" banner.
+        {/snippet}
+      </Banner>
+    </div>
 
-		<div class="space-y-2">
-			<h4>Error</h4>
-			<Banner type="error">
-				{#snippet icon()}
-					<Icon size={20} iconName="WarningCircle" color="icon-danger" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					This is an "error" banner.
-				{/snippet}
-			</Banner>
-		</div>
-	</div>
+    <div class="space-y-2">
+      <h4>Error</h4>
+      <Banner type="error">
+        {#snippet icon()}
+          <Icon size={20} iconName="WarningCircle" color="icon-danger" weight="bold" />
+        {/snippet}
+        {#snippet content()}
+          This is an "error" banner.
+        {/snippet}
+      </Banner>
+    </div>
+  </div>
 </Story>