@morscherlab/mld-sdk 0.6.0

package/src/components/ResourceCard.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import BasePill from './BasePill.vue'
+import type { ResourceStatus, ResourceSpec } from '../types/components'
+
+interface Props {
+  name: string
+  description?: string
+  status?: ResourceStatus
+  image?: string
+  location?: string
+  specs?: ResourceSpec[]
+  tags?: string[]
+  nextAvailable?: string
+  showBookAction?: boolean
+  compact?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  statusLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: 'available',
+  specs: () => [],
+  tags: () => [],
+  showBookAction: true,
+  compact: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  book: []
+  click: []
+}>()
+
+const defaultStatusLabels: Record<ResourceStatus, string> = {
+  'available': 'Available',
+  'in-use': 'In Use',
+  'maintenance': 'Maintenance',
+  'offline': 'Offline',
+}
+
+const displayStatusLabel = computed(() => props.statusLabel ?? defaultStatusLabels[props.status])
+
+const cardClasses = computed(() => [
+  'mld-resource-card',
+  `mld-resource-card--${props.size}`,
+  { 'mld-resource-card--compact': props.compact },
+])
+
+function handleBook(event: MouseEvent) {
+  event.stopPropagation()
+  emit('book')
+}
+
+function handleClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <!-- Compact mode -->
+  <div v-if="compact" :class="cardClasses" @click="handleClick">
+    <slot name="status">
+      <span :class="['mld-resource-card__status-dot', `mld-resource-card__status-dot--${status}`]" />
+    </slot>
+
+    <span class="mld-resource-card__name">{{ name }}</span>
+
+    <span :class="['mld-resource-card__status-label', `mld-resource-card__status-label--${status}`]">
+      {{ displayStatusLabel }}
+    </span>
+
+    <slot name="action">
+      <button
+        v-if="showBookAction"
+        type="button"
+        class="mld-resource-card__book-btn"
+        @click="handleBook"
+      >
+        Book
+      </button>
+    </slot>
+  </div>
+
+  <!-- Card mode -->
+  <div v-else :class="cardClasses" @click="handleClick">
+    <div class="mld-resource-card__content">
+      <div class="mld-resource-card__header">
+        <!-- Image / fallback -->
+        <div class="mld-resource-card__image">
+          <slot name="image">
+            <img v-if="image" :src="image" :alt="name" />
+            <div v-else class="mld-resource-card__image-fallback">
+              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 00-.659 1.59V21a.75.75 0 01-.75.75h-6.24a.75.75 0 01-.75-.75v-2.44a2.25 2.25 0 00-.659-1.59L5 14.5m14 0h-2.25m-10.5 0H4" />
+              </svg>
+            </div>
+          </slot>
+        </div>
+
+        <!-- Body -->
+        <div class="mld-resource-card__body">
+          <div class="mld-resource-card__title-row">
+            <h3 class="mld-resource-card__name">{{ name }}</h3>
+
+            <slot name="status">
+              <div class="mld-resource-card__status">
+                <span :class="['mld-resource-card__status-dot', `mld-resource-card__status-dot--${status}`]" />
+                <span class="mld-resource-card__status-label">{{ displayStatusLabel }}</span>
+              </div>
+            </slot>
+          </div>
+
+          <p v-if="description" class="mld-resource-card__description">{{ description }}</p>
+
+          <p v-if="location" class="mld-resource-card__location">Location: {{ location }}</p>
+
+          <p v-if="nextAvailable" class="mld-resource-card__next-available">Next available: {{ nextAvailable }}</p>
+        </div>
+      </div>
+
+      <!-- Specs -->
+      <div v-if="specs.length > 0 || $slots.specs" class="mld-resource-card__specs">
+        <slot name="specs">
+          <div v-for="spec in specs" :key="spec.label" class="mld-resource-card__spec">
+            <span class="mld-resource-card__spec-label">{{ spec.label }}</span>
+            <span class="mld-resource-card__spec-value">{{ spec.value }}</span>
+          </div>
+        </slot>
+      </div>
+
+      <!-- Tags + action -->
+      <div v-if="tags.length > 0 || showBookAction || $slots.action" class="mld-resource-card__footer">
+        <div class="mld-resource-card__tags">
+          <BasePill v-for="tag in tags" :key="tag" size="sm">{{ tag }}</BasePill>
+        </div>
+
+        <div class="mld-resource-card__action">
+          <slot name="action">
+            <button
+              v-if="showBookAction"
+              type="button"
+              class="mld-resource-card__book-btn"
+              @click="handleBook"
+            >
+              Book Now
+              <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/resource-card.css';
+</style>

package/src/components/SampleHierarchyTree.story.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import SampleHierarchyTree from './SampleHierarchyTree.vue'
+import type { TreeNode } from './SampleHierarchyTree.vue'
+
+const mockNodes: TreeNode[] = [
+  {
+    id: 'study-1',
+    label: 'Drug Resistance Study',
+    type: 'study',
+    badge: 3,
+    badgeVariant: 'default',
+    children: [
+      {
+        id: 'exp-1',
+        label: 'Cisplatin Dose Response',
+        type: 'experiment',
+        children: [
+          {
+            id: 'plate-1',
+            label: 'Plate 1 (96-well)',
+            type: 'plate',
+            badge: 96,
+            children: [
+              { id: 'sample-1', label: 'HeLa Control', type: 'sample' },
+              { id: 'sample-2', label: 'HeLa 0.1 uM', type: 'sample' },
+              { id: 'sample-3', label: 'HeLa 1.0 uM', type: 'sample' },
+              { id: 'sample-4', label: 'HeLa 10 uM', type: 'sample' },
+            ],
+          },
+          {
+            id: 'plate-2',
+            label: 'Plate 2 (96-well)',
+            type: 'plate',
+            badge: 96,
+            children: [
+              { id: 'sample-5', label: 'MCF-7 Control', type: 'sample' },
+              { id: 'sample-6', label: 'MCF-7 0.1 uM', type: 'sample' },
+              { id: 'sample-7', label: 'MCF-7 1.0 uM', type: 'sample' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'exp-2',
+        label: 'Combination Treatment',
+        type: 'experiment',
+        children: [
+          {
+            id: 'plate-3',
+            label: 'Combo Plate A',
+            type: 'plate',
+            badge: 54,
+          },
+        ],
+      },
+      {
+        id: 'exp-3',
+        label: 'Cell Line Characterization',
+        type: 'experiment',
+        children: [
+          {
+            id: 'cell-1',
+            label: 'HeLa',
+            type: 'cell_line',
+            children: [
+              { id: 'p-1', label: 'Passage 12', type: 'passage' },
+              { id: 'p-2', label: 'Passage 15', type: 'passage', badge: 'low', badgeVariant: 'warning' },
+            ],
+          },
+          {
+            id: 'cell-2',
+            label: 'MCF-7',
+            type: 'cell_line',
+            children: [
+              { id: 'clone-1', label: 'Clone A', type: 'clone' },
+              { id: 'clone-2', label: 'Clone B', type: 'clone', badge: 'resistant', badgeVariant: 'error' },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]
+
+function initState() {
+  return {
+    nodes: mockNodes,
+    expandAll: false,
+    showIcons: true,
+    showCounts: true,
+    size: 'md' as const,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/SampleHierarchyTree">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px;">
+          <SampleHierarchyTree
+            :nodes="state.nodes"
+            :expand-all="state.expandAll"
+            :show-icons="state.showIcons"
+            :show-counts="state.showCounts"
+            :size="state.size"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.expandAll" title="Expand All" />
+        <HstCheckbox v-model="state.showIcons" title="Show Icons" />
+        <HstCheckbox v-model="state.showCounts" title="Show Counts" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Expanded">
+      <div style="padding: 2rem; max-width: 500px;">
+        <SampleHierarchyTree
+          :nodes="mockNodes"
+          expand-all
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Icons">
+      <div style="padding: 2rem; max-width: 500px;">
+        <SampleHierarchyTree
+          :nodes="mockNodes"
+          :show-icons="false"
+          expand-all
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Small">
+      <div style="padding: 2rem; max-width: 400px;">
+        <SampleHierarchyTree
+          :nodes="mockNodes"
+          size="sm"
+          expand-all
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty">
+      <div style="padding: 2rem; max-width: 500px;">
+        <SampleHierarchyTree :nodes="[]" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SampleHierarchyTree.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { ref, watch, type VNode } from 'vue'
+import { h, Transition } from 'vue'
+
+export type TreeNodeType =
+  | 'study'
+  | 'experiment'
+  | 'plate'
+  | 'sample'
+  | 'cell_line'
+  | 'passage'
+  | 'clone'
+  | 'treatment'
+  | 'folder'
+  | 'custom'
+
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'error'
+
+export interface TreeNode {
+  id: string
+  label: string
+  type?: TreeNodeType
+  icon?: string
+  children?: TreeNode[]
+  metadata?: Record<string, unknown>
+  badge?: string | number
+  badgeVariant?: BadgeVariant
+}
+
+interface Props {
+  nodes: TreeNode[]
+  defaultExpandedIds?: string[]
+  expandAll?: boolean
+  showIcons?: boolean
+  showCounts?: boolean
+  maxDepth?: number
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultExpandedIds: () => [],
+  expandAll: false,
+  showIcons: true,
+  showCounts: true,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'node-click': [node: TreeNode]
+  'expand': [nodeId: string]
+  'collapse': [nodeId: string]
+}>()
+
+// Track expanded nodes
+const expandedIds = ref<Set<string>>(new Set(props.defaultExpandedIds))
+
+// Default icons by type (Lucide SVG paths - arrays to support multi-path icons)
+interface IconElement {
+  tag: 'path' | 'circle' | 'rect'
+  attrs: Record<string, string | number>
+}
+
+const typeIcons: Record<TreeNodeType, IconElement[]> = {
+  study: [
+    { tag: 'path', attrs: { d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' } },
+  ],
+  experiment: [
+    { tag: 'path', attrs: { d: 'M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2' } },
+    { tag: 'path', attrs: { d: 'M6.453 15h11.094' } },
+    { tag: 'path', attrs: { d: 'M8.5 2h7' } },
+  ],
+  plate: [
+    { tag: 'rect', attrs: { width: '7', height: '7', x: '3', y: '3', rx: '1' } },
+    { tag: 'rect', attrs: { width: '7', height: '7', x: '14', y: '3', rx: '1' } },
+    { tag: 'rect', attrs: { width: '7', height: '7', x: '14', y: '14', rx: '1' } },
+    { tag: 'rect', attrs: { width: '7', height: '7', x: '3', y: '14', rx: '1' } },
+  ],
+  sample: [
+    { tag: 'circle', attrs: { cx: '12', cy: '12', r: '10' } },
+    { tag: 'path', attrs: { d: 'M12 6v6l4 2' } },
+  ],
+  cell_line: [
+    { tag: 'path', attrs: { d: 'M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5' } },
+    { tag: 'path', attrs: { d: 'M9 18h6' } },
+    { tag: 'path', attrs: { d: 'M10 22h4' } },
+  ],
+  passage: [
+    { tag: 'path', attrs: { d: 'M3 5h.01' } },
+    { tag: 'path', attrs: { d: 'M3 12h.01' } },
+    { tag: 'path', attrs: { d: 'M3 19h.01' } },
+    { tag: 'path', attrs: { d: 'M8 5h13' } },
+    { tag: 'path', attrs: { d: 'M8 12h13' } },
+    { tag: 'path', attrs: { d: 'M8 19h13' } },
+  ],
+  clone: [
+    { tag: 'rect', attrs: { width: '14', height: '14', x: '8', y: '8', rx: '2', ry: '2' } },
+    { tag: 'path', attrs: { d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' } },
+  ],
+  treatment: [
+    { tag: 'path', attrs: { d: 'M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2' } },
+    { tag: 'path', attrs: { d: 'M6.453 15h11.094' } },
+    { tag: 'path', attrs: { d: 'M8.5 2h7' } },
+  ],
+  folder: [
+    { tag: 'path', attrs: { d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' } },
+  ],
+  custom: [
+    { tag: 'path', attrs: { d: 'M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915' } },
+    { tag: 'circle', attrs: { cx: '12', cy: '12', r: '3' } },
+  ],
+}
+
+// Collect all node IDs for expand all
+function collectAllIds(nodes: TreeNode[]): string[] {
+  const ids: string[] = []
+  function traverse(node: TreeNode) {
+    ids.push(node.id)
+    if (node.children) {
+      node.children.forEach(traverse)
+    }
+  }
+  nodes.forEach(traverse)
+  return ids
+}
+
+// Watch for expandAll changes
+watch(
+  () => props.expandAll,
+  (shouldExpandAll) => {
+    if (shouldExpandAll) {
+      expandedIds.value = new Set(collectAllIds(props.nodes))
+    } else {
+      expandedIds.value = new Set(props.defaultExpandedIds)
+    }
+  },
+  { immediate: true }
+)
+
+function isExpanded(nodeId: string): boolean {
+  return expandedIds.value.has(nodeId)
+}
+
+function toggleExpand(node: TreeNode) {
+  if (isExpanded(node.id)) {
+    expandedIds.value.delete(node.id)
+    emit('collapse', node.id)
+  } else {
+    expandedIds.value.add(node.id)
+    emit('expand', node.id)
+  }
+}
+
+function handleNodeClick(node: TreeNode) {
+  emit('node-click', node)
+}
+
+function getIconElements(node: TreeNode): IconElement[] {
+  if (node.icon) return [{ tag: 'path', attrs: { d: node.icon } }]
+  return typeIcons[node.type || 'custom']
+}
+
+function getBadgeContent(node: TreeNode): string | number | undefined {
+  if (node.badge !== undefined) return node.badge
+  if (props.showCounts && node.children && node.children.length > 0) {
+    return node.children.length
+  }
+  return undefined
+}
+
+function getBadgeVariant(node: TreeNode): BadgeVariant {
+  return node.badgeVariant || 'default'
+}
+
+function hasChildren(node: TreeNode): boolean {
+  return !!node.children && node.children.length > 0
+}
+
+function canShowChildren(node: TreeNode, depth: number): boolean {
+  if (!hasChildren(node)) return false
+  if (props.maxDepth !== undefined && depth >= props.maxDepth) return false
+  return isExpanded(node.id)
+}
+
+// Render tree node recursively
+function renderNode(node: TreeNode, depth: number): VNode {
+  const expanded = isExpanded(node.id)
+  const canExpand = hasChildren(node)
+  const showChildNodes = canShowChildren(node, depth)
+  const badge = getBadgeContent(node)
+  const badgeVar = getBadgeVariant(node)
+  const iconElements = getIconElements(node)
+
+  const header = h(
+    'div',
+    {
+      class: 'mld-sample-tree__node-header',
+      onClick: () => handleNodeClick(node),
+    },
+    [
+      canExpand
+        ? h(
+            'button',
+            {
+              type: 'button',
+              class: 'mld-sample-tree__toggle',
+              'aria-label': expanded ? 'Collapse' : 'Expand',
+              onClick: (e: Event) => {
+                e.stopPropagation()
+                toggleExpand(node)
+              },
+            },
+            [
+              h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [
+                h('path', { d: 'm9 18 6-6-6-6' }),
+              ]),
+            ]
+          )
+        : h('span', { class: 'mld-sample-tree__toggle-placeholder' }),
+      props.showIcons
+        ? h('span', { class: ['mld-sample-tree__icon', `mld-sample-tree__icon--${node.type || 'custom'}`] }, [
+            h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' },
+              iconElements.map(el => h(el.tag, el.attrs))
+            ),
+          ])
+        : null,
+      h('span', { class: 'mld-sample-tree__label' }, node.label),
+      badge !== undefined
+        ? h('span', { class: ['mld-sample-tree__badge', `mld-sample-tree__badge--${badgeVar}`] }, String(badge))
+        : null,
+    ]
+  )
+
+  const childNodes =
+    showChildNodes && node.children
+      ? h(
+          Transition,
+          { enterActiveClass: 'mld-sample-tree__children--entering', leaveActiveClass: 'mld-sample-tree__children--leaving' },
+          () => h('div', { class: 'mld-sample-tree__children' }, node.children!.map((child) => renderNode(child, depth + 1)))
+        )
+      : null
+
+  return h(
+    'div',
+    {
+      key: node.id,
+      class: ['mld-sample-tree__node', expanded ? 'mld-sample-tree__node--expanded' : '', !canExpand ? 'mld-sample-tree__node--leaf' : ''],
+      role: 'treeitem',
+      'aria-expanded': canExpand ? expanded : undefined,
+    },
+    [header, childNodes]
+  )
+}
+
+// Render the entire tree
+function renderTree(): VNode[] {
+  return props.nodes.map((node) => renderNode(node, 0))
+}
+</script>
+
+<template>
+  <div :class="['mld-sample-tree', `mld-sample-tree--${size}`]" role="tree">
+    <!-- Empty state -->
+    <div v-if="nodes.length === 0" class="mld-sample-tree__empty">
+      <svg class="mld-sample-tree__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+      </svg>
+      <p class="mld-sample-tree__empty-text">No items</p>
+    </div>
+
+    <!-- Tree nodes rendered via render function -->
+    <template v-else>
+      <component :is="() => renderTree()" />
+    </template>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/sample-hierarchy-tree.css';
+</style>

package/src/components/SampleLegend.story.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import SampleLegend from './SampleLegend.vue'
+import type { SampleType } from '../types'
+
+const mockSamples: SampleType[] = [
+  { id: 's1', name: 'HeLa Cells', color: '#3B82F6', count: 24 },
+  { id: 's2', name: 'MCF-7 Cells', color: '#10B981', count: 12 },
+  { id: 's3', name: 'Vehicle Control', color: '#F59E0B', count: 8 },
+  { id: 's4', name: 'Positive Control', color: '#EF4444', count: 4 },
+  { id: 's5', name: 'QC Standard', color: '#8B5CF6', count: 6 },
+]
+
+function initState() {
+  return {
+    modelValue: undefined as string | undefined,
+    samples: mockSamples,
+    showCounts: true,
+    editable: false,
+    size: 'md' as const,
+    orientation: 'vertical' as const,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/SampleLegend">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 300px;">
+          <SampleLegend
+            v-model="state.modelValue"
+            :samples="state.samples"
+            :show-counts="state.showCounts"
+            :editable="state.editable"
+            :size="state.size"
+            :orientation="state.orientation"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showCounts" title="Show Counts" />
+        <HstCheckbox v-model="state.editable" title="Editable" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+        <HstSelect
+          v-model="state.orientation"
+          title="Orientation"
+          :options="[
+            { value: 'vertical', label: 'Vertical' },
+            { value: 'horizontal', label: 'Horizontal' },
+          ]"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Horizontal">
+      <div style="padding: 2rem;">
+        <SampleLegend
+          :samples="mockSamples"
+          orientation="horizontal"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Editable">
+      <div style="padding: 2rem; max-width: 300px;">
+        <SampleLegend
+          :samples="mockSamples"
+          editable
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Small No Counts">
+      <div style="padding: 2rem; max-width: 250px;">
+        <SampleLegend
+          :samples="mockSamples"
+          size="sm"
+          :show-counts="false"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>