@histoire/controls 0.10.7 → 0.11.1

package/src/components/checkbox/HstCheckboxList.vue

@@ -0,0 +1,79 @@
+<script lang="ts">
+export default {
+  name: 'HstCheckboxList',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ComputedRef } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+import { HstControlOption } from '../../types'
+import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue: Array<string>
+  options: HstControlOption[]
+}>()
+
+const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
+      if (typeof value === 'string') {
+        return [value, value]
+      } else {
+        return [value.value, value.label]
+      }
+    }))
+  }
+  return props.options
+})
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: Array<string>): void
+}>()
+
+function toggleOption (value: string) {
+  if (props.modelValue.includes(value)) {
+    emits('update:modelValue', props.modelValue.filter(element => element !== value))
+  } else {
+    emits('update:modelValue', [...props.modelValue, value])
+  }
+}
+</script>
+
+<template>
+  <HstWrapper
+    role="group"
+    :title="title"
+    class="htw-cursor-text"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <div class="-htw-my-1">
+      <template
+        v-for="( label, value ) in formattedOptions"
+        :key="value"
+      >
+        <label
+          tabindex="0"
+          :for="`${value}-radio`"
+          class="htw-cursor-pointer htw-flex htw-items-center htw-relative htw-py-1 htw-group"
+          @keydown.enter.prevent="toggleOption(value)"
+          @keydown.space.prevent="toggleOption(value)"
+          @click="toggleOption(value)"
+        >
+          <HstSimpleCheckbox
+            :model-value="modelValue.includes(value)"
+            class="htw-mr-2"
+          />
+          {{ label }}
+        </label>
+      </template>
+    </div>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>

package/src/components/checkbox/HstSimpleCheckbox.story.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
+
+function initState () {
+  return {
+    checked: true,
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="internals/HstSimpleCheckbox"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant
+      title="playground"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstSimpleCheckbox
+          v-model="state.checked"
+          with-toggle
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/checkbox/HstSimpleCheckbox.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+export default {
+  name: 'HstSimpleCheckbox',
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: boolean
+  withToggle?: boolean
+}>()
+
+const emits = defineEmits({
+  'update:modelValue': (newValue: boolean) => true,
+})
+
+function toggle () {
+  if (!props.withToggle) {
+    return
+  }
+
+  emits('update:modelValue', !props.modelValue)
+}
+
+watch(() => props.modelValue, () => {
+  animationEnabled.value = true
+})
+
+// SVG check
+
+const path = ref<SVGPathElement>()
+const dasharray = ref(0)
+const progress = computed(() => props.modelValue ? 1 : 0)
+const dashoffset = computed(() => (1 - progress.value) * dasharray.value)
+
+// animationEnabled prevents the animation from triggering on mounted
+const animationEnabled = ref(false)
+
+watch(path, () => {
+  dasharray.value = path.value.getTotalLength?.() ?? 21.21
+})
+</script>
+
+<template>
+  <div
+    class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative"
+    :class="{'htw-cursor-pointer': withToggle}"
+    @click="toggle"
+  >
+    <div
+      class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500"
+      :class="[
+        modelValue
+          ? 'htw-border-primary-500 htw-border-8'
+          : 'htw-border-black/25 dark:htw-border-white/25 htw-delay-150',
+      ]"
+    />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      class="htw-relative htw-z-10"
+    >
+      <path
+        ref="path"
+        d="m 4 12 l 5 5 l 10 -10"
+        fill="none"
+        class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out"
+        :class="[
+          animationEnabled ? 'htw-transition-all' : 'htw-transition-none',
+          {
+            'htw-delay-150': modelValue,
+          },
+        ]"
+        :stroke-dasharray="dasharray"
+        :stroke-dashoffset="dashoffset"
+      />
+    </svg>
+  </div>
+</template>

package/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap

@@ -11,8 +11,8 @@ exports[`HstCheckbox toggle to checked 1`] = `
   </span>
   <span class="htw-grow htw-flex htw-items-center htw-gap-1">
     <span class="htw-block htw-grow">
-      <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-        <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
+      <div class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+        <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
         </div>
         <svg
           width="16"
@@ -23,7 +23,7 @@ exports[`HstCheckbox toggle to checked 1`] = `
           <path
             d="m 4 12 l 5 5 l 10 -10"
             fill="none"
-            class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all"
+            class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none"
             stroke-dasharray="21.21"
             stroke-dashoffset="21.21"
           >
@@ -46,8 +46,8 @@ exports[`HstCheckbox toggle to unchecked 1`] = `
   </span>
   <span class="htw-grow htw-flex htw-items-center htw-gap-1">
     <span class="htw-block htw-grow">
-      <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-        <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-border-primary-500 htw-border-8">
+      <div class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+        <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8">
         </div>
         <svg
           width="16"
@@ -58,7 +58,7 @@ exports[`HstCheckbox toggle to unchecked 1`] = `
           <path
             d="m 4 12 l 5 5 l 10 -10"
             fill="none"
-            class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all htw-delay-150"
+            class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none htw-delay-150"
             stroke-dasharray="21.21"
             stroke-dashoffset="0"
           >

package/src/components/design-tokens/HstColorShades.story.vue

@@ -286,7 +286,8 @@ const colors = {
 
 <template>
   <Story
-    title="design-tokens/HstColorShades"
+    title="HstColorShades"
+    group="design-system"
     responsive-disabled
   >
     <Variant title="default">

package/src/components/design-tokens/HstTokenGrid.story.vue

@@ -14,7 +14,8 @@ const tokens = {
 
 <template>
   <Story
-    title="design-tokens/HstTokenGrid"
+    title="HstTokenGrid"
+    group="design-system"
     responsive-disabled
   >
     <Variant title="default">

package/src/components/design-tokens/HstTokenList.story.vue

@@ -55,7 +55,8 @@ const tokens = {
 
 <template>
   <Story
-    title="design-tokens/HstTokenList"
+    title="HstTokenList"
+    group="design-system"
     responsive-disabled
   >
     <Variant title="default">

package/src/components/number/HstNumber.story.vue

@@ -12,6 +12,7 @@ function initState () {
 <template>
   <Story
     title="HstNumber"
+    group="controls"
   >
     <Variant
       title="default"

package/src/components/number/HstNumber.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
 export default {
   name: 'HstNumber',
-
   inheritAttrs: false,
 }
 </script>
@@ -86,7 +85,7 @@ onUnmounted(() => {
       :class="{
         'htw-select-none': isDragging,
       }"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize htw-box-border"
     >
 
     <template #actions>

package/src/components/radio/HstRadio.story.vue

@@ -22,7 +22,11 @@ function initState () {
 </script>
 
 <template>
-  <Story title="HstRadio">
+  <Story
+    title="HstRadio"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
+  >
     <Variant
       title="playground"
       :init-state="initState"

package/src/components/select/HstSelect.story.vue

@@ -25,6 +25,7 @@ function initState () {
 <template>
   <Story
     title="HstSelect"
+    group="controls"
     :layout="{
       type: 'grid',
       width: '100%',

package/src/components/slider/HstSlider.story.vue

@@ -13,6 +13,8 @@ const state = reactive({
 <template>
   <Story
     title="HstSlider"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
   >
     <HstSlider
       v-model="state.value"

package/src/components/text/HstText.story.vue

@@ -12,6 +12,7 @@ function initState () {
 <template>
   <Story
     title="HstText"
+    group="controls"
     :layout="{
       type: 'grid',
       width: '100%',

package/src/components/textarea/HstTextarea.story.vue

@@ -9,7 +9,10 @@ function initState () {
 </script>
 
 <template>
-  <Story title="HstTextarea">
+  <Story
+    title="HstTextarea"
+    group="controls"
+  >
     <Variant
       title="default"
       :init-state="initState"

package/src/index.ts

@@ -1,4 +1,7 @@
+import HstButtonVue from './components/button/HstButton.vue'
+import HstButtonGroupVue from './components/button/HstButtonGroup.vue'
 import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
+import HstCheckboxListVue from './components/checkbox/HstCheckboxList.vue'
 import HstTextVue from './components/text/HstText.vue'
 import HstNumberVue from './components/number/HstNumber.vue'
 import HstSliderVue from './components/slider/HstSlider.vue'
@@ -10,7 +13,10 @@ import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
 import HstCopyIconVue from './components/HstCopyIcon.vue'
 import HstRadioVue from './components/radio/HstRadio.vue'
 
+export const HstButton = HstButtonVue
+export const HstButtonGroup = HstButtonGroupVue
 export const HstCheckbox = HstCheckboxVue
+export const HstCheckboxList = HstCheckboxListVue
 export const HstText = HstTextVue
 export const HstNumber = HstNumberVue
 export const HstSlider = HstSliderVue
@@ -23,7 +29,10 @@ export const HstCopyIcon = HstCopyIconVue
 export const HstRadio = HstRadioVue
 
 export const components = {
+  HstButton,
+  HstButtonGroup,
   HstCheckbox,
+  HstCheckboxList,
   HstText,
   HstNumber,
   HstSlider,
@@ -35,3 +44,5 @@ export const components = {
   HstCopyIcon,
   HstRadio,
 }
+
+export * from './types'

package/vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
       formats: [
         'es',
       ],
-      fileName: 'index',
+      fileName: 'index.es',
     },
 
     rollupOptions: {