add story and docs

docs/components/desc.md

@@ -246,6 +246,20 @@ You may also use `:pre-wrap` to preserve line breaks in the text. This is especi
 </SDesc>
 ```
 
+By specifying `:linkify`, the component will automatically convert URLs and email addresses in the text into clickable links. It will not convert any Markdown syntax or raw HTML tags. Note that this feature only works when passing in text as a prop through `:value`.
+
+```vue-html
+<SDesc cols="2" gap="24">
+  <SDescItem span="1">
+    <SDescLabel value="About" />
+    <SDescText
+      linkify
+      value="Clickable link: https://example.com"
+    />
+  </SDescItem>
+</SDesc>
+```
+
 ## Number value
 
 Use `<SDescNumber>` which is a specialized version of `<SDescText>` that is tailored to display numbers. It provides additional styling and formatting options that are not available in `<SDescText>`.

stories/components/SDesc.04_Text.story.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import SDesc from 'sefirot/components/SDesc.vue'
+import SDescItem from 'sefirot/components/SDescItem.vue'
+import SDescLabel from 'sefirot/components/SDescLabel.vue'
+import SDescText from 'sefirot/components/SDescText.vue'
+
+const title = 'Components / SDesc / 04. Text'
+const docs = '/components/desc'
+
+function state() {
+  return {
+    lineClamp: 10,
+    preWrap: false,
+    linkify: true
+  }
+}
+</script>
+
+<template>
+  <Story :title="title" :init-state="state" source="Not available" auto-props-disabled>
+    <template #controls="{ state }">
+      <HstNumber
+        title="lineClamp"
+        v-model="state.lineClamp"
+      />
+      <HstCheckbox
+        title="preWrap"
+        v-model="state.preWrap"
+      />
+      <HstCheckbox
+        title="linkify"
+        v-model="state.linkify"
+      />
+    </template>
+
+    <template #default="{ state }">
+      <Board :title="title" :docs="docs">
+        <SDesc cols="2" gap="24">
+          <SDescItem span="2">
+            <SDescLabel>Label</SDescLabel>
+            <SDescText
+              :line-clamp="state.lineClamp"
+              :pre-wrap="state.preWrap"
+              :linkify="state.linkify"
+              :value="'By specifying the `:linkify`, you can enable the automatic conversion of URLs such as https://globalbrains.com and emails such as [email protected] inside text to clickable links. It will only convert plain URLs and any other Markdown syntax such as [link](https://globalbrains.com) and **Strong Text** will not be parsed.\nWhen enabling `preWrap`, this sentence should have a line break.'"
+            />
+          </SDescItem>
+        </SDesc>
+      </Board>
+    </template>
+  </Story>
+</template>

stories/components/SDesc.04_Avatar_Many.story.vue → stories/components/SDesc.05_Avatar_Many.story.vue

@@ -4,7 +4,7 @@ import SDescAvatar from 'sefirot/components/SDescAvatar.vue'
 import SDescItem from 'sefirot/components/SDescItem.vue'
 import SDescLabel from 'sefirot/components/SDescLabel.vue'
 
-const title = 'Components / SDesc / 04. Avatar Many'
+const title = 'Components / SDesc / 05. Avatar Many'
 const docs = '/components/desc'
 
 const avatars = [