feat(w): add <SW> (word) component (#378)

docs/.vitepress/config.mts

@@ -41,7 +41,8 @@ function sidebar(): DefaultTheme.SidebarItem[] {
       collapsed: false,
       items: [
         { text: 'Colors', link: '/styles/colors' },
-        { text: 'Shared Input Styles', link: '/styles/input-styles' }
+        { text: 'Shared Input Styles', link: '/styles/input-styles' },
+        { text: 'Utility Classes', link: '/styles/utility-classes' }
       ]
     },
     {
@@ -76,7 +77,8 @@ function sidebar(): DefaultTheme.SidebarItem[] {
         { text: 'SPill', link: '/components/pill' },
         { text: 'SState', link: '/components/state' },
         { text: 'STable', link: '/components/table' },
-        { text: 'STooltip', link: '/components/tooltip' }
+        { text: 'STooltip', link: '/components/tooltip' },
+        { text: 'SW', link: '/components/w' },
       ]
     },
     {

docs/components/w.md

@@ -0,0 +1,34 @@
+# SW <Badge text="3.3.0" />
+
+`<SW>`, where "W" stands for "Word", is a simple helper component that marks separated words as a single word and prevent them from being word broken. See in action on [Histoire](https://story.sefirot.globalbrains.com/story/stories-components-sw-01-playground-story-vue).
+
+## Overview
+
+Use this component to prevent word breaks for certain words. Mainly useful when building marketing sites in Japanese.
+
+## Import
+
+```ts
+import SW from '@globalbrain/sefirot/lib/components/SW.vue'
+```
+
+## Usage
+
+Wrap any words within this component to prevent them from being word broken. Under the hood, it will inject `<wbr>` and wrap the content in `<span>` with `white-space: nowrap`.
+
+```vue-html
+<p>
+  When resizing the container, <SW>This word</SW> should not be
+  word borken and should be treated as a single word.
+</p>
+```
+
+## Slots
+
+### `#default`
+
+`<SM>` will render any passed slot by wrapping it with `<span>`
+
+```vue-html
+<SW>...</SW>
+```

docs/styles/utility-classes.md

@@ -0,0 +1,15 @@
+# Utility Classes
+
+Sefirot comes with few utility CSS classes. Most of the time, there should be a Vue Component that applies these classes, so prefere using them over directly using the CSS classes.
+
+All Sefirot utility classes are prefixed with `u-`.
+
+## Whitespace
+
+### `u-nowrap` <Badge text="3.3.0" />
+
+```css
+.u-nowrap {
+  white-space: nowrap;
+}
+```

lib/components/SW.vue

@@ -0,0 +1,3 @@
+<template>
+  <wbr><span class="u-nowrap"><slot /></span>
+</template>

lib/styles/bootstrap.css

@@ -3,3 +3,4 @@
 @import "./variables-deprecated";
 @import "./variables";
 @import "./base";
+@import "./utilities";

lib/styles/utilities.css

@@ -0,0 +1,3 @@
+.u-nowrap {
+  white-space: nowrap;
+}

stories/components/SW.01_Playground.story.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import SW from 'sefirot/components/SW.vue'
+
+const title = 'Components / SW / 01. Playground'
+</script>
+
+<template>
+  <Story :title="title" source="Not available" auto-props-disabled>
+    <Board :title="title">
+      <p class="max-w-512">Resize the window and try line breaking this text line. <SW><span class="text-c-info-1">This word</span></SW> should not be word borken and should be treated as a single word. For another example, <SW><span class="text-c-info-1">this word</span></SW> should also be broke together.</p>
+    </Board>
+  </Story>
+</template>

stories/styles.css

@@ -30,6 +30,8 @@ body {
 .text-c-2 { color: var(--c-text-2); }
 .text-c-3 { color: var(--c-text-3); }
 
+.text-c-info-1 { color: var(--c-text-info-1); }
+
 .font-400 { font-weight: 400; }
 .font-500 { font-weight: 500; }
 .font-600 { font-weight: 600; }