feat(truncate): add text truncation component and action

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 157 components exported from carbon-components-svelte@0.28.0.
+> 158 components exported from carbon-components-svelte@0.28.0.
 
 ## Components
 
@@ -160,6 +160,7 @@
 - [`Tooltip`](#tooltip)
 - [`TooltipDefinition`](#tooltipdefinition)
 - [`TooltipIcon`](#tooltipicon)
+- [`Truncate`](#truncate)
 - [`UnorderedList`](#unorderedlist)
 
 ---
@@ -4278,6 +4279,24 @@ None.
 | mouseleave | forwarded | --     |
 | focus      | forwarded | --     |
 
+## `Truncate`
+
+### Props
+
+| Prop name | Kind             | Reactive | Type                              | Default value      | Description |
+| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- |
+| direction | <code>let</code> | No       | <code>"end" &#124; "front"</code> | <code>"end"</code> | --          |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `UnorderedList`
 
 ### Props

actions/index.js

@@ -0,0 +1 @@
+export { truncate } from "./truncate";

actions/truncate.js

@@ -0,0 +1,24 @@
+/**
+ * Svelte action that applies single-line text truncation to an element
+ * @param {HTMLElement} node
+ * @param {{ direction?: "end" | "front" }} params
+ * @example
+ * <script>
+ *   import { truncate } from "carbon-components-svelte/actions";
+ * </script>
+ *
+ * <h1 use:truncate>...</h1>
+ */
+export function truncate(node, params = {}) {
+  function toggleClass(front = false) {
+    node.className = `bx--text-truncate--${front ? "front" : "end"}`;
+  }
+
+  toggleClass(params.direction === "front");
+
+  return {
+    update(params) {
+      toggleClass(params.direction === "front");
+    },
+  };
+}

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 157,
+  "total": 158,
   "components": [
     {
       "moduleName": "Accordion",
@@ -10664,6 +10664,25 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "button" }
     },
+    {
+      "moduleName": "Truncate",
+      "filePath": "src/Truncate/Truncate.svelte",
+      "props": [
+        {
+          "name": "direction",
+          "kind": "let",
+          "type": "\"end\" | \"front\"",
+          "value": "\"end\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "div" }
+    },
     {
       "moduleName": "UnorderedList",
       "filePath": "src/UnorderedList/UnorderedList.svelte",

docs/src/pages/components/Truncate.svx

@@ -0,0 +1,37 @@
+
+<script>
+  import { Truncate } from "carbon-components-svelte";
+  import { truncate } from "carbon-components-svelte/actions";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+This is a utility component that wraps the `.bx--text-truncate--*` CSS selector from `carbon-components` for single line text truncation.
+
+### Default
+
+By default, text will be clamped at the end of the line. Text is wrapped with a paragraph (`p`) element. Use the [truncate action](#usetruncate) to truncate text in other elements.
+
+<Truncate>
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+### Direction (front)
+
+Set `direction` to `"front"` to clamp the text from the front.
+
+<Truncate direction="front">
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+### use:truncate
+
+The `truncate` action can be used on other HTML elements.
+
+Import path: `import { truncate } from "carbon-components-svelte/actions";`
+
+<h4 use:truncate>
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</h4>
+<h4 use:truncate={{ direction: "front" }}>
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</h4>

docs/svelte.config.js

@@ -38,6 +38,9 @@ function createImports(source) {
   const ccs_imports = Array.from(inlineComponents.keys());
   const icon_imports = Array.from(icons.keys());
 
+  if (ccs_imports.length === 0) return "";
+  // TODO: determine if action is used, and generate import accordingly
+
   return `
   <script>
     import {${ccs_imports.join(",")}} from "carbon-components-svelte";

package.json

@@ -78,6 +78,7 @@
     "src",
     "types",
     "css",
-    "preprocess"
+    "preprocess",
+    "actions"
   ]
 }

src/Truncate/Truncate.svelte

@@ -0,0 +1,12 @@
+<script>
+  /** @type {"end" | "front"}*/
+  export let direction = "end";
+</script>
+
+<p
+  class:bx--text-truncate--end="{direction === 'end'}"
+  class:bx--text-truncate--front="{direction === 'front'}"
+  {...$$restProps}
+>
+  <slot />
+</p>

src/Truncate/index.js

@@ -0,0 +1 @@
+export { default as Truncate } from "./Truncate.svelte";

src/index.js

@@ -114,6 +114,7 @@ export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
 export { Tooltip } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
+export { Truncate } from "./Truncate";
 export {
   Header,
   HeaderAction,

tests/Truncate.test.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Truncate } from "../types";
+  import { truncate } from "../actions";
+</script>
+
+<Truncate>
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+<Truncate direction="front">
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+<h4 use:truncate>
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</h4>
+<h4 use:truncate="{{ direction: 'front' }}">
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</h4>

types/Truncate/Truncate.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface TruncateProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * @default "end"
+   */
+  direction?: "end" | "front";
+}
+
+export default class Truncate extends SvelteComponentTyped<
+  TruncateProps,
+  {},
+  { default: {} }
+> {}

types/index.d.ts

@@ -133,6 +133,7 @@ export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmallSkeleto
 export { default as Tooltip } from "./Tooltip/Tooltip";
 export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition";
 export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon";
+export { default as Truncate } from "./Truncate/Truncate";
 export { default as Header } from "./UIShell/GlobalHeader/Header";
 export { default as HeaderAction } from "./UIShell/GlobalHeader/HeaderAction";
 export { default as HeaderActionLink } from "./UIShell/GlobalHeader/HeaderActionLink";