breaking(actions): move truncate action to src/Truncate (carbon-des…

…ign-system#1224)

* breaking: move truncate action to src/Truncate

* docs: update truncate docs

docs/src/pages/components/Truncate.svx

@@ -1,7 +1,6 @@
 
 <script>
-  import { Truncate } from "carbon-components-svelte";
-  import { truncate } from "carbon-components-svelte/actions";
+  import { Truncate, truncate } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -25,9 +24,7 @@ Set `clamp` to `"front"` to clamp the text from the front.
 
 ### use:truncate
 
-The `truncate` action can be used on other HTML elements.
-
-Import path: `import { truncate } from "carbon-components-svelte/actions";`
+The `truncate` action can be used on plain HTML elements.
 
 <h4 use:truncate>
   Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.

package.json

@@ -75,8 +75,7 @@
     "lib",
     "src",
     "types",
-    "css",
-    "actions"
+    "css"
   ],
   "contributors": [
     "Eric Liu (https://github.com/metonym)",

src/Truncate/index.js

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

src/Truncate/truncate.d.ts

@@ -0,0 +1,12 @@
+interface TruncateOptions {
+  clamp?: "end" | "front";
+}
+
+export function TruncateAction(
+  node: HTMLElement,
+  options?: TruncateOptions
+): {
+  update: (options?: TruncateOptions) => void;
+};
+
+export default TruncateAction;

actions/truncate.js → src/Truncate/truncate.js

@@ -1,16 +1,12 @@
 /**
  * Svelte action that applies single-line text truncation to an element
- * @param {HTMLElement} node
- * @param {{ clamp?: "end" | "front" }} params
+ * @typedef {{ clamp?: "end" | "front" }} TruncateOptions
+ * @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }}
  * @example
- * <script>
- *   import { truncate } from "carbon-components-svelte/actions";
- * </script>
- *
  * <h1 use:truncate>...</h1>
  * <h1 use:truncate={{ clamp: "front" }}>...</h1>
  */
-export function truncate(node, params = {}) {
+export function truncate(node, options = {}) {
   const prefix = "bx--text-truncate--";
 
   function toggleClass(front = false) {
@@ -21,11 +17,13 @@ export function truncate(node, params = {}) {
     node.className = `${classes} ${prefix}${front ? "front" : "end"}`;
   }
 
-  toggleClass(params.clamp === "front");
+  toggleClass(options.clamp === "front");
 
   return {
-    update(params) {
-      toggleClass(params.clamp === "front");
+    update(options) {
+      toggleClass(options.clamp === "front");
     },
   };
 }
+
+export default truncate;

src/index.js

@@ -128,6 +128,7 @@ export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
 export { TreeView } from "./TreeView";
 export { Truncate } from "./Truncate";
+export { default as truncate } from "./Truncate/truncate";
 export {
   Header,
   HeaderAction,

tests/Truncate.test.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Truncate } from "../types";
-  import { truncate } from "../actions";
+  import { truncate } from "../types";
 </script>
 
 <Truncate>

types/Truncate/truncate.d.ts

@@ -0,0 +1,12 @@
+interface TruncateOptions {
+  clamp?: "end" | "front";
+}
+
+export function TruncateAction(
+  node: HTMLElement,
+  options?: TruncateOptions
+): {
+  update: (options?: TruncateOptions) => void;
+};
+
+export default TruncateAction;

types/index.d.ts

@@ -144,6 +144,7 @@ export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinit
 export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon.svelte";
 export { default as TreeView } from "./TreeView/TreeView.svelte";
 export { default as Truncate } from "./Truncate/Truncate.svelte";
+export { default as truncate } from "./Truncate/truncate";
 export { default as Header } from "./UIShell/Header.svelte";
 export { default as HeaderAction } from "./UIShell/HeaderAction.svelte";
 export { default as HeaderActionLink } from "./UIShell/HeaderActionLink.svelte";