carbon-design-system · devadula-nandan · Apr 28, 2025 · Apr 28, 2025 · Apr 29, 2025 · May 12, 2025
@@ -7,7 +7,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/styles';
+@use '@carbon/styles' with (
+  $font-path: '@ibm/plex'
+);
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/themes/scss/themes';
 @use '@carbon/styles/scss/theme';
@@ -60,6 +62,10 @@ body {
   padding: 0;
 }
 
+.sbdocs-preview {
+  background-color: theme.$background;
+}
+
 #main-content {
   position: relative;
   /* stylelint-disable-next-line carbon/layout-use */

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
@@ -0,0 +1,4 @@
+{
+  "label": "Truncated Text",
+  "template": "node"
+}
@@ -0,0 +1,31 @@
+<!--
+@license
+
+Copyright IBM Corp. 2025
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>carbon-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="src/styles.scss" />
+    <script type="module" src="src/index.js"></script>
+  </head>
+  <body>
+    <div class="example-container">
+      <div class="example-header"></div>
+      <div id="page-content-selector" class="example-content">
+        <p>
+          <c4p-truncated-text
+            value="Buttons are used to initialize an action, either in the background or foreground of an experience. There are several kinds of buttons. Primary buttons should be used for the principal call to action on the page. Secondary buttons should be used for secondary actions on each page. Danger buttons should be used for a negative action (such as Delete) on the page. Modify the behavior of the button by changing its event properties. Small buttons may be used when there is not enough space for a regular-sized button. This issue is most often found in tables. Small buttons should have three words or fewer."
+            lines="2"
+            with="tooltip"
+          ></c4p-truncated-text>
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,23 @@
+{
+  "name": "truncated-text",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM Products.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "clean": "rimraf node_modules dist .cache"
+  },
+  "dependencies": {
+    "@carbon/ibm-products-web-components": "^0.10.0-rc.0",
+    "lit": "^3.2.1",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2",
+    "vite": "5.4.18"
+  }
+}
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/ibm-products-web-components/es/components/truncated-text/index.js';
@@ -0,0 +1,18 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+});
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './truncated-text';
@@ -0,0 +1,10 @@
+/*
+* Copyright IBM Corp. 2025, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+@use '@carbon/styles/scss/theme' as *;
+
+$story-prefix: 'truncated-text-stories__';
@@ -0,0 +1,56 @@
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
+import { Canvas } from '@storybook/addon-docs';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as TruncatedText from './truncated-text.stories';
+
+<Meta of={TruncatedText} />
+
+# TruncatedText
+
+The `TruncatedText` component truncates text based on a specified number of
+lines, provided via a prop. It offers two configurable options for revealing the
+full content:
+
+Tooltip Mode `with="tooltip"`: Displays the full text in a tooltip overlay on
+hover.
+
+Expandable Mode `with="expand"`: Reveals the complete content through
+collapsible "Read more" / "Read less" toggles. these labels can be customized
+with `expand-label`, `collapse-label` attributes on the component
+
+> 💡 Check our
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components/examples/truncated-text)
+> example implementation.
+> [![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components/examples/truncated-text)
+
+## Default with tooltip
+
+<Canvas of={TruncatedText.WithTooltip} />
+
+## With expand
+
+<Canvas of={TruncatedText.WithExpand} />
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/ibm-products-web-components/es/components/truncated-text/index.js';
+```
+
+### HTML
+
+```html
+<c4p-truncated-text
+  value="Buttons are used to initialize an action, either in the background or foreground of an experience. There are several kinds of buttons. Primary buttons should be used for the principal call to action on the page. Secondary buttons should be used for secondary actions on each page. Danger buttons should be used for a negative action (such as Delete) on the page. Modify the behavior of the button by changing its event properties. Small buttons may be used when there is not enough space for a regular-sized button. This issue is most often found in tables. Small buttons should have three words or fewer."
+  lines="2"
+  with="tooltip"
+></c4p-truncated-text>
+```
+
+## `<c4p-truncated-text>` attributes, properties and events
+
+<ArgTypes of="c4p-truncated-text" />
@@ -0,0 +1,110 @@
+/*
+* Copyright IBM Corp. 2025, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+// $css--plex: true !default;
+
+@use 'sass:map';
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/themes' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+$block-class: #{$prefix}--truncated-text;
+
+// Common reset button style
+%reset-button {
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  line-height: inherit;
+}
+
+// Mixin for directional gradients
+@mixin gradient-bg($direction, $color) {
+  background: linear-gradient(
+    $direction,
+    rgba(255, 255, 255, 0) 0%,
+    $color 90%
+  );
+}
+
+:host(#{$prefix}-truncated-text) {
+  display: block;
+  inline-size: 100%;
+
+  .#{$block-class}_transition {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: max-height $duration-fast-02 motion(standard, productive);
+    }
+  }
+
+  .#{$block-class}_content {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--line-clamp, 0);
+    text-overflow: clip;
+    white-space: normal;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  #{$carbon-prefix}-tooltip {
+    display: inline-flex;
+  }
+
+  button:focus,
+  .#{$block-class}_expand:focus,
+  .#{$block-class}_collapse:focus {
+    @include focus-outline('outline');
+  }
+}
+
+.#{$block-class}_expand,
+.#{$block-class}_collapse {
+  @extend %reset-button;
+
+  padding: 0;
+  color: $link-primary;
+}
+
+.#{$block-class}_expand {
+  position: absolute;
+  background-color: $background;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+
+  &.#{$block-class}_layered {
+    background-color: $layer;
+  }
+
+  // Gradient LTR
+  &:dir(ltr)::before {
+    @include gradient-bg(90deg, $background);
+  }
+
+  &.#{$block-class}_layered:dir(ltr)::before {
+    @include gradient-bg(90deg, $layer);
+  }
+
+  // Gradient RTL
+  &:dir(rtl)::before {
+    @include gradient-bg(270deg, $background);
+  }
+
+  &.#{$block-class}_layered:dir(rtl)::before {
+    @include gradient-bg(270deg, $layer);
+  }
+}
+
+.#{$block-class}_collapse {
+  background-color: transparent;
+}