docs: add basic sample

SAP · Nov 22, 2024 · 6a69688 · 6a69688
1 parent c15972e
commit 6a69688
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 6 deletions.
diff --git a/packages/main/src/ExpandableText.ts b/packages/main/src/ExpandableText.ts
@@ -26,19 +26,31 @@ import ExpandableTextCss from "./generated/themes/ExpandableText.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
+ * The `ui5-expandable-text` component allows displaying a large body of text in a small space. It provides an "expand" functionality, which shows the full text.
  *
- * <h3>Usage</h3>
+ * ### Usage</h3>
  *
- * For the <code>expandable-text</code>
- * <h3>ES6 Module Import</h3>
+ * #### When to use:
+ * - You specifically have to deal with long texts
  *
- * <code>import "@ui5/webcomponents/dist/ExpandableText.js";</code>
+ * #### When not to use:
+ * - Do not use long texts and descriptions if you can provide short and meaningful alternatives
+ * - The content is critical for the user. In this case use short descriptions that can fit in
+ *
+ * ### Responsive Behavior
+ *
+ * On phones, when the component is set to show the full text in a popover, the popover will be displayed full screen.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Text";`
  *
  * @constructor
  * @extends UI5Element
  * @public
+ * @since 2.5.0
  */
 @customElement({
 	tag: "ui5-expandable-text",
@@ -68,7 +80,7 @@ class ExpandableText extends UI5Element {
 	 * @public
 	 */
 	@property({ type: Number })
-	maxCharacters = Number.POSITIVE_INFINITY;
+	maxCharacters : number = Infinity;
 
 	/**
 	 * Determines how the full text will be displayed.

diff --git a/packages/website/docs/_components_pages/main/ExpandableText.mdx b/packages/website/docs/_components_pages/main/ExpandableText.mdx
@@ -0,0 +1,14 @@
+---
+slug: ../ExpandableText
+sidebar_class_name: newComponentBadge
+---
+
+import Basic from "../../_samples/main/ExpandableText/Basic/Basic.md";
+
+
+<%COMPONENT_OVERVIEW%>
+
+## Basic Sample
+<Basic />
+
+<%COMPONENT_METADATA%>
diff --git a/packages/website/docs/_samples/main/ExpandableText/Basic/Basic.md b/packages/website/docs/_samples/main/ExpandableText/Basic/Basic.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/main/ExpandableText/Basic/main.js b/packages/website/docs/_samples/main/ExpandableText/Basic/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/ExpandableText.js";
diff --git a/packages/website/docs/_samples/main/ExpandableText/Basic/sample.html b/packages/website/docs/_samples/main/ExpandableText/Basic/sample.html
@@ -0,0 +1,20 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+
+    <ui5-expandable-text max-characters="50">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis accusamus assumenda debitis excepturi distinctio adipisci magnam qui a id, praesentium ullam voluptatem ad, modi quo perspiciatis soluta quasi facere molestiae</ui5-expandable-text>
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->