@dhasdk/simple-ui 1.0.26 → 1.0.27

package/README.md

@@ -26,6 +26,7 @@ Tooltip
 - [CharacterCounter](#charactercounter)
 - [CheckBox](#checkbox)
 - [DatePicker](#datepicker)
+- [ExpandableText](#expandabletext)
 - [Input](#input)
 - [List](#list)
 - [Modal](#modal)
@@ -812,6 +813,58 @@ Default Variant
 [Top of Page](#table-of-contents)
 
 
+<!-- E X P A N D A B L E   T E X T --------------------------------------------------------- -->
+
+## ExpandableText
+
+ExpandableText is a component with a div wrapper that takes in a **`children`** string value, and 
+displays a default number of characters with a **more** button. When the button is clicked, the
+text is expanded, and an optional **collapse** button is then shown that can collapse the text
+back to its original sizing.
+
+Props exist to style the container, the **more** button, the **collapse** button, to set the
+number of characters to display by default, as well as alternate text for each of the two
+buttons.
+
+  <!-- children,
+  initialChars = 40,
+  buttonText = "more",
+  classNameMoreButton,
+  classNameCollapseButton,
+  collapseButton = false,
+  collapseText = "collapse",
+  className, -->
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description                                  |
+| ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| buttonText | string | Yes | **`'more'`** | text label for the 'more' button 
+| className   | string   | Yes      | **`''`**  | tailwind classes to style the component container with |
+| classNameCollapseButton | string | Yes | **`ml-2 text-blue-600 underline hover:text-blue-800 focus:outline-none`** | tailwind classes to style the collapse button |
+| classNameMoreButton | string | Yes | **`ml-2 text-blue-600 underline hover:text-blue-800 focus:outline-none`** | tailwind classes to style the collapse button |
+| collapseButton | boolean | Yes | **`false`** | to display a collapse button or not |
+| collapseText | string | Yes | **`'collapse'`** | text label for 'collapse' button |
+| initialChars | integer | Yes | 40 | number of characters to display by default |
+
+### Example Usage
+
+Default Variant
+
+```jsx
+  <ExpandableText 
+      collapseButton={true} 
+      className='mt-4' 
+      classNameCollapseButton='block mt-2 strong text-red-600'>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+  </ExpandableText>
+```
+
+
+### Dependencies
+
+[Top of Page](#table-of-contents)
+
 
 <!-- I N P U T  ------------------------------------------------------------------------------ -->