feat(ktruncate): reskin component [KHCP-9009]

docs/components/truncate.md

@@ -1,6 +1,6 @@
 # Truncate
 
-**KTruncate** - A Kongponent that limits content to a specific number of lines and provides controls to show or hide the truncated content.
+KTruncate - a container that limits content to a specific number of lines and provides controls to show or hide the hidden items.
 
 <KCard>
   <KTruncate>
@@ -44,22 +44,22 @@ Number of rows to truncate content. Default value is `1`.
 </template>
 ```
 
-### isTextContent
+### truncateText
 
 By default the component treats anything passed through the `default` slot as collection of HTML elements. Use this prop if you want to truncate elements that only contain text, such as one or more paragraph `<p>` tags.
 
 When this prop is set to `true`, the component applies different logic; truncation is achieved via the `-webkit-line-clamp` CSS property, rather than assessing the height of child elements to determine the row height.
 
 <KCard>
-  <KTruncate is-text-content :rows="3">
-    <p>A good design decision to apply <a href="https://kongponents.konghq.com/components/truncate.html#istextcontent">text truncation</a> would be when displaying a <b>large amount of textual content</b>, such as a list of articles or product descriptions, in a limited space, such as a mobile screen or a small widget. By truncating the text to a short summary, it is possible to present the information in a more organized and readable manner, allowing the user to quickly scan and understand the main points of each item.</p>
-    <p>The truncated text can also serve as a teaser, encouraging the user to click or tap to view the full content.</p>
+  <KTruncate truncate-text :rows="3">
+    <p class="text-paragraph">A good design decision to apply <a href="https://kongponents.konghq.com/components/truncate.html#textcontent">text truncation</a> would be when displaying a <b>large amount of textual content</b>, such as a list of articles or product descriptions, in a limited space, such as a mobile screen or a small widget. By truncating the text to a short summary, it is possible to present the information in a more organized and readable manner, allowing the user to quickly scan and understand the main points of each item.</p>
+    <p class="text-paragraph">The truncated text can also serve as a teaser, encouraging the user to click or tap to view the full content.</p>
   </KTruncate>
 </KCard>
 
 ```html
 <template>
-  <KTruncate is-text-content :rows="3">
+  <KTruncate truncate-text :rows="3">
     <p>A good design decision to apply text truncation would be
       when displaying a <b>large amount of textual content</b>, such as a list
       of articles or product descriptions, in a limited space, such as
@@ -72,12 +72,12 @@ When this prop is set to `true`, the component applies different logic; truncati
 </template>
 ```
 
-### isExpanded
+### expanded
 
 When `true`, the component will not truncate the content and the collapse trigger will be visible.
 
 <KCard>
-  <KTruncate is-expanded>
+  <KTruncate expanded>
     <KBadge v-for="n in 25" :key="n">
       Item {{ n }}
     </KBadge>
@@ -86,7 +86,7 @@ When `true`, the component will not truncate the content and the collapse trigge
 
 ```html
 <template>
-  <KTruncate is-expanded>
+  <KTruncate expanded>
     <KBadge v-for="n in 25" :key="n">
       Item {{ n }}
     </KBadge>
@@ -99,14 +99,14 @@ When `true`, the component will not truncate the content and the collapse trigge
 Width of container element that wraps content passed through the `default` slot. Works just like `width` property in CSS. Default value is `100%`.
 
 <KCard>
-  <KTruncate is-text-content :rows="2" width="50%">
-    <p>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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <KTruncate truncate-text :rows="2" width="50%">
+    <p class="text-paragraph">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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </KTruncate>
 </KCard>
 
 ```html
 <template>
-  <KTruncate is-text-content :rows="2" width="50%">
+  <KTruncate truncate-text :rows="2" width="50%">
     <p>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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </KTruncate>
 </template>
@@ -121,10 +121,10 @@ The content to truncate.
 **Note:** when using KTruncate for truncating collection of HTML elements (not text), to ensure the best experience with the component, please pass elements of equal height in the default slot. The component will base its guess for the height of the element on the height of each individual sibling, so passing elements of equal height will result in a more accurate and consistent output.
 
 :::tip TIP
-The component is reactive to its dimensions changes. To see this in action, try resizing your browser window and notice the behavior of the example below.
+The component is reactive to its dimensions changes. To see this in action, try resizing the container below.
 :::
 
-<KCard>
+<KCard class="resizable-card">
   <KTruncate :rows="3">
     <KBadge v-for="n in 30" :key="n">
       Item {{ n }}
@@ -136,7 +136,7 @@ The component is reactive to its dimensions changes. To see this in action, try
 
 Slot for a custom expand trigger element. Slot props:
 
-- `truncatedCount` (type: `Number`) - Number of elements that overflow. **Note**: this slot prop is only available when not `isTextContent`
+- `truncatedCount` (type: `Number`) - Number of elements that overflow. **Note**: this slot prop is only available when not `truncateText`
 - `expand` (type: `Function`) - Function to expand
 
 ### collapse-trigger
@@ -177,15 +177,27 @@ Example of using the `expand-trigger` and `collapse-trigger` slots for creating
 </template>
 ```
 
-<style lang="scss">
+<style lang="scss" scoped>
+.text-paragraph {
+  margin-top: $kui-space-0;
+  margin-bottom: $kui-space-40;
+}
+
+.resizable-card {
+  resize: horizontal;
+  overflow-x: auto;
+  min-width: 100px;
+  max-width: 90%;
+}
+
 .custom-trigger {
-  color: blue;
+  color: $kui-color-text-primary;
   text-decoration: underline;
   white-space: nowrap;
-  margin-left: 4px;
+  margin-left: $kui-space-20;
 
   &:hover {
-    color: darkblue;
+    color: $kui-color-text-primary-strong;
   }
 }
 </style>

docs/guide/migrating-to-version-9.md

@@ -570,6 +570,18 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KTruncate
 
+#### Props
+
+* `isTextContent` prop has been changed to `truncateText`
+* `isExpanded` prop has been changed to `expanded`
+
+#### Structure
+
+* `k-truncate-content` class has been changed to `truncate-content`
+* `k-truncate-text` class has been changed to `truncate-text`
+* `k-truncate-expand-controls` class has been changed to `truncate-expand-controls`
+* `k-truncate-container` class has been changed to `truncate-container`
+* `k-truncate-collapse-controls` class has been changed to `truncate-collapse-controls`
 
 ### KView Switcher
 

src/components/KTruncate/KTruncate.cy.ts

@@ -55,11 +55,11 @@ describe('KTruncate', () => {
     cy.get('[data-testid="expand-trigger-wrapper"]').should('contain.text', expandTriggerContent).click()
   })
 
-  it('render expanded when isExpanded prop is true and render content passed in through expand trigger slot', () => {
+  it('render expanded when expanded prop is true and render content passed in through expand trigger slot', () => {
     const collapseTriggerContent = 'Collapse'
     mount(KTruncate, {
       props: {
-        isExpanded: true,
+        expanded: true,
       },
       slots: {
         default: [