From 5b7eb496ab580d0c357780e3cbe1ff4ecc627139 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Mon, 9 Oct 2023 21:35:33 +0530
Subject: [PATCH 1/6] Create a KTextTruncator component

---
 lib/KTextTruncator.vue | 138 +++++++++++++++++++++++++++++++++++++++++
 lib/KThemePlugin.js    |   2 +
 2 files changed, 140 insertions(+)
 create mode 100644 lib/KTextTruncator.vue

diff --git a/lib/KTextTruncator.vue b/lib/KTextTruncator.vue
new file mode 100644
index 000000000..9ae4b2737
--- /dev/null
+++ b/lib/KTextTruncator.vue
@@ -0,0 +1,138 @@
+<template>
+
+  <!--
+    Text is wrapped in two `spans`s to allow parent components adding
+    padding style directly on `<TextTruncatorCss>` component no matter
+    of what truncating technique is used. Otherwise adding padding directly
+    would break when using technique (B) since text that should be truncated
+    would show in padding area.
+
+    Attributes are inherited by the inner `span` to emulate the same behavior
+    like if only one element would wrap the text to allow attributes be applied
+    as close as possible to the text element.
+
+    Some width information need to be provided to `<span>s` to allow `text-overflow`
+    calculate properly when ellipsis should be added.
+  -->
+  <span :style="{ display: 'inline-block', maxWidth: '100%' }">
+    <span
+      v-bind="$attrs"
+      :style="{ display: 'inline-block', maxWidth: '100%' }"
+      :class="$computedClass(truncate)"
+    >
+      {{ text }}
+    </span>
+  </span>
+
+</template>
+
+
+<script>
+
+  /**
+   * Truncates text to a certain number of lines
+   * and adds an ellipsis character "…"
+   *
+   * Internet Explorer note:
+   * Depending on length of words of the text, there might
+   * be a gap between the last visible word and "…"
+   */
+  export default {
+    name: 'KTextTruncator',
+    inheritAttrs: false,
+    props: {
+      text: {
+        type: String,
+        required: true,
+      },
+      maxLines: {
+        type: Number,
+        required: false,
+        default: 1,
+      },
+      /**
+       * Text line height in rem.
+       * Used only for Internet Explorer fallback.
+       */
+      lineHeightIE: {
+        type: Number,
+        required: false,
+        default: 1.4,
+      },
+    },
+    computed: {
+      truncate() {
+        /*
+          (A)
+          For one line, use standard ellipsis text overflow
+          that works well for such scenario
+        */
+        if (this.maxLines === 1) {
+          return {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          };
+        }
+
+        // 54 is random number only to be able to define `supports` test condition
+        if (process.client && 'CSS' in window && CSS.supports && CSS.supports('-webkit-line-clamp: 54')) {
+          /*
+            (B)
+            For multiple lines, use line clamp in browsers that support it
+            (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)
+          */
+          return {
+            overflow: 'hidden',
+            display: '-webkit-box',
+            '-webkit-line-clamp': `${this.maxLines}`,
+            '-webkit-box-orient': 'vertical',
+            // needed to make line clamp work for very long word with no spaces
+            overflowWrap: 'break-word',
+          };
+        } else {
+          /*
+            (C)
+            Fallback for multiple lines in Internet Explorer and some older versions
+            of other browsers that don't support line clamp
+            (https://caniuse.com/mdn-css_properties_-webkit-line-clamp).
+            Calculate max height and add "..." in `::before` while covering it with
+            white rectangle defined in `::after` when text doesn't need to be truncated.
+            Adapted from https://hackingui.com/a-pure-css-solution-for-multiline-text-truncation/
+            and https://css-tricks.com/line-clampin/#the-hide-overflow-place-ellipsis-pure-css-way.
+          */
+          const ellipsisWidth = '1rem';
+          return {
+            overflow: 'hidden',
+            position: 'relative',
+            lineHeight: `${this.lineHeightIE}rem`,
+            maxHeight: `${this.maxLines * this.lineHeightIE}rem`,
+            // needed to make truncation work for very long word with no spaces
+            // `word-wrap` is a legacy name for `overflow-wrap` that needs to be used for IE
+            wordWrap: 'break-word',
+            // create space for "..."
+            paddingRight: ellipsisWidth,
+            marginRigth: `-${ellipsisWidth}`,
+            '::before': {
+              content: "'…'",
+              position: 'absolute',
+              right: 0,
+              bottom: 0,
+            },
+            // cover "..." with white rectangle when text
+            // doesn't need to be truncated
+            '::after': {
+              content: "''",
+              position: 'absolute',
+              right: 0,
+              width: ellipsisWidth,
+              height: '100%',
+              background: this.$themeTokens.surface,
+            },
+          };
+        }
+      },
+    },
+  };
+
+</script>
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 9434f09a0..cf23b14a5 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -31,6 +31,7 @@ import KTabsPanel from './tabs/KTabsPanel';
 import KTextbox from './KTextbox';
 import KTooltip from './KTooltip';
 import KTransition from './KTransition';
+import KTextTruncator from "./KTextTruncator"
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';
@@ -121,4 +122,5 @@ export default function KThemePlugin(Vue) {
   Vue.component('KTextbox', KTextbox);
   Vue.component('KTooltip', KTooltip);
   Vue.component('KTransition', KTransition);
+  Vue.component('KTextTruncator', KTextTruncator);
 }

From 905e9aee971f64a66dac6a2155f55e895f3939b4 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Tue, 10 Oct 2023 21:31:36 +0530
Subject: [PATCH 2/6] Made draft docs for the KTextTruncator.vue

---
 docs/pages/ktexttruncator.vue | 20 ++++++++++++++++++++
 docs/tableOfContents.js       |  5 +++++
 2 files changed, 25 insertions(+)
 create mode 100644 docs/pages/ktexttruncator.vue

diff --git a/docs/pages/ktexttruncator.vue b/docs/pages/ktexttruncator.vue
new file mode 100644
index 000000000..e0d12b807
--- /dev/null
+++ b/docs/pages/ktexttruncator.vue
@@ -0,0 +1,20 @@
+
+import KTextTruncator from '../../lib/KTextTruncator.vue';
+<template>
+
+  <DocsPageTemplate :apiDocs="true">
+
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>
+        Truncates the text to a certain number of lines and adds an ellipsis character "…".
+      </p>
+      <DocsShow>
+        <p>
+          <KTextTruncator text="This is a long text that will be truncated to two line. This is a long text that will be truncated to two line. This is a long text that will be truncated to two line. This is a long text that will be truncated to two line. This is a long text that will be truncated to two line." :maxLines="2" />
+        </p>
+      </DocsShow>
+    </DocsPageSection>
+
+  </DocsPageTemplate>
+
+</template>
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index 34e90b851..cb96b09ba 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -387,6 +387,11 @@ export default [
         isCode: true,
         keywords: ['transition'],
       }),
+      new Page({
+        path: '/ktexttruncator',
+        title: 'KTextTruncator',
+        isCode: true,
+      }),
     ],
   }),
 ];

From 04c5423b3e151c4b517b039fe8a26249c3e5dc60 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Tue, 17 Oct 2023 21:13:11 +0530
Subject: [PATCH 3/6] Fix linting issue, add documentation string for props and
 add a constant variable to check CSR

---
 lib/KTextTruncator.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/lib/KTextTruncator.vue b/lib/KTextTruncator.vue
index 9ae4b2737..4657dc0eb 100644
--- a/lib/KTextTruncator.vue
+++ b/lib/KTextTruncator.vue
@@ -41,10 +41,16 @@
     name: 'KTextTruncator',
     inheritAttrs: false,
     props: {
+      /**
+       * Text to be truncated
+       */
       text: {
         type: String,
         required: true,
       },
+      /**
+       * Maximum number of lines to be shown
+       */
       maxLines: {
         type: Number,
         required: false,
@@ -62,6 +68,8 @@
     },
     computed: {
       truncate() {
+        const nuxtClientSideRendering = process.client;
+
         /*
           (A)
           For one line, use standard ellipsis text overflow
@@ -76,7 +84,12 @@
         }
 
         // 54 is random number only to be able to define `supports` test condition
-        if (process.client && 'CSS' in window && CSS.supports && CSS.supports('-webkit-line-clamp: 54')) {
+        if (
+          nuxtClientSideRendering &&
+          'CSS' in window &&
+          CSS.supports &&
+          CSS.supports('-webkit-line-clamp: 54')
+        ) {
           /*
             (B)
             For multiple lines, use line clamp in browsers that support it

From f0d5ec2952b24d38531789bd5f3c205136b78254 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Tue, 17 Oct 2023 21:14:36 +0530
Subject: [PATCH 4/6] Fix linting issues and removed unneccessary import
 statement

---
 docs/pages/ktexttruncator.vue | 2 --
 lib/KThemePlugin.js           | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/pages/ktexttruncator.vue b/docs/pages/ktexttruncator.vue
index e0d12b807..82751e2ca 100644
--- a/docs/pages/ktexttruncator.vue
+++ b/docs/pages/ktexttruncator.vue
@@ -1,5 +1,3 @@
-
-import KTextTruncator from '../../lib/KTextTruncator.vue';
 <template>
 
   <DocsPageTemplate :apiDocs="true">
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index cf23b14a5..2606b9676 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -31,7 +31,7 @@ import KTabsPanel from './tabs/KTabsPanel';
 import KTextbox from './KTextbox';
 import KTooltip from './KTooltip';
 import KTransition from './KTransition';
-import KTextTruncator from "./KTextTruncator"
+import KTextTruncator from './KTextTruncator';
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';

From 64d66d05c305b5f29e03ed20c1bdffa79a40ebb6 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Fri, 20 Oct 2023 19:02:38 +0530
Subject: [PATCH 5/6] Add a condition to check for nuxt server rendering

- Removed the old condition that checks for nuxt client rendering
- add this condition because window object is not defined in server rendering
- it is present only in client (browser).
---
 lib/KTextTruncator.vue | 46 ++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/lib/KTextTruncator.vue b/lib/KTextTruncator.vue
index 4657dc0eb..8a972257c 100644
--- a/lib/KTextTruncator.vue
+++ b/lib/KTextTruncator.vue
@@ -68,13 +68,16 @@
     },
     computed: {
       truncate() {
-        const nuxtClientSideRendering = process.client;
+        const nuxtServerSideRendering = process && process.server;
+        if (nuxtServerSideRendering) {
+          return;
+        }
 
         /*
-          (A)
-          For one line, use standard ellipsis text overflow
-          that works well for such scenario
-        */
+            (A)
+            For one line, use standard ellipsis text overflow
+            that works well for such scenario
+          */
         if (this.maxLines === 1) {
           return {
             overflow: 'hidden',
@@ -84,17 +87,12 @@
         }
 
         // 54 is random number only to be able to define `supports` test condition
-        if (
-          nuxtClientSideRendering &&
-          'CSS' in window &&
-          CSS.supports &&
-          CSS.supports('-webkit-line-clamp: 54')
-        ) {
+        if ('CSS' in window && CSS.supports && CSS.supports('-webkit-line-clamp: 54')) {
           /*
-            (B)
-            For multiple lines, use line clamp in browsers that support it
-            (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)
-          */
+              (B)
+              For multiple lines, use line clamp in browsers that support it
+              (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)
+            */
           return {
             overflow: 'hidden',
             display: '-webkit-box',
@@ -105,15 +103,15 @@
           };
         } else {
           /*
-            (C)
-            Fallback for multiple lines in Internet Explorer and some older versions
-            of other browsers that don't support line clamp
-            (https://caniuse.com/mdn-css_properties_-webkit-line-clamp).
-            Calculate max height and add "..." in `::before` while covering it with
-            white rectangle defined in `::after` when text doesn't need to be truncated.
-            Adapted from https://hackingui.com/a-pure-css-solution-for-multiline-text-truncation/
-            and https://css-tricks.com/line-clampin/#the-hide-overflow-place-ellipsis-pure-css-way.
-          */
+              (C)
+              Fallback for multiple lines in Internet Explorer and some older versions
+              of other browsers that don't support line clamp
+              (https://caniuse.com/mdn-css_properties_-webkit-line-clamp).
+              Calculate max height and add "..." in `::before` while covering it with
+              white rectangle defined in `::after` when text doesn't need to be truncated.
+              Adapted from https://hackingui.com/a-pure-css-solution-for-multiline-text-truncation/
+              and https://css-tricks.com/line-clampin/#the-hide-overflow-place-ellipsis-pure-css-way.
+            */
           const ellipsisWidth = '1rem';
           return {
             overflow: 'hidden',

From c730748d5b6b997186b658633cc041e5594f06a3 Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Mon, 23 Oct 2023 13:00:15 +0200
Subject: [PATCH 6/6] Update changelog

---
 CHANGELOG.md | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bcc69113a..470d8ca89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,8 +7,19 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 2.0.0
 
+- [#464]
+  - **Description:** Add KTextTruncator
+  - **Products impact:** new API
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/450
+  - **Components:** KTextTruncator
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#464]: https://github.com/learningequality/kolibri-design-system/pull/464
+
 - [#460]
-  - **Description:** Implement KLogo
+  - **Description:** Add KLogo
   - **Products impact:** new API
   - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/373
   - **Components:** KLogo