Merge branch 'develop' into gsoc-table-develop

BabyElias · Aug 21, 2024 · 4d59b0f · 4d59b0f
2 parents b66421f + 083aa26
commit 4d59b0f
Show file tree

Hide file tree

Showing 9 changed files with 359 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
 ## Upcoming version 5.x.x (`develop` branch)
 
 
+
 [#727]
   - **Description:** Initial implementation of `KTable` component
   - **Products impact:** New Component
@@ -15,6 +16,29 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Guidance:**
 [#727] https://github.com/learningequality/kolibri-design-system/pull/727
 
+- [#738]
+  - **Description:** Bump KDS version to 5.0.0-rc2.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#738]: https://github.com/learningequality/kolibri-design-system/pull/738
+
+- [705]
+  - **Description:**  Update`KCard`  updates: Adds 'preserveAboveTitle`, `preserveBelowTitle`, `preserveFooter` prop for flexible  slot management.
+  - **Products impact:**  Card updates 
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/702
+  - **Components:** `KCard` 
+  - **Breaking:** N0
+  - **Impacts a11y:** No
+  - **Guidance:**
+
+[705]: https://github.com/learningequality/kolibri-design-system/pull/705
+
+
 - [719]
   - **Description:** Removes KResponsiveWindowMixin.
   - **Products impact:** removed API.
@@ -48,44 +72,61 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Guidance:** Find all polite and live regions (or roles) in an application. Remove them and instead use `useKLiveRegion.sendPoliteMessage` and `useKLiveRegion.sendAssertiveMessage` to update the live regions that KDS inserted to document body during installation.
 
 [#687]: https://github.com/learningequality/kolibri-design-system/pull/687
- [#688]
+
+- [#688]
   - **Description:**  Update`KCard` styling 
   - **Products impact:**  Card updates 
   - **Addresses:** 
   - **Components:** `KCard` 
   - **Breaking:** N0
   - **Impacts a11y:** No
   - **Guidance:**
- [#688] https://github.com/learningequality/kolibri-design-system/pull/688
 
-[#707]
+[#688]: https://github.com/learningequality/kolibri-design-system/pull/688
+
+- [#707]
   - **Description:** Card Validations
   - **Products impact:**  
   - **Addresses:** [#695](https://github.com/learningequality/kolibri-design-system/issues/695)
   - **Components:** `KCard`
   - **Breaking:** No
   - **Impacts a11y:**  No
   - **Guidance:**
- [#707] https://github.com/learningequality/kolibri-design-system/pull/707
 
-[#709]
+[#707]: https://github.com/learningequality/kolibri-design-system/pull/707
+
+- [#706]
+  - **Description:** Add new alignment options to `KCard` 
+  - **Products impact:**  new alignment 
+  - **Addresses:** [#701](https://github.com/learningequality/kolibri-design-system/issues/701)
+  - **Components:** `KCard` 
+  - **Breaking:** N0
+  - **Impacts a11y:** No
+  - **Guidance:**
+
+[#706]: https://github.com/learningequality/kolibri-design-system/pull/706
+
+
+- [#709]
   - **Description:**  Update spaces to the latest design`KCard` 
   - **Products impact:**  Card updates 
   - **Addresses:** [#704](https://github.com/learningequality/kolibri-design-system/issues/704)
   - **Components:** `KCard` 
   - **Breaking:** N0
   - **Impacts a11y:** No
   - **Guidance:**
- [#709] https://github.com/learningequality/kolibri-design-system/pull/709
 
-[#625]
+[#709]: https://github.com/learningequality/kolibri-design-system/pull/709
+
+- [#625]
   - **Description:** Initial implementation of `KCard` component
   - **Products impact:** New Component
   - **Addresses:** [#530](https://github.com/learningequality/kolibri-design-system/issues/530)
   - **Components:** KCard
   - **Breaking:** No
   - **Impacts a11y:**  Yes
   - **Guidance:**
+
 [#625]: https://github.com/learningequality/kolibri-design-system/pull/625
 
 - [#678]
@@ -168,6 +209,28 @@ Changelog is rather internal in nature. See release notes for the public overvie
 ## Version 4.x.x (`release-v4` branch)
 
 
+- [#737]
+  - **Description:** Bump KDS version to 4.4.1.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#737]: https://github.com/learningequality/kolibri-design-system/pull/737
+
+- [#717]
+  - **Description:** Fix ResizeOserver errors when KListWithOverflow resize very quickly.
+  - **Products impact:** bugfix.
+  - **Addresses:** Sentry error.
+  - **Components:** KListWithOverflow.
+  - **Breaking:** no.
+  - **Impacts a11y:** no.
+  - **Guidance:** -.
+
+[#717]: https://github.com/learningequality/kolibri-design-system/pull/717
+
 - [#680]
   - **Description:** Adds boolean `appendToRoot` prop to teleport the modal to the body element if true.
   - **Products impact:** new API.

diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
@@ -24,6 +24,7 @@
             :headingLevel="2"
             layout="horizontal"
             thumbnailDisplay="large"
+            thumbnailAlign="right"
             :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
           >
             <template #title>
@@ -76,6 +77,73 @@
           </kcard>
         </div>
       </DocsShow>
+      <p>
+        In this layout, the thumbnail image can displayed on either left or right side of the card using
+        the <DocsInternalLink href="/kcard#prop:thumbnailAlign">
+          <code>thumbnailAlign</code>
+        </DocsInternalLink> prop.
+      </p>
+      <p> Here's an example of usage of the thumbnailAlign: </p>
+      <DocsShow block>
+        <div>
+          <KCard
+            :to="{ name: 'kcard' }"
+            :headingLevel="2"
+            layout="horizontal"
+            thumbnailDisplay="large"
+            thumbnailAlign="left"
+            :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+          >
+            <template #title>
+              <div>
+                <KTextTruncator
+                  text="This is a sample resource title that goes to three lines and truncates at the end of the three lines This is a sample title that goes"
+                  :maxLines="2"
+                />
+              </div>
+            </template>
+            <template #aboveTitle>
+              <KGrid>
+
+                <KGridItem
+                  :layout12="{ span: 9 }"
+                  :layout8="{ span: 6 }"
+                >
+                  <span><KIcon icon="readSolid" class="icon-size" /></span>
+                  <span
+                    :style="{ 'color': $themePalette.grey.v_400,
+                              'font-size': '1.2em' }"
+                  >Rutrum pellentesque utrum...</span>
+                </KGridItem>
+
+                <KGridItem
+                  :layout12="{ span: 3 }"
+                  :layout8="{ span: 2 }"
+                >
+                  <div style="float:right">
+                    <KIcon icon="infoOutline" class="icon-size" />
+                  </div>
+                </KGridItem>
+              </KGrid>
+            </template>
+            <template #footer>
+              <div>
+                <div class="footer-top-header">
+                  <span>
+                    <KIcon icon="practiceSolid" class="icon-size" />
+                    Practice
+                  </span>
+                  <span
+                    :style="{ 'background-color': $themePalette.grey.v_100 , 'padding': '2px' }"
+                  >
+                    Short Activity
+                  </span>
+                </div>
+              </div>
+            </template>
+          </kcard>
+        </div>
+      </DocsShow>
 
       <h3>Vertical Layout</h3>
       <p> The vertical layout displays the thumbnail image above the content. </p>

diff --git a/docs/pages/klistwithoverflow.vue b/docs/pages/klistwithoverflow.vue
@@ -231,6 +231,7 @@
   }
 
   .divider-wrapper {
+    align-self: stretch;
     padding: 8px 12px;
   }
 

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
@@ -208,4 +208,5 @@ h1, h2 {
   white-space: nowrap;
   border-width: 0;
 }
-</style>
+</style>
+
diff --git a/lib/KCard/BaseCard.vue b/lib/KCard/BaseCard.vue
@@ -36,7 +36,10 @@
           class="base-card-title"
           :style="{ color: $themeTokens.text }"
         >
-          <slot v-if="$slots.title" name="title"></slot>
+          <slot 
+            v-if="$slots.title"
+            name="title"
+          ></slot>
           <KTextTruncator
             v-else
             :text="title"

diff --git a/lib/KCard/__tests__/KCard.spec.js b/lib/KCard/__tests__/KCard.spec.js
@@ -128,4 +128,93 @@ describe('KCard', () => {
       expect(footerSlot.text()).toBe('footer slot content goes here');
     });
   });
+  describe('it renders slot behaviors', () => {
+    it('preserves space when preserve prop is true and slot is not empty', () => {
+      const wrapper = makeWrapper({
+        propsData: {
+          to: { path: '/some-link' },
+          title: 'sample title ',
+          headingLevel: 4,
+          preserveAboveTitle: true,
+          preserveBelowTitle: true,
+          preserveFooter: true,
+        },
+        slots: {
+          aboveTitle: 'above title',
+          belowTitle: 'below title',
+          footer: 'footer slot content goes here',
+        },
+      });
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.exists()).toBe(true);
+      expect(belowTitleSlot.exists()).toBe(true);
+      expect(footerSlot.exists()).toBe(true);
+    });
+
+    it('preserves space when preserve prop is true and slot is empty', () => {
+      const wrapper = makeWrapper({
+        propsData: {
+          to: { path: '/some-link' },
+          title: 'sample title ',
+          headingLevel: 4,
+          preserveAboveTitle: true,
+          preserveBelowTitle: true,
+          preserveFooter: true,
+        },
+        slots: {},
+      });
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.exists()).toBe(true);
+      expect(belowTitleSlot.exists()).toBe(true);
+      expect(footerSlot.exists()).toBe(true);
+    });
+
+    it('removes space when preserve prop is false and slot is empty', () => {
+      const wrapper = makeWrapper({
+        propsData: {
+          to: { path: '/some-link' },
+          title: 'sample title ',
+          headingLevel: 4,
+          preserveAboveTitle: false,
+          preserveBelowTitle: false,
+          preserveFooter: false,
+        },
+        slots: {},
+      });
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.exists()).toBe(false);
+      expect(belowTitleSlot.exists()).toBe(false);
+      expect(footerSlot.exists()).toBe(false);
+    });
+
+    it('show slots content regardless of whether the preserve prop is true', () => {
+      const wrapper = makeWrapper({
+        propsData: {
+          to: { path: '/some-link' },
+          title: 'sample title ',
+          headingLevel: 4,
+          preserveAboveTitle: true,
+          preserveBelowTitle: true,
+          preserveFooter: true,
+        },
+        slots: {
+          aboveTitle: 'above title',
+          belowTitle: 'below title',
+          footer: 'footer slot content goes here',
+        },
+      });
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.text()).toBe('above title');
+      expect(belowTitleSlot.text()).toBe('below title');
+      expect(footerSlot.text()).toBe('footer slot content goes here');
+    });
+  });
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -231,6 +231,7 @@ @@
       }
       .divider-wrapper {
+        align-self: stretch;
         padding: 8px 12px;
       }
@@ Expand Down @@