Merge branch 'develop' into fix-issue-4634

CHANGELOG.md

@@ -15,6 +15,50 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#728]: https://github.com/learningequality/kolibri-design-system/pull/728
 
+- [#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.
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/679.
+  - **Components:** KResponsiveWindowMixin.
+  - **Breaking:** yes.
+  - **Impacts a11y:** no.
+  - **Guidance:** Replace any use of KResponsiveWindowMixin with the new composable useKResponsiveWindow.
+
+[719]: https://github.com/learningequality/kolibri-design-system/pull/719
+
+- [#718]
+  - **Description:** This pull request resolves failing `KDateCalendar` component tests that occurred on the last day of the month in open pull requests by setting dates manually in the tests. Additionally, the `KDateCalendar` is updated to show the month of the `lastAllowedDate` property.
+  - **Products impact:** none
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/713
+  - **Components:** -
+  - **Breaking:** no
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#718]: https://github.com/learningequality/kolibri-design-system/pull/718
+
 - [#687]
   - **Description:** Adds logic that inserts ARIA live assertive and polite regions to an application's document body during KDS initialization and documents this on the new "Installation" page. Relatedly adds `useKLiveRegion` composable with public methods for updating the live regions with assertive and polite messages. 
   - **Products impact:** new API
@@ -26,44 +70,60 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#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]
@@ -146,6 +206,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.

docs/pages/accessibility.vue

@@ -24,7 +24,7 @@
         We should aim to allow zooming up to 200%, and down to 480x600 px in both profile and landscape. The app should always remain functional in all extreme screen sizes. Depending on the context, we may want to put additional effort into creating custom layouts optimized for particular screen sizes. For example, we should put additional effort into optimizing the mobile Learner experience, while for administrators this might not be as critical.
       </p>
       <p>
-        When designing and building layouts, we use the breakpoints defined by Material Design. These are exposed in our app by the <code>responsiveWindow</code> Vue component mixin. We should never use CSS media queries. See the <DocsInternalLink href="/layout" text="See the Layout page" /> for more information.
+        When designing and building layouts, we use the breakpoints defined by Material Design. These are exposed in our app by the <DocsLibraryLink component="useKResponsiveWindow" /> composable. We should never use CSS media queries. See the <DocsInternalLink href="/layout" text="See the Layout page" /> for more information.
       </p>
     </DocsPageSection>
 

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>

docs/pages/klistwithoverflow.vue

@@ -231,6 +231,7 @@
   }
 
   .divider-wrapper {
+    align-self: stretch;
     padding: 8px 12px;
   }
 

docs/pages/layout/index.vue

@@ -69,7 +69,7 @@
         <li>Level 7: <code>&gt;= 1600px</code></li>
       </ul>
       <p>
-        Responsive layouts in the design system are built using reactive JavaScript state in Vue components rather than CSS media queries. This is done using <DocsLibraryLink component="KResponsiveWindow" /> when reactive window's size information is needed or <DocsLibraryLink component="KResponsiveElement" /> when reactive component's size information is needed.
+        Responsive layouts in the design system are built using reactive JavaScript state in Vue components rather than CSS media queries. This is done using <DocsLibraryLink component="useKResponsiveWindow" /> when reactive window's size information is needed or <DocsLibraryLink component="KResponsiveElement" /> when reactive component's size information is needed.
       </p>
     </DocsPageSection>
 

docs/pages/playground.vue

@@ -44,4 +44,4 @@
     methods: {},
   };
 
-</script>
+</script>

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"

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');
+    });
+  });
 });