[WIP] KCard can have a checkbox

To be able to complete this in a11y way, KCheckbox will need to be updated to allow for more flexible label. Due to how KCheckbox is implemented it seems that currently there is no way how to set the card title as its checkbox label. There may be some more a11y requirements needed, to be discussed.
learningequality · Aug 23, 2024 · e5b0fe0 · e5b0fe0
1 parent 9283989
commit e5b0fe0
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 58 deletions.
diff --git a/docs/pages/playground/PlaygroundHorizontalCard.vue b/docs/pages/playground/PlaygroundHorizontalCard.vue
@@ -9,6 +9,9 @@
     :thumbnailSrc="require('../../assets/hummingbird-large-cc-by-sa-4.jpg')"
     title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
   >
+    <template v-if="$slots.checkbox" #checkbox>
+      <slot name="checkbox"></slot>
+    </template>
     <template #aboveTitle>
       <KGrid>
 

diff --git a/docs/pages/playground/PlaygroundVerticalCard.vue b/docs/pages/playground/PlaygroundVerticalCard.vue
@@ -9,6 +9,9 @@
     :thumbnailSrc="require('../../assets/hummingbird-small-cc-by-sa-4.jpg')"
     title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
   >
+    <template v-if="$slots.checkbox" #checkbox>
+      <slot name="checkbox"></slot>
+    </template>
     <template v-if="thumbnailDisplay !== 'none'" #aboveTitle>
       <KGrid>
 

diff --git a/docs/pages/playground/index.vue b/docs/pages/playground/index.vue
@@ -1,78 +1,114 @@
 <template>
 
   <div :style="{ margin: '40px' }">
+    <h2>Grid with one column and checkboxes</h2>
+    <KCardGrid
+      :columns="1"
+      :style="{ 'max-width': '1400px' }"
+    >
+      <KCardGridItem
+        v-for="i in 8"
+        :key="i"
+      >
+        <template #checkbox>
+          <KCheckbox :checked="false" />
+        </template>
+        <PlaygroundHorizontalCard
+          thumbnailAlign="right"
+        />
+      </KCardGridItem>
+    </KCardGrid>
+
     <h2>Default '1-2' grid, horizontal cards, large thumbnail on the left</h2>
     <KCardGrid
       layout="1-2"
       :style="{ 'max-width': '1400px' }"
     >
-      <PlaygroundHorizontalCard
+      <KCardGridItem
         v-for="i in 8"
         :key="i"
-        thumbnailAlign="left"
-      />
+      >
+        <PlaygroundHorizontalCard
+          thumbnailAlign="left"
+        />
+      </KCardGridItem>
     </KCardGrid>
 
     <h2>Default '1-2' grid, horizontal cards, large thumbnail on the right</h2>
     <KCardGrid
       layout="1-2"
       :style="{ 'max-width': '1400px' }"
     >
-      <PlaygroundHorizontalCard
+      <KCardGridItem
         v-for="i in 8"
         :key="i"
-        thumbnailAlign="right"
-      />
+      >
+        <PlaygroundHorizontalCard
+          thumbnailAlign="right"
+        />
+      </KCardGridItem>
     </KCardGrid>
 
     <h2>Default '1-2' grid, horizontal cards, small thumbnail on the right</h2>
     <KCardGrid
       layout="1-2"
       :style="{ 'max-width': '1400px' }"
     >
-      <PlaygroundHorizontalCard
+      <KCardGridItem
         v-for="i in 8"
         :key="i"
-        thumbnailDisplay="small"
-        thumbnailAlign="right"
-      />
+      >
+        <PlaygroundHorizontalCard
+          thumbnailDisplay="small"
+          thumbnailAlign="right"
+        />
+      </KCardGridItem>
     </KCardGrid>
 
     <h2>Default '1-2-3' grid, horizontal cards, small thumbnail on the left</h2>
     <KCardGrid
       layout="1-2"
       :style="{ 'max-width': '1400px' }"
     >
-      <PlaygroundHorizontalCard
+      <KCardGridItem
         v-for="i in 8"
         :key="i"
-        thumbnailDisplay="small"
-        thumbnailAlign="left"
-      />
+      >
+        <PlaygroundHorizontalCard
+          thumbnailDisplay="small"
+          thumbnailAlign="left"
+        />
+      </KCardGridItem>
     </KCardGrid>
 
     <h2>Default '1-2-3' grid, vertical cards, small thumbnail</h2>
     <KCardGrid
       layout="1-2-3"
       :style="{ 'max-width': '1400px' }"
     >
-      <PlaygroundVerticalCard
+      <KCardGridItem
         v-for="i in 8"
         :key="i"
-        thumbnailDisplay="small"
-      />
+      >
+        <PlaygroundVerticalCard
+          thumbnailDisplay="small"
+        />
+      </KCardGridItem>
     </KCardGrid>
 
     <h2>Default '1-2' grid, vertical cards, large thumbnail</h2>
     <KCardGrid
       layout="1-2"
       :style="{ 'max-width': '1400px' }"
     >
-      <PlaygroundVerticalCard
+      <KCardGridItem
         v-for="i in 8"
         :key="i"
-        thumbnailDisplay="large"
-      />
+      >
+        <PlaygroundVerticalCard
+          thumbnailDisplay="large"
+        />
+      </KCardGridItem>
     </KCardGrid>
 
     <h2>Layout configuration overriden via props</h2>
@@ -82,28 +118,33 @@
       :layoutConfig="layoutConfig1"
       :style="{ 'max-width': '1400px' }"
     >
-      <PlaygroundVerticalCard
+      <KCardGridItem
         v-for="i in 8"
         :key="i"
-        thumbnailDisplay="large"
-      />
+      >
+        <PlaygroundVerticalCard
+          thumbnailDisplay="large"
+        />
+      </KCardGridItem>
     </KCardGrid>
 
     <h2>Default '1-2-3' grid, no thumbnail</h2>
     <KCardGrid
       layout="1-2-3"
       :style="{ 'max-width': '1400px' }"
     >
-      <PlaygroundVerticalCard
+      <KCardGridItem
         v-for="i in 8"
         :key="i"
-        thumbnailDisplay="none"
-      />
+      >
+        <PlaygroundVerticalCard
+          thumbnailDisplay="none"
+        />
+      </KCardGridItem>
     </KCardGrid>
 
-    <hr>
-
     <!-- playing with techniques -->
+
     <!-- <div class="card card-before">
       <div class="content content-before">
         <h2>Card - before</h2>
@@ -118,7 +159,8 @@
         <p>Card content card content card content card content card content card content</p>
       </div>
       <div class="thumbnail thumbnail-after"></div>
-    </div> -->
+    </div>
+  -->
   </div>
 
 </template>

diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
@@ -7,6 +7,7 @@ import KButton from './buttons-and-links/KButton';
 import KButtonGroup from './buttons-and-links/KButtonGroup';
 import KCard from './cards/KCard';
 import KCardGrid from './cards/KCardGrid';
+import KCardGridItem from './cards/KCardGridItem';
 import KCheckbox from './KCheckbox';
 import KCircularLoader from './loaders/KCircularLoader';
 import KDateRange from './KDateRange';
@@ -127,6 +128,7 @@ export default function KThemePlugin(Vue) {
   Vue.component('KBreadcrumbs', KBreadcrumbs);
   Vue.component('KCard', KCard);
   Vue.component('KCardGrid', KCardGrid);
+  Vue.component('KCardGridItem', KCardGridItem);
   Vue.component('KCheckbox', KCheckbox);
   Vue.component('KCircularLoader', KCircularLoader);
   Vue.component('KDateRange', KDateRange);

diff --git a/lib/cards/BaseCard.vue b/lib/cards/BaseCard.vue
@@ -1,7 +1,7 @@
 <template>
 
   <!-- see trackInputModality  for [data-focus=true] -->
-  <li
+  <div
     :class="['base-card', $computedClass(coreOutlineFocus)]"
     tabindex="0"
     data-focus="true"
@@ -50,7 +50,7 @@
     </component>
 
     <slot name="default"></slot>
-  </li>
+  </div>
 
 </template>
 

diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue
@@ -6,10 +6,14 @@
     :title="title"
     :headingLevel="headingLevel"
     :titleLines="titleLines"
-    :class="['k-card', rootClass, thumbnailAlignClass]"
-    :style="cardGridStyle"
+    :class="['k-card', rootClass, thumbnailAlignClass]"    
     :headingStyles="headingStyles"
   >
+    <template v-if="$slots.checkbox" #checkbox>
+      <!-- @slot Optional slot for KCheckbox -->
+      <slot name="checkbox"></slot>
+    </template>
+
     <template v-if="$slots.title" #title>
       <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
       <slot name="title"></slot>
@@ -78,8 +82,6 @@
 
 <script>
 
-  import { inject } from '@vue/composition-api';
-
   import BaseCard from './BaseCard';
 
   const Layouts = {
@@ -114,14 +116,6 @@
   export default {
     name: 'KCard',
     components: { BaseCard },
-    setup() {
-      // provided by `KCardGrid`
-      const cardGridStyle = inject('cardGridStyle');
-
-      return {
-        cardGridStyle,
-      };
-    },
     props: {
       /**
        * Sets card title if provided. The title should be
@@ -244,6 +238,7 @@
       thumbnailStyles() {
         return this.stylesAndClasses.thumbnailStyles;
       },
+
       thumbnailAlignClass() {
         return this.stylesAndClasses.thumbnailAlignClass;
       },
@@ -353,16 +348,6 @@
         return {};
       },
     },
-    mounted() {
-      // TODO: Cover with a test or two since this is quite a specific
-      // way that will cover all that is needed, compared to other possible
-      // implementations (e.g. needs to fail on <ul><div><li> etc.)
-      this.$nextTick(() => {
-        if (this.$refs.baseCard.$el.parentElement.tagName !== 'UL') {
-          console.error('[KCard] KCard (<li>) needs to be a direct child of KCardGrid (<ul>).');
-        }
-      });
-    },
   };
 
 </script>

diff --git a/lib/cards/KCardGrid.vue b/lib/cards/KCardGrid.vue
@@ -4,7 +4,7 @@
     class="k-card-grid"
     :style="gridStyle"
   >
-    <!-- @slot Slot for `KCard`s -->
+    <!-- @slot Slot for `KCardGridItem`s -->
     <slot></slot>
   </ul>
 
@@ -33,7 +33,7 @@
 
       const gridStyle = ref({});
       // grid-related card style to be injected from `KCard`
-      const cardStyle = ref({});
+      const gridItemStyle = ref({});
 
       watch(
         currentLevelConfig,
@@ -44,7 +44,7 @@
             'column-gap': columnGap,
             'row-gap': rowGap,
           };
-          cardStyle.value = {
+          gridItemStyle.value = {
             // remove all column gaps widths from the available width and then divide by the number of columns to get the card/column width
             'flex-basis': `calc((100% - ${columns - 1} * ${columnGap}) / ${columns})`,
             height: rowHeight,
@@ -55,8 +55,8 @@
         }
       );
 
-      // provide to `KCard`
-      provide('cardGridStyle', cardStyle);
+      // provide to `KCardGridItem`
+      provide('gridItemStyle', gridItemStyle);
 
       return {
         gridStyle,

diff --git a/lib/cards/KCardGridItem.vue b/lib/cards/KCardGridItem.vue
@@ -0,0 +1,52 @@
+<template>
+
+  <li
+    class="k-card-grid-item"
+    :class="{ 'with-checkbox': $slots.checkbox }"
+    :style="gridItemStyle"
+  >
+    <!-- @slot Optional slot for `KCheckbox` -->
+    <div v-if="$slots.checkbox" class="checkbox">
+      <slot name="checkbox"></slot>
+    </div>
+    <!-- @slot Slot for `KCard`s -->
+    <slot></slot>
+  </li>
+
+</template>
+
+
+<script>
+
+  import { inject } from '@vue/composition-api';
+
+  export default {
+    name: 'KCardGridItem',
+    setup() {
+      // provided by `KCardGrid`
+      const gridItemStyle = inject('gridItemStyle');
+
+      return {
+        gridItemStyle,
+      };
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .k-card-grid-item {
+    &.with-checkbox {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  .checkbox {
+    margin-right: 20px;
+  }
+
+</style>