Welcoming kcard to studio

contentcuration/contentcuration/frontend/channelList/views/KCard/BaseCard.vue

@@ -0,0 +1,104 @@
+<template>
+  <button>
+    <div
+      class="card"
+      tabindex="0"
+      @focus="cardFocus"
+      @hover="cardHover"
+    >
+      <li class="remove-list-style">
+        <component
+          :is="headerLevel"
+        >
+          <KRouterLink
+            :to="to"
+          >
+            <KTextTruncator
+              v-if="title !== null"
+              :text="title"
+              :maxLines="titleLines"
+              class="spacing"
+            />
+          </KRouterLink>
+        </component>
+      </li>
+
+      <slot></slot>
+    </div>
+  </button>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'BaseCard',
+    props: {
+      title: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      headingLevel: {
+        type: Number,
+        required: true,
+      },
+      to: {
+        type: Object,
+        required: true,
+      },
+      titleLines:{
+        type:Number,
+        required:true,
+        default:2
+      },
+    },
+    computed:{
+      headerLevel(){
+        return 'h' + this.headingLevel;
+      },
+    },
+    methods: {
+      cardFocus(e) {
+        this.$emit('focus', e);
+      },
+      cardHover(e) {
+        this.$emit('hover', e);
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss">
+
+  @import './definitions';
+
+  .card {
+    @extend %dropshadow-2dp;
+
+    position: relative;
+    display: block;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: 0.5em;
+    transition: border-color $core-time ease;
+    outline-offset: -1px; 
+
+    &:hover,
+    &:focus{
+      @extend %dropshadow-8dp;
+    }
+  }
+
+  .remove-list-style {
+    list-style-type: none;
+  }
+  .spacing{
+    padding: 1em;
+  }
+
+</style>

contentcuration/contentcuration/frontend/channelList/views/KCard/__test__/KCard.spec.js

@@ -0,0 +1,81 @@
+import { createLocalVue, mount } from "@vue/test-utils";
+import VueRouter from "vue-router";
+import KCard from './../index.vue';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('index.vue', () => {
+
+  const cardFocusMock = jest.fn();
+
+  // beforeEach(() => {
+    const wrapper = mount(KCard, {
+      localVue,
+      router,
+      propsData: {
+        title: 'Sample Title',
+        headingLevel: 4,
+        to: { path: '/some-link' },
+        layout: 'horizontal',
+        thumbnailDisplay: 'small',
+        thumbnailSrc: 'https://example.com/image.jpg',
+      },
+      slots: {
+        'aboveTitle': '<p>This is the default content</p>',
+        'title': '<li>This is the default title</li>',
+        'belowTitle': '<i>This is the default description</i>',
+        'footer': '<b>This is the default footer</b>',
+      },
+      mocks: {
+        cardFocus: cardFocusMock, 
+      },
+    });
+  // });
+
+
+
+  it('renders passed header level', () => {
+    expect(wrapper.find('h4').exists()).toBe(true);
+  });
+
+  //testing focus and hover events
+  it('renders data on focus', () => {
+    let emittedData;
+    wrapper.vm.$on('focus',(data) => {
+      emittedData = data;
+    });
+
+    expect(emittedData).toBeUndefined();
+  });
+
+  it('emits data on hover', () => {
+    let hoverData;
+    wrapper.vm.$on('hover',(data) => {
+      hoverData = data;
+    });
+
+    expect(hoverData).toBeUndefined();
+  });
+
+  //testing slots
+  it('renders slotted content', () => {
+    expect(wrapper.find('[slot="aboveTitle"]').exists()).toBe(false);
+    expect(wrapper.find('[slot="title"]').exists()).toBe(false);
+    expect(wrapper.find('[slot="belowTitle"]').exists()).toBe(false);
+
+    expect(wrapper.find('p').text()).toEqual('This is the default content');
+    expect(wrapper.find('li').text()).toEqual('Sample Title');
+    expect(wrapper.find('i').text()).toEqual('This is the default description');
+    expect(wrapper.find('b').text()).toEqual('This is the default footer');
+  });
+
+
+
+  //testing image prop
+  it('renders image', () => {
+    expect(wrapper.find('img').exists()).toBe(true);
+    expect(wrapper.find('img').attributes('src')).toBe('https://example.com/image.jpg');
+  });
+});

contentcuration/contentcuration/frontend/channelList/views/KCard/definitions.scss

@@ -0,0 +1,157 @@
+$radius: 4px;
+$core-time: 0.25s;
+
+// Use this mixin in select containers where the content is likely going to be
+// very large and mobile users may benefit from a smooth touch scroll experience.
+%momentum-scroll {
+  -webkit-overflow-scrolling: touch;
+}
+
+/*
+  Use of this mixin can help prompt the browser to use the GPU for certain DOM elements.
+  This can help with certain CSS animations and other transitions.
+
+  For details, see https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
+*/
+%enable-gpu-acceleration {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 10000px;
+}
+
+// Accelerate and decelerate easing functions from
+// from https://material.io/design/motion/speed.html#easing.
+%md-standard-func {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+%md-accelerate-func {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+%md-decelerate-func {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+/*
+  Mixin for font-family to ensure that the full fonts are not referenced until they've
+  been loaded using the FontFaceObserver in Kolibri's setupAndLoadFonts.js file.
+
+  Even though partials are loaded immediately, we need the 'partial-fonts-loaded' class
+  for CSS specificity purposes.
+
+  TODO:
+  Add support for standard online-based loading mechanisms, such as would be used
+  in Studio. In particular, this would need to be swapped out for the Google font API:
+  https://developers.google.com/fonts/docs/getting_started
+*/
+@mixin font-family-noto {
+  .partial-fonts-loaded & {
+    font-family: 'noto-subset', 'noto-common', sans-serif;
+  }
+  .full-fonts-loaded & {
+    // Continue to include the common and subset font subsets since they may contain
+    // glyphs not available in the language's default font.
+    font-family: 'noto-full', 'noto-subset', 'noto-common', sans-serif;
+  }
+}
+
+// dropshadows from Angular Material via https://stackoverflow.com/a/39199702
+
+%dropshadow-1dp {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 2px 1px -1px rgba(0, 0, 0, 0.12);
+}
+
+%dropshadow-2dp {
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-3dp {
+  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+    0 3px 3px -2px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-4dp {
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+%dropshadow-5dp {
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
+    0 1px 14px 0 rgba(0, 0, 0, 0.12);
+}
+%dropshadow-6dp {
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
+    0 1px 18px 0 rgba(0, 0, 0, 0.12);
+}
+%dropshadow-7dp {
+  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
+    0 2px 16px 1px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-8dp {
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-9dp {
+  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
+    0 3px 16px 2px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-10dp {
+  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
+    0 4px 18px 3px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-11dp {
+  box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
+    0 4px 20px 3px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-12dp {
+  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
+    0 5px 22px 4px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-13dp {
+  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
+    0 5px 24px 4px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-14dp {
+  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
+    0 5px 26px 4px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-15dp {
+  box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
+    0 6px 28px 5px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-16dp {
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+    0 6px 30px 5px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-17dp {
+  box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
+    0 6px 32px 5px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-18dp {
+  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
+    0 7px 34px 6px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-19dp {
+  box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
+    0 7px 36px 6px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-20dp {
+  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
+    0 8px 38px 7px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-21dp {
+  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
+    0 8px 40px 7px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-22dp {
+  box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
+    0 8px 42px 7px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-23dp {
+  box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
+    0 9px 44px 8px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-24dp {
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+    0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}