From e01c6c21bfcbf15dfdd60e7a7320f863c1c9240f Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 29 Oct 2021 15:31:16 -0400
Subject: [PATCH] Remove ContentCard components and sub components as it is no
 longer being used

---
 .../src/views/ContentCard/CardThumbnail.vue   | 235 ------------------
 .../assets/src/views/ContentCard/card.scss    |   7 -
 .../assets/src/views/ContentCard/index.vue    | 235 ------------------
 3 files changed, 477 deletions(-)
 delete mode 100644 kolibri/plugins/learn/assets/src/views/ContentCard/CardThumbnail.vue
 delete mode 100644 kolibri/plugins/learn/assets/src/views/ContentCard/card.scss
 delete mode 100644 kolibri/plugins/learn/assets/src/views/ContentCard/index.vue

diff --git a/kolibri/plugins/learn/assets/src/views/ContentCard/CardThumbnail.vue b/kolibri/plugins/learn/assets/src/views/ContentCard/CardThumbnail.vue
deleted file mode 100644
index 81090d42061..00000000000
--- a/kolibri/plugins/learn/assets/src/views/ContentCard/CardThumbnail.vue
+++ /dev/null
@@ -1,235 +0,0 @@
-<template>
-
-  <div
-    class="card-thumbnail-wrapper"
-    :class="{ 'mobile-thumbnail': isMobile }"
-    :style="thumbnailBackground"
-  >
-
-    <ContentIcon
-      v-if="!thumbnail"
-      :kind="kind"
-      class="type-icon"
-      :color="$themeTokens.annotation"
-    />
-
-    <ProgressIcon
-      v-if="progress > 0"
-      class="progress-icon"
-      :progress="progress"
-    />
-
-    <div
-      v-if="showContentIcon"
-      class="content-icon-wrapper"
-    >
-      <svg
-        height="64"
-        width="64"
-        viewBox="0 0 64 64"
-        class="content-icon-bg"
-        :style="contentIconBgColor"
-      >
-        <polygon
-          stroke-width="0"
-          :points="contentIconBgCoords"
-        />
-      </svg>
-      <ContentIcon
-        :kind="kind"
-        :showTooltip="true"
-        class="content-icon"
-        :color="$themeTokens.textInverted"
-      />
-    </div>
-
-    <div
-      v-if="progress !== undefined && progress !== 0"
-      class="progress-bar-wrapper"
-      :style="{ backgroundColor: $themePalette.grey.v_200 }"
-    >
-      <div
-        class="progress-bar"
-        :style="{
-          width: `${progress * 100}%`,
-          backgroundColor: isMastered ?
-            $themeTokens.mastered : (isInProgress ? $themeTokens.progress : ''),
-        }"
-      >
-      </div>
-    </div>
-
-  </div>
-
-</template>
-
-
-<script>
-
-  import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
-  import ProgressIcon from 'kolibri.coreVue.components.ProgressIcon';
-  import { validateContentNodeKind } from 'kolibri.utils.validators';
-  import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
-
-  export default {
-    name: 'CardThumbnail',
-    components: {
-      ContentIcon,
-      ProgressIcon,
-    },
-    props: {
-      thumbnail: {
-        type: String,
-        default: null,
-      },
-      kind: {
-        type: String,
-        required: true,
-        validator: validateContentNodeKind,
-      },
-      // If true, shows the content icon on the upper left of the thumbnail
-      showContentIcon: {
-        type: Boolean,
-        default: true,
-      },
-      progress: {
-        type: Number,
-        required: false,
-        default: 0.0,
-        validator(value) {
-          return value >= 0.0 && value <= 1.0;
-        },
-      },
-      isMobile: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    computed: {
-      isMastered() {
-        return this.progress === 1;
-      },
-      isInProgress() {
-        return this.progress > 0 && this.progress < 1;
-      },
-      thumbnailBackground() {
-        return {
-          backgroundColor: this.$themeTokens.surface,
-          backgroundImage: this.thumbnail ? `url('${this.thumbnail}')` : '',
-        };
-      },
-      contentIconBgCoords() {
-        const topLeft = '0,0';
-        const topRight = '64,0';
-        const bottomLeft = '0,64';
-        const bottomRight = '64,64';
-        if (this.isRtl) {
-          return `${topLeft} ${topRight} ${bottomRight}`;
-        }
-        return `${topLeft} ${topRight} ${bottomLeft}`;
-      },
-      contentIconBgColor() {
-        switch (this.kind) {
-          case ContentNodeKinds.EXERCISE:
-            return { fill: this.$themeTokens.exercise };
-          case ContentNodeKinds.VIDEO:
-            return { fill: this.$themeTokens.video };
-          case ContentNodeKinds.AUDIO:
-            return { fill: this.$themeTokens.audio };
-          case ContentNodeKinds.DOCUMENT:
-            return { fill: this.$themeTokens.document };
-          case ContentNodeKinds.HTML5:
-            return { fill: this.$themeTokens.html5 };
-          case ContentNodeKinds.SLIDESHOW:
-            return { fill: this.$themeTokens.slideshow };
-          default:
-            return { fill: this.$themeTokens.topic };
-        }
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  @import './card';
-
-  .card-thumbnail-wrapper {
-    position: relative;
-    width: $thumb-width-desktop;
-    height: $thumb-height-desktop;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    // Add an extra border to contain the progress bar and not have it overlap the image
-    border-bottom: solid transparent 5px;
-  }
-
-  .type-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(3);
-  }
-
-  .progress-icon {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-  }
-
-  .content-icon-wrapper {
-    position: absolute;
-    width: 56px;
-    height: 56px;
-  }
-
-  .content-icon {
-    position: absolute;
-    font-size: 20px;
-    transform: translate(25%, 0);
-  }
-
-  .content-icon-bg {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    fill-opacity: 0.9;
-  }
-
-  .progress-bar-wrapper {
-    position: absolute;
-    bottom: -5px;
-    width: 100%;
-    height: 5px;
-    opacity: 0.9;
-  }
-
-  .progress-bar {
-    height: 100%;
-  }
-
-  /* MOBILE OVERRIDES */
-  .mobile-thumbnail.card-thumbnail-wrapper {
-    width: $thumb-width-mobile;
-    height: $thumb-height-mobile;
-  }
-
-  .mobile-thumbnail {
-    .type-icon {
-      transform: translate(-50%, -50%) scale(2);
-    }
-
-    .content-icon-wrapper {
-      width: 48px;
-      height: 48px;
-    }
-
-    .content-icon {
-      font-size: 18px;
-    }
-  }
-
-</style>
diff --git a/kolibri/plugins/learn/assets/src/views/ContentCard/card.scss b/kolibri/plugins/learn/assets/src/views/ContentCard/card.scss
deleted file mode 100644
index 1a58a228f28..00000000000
--- a/kolibri/plugins/learn/assets/src/views/ContentCard/card.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$ratio: 16 / 9;
-
-$thumb-width-desktop: 210px;
-$thumb-height-desktop: round($thumb-width-desktop / $ratio);
-
-$thumb-height-mobile: 92px;
-$thumb-width-mobile: round($thumb-height-mobile * $ratio);
diff --git a/kolibri/plugins/learn/assets/src/views/ContentCard/index.vue b/kolibri/plugins/learn/assets/src/views/ContentCard/index.vue
deleted file mode 100644
index 3e8d86ab340..00000000000
--- a/kolibri/plugins/learn/assets/src/views/ContentCard/index.vue
+++ /dev/null
@@ -1,235 +0,0 @@
-<template>
-
-  <router-link
-    :to="link"
-    class="card"
-    :class="[
-      { 'mobile-card': isMobile },
-      $computedClass({ ':focus': $coreOutline })
-    ]"
-    :style="{ backgroundColor: $themeTokens.surface }"
-  >
-    <CardThumbnail
-      class="thumbnail"
-      v-bind="{ thumbnail, progress, kind, isMobile, showContentIcon }"
-    />
-    <div class="text" :style="{ color: $themeTokens.text }">
-      <h3 class="title" dir="auto">
-        <TextTruncator
-          :text="title"
-          :maxHeight="maxTitleHeight"
-        />
-      </h3>
-      <p
-        v-if="subtitle"
-        dir="auto"
-        class="subtitle"
-        :class="{ 'no-footer': !hasFooter }"
-      >
-        {{ subtitle }}
-      </p>
-      <div class="footer">
-        <CoachContentLabel
-          v-if="isUserLoggedIn && !isLearner"
-          class="coach-content-label"
-          :value="numCoachContents"
-          :isTopic="isTopic"
-        />
-        <KButton
-          v-if="copiesCount > 1"
-          appearance="basic-link"
-          class="copies"
-          :text="$tr('copies', { num: copiesCount })"
-          @click.prevent="$emit('openCopiesModal', contentId)"
-        />
-      </div>
-    </div>
-  </router-link>
-
-</template>
-
-
-<script>
-
-  import { mapGetters } from 'vuex';
-  import { validateLinkObject, validateContentNodeKind } from 'kolibri.utils.validators';
-  import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
-  import TextTruncator from 'kolibri.coreVue.components.TextTruncator';
-  import CardThumbnail from './CardThumbnail';
-
-  export default {
-    name: 'ContentCard',
-    components: {
-      CardThumbnail,
-      CoachContentLabel,
-      TextTruncator,
-    },
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      thumbnail: {
-        type: String,
-        default: null,
-      },
-      kind: {
-        type: String,
-        required: true,
-        validator: validateContentNodeKind,
-      },
-      isLeaf: {
-        type: Boolean,
-        required: true,
-      },
-      showContentIcon: {
-        type: Boolean,
-        default: true,
-      },
-      // ContentNode.coach_content will be `0` if not a coach content leaf node,
-      // or a topic without coach content. It will be a positive integer if a topic
-      // with coach content, and `1` if a coach content leaf node.
-      numCoachContents: {
-        type: Number,
-        default: 0,
-      },
-      progress: {
-        type: Number,
-        required: false,
-        default: 0.0,
-        validator(value) {
-          return value >= 0.0 && value <= 1.0;
-        },
-      },
-      link: {
-        type: Object,
-        required: true,
-        validator: validateLinkObject,
-      },
-      isMobile: {
-        type: Boolean,
-        default: false,
-      },
-      contentId: {
-        type: String,
-        default: null,
-      },
-      copiesCount: {
-        type: Number,
-        default: null,
-      },
-    },
-    computed: {
-      ...mapGetters(['isLearner', 'isUserLoggedIn']),
-      isTopic() {
-        return !this.isLeaf;
-      },
-      maxTitleHeight() {
-        if (this.hasFooter && this.subtitle) {
-          return 20;
-        } else if (this.hasFooter || this.subtitle) {
-          return 40;
-        }
-        return 60;
-      },
-      hasFooter() {
-        return this.numCoachContents > 0 || this.copiesCount > 1;
-      },
-    },
-    $trs: {
-      copies: '{ num, number} locations',
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  @import '~kolibri-design-system/lib/styles/definitions';
-  @import './card';
-
-  $margin: 16px;
-
-  .coach-content-label {
-    display: inline-block;
-  }
-
-  .card {
-    @extend %dropshadow-1dp;
-
-    display: inline-block;
-    width: $thumb-width-desktop;
-    text-decoration: none;
-    vertical-align: top;
-    border-radius: 2px;
-    transition: box-shadow $core-time ease;
-    &:hover {
-      @extend %dropshadow-8dp;
-    }
-    &:focus {
-      outline-width: 4px;
-      outline-offset: 6px;
-    }
-  }
-
-  .text {
-    position: relative;
-    height: 92px;
-    padding: $margin;
-  }
-
-  .title,
-  .subtitle {
-    margin: 0;
-  }
-
-  .subtitle {
-    position: absolute;
-    top: 38px;
-    right: $margin;
-    left: $margin;
-    overflow: hidden;
-    font-size: 14px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .footer {
-    position: absolute;
-    right: $margin;
-    bottom: $margin;
-    left: $margin;
-    font-size: 12px;
-  }
-
-  .subtitle.no-footer {
-    top: unset;
-    bottom: $margin;
-  }
-
-  .copies {
-    display: inline-block;
-    float: right;
-  }
-
-  .mobile-card.card {
-    width: 100%;
-    height: 450px;
-  }
-
-  .mobile-card {
-    .thumbnail {
-      position: absolute;
-    }
-    .description {
-      padding: 8px;
-      margin-top: $thumb-height-mobile;
-    }
-    .title {
-      margin-left: 16px;
-      text-decoration: none;
-    }
-  }
-
-</style>