@asd20/ui 3.2.963 → 3.2.965

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.963",
+  "version": "3.2.965",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -24,7 +24,7 @@
     "release": "release-it"
   },
   "peerDependencies": {
-    "vue": "^2.6.11"
+    "vue": "^2.6.14"
   },
   "dependencies": {
     "axios": "^0.19.2",
@@ -38,7 +38,6 @@
     "swiper": "^5.4.5",
     "uuid": "^3.3.2",
     "v-scroll-lock": "^1.3.1",
-    "vue-ctk-date-time-picker": "^2.1.1",
     "vue-intersect": "^1.1.6",
     "vue-lazyload": "^1.2.6",
     "vue-mq": "^1.0.1",
@@ -47,9 +46,6 @@
     "vue-promised": "^1.0.0",
     "vue-recaptcha": "^1.2.0",
     "vue-resize": "^0.4.5",
-    "vue-tour": "^1.1.0",
-    "vuejs-datepicker": "^1.5.4",
-    "vuejs-timepicker": "^0.1.4",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
@@ -83,10 +79,10 @@
     "jest-image-snapshot": "^2.5.0",
     "lint-staged": "^8.1.0",
     "lodash": "^4.17.15",
-    "sass": "^1.67.0",
     "puppeteer": "^1.9.0",
     "react": "^16.8.3",
     "release-it": "^10.2.0",
+    "sass": "^1.67.0",
     "sass-loader": "^7.1.0",
     "storybook-addon-vue-info": "^1.4.1",
     "stylelint": "^9.10.1",
@@ -94,12 +90,13 @@
     "stylelint-config-prettier": "^5.0.0",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-scss": "^3.5.4",
+    "vue": "2.6.14",
     "vue-class-component": "^7.0.2",
     "vue-docgen-api": "^3.26.0",
     "vue-loader": "^15.8.3",
     "vue-router": "^3.1.4",
     "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.11",
+    "vue-template-compiler": "2.6.14",
     "vuex-pathify": "^1.1.3"
   },
   "gitHooks": {},

package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue

@@ -13,21 +13,23 @@
       v-if="imageUrl && !$slots.aside"
       class="asd20-school-homepage-video-header__image"
     >
-      <video
-        v-if="videoUrl"
-        ref="backgroundVideo"
-        class="background-video"
-        role="presentation"
-        aria-hidden="true"
-        autoplay
-        loop
-        autobuffer
-        muted
-        playsinline
-        :poster="imageUrl"
-      >
-        <source :src="videoUrl" type="video/mp4" />
-      </video>
+      <client-only>
+        <video
+          v-if="showVideo"
+          ref="backgroundVideo"
+          class="background-video"
+          role="presentation"
+          aria-hidden="true"
+          autoplay
+          loop
+          autobuffer
+          muted
+          playsinline
+          :poster="imageUrl"
+        >
+          <source :src="videoUrl" type="video/mp4" />
+        </video>
+      </client-only>
       <button
         v-if="videoUrl"
         class="video-toggle-btn"
@@ -128,6 +130,10 @@ export default {
         this.detailLink.split('/').pop()
       )
     },
+    showVideo() {
+      const isMobile = this.mq === 'xs' || this.mq === 'sm'
+      return !isMobile && this.videoUrl
+    },
   },
   methods: {
     toggleVideo() {

package/src/components/organisms/Asd20VideoHeader/index.vue

@@ -9,21 +9,24 @@
       <slot name="top" />
     </div>
 
-    <video
-      v-if="videoUrl"
-      ref="backgroundVideo"
-      class="background-video"
-      role="presentation"
-      aria-hidden="true"
-      autoplay
-      loop
-      autobuffer
-      muted
-      playsinline
-      :poster="imageUrl"
-    >
-      <source :src="videoUrl" type="video/mp4" />
-    </video>
+    <client-only>
+      <video
+        v-if="showVideo"
+        preload="none"
+        ref="backgroundVideo"
+        class="background-video"
+        role="presentation"
+        aria-hidden="true"
+        autoplay
+        loop
+        autobuffer
+        muted
+        playsinline
+        :poster="imageUrl"
+      >
+        <source :src="videoUrl" type="video/mp4" />
+      </video>
+    </client-only>
     <button
       v-if="videoUrl"
       class="video-toggle-btn"
@@ -89,6 +92,10 @@ export default {
         this.detailLink.split('/').pop()
       )
     },
+    showVideo() {
+      const isMobile = this.mq === 'xs' || this.mq === 'sm'
+      return !isMobile && this.videoUrl
+    },
   },
   methods: {
     toggleVideo() {

package/src/components/templates/Asd20ArticleDigestTemplate/index.vue

@@ -88,7 +88,6 @@
           />
           <asd20-multiselect-input
             label="Categories"
-            aria-label="Categories"
             :taggable="false"
             :value="selectedCategories"
             :items="categoryOptions"

package/src/components/templates/Asd20ArticleListTemplate/index.vue

@@ -99,7 +99,6 @@
             />
             <asd20-multiselect-input
               label="Categories"
-              aria-label="Categories"
               :taggable="false"
               :value="selectedCategories"
               :items="categoryOptions"

package/src/components/molecules/Asd20DateInput/index.stories.js

@@ -1,21 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import Asd20DateInput from '.'
-
-const info = {
-  summary: 'Asd20DateInput',
-}
-const wrapper = {
-  components: { Asd20DateInput },
-  data: () => ({
-    date: '',
-  }),
-}
-
-storiesOf('Molecules - Asd20DateInput', module).add(
-  'Default',
-  () => ({
-    ...wrapper,
-    template: `<Asd20DateInput label="Date" v-model="date" />`,
-  }),
-  { info }
-)

package/src/components/molecules/Asd20DateInput/index.vue

@@ -1,160 +0,0 @@
-<template>
-  <div class="asd20-date-input" :class="classes">
-    <label v-if="label" :for="computedId">{{ label }}</label>
-    <div class="input-wrapper">
-      <slot name="prefix" />
-      <Asd20Icon v-if="icon" :name="icon" :size="iconSize" />
-
-      <datepicker
-        :id="computedId"
-        :value="today"
-        type="date"
-        v-bind="$attrs"
-        v-on="listeners"
-        @input="input"
-        :aria-label="hideLabel ? label : ''"
-        format="dd MMM yyyy"
-      />
-
-      <slot name="suffix" />
-    </div>
-    <div
-      class="asd20-text-input__help-text"
-      v-if="helpText"
-      v-html="helpText"
-    />
-    <div
-      class="asd20-text-input__validation-error"
-      v-for="(v, index) in validationErrors"
-      :key="index"
-      v-html="v"
-    />
-  </div>
-</template>
-
-<script>
-import inputComponentMixin from '../../../mixins/inputComponentMixin'
-import Asd20Icon from '../../atoms/Asd20Icon'
-import Datepicker from 'vuejs-datepicker'
-
-export default {
-  name: 'Asd20DateInput',
-  inheritAttrs: false,
-  mixins: [inputComponentMixin],
-  components: { Asd20Icon, Datepicker },
-  methods: {
-    input(value) {
-      this.isDirty = true
-      this.validate(value)
-      this.$emit('input', value)
-    },
-  },
-  data: () => {
-    return {
-      today: new Date(),
-    }
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../design/_mixins.scss';
-@import '../../../design/_variables.scss';
-
-$input-focus-color: var(--color__accent-t50);
-
-.asd20-date-input {
-  position: relative;
-  align-items: center;
-  width: 100%;
-  margin: 0 0 space(0.5) 0;
-
-  label {
-    position: relative;
-    display: block;
-    width: 100%;
-    color: var(--website-card__reverse-background-color);
-    margin-bottom: space(0.125);
-  }
-
-  input {
-    -webkit-appearance: none !important;
-    box-sizing: border-box;
-    flex-grow: 1;
-    width: inherit;
-    height: space(1.5);
-    margin: 0;
-    color: var(--website-card__reverse-background-color);
-    border: 2px solid var(--color__accent);
-    border-radius: 0;
-    font-size: 1rem;
-    line-height: 1;
-    padding: space(0.25) space(0.25);
-    background: white;
-    transition: background asd20-speed(1) ease;
-    &:not(:first-child) {
-      margin-left: space(0.5);
-    }
-    &:not(:last-child) {
-      margin-right: space(0.5);
-    }
-
-    &::-webkit-search-decoration {
-      -webkit-appearance: none !important;
-    }
-
-    &:focus {
-      // outline: none;
-      box-shadow: 0 0 0 5px $input-focus-color inset;
-    }
-
-    &::-webkit-input-placeholder {
-      opacity: 1;
-      color: var(--color__secondary-t50);
-      font-size: space(0.75);
-    }
-    &::-moz-placeholder {
-      opacity: 1;
-      color: var(--color__primary-t50);
-    }
-    &:-ms-input-placeholder {
-      opacity: 1;
-      color: var(--color__primary-t50);
-    }
-    &:-moz-placeholder {
-      opacity: 1;
-      color: var(--color__primary-t50);
-    }
-  }
-
-  &__help-text {
-    color: var(--website-card__reverse-background-color);
-    font-size: 0.75rem;
-    margin-top: space(0.125);
-  }
-
-  &__validation-error {
-    color: var(--color__danger-s20);
-    font-size: 0.75rem;
-    margin-top: space(0.125);
-  }
-
-  &--has-errors {
-    label {
-      color: var(--color__danger-s20);
-    }
-    input {
-      border-color: var(--color__danger);
-      &:focus {
-        box-shadow: 0 0 0 5px var(--color__danger) inset;
-      }
-    }
-  }
-}
-
-.input-wrapper {
-  display: flex;
-  width: 100%;
-  align-items: stretch;
-}
-</style>

package/src/components/molecules/Asd20DateTimeInput/index.stories.js

@@ -1,38 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import Asd20DateTimeInput from '.'
-
-const info = {
-  summary: 'Asd20DateTimeInput',
-}
-const wrapper = {
-  components: { Asd20DateTimeInput },
-  data: () => ({
-    dateTime: '',
-  }),
-}
-
-storiesOf('Molecules - Asd20DateTimeInput', module)
-  .add(
-    'Default',
-    () => ({
-      ...wrapper,
-      template: `<Asd20DateTimeInput label="Label" v-model="dateTime" />`,
-    }),
-    { info }
-  )
-  .add(
-    'Time Only',
-    () => ({
-      ...wrapper,
-      template: `<Asd20DateTimeInput timeOnly v-model="dateTime" hint="Select a time"/>`,
-    }),
-    { info }
-  )
-  .add(
-    'Date Only',
-    () => ({
-      ...wrapper,
-      template: `<Asd20DateTimeInput dateOnly v-model="dateTime" />`,
-    }),
-    { info }
-  )

package/src/components/molecules/Asd20DateTimeInput/index.vue

@@ -1,193 +0,0 @@
-<template>
-  <div class="asd20-time-input" :class="classes">
-    <label v-if="label" :for="computedId">{{ label }}</label>
-    <div class="input-wrapper">
-      <slot name="prefix" />
-      <Asd20Icon v-if="icon" :name="icon" :size="iconSize" />
-
-      <VueCtkDateTimePicker
-        v-bind="$attrs"
-        :value="value"
-        :aria-label="hideLabel ? label : ''"
-        v-on="listeners"
-        @input="input"
-        color="#0e2c6c"
-        button-color="#0e2c6c"
-        :only-date="dateOnly"
-        :only-time="timeOnly"
-        :no-label="true"
-        no-header
-        label
-      />
-      <slot name="suffix" />
-    </div>
-    <div
-      class="asd20-text-input__help-text"
-      v-if="helpText"
-      v-html="helpText"
-    />
-    <div
-      class="asd20-text-input__validation-error"
-      v-for="(v, index) in validationErrors"
-      :key="index"
-      v-html="v"
-    />
-  </div>
-</template>
-
-<script>
-import inputComponentMixin from '../../../mixins/inputComponentMixin'
-import VueCtkDateTimePicker from 'vue-ctk-date-time-picker'
-import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css'
-import { parse } from 'date-fns'
-
-export default {
-  components: { VueCtkDateTimePicker },
-  name: 'Asd20DateTimeInput',
-  mixins: [inputComponentMixin],
-  inheritAttrs: false,
-  methods: {
-    input(value) {
-      this.isDirty = true
-      this.validate(value)
-      this.$emit('input', parse(value).toISOString())
-    },
-  },
-  props: {
-    timeOnly: { type: Boolean, default: false },
-    dateOnly: { type: Boolean, default: false },
-    hint: { type: String, default: 'Select a date and time' },
-  },
-  computed: {},
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../design/_mixins.scss';
-@import '../../../design/_variables.scss';
-$input-focus-color: var(--color__accent-t50);
-.asd20-time-input {
-  position: relative;
-  align-items: center;
-  width: 100%;
-  margin: 0 0 space(0.5) 0;
-
-  label {
-    position: relative;
-    display: block;
-    width: 100%;
-    color: var(--website-card__reverse-background-color);
-    margin-bottom: space(0.125);
-  }
-  .field-input {
-    border: 2px solid var(--color__accent);
-    border-radius: 0;
-    padding-top: 0;
-    font-size: 1rem;
-  }
-  .field.has-value:not(.no-label) .field-input {
-    padding-top: 6px;
-  }
-  .custom-button.round {
-    margin-right: 5px;
-  }
-  .date-time-picker .datepicker {
-    border-radius: 0;
-  }
-  // button.datepicker
-  .datepicker-container .datepicker-days .datepicker-day-effect,
-  .time-picker-column-item-effect,
-  .custom-button .custom-button-effect {
-    border-radius: 0;
-  }
-
-  // .datepicker-container {
-  //   width: auto;
-  // }
-
-  input {
-    -webkit-appearance: none !important;
-    box-sizing: border-box;
-    flex-grow: 1;
-    width: inherit;
-    height: space(1.5);
-    margin: 0;
-    color: var(--website-card__reverse-background-color);
-    border: 2px solid var(--color__accent);
-    border-radius: 0;
-    font-size: 1rem;
-    line-height: 1;
-    padding: space(0.25) space(0.25);
-    background: white;
-    transition: background asd20-speed(1) ease;
-    &:not(:first-child) {
-      margin-left: space(0.5);
-    }
-    &:not(:last-child) {
-      margin-right: space(0.5);
-    }
-
-    &::-webkit-search-decoration {
-      -webkit-appearance: none !important;
-    }
-
-    &:focus {
-      // outline: none;
-      box-shadow: 0 0 0 5px $input-focus-color inset;
-    }
-
-    &::-webkit-input-placeholder {
-      opacity: 1;
-      color: var(--color__secondary-t50);
-      font-size: space(0.75);
-    }
-    &::-moz-placeholder {
-      opacity: 1;
-      color: var(--color__primary-t50);
-    }
-    &:-ms-input-placeholder {
-      opacity: 1;
-      color: var(--color__primary-t50);
-    }
-    &:-moz-placeholder {
-      opacity: 1;
-      color: var(--color__primary-t50);
-    }
-  }
-
-  &__help-text {
-    color: var(--website-card__reverse-background-color);
-    font-size: 0.75rem;
-    margin-top: space(0.125);
-  }
-
-  &__validation-error {
-    color: var(--color__danger-s20);
-    font-size: 0.75rem;
-    margin-top: space(0.125);
-  }
-
-  &--has-errors {
-    label {
-      color: var(--color__danger-s20);
-    }
-    input {
-      border-color: var(--color__danger);
-      &:focus {
-        box-shadow: 0 0 0 5px var(--color__danger) inset;
-      }
-    }
-  }
-}
-
-.input-wrapper {
-  display: flex;
-  width: 100%;
-  align-items: stretch;
-}
-// @media (min-width: 600px) {
-//   .datepicker-container {
-//     width: 260px !important;
-//   }
-// }
-</style>

package/src/components/organisms/Asd20TourGuide/index.stories.js

@@ -1,68 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import Asd20TourGuide from '.'
-import Asd20Button from '../../atoms/Asd20Button'
-
-const info = {
-  summary: 'Asd20TourGuide',
-}
-
-const wrapper = {
-  components: { Asd20TourGuide, Asd20Button },
-  data: () => ({
-    steps: [
-      {
-        target: '#step1',
-        header: {
-          title: 'Step 1',
-        },
-        content: 'Sed posuere consectetur est at lobortis.',
-        params: {
-          placement: 'bottom',
-          highlight: true,
-        },
-      },
-      {
-        target: '#step2',
-        header: {
-          title: 'Step 2',
-        },
-        content:
-          'Maecenas sed diam eget risus varius blandit sit amet non magna.',
-        params: {
-          placement: 'top',
-          highlight: true,
-        },
-      },
-      {
-        target: '#step3',
-        header: {
-          title: 'Step 3',
-        },
-        content:
-          'Maecenas sed diam eget risus varius blandit sit amet non magna.',
-        params: {
-          placement: 'top',
-          highlight: true,
-        },
-      },
-    ],
-  }),
-}
-
-storiesOf('Organisms - Asd20TourGuide', module).add(
-  'Default',
-  () => ({
-    ...wrapper,
-    template: `<div>
-    <Asd20TourGuide name="tour" :steps="steps"></Asd20TourGuide>
-    <Asd20Button @click.native="$tours['tour'].start()" reversed label="Start Tour" />
-
-
-    <p style="background: #fdd; width: 100px; height: 100px; margin-left: 200px" id="step1">Target 1</p>
-    <p style="background: #9fd; width: 300px; height: 200px; margin-left: 300px; margin-top: 400px overflow: hidden;"><button id="step2">Target 2</button></p>
-    <p style="background: #9fd; width: 100px; height: 100px; margin-top: 800px" id="step3">Target 2</p>
-
-    </div>`,
-  }),
-  { info }
-)