@pocketprep/ui-kit 3.5.0 → 3.5.2

package/lib/components/Calendar/Calendar.vue

@@ -23,6 +23,9 @@
                 v-if="isShowingCalendar"
                 v-dark="isDarkMode"
                 class="uikit-calendar__clear-date-icon"
+                :class="{
+                    'uikit-calendar__clear-date-icon--no-label': !label,
+                }"
                 @click.stop.prevent="clearCalendar"
             >
                 <Tooltip
@@ -39,6 +42,7 @@
                 class="uikit-calendar__calendar-icon"
                 :class="{
                     'uikit-calendar__calendar-icon--active': !disabled && (hover || isShowingCalendar),
+                    'uikit-calendar__calendar-icon--no-label': !label,
                 }"
             >
                 <Icon type="calendarPicker" />
@@ -181,8 +185,8 @@ export default class Calendar extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-calendar {
     position: relative;
@@ -203,6 +207,10 @@ export default class Calendar extends Vue {
         color: $steel;
         outline: none;
 
+        &--no-label {
+            top: 8px;
+        }
+
         &--dark {
             color: $pewter;
         }
@@ -238,6 +246,10 @@ export default class Calendar extends Vue {
         color: $steel;
         outline: none;
 
+        &--no-label {
+            top: 8px;
+        }
+
         &--dark {
             color: $pewter;
         }

package/lib/components/Charts/Bar.vue

@@ -50,7 +50,7 @@ type TCustomHighcharts = typeof Highcharts & {
             prototype: Record<string, unknown>
         }
     }
-};
+}
 
 Accessibility(Highcharts);
 (function (H) {
@@ -286,7 +286,7 @@ export default class Bar extends Vue {
                 borderRadiusTopRight: 8,
             }
             chartOptions.yAxis = {
-                ...(chartOptions.yAxis || {}),
+                ...(chartOptions.yAxis  as Highcharts.YAxisOptions || {}),
                 labels: {
                     ...((chartOptions.yAxis as Highcharts.YAxisOptions)?.labels),
                     formatter: function () {
@@ -309,7 +309,7 @@ export default class Bar extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-bar {
     max-height: 100%;

package/lib/components/Charts/Pie.vue

@@ -25,8 +25,8 @@ export default class Pie extends Vue {
             chart: {
                 plotShadow: false,
                 type: 'pie',
-                margin: [ 0,0,0,0 ],
-                spacing: [ 0,0,0,0 ],
+                margin: [ 0, 0, 0, 0 ],
+                spacing: [ 0, 0, 0, 0 ],
             },
             title: undefined,
             tooltip: {
@@ -76,8 +76,8 @@ export default class Pie extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-pie {
     max-height: 100%;

package/lib/components/Controls/SegmentControl.vue

@@ -56,7 +56,8 @@ export default class SegmentControl extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use 'sass:color';
+@use '@/styles/colors' as *;
 
 .uikit-segment-control {
     position: relative;
@@ -64,8 +65,8 @@ export default class SegmentControl extends Vue {
     outline: none;
     cursor: pointer;
     border-radius: 4px;
-    border: 1px solid change-color($brand-blue, $alpha: 0.45);
-    color: change-color($brand-blue, $alpha: 0.45);
+    border: 1px solid color.change($brand-blue, $alpha: 0.45);
+    color: color.change($brand-blue, $alpha: 0.45);
     background-color: white;
     font-size: 12px;
     font-weight: 600;
@@ -104,15 +105,15 @@ export default class SegmentControl extends Vue {
 
         &:not(&--active) {
             &:hover {
-                background-color: change-color($sky-blue, $alpha: 0.45);
-                color: change-color($brand-blue, $alpha: 0.75);
+                background-color: color.change($sky-blue, $alpha: 0.45);
+                color: color.change($brand-blue, $alpha: 0.75);
 
                 &:first-child {
-                    box-shadow: 4px 0 0 0 change-color($sky-blue, $alpha: 0.45);
+                    box-shadow: 4px 0 0 0 color.change($sky-blue, $alpha: 0.45);
                 }
 
                 &:last-child {
-                    box-shadow: -4px 0 0 0 change-color($sky-blue, $alpha: 0.45);
+                    box-shadow: -4px 0 0 0 color.change($sky-blue, $alpha: 0.45);
                 }
             }
         }

package/lib/components/Controls/Slider.vue

@@ -89,7 +89,7 @@ export default class Slider extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-slider {
     display: flex;
@@ -197,7 +197,6 @@ export default class Slider extends Vue {
     &__slide-input {
         height: 29px;
         width: 100%;
-        -webkit-appearance: none;
         appearance: none;
         background: transparent;
 
@@ -267,7 +266,7 @@ export default class Slider extends Vue {
             box-sizing: border-box;
             background: $white;
             cursor: pointer;
-            -webkit-appearance: none;
+            appearance: none;
             position: relative;
             z-index: 1;
         }

package/lib/components/Controls/ToggleSwitch.vue

@@ -50,7 +50,8 @@ export default class ToggleSwitch extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use 'sass:color';
+@use '@/styles/colors' as *;
 
 .uikit-toggle-switch {
     background-color: $steel;
@@ -104,7 +105,7 @@ export default class ToggleSwitch extends Vue {
         background-color: $brand-blue;
 
         &:hover {
-            background-color: darken($brand-blue, 10%);
+            background-color: color.adjust($brand-blue, $lightness: -10%);
         }
 
         &--dark {

package/lib/components/EmptyStates/EmptyState.vue

@@ -48,6 +48,7 @@ import Blob from '../Blobs/Blob.vue'
 import { dark } from '../../directives'
 
 @Component({
+    name: 'EmptyState',
     components: {
         Icon,
         Blob,
@@ -117,8 +118,8 @@ export default class EmptyState extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-empty-state {
     text-align: center;

package/lib/components/Exams/ExamCard.vue

@@ -110,8 +110,8 @@ export default class ExamCard extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-exam-card {
     position: relative;
@@ -135,7 +135,7 @@ export default class ExamCard extends Vue {
         width: 340px;
     }
 
-    &:not(&--cancel):not(&--disable-interaction) {
+    &:not(&--cancel, &--disable-interaction) {
         cursor: pointer;
 
         &:hover,

package/lib/components/Exams/ExamMenuCard.vue

@@ -76,8 +76,8 @@ export default class ExamMenuCard extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-exam-menu-card {
     display: flex;

package/lib/components/Filters/FilterDropdown.vue

@@ -152,8 +152,8 @@ export default class FilterDropdown extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-filter {
     position: relative;

package/lib/components/Filters/FilterOptions.vue

@@ -200,8 +200,8 @@ export default class FilterOptions extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .filter-options {
     background: $white;

package/lib/components/Forms/Checkbox.vue

@@ -73,8 +73,8 @@ export default class Checkbox extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-checkbox {
     background: $white;

package/lib/components/Forms/CheckboxOption.vue

@@ -70,8 +70,8 @@ export default class CheckboxOption extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-checkbox-option {
     font-size: 15px;

package/lib/components/Forms/Errors.vue

@@ -55,8 +55,8 @@ export default class Errors extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-errors {
     border: 1px solid rgba($red-pegasus, 0.5);

package/lib/components/Forms/Input.vue

@@ -146,8 +146,8 @@ export default class Input extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-input {
     &__input {

package/lib/components/Forms/Radio.vue

@@ -35,7 +35,7 @@
                     'uikit-radio__item--has-helper-text': !!(item.helperText)
                 }"
                 role="radio"
-                :aria-checked="modelValue && item.value === modelValue.value"
+                :aria-checked="!!modelValue && item.value === modelValue.value"
                 :aria-label="`${item.label}${ item.helperText ? ` ${item.helperText}` : '' }`"
                 @click="!(disabled || item.disabled ) && selectItem(item)"
                 @keydown.enter.space="keyPressedItem"
@@ -66,59 +66,57 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
-import { dark } from '../../directives'
+<script setup lang="ts">
+import { ref } from 'vue'
+import { dark as vDark } from '../../directives'
 import RadioButton from './RadioButton.vue'
 
 interface IItem {
-    value: string
-    label: string
+    value: string | number
+    label?: string
     helperText?: string
     disabled?: boolean
 }
 
-@Component({
-    components: {
-        RadioButton,
-    },
-    directives: {
-        dark,
-    },
+const props = withDefaults(defineProps<{
+    label?: string
+    data: IItem[]
+    center?: boolean
+    modelValue: IItem | null
+    disabled?: boolean
+    isDarkMode?: boolean
+    labelledBy?: string | false
+}>(), {
+    label: '',
+    isDarkMode: false,
+    labelledBy: false,
 })
-export default class Radio extends Vue {
-    @Prop() label?: string
-    @Prop() data!: IItem[]
-    @Prop() center?: boolean
-    @Prop() modelValue!: IItem
-    @Prop() disabled?: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) labelledBy!: string | false
-    
-    uid = Math.floor(Math.random() * 1e9)
-    hover = false
-    focus = false
 
-    @Emit('update:modelValue')
-    selectItem (item: IItem) {
-        return item
-    }
+const emit = defineEmits<{
+    'update:modelValue': [ item: IItem ]
+}>()
 
-    keyPressedItem (e: KeyboardEvent) {
-        // select option on enter or space
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            const itemValue = (e.target as HTMLElement).getAttribute('data-value')
-            const item = this.data.find(i => String(i.value) === itemValue)
-            item && this.selectItem(item)
-        }
+const uid = Math.floor(Math.random() * 1e9)
+const hover = ref(false)
+
+const selectItem = (item: IItem) => {
+    emit('update:modelValue', item)
+}
+
+const keyPressedItem = (e: KeyboardEvent) => {
+    // select option on enter or space
+    if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        const itemValue = (e.target as HTMLElement).getAttribute('data-value')
+        const item = props.data.find(i => String(i.value) === itemValue)
+        item && selectItem(item)
     }
 }
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-radio {
     &__label {

package/lib/components/Forms/RadioButton.vue

@@ -23,7 +23,7 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-radio-btn {
     width: 18px;

package/lib/components/Forms/Select.vue

@@ -163,6 +163,7 @@ interface IItem {
  * @see [Designs for Inputs](https://marvelapp.com/adf8ab3/screen/70331421)
  */
 @Component({
+    name: 'PocketSelect',
     components: {
         Icon,
     },
@@ -447,8 +448,8 @@ export default class Select extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-select {
     position: relative;
@@ -595,13 +596,13 @@ export default class Select extends Vue {
         margin: 4px 0 0 0;
 
         &--dark {
-            &--hover {
-                background-color: $charcoal;
-            }
-
             border-color: $pewter;
             color: $fog;
             caret-color: $banana-bread;
+            
+            &--hover {
+                background-color: $charcoal;
+            }
         }
     }
 

package/lib/components/Forms/Textarea.vue

@@ -100,8 +100,8 @@ export default class Textarea extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-textarea {
     &__container {

package/lib/components/Icons/Icon.vue

@@ -148,6 +148,7 @@ import IconPresent from './IconPresent.vue'
 import IconLink from './IconLink.vue'
 
 @Component({
+    name: 'Icon',
     components: {
         IconAdd,
         IconEdit,

package/lib/components/Icons/IconEdit.vue

@@ -14,8 +14,10 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-facing-decorator'
 
-@Component
+@Component({
+    name: 'IconEdit',
+})
 export default class IconEdit extends Vue {
     @Prop() title!: string
 }
-</script>
+</script>

package/lib/components/Icons/IconFullViewActive.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- eslint-disable -->
     <svg width="28px" height="20px" viewBox="0 0 28 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <title>icon/full view toggle active</title>
+        <title>{{ title }}</title>
         <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g transform="translate(-50.000000, -9.000000)">
                 <g transform="translate(52.000000, 10.500000)">

package/lib/components/Icons/IconLoading2.vue

@@ -15,7 +15,7 @@ export default class IconLoading2 extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-loading {
     height: 100%;
@@ -40,12 +40,10 @@ export default class IconLoading2 extends Vue {
 
 @keyframes spin {
     from {
-        -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
 
     to {
-        -webkit-transform: rotate(359deg);
         transform: rotate(359deg);
     }
 }

package/lib/components/Loaders/SkeletonLoader.vue

@@ -12,8 +12,8 @@ export default class SkeletonLoader extends Vue {}
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-skeleton-loader {
     // Using width and height of parent

package/lib/components/Messaging/InfoMessage.vue

@@ -14,8 +14,8 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .info-message {
     padding: 11px 16px;

package/lib/components/Modal/Modal.vue

@@ -51,8 +51,8 @@ export default class Modal extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-modal {
     border-radius: 12px;

package/lib/components/Modal/ModalContainer.vue

@@ -163,8 +163,8 @@ export default class ModalContainer extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-modal-container {
     position: absolute;

package/lib/components/Onboarding/EmailAuth.vue

@@ -84,7 +84,7 @@ export default class EmailAuth extends Vue {
         }
     }
 
-    async submitSignIn () {
+    submitSignIn () {
         this.isLoading = true
         this.errorMessage = ''
 
@@ -99,7 +99,7 @@ export default class EmailAuth extends Vue {
         this.isLoading = false
     }
 
-    async resendEmail () {
+    resendEmail () {
         this.errorMessage = ''
         this.isResending = true
         this.emitResend({ email: this.email })
@@ -107,7 +107,7 @@ export default class EmailAuth extends Vue {
     }
 
     @Emit('submit')
-    emitSubmit (results: { email: string; code: string}) {
+    emitSubmit (results: { email: string; code: string }) {
         return results
     }
 
@@ -124,8 +124,8 @@ export default class EmailAuth extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-email-auth {
     &__form {

package/lib/components/Onboarding/MagicCodeEntry.vue

@@ -42,8 +42,8 @@ export default class MagicCodeEntry extends Vue {
     mounted () {
         // Ensure proper letter spacing for magic code in case of a11y browser extension overrides
         setTimeout(() => {
-            const codeInputEl = document.querySelector('.uikit-magic-code__code-input') as HTMLElement | null
-            if (codeInputEl) {
+            const codeInputEl = document.querySelector('.uikit-magic-code__code-input')
+            if (codeInputEl instanceof HTMLElement) {
                 codeInputEl.style.letterSpacing = '35.5px'
             }
         }, 500)
@@ -127,7 +127,7 @@ export default class MagicCodeEntry extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-magic-code {
     position: relative;
@@ -184,7 +184,6 @@ export default class MagicCodeEntry extends Vue {
         appearance: none;
 
         &::selection {
-            color: none;
             background: none;
         }
     }