@pocketprep/ui-kit 3.4.90 → 3.5.1

package/eslint.config.ts

@@ -0,0 +1,111 @@
+import stylisticTs from '@stylistic/eslint-plugin-ts'
+import pluginVue from 'eslint-plugin-vue'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import pluginCypress from 'eslint-plugin-cypress/flat'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+    {
+        name: 'app/files-to-lint',
+        files: [ '**/*.{ts,mts,tsx,vue}' ],
+    },
+    {
+        name: 'app/files-to-ignore',
+        ignores: [ '**/dist/**', '**/dist-ssr/**', '**/coverage/**', '**/docs/**', '**/cypress/fixtures/**' ],
+    },
+    stylisticTs.configs.all,
+    vueTsConfigs.strictTypeChecked,
+    vueTsConfigs.stylisticTypeChecked,
+    pluginVue.configs['flat/recommended'],
+    {
+        rules: {
+            '@stylistic/ts/quotes': [ 'error', 'single' ],
+            '@stylistic/ts/quote-props': 'off',
+            '@stylistic/ts/comma-dangle': [ 'error', {
+                'arrays': 'always-multiline',
+                'objects': 'always-multiline',
+                'imports': 'always-multiline',
+                'exports': 'always-multiline',
+                'functions': 'never',
+            }],
+            '@stylistic/ts/semi': [ 'error', 'never' ],
+            '@stylistic/ts/object-property-newline': [ 'error', { allowAllPropertiesOnSameLine: true }],
+            '@stylistic/ts/no-extra-parens': 'off',
+            '@stylistic/ts/lines-between-class-members': 'off',
+            '@stylistic/ts/lines-around-comment': 'off',
+            'no-console': 'warn',
+            'max-len': [ 'error', { 'code': 120 }],
+            'brace-style': 'error',
+            'keyword-spacing': [ 'error', { 'before': true, 'after': true }],
+            '@stylistic/ts/object-curly-spacing': [ 'error', 'always' ],
+            'array-bracket-spacing': [ 'error', 'always', { 'objectsInArrays': false, 'arraysInArrays': false }],
+            'space-in-parens': [ 'error', 'never' ],
+            'space-before-function-paren': [ 'error', 'always' ],
+            'space-infix-ops': [ 'error', { 'int32Hint': true }],
+            'prefer-const': 'error',
+            'no-shadow': 'error',
+            'vue/html-indent': [ 'error', 4 ],
+            'vue/max-attributes-per-line': [ 'error', { 'singleline': 2 }],
+            'vue/no-v-html': 'off',
+            'vue/component-name-in-template-casing': [ 'error', 'PascalCase', {
+                'registeredComponentsOnly': false,
+            }],
+            'vue/multi-word-component-names': 'off',
+            'vue/singleline-html-element-content-newline': 'off',
+            'vue/v-on-event-hyphenation': [ 'warn', 'never' ],
+            'vue/attribute-hyphenation': 'off',
+            'vue/first-attribute-linebreak': 'off',
+            'vue/html-closing-bracket-newline': 'off',
+            'vue/multiline-html-element-content-newline': 'off',
+            'vue/attributes-order': 'off',
+            'vue/html-self-closing': 'off',
+            'no-unused-vars': 'off', // We use @typescript-eslint/no-unused-vars instead
+            'no-template-curly-in-string': 'error',
+            'array-callback-return': [ 'error', { 'allowImplicit': true }],
+            'block-scoped-var': 'error',
+            'dot-location': [ 'error', 'property' ],
+            'eqeqeq': 'error',
+            'no-implicit-globals': [ 'error', { 'lexicalBindings': true }],
+            '@stylistic/ts/member-delimiter-style': [ 'error', { 'multiline': { delimiter: 'none' } }],
+            '@typescript-eslint/no-angle-bracket-type-assertion': 'off',
+            '@typescript-eslint/explicit-function-return-type': 'off',
+            '@typescript-eslint/explicit-member-accessibility': 'off',
+            '@typescript-eslint/no-var-requires': 'off',
+            '@typescript-eslint/explicit-module-boundary-types': 'off',
+            '@typescript-eslint/consistent-indexed-object-style': 'off',
+            '@typescript-eslint/class-literal-property-style': 'off',
+            '@typescript-eslint/no-unnecessary-condition': 'off',
+            '@typescript-eslint/no-redundant-type-constituents': 'off',
+            '@typescript-eslint/consistent-type-definitions': 'off',
+            '@typescript-eslint/consistent-type-assertions': 'off',
+            '@typescript-eslint/restrict-template-expressions': 'off',
+            '@typescript-eslint/prefer-nullish-coalescing': 'off',
+            '@typescript-eslint/no-dynamic-delete': 'off',
+            '@typescript-eslint/no-floating-promises': 'off',
+            '@typescript-eslint/non-nullable-type-assertion-style': 'off',
+            '@typescript-eslint/dot-notation': 'off',
+            '@typescript-eslint/prefer-regexp-exec': 'off',
+            '@typescript-eslint/prefer-reduce-type-parameter': 'off',
+            '@typescript-eslint/no-require-imports': 'off',
+            '@typescript-eslint/no-unnecessary-type-parameters': 'off',
+            '@typescript-eslint/no-confusing-void-expression': [ 'error', { ignoreArrowShorthand: true }],
+            '@typescript-eslint/no-unused-expressions': [ 'error', { allowShortCircuit: true }],
+            '@typescript-eslint/unbound-method': 'off',
+            '@typescript-eslint/no-unused-vars': [ 'error', { caughtErrors: 'none' }],
+            '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'off',
+        },
+    },
+    {
+        ...pluginCypress.configs.recommended,
+        files: [
+            '**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',
+            'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+        ],
+    }
+)

package/lib/components/Banners/Banner.vue

@@ -42,8 +42,8 @@ export default class Banner extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-banner {
     background-color: $manilla;

package/lib/components/Bundles/BundleList.vue

@@ -111,7 +111,7 @@ export default class BundleSearch extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-bundle-list {
     box-sizing: border-box;

package/lib/components/Bundles/BundleSearch.vue

@@ -1,13 +1,17 @@
 <template>
     <div
         ref="uikit-exam-search"
-        v-breakpoint="{ small: smallBreakpoint }"
+        v-breakpoint="{ breakpoints: { small: smallBreakpoint } }"
         class="uikit-exam-search"
         :class="{ 'uikit-exam-search--bundle-selected': selectedBundle }" 
     >
         <Search
+            v-if="examSearchContainer"
             v-model="examSearchString"
-            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+            v-breakpoint="{
+                breakpoints: { small: smallBreakpoint },
+                containerEl: examSearchContainer
+            }" 
             class="uikit-exam-search__search"
             placeholder="Search exams"
             type="white"
@@ -15,7 +19,10 @@
         />
         <div 
             v-if="examSearchString" 
-            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+            v-breakpoint="{
+                breakpoints: { small: smallBreakpoint },
+                containerEl: examSearchContainer
+            }" 
             class="uikit-exam-search__search-results"
         >
             <div class="uikit-exam-search__search-results-header">
@@ -40,7 +47,10 @@
                 <ExamCard
                     v-for="exam in filteredExams"
                     :key="exam.objectId"
-                    v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                    v-breakpoint="{
+                        breakpoints: { small: smallBreakpoint },
+                        containerEl: examSearchContainer
+                    }" 
                     :is-premium="premiumExamIds.includes(exam.objectId)"
                     :exam="exam"
                     :bundle="exam.bundle" 
@@ -58,7 +68,10 @@
             :class="{ 'uikit-exam-search__bundle-search--bundle-selected': selectedBundle }"
         >
             <div
-                v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                v-breakpoint="{
+                    breakpoints: { small: smallBreakpoint },
+                    containerEl: examSearchContainer
+                }" 
                 class="uikit-exam-search__bundle-list"
             >
                 <div class="uikit-exam-search__browse-industry-text">
@@ -73,15 +86,24 @@
             </div>
             <div
                 v-if="selectedBundle"
-                v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                v-breakpoint="{
+                    breakpoints: { small: smallBreakpoint },
+                    containerEl: examSearchContainer
+                }" 
                 class="uikit-exam-search__bundle-exam-container"
             >
                 <div 
-                    v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+                    v-breakpoint="{
+                        breakpoints: { small: smallBreakpoint },
+                        containerEl: examSearchContainer
+                    }" 
                     class="uikit-exam-search__bundle-exam-container-top"
                 >
                     <PocketButton
-                        v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                        v-breakpoint="{
+                            breakpoints: { small: smallBreakpoint },
+                            containerEl: examSearchContainer
+                        }" 
                         class="uikit-exam-search__bundle-exam-back"
                         :is-dark-mode="isDarkMode"
                         type="tertiary"
@@ -90,7 +112,10 @@
                         <Icon type="arrow" /> Back to Browse
                     </PocketButton>
                     <span 
-                        v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+                        v-breakpoint="{
+                            breakpoints: { small: smallBreakpoint },
+                            containerEl: examSearchContainer
+                        }" 
                         class="uikit-exam-search__bundle-exam-count"
                         tabindex="-1"
                     >
@@ -110,7 +135,10 @@
                         <ExamCard
                             v-for="exam in selectedBundleExams"
                             :key="exam.objectId"
-                            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                            v-breakpoint="{
+                                breakpoints: { small: smallBreakpoint },
+                                containerEl: examSearchContainer
+                            }" 
                             :exam="exam"
                             :is-dark-mode="isDarkMode"
                             :bundle="exam.bundle"
@@ -120,7 +148,10 @@
                             @select="selectExam(exam)"
                         />
                         <div 
-                            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+                            v-breakpoint="{
+                                breakpoints: { small: smallBreakpoint },
+                                containerEl: examSearchContainer
+                            }" 
                             class="uikit-exam-search__exam-list-padding"
                         />
                     </div>
@@ -251,7 +282,7 @@ export default class BundleSearch extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-exam-search {
     position: relative;

package/lib/components/Bundles/PremiumPill.vue

@@ -19,8 +19,8 @@ export default class PremiumPill extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-premium-pill {
     font-size: 14px;

package/lib/components/Buttons/Button.vue

@@ -77,8 +77,9 @@ export default class Button extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-btn {
     position: relative;
@@ -153,11 +154,11 @@ export default class Button extends Vue {
 
         &:enabled {
             &:hover {
-                background-color: mix($brand-blue, black, 90%);
+                background-color: color.mix($brand-blue, black, 90%);
             }
 
             &:active {
-                background-color: mix($brand-blue, black, 80%);
+                background-color: color.mix($brand-blue, black, 80%);
             }
         }
 
@@ -171,14 +172,14 @@ export default class Button extends Vue {
                 }
 
                 &:active {
-                    background-color: mix($butterscotch, black, 80%);
+                    background-color: color.mix($butterscotch, black, 80%);
                 }
             }
         }
 
         &--is-loading {
             cursor: default;
-            background-color: mix($brand-blue, black, 90%) !important;
+            background-color: color.mix($brand-blue, black, 90%) !important;
 
             &--dark {
                 background-color: $butterscotch !important;
@@ -213,7 +214,7 @@ export default class Button extends Vue {
         &:enabled {
             &:hover,
             &:active {
-                background-color: mix($red-pegasus, black, 90%);
+                background-color: color.mix($red-pegasus, black, 90%);
             }
         }
 
@@ -228,7 +229,7 @@ export default class Button extends Vue {
             &:enabled {
                 &:hover,
                 &:active {
-                    background-color: mix($rosa, black, 90%);
+                    background-color: color.mix($rosa, black, 90%);
                 }
             }
         }
@@ -284,11 +285,11 @@ export default class Button extends Vue {
 
         &:enabled {
             &:hover {
-                background-color: mix($barely-background, black, 96%);
+                background-color: color.mix($barely-background, black, 96%);
             }
 
             &:active {
-                background-color: mix($gray-background, black, 92%);
+                background-color: color.mix($gray-background, black, 92%);
             }
         }
 
@@ -307,7 +308,7 @@ export default class Button extends Vue {
                         top: 0;
                         width: 100%;
                         height: 100%;
-                        background-color: mix($barely-background, black, 96%);
+                        background-color: color.mix($barely-background, black, 96%);
                         opacity: 0.1;
                         border-radius: 4px;
                     }
@@ -364,7 +365,7 @@ export default class Button extends Vue {
         @media (hover: hover) {
             &:enabled:hover {
                 text-decoration: underline;
-                color: mix($brand-blue, black, 90%);
+                color: color.mix($brand-blue, black, 90%);
             }
         }
 
@@ -397,11 +398,11 @@ export default class Button extends Vue {
 
         &:enabled {
             &:focus {
-                color: mix($brand-blue, black, 90%);
+                color: color.mix($brand-blue, black, 90%);
             }
 
             &:active {
-                color: mix($brand-blue, black, 80%);
+                color: color.mix($brand-blue, black, 80%);
             }
         }
 
@@ -431,7 +432,7 @@ export default class Button extends Vue {
         &:enabled {
             &:hover,
             &:focus {
-                color: mix($lust, black, 90%);
+                color: color.mix($lust, black, 90%);
 
                 &::before {
                     border-color: $lust;
@@ -439,7 +440,7 @@ export default class Button extends Vue {
             }
 
             &:active {
-                color: mix($lust, black, 80%);
+                color: color.mix($lust, black, 80%);
             }
         }
 
@@ -450,12 +451,12 @@ export default class Button extends Vue {
                 &:hover,
                 &:focus,
                 &:active {
-                    color: mix($rosa, black, 90%);
+                    color: color.mix($rosa, black, 90%);
                 }
 
                 &:focus {
                     &::before {
-                        border-color: mix($rosa, black, 90%);
+                        border-color: color.mix($rosa, black, 90%);
                     }
                 }
             }

package/lib/components/Buttons/Link.vue

@@ -49,7 +49,8 @@ export default class Link extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use 'sass:color';
+@use '@/styles/colors' as *;
 
 .uikit-link {
     outline: none;
@@ -104,11 +105,11 @@ export default class Link extends Vue {
 
             &:hover,
             &:focus {
-                color: mix($brand-blue, black, 90%);
+                color: color.mix($brand-blue, black, 90%);
             }
 
             &:active {
-                color: mix($brand-blue, black, 80%);
+                color: color.mix($brand-blue, black, 80%);
             }
         }
 
@@ -141,15 +142,15 @@ export default class Link extends Vue {
 
             &:hover,
             &:focus {
-                color: mix($pepper, black, 90%);
+                color: color.mix($pepper, black, 90%);
             }
 
             &:focus::before {
-                border-color: mix($pepper, black, 90%);
+                border-color: color.mix($pepper, black, 90%);
             }
 
             &:active {
-                color: mix($pepper, black, 80%);
+                color: color.mix($pepper, black, 80%);
             }
         }
 
@@ -159,11 +160,11 @@ export default class Link extends Vue {
             &:not(.uikit-link--disabled) {
                 &:hover,
                 &:focus {
-                    color: mix($rosa, black, 90%);
+                    color: color.mix($rosa, black, 90%);
                 }
 
                 &:focus::before {
-                    border-color: mix($rosa, black, 90%);
+                    border-color: color.mix($rosa, black, 90%);
                 }
             }
         }

package/lib/components/Buttons/Tab.vue

@@ -34,8 +34,9 @@ export default class Tab extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-tab {
     color: $brand-blue;
@@ -49,7 +50,7 @@ export default class Tab extends Vue {
 
     @media (hover: hover) {
         &:hover {
-            color: mix($brand-blue, black, 90%);
+            color: color.mix($brand-blue, black, 90%);
         }
     }
 

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;
         }