@pocketprep/ui-kit 3.5.0 → 3.5.2

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

@@ -5,158 +5,160 @@
         class="uikit-exam-search"
         :class="{ 'uikit-exam-search--bundle-selected': selectedBundle }" 
     >
-        <Search
-            v-model="examSearchString"
-            v-breakpoint="{
-                breakpoints: { small: smallBreakpoint },
-                containerEl: examSearchContainer
-            }" 
-            class="uikit-exam-search__search"
-            placeholder="Search exams"
-            type="white"
-            :is-dark-mode="isDarkMode"
-        />
-        <div 
-            v-if="examSearchString" 
-            v-breakpoint="{
-                breakpoints: { small: smallBreakpoint },
-                containerEl: examSearchContainer
-            }" 
-            class="uikit-exam-search__search-results"
-        >
-            <div class="uikit-exam-search__search-results-header">
-                <span
-                    v-dark="isDarkMode"
-                    class="uikit-exam-search__search-results-count"
-                    aria-live="polite"
-                    role="alert"
-                >
-                    {{ filteredExams.length }} Search Result{{ filteredExams.length !== 1 ? 's' : '' }}
-                </span>
-                <Button
-                    class="uikit-exam-search__search-reset-btn"
-                    type="tertiary-small"
-                    :is-dark-mode="isDarkMode"
-                    @click="examSearchString = ''"
-                >
-                    Browse Instead
-                </Button>
-            </div>
-            <ul class="uikit-exam-search__search-results-list">
-                <ExamCard
-                    v-for="exam in filteredExams"
-                    :key="exam.objectId"
-                    v-breakpoint="{
-                        breakpoints: { small: smallBreakpoint },
-                        containerEl: examSearchContainer
-                    }" 
-                    :is-premium="premiumExamIds.includes(exam.objectId)"
-                    :exam="exam"
-                    :bundle="exam.bundle" 
-                    class="uikit-exam-search__search-results-card"
-                    :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
-                    :is-dark-mode="isDarkMode"
-                    @select="selectExam(exam)"
-                />
-                <div class="uikit-exam-search__exam-list-padding" />
-            </ul>
-        </div>
-        <div
-            v-else
-            class="uikit-exam-search__bundle-search"
-            :class="{ 'uikit-exam-search__bundle-search--bundle-selected': selectedBundle }"
-        >
-            <div
+        <template v-if="examSearchContainer">
+            <Search
+                v-model="examSearchString"
                 v-breakpoint="{
                     breakpoints: { small: smallBreakpoint },
                     containerEl: examSearchContainer
                 }" 
-                class="uikit-exam-search__bundle-list"
-            >
-                <div class="uikit-exam-search__browse-industry-text">
-                    <span v-if="!selectedBundle">or </span>browse by industry
-                </div>
-                <BundleList
-                    v-model="selectedBundle"
-                    :bundles="bundles"
-                    :is-dark-mode="isDarkMode"
-                    :premium-bundle-ids="!selectedBundle ? premiumBundleIds : []"
-                />
-            </div>
-            <div
-                v-if="selectedBundle"
+                class="uikit-exam-search__search"
+                placeholder="Search exams"
+                type="white"
+                :is-dark-mode="isDarkMode"
+            />
+            <div 
+                v-if="examSearchString" 
                 v-breakpoint="{
                     breakpoints: { small: smallBreakpoint },
                     containerEl: examSearchContainer
                 }" 
-                class="uikit-exam-search__bundle-exam-container"
+                class="uikit-exam-search__search-results"
+            >
+                <div class="uikit-exam-search__search-results-header">
+                    <span
+                        v-dark="isDarkMode"
+                        class="uikit-exam-search__search-results-count"
+                        aria-live="polite"
+                        role="alert"
+                    >
+                        {{ filteredExams.length }} Search Result{{ filteredExams.length !== 1 ? 's' : '' }}
+                    </span>
+                    <Button
+                        class="uikit-exam-search__search-reset-btn"
+                        type="tertiary-small"
+                        :is-dark-mode="isDarkMode"
+                        @click="examSearchString = ''"
+                    >
+                        Browse Instead
+                    </Button>
+                </div>
+                <ul class="uikit-exam-search__search-results-list">
+                    <ExamCard
+                        v-for="exam in filteredExams"
+                        :key="exam.objectId"
+                        v-breakpoint="{
+                            breakpoints: { small: smallBreakpoint },
+                            containerEl: examSearchContainer
+                        }" 
+                        :is-premium="premiumExamIds.includes(exam.objectId)"
+                        :exam="exam"
+                        :bundle="exam.bundle" 
+                        class="uikit-exam-search__search-results-card"
+                        :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
+                        :is-dark-mode="isDarkMode"
+                        @select="selectExam(exam)"
+                    />
+                    <div class="uikit-exam-search__exam-list-padding" />
+                </ul>
+            </div>
+            <div
+                v-else
+                class="uikit-exam-search__bundle-search"
+                :class="{ 'uikit-exam-search__bundle-search--bundle-selected': selectedBundle }"
             >
-                <div 
+                <div
                     v-breakpoint="{
                         breakpoints: { small: smallBreakpoint },
                         containerEl: examSearchContainer
                     }" 
-                    class="uikit-exam-search__bundle-exam-container-top"
+                    class="uikit-exam-search__bundle-list"
                 >
-                    <PocketButton
-                        v-breakpoint="{
-                            breakpoints: { small: smallBreakpoint },
-                            containerEl: examSearchContainer
-                        }" 
-                        class="uikit-exam-search__bundle-exam-back"
+                    <div class="uikit-exam-search__browse-industry-text">
+                        <span v-if="!selectedBundle">or </span>browse by industry
+                    </div>
+                    <BundleList
+                        v-model="selectedBundle"
+                        :bundles="bundles"
                         :is-dark-mode="isDarkMode"
-                        type="tertiary"
-                        @click="selectedBundle = null"
-                    >
-                        <Icon type="arrow" /> Back to Browse
-                    </PocketButton>
-                    <span 
+                        :premium-bundle-ids="!selectedBundle ? premiumBundleIds : []"
+                    />
+                </div>
+                <div
+                    v-if="selectedBundle"
+                    v-breakpoint="{
+                        breakpoints: { small: smallBreakpoint },
+                        containerEl: examSearchContainer
+                    }" 
+                    class="uikit-exam-search__bundle-exam-container"
+                >
+                    <div 
                         v-breakpoint="{
                             breakpoints: { small: smallBreakpoint },
                             containerEl: examSearchContainer
                         }" 
-                        class="uikit-exam-search__bundle-exam-count"
-                        tabindex="-1"
-                    >
-                        {{ selectedBundleExams.length }}
-                        {{ selectedBundle.name }}
-                        Exam{{ selectedBundleExams.length > 1 ? 's' : '' }}
-                    </span>
-                </div>
-                <div
-                    :key="selectedBundle.objectId"
-                    class="uikit-exam-search__bundle-exam-list-container"
-                >
-                    <div
-                        :key="selectedBundle.objectId"
-                        class="uikit-exam-search__bundle-exam-list"
+                        class="uikit-exam-search__bundle-exam-container-top"
                     >
-                        <ExamCard
-                            v-for="exam in selectedBundleExams"
-                            :key="exam.objectId"
+                        <PocketButton
                             v-breakpoint="{
                                 breakpoints: { small: smallBreakpoint },
                                 containerEl: examSearchContainer
                             }" 
-                            :exam="exam"
+                            class="uikit-exam-search__bundle-exam-back"
                             :is-dark-mode="isDarkMode"
-                            :bundle="exam.bundle"
-                            class="uikit-exam-search__search-results-card"
-                            :is-premium="premiumExamIds.includes(exam.objectId)"
-                            :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
-                            @select="selectExam(exam)"
-                        />
-                        <div 
+                            type="tertiary"
+                            @click="selectedBundle = null"
+                        >
+                            <Icon type="arrow" /> Back to Browse
+                        </PocketButton>
+                        <span 
                             v-breakpoint="{
                                 breakpoints: { small: smallBreakpoint },
                                 containerEl: examSearchContainer
                             }" 
-                            class="uikit-exam-search__exam-list-padding"
-                        />
+                            class="uikit-exam-search__bundle-exam-count"
+                            tabindex="-1"
+                        >
+                            {{ selectedBundleExams.length }}
+                            {{ selectedBundle.name }}
+                            Exam{{ selectedBundleExams.length > 1 ? 's' : '' }}
+                        </span>
+                    </div>
+                    <div
+                        :key="selectedBundle.objectId"
+                        class="uikit-exam-search__bundle-exam-list-container"
+                    >
+                        <div
+                            :key="selectedBundle.objectId"
+                            class="uikit-exam-search__bundle-exam-list"
+                        >
+                            <ExamCard
+                                v-for="exam in selectedBundleExams"
+                                :key="exam.objectId"
+                                v-breakpoint="{
+                                    breakpoints: { small: smallBreakpoint },
+                                    containerEl: examSearchContainer
+                                }" 
+                                :exam="exam"
+                                :is-dark-mode="isDarkMode"
+                                :bundle="exam.bundle"
+                                class="uikit-exam-search__search-results-card"
+                                :is-premium="premiumExamIds.includes(exam.objectId)"
+                                :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
+                                @select="selectExam(exam)"
+                            />
+                            <div 
+                                v-breakpoint="{
+                                    breakpoints: { small: smallBreakpoint },
+                                    containerEl: examSearchContainer
+                                }" 
+                                class="uikit-exam-search__exam-list-padding"
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </template>
     </div>
 </template>
 
@@ -281,7 +283,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%);
         }
     }