@pocketprep/ui-kit 3.0.21 → 3.0.22

package/lib/components/Filters/FilterDropdown.md

@@ -6,6 +6,15 @@
             :radioEntries="radioOptions"
             :checkboxEntries="checkboxOptions"
         />
+        <FilterDropdown
+            filterLabel="Filter"
+            :radioEntries="radioOptions"
+            :checkboxEntries="checkboxOptions"
+        >
+            <template #checkboxLabelText>
+                FILTER BY QUIZ MODE
+            </template>
+        </FilterDropdown>
     </div>
 </template>
 

package/lib/components/Filters/FilterDropdown.vue

@@ -34,10 +34,16 @@
                 [`filter-dropdown--${size}`]: true 
             }"
         >
-            <FilterOptions
-                :radio-entries="radioOptions"
-                :checkbox-entries="checkboxOptions"
-            />
+            <slot name="filterOptions">
+                <FilterOptions
+                    :radio-entries="radioOptions"
+                    :checkbox-entries="checkboxOptions"
+                >
+                    <template #checkboxLabelText>
+                        <slot name="checkboxLabelText" />
+                    </template>
+                </FilterOptions>
+            </slot>
         </div>
     </div>
 </template>

package/lib/components/Filters/FilterOptions.md

@@ -10,7 +10,9 @@
             :radioEntries="[]"
             :checkboxEntries="checkboxEntries"
         >
-            <template #radioLabel></template>
+            <template #checkboxLabelText>
+                FILTER BY QUIZ MODE
+            </template>
         </FilterOptions>
     </div>
 </template>

package/lib/components/Icons/Icon.md

@@ -36,6 +36,7 @@
             <Icon type="filter" title="filter" />
             <Icon type="filterActive" title="filterActive" />
             <Icon type="flag" title="flag" />
+            <Icon type="flagContent" title="flagContent" />
             <Icon type="flagFeedback" title="flagFeedback" />
             <Icon type="flag-filled" title="flag-filled" />
             <Icon type="handle" title="handle" />

package/lib/components/Icons/Icon.vue

@@ -14,6 +14,7 @@
     <IconQuestions v-else-if="type === 'questions'" :title="title" />
     <IconSubject v-else-if="type === 'subject'" :title="title" />
     <IconFlag v-else-if="type === 'flag'" :title="title" />
+    <IconFlagContent v-else-if="type === 'flagContent'" :title="title" />
     <IconFlagFilled v-else-if="type === 'flag-filled'" :title="title" />
     <IconLoading v-else-if="type === 'loading'" :title="title" />
     <IconLoading2
@@ -32,6 +33,8 @@
     <IconPassage v-else-if="type === 'passage'" :title="title" />
     <IconPencil v-else-if="type === 'pencil'" :title="title" />
     <IconPeople v-else-if="type === 'people'" :title="title" />
+    <IconPercent v-else-if="type === 'percent'" :title="title" />
+    <IconPerson v-else-if="type === 'person'" :title="title" />
     <IconMissedQuestions v-else-if="type === 'missedQuestions'" :title="title" />
     <IconQuick10 v-else-if="type === 'quick10'" :title="title" />
     <IconShare v-else-if="type === 'share'" :title="title" />
@@ -85,6 +88,7 @@ import IconPaginationArrow from './IconPaginationArrow.vue'
 import IconQuestions from './IconQuestions.vue'
 import IconSubject from './IconSubject.vue'
 import IconFlag from './IconFlag.vue'
+import IconFlagContent from './IconFlagContent.vue'
 import IconFlagFilled from './IconFlagFilled.vue'
 import IconLoading from './IconLoading.vue'
 import IconLoading2 from './IconLoading2.vue'
@@ -130,6 +134,8 @@ import IconLightbulb from './IconLightbulb.vue'
 import IconChat from './IconChat.vue'
 import IconPreview from './IconPreview.vue'
 import type { TIconType } from './icon'
+import IconPercent from './IconPercent.vue'
+import IconPerson from './IconPerson.vue'
 
 @Component({
     components: {
@@ -148,6 +154,7 @@ import type { TIconType } from './icon'
         IconQuestions,
         IconSubject,
         IconFlag,
+        IconFlagContent,
         IconFlagFilled,
         IconLoading,
         IconLoading2,
@@ -190,6 +197,8 @@ import type { TIconType } from './icon'
         IconLaunch,
         IconLevelUp,
         IconLightbulb,
+        IconPercent,
+        IconPerson,
         IconChat,
         IconPreview,
     },

package/lib/components/Icons/IconFlagContent.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="flagContent" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconFlagContent.vue

@@ -0,0 +1,17 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0.75C0.585786 0.75 0.25 1.08579 0.25 1.5V6.55447C0.24998 6.55675 0.249969 6.55903 0.249969 6.56131C0.249969 6.56359 0.24998 6.56587 0.25 6.56815V11.5C0.25 11.9142 0.585786 12.25 1 12.25C1.41421 12.25 1.75 11.9142 1.75 11.5V7.3252C2.61133 7.35953 3.13054 7.45342 3.46431 7.56148C3.84262 7.68395 4.00196 7.82743 4.22385 8.03108L4.23743 8.04354C4.50278 8.28719 4.8432 8.59977 5.49932 8.82009C6.12507 9.03021 6.99901 9.14573 8.34764 9.14573C8.76185 9.14573 9.09764 8.80995 9.09764 8.39573C9.09764 8.35733 9.09475 8.31961 9.08919 8.28277C9.09477 8.24586 9.09767 8.20807 9.09767 8.1696V3.33692C9.09767 2.92271 8.76188 2.58692 8.34767 2.58692C7.05195 2.58692 6.36892 2.4728 5.97516 2.3395C5.62985 2.2226 5.48754 2.08879 5.26578 1.88027L5.25703 1.87203C4.98257 1.614 4.63595 1.29617 3.94822 1.07349C3.30579 0.865477 2.40029 0.75 1 0.75ZM7.59767 7.63089V4.0735C6.65622 4.03744 5.99439 3.92963 5.49419 3.7603C4.83948 3.53866 4.50426 3.22331 4.24479 2.9792L4.22957 2.96489C4.01557 2.76369 3.86215 2.62229 3.48615 2.50055C3.15118 2.39209 2.62615 2.29771 1.75 2.26358V5.82406C2.72352 5.85934 3.40888 5.96689 3.92631 6.1344C4.61044 6.35588 4.96031 6.67101 5.23811 6.92596L5.24449 6.93182C5.4732 7.14175 5.62312 7.27936 5.9768 7.39812C6.28969 7.50318 6.77883 7.59589 7.59767 7.63089Z" fill="currentColor"/>
+    </svg>
+
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconFlagContent extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/IconLevelUp.md

@@ -4,4 +4,4 @@
         <Icon type="levelup" title="levelup" />
     </div>
 </template>
-```
+```

package/lib/components/Icons/IconLightbulb.md

@@ -2,4 +2,4 @@
     <div>
         <Icon type="lightbulb" title="lightbulb" />
     </div>
-</template>
+</template>

package/lib/components/Icons/IconPercent.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="percent" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconPercent.vue

@@ -0,0 +1,24 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="18px" height="23px" viewBox="0 0 18 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>{{ title }}</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g fill="currentColor" fill-rule="nonzero">
+                <g transform="translate(0.000000, 0.760000)">
+                    <path d="M7.82469 9.39C7.82469 9 7.89469 8.64 8.03469 8.31C8.18469 7.97 8.38469 7.675 8.63469 7.425C8.89469 7.165 9.18969 6.965 9.51969 6.825C9.85969 6.675 10.2247 6.6 10.6147 6.6C11.0047 6.6 11.3647 6.675 11.6947 6.825C12.0347 6.965 12.3297 7.165 12.5797 7.425C12.8397 7.675 13.0397 7.97 13.1797 8.31C13.3297 8.64 13.4047 9 13.4047 9.39C13.4047 9.78 13.3297 10.145 13.1797 10.485C13.0397 10.815 12.8397 11.11 12.5797 11.37C12.3297 11.62 12.0347 11.82 11.6947 11.97C11.3647 12.11 11.0047 12.18 10.6147 12.18C10.2247 12.18 9.85969 12.11 9.51969 11.97C9.18969 11.82 8.89469 11.62 8.63469 11.37C8.38469 11.11 8.18469 10.815 8.03469 10.485C7.89469 10.145 7.82469 9.78 7.82469 9.39ZM11.9647 9.39C11.9647 9.01 11.8347 8.69 11.5747 8.43C11.3147 8.17 10.9947 8.04 10.6147 8.04C10.2347 8.04 9.91469 8.17 9.65469 8.43C9.39469 8.69 9.26469 9.01 9.26469 9.39C9.26469 9.77 9.39469 10.09 9.65469 10.35C9.91469 10.61 10.2347 10.74 10.6147 10.74C10.9947 10.74 11.3147 10.61 11.5747 10.35C11.8347 10.09 11.9647 9.77 11.9647 9.39ZM0.654688 3.99C0.654688 3.6 0.724688 3.24 0.864688 2.91C1.01469 2.57 1.21469 2.275 1.46469 2.025C1.72469 1.765 2.01969 1.565 2.34969 1.425C2.68969 1.275 3.05469 1.2 3.44469 1.2C3.83469 1.2 4.19469 1.275 4.52469 1.425C4.86469 1.565 5.15969 1.765 5.40969 2.025C5.66969 2.275 5.86969 2.57 6.00969 2.91C6.15969 3.24 6.23469 3.6 6.23469 3.99C6.23469 4.38 6.15969 4.745 6.00969 5.085C5.86969 5.415 5.66969 5.71 5.40969 5.97C5.15969 6.22 4.86469 6.42 4.52469 6.57C4.19469 6.71 3.83469 6.78 3.44469 6.78C3.05469 6.78 2.68969 6.71 2.34969 6.57C2.01969 6.42 1.72469 6.22 1.46469 5.97C1.21469 5.71 1.01469 5.415 0.864688 5.085C0.724688 4.745 0.654688 4.38 0.654688 3.99ZM4.79469 3.99C4.79469 3.61 4.66469 3.29 4.40469 3.03C4.14469 2.77 3.82469 2.64 3.44469 2.64C3.06469 2.64 2.74469 2.77 2.48469 3.03C2.22469 3.29 2.09469 3.61 2.09469 3.99C2.09469 4.37 2.22469 4.69 2.48469 4.95C2.74469 5.21 3.06469 5.34 3.44469 5.34C3.82469 5.34 4.14469 5.21 4.40469 4.95C4.66469 4.69 4.79469 4.37 4.79469 3.99ZM9.51969 0.9L10.7647 1.47L4.52469 12.48L3.27969 11.91L9.51969 0.9Z" fill="#587183"/>
+                </g>
+            </g>
+            <g transform="translate(-594.000000, -648.000000)"></g>
+        </g>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconPercent extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/IconPerson.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="person" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconPerson.vue

@@ -0,0 +1,17 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.96739 7.05006C4.96739 5.92748 5.87742 5.01745 7 5.01745C8.12258 5.01745 9.03261 5.92748 9.03261 7.05006C9.03261 8.17264 8.12258 9.08267 7 9.08267C5.87742 9.08267 4.96739 8.17264 4.96739 7.05006ZM7 3.58267C5.08501 3.58267 3.53261 5.13508 3.53261 7.05006C3.53261 8.96505 5.08501 10.5175 7 10.5175C8.91499 10.5175 10.4674 8.96505 10.4674 7.05006C10.4674 5.13508 8.91499 3.58267 7 3.58267ZM7.00004 11.6C4.69956 11.6 2.03794 12.267 0.836079 14.5542C0.643404 14.9209 0.784458 15.3743 1.15113 15.567C1.5178 15.7597 1.97125 15.6186 2.16392 15.2519C2.96206 13.733 4.85601 13.1 7.00004 13.1C9.11878 13.1 11.048 13.7366 11.842 15.1882C12.0408 15.5516 12.4965 15.6851 12.8599 15.4863C13.2233 15.2875 13.3568 14.8318 13.158 14.4684C11.952 12.2634 9.26369 11.6 7.00004 11.6Z" fill="currentColor"/>
+    </svg>
+
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconPerson extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/icon.d.ts

@@ -27,6 +27,8 @@ export type TIconType =
     | 'passage'
     | 'pencil'
     | 'people'
+    | 'percent'
+    | 'person'
     | 'missedQuestions'
     | 'quick10'
     | 'share'

package/lib/components/Quiz/GlobalMetricsToggle.vue

@@ -25,7 +25,9 @@
             }"
             :is-dark-mode="isDarkMode"
         >
-            Community Stats
+            <slot name="metricsTooltipText">
+                Community Stats
+            </slot>
         </Tooltip>
         <Icon
             class="uikit-global-metrics-toggle__icon"