@pocketprep/ui-kit 3.0.32 → 3.0.34

package/lib/components/Icons/Icon.vue

@@ -62,6 +62,7 @@
         :secondary-color="secondaryColor"
     />
     <IconText v-else-if="type === 'text'" :title="title" />
+    <IconTimer v-else-if="type === 'timer'" :title="title" />
     <IconInfo v-else-if="type === 'info'" :title="title" />
     <IconList v-else-if="type === 'list'" :title="title" />
     <IconLaunch v-else-if="type === 'launch'" :title="title" />
@@ -136,6 +137,7 @@ import IconPreview from './IconPreview.vue'
 import type { TIconType } from './icon'
 import IconPercent from './IconPercent.vue'
 import IconPerson from './IconPerson.vue'
+import IconTimer from './IconTimer.vue'
 
 @Component({
     components: {
@@ -201,6 +203,7 @@ import IconPerson from './IconPerson.vue'
         IconPerson,
         IconChat,
         IconPreview,
+        IconTimer,
     },
 })
 export default class Icon extends Vue {

package/lib/components/Icons/IconTimer.md

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

package/lib/components/Icons/IconTimer.vue

@@ -0,0 +1,17 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.75C0 1.26675 0.391751 0.875 0.875 0.875H8.125C8.60825 0.875 9 1.26675 9 1.75C9 2.23325 8.60825 2.625 8.125 2.625H7.979V4.48831C7.979 5.22803 7.66678 6.03 6.7178 6.89211C7.11675 7.28524 7.40564 7.68358 7.60566 8.08961C7.89408 8.67506 7.979 9.23862 7.979 9.75921V11.375H8.125C8.60825 11.375 9 11.7668 9 12.25C9 12.7332 8.60825 13.125 8.125 13.125H0.875C0.391751 13.125 0 12.7332 0 12.25C0 11.7668 0.391751 11.375 0.875 11.375H0.962891V9.75726C0.962891 8.80986 1.29291 7.85054 2.27856 6.8915C1.33075 6.04208 0.962891 5.2413 0.962891 4.48636V2.625H0.875C0.391751 2.625 0 2.23325 0 1.75ZM2.21289 2.625H6.729V4.48831C6.729 4.84853 6.58924 5.47829 5.37852 6.37313C5.2214 6.48925 5.12763 6.67217 5.12505 6.86752C5.12248 7.06288 5.21141 7.2482 5.36542 7.36841C5.96537 7.83674 6.29783 8.2634 6.48435 8.64201C6.66927 9.01738 6.729 9.38242 6.729 9.75921V9.96977C6.43462 9.43897 5.93209 8.875 5.38105 8.875C3.89098 8.875 2.68379 9.73361 2.21289 10.5856V9.75726C2.21289 9.07761 2.45056 8.2919 3.63458 7.36764C3.78859 7.24742 3.87752 7.0621 3.87495 6.86674C3.87237 6.67139 3.7786 6.48848 3.62148 6.37235C2.38796 5.46065 2.21289 4.8262 2.21289 4.48636V2.625Z" fill="currentColor"
+        />
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconTimer extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Quiz/Question.vue

@@ -582,7 +582,8 @@
                             :class="{
                                 'uikit-question__motivational-moment--mcr': isMCR,
                                 'uikit-question__motivational-moment--explanation': showExplanation,
-                                'uikit-question__motivational-moment--passage-and-image': showPassageAndImage,
+                                'uikit-question__motivational-moment--passage-and-image': question.passage
+                                    || passageImageUrl,
                             }"
                         >
                             <slot
@@ -739,7 +740,8 @@
                 :class="{
                     'uikit-question__motivational-moment-bottom--mcr': isMCR,
                     'uikit-question__motivational-moment-bottom--explanation': showExplanation,
-                    'uikit-question__motivational-moment-bottom--passage-and-image': showPassageAndImage,
+                    'uikit-question__motivational-moment-bottom--passage-and-image': question.passage
+                        || passageImageUrl,
                 }"
             >
                 <slot
@@ -3248,17 +3250,19 @@ export default class Question extends Vue {
 
     &__motivational-moment-bottom {
         display: none;
+        margin-top: 24px;
+        justify-content: center;
 
         &--mcr {
-            display: block;
+            display: flex;
         }
 
         &--passage-and-image:not(#{&}--tablet-portrait) {
-            display: block;
+            display: flex;
         }
 
         &--tablet-portrait {
-            display: block;
+            display: flex;
         }
     }
 

package/lib/components/SidePanels/SidePanel.vue

@@ -39,16 +39,18 @@
                 >
                     <Icon type="close" />
                 </div>
-                <div
-                    ref="uikit-side-panel__title"
-                    class="uikit-side-panel__title"
-                    :class="{ 'uikit-side-panel__title--has-tabs': tabs && tabs.length }"
-                    tabindex="-1"
-                >
-                    <h1 class="uikit-side-panel__title-inner">
-                        {{ name }}
-                    </h1>
-                </div>
+                <slot name="sidePanelTitle">
+                    <div
+                        ref="uikit-side-panel__title"
+                        class="uikit-side-panel__title"
+                        :class="{ 'uikit-side-panel__title--has-tabs': tabs && tabs.length }"
+                        tabindex="-1"
+                    >
+                        <h1 class="uikit-side-panel__title-inner">
+                            {{ name }}
+                        </h1>
+                    </div>
+                </slot>
                 <div
                     v-if="tabs && tabs.length"
                     class="uikit-side-panel__tabs"
@@ -77,30 +79,34 @@
                     </div>
                 </div>
             </div>
-            <div 
-                v-dark="isDarkMode"
-                class="uikit-side-panel__content"
-                :class="{ 'uikit-side-panel__content--has-tabs': tabs && tabs.length }"
-                :style="{ ...customContentStyles }"
-            >
-                <slot />
-            </div>
-            <div class="uikit-side-panel__foot" :class="{ 'uikit-side-panel__foot--dark': isDarkMode }">
-                <div class="uikit-side-panel__foot-left">
-                    <slot name="details" />
+            <slot name="sidePanelContent">
+                <div 
+                    v-dark="isDarkMode"
+                    class="uikit-side-panel__content"
+                    :class="{ 'uikit-side-panel__content--has-tabs': tabs && tabs.length }"
+                    :style="{ ...customContentStyles }"
+                >
+                    <slot />
                 </div>
-                <div class="uikit-side-panel__foot-right">
-                    <PocketButton
-                        class="uikit-side-panel__foot-cancel"
-                        type="secondary"
-                        :is-dark-mode="isDarkMode"
-                        @click="customCancelButtonAction ? emitCloseButton() : emitClose()"
-                    >
-                        {{ cancelButtonText }}
-                    </PocketButton>
-                    <slot name="action" />
+            </slot>
+            <slot name="sidePanelFooter">
+                <div class="uikit-side-panel__foot" :class="{ 'uikit-side-panel__foot--dark': isDarkMode }">
+                    <div class="uikit-side-panel__foot-left">
+                        <slot name="details" />
+                    </div>
+                    <div class="uikit-side-panel__foot-right">
+                        <PocketButton
+                            class="uikit-side-panel__foot-cancel"
+                            type="secondary"
+                            :is-dark-mode="isDarkMode"
+                            @click="$emit(customCancelButtonAction ? 'close-button' : 'close')"
+                        >
+                            {{ cancelButtonText }}
+                        </PocketButton>
+                        <slot name="action" />
+                    </div>
                 </div>
-            </div>
+            </slot>
         </div>
     </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.0.32",
+  "version": "3.0.34",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {