@pocketprep/ui-kit 3.0.37 → 3.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@pocketprep/ui-kit.js +6283 -6091
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +4 -4
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Blobs/Blob.md +10 -0
- package/lib/components/Blobs/Blob.vue +25 -0
- package/lib/components/Blobs/BlobEmptyState.md +9 -0
- package/lib/components/Blobs/BlobEmptyState.vue +23 -0
- package/lib/components/Blobs/blob.d.ts +2 -0
- package/lib/components/EmptyStates/EmptyState.md +44 -0
- package/lib/components/EmptyStates/EmptyState.vue +172 -0
- package/lib/index.ts +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<BlobEmptyState
|
|
3
|
+
v-if="type === 'empty'"
|
|
4
|
+
:title="title"
|
|
5
|
+
:primary-color="primaryColor"
|
|
6
|
+
/>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
import { Vue, Component, Prop } from 'vue-facing-decorator'
|
|
11
|
+
import BlobEmptyState from './BlobEmptyState.vue'
|
|
12
|
+
|
|
13
|
+
@Component({
|
|
14
|
+
components: {
|
|
15
|
+
BlobEmptyState,
|
|
16
|
+
},
|
|
17
|
+
})
|
|
18
|
+
export default class Blob extends Vue {
|
|
19
|
+
@Prop() type!: string
|
|
20
|
+
@Prop() title!: string
|
|
21
|
+
@Prop() isDarkMode!: boolean
|
|
22
|
+
@Prop() primaryColor!: string
|
|
23
|
+
@Prop({ default: 'currentColor' }) secondaryColor!: string
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- eslint-disable -->
|
|
3
|
+
<svg width="38" height="33" viewBox="0 0 38 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
4
|
+
<title>{{ title }}</title>
|
|
5
|
+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
6
|
+
<g :fill="primaryColor" fill-rule="nonzero">
|
|
7
|
+
<path d="M0.5 17.7589C0.5 24.3405 8.55289 33.6455 16.3374 32.9647C24.1218 32.2838 33.0805 28.6526 36.0389 23.2058C38.9973 17.7589 37.5179 10.7234 31.101 4.59576C24.6841 -1.53192 14.9952 -1.53192 9.08975 4.59576C3.1843 10.7234 0.5 11.1773 0.5 17.7589Z"></path>
|
|
8
|
+
</g>
|
|
9
|
+
</g>
|
|
10
|
+
</svg>
|
|
11
|
+
<!-- eslint-enable -->
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script lang="ts">
|
|
15
|
+
import { Vue, Component, Prop } from 'vue-facing-decorator'
|
|
16
|
+
import BrandColors from '../../pocketprep-export.module.scss'
|
|
17
|
+
|
|
18
|
+
@Component
|
|
19
|
+
export default class BlobEmptyState extends Vue {
|
|
20
|
+
@Prop() title!: string
|
|
21
|
+
@Prop({ default: BrandColors.fog }) primaryColor!: string
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
```vue
|
|
2
|
+
<template>
|
|
3
|
+
<div>
|
|
4
|
+
<EmptyState
|
|
5
|
+
title="Default empty state TITLE"
|
|
6
|
+
message="Default empty state SUBHEAD"
|
|
7
|
+
/>
|
|
8
|
+
<EmptyState
|
|
9
|
+
title="No results for “vea”"
|
|
10
|
+
message="Only question text is searchable. Check your spelling or try again."
|
|
11
|
+
>
|
|
12
|
+
<template #imageRow>
|
|
13
|
+
<div />
|
|
14
|
+
</template>
|
|
15
|
+
</EmptyState>
|
|
16
|
+
<EmptyState
|
|
17
|
+
state="correct"
|
|
18
|
+
title="0 Correct Questions"
|
|
19
|
+
/>
|
|
20
|
+
<EmptyState
|
|
21
|
+
state="correct"
|
|
22
|
+
title="You don't have any correct questions."
|
|
23
|
+
message="Let's start studying."
|
|
24
|
+
blobColor="white"
|
|
25
|
+
/>
|
|
26
|
+
<EmptyState
|
|
27
|
+
state="incorrect"
|
|
28
|
+
title="0 Incorrect Questions"
|
|
29
|
+
message="Questions answered incorrectly by this student will appear here."
|
|
30
|
+
/>
|
|
31
|
+
<EmptyState
|
|
32
|
+
state="incorrect"
|
|
33
|
+
title="You don't have any incorrect questions."
|
|
34
|
+
message="Impressive!"
|
|
35
|
+
blobColor="white"
|
|
36
|
+
/>
|
|
37
|
+
<EmptyState
|
|
38
|
+
state="flagged"
|
|
39
|
+
title="0 Flagged Questions"
|
|
40
|
+
message="Questions flagged by this student will appear here."
|
|
41
|
+
/>
|
|
42
|
+
</div>
|
|
43
|
+
</template>
|
|
44
|
+
```
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
v-dark="isDarkMode"
|
|
4
|
+
class="uikit-empty-state"
|
|
5
|
+
>
|
|
6
|
+
<slot name="imageRow">
|
|
7
|
+
<div
|
|
8
|
+
v-dark="isDarkMode"
|
|
9
|
+
class="uikit-empty-state__row"
|
|
10
|
+
>
|
|
11
|
+
<slot name="image">
|
|
12
|
+
<slot name="blob">
|
|
13
|
+
<Blob
|
|
14
|
+
class="uikit-empty-state__blob"
|
|
15
|
+
type="empty"
|
|
16
|
+
:primary-color="blobColor"
|
|
17
|
+
/>
|
|
18
|
+
</slot>
|
|
19
|
+
<slot name="icon">
|
|
20
|
+
<Icon
|
|
21
|
+
class="uikit-empty-state__icon"
|
|
22
|
+
:type="iconType"
|
|
23
|
+
:style="{ color: iconColor }"
|
|
24
|
+
:secondary-color="brandColors.bananaBread"
|
|
25
|
+
/>
|
|
26
|
+
</slot>
|
|
27
|
+
</slot>
|
|
28
|
+
</div>
|
|
29
|
+
</slot>
|
|
30
|
+
<div v-dark="isDarkMode" class="uikit-empty-state__title">
|
|
31
|
+
<slot name="emptyStateTitle">
|
|
32
|
+
{{ title }}
|
|
33
|
+
</slot>
|
|
34
|
+
</div>
|
|
35
|
+
<div v-dark="isDarkMode" class="uikit-empty-state__message">
|
|
36
|
+
<slot name="emptyStateMessage">
|
|
37
|
+
{{ message }}
|
|
38
|
+
</slot>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</template>
|
|
42
|
+
|
|
43
|
+
<script lang="ts">
|
|
44
|
+
import { Vue, Component, Prop } from 'vue-facing-decorator'
|
|
45
|
+
import Icon from '../Icons/Icon.vue'
|
|
46
|
+
import BrandColors from '../../pocketprep-export.module.scss'
|
|
47
|
+
import Blob from '../Blobs/Blob.vue'
|
|
48
|
+
import { dark } from '../../directives'
|
|
49
|
+
|
|
50
|
+
@Component({
|
|
51
|
+
components: {
|
|
52
|
+
Icon,
|
|
53
|
+
Blob,
|
|
54
|
+
},
|
|
55
|
+
directives: {
|
|
56
|
+
dark,
|
|
57
|
+
},
|
|
58
|
+
})
|
|
59
|
+
export default class EmptyState extends Vue {
|
|
60
|
+
@Prop() message!: string
|
|
61
|
+
@Prop() title!: string
|
|
62
|
+
@Prop() backgroundColor!: 'white'
|
|
63
|
+
@Prop() state!: 'answered' | 'incorrect' | 'correct' | 'flagged'
|
|
64
|
+
@Prop({ default: false }) isDarkMode!: boolean
|
|
65
|
+
|
|
66
|
+
brandColors = BrandColors
|
|
67
|
+
|
|
68
|
+
get iconType () {
|
|
69
|
+
if (this.state === 'incorrect') {
|
|
70
|
+
return 'incorrect'
|
|
71
|
+
} else if (this.state === 'correct') {
|
|
72
|
+
return 'correct'
|
|
73
|
+
} else if (this.state === 'flagged') {
|
|
74
|
+
return 'flagFeedback'
|
|
75
|
+
}
|
|
76
|
+
// Default to activity icon
|
|
77
|
+
return 'activity'
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
get blobColor () {
|
|
81
|
+
if (this.isDarkMode) {
|
|
82
|
+
return this.brandColors.moonlitOcean
|
|
83
|
+
}
|
|
84
|
+
if (this.backgroundColor && this.backgroundColor === 'white') {
|
|
85
|
+
return this.brandColors.white
|
|
86
|
+
} else if (this.state === 'incorrect') {
|
|
87
|
+
return this.brandColors.barelyRed
|
|
88
|
+
} else if (this.state === 'correct') {
|
|
89
|
+
return this.brandColors.barelyGreen
|
|
90
|
+
}
|
|
91
|
+
return this.brandColors.manilla
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
get iconColor () {
|
|
95
|
+
if (this.state === 'incorrect') {
|
|
96
|
+
if (this.isDarkMode) {
|
|
97
|
+
return this.brandColors.rosa
|
|
98
|
+
}
|
|
99
|
+
return this.brandColors.pepper
|
|
100
|
+
} else if (this.state === 'correct') {
|
|
101
|
+
if (this.isDarkMode) {
|
|
102
|
+
return this.brandColors.jungleGreen
|
|
103
|
+
}
|
|
104
|
+
return this.brandColors.cadaverous
|
|
105
|
+
}
|
|
106
|
+
// Default to caramel
|
|
107
|
+
if (this.isDarkMode) {
|
|
108
|
+
return this.brandColors.butterscotch
|
|
109
|
+
}
|
|
110
|
+
return this.brandColors.caramel
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
</script>
|
|
114
|
+
|
|
115
|
+
<style lang="scss">
|
|
116
|
+
@import '../../styles/colors';
|
|
117
|
+
@import '../../styles/breakpoints';
|
|
118
|
+
|
|
119
|
+
.uikit-empty-state {
|
|
120
|
+
text-align: center;
|
|
121
|
+
padding: 0 42px 0 41px;
|
|
122
|
+
margin-top: 33px;
|
|
123
|
+
max-width: 300px;
|
|
124
|
+
|
|
125
|
+
&__title {
|
|
126
|
+
color: $brand-black;
|
|
127
|
+
font-size: 15px;
|
|
128
|
+
font-weight: 600;
|
|
129
|
+
line-height: 20px;
|
|
130
|
+
text-align: center;
|
|
131
|
+
margin-bottom: 8px;
|
|
132
|
+
|
|
133
|
+
&--dark {
|
|
134
|
+
color: $white;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&__message {
|
|
139
|
+
color: $ash;
|
|
140
|
+
font-weight: 500;
|
|
141
|
+
font-size: 14px;
|
|
142
|
+
line-height: 19px;
|
|
143
|
+
text-align: center;
|
|
144
|
+
padding: 0 20px;
|
|
145
|
+
|
|
146
|
+
&--dark {
|
|
147
|
+
color: $white;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&__row {
|
|
152
|
+
text-align: center;
|
|
153
|
+
width: 40px;
|
|
154
|
+
height: 40px;
|
|
155
|
+
margin: 0 auto 16px;
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
justify-content: center;
|
|
159
|
+
z-index: 1;
|
|
160
|
+
position: relative;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
&__blob {
|
|
164
|
+
position: absolute;
|
|
165
|
+
top: 3.5px;
|
|
166
|
+
left: 1px;
|
|
167
|
+
width: 38px;
|
|
168
|
+
height: 33px;
|
|
169
|
+
z-index: -1;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
</style>
|
package/lib/index.ts
CHANGED
|
@@ -51,6 +51,7 @@ import FlagToggle from './components/Quiz/FlagToggle.vue'
|
|
|
51
51
|
import GlobalMetricsToggle from './components/Quiz/GlobalMetricsToggle.vue'
|
|
52
52
|
import PremiumPill from './components/Bundles/PremiumPill.vue'
|
|
53
53
|
import Toast from './components/Toasts/Toast.vue'
|
|
54
|
+
import EmptyState from './components/EmptyStates/EmptyState.vue'
|
|
54
55
|
|
|
55
56
|
export * as directives from './directives'
|
|
56
57
|
export * as utils from './utils'
|
|
@@ -107,6 +108,7 @@ const components = {
|
|
|
107
108
|
Tab,
|
|
108
109
|
PremiumPill,
|
|
109
110
|
Toast,
|
|
111
|
+
EmptyState,
|
|
110
112
|
}
|
|
111
113
|
|
|
112
114
|
export default components
|