@vcita/design-system 0.2.4 → 0.2.5
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/CHANGELOG.MD +2 -1
- package/dist/@vcita/design-system.esm.js +645 -542
- package/dist/@vcita/design-system.min.js +1 -1
- package/dist/@vcita/design-system.ssr.js +540 -456
- package/package.json +1 -1
- package/src/components/VcBanner/VcBanner.spec.js +80 -0
- package/src/components/VcBanner/VcBanner.stories.js +43 -0
- package/src/components/VcBanner/VcBanner.vue +78 -0
- package/src/components/index.js +1 -0
- package/src/components/list/VcListItem/VcListItem.vue +9 -2
- package/src/stories/assets/upgrade.svg +40 -0
- package/styles/variables.scss +2 -0
package/package.json
CHANGED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import '@testing-library/jest-dom'
|
|
2
|
+
import VcBanner from './VcBanner.vue';
|
|
3
|
+
import Vuetify from 'vuetify'
|
|
4
|
+
import {render} from '@testing-library/vue';
|
|
5
|
+
import init from '../../../testing-library.config';
|
|
6
|
+
import {fireEvent,within} from "@testing-library/dom";
|
|
7
|
+
|
|
8
|
+
init();
|
|
9
|
+
|
|
10
|
+
describe('VcBanner.vue', () => {
|
|
11
|
+
|
|
12
|
+
const renderWithVuetify = (component, options, callback) => {
|
|
13
|
+
const root = document.createElement('div')
|
|
14
|
+
root.setAttribute('data-app', 'true')
|
|
15
|
+
|
|
16
|
+
return render(
|
|
17
|
+
component,
|
|
18
|
+
{
|
|
19
|
+
container: document.body.appendChild(root),
|
|
20
|
+
// for Vuetify components that use the vuetify instance property
|
|
21
|
+
vuetify: new Vuetify(),
|
|
22
|
+
...options,
|
|
23
|
+
mocks: {},
|
|
24
|
+
},
|
|
25
|
+
callback,
|
|
26
|
+
)
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
it('mounts', () => {
|
|
30
|
+
const {container} = renderWithVuetify(VcBanner, {
|
|
31
|
+
props: {}
|
|
32
|
+
})
|
|
33
|
+
|
|
34
|
+
expect(container).toHaveAttribute('data-app', 'true')
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
it('emit click', async () => {
|
|
38
|
+
const {getByTestId, emitted} = renderWithVuetify(VcBanner, {
|
|
39
|
+
props: {buttonLabel: "upgrade"}
|
|
40
|
+
})
|
|
41
|
+
|
|
42
|
+
const banner = getByTestId('VcBanner')
|
|
43
|
+
const VcButton = within(banner).getByTestId('vc-btn')
|
|
44
|
+
await fireEvent.click(VcButton)
|
|
45
|
+
expect(emitted().onAction.length).toBe(1)
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
it('render title', () => {
|
|
49
|
+
const {getByTestId} = renderWithVuetify(VcBanner, {
|
|
50
|
+
props: {title: 'upgrade now'}
|
|
51
|
+
})
|
|
52
|
+
|
|
53
|
+
const banner = getByTestId('VcBanner')
|
|
54
|
+
const title = within(banner).getByText('upgrade now')
|
|
55
|
+
expect(title).toBeInTheDocument()
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
it('render subtitle', () => {
|
|
59
|
+
const subtitleText = "All the insights you need to understand your business"
|
|
60
|
+
const {getByTestId} = renderWithVuetify(VcBanner, {
|
|
61
|
+
props: {subtitle: subtitleText}
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
const banner = getByTestId('VcBanner')
|
|
65
|
+
const subtitle = within(banner).getByText(subtitleText)
|
|
66
|
+
expect(subtitle).toBeInTheDocument()
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
it('hidden button', () => {
|
|
70
|
+
const {getByTestId} = renderWithVuetify(VcBanner, {
|
|
71
|
+
props: {
|
|
72
|
+
buttonLabel: ""
|
|
73
|
+
}
|
|
74
|
+
})
|
|
75
|
+
|
|
76
|
+
const banner = getByTestId('VcBanner')
|
|
77
|
+
const VcButton = within(banner).queryByTestId('vc-btn')
|
|
78
|
+
expect(VcButton).not.toBeInTheDocument()
|
|
79
|
+
});
|
|
80
|
+
});
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import VcBanner from './VcBanner';
|
|
2
|
+
|
|
3
|
+
const Template = (args, {argTypes}) => ({
|
|
4
|
+
components: {VcBanner: VcBanner},
|
|
5
|
+
props: Object.keys(argTypes),
|
|
6
|
+
template: `<VcBanner :title="title" :subtitle="subtitle" :backgroundColor="backgroundColor"
|
|
7
|
+
:image="image" :buttonLabel="buttonLabel" @onAction="onAction"></VcBanner>`,
|
|
8
|
+
})
|
|
9
|
+
|
|
10
|
+
export const Playground = Template.bind({});
|
|
11
|
+
|
|
12
|
+
// Set default values
|
|
13
|
+
Playground.args = {
|
|
14
|
+
buttonLabel: "Upgrade Now",
|
|
15
|
+
image: require('@/stories/assets/upgrade.svg'),
|
|
16
|
+
title: "Upgrade to get Reports!",
|
|
17
|
+
subtitle: "All the insights you need to understand your business and increase your bottom line.",
|
|
18
|
+
backgroundColor: "#f5fafd"
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export const Slim = Template.bind({});
|
|
22
|
+
|
|
23
|
+
// Set default values
|
|
24
|
+
Slim.args = {
|
|
25
|
+
image: require('@/stories/assets/upgrade.svg'),
|
|
26
|
+
title: "Upgrade to get Reports!",
|
|
27
|
+
buttonLabel: ''
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export default {
|
|
31
|
+
title: 'Content display / VcBanner', // This will control the story sidebar position
|
|
32
|
+
id: 'VcBanner', // This will be the link to this component
|
|
33
|
+
component: VcBanner,
|
|
34
|
+
parameters: {
|
|
35
|
+
design: {
|
|
36
|
+
type: 'figma',
|
|
37
|
+
url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=3846%3A35690',
|
|
38
|
+
},
|
|
39
|
+
status: {
|
|
40
|
+
type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="VcBanner pa-6 py-md-3 px-md-10 d-flex flex-column flex-md-row align-start align-md-center" :data-qa="dataQa" :style="{backgroundColor: backgroundColor}">
|
|
3
|
+
<img class="d-none d-md-block" v-if="image" :src="image">
|
|
4
|
+
<div class="text-container px-md-8 flex-grow-1">
|
|
5
|
+
<div class="banner-title pb-2 pb-md-0">{{title}}</div>
|
|
6
|
+
<div class="banner-subtitle pb-4 pb-md-0" v-if="subtitle">{{subtitle}}</div>
|
|
7
|
+
</div>
|
|
8
|
+
<VcButton :large="$vuetify.breakpoint.smAndUp" v-if="buttonLabel" @click="$emit('onAction')">{{buttonLabel}}</VcButton>
|
|
9
|
+
</div>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<script>
|
|
13
|
+
import VcButton from "@/components/VcButton/VcButton.vue";
|
|
14
|
+
|
|
15
|
+
export default {
|
|
16
|
+
name: "VcBanner",
|
|
17
|
+
components: {VcButton},
|
|
18
|
+
|
|
19
|
+
props: {
|
|
20
|
+
dataQa: {
|
|
21
|
+
type: String,
|
|
22
|
+
default: 'VcBanner'
|
|
23
|
+
},
|
|
24
|
+
image:{
|
|
25
|
+
type: String,
|
|
26
|
+
},
|
|
27
|
+
backgroundColor: {
|
|
28
|
+
type: String,
|
|
29
|
+
default: "#FFFFFF"
|
|
30
|
+
},
|
|
31
|
+
title:{
|
|
32
|
+
type: String
|
|
33
|
+
},
|
|
34
|
+
subtitle:{
|
|
35
|
+
type: String
|
|
36
|
+
},
|
|
37
|
+
buttonLabel: {
|
|
38
|
+
type: String
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
}
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<style lang="scss" scoped>
|
|
45
|
+
@import "../../scss/mixins.scss";
|
|
46
|
+
|
|
47
|
+
.VcBanner{
|
|
48
|
+
//font-family: var(--primary-font-family);
|
|
49
|
+
min-height: 128px;
|
|
50
|
+
box-sizing: border-box;
|
|
51
|
+
box-shadow: var(--shadow-10);
|
|
52
|
+
@include md-and-up {
|
|
53
|
+
box-shadow: unset;
|
|
54
|
+
border-radius: var(--size-value3);
|
|
55
|
+
border: 1px solid var(--neutral-lighten-2);
|
|
56
|
+
}
|
|
57
|
+
img{max-width: 104px}
|
|
58
|
+
.text-container{
|
|
59
|
+
color: var(--gray-darken-5);
|
|
60
|
+
.banner-title{
|
|
61
|
+
font-weight: var(--font-weight-large2);
|
|
62
|
+
font-size: var(--font-size-small3);
|
|
63
|
+
line-height: 22px;
|
|
64
|
+
@include md-and-up {
|
|
65
|
+
font-size: var(--font-size-medium2);
|
|
66
|
+
line-height: var(--size-value8);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
.banner-subtitle{
|
|
70
|
+
font-size: var(--font-size-small2);
|
|
71
|
+
line-height: var(--size-value5);
|
|
72
|
+
font-weight: var(--font-weight-medium);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
</style>
|
package/src/components/index.js
CHANGED
|
@@ -34,3 +34,4 @@ export {default as VcListItem} from './list/VcListItem/VcListItem.vue';
|
|
|
34
34
|
export {default as VcGroupHeader} from './list/VcGroupHeader/VcGroupHeader.vue';
|
|
35
35
|
export {default as VcEmptyState} from './VcEmptyState/VcEmptyState.vue';
|
|
36
36
|
export {default as VcSvg} from './VcSvg/VcSvg.vue';
|
|
37
|
+
export {default as VcBanner} from './VcBanner/VcBanner.vue'
|
|
@@ -55,7 +55,11 @@ export default {
|
|
|
55
55
|
|
|
56
56
|
.VcListItem {
|
|
57
57
|
flex-grow: 0;
|
|
58
|
-
padding: var(--size-value6)
|
|
58
|
+
padding: var(--size-value6) 0;
|
|
59
|
+
|
|
60
|
+
@include md-and-up {
|
|
61
|
+
padding: var(--size-value6) var(--size-value5);
|
|
62
|
+
}
|
|
59
63
|
|
|
60
64
|
.selected-checkbox {
|
|
61
65
|
padding-right: var(--size-value1);
|
|
@@ -63,11 +67,14 @@ export default {
|
|
|
63
67
|
|
|
64
68
|
.right-area {
|
|
65
69
|
justify-content: flex-end;
|
|
66
|
-
opacity: 0;
|
|
67
70
|
transition: opacity 300ms;
|
|
68
71
|
flex-grow: 0;
|
|
69
72
|
align-items: center;
|
|
70
73
|
|
|
74
|
+
@include md-and-up {
|
|
75
|
+
opacity: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
71
78
|
.three-dots {
|
|
72
79
|
border-radius: 1000px;
|
|
73
80
|
min-width: unset;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<svg width="204" height="200" viewBox="0 0 204 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M165.058 82.3335C165.061 81.0427 165.012 79.7522 164.913 78.4655" stroke="#231F20" stroke-width="0.8"/>
|
|
3
|
+
<path d="M164.172 72.9716C162.239 62.9795 157.154 53.5155 149.004 46.202C134.206 32.9216 119.68 30.4237 104.075 38.2786" stroke="#231F20" stroke-width="0.8" stroke-dasharray="9.6 6.4"/>
|
|
4
|
+
<path d="M101.633 39.5876C100.539 40.2091 99.4392 40.8805 98.3336 41.6019" stroke="#231F20" stroke-width="0.8"/>
|
|
5
|
+
<path d="M63.8952 140.648C64.8589 141.505 65.8455 142.335 66.854 143.137" stroke="#231F20" stroke-width="0.8"/>
|
|
6
|
+
<path d="M70.9152 146.139C84.4787 155.437 101.326 160.052 118.928 157.974C149.041 154.419 172.469 132.333 179.21 104.432" stroke="#231F20" stroke-width="0.8" stroke-dasharray="8.75 5.84"/>
|
|
7
|
+
<path d="M179.759 101.962C180.016 100.701 180.239 99.4293 180.427 98.1483" stroke="#231F20" stroke-width="0.8"/>
|
|
8
|
+
<path d="M44.8601 98.111C45.4817 99.2415 46.148 100.347 46.8572 101.424" stroke="#231F20" stroke-width="0.8"/>
|
|
9
|
+
<path d="M49.939 105.603C56.4774 113.54 65.5848 119.454 76.3715 121.921C95.8757 126.383 115.314 118.306 126.294 102.982" stroke="#231F20" stroke-width="0.8" stroke-dasharray="9 6"/>
|
|
10
|
+
<path d="M127.751 100.829C128.441 99.7463 129.091 98.6313 129.698 97.4858" stroke="#231F20" stroke-width="1.19119"/>
|
|
11
|
+
<path d="M101.793 30.7078C84.7966 27.9963 66.769 32.2823 52.3983 44.0501C30.0365 62.3598 23.6183 92.9706 34.9063 118.18" stroke="#231F20" stroke-width="0.8"/>
|
|
12
|
+
<path d="M165.891 70.8919L104.099 152.878L42.7599 70.8919L69.0469 46.0964L139.041 46.0964L165.891 70.8919Z" fill="white"/>
|
|
13
|
+
<path d="M63.6326 44.6904L103.341 43.5807L73.8053 71.8465L42.414 67.3726L63.6326 44.6904Z" fill="#00DCF7" fill-opacity="0.2"/>
|
|
14
|
+
<path d="M144.134 43.5788H106.016L134.893 74.6136L167.236 69.4412L144.134 43.5788Z" fill="#00DCF7" fill-opacity="0.2"/>
|
|
15
|
+
<path d="M167.236 76.3556L134.875 81.3717L107.361 149.072L167.236 76.3556Z" fill="#00DCF7" fill-opacity="0.2"/>
|
|
16
|
+
<path d="M42.198 75.4764L73.1523 82.0559L102.1 148.026L42.198 75.4764Z" fill="#00DCF7" fill-opacity="0.2"/>
|
|
17
|
+
<path d="M104.067 49.8363L126.74 75.5463L81.0912 74.6126L104.067 49.8363Z" fill="#00DCF7" fill-opacity="0.2"/>
|
|
18
|
+
<path d="M104.511 149.296L126.865 80.2413L80.6155 81.8088L104.511 149.296Z" fill="#00DCF7" fill-opacity="0.2"/>
|
|
19
|
+
<path d="M104.099 152.878L103.699 153.178L104.098 153.711L104.499 153.179L104.099 152.878ZM165.891 70.8919L166.29 71.1928L166.563 70.8315L166.23 70.5245L165.891 70.8919ZM139.041 46.0964L139.38 45.729L139.237 45.5964H139.041V46.0964ZM69.0469 46.0964V45.5964H68.8483L68.7038 45.7327L69.0469 46.0964ZM42.7599 70.8919L42.4168 70.5281L42.0923 70.8342L42.3595 71.1914L42.7599 70.8919ZM104.099 152.803L103.633 152.984L104.567 152.981L104.099 152.803ZM104.053 46.0964L104.423 45.7606L103.684 45.7586L104.053 46.0964ZM104.499 153.179L166.29 71.1928L165.492 70.5909L103.7 152.577L104.499 153.179ZM166.23 70.5245L139.38 45.729L138.702 46.4637L165.552 71.2592L166.23 70.5245ZM139.041 45.5964L69.0469 45.5964V46.5964L139.041 46.5964V45.5964ZM68.7038 45.7327L42.4168 70.5281L43.1029 71.2556L69.39 46.4601L68.7038 45.7327ZM42.3595 71.1914L103.699 153.178L104.5 152.579L43.1602 70.5923L42.3595 71.1914ZM75.1708 77.2345L42.8633 70.4027L42.6564 71.3811L74.9639 78.2128L75.1708 77.2345ZM165.79 70.4021L132.612 77.2339L132.814 78.2134L165.992 71.3816L165.79 70.4021ZM132.713 77.2237H75.0673V78.2237H132.713V77.2237ZM74.601 77.904L103.633 152.984L104.566 152.623L75.5337 77.5433L74.601 77.904ZM104.567 152.981L133.18 77.9017L132.246 77.5456L103.632 152.625L104.567 152.981ZM75.436 78.0615L104.422 46.4342L103.684 45.7586L74.6987 77.3858L75.436 78.0615ZM103.682 46.4321L132.343 78.0594L133.084 77.3879L104.423 45.7606L103.682 46.4321Z" fill="black"/>
|
|
20
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M168.918 144.415H179.104V107.748H168.918V144.415Z" fill="#CFF8E1"/>
|
|
21
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M142.437 146.452H152.622V130.156H142.437V146.452Z" fill="#CFF8E1"/>
|
|
22
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M156.696 146.452H166.881V124.044H156.696V146.452Z" fill="#CFF8E1"/>
|
|
23
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M168.918 146.452H179.104V107.748H168.918V146.452Z" fill="#CFF8E1" stroke="black" stroke-width="0.8"/>
|
|
24
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M181.141 146.452H193.363V99.6H181.141V146.452Z" fill="#CFF8E1"/>
|
|
25
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M140.4 146.452H150.585V132.193H140.4V146.452Z" fill="#CFF8E1" stroke="black" stroke-width="0.8"/>
|
|
26
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M154.659 146.452H164.844V124.044H154.659V146.452Z" fill="#CFF8E1" stroke="black" stroke-width="0.8"/>
|
|
27
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M183.178 146.452H195.4V101.637H183.178V146.452Z" fill="#CFF8E1" stroke="black" stroke-width="0.8"/>
|
|
28
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.024383 136.101L10.7243 146.71L57.6108 112.205L46.9136 100.617L0.024383 136.101Z" fill="#FBD9E5"/>
|
|
29
|
+
<path d="M8.29254 131.387L48.566 105.444" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
30
|
+
<path d="M26.23 160.729L8.47467 131.06" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
31
|
+
<path d="M34.0099 155.163L23.0867 137.013" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
32
|
+
<path d="M42.0665 150.233L31.1434 132.083" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
33
|
+
<path d="M50.107 144.326L39.1839 126.175" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
34
|
+
<path d="M57.3086 139.502L46.3854 121.351" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
35
|
+
<path d="M66.0728 135.144L48.3174 105.476" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
36
|
+
<path d="M14.6434 142.302L54.9163 116.358" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
37
|
+
<path d="M18.3925 148.12L58.6656 122.176" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
38
|
+
<path d="M22.1458 154.047L62.4189 128.103" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
39
|
+
<path d="M25.8851 160.409L66.1582 134.465" stroke="black" stroke-width="0.8" stroke-linejoin="bevel"/>
|
|
40
|
+
</svg>
|
package/styles/variables.scss
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
--font-size-x-small: 13px;
|
|
10
10
|
--font-size-small: 14px;
|
|
11
11
|
--font-size-small2: 15px;
|
|
12
|
+
--font-size-small3: 17px;
|
|
12
13
|
--font-size-medium: 18px;
|
|
13
14
|
--font-size-medium1: 22px;
|
|
14
15
|
--font-size-medium2: 24px;
|
|
@@ -103,6 +104,7 @@
|
|
|
103
104
|
--shadow-7: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12);
|
|
104
105
|
--shadow-8: 0px 5px 7px 3px rgba(0, 0, 0, 0.26);
|
|
105
106
|
--shadow-9: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 2px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px rgba(0, 0, 0, 0.12);
|
|
107
|
+
--shadow-10: 0px 4px 8px #cccccc;
|
|
106
108
|
|
|
107
109
|
}
|
|
108
110
|
|