Skip to content

Commit 0eb7766

Browse files
linspwlinspw
committed
feat: add a-badge and a-select color
1 parent 3b81724 commit 0eb7766

File tree

10 files changed

+333
-4
lines changed

10 files changed

+333
-4
lines changed

‎src/components/atoms/a-badge/a-badge.stories.mdx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { Meta, ArgsTable, Story, Canvas } from '@storybook/addon-docs/blocks';
2+
import ABadge from './a-badge.vue';
3+
4+
<Meta title="Design System/Atoms/ABadge" component={ABadge} />
5+
6+
## ABadge
7+
8+
### Default use:
9+
10+
<Canvas>
11+
<Story name="Default use">
12+
{{
13+
components: { ABadge },
14+
template: '<a-badge value="JC" />',
15+
}}
16+
</Story>
17+
</Canvas>
18+
19+
### Number use:
20+
21+
<Canvas>
22+
<Story name="Number use">
23+
{{
24+
components: { ABadge },
25+
template: '<a-badge :value="1" />',
26+
}}
27+
</Story>
28+
</Canvas>
29+
30+
### Icon use:
31+
32+
<Canvas>
33+
<Story name="Icon use">
34+
{{
35+
components: { ABadge },
36+
template: '<a-badge :value="123" icon="fas fa-plus"/>',
37+
}}
38+
</Story>
39+
</Canvas>
40+
41+
### Size use:
42+
43+
<Canvas>
44+
<Story name="Size use">
45+
{{
46+
components: { ABadge },
47+
template: `<div>
48+
<a-badge value="JC" size="medium" />
49+
<a-badge value="JC" size="large" />
50+
<a-badge value="JC" size="extra-large" />
51+
<a-badge value="JC" size="jumbo" />
52+
<a-badge value="JC" size="extra-jumbo" />
53+
<a-badge value="JC" size="giant" />
54+
<a-badge value="JC" size="extra-giant" />
55+
<a-badge value="JC" size="colossal" />
56+
<a-badge value="JC" size="extra-colossal" />
57+
<a-badge value="JC" size="mega" />
58+
<a-badge value="JC" size="extra-mega" />
59+
<a-badge value="JC" size="immense" />
60+
</div>`,
61+
}}
62+
</Story>
63+
</Canvas>
64+
65+
### Variants use:
66+
67+
<Canvas>
68+
<Story name="Variants use">
69+
{{
70+
components: { ABadge },
71+
template: `<div>
72+
<a-badge value="JC" variant="default" />
73+
<a-badge value="JC" variant="success" />
74+
<a-badge value="JC" variant="info" />
75+
<a-badge value="JC" variant="danger" />
76+
<a-badge value="JC" variant="warn" />
77+
<a-badge value="JC" variant="primary" />
78+
<a-badge value="JC" variant="secondary" />
79+
<a-badge value="JC" variant="tertiary" />
80+
</div>`,
81+
}}
82+
</Story>
83+
</Canvas>
84+
85+
<ArgsTable of={ABadge} />

‎src/components/atoms/a-badge/a-badge.vue‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
<template>
2+
<div
3+
class="a-badge"
4+
:class="{
5+
[`a-badge--size-${size}`]: size,
6+
[`a-badge--variant-${variant}`]: variant,
7+
}"
8+
>
9+
{{ value }}
10+
<AIcon
11+
v-if="icon"
12+
class="a-badge__icon"
13+
:icon="icon"
14+
/>
15+
</div>
16+
</template>
17+
18+
<script>
19+
import { shouldBeOneOf } from 'vue-prop-validation-helper';
20+
import { AIcon } from '@/components/atoms/a-icon';
21+
22+
export default {
23+
components: {
24+
AIcon,
25+
},
26+
props: {
27+
icon: {
28+
type: String,
29+
default: '',
30+
},
31+
variant: {
32+
type: String,
33+
default: 'default',
34+
validator: shouldBeOneOf([
35+
'default',
36+
'primary',
37+
'secondary',
38+
'tertiary',
39+
'warn',
40+
'success',
41+
'danger',
42+
'info',
43+
]),
44+
},
45+
size: {
46+
type: String,
47+
default: 'jumbo',
48+
validator: shouldBeOneOf([
49+
'medium',
50+
'large',
51+
'extra-large',
52+
'jumbo',
53+
'extra-jumbo',
54+
'giant',
55+
'extra-giant',
56+
'colossal',
57+
'extra-colossal',
58+
'mega',
59+
'extra-mega',
60+
'immense',
61+
]),
62+
},
63+
value: {
64+
type: [String, Number],
65+
required: true,
66+
},
67+
},
68+
};
69+
</script>
70+
71+
<style lang="scss">
72+
.a-badge {
73+
--a-badge--width: fit-content;
74+
--a-badge--height: fit-content;
75+
76+
align-items: center;
77+
background-color: var(--a-badge--background-color);
78+
border-radius: 50%;
79+
color: var(--a-badge--color);
80+
display: flex;
81+
font-size: var(--a-badge--font-size);
82+
font-weight: bold;
83+
min-height: var(--a-badge--height);
84+
max-height: fit-content;
85+
justify-content: center;
86+
max-width: fit-content;
87+
min-width: var(--a-badge--width);
88+
padding: var(--a-badge--padding);
89+
position: relative;
90+
91+
&--size {
92+
&-medium {
93+
--a-badge--font-size: calc(var(--size-medium) / 2);
94+
--a-badge--padding: calc(var(--size-medium) / 8);
95+
--a-badge--width: var(--size-medium);
96+
--a-badge--height: var(--size-medium);
97+
}
98+
&-large {
99+
--a-badge--font-size: calc(var(--size-large) / 2);
100+
--a-badge--padding: calc(var(--size-large) / 8);
101+
--a-badge--width: var(--size-large);
102+
--a-badge--height: var(--size-large);
103+
}
104+
&-extra-large {
105+
--a-badge--font-size: calc(var(--size-extra-large) / 2);
106+
--a-badge--padding: calc(var(--size-extra-large) / 8);
107+
--a-badge--width: var(--size-extra-large);
108+
--a-badge--height: var(--size-extra-large);
109+
}
110+
&-jumbo {
111+
--a-badge--font-size: calc(var(--size-jumbo) / 2);
112+
--a-badge--padding: calc(var(--size-jumbo) / 8);
113+
--a-badge--width: var(--size-jumbo);
114+
--a-badge--height: var(--size-jumbo);
115+
}
116+
&-extra-jumbo {
117+
--a-badge--font-size: calc(var(--size-extra-jumbo) / 2);
118+
--a-badge--padding: calc(var(--size-extra-jumbo) / 8);
119+
--a-badge--width: var(--size-extra-jumbo);
120+
--a-badge--height: var(--size-extra-jumbo);
121+
}
122+
&-giant {
123+
--a-badge--font-size: calc(var(--size-giant) / 2);
124+
--a-badge--padding: calc(var(--size-giant) / 8);
125+
--a-badge--width: var(--size-giant);
126+
--a-badge--height: var(--size-giant);
127+
}
128+
&-extra-giant {
129+
--a-badge--font-size: calc(var(--size-extra-giant) / 2);
130+
--a-badge--padding: calc(var(--size-extra-giant) / 8);
131+
--a-badge--width: var(--size-extra-giant);
132+
--a-badge--height: var(--size-extra-giant);
133+
}
134+
&-colossal {
135+
--a-badge--font-size: calc(var(--size-colossal) / 2);
136+
--a-badge--padding: calc(var(--size-colossal) / 8);
137+
--a-badge--width: var(--size-colossal);
138+
--a-badge--height: var(--size-colossal);
139+
}
140+
&-extra-colossal {
141+
--a-badge--font-size: calc(var(--size-extra-colossal) / 2);
142+
--a-badge--padding: calc(var(--size-extra-colossal) / 8);
143+
--a-badge--width: var(--size-extra-colossal);
144+
--a-badge--height: var(--size-extra-colossal);
145+
}
146+
&-mega {
147+
--a-badge--font-size: calc(var(--size-mega) / 2);
148+
--a-badge--padding: calc(var(--size-mega) / 8);
149+
--a-badge--width: var(--size-mega);
150+
--a-badge--height: var(--size-mega);
151+
}
152+
&-extra-mega {
153+
--a-badge--font-size: calc(var(--size-extra-mega) / 2);
154+
--a-badge--padding: calc(var(--size-extra-mega) / 8);
155+
--a-badge--width: var(--size-extra-mega);
156+
--a-badge--height: var(--size-extra-mega);
157+
}
158+
&-immense {
159+
--a-badge--font-size: calc(var(--size-immense) / 2);
160+
--a-badge--padding: calc(var(--size-immense) / 8);
161+
--a-badge--width: var(--size-immense);
162+
--a-badge--height: var(--size-immense);
163+
}
164+
}
165+
166+
&--variant {
167+
&-default {
168+
--a-badge--background-color: var(--color-theme-secondary);
169+
--a-badge--color: var(--colors-original-white);
170+
}
171+
172+
&-success {
173+
--a-badge--background-color: var(--color-theme-success);
174+
}
175+
176+
&-info {
177+
--a-badge--background-color: var(--color-theme-info);
178+
}
179+
180+
&-danger {
181+
--a-badge--background-color: var(--color-theme-danger);
182+
}
183+
184+
&-warn {
185+
--a-badge--background-color: var(--color-theme-warn);
186+
}
187+
188+
&-primary {
189+
--a-badge--background-color: var(--color-theme-primary);
190+
--a-badge--color: var(--colors-original-white);
191+
}
192+
193+
&-secondary {
194+
--a-badge--background-color: var(--color-theme-secondary);
195+
}
196+
197+
&-tertiary {
198+
--a-badge--background-color: var(--color-theme-tertiary);
199+
}
200+
}
201+
}
202+
203+
.a-badge__icon {
204+
margin-left: var(--size-extra-small);
205+
}
206+
</style>

‎src/components/atoms/a-badge/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import ABadge from './a-badge.vue';
2+
3+
export { ABadge };

‎src/components/atoms/a-input/a-input.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,5 +85,6 @@
8585
&::placeholder {
8686
color: var(--a-input__field-color--placeholder);
8787
font-weight: var(--a-input__field-font-weight--placeholder);
88+
font-style: italic;
8889
}
8990
}

‎src/components/atoms/a-select/a-select.stories.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import ASelect from './a-select.vue';
1414
components: { ASelect },
1515
data() {
1616
return {
17-
selected: 'blah',
17+
selected: 'example1',
1818
};
1919
},
2020
template: `
@@ -38,7 +38,7 @@ import ASelect from './a-select.vue';
3838
components: { ASelect },
3939
data() {
4040
return {
41-
selected: 'blah',
41+
selected: '',
4242
};
4343
},
4444
template: `

‎src/components/atoms/a-select/a-select.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
:class="{
44
'a-select': true,
55
[`a-select--behavior-${behavior}`]: behavior != 'default',
6+
[`a-select--behavior-has-value`]: hasValue,
67
[`a-select--size-${size}`]: size,
78
}"
89
>
@@ -14,7 +15,7 @@
1415
>
1516
<option
1617
v-if="placeholder"
17-
class="a-select__field-option a-select__field-option--placeholder"
18+
class="a-select__field-option"
1819
:value="placeholder"
1920
disabled
2021
hidden
@@ -71,6 +72,9 @@ export default {
7172
change: this.handlerInput,
7273
};
7374
},
75+
hasValue() {
76+
return Boolean(this.$attrs.value);
77+
},
7478
},
7579
methods: {
7680
handlerInput($event) {
@@ -123,6 +127,9 @@ export default {
123127
&-block {
124128
width: 100%;
125129
}
130+
&-has-value {
131+
--a-select__field--background-color: var(--colors-scale-grey-light);
132+
}
126133
}
127134
128135
&__field {
@@ -143,9 +150,10 @@ export default {
143150
}
144151
}
145152
146-
.a-select__field-option--placeholder {
153+
.a-select__field--placeholder {
147154
color: var(--colors-scale-grey-medium);
148155
font-weight: 500;
156+
font-style: italic;
149157
}
150158
151159
</style>

‎src/components/atoms/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@ import { ASlider } from './a-slider';
1414
import { AText } from './a-text';
1515
import { ATitle } from './a-title';
1616
import { ATooltip } from './a-tooltip';
17+
import { ABadge } from './a-badge';
1718

1819
export {
1920
AAvatar,
21+
ABadge,
2022
AButton,
2123
ACard,
2224
ADisplay,

0 commit comments

Comments
 (0)