Skip to content

Commit 92dd5d9

Browse files
artreaktor-niksartreaktor-niks
committed
select-error-label--basic-components
1 parent 4fa7b14 commit 92dd5d9

24 files changed

+1045
-0
lines changed

‎packages/kaizen-basic-components/atoms/error-message/_a-error-message.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
%a-error-message {
2+
display: block;
3+
letter-spacing: initial;
4+
text-transform: none;
5+
color: var(--color-secondary-4);
6+
font-size: var(--font-size--xxs);
7+
font-weight: var(--font-weight--medium);
8+
line-height: var(--line-height--base);
9+
10+
&__ul {
11+
margin-top: 0;
12+
margin-bottom: 0;
13+
}
14+
15+
&--top {
16+
padding-top: 0;
17+
padding-bottom: 0.5rem;
18+
}
19+
20+
&--bottom {
21+
padding-top: 0.5rem;
22+
padding-bottom: 0;
23+
}
24+
25+
&__link {
26+
color: var(--color-secondary-4);
27+
28+
&--hover {
29+
color: var(--color-text);
30+
31+
&--light {
32+
color: var(--color-grey-utility-color);
33+
}
34+
}
35+
}
36+
}

‎packages/kaizen-basic-components/atoms/error-message/_variables.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/* Variables just for example. */
2+
3+
:root {
4+
--color-primary: #0e4e95;
5+
--color-primary-2: #126ae1;
6+
--color-primary-3: #f3f7fa;
7+
--color-primary-4: #566069;
8+
--color-primary-5: #29b9e8;
9+
--color-secondary: #43b0b1;
10+
--color-secondary-2: #56ccf2;
11+
--color-secondary-3: #f26f21;
12+
--color-secondary-4: #c52254;
13+
--color-secondary-5: #f2f2f2;
14+
15+
/* Not pallet colors */
16+
--color-secondary-6: #008dbf;
17+
--color-secondary-7: #e4e4e4;
18+
--color-black: #000;
19+
--color-white: #fff;
20+
--color-border: var(--color-secondary-7);
21+
--color-grey-utility-color: #cfd7db;
22+
23+
/* Disabled colors */
24+
--color-primary-disabled: #a1d7d8;
25+
--color-secondary-disabled: #88b4f0;
26+
--color-bg: var(--color-white);
27+
--color-text: var(--color-primary-4);
28+
--color-disabled: var(--color-primary-4); /* old #8ca6c7 */
29+
--color-disabled-bg: var(--color-secondary-5); /* old #f3f6f9 */
30+
--window-height: 100vh;
31+
--base-root-font-mobile: 4.278vw; /* Mobile design width is 375px, so everything below should be scaled proportionally */
32+
--root-font-size--default: 100%;
33+
--root-font-size--medium: calc(16 * (1vw / 14.4));
34+
--root-font-size--large: calc(16 * (1vw / 14.4)); /* 16 on 1440 and 21.3 on 1920 */
35+
/* font-sizes */
36+
--font-size--xxxxxl: 48px;
37+
--font-size--xxxxl: 40px;
38+
--font-size--xxxl: 36px;
39+
--font-size--xxl: 30px;
40+
--font-size--xl: 24px;
41+
--font-size--m: 20px;
42+
--font-size--l: 18px;
43+
--font-size--base: 16px;
44+
--font-size--s: 14px;
45+
--font-size--xs: 13px;
46+
--font-size--xxs: 12px;
47+
--font-size--xxxs: 11px;
48+
/* font families */
49+
--font-family--base: "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
50+
/* font-weight */
51+
--font-weight--base: var(--font-weight--regular);
52+
--font-weight--regular: 400;
53+
--font-weight--medium: 500;
54+
--font-weight--bold: 700;
55+
/* line height */
56+
--line-height--xxxxl: 2.25;
57+
--line-height--xxxl: 2;
58+
--line-height--xxl: 1.75;
59+
--line-height--xl: 1.7;
60+
--line-height--l: 1.6;
61+
--line-height--base: 1.5;
62+
--line-height--s: 1.385;
63+
--line-height--xs: 1.333;
64+
--line-height--xxs: 1.25;
65+
--line-height--xxxm: 1.14;
66+
--line-height--xxxs: 1.1667;
67+
--line-height--xxxxs: 1;
68+
/* letter-spacing */
69+
--letter-spacing--xl: 1.4px;
70+
--letter-spacing--l: 0.05rem; /* 0.8px */
71+
--letter-spacing--s: 0.04063rem; /* 0.65px */
72+
/* site sizes */
73+
--site-max-width: 1920px; /* 1920px */
74+
--content-max-width: 1264px; /* 1216px + 48 padding */
75+
--content-max-width--mobile: 768px;
76+
--content-max-width--w: 1488px;
77+
--content-max-width--ls: 1056px; /* 1008px + 48 padding */
78+
--content-max-width--s: 53rem; /* 800px + 48 padding */
79+
--content-max-width--xs: 46.5rem;
80+
--mobile-header-height: 64px;
81+
--desktop-sticky-main-menu-height: 59px;
82+
/* container */
83+
--container-padding: 24px;
84+
/* z-index */
85+
--z-index-header: 500;
86+
--z-index-header-bottom: 510;
87+
--z-index-header-top: 515;
88+
--z-index-sticky: 520;
89+
--z-index-modal: 600;
90+
--z-index-selects: 700;
91+
--z-index-dialog-overlay: 799;
92+
--z-index-dialog: 800;
93+
/* transitions */
94+
--transition-duration: 0.3s;
95+
--transition-timing-function: ease;
96+
--transition-hover: var(--transition-duration) var(--transition-timing-function);
97+
--transition-collapse: var(--transition-duration) var(--transition-timing-function);
98+
/* border-radius */
99+
--border-radius-circle: 50%;
100+
--border-radius-xl: 8px;
101+
--border-radius-base: 4px;
102+
--border-radius-s: 3px;
103+
--border-radius-xs: 2px;
104+
/* other */
105+
--input-height: 48px;
106+
--input-secondary-height: 48px;
107+
}

‎packages/kaizen-basic-components/atoms/error-message/a-error-message.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div {{ attributes.addClass('a-error-message') }}>{{ text }}</div>

‎packages/kaizen-basic-components/atoms/error-message/a-error-message.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"content": {
3+
"error_text": "Error message"
4+
}
5+
}

‎packages/kaizen-basic-components/atoms/error-message/a-error-message.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Atom / Error message
2+
3+
Error message

‎packages/kaizen-basic-components/atoms/error-message/a-error-message.stories.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import './_variables.css';
2+
import './error-message.css';
3+
import drupalAttribute from 'drupal-attribute';
4+
import componentNotes from './a-error-message.md';
5+
6+
const template = require('./a-error-message.html.twig');
7+
const data = require('./a-error-message.json');
8+
9+
const component = {
10+
title: 'atoms/error message',
11+
};
12+
13+
if (componentNotes.length) {
14+
component.parameters = { notes: componentNotes };
15+
}
16+
17+
export default component;
18+
19+
export const basic = ({
20+
modifier_class = '',
21+
text = '',
22+
}) => {
23+
const normailzedText = !text ? data.content.error_text : text;
24+
data.attributes = new drupalAttribute();
25+
data.attributes.addClass(modifier_class);
26+
data.text = normailzedText;
27+
return template(data);
28+
};

‎packages/kaizen-basic-components/atoms/error-message/error-message.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import "_a-error-message";
2+
3+
.a-error-message {
4+
@extend %a-error-message;
5+
6+
a {
7+
@extend %a-error-message__link;
8+
9+
&:hover {
10+
@extend %a-error-message__link--hover;
11+
}
12+
}
13+
14+
ul {
15+
@extend %a-error-message__ul;
16+
}
17+
}

‎packages/kaizen-basic-components/atoms/label/_a-label.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
%a-label {
2+
letter-spacing: 0.05em;
3+
text-transform: uppercase;
4+
font-size: var(--font-size--xs);
5+
font-weight: var(--font-weight--medium);
6+
line-height: var(--line-height--xxs);
7+
8+
&--required {
9+
display: inline-block;
10+
width: 6px;
11+
height: 6px;
12+
margin: 0 0.3em;
13+
content: "*";
14+
}
15+
}

‎packages/kaizen-basic-components/atoms/label/_variables.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/* Variables just for example. */
2+
3+
:root {
4+
--color-primary: #0e4e95;
5+
--color-primary-2: #126ae1;
6+
--color-primary-3: #f3f7fa;
7+
--color-primary-4: #566069;
8+
--color-primary-5: #29b9e8;
9+
--color-secondary: #43b0b1;
10+
--color-secondary-2: #56ccf2;
11+
--color-secondary-3: #f26f21;
12+
--color-secondary-4: #c52254;
13+
--color-secondary-5: #f2f2f2;
14+
15+
/* Not pallet colors */
16+
--color-secondary-6: #008dbf;
17+
--color-secondary-7: #e4e4e4;
18+
--color-black: #000;
19+
--color-white: #fff;
20+
--color-border: var(--color-secondary-7);
21+
--color-grey-utility-color: #cfd7db;
22+
23+
/* Disabled colors */
24+
--color-primary-disabled: #a1d7d8;
25+
--color-secondary-disabled: #88b4f0;
26+
--color-bg: var(--color-white);
27+
--color-text: var(--color-primary-4);
28+
--color-disabled: var(--color-primary-4); /* old #8ca6c7 */
29+
--color-disabled-bg: var(--color-secondary-5); /* old #f3f6f9 */
30+
--window-height: 100vh;
31+
--base-root-font-mobile: 4.278vw; /* Mobile design width is 375px, so everything below should be scaled proportionally */
32+
--root-font-size--default: 100%;
33+
--root-font-size--medium: calc(16 * (1vw / 14.4));
34+
--root-font-size--large: calc(16 * (1vw / 14.4)); /* 16 on 1440 and 21.3 on 1920 */
35+
/* font-sizes */
36+
--font-size--xxxxxl: 48px;
37+
--font-size--xxxxl: 40px;
38+
--font-size--xxxl: 36px;
39+
--font-size--xxl: 30px;
40+
--font-size--xl: 24px;
41+
--font-size--m: 20px;
42+
--font-size--l: 18px;
43+
--font-size--base: 16px;
44+
--font-size--s: 14px;
45+
--font-size--xs: 13px;
46+
--font-size--xxs: 12px;
47+
--font-size--xxxs: 11px;
48+
/* font families */
49+
--font-family--base: "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
50+
/* font-weight */
51+
--font-weight--base: var(--font-weight--regular);
52+
--font-weight--regular: 400;
53+
--font-weight--medium: 500;
54+
--font-weight--bold: 700;
55+
/* line height */
56+
--line-height--xxxxl: 2.25;
57+
--line-height--xxxl: 2;
58+
--line-height--xxl: 1.75;
59+
--line-height--xl: 1.7;
60+
--line-height--l: 1.6;
61+
--line-height--base: 1.5;
62+
--line-height--s: 1.385;
63+
--line-height--xs: 1.333;
64+
--line-height--xxs: 1.25;
65+
--line-height--xxxm: 1.14;
66+
--line-height--xxxs: 1.1667;
67+
--line-height--xxxxs: 1;
68+
/* letter-spacing */
69+
--letter-spacing--xl: 1.4px;
70+
--letter-spacing--l: 0.05rem; /* 0.8px */
71+
--letter-spacing--s: 0.04063rem; /* 0.65px */
72+
/* site sizes */
73+
--site-max-width: 1920px; /* 1920px */
74+
--content-max-width: 1264px; /* 1216px + 48 padding */
75+
--content-max-width--mobile: 768px;
76+
--content-max-width--w: 1488px;
77+
--content-max-width--ls: 1056px; /* 1008px + 48 padding */
78+
--content-max-width--s: 53rem; /* 800px + 48 padding */
79+
--content-max-width--xs: 46.5rem;
80+
--mobile-header-height: 64px;
81+
--desktop-sticky-main-menu-height: 59px;
82+
/* container */
83+
--container-padding: 24px;
84+
/* z-index */
85+
--z-index-header: 500;
86+
--z-index-header-bottom: 510;
87+
--z-index-header-top: 515;
88+
--z-index-sticky: 520;
89+
--z-index-modal: 600;
90+
--z-index-selects: 700;
91+
--z-index-dialog-overlay: 799;
92+
--z-index-dialog: 800;
93+
/* transitions */
94+
--transition-duration: 0.3s;
95+
--transition-timing-function: ease;
96+
--transition-hover: var(--transition-duration) var(--transition-timing-function);
97+
--transition-collapse: var(--transition-duration) var(--transition-timing-function);
98+
/* border-radius */
99+
--border-radius-circle: 50%;
100+
--border-radius-xl: 8px;
101+
--border-radius-base: 4px;
102+
--border-radius-s: 3px;
103+
--border-radius-xs: 2px;
104+
/* other */
105+
--input-height: 48px;
106+
--input-secondary-height: 48px;
107+
}

‎packages/kaizen-basic-components/atoms/label/a-label.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<label {{ attributes }}>{{ text }}</label>

0 commit comments

Comments
 (0)