Skip to content

Commit 91e2ada

Browse files
GrabowskiMGrabowskiM
authored
IBX-10156: Inputs foundation (#4)
1 parent f1e7757 commit 91e2ada

39 files changed

+853
-31
lines changed

‎.storybook/main.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const config = {
66
stories: ['../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../stories/*.stories.@(js|jsx|mjs|ts|tsx)'],
77
staticDirs: ['../packages/assets/src/'],
88
addons: [
9+
'@storybook/addon-docs',
910
'@storybook/addon-webpack5-compiler-swc',
1011
'@storybook/addon-a11y',
1112
'storybook-addon-pseudo-states',
@@ -50,6 +51,12 @@ const config = {
5051
use: ['raw-loader'],
5152
});
5253

54+
webpackConfig.resolve.alias = {
55+
...webpackConfig.resolve.alias,
56+
'@ids-context': path.resolve(__dirname, '../packages/components/src/context'),
57+
'@ids-internal': path.resolve(__dirname, '../packages/components/src/internal'),
58+
};
59+
5360
webpackConfig.plugins.push(new NodePolyfillPlugin());
5461

5562
return webpackConfig;

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@ibexa/ts-config": "https://github.com/ibexa/ts-config-ibexa#~v1.1.0",
2727
"@storybook/addon-a11y": "^9.0.4",
2828
"@storybook/addon-coverage": "^1.0.5",
29+
"@storybook/addon-docs": "^9.0.8",
2930
"@storybook/addon-styling-webpack": "^2.0.0",
3031
"@storybook/addon-webpack5-compiler-swc": "^3.0.0",
3132
"@storybook/react": "^9.0.4",
@@ -34,6 +35,7 @@
3435
"@types/react": "^19.1.6",
3536
"@types/react-dom": "^19.1.6",
3637
"@vitest/coverage-v8": "^3.2.1",
38+
"babel-plugin-module-resolver": "^5.0.2",
3739
"jsdom": "^26.1.0",
3840
"node-polyfill-webpack-plugin": "^4.1.0",
3941
"prop-types": "^15.8.1",

‎packages/assets/src/scss/_accordion.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
}
1717

1818
&__content {
19-
transition: height $admin-transition-duration $admin-transition;
19+
transition: height $transition-duration $transition-timing-function;
2020
overflow: hidden;
2121
height: 0;
2222
display: none;

‎packages/assets/src/scss/_autosave.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
justify-content: center;
88
color: $color-neutral-160;
99
font-size: $text-font-size-s;
10-
transition: all $admin-transition-duration $admin-transition;
10+
transition: all $transition-duration $transition-timing-function;
1111

1212
.ids-icon {
1313
fill: $color-neutral-160;

‎packages/assets/src/scss/_buttons.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ $btns-sizes: (
163163
white-space: nowrap;
164164
padding: calculateRem(14px) calculateRem(15px);
165165
outline: none;
166-
border-radius: calculateRem(8px);
166+
border-radius: $border-radius-medium;
167167
text-decoration: none;
168168
font-size: $text-font-size-m;
169169
line-height: calculateRem(18px);
@@ -172,7 +172,7 @@ $btns-sizes: (
172172
fill: var(--ids-default-text-color);
173173
background: var(--ids-default-bg-color);
174174
border: calculateRem(1px) solid var(--ids-default-border-color);
175-
transition: all 1s $admin-transition;
175+
transition: all 1s $transition-timing-function;
176176

177177
&:focus {
178178
color: var(--ids-focus-text-color);

‎packages/assets/src/scss/_helper-text.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@use 'sass:map';
2+
@use 'functions' as *;
3+
@use 'variables' as *;
4+
5+
$helper-text-types: (
6+
'default': $color-neutral-160,
7+
'error': $color-error-80,
8+
);
9+
10+
.ids-helper-text {
11+
$self: &;
12+
13+
font-size: $text-font-size-m;
14+
color: #{map.get($helper-text-types, 'default')};
15+
display: flex;
16+
17+
&__icon-wrapper {
18+
display: flex;
19+
align-items: center;
20+
height: $text-font-size-m * $base-line-height;
21+
padding-right: calculateRem(4px);
22+
}
23+
24+
@each $name, $color in $helper-text-types {
25+
&--#{$name} {
26+
color: $color;
27+
28+
#{$self}__icon {
29+
fill: $color;
30+
}
31+
}
32+
}
33+
}

‎packages/assets/src/scss/_icons.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ $icons-sizes:
1515
.ids-icon {
1616
width: calculateRem(32px);
1717
height: calculateRem(32px);
18-
transition: fill 0.3s $admin-transition;
18+
transition: fill 0.3s $transition-timing-function;
1919

2020
@each $name, $size in $icons-sizes {
2121
&--#{$name} {

‎packages/assets/src/scss/_input.scss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@use 'sass:map';
2+
@use 'functions' as *;
3+
@use 'variables' as *;
4+
@use 'mixins/icons' as mixins;
5+
6+
$input-sizes: (
7+
'small': (
8+
'font-size': $text-font-size-s,
9+
'padding': calculateRem(7px) calculateRem(16px) calculateRem(7px),
10+
),
11+
'medium': (
12+
'font-size': $text-font-size-m,
13+
'padding': calculateRem(9px) calculateRem(16px) calculateRem(10px),
14+
),
15+
);
16+
17+
.ids-input {
18+
border-radius: $border-radius-medium;
19+
background: var(--ids-input-default-bg-color, #{$color-neutral-10});
20+
border: calculateRem(1px) solid var(--ids-input-default-border-color, #{$color-neutral-80});
21+
color: var(--ids-input-default-text-color, #{$color-neutral-240});
22+
outline: 0;
23+
24+
@each $name, $properties in $input-sizes {
25+
&--#{$name} {
26+
font-size: map.get($properties, 'font-size');
27+
padding: map.get($properties, 'padding');
28+
}
29+
}
30+
31+
&.ids-input--error {
32+
background: var(--ids-input-error-bg-color, #{$color-error-20});
33+
border-color: var(--ids-input-error-border-color, #{$color-error-80});
34+
color: var(--ids-input-error-text-color, #{$color-error-90});
35+
}
36+
37+
&.ids-input--disabled,
38+
&.disabled,
39+
&[disabled],
40+
&:disabled {
41+
color: var(--ids-input-disabled-text-color, #{$color-neutral-150});
42+
background: var(--ids-input-disabled-bg-color, #{$color-neutral-40});
43+
border-color: var(--ids-input-disabled-border-color, #{$color-neutral-80});
44+
pointer-events: none;
45+
}
46+
47+
&:hover {
48+
border-color: var(--ids-input-hover-border-color, #{$color-primary-80});
49+
}
50+
51+
&:active {
52+
border-color: var(--ids-input-active-border-color, #{$color-primary-90});
53+
}
54+
55+
&:focus {
56+
border-color: var(--ids-input-focus-border-color, #{$color-primary-80});
57+
box-shadow: var(--ids-input-focus-box-shadow, #{$box-shadow-focus-primary});
58+
}
59+
}

‎packages/assets/src/scss/_label.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@use 'variables' as *;
2+
3+
.ids-label {
4+
font-size: $text-font-size-s;
5+
color: var(--ids-label-default-text-color, #{$color-neutral-160});
6+
7+
&--required {
8+
&::after {
9+
content: '*';
10+
}
11+
}
12+
13+
&--error {
14+
color: var(--ids-label-error-text-color, #{$color-error-80});
15+
}
16+
}

‎packages/assets/src/scss/_root.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@use 'functions/calculate.rem' as *;
2-
@use 'variables';
2+
@use 'variables' as *;
33

44
html {
55
font-size: $base-font-size;
6-
line-height: 1.5;
6+
line-height: $base-line-height;
77
letter-spacing: calculateRem(0.12px);
88
}
99

1010
body {
11-
font-family: variables.$font-family;
11+
font-family: $font-family;
1212
}

0 commit comments

Comments
 (0)