@linzjs/lui 11.12.0 → 12.1.1

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.
Files changed (19) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/components/LuiForms/LuiComboSelect/LuiComboSelect.d.ts +12 -2
  3. package/dist/components/LuiForms/LuiComboSelect/LuiComboSelect.stories.d.ts +102 -14
  4. package/dist/lui.cjs.development.js +44 -15
  5. package/dist/lui.cjs.development.js.map +1 -1
  6. package/dist/lui.cjs.production.min.js +1 -1
  7. package/dist/lui.cjs.production.min.js.map +1 -1
  8. package/dist/lui.css +122 -60
  9. package/dist/lui.css.map +1 -1
  10. package/dist/lui.esm.js +44 -15
  11. package/dist/lui.esm.js.map +1 -1
  12. package/dist/scss/Components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.scss +5 -1
  13. package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss +39 -22
  14. package/dist/scss/Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss +47 -24
  15. package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss +17 -19
  16. package/dist/scss/Components/LuiForms/LuiComboSelect/LuiComboSelect.scss +35 -0
  17. package/dist/scss/Foundation/Variables/_LuiColors.scss +2 -1
  18. package/dist/scss/base.scss +1 -0
  19. package/package.json +1 -1
package/dist/scss/Components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.scss CHANGED
@@ -110,7 +110,11 @@ $border-size: 2px;
110
110
  .LuiCheckboxInput-input:checked + .LuiCheckboxInput-label::before,
111
111
  .LuiCheckboxInput--isChecked .LuiCheckboxInput-label::before {
112
112
  color: white;
113
- background: luiColors.$sea url('../assets/icons/tick.svg') no-repeat 50% 50%;
113
+ // base64 encoded version of `assets/icons/tick.svg`. referring to svg via it's path causes downstream import errors.
114
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxMSI+CiAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNLjI5NyA0LjkzNGExLjAxMyAxLjAxMyAwIDAgMSAxLjM0NC0uMDc4bC4wODguMDc4TDUuMjU0IDguNDYgMTIuMjE5LjM1M2ExLjAxMyAxLjAxMyAwIDAgMSAxLjMzNC0uMThsLjA5NC4wNzJjLjM5NC4zMzguNDY0LjkxNC4xOCAxLjMzNGwtLjA3Mi4wOTQtNy42NzYgOC45MzVhMS4wMTMgMS4wMTMgMCAwIDEtMS4zOTguMTM0bC0uMDg3LS4wNzhMLjI5NyA2LjM2N2ExLjAxMyAxLjAxMyAwIDAgMSAwLTEuNDMzWiIvPgo8L3N2Zz4=');
115
+ background-color: luiColors.$sea;
116
+ background-repeat: no-repeat;
117
+ background-position: 50% 50%;
114
118
  background-size: 15px;
115
119
  }
116
120
 
package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss CHANGED
@@ -1,10 +1,13 @@
1
1
  @use '../../../Foundation/Variables/FormVars' as luiForms;
2
2
  @use '../../../Foundation/Variables/FontVars' as luiFonts;
3
3
  @use '../../../Foundation/Variables/LuiColors' as luiColors;
4
+ @use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
5
+ @use '../../../Foundation/Variables/MiscVars' as MiscVars;
6
+ @use '../../../Foundation/Utilities/REM' as rem;
4
7
 
5
- .LuiSelect {
6
- margin-bottom: 24px;
7
- }
8
+
9
+ // No top or bottom margins set on the component at the LUI level as we never know what is coming before or after the component.
10
+ // Set spacing once you have it in your project
8
11
 
9
12
  .LuiSelect-label-text {
10
13
  @include luiForms.formLabel();
@@ -13,15 +16,15 @@
13
16
  .LuiSelect-select {
14
17
  @include luiFonts.font-regular();
15
18
  margin-bottom: 0;
16
- border: 1px solid #b2b2b2;
17
- border-radius: 4px;
19
+ border: 1px solid luiColors.$silver;
20
+ border-radius: MiscVars.$borderRadius;
18
21
  display: block;
19
- height: 48px;
20
- color: #000000;
21
- caret-color: #000000;
22
+ height: luiSpacing.$unit-xl;
23
+ color: luiColors.$charcoal;
24
+ caret-color: luiColors.$charcoal;
22
25
  padding: {
23
- right: 32px;
24
- left: 16px;
26
+ right: luiSpacing.$unit-lg;
27
+ left: luiSpacing.$base-unit * 2; // 16px
25
28
  }
26
29
  width: 100%;
27
30
  transition: all 0.15 ease-in-out;
@@ -29,24 +32,23 @@
29
32
 
30
33
  &:hover,
31
34
  &:active {
32
- border-color: #053d52;
35
+ border-color: luiColors.$input-focus;
33
36
  cursor: pointer;
34
37
  }
35
38
 
36
39
  &:focus {
37
40
  outline: none;
38
- border-color: #053d52;
41
+ border-color: luiColors.$input-focus;
39
42
  }
40
43
 
41
44
  .hasError & {
42
- border-color: #eb5757;
45
+ border-color: luiColors.$error;
43
46
  }
44
47
 
45
48
  .isDisabled & {
46
- border-color: #b2b2b2;
47
- background-color: #fff;
48
- color: #b2b2b2;
49
- opacity: 0.3;
49
+ border-color: luiColors.$silver;
50
+ background-color: luiColors.$lily;
51
+ color: luiColors.$charcoal;
50
52
  cursor: not-allowed;
51
53
  }
52
54
 
@@ -61,6 +63,20 @@
61
63
 
62
64
  .LuiSelect-wrapper {
63
65
  position: relative;
66
+ .hasError & {
67
+ &:before {
68
+ content: '';
69
+ display: block;
70
+ position: absolute;
71
+ width: luiSpacing.$unit-sm;
72
+ top: 0;
73
+ bottom: 0;
74
+ left: -6px;
75
+ background-color: luiColors.$error;
76
+ border-radius: MiscVars.$borderRadius 0 0 MiscVars.$borderRadius;
77
+ z-index: -1;
78
+ }
79
+ }
64
80
  }
65
81
 
66
82
  .LuiSelect-chevron-icon {
@@ -74,12 +90,13 @@
74
90
  .LuiSelect-error {
75
91
  position: relative;
76
92
  display: flex;
77
- color: #eb5757;
93
+ @include luiFonts.font-semibold;
94
+ color: luiColors.$error;
78
95
  text-align: left;
79
- padding-left: 22px;
80
- font-size: 14px;
81
- line-height: 20px;
82
- margin-top: 2px;
96
+ padding-left: luiSpacing.$unit-md;
97
+ font-size: rem.rem(14px);
98
+ line-height: rem.rem(20px);
99
+ margin-top: luiSpacing.$unit-xxs;
83
100
  }
84
101
 
85
102
  .LuiSelect-error-icon {
package/dist/scss/Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss CHANGED
@@ -3,28 +3,39 @@
3
3
  @use '../../../Foundation/Utilities/FluidType' as luiFluidType;
4
4
  @use '../../../Foundation/Variables/BreakpointVars' as luiBreakpoints;
5
5
  @use '../../../Foundation/Variables/LuiColors' as luiColors;
6
+ @use '../../../Foundation/Variables/MiscVars' as luiMisc;
7
+ @use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
8
+ @use '../../../Foundation/Utilities/REM' as rem;
9
+
6
10
 
7
11
  // =============================
8
12
  // TextArea
9
13
  // =============================
10
14
 
15
+ // No top or bottom margins set on the component at the LUI level as we never know what is coming before or after the component.
16
+ // Set spacing once you have it in your project
17
+
11
18
  .LuiTextAreaInput {
12
19
  width: 100%;
13
- margin-bottom: 24px;
14
20
  position: relative;
15
21
 
16
22
  textarea {
17
23
  @include luiFonts.font-regular;
18
- @include luiFluidType.fluidType--size(14px, 16px, 1px, luiBreakpoints.$breakpoint-xl);
24
+ @include luiFluidType.fluidType--size(
25
+ 14px,
26
+ 16px,
27
+ 1px,
28
+ luiBreakpoints.$breakpoint-xl
29
+ );
19
30
  @include luiForms.formPlaceholder;
20
- border-radius: 4px;
21
- border: solid 1px #b2b2b2;
22
- background: #fff;
31
+ border: solid 1px luiColors.$silver;
32
+ border-radius: luiMisc.$borderRadius;
33
+ background: luiColors.$white;
23
34
  padding: {
24
- top: 14px;
25
- right: 32px;
26
- bottom: 14px;
27
- left: 16px;
35
+ top: luiSpacing.$unit-sm;
36
+ right: luiSpacing.$unit-lg;
37
+ bottom: luiSpacing.$unit-sm;
38
+ left: luiSpacing.$unit-xs * 2;
28
39
  }
29
40
  box-sizing: border-box;
30
41
  width: 100%;
@@ -33,7 +44,7 @@
33
44
 
34
45
  &:focus {
35
46
  outline: none;
36
- border-color: #053d52;
47
+ border-color: luiColors.$input-focus;
37
48
  }
38
49
  }
39
50
 
@@ -43,21 +54,32 @@
43
54
  }
44
55
 
45
56
  &.hasError {
46
- textarea,
47
- select {
48
- border-color: #eb5757;
57
+ textarea {
58
+ border: 1px solid luiColors.$error;
59
+ }
60
+ .LuiTextAreaInput-wrapper {
61
+ position: relative;
62
+
63
+ &:before {
64
+ content: '';
65
+ display: block;
66
+ position: absolute;
67
+ width: luiSpacing.$unit-sm;
68
+ top: 0;
69
+ bottom: 0;
70
+ left: -6px;
71
+ background-color: luiColors.$error;
72
+ border-radius: luiMisc.$borderRadius 0 0 luiMisc.$borderRadius;
73
+ z-index: -1;
74
+ }
49
75
  }
50
76
  }
51
77
 
52
78
  &.isDisabled {
53
79
  textarea {
54
- border-color: #b2b2b2;
55
- background-color: #fff;
80
+ border-color: luiColors.$silver;
81
+ background-color: luiColors.$lily;
56
82
  cursor: not-allowed;
57
- opacity: 0.3;
58
- }
59
- label {
60
- opacity: 0.3;
61
83
  }
62
84
  }
63
85
  }
@@ -69,12 +91,13 @@
69
91
  .LuiTextAreaInput-error {
70
92
  position: relative;
71
93
  display: flex;
72
- color: #eb5757;
94
+ color: luiColors.$error;
95
+ @include luiFonts.font-semibold;
73
96
  text-align: left;
74
- padding-left: 22px;
75
- font-size: 14px;
76
- line-height: 20px;
77
- margin-top: 2px;
97
+ padding-left: luiSpacing.$unit-md;
98
+ font-size: rem.rem(14px);
99
+ line-height: rem.rem(20px);
100
+ margin-top: luiSpacing.$unit-xxs;
78
101
  }
79
102
 
80
103
  .LuiTextAreaInput-error-icon {
package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss CHANGED
@@ -2,7 +2,8 @@
2
2
  @use '../../../Foundation/Variables/FontVars' as luiFonts;
3
3
  @use '../../../Foundation/Variables/LuiColors' as luiColors;
4
4
  @use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
5
- @use '../../../Foundation/Utilities/REM.scss' as rem;
5
+ @use '../../../Foundation/Variables/MiscVars' as MiscVars;
6
+ @use '../../../Foundation/Utilities/REM' as rem;
6
7
 
7
8
  $input-spacing: luiSpacing.$unit-xs; // 8px
8
9
 
@@ -11,10 +12,6 @@ $label-line-height: luiSpacing.$unit-md;
11
12
 
12
13
  .LuiTextInput {
13
14
  margin-bottom: 24px;
14
-
15
- &--hasError {
16
-
17
- }
18
15
  }
19
16
 
20
17
  .LuiTextInput-label {
@@ -32,7 +29,7 @@ $label-line-height: luiSpacing.$unit-md;
32
29
  box-shadow: -1px 0 0 0 transparent;
33
30
  border-radius: 4px;
34
31
  transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s,
35
- border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
32
+ border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
36
33
 
37
34
  .hasError & {
38
35
  box-shadow: -8px 0px 0 0 luiColors.$error;
@@ -60,16 +57,16 @@ $label-line-height: luiSpacing.$unit-md;
60
57
  @include luiFonts.font-regular();
61
58
  @include luiForms.formPlaceholder;
62
59
  margin-bottom: 0;
63
- border: 1px solid #b2b2b2;
64
- border-radius: 4px;
65
- height: 48px;
66
- color: #000000;
67
- caret-color: #000000;
60
+ border: 1px solid luiColors.$silver;
61
+ border-radius: MiscVars.$borderRadius;
62
+ height: luiSpacing.$unit-xl;
63
+ color: luiColors.$charcoal;
64
+ caret-color: luiColors.$charcoal;
68
65
  padding: {
69
- top: 14px;
70
- right: 32px;
71
- bottom: 14px;
72
- left: 16px;
66
+ top: luiSpacing.$unit-sm;
67
+ right: luiSpacing.$unit-lg;
68
+ bottom: luiSpacing.$unit-sm;
69
+ left: luiSpacing.$unit-xs * 2;
73
70
  }
74
71
  width: 100%;
75
72
  transition: all 0.15 ease-in-out;
@@ -77,16 +74,16 @@ $label-line-height: luiSpacing.$unit-md;
77
74
 
78
75
  &:hover,
79
76
  &:active {
80
- border-color: #053d52;
77
+ border-color: luiColors.$input-focus;
81
78
  }
82
79
 
83
80
  &:focus {
84
81
  outline: none;
85
- border-color: #053d52;
82
+ border-color: luiColors.$input-focus;
86
83
  }
87
84
 
88
85
  .hasError & {
89
- border-color: luiColors.$error !important;
86
+ border-color: luiColors.$error;
90
87
  }
91
88
 
92
89
  .isDisabled & {
@@ -97,7 +94,8 @@ $label-line-height: luiSpacing.$unit-md;
97
94
  }
98
95
 
99
96
  .LuiTextInput-padlock-icon {
100
- background-image: url('../assets/icons/lock.svg');
97
+ // base64 encoded version of `assets/icons/lock.svg`. referring to svg via it's path causes downstream import errors.
98
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyMiI+PHBhdGggZD0iTTE0IDcuNUgxM1Y1LjVDMTMgMi43NCAxMC43NiAwLjUgOCAwLjVDNS4yNCAwLjUgMyAyLjc0IDMgNS41VjcuNUgyQzAuOSA3LjUgMCA4LjQgMCA5LjVWMTkuNUMwIDIwLjYgMC45IDIxLjUgMiAyMS41SDE0QzE1LjEgMjEuNSAxNiAyMC42IDE2IDE5LjVWOS41QzE2IDguNCAxNS4xIDcuNSAxNCA3LjVaTTggMTYuNUM2LjkgMTYuNSA2IDE1LjYgNiAxNC41QzYgMTMuNCA2LjkgMTIuNSA4IDEyLjVDOS4xIDEyLjUgMTAgMTMuNCAxMCAxNC41QzEwIDE1LjYgOS4xIDE2LjUgOCAxNi41Wk0xMS4xIDcuNUg0LjlWNS41QzQuOSAzLjc5IDYuMjkgMi40IDggMi40QzkuNzEgMi40IDExLjEgMy43OSAxMS4xIDUuNVY3LjVaIiBmaWxsPSIjNkI2OTY2IiAvPjwvc3ZnPg==');
101
99
  background-repeat: no-repeat;
102
100
  background-position: right 12px center;
103
101
  background-size: 16px 21px;
package/dist/scss/Components/LuiForms/LuiComboSelect/LuiComboSelect.scss ADDED
@@ -0,0 +1,35 @@
1
+ @use '../../../Foundation/Variables/FormVars' as luiForms;
2
+ @use '../../../Foundation/Variables/LuiColors' as luiColors;
3
+ @use '../../../Foundation/Variables/FontVars' as luiFonts;
4
+ @use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
5
+ @use '../../../Foundation/Utilities/REM' as rem;
6
+
7
+ .LuiComboSelect-label-text {
8
+ @include luiForms.formLabel();
9
+ }
10
+
11
+ .hasError {
12
+ .LuiComboSelect__control {
13
+ border-color: luiColors.$error;
14
+ box-shadow: -8px 0px 0 0 luiColors.$error;
15
+ border-radius: 4px;
16
+ }
17
+ }
18
+
19
+ .LuiComboSelect-error {
20
+ position: relative;
21
+ display: flex;
22
+ @include luiFonts.font-semibold;
23
+ color: luiColors.$error;
24
+ text-align: left;
25
+ padding-left: luiSpacing.$unit-md;
26
+ font-size: rem.rem(14px);
27
+ line-height: rem.rem(20px);
28
+ margin-top: luiSpacing.$unit-xxs;
29
+ }
30
+
31
+ .LuiComboSelect-error-icon {
32
+ position: absolute;
33
+ left: 0;
34
+ top: 2px;
35
+ }
package/dist/scss/Foundation/Variables/_LuiColors.scss CHANGED
@@ -17,7 +17,7 @@ $spray: #73c8e1;
17
17
  $polar: #e2f3f7;
18
18
  $linz-linear-gradient-blue: linear-gradient(70deg, $teal 12%, $sea 100%);
19
19
 
20
- // Tealsno
20
+ // Teals
21
21
  $sherpa: #004b50;
22
22
  $surfie: #017a76;
23
23
  $persian: #00a599;
@@ -128,6 +128,7 @@ $input-placeholder-when-disabled: $gray;
128
128
  $base-icon-color: $sea;
129
129
  $disabled-color: $gray;
130
130
  $disabled-color-dark: $gray;
131
+ $input-focus: $teal;
131
132
 
132
133
  //LINZ public site colour variables
133
134
 
package/dist/scss/base.scss CHANGED
@@ -65,6 +65,7 @@
65
65
  @forward "./Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss";
66
66
  @forward "./Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss";
67
67
  @forward "./Components/LuiFormElements/LuiTextInput/LuiTextInput.scss";
68
+ @forward "./Components/LuiForms/LuiComboSelect/LuiComboSelect.scss";
68
69
  @forward "./Components/LuiFormElements/LuiFileInputBox.scss";
69
70
  @forward "./Components/LuiFormSection/LuiFormSectionHeader.scss";
70
71
  @forward "./Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "11.12.0",
2
+ "version": "12.1.1",
3
3
  "license": "MIT",
4
4
  "repository": {
5
5
  "type": "git",