@licklist/design 0.53.0-dev.0 → 0.53.0-dev.2

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.
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,2FAqEvB,CAAC"}
1
+ {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,2FA4EvB,CAAC"}
@@ -1 +1 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=require("react-bootstrap"),a=e(require("clsx")),u=t.forwardRef((function(e,t){var u=e.className,o=void 0===u?"":u,l=e.value,i=e.onChange,d=e.onArrowDown,m=e.onArrowUp,c=e.min,p=e.max,b=e.placeholder,s=e.defaultValue,f=e.disabled,v=a("payment-number-input",o);return n.createElement("div",{className:v},n.createElement("button",{type:"button",onClick:function(){void 0!==c&&l>c&&d(l-1),void 0===c&&m(l-1)},className:"payment-number-input__btn-down",disabled:f},"−"),n.createElement(r.FormControl,{type:"number",onChange:function(e){return i(Number(e.target.value))},value:l,min:c,max:p,defaultValue:s,placeholder:b,height:"5rem",disabled:f,ref:t}),n.createElement("button",{type:"button",onClick:function(){void 0!==p&&(l||0)<p&&m(l+1),void 0===p&&m(l+1)},className:"payment-number-input__btn-up",disabled:f},"+"))}));u.displayName="NumberInput",exports.NumberInput=u;
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),a=require("react-bootstrap"),r=e(require("clsx")),u=t.forwardRef((function(e,t){var u=e.className,o=void 0===u?"":u,i=e.value,l=e.onChange,d=e.onArrowDown,c=e.onArrowUp,m=e.min,b=e.max,p=e.placeholder,s=e.defaultValue,f=e.disabled,v=!i,y=void 0!==b&&i===b,N=r("payment-number-input",o);return n.createElement("div",{className:N},n.createElement("button",{type:"button",onClick:function(){void 0!==m&&i>m&&d(i-1),void 0===m&&c(i-1)},className:"payment-number-input__btn-down ".concat(v&&"disabled-number-input-button"),disabled:f},"−"),n.createElement(a.FormControl,{type:"number",onChange:function(e){return l(Number(e.target.value))},value:i,min:m,max:b,defaultValue:s,placeholder:p,height:"5rem",disabled:f,ref:t}),n.createElement("button",{type:"button",onClick:function(){void 0!==b&&(i||0)<b&&c(i+1),void 0===b&&c(i+1)},className:"payment-number-input__btn-up ".concat(y&&"disabled-number-input-button"),disabled:f},"+"))}));u.displayName="NumberInput",exports.NumberInput=u;
@@ -188,8 +188,12 @@
188
188
  }
189
189
  }
190
190
 
191
- @include media-breakpoint-between(md, lg) {
192
- flex-wrap: nowrap;
191
+ @include media-breakpoint-down(xl) {
192
+ flex-wrap: wrap;
193
+
194
+ .apply-container {
195
+ margin-left: 4rem;
196
+ }
193
197
 
194
198
  .date-container {
195
199
  width: auto;
@@ -59,7 +59,8 @@
59
59
  color: $snippet-elements-button-color;
60
60
  border: none;
61
61
  background-color: $snippet-elements-button-background-color;
62
- box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
62
+ box-shadow: 0 0 0 $input-btn-focus-width
63
+ $snippet-elements-button-background-color;
63
64
  }
64
65
 
65
66
  &:disabled {
@@ -72,14 +73,14 @@
72
73
  &:focus,
73
74
  &.focus {
74
75
  &:not(:disabled) {
75
- opacity: .7;
76
+ opacity: 0.7;
76
77
  }
77
78
  }
78
79
 
79
80
  &:active,
80
81
  &.active {
81
82
  &:not(:disabled) {
82
- opacity: .8;
83
+ opacity: 0.8;
83
84
  }
84
85
  }
85
86
  }
@@ -90,7 +91,7 @@
90
91
  }
91
92
 
92
93
  &__label {
93
- font-size: .8rem;
94
+ font-size: 0.8rem;
94
95
  margin-top: 1rem;
95
96
  margin-bottom: 0.2rem;
96
97
  }
@@ -103,8 +104,8 @@
103
104
  position: absolute;
104
105
  top: 0;
105
106
  right: 0;
106
- margin-right: .5rem;
107
- margin-top: .5rem;
107
+ margin-right: 0.5rem;
108
+ margin-top: 0.5rem;
108
109
  }
109
110
 
110
111
  .form-label {
@@ -181,7 +182,8 @@
181
182
  color: $snippet-elements-button-color;
182
183
  border: none;
183
184
  background-color: $snippet-elements-button-background-color;
184
- box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
185
+ box-shadow: 0 0 0 $input-btn-focus-width
186
+ $snippet-elements-button-background-color;
185
187
  }
186
188
 
187
189
  &:disabled {
@@ -194,14 +196,14 @@
194
196
  &:focus,
195
197
  &.focus {
196
198
  &:not(:disabled) {
197
- opacity: .7;
199
+ opacity: 0.7;
198
200
  }
199
201
  }
200
202
 
201
203
  &:active,
202
204
  &.active {
203
205
  &:not(:disabled) {
204
- opacity: .8;
206
+ opacity: 0.8;
205
207
  }
206
208
  }
207
209
  }
@@ -336,7 +338,8 @@
336
338
  }
337
339
  }
338
340
 
339
- .bottom-wrapper, .snippet-template__form {
341
+ .bottom-wrapper,
342
+ .snippet-template__form {
340
343
  .btn {
341
344
  border-radius: 0.25rem;
342
345
  width: 100%;
@@ -381,6 +384,10 @@
381
384
  }
382
385
  }
383
386
 
387
+ .disabled-number-input-button {
388
+ background-color: $snippet-calendar-disabled-button-font-color !important;
389
+ border-color: $snippet-calendar-disabled-button-font-color !important;
390
+ }
384
391
  .color-picker {
385
392
  &__color {
386
393
  position: absolute;
@@ -442,7 +449,6 @@
442
449
  }
443
450
  }
444
451
  }
445
-
446
452
  }
447
453
 
448
454
  @include media-breakpoint-down(xs) {
@@ -197,6 +197,7 @@ $grid-breakpoints: (
197
197
  md: 768px,
198
198
  lg: 992px,
199
199
  xl: 1200px,
200
+ xxl: 1500px,
200
201
  ) !default;
201
202
 
202
203
  @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@@ -211,6 +212,7 @@ $container-max-widths: (
211
212
  md: 720px,
212
213
  lg: 960px,
213
214
  xl: 1140px,
215
+ xxl: 1500px,
214
216
  ) !default;
215
217
 
216
218
  @include _assert-ascending($container-max-widths, "$container-max-widths");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.53.0-dev.0",
3
+ "version": "0.53.0-dev.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -31,6 +31,9 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
31
31
  },
32
32
  ref
33
33
  ) => {
34
+ const minusButtonGreyedOut = !value;
35
+ const plusButtonGreyedOut = max !== undefined && value === max;
36
+
34
37
  const handleArrowUpClick = () => {
35
38
  if (max !== undefined && (value || 0) < max) {
36
39
  onArrowUp(value + 1);
@@ -56,7 +59,9 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
56
59
  <button
57
60
  type="button"
58
61
  onClick={handleArrowDownClick}
59
- className="payment-number-input__btn-down"
62
+ className={`payment-number-input__btn-down ${
63
+ minusButtonGreyedOut && "disabled-number-input-button"
64
+ }`}
60
65
  disabled={disabled}
61
66
  >
62
67
  &minus;
@@ -76,7 +81,9 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
76
81
  <button
77
82
  type="button"
78
83
  onClick={handleArrowUpClick}
79
- className="payment-number-input__btn-up"
84
+ className={`payment-number-input__btn-up ${
85
+ plusButtonGreyedOut && "disabled-number-input-button"
86
+ }`}
80
87
  disabled={disabled}
81
88
  >
82
89
  &#43;
@@ -188,8 +188,12 @@
188
188
  }
189
189
  }
190
190
 
191
- @include media-breakpoint-between(md, lg) {
192
- flex-wrap: nowrap;
191
+ @include media-breakpoint-down(xl) {
192
+ flex-wrap: wrap;
193
+
194
+ .apply-container {
195
+ margin-left: 4rem;
196
+ }
193
197
 
194
198
  .date-container {
195
199
  width: auto;
@@ -59,7 +59,8 @@
59
59
  color: $snippet-elements-button-color;
60
60
  border: none;
61
61
  background-color: $snippet-elements-button-background-color;
62
- box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
62
+ box-shadow: 0 0 0 $input-btn-focus-width
63
+ $snippet-elements-button-background-color;
63
64
  }
64
65
 
65
66
  &:disabled {
@@ -72,14 +73,14 @@
72
73
  &:focus,
73
74
  &.focus {
74
75
  &:not(:disabled) {
75
- opacity: .7;
76
+ opacity: 0.7;
76
77
  }
77
78
  }
78
79
 
79
80
  &:active,
80
81
  &.active {
81
82
  &:not(:disabled) {
82
- opacity: .8;
83
+ opacity: 0.8;
83
84
  }
84
85
  }
85
86
  }
@@ -90,7 +91,7 @@
90
91
  }
91
92
 
92
93
  &__label {
93
- font-size: .8rem;
94
+ font-size: 0.8rem;
94
95
  margin-top: 1rem;
95
96
  margin-bottom: 0.2rem;
96
97
  }
@@ -103,8 +104,8 @@
103
104
  position: absolute;
104
105
  top: 0;
105
106
  right: 0;
106
- margin-right: .5rem;
107
- margin-top: .5rem;
107
+ margin-right: 0.5rem;
108
+ margin-top: 0.5rem;
108
109
  }
109
110
 
110
111
  .form-label {
@@ -181,7 +182,8 @@
181
182
  color: $snippet-elements-button-color;
182
183
  border: none;
183
184
  background-color: $snippet-elements-button-background-color;
184
- box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
185
+ box-shadow: 0 0 0 $input-btn-focus-width
186
+ $snippet-elements-button-background-color;
185
187
  }
186
188
 
187
189
  &:disabled {
@@ -194,14 +196,14 @@
194
196
  &:focus,
195
197
  &.focus {
196
198
  &:not(:disabled) {
197
- opacity: .7;
199
+ opacity: 0.7;
198
200
  }
199
201
  }
200
202
 
201
203
  &:active,
202
204
  &.active {
203
205
  &:not(:disabled) {
204
- opacity: .8;
206
+ opacity: 0.8;
205
207
  }
206
208
  }
207
209
  }
@@ -336,7 +338,8 @@
336
338
  }
337
339
  }
338
340
 
339
- .bottom-wrapper, .snippet-template__form {
341
+ .bottom-wrapper,
342
+ .snippet-template__form {
340
343
  .btn {
341
344
  border-radius: 0.25rem;
342
345
  width: 100%;
@@ -381,6 +384,10 @@
381
384
  }
382
385
  }
383
386
 
387
+ .disabled-number-input-button {
388
+ background-color: $snippet-calendar-disabled-button-font-color !important;
389
+ border-color: $snippet-calendar-disabled-button-font-color !important;
390
+ }
384
391
  .color-picker {
385
392
  &__color {
386
393
  position: absolute;
@@ -442,7 +449,6 @@
442
449
  }
443
450
  }
444
451
  }
445
-
446
452
  }
447
453
 
448
454
  @include media-breakpoint-down(xs) {
@@ -197,6 +197,7 @@ $grid-breakpoints: (
197
197
  md: 768px,
198
198
  lg: 992px,
199
199
  xl: 1200px,
200
+ xxl: 1500px,
200
201
  ) !default;
201
202
 
202
203
  @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@@ -211,6 +212,7 @@ $container-max-widths: (
211
212
  md: 720px,
212
213
  lg: 960px,
213
214
  xl: 1140px,
215
+ xxl: 1500px,
214
216
  ) !default;
215
217
 
216
218
  @include _assert-ascending($container-max-widths, "$container-max-widths");