@licklist/design 0.53.0-dev.0 → 0.53.0-dev.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 (6) hide show
  1. package/dist/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.d.ts.map +1 -1
  2. package/dist/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.js +1 -1
  3. package/dist/styles/snippet-templates/SnippetTemplate.scss +17 -11
  4. package/package.json +1 -1
  5. package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx +9 -2
  6. package/src/styles/snippet-templates/SnippetTemplate.scss +17 -11
package/dist/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.d.ts.map CHANGED
@@ -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"}
package/dist/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.js CHANGED
@@ -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;
package/dist/styles/snippet-templates/SnippetTemplate.scss CHANGED
@@ -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) {
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.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx CHANGED
@@ -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;
package/src/styles/snippet-templates/SnippetTemplate.scss CHANGED
@@ -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) {