@mirai/ui 1.0.265 → 1.0.267

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 (20) hide show
  1. package/README.md +14 -8
  2. package/build/components/Menu/Menu.module.css +0 -3
  3. package/build/components/Notification/Notification.module.css +5 -0
  4. package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap +289 -0
  5. package/build/components/Progress/Progress.js +1 -0
  6. package/build/components/Progress/Progress.js.map +1 -1
  7. package/build/components/Slider/Slider.js +26 -14
  8. package/build/components/Slider/Slider.js.map +1 -1
  9. package/build/components/Slider/Slider.module.css +13 -0
  10. package/build/components/Slider/Slider.stories.js +4 -2
  11. package/build/components/Slider/Slider.stories.js.map +1 -1
  12. package/build/components/Slider/__tests__/__snapshots__/Slider.test.js.snap +282 -48
  13. package/build/primitives/Checkbox/Checkbox.module.css +4 -0
  14. package/build/primitives/Icon/Icon.constants.js +2 -0
  15. package/build/primitives/Icon/Icon.constants.js.map +1 -1
  16. package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap +35 -0
  17. package/build/primitives/Pressable/Pressable.module.css +0 -1
  18. package/build/primitives/Radio/Radio.module.css +10 -1
  19. package/build/theme/default.theme.css +4 -0
  20. package/package.json +1 -1
package/README.md CHANGED
@@ -1066,6 +1066,8 @@ A Slider component receiving the following props:
1066
1066
  - `height:number` Height of component (required).
1067
1067
  - `images:arrayOf:string` images to show (required).
1068
1068
  - `index:number` If you want show a determinate image at atart.
1069
+ - `indicator:boolean` if true shows the amount of pictures viewed using a progress component.
1070
+ - `replay:boolean` restart slider when we go forwards after the last image
1069
1071
  - `thumbnails:arrayOf:string` if you want use thumbnails of images in fullScreen mode.
1070
1072
  - `width:number` width of component (required).
1071
1073
  - `onChange:function` executed when image (index) is visible
@@ -1316,17 +1318,21 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
1316
1318
  --mirai-ui-accent-light: #88aedc;
1317
1319
  --mirai-ui-accent-dark: #224876;
1318
1320
 
1319
- --mirai-ui-error: #cc003a;
1320
- --mirai-ui-error-background: #ffece5;
1321
+ --mirai-ui-error: #d32f2f;
1322
+ --mirai-ui-error-background: #fdeded;
1323
+ --mirai-ui-error-border: #fbdbdb;
1321
1324
 
1322
- --mirai-ui-warning: #ffad00;
1323
- --mirai-ui-warning-background: #fff3cc;
1325
+ --mirai-ui-warning: #663c00;
1326
+ --mirai-ui-warning-background: #fff4e5;
1327
+ --mirai-ui-warning-border: #ffe8ca;
1324
1328
 
1325
- --mirai-ui-success: #067949;
1326
- --mirai-ui-success-background: #e7fde7;
1329
+ --mirai-ui-success: #1e4620;
1330
+ --mirai-ui-success-background: #edf7ed;
1331
+ --mirai-ui-success-border: #dcefdc;
1327
1332
 
1328
- --mirai-ui-info: #005cb2;
1329
- --mirai-ui-info-background: #e6f8ff;
1333
+ --mirai-ui-info: #014361;
1334
+ --mirai-ui-info-background: #e6f5fd;
1335
+ --mirai-ui-info-border: #cceafa;
1330
1336
 
1331
1337
  /* spacing */
1332
1338
  --mirai-ui-space-XS: 8px;
package/build/components/Menu/Menu.module.css CHANGED
@@ -1,6 +1,3 @@
1
- .menu {
2
- }
3
-
4
1
  .menu.desktop {
5
2
  background-color: var(--mirai-ui-menu-base);
6
3
  border-radius: var(--mirai-ui-menu-border-radius);
package/build/components/Notification/Notification.module.css CHANGED
@@ -29,6 +29,7 @@
29
29
  background-color: var(--mirai-ui-content-background);
30
30
  border-radius: var(--mirai-ui-notification-border-radius);
31
31
  padding: var(--mirai-ui-notification-padding);
32
+ border: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
32
33
  }
33
34
 
34
35
  .notification.outlined.large {
@@ -41,18 +42,22 @@
41
42
 
42
43
  .notification.outlined.error {
43
44
  background-color: var(--mirai-ui-error-background);
45
+ border-color: var(--mirai-ui-error-border);
44
46
  }
45
47
 
46
48
  .notification.outlined.warning {
47
49
  background-color: var(--mirai-ui-warning-background);
50
+ border-color: var(--mirai-ui-warning-border);
48
51
  }
49
52
 
50
53
  .notification.outlined.success {
51
54
  background-color: var(--mirai-ui-success-background);
55
+ border-color: var(--mirai-ui-success-border);
52
56
  }
53
57
 
54
58
  .notification.outlined.info {
55
59
  background-color: var(--mirai-ui-info-background);
60
+ border-color: var(--mirai-ui-info-border);
56
61
  }
57
62
 
58
63
  /* -- <Text>s ------------------------------------------------------------------------------------------------------- */
package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap CHANGED
@@ -351,6 +351,84 @@ exports[`component:<Notification> prop:info 1`] = `
351
351
  </DocumentFragment>
352
352
  `;
353
353
 
354
+ exports[`component:<Notification> prop:inline 1`] = `
355
+ <DocumentFragment>
356
+ <div
357
+ class="view row notification inline"
358
+ >
359
+ <span
360
+ class="icon headline-2"
361
+ >
362
+ <svg
363
+ fill="currentColor"
364
+ height="1em"
365
+ stroke="currentColor"
366
+ stroke-width="0"
367
+ viewBox="0 0 24 24"
368
+ width="1em"
369
+ xmlns="http://www.w3.org/2000/svg"
370
+ >
371
+ <path
372
+ d="M0 0h24v24H0V0z"
373
+ fill="none"
374
+ />
375
+ <path
376
+ d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
377
+ />
378
+ </svg>
379
+ </span>
380
+ <div
381
+ class="view texts"
382
+ >
383
+ <span
384
+ class="text action"
385
+ >
386
+ Lorem Ipsum...
387
+ </span>
388
+ </div>
389
+ </div>
390
+ </DocumentFragment>
391
+ `;
392
+
393
+ exports[`component:<Notification> prop:large 1`] = `
394
+ <DocumentFragment>
395
+ <div
396
+ class="view row notification outlined large"
397
+ >
398
+ <span
399
+ class="icon headline-1"
400
+ >
401
+ <svg
402
+ fill="currentColor"
403
+ height="1em"
404
+ stroke="currentColor"
405
+ stroke-width="0"
406
+ viewBox="0 0 24 24"
407
+ width="1em"
408
+ xmlns="http://www.w3.org/2000/svg"
409
+ >
410
+ <path
411
+ d="M0 0h24v24H0V0z"
412
+ fill="none"
413
+ />
414
+ <path
415
+ d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
416
+ />
417
+ </svg>
418
+ </span>
419
+ <div
420
+ class="view texts"
421
+ >
422
+ <span
423
+ class="text action"
424
+ >
425
+ Lorem Ipsum...
426
+ </span>
427
+ </div>
428
+ </div>
429
+ </DocumentFragment>
430
+ `;
431
+
354
432
  exports[`component:<Notification> prop:onClose 1`] = `
355
433
  <DocumentFragment>
356
434
  <div
@@ -417,6 +495,45 @@ exports[`component:<Notification> prop:onClose 1`] = `
417
495
  </DocumentFragment>
418
496
  `;
419
497
 
498
+ exports[`component:<Notification> prop:small 1`] = `
499
+ <DocumentFragment>
500
+ <div
501
+ class="view row notification outlined small"
502
+ >
503
+ <span
504
+ class="icon headline-3"
505
+ >
506
+ <svg
507
+ fill="currentColor"
508
+ height="1em"
509
+ stroke="currentColor"
510
+ stroke-width="0"
511
+ viewBox="0 0 24 24"
512
+ width="1em"
513
+ xmlns="http://www.w3.org/2000/svg"
514
+ >
515
+ <path
516
+ d="M0 0h24v24H0V0z"
517
+ fill="none"
518
+ />
519
+ <path
520
+ d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
521
+ />
522
+ </svg>
523
+ </span>
524
+ <div
525
+ class="view texts"
526
+ >
527
+ <span
528
+ class="text small"
529
+ >
530
+ Lorem Ipsum...
531
+ </span>
532
+ </div>
533
+ </div>
534
+ </DocumentFragment>
535
+ `;
536
+
420
537
  exports[`component:<Notification> prop:success & inline 1`] = `
421
538
  <DocumentFragment>
422
539
  <div
@@ -617,6 +734,178 @@ exports[`component:<Notification> prop:title 1`] = `
617
734
  </DocumentFragment>
618
735
  `;
619
736
 
737
+ exports[`component:<Notification> prop:title 2`] = `
738
+ <DocumentFragment>
739
+ <div
740
+ class="view row notification error outlined"
741
+ >
742
+ <span
743
+ class="icon headline-2"
744
+ >
745
+ <svg
746
+ fill="currentColor"
747
+ height="1em"
748
+ stroke="currentColor"
749
+ stroke-width="0"
750
+ viewBox="0 0 24 24"
751
+ width="1em"
752
+ xmlns="http://www.w3.org/2000/svg"
753
+ >
754
+ <path
755
+ d="M0 0h24v24H0V0z"
756
+ fill="none"
757
+ />
758
+ <path
759
+ d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
760
+ />
761
+ </svg>
762
+ </span>
763
+ <div
764
+ class="view texts"
765
+ >
766
+ <span
767
+ class="text bold paragraph"
768
+ >
769
+ Title
770
+ </span>
771
+ <span
772
+ class="text action"
773
+ >
774
+ Lorem Ipsum...
775
+ </span>
776
+ </div>
777
+ </div>
778
+ </DocumentFragment>
779
+ `;
780
+
781
+ exports[`component:<Notification> prop:title 3`] = `
782
+ <DocumentFragment>
783
+ <div
784
+ class="view row notification warning outlined"
785
+ >
786
+ <span
787
+ class="icon headline-2"
788
+ >
789
+ <svg
790
+ fill="currentColor"
791
+ height="1em"
792
+ stroke="currentColor"
793
+ stroke-width="0"
794
+ viewBox="0 0 24 24"
795
+ width="1em"
796
+ xmlns="http://www.w3.org/2000/svg"
797
+ >
798
+ <path
799
+ d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
800
+ />
801
+ </svg>
802
+ </span>
803
+ <div
804
+ class="view texts"
805
+ >
806
+ <span
807
+ class="text bold paragraph"
808
+ >
809
+ Title
810
+ </span>
811
+ <span
812
+ class="text action"
813
+ >
814
+ Lorem Ipsum...
815
+ </span>
816
+ </div>
817
+ </div>
818
+ </DocumentFragment>
819
+ `;
820
+
821
+ exports[`component:<Notification> prop:title 4`] = `
822
+ <DocumentFragment>
823
+ <div
824
+ class="view row notification success outlined"
825
+ >
826
+ <span
827
+ class="icon headline-2"
828
+ >
829
+ <svg
830
+ fill="currentColor"
831
+ height="1em"
832
+ stroke="currentColor"
833
+ stroke-width="0"
834
+ viewBox="0 0 24 24"
835
+ width="1em"
836
+ xmlns="http://www.w3.org/2000/svg"
837
+ >
838
+ <path
839
+ d="M0 0h24v24H0V0zm0 0h24v24H0V0z"
840
+ fill="none"
841
+ />
842
+ <path
843
+ d="M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
844
+ />
845
+ </svg>
846
+ </span>
847
+ <div
848
+ class="view texts"
849
+ >
850
+ <span
851
+ class="text bold paragraph"
852
+ >
853
+ Title
854
+ </span>
855
+ <span
856
+ class="text action"
857
+ >
858
+ Lorem Ipsum...
859
+ </span>
860
+ </div>
861
+ </div>
862
+ </DocumentFragment>
863
+ `;
864
+
865
+ exports[`component:<Notification> prop:title 5`] = `
866
+ <DocumentFragment>
867
+ <div
868
+ class="view row notification info outlined"
869
+ >
870
+ <span
871
+ class="icon headline-2"
872
+ >
873
+ <svg
874
+ fill="currentColor"
875
+ height="1em"
876
+ stroke="currentColor"
877
+ stroke-width="0"
878
+ viewBox="0 0 24 24"
879
+ width="1em"
880
+ xmlns="http://www.w3.org/2000/svg"
881
+ >
882
+ <path
883
+ d="M0 0h24v24H0V0z"
884
+ fill="none"
885
+ />
886
+ <path
887
+ d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
888
+ />
889
+ </svg>
890
+ </span>
891
+ <div
892
+ class="view texts"
893
+ >
894
+ <span
895
+ class="text bold paragraph"
896
+ >
897
+ Title
898
+ </span>
899
+ <span
900
+ class="text action"
901
+ >
902
+ Lorem Ipsum...
903
+ </span>
904
+ </div>
905
+ </div>
906
+ </DocumentFragment>
907
+ `;
908
+
620
909
  exports[`component:<Notification> prop:warning & inline 1`] = `
621
910
  <DocumentFragment>
622
911
  <div
package/build/components/Progress/Progress.js CHANGED
@@ -26,6 +26,7 @@ var Progress = function Progress(_ref) {
26
26
  role: others.role || 'progress',
27
27
  className: (0, _helpers.styles)(_ProgressModule.default.progress, visible && _ProgressModule.default.visible, others.className)
28
28
  }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
29
+ role: "progress-value",
29
30
  className: (0, _helpers.styles)(_ProgressModule.default.value, indeterminate && _ProgressModule.default.indeterminate),
30
31
  style: !indeterminate ? {
31
32
  width: "".concat(value, "%")
package/build/components/Progress/Progress.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Progress.js","names":["Progress","indeterminate","value","visible","others","role","styles","style","progress","className","width","undefined","displayName","propTypes","PropTypes","bool","number"],"sources":["../../../src/components/Progress/Progress.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { View } from '../../primitives';\nimport style from './Progress.module.css';\n\nconst Progress = ({ indeterminate = false, value = 0, visible = false, ...others }) => (\n <View\n {...others}\n role={others.role || 'progress'}\n className={styles(style.progress, visible && style.visible, others.className)}\n >\n <View\n className={styles(style.value, indeterminate && style.indeterminate)}\n style={!indeterminate ? { width: `${value}%` } : undefined}\n />\n </View>\n);\n\nProgress.displayName = 'Component:Progress';\n\nProgress.propTypes = {\n indeterminate: PropTypes.bool,\n value: PropTypes.number,\n visible: PropTypes.bool,\n};\n\nexport { Progress };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAE1C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ;EAAA,8BAAMC,aAAa;IAAbA,aAAa,mCAAG,KAAK;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAKC,MAAM;EAAA,oBAC9E,6BAAC,gBAAI,eACCA,MAAM;IACV,IAAI,EAAEA,MAAM,CAACC,IAAI,IAAI,UAAW;IAChC,SAAS,EAAE,IAAAC,eAAM,EAACC,uBAAK,CAACC,QAAQ,EAAEL,OAAO,IAAII,uBAAK,CAACJ,OAAO,EAAEC,MAAM,CAACK,SAAS;EAAE,iBAE9E,6BAAC,gBAAI;IACH,SAAS,EAAE,IAAAH,eAAM,EAACC,uBAAK,CAACL,KAAK,EAAED,aAAa,IAAIM,uBAAK,CAACN,aAAa,CAAE;IACrE,KAAK,EAAE,CAACA,aAAa,GAAG;MAAES,KAAK,YAAKR,KAAK;IAAI,CAAC,GAAGS;EAAU,EAC3D,CACG;AAAA,CACR;AAAC;AAEFX,QAAQ,CAACY,WAAW,GAAG,oBAAoB;AAE3CZ,QAAQ,CAACa,SAAS,GAAG;EACnBZ,aAAa,EAAEa,kBAAS,CAACC,IAAI;EAC7Bb,KAAK,EAAEY,kBAAS,CAACE,MAAM;EACvBb,OAAO,EAAEW,kBAAS,CAACC;AACrB,CAAC"}
1
+ {"version":3,"file":"Progress.js","names":["Progress","indeterminate","value","visible","others","role","styles","style","progress","className","width","undefined","displayName","propTypes","PropTypes","bool","number"],"sources":["../../../src/components/Progress/Progress.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { View } from '../../primitives';\nimport style from './Progress.module.css';\n\nconst Progress = ({ indeterminate = false, value = 0, visible = false, ...others }) => (\n <View\n {...others}\n role={others.role || 'progress'}\n className={styles(style.progress, visible && style.visible, others.className)}\n >\n <View\n role=\"progress-value\"\n className={styles(style.value, indeterminate && style.indeterminate)}\n style={!indeterminate ? { width: `${value}%` } : undefined}\n />\n </View>\n);\n\nProgress.displayName = 'Component:Progress';\n\nProgress.propTypes = {\n indeterminate: PropTypes.bool,\n value: PropTypes.number,\n visible: PropTypes.bool,\n};\n\nexport { Progress };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAE1C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ;EAAA,8BAAMC,aAAa;IAAbA,aAAa,mCAAG,KAAK;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAKC,MAAM;EAAA,oBAC9E,6BAAC,gBAAI,eACCA,MAAM;IACV,IAAI,EAAEA,MAAM,CAACC,IAAI,IAAI,UAAW;IAChC,SAAS,EAAE,IAAAC,eAAM,EAACC,uBAAK,CAACC,QAAQ,EAAEL,OAAO,IAAII,uBAAK,CAACJ,OAAO,EAAEC,MAAM,CAACK,SAAS;EAAE,iBAE9E,6BAAC,gBAAI;IACH,IAAI,EAAC,gBAAgB;IACrB,SAAS,EAAE,IAAAH,eAAM,EAACC,uBAAK,CAACL,KAAK,EAAED,aAAa,IAAIM,uBAAK,CAACN,aAAa,CAAE;IACrE,KAAK,EAAE,CAACA,aAAa,GAAG;MAAES,KAAK,YAAKR,KAAK;IAAI,CAAC,GAAGS;EAAU,EAC3D,CACG;AAAA,CACR;AAAC;AAEFX,QAAQ,CAACY,WAAW,GAAG,oBAAoB;AAE3CZ,QAAQ,CAACa,SAAS,GAAG;EACnBZ,aAAa,EAAEa,kBAAS,CAACC,IAAI;EAC7Bb,KAAK,EAAEY,kBAAS,CAACE,MAAM;EACvBb,OAAO,EAAEW,kBAAS,CAACC;AACrB,CAAC"}
package/build/components/Slider/Slider.js CHANGED
@@ -11,9 +11,10 @@ var _helpers = require("../../helpers");
11
11
  var _hooks = require("../../hooks");
12
12
  var _primitives = require("../../primitives");
13
13
  var _theme = require("../../theme");
14
+ var _Progress = require("../Progress");
14
15
  var _Slider = require("./Slider.constants");
15
16
  var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
16
- var _excluded = ["auto", "behavior", "captions", "height", "images", "index", "width", "onChange", "onCounter"];
17
+ var _excluded = ["auto", "behavior", "captions", "height", "images", "index", "indicator", "replay", "width", "onChange", "onCounter"];
17
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
18
19
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -46,6 +47,10 @@ var Slider = function Slider(_ref) {
46
47
  images = _ref$images === void 0 ? [] : _ref$images,
47
48
  _ref$index = _ref.index,
48
49
  propIndex = _ref$index === void 0 ? 0 : _ref$index,
50
+ _ref$indicator = _ref.indicator,
51
+ indicator = _ref$indicator === void 0 ? false : _ref$indicator,
52
+ _ref$replay = _ref.replay,
53
+ replay = _ref$replay === void 0 ? true : _ref$replay,
49
54
  _ref$width = _ref.width,
50
55
  propWidth = _ref$width === void 0 ? 320 : _ref$width,
51
56
  _ref$onChange = _ref.onChange,
@@ -89,7 +94,7 @@ var Slider = function Slider(_ref) {
89
94
  var width = propWidth;
90
95
  var handleIndex = function handleIndex(nextIndex) {
91
96
  setDisabledScroll(true);
92
- setIndex(Math.abs(nextIndex) * (defaultDirection ? 1 : -1));
97
+ setIndex(Math.abs(nextIndex) === images.length ? 0 : Math.abs(nextIndex) * (defaultDirection ? 1 : -1));
93
98
  };
94
99
  var handleScroll = function handleScroll() {
95
100
  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -98,6 +103,8 @@ var Slider = function Slider(_ref) {
98
103
  if (nextIndex !== index) setIndex(nextIndex);
99
104
  };
100
105
  var defaultDirection = _theme.Theme.getDirection() === _theme.DIRECTION_TYPE.LEFT;
106
+ var hasImages = images.length > 1;
107
+ var isEnd = Math.abs(index) >= images.length - 1;
101
108
  return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
102
109
  role: "slider",
103
110
  onMouseEnter: isDesktop ? function () {
@@ -114,9 +121,9 @@ var Slider = function Slider(_ref) {
114
121
  onPress: function onPress() {
115
122
  return handleIndex(index - 1);
116
123
  },
117
- className: (0, _helpers.styles)(_SliderModule.default.button, ((defaultDirection ? index <= 0 : index >= images.length - 1) || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.first)
124
+ className: (0, _helpers.styles)(_SliderModule.default.button, ((defaultDirection ? index <= 0 : replay ? false : isEnd) || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.first)
118
125
  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
119
- value: _primitives.ICON.LEFT
126
+ value: replay && !defaultDirection && isEnd ? _primitives.ICON.REPLAY : _primitives.ICON.LEFT
120
127
  })), /*#__PURE__*/_react.default.createElement(_primitives.ScrollView, {
121
128
  behavior: behavior,
122
129
  horizontal: true,
@@ -134,7 +141,7 @@ var Slider = function Slider(_ref) {
134
141
  role: "image",
135
142
  className: _SliderModule.default.image,
136
143
  style: {
137
- backgroundImage: imageIndex >= Math.abs(index) - _Slider.PRELOAD_IMAGES && imageIndex <= Math.abs(index) + _Slider.PRELOAD_IMAGES ? "url(".concat(image, ")") : undefined,
144
+ backgroundImage: replay || imageIndex >= Math.abs(index) - _Slider.PRELOAD_IMAGES && imageIndex <= Math.abs(index) + _Slider.PRELOAD_IMAGES ? "url(".concat(image, ")") : undefined,
138
145
  height: height,
139
146
  width: width
140
147
  }
@@ -145,7 +152,14 @@ var Slider = function Slider(_ref) {
145
152
  small: true,
146
153
  className: [_SliderModule.default.overlay, _SliderModule.default.text]
147
154
  }, captions[imageIndex])));
148
- }), images.length > 1 && onCounter && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
155
+ })), /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
156
+ onPress: function onPress() {
157
+ return handleIndex(index + 1);
158
+ },
159
+ className: (0, _helpers.styles)(_SliderModule.default.button, ((defaultDirection ? replay ? false : isEnd : index === 0) || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.second)
160
+ }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
161
+ value: replay && defaultDirection && index === images.length - 1 ? _primitives.ICON.REPLAY : _primitives.ICON.RIGHT
162
+ })), hasImages && onCounter && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
149
163
  onPress: onCounter,
150
164
  className: (0, _helpers.styles)(_SliderModule.default.overlay, _SliderModule.default.counter, !defaultDirection && _SliderModule.default.reverse)
151
165
  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
@@ -154,14 +168,10 @@ var Slider = function Slider(_ref) {
154
168
  }), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
155
169
  bold: true,
156
170
  small: true
157
- }, images.length))), /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
158
- onPress: function onPress() {
159
- return handleIndex(index + 1);
160
- },
161
- className: (0, _helpers.styles)(_SliderModule.default.button, ((defaultDirection ? index >= images.length - 1 : index === 0) || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.second)
162
- }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
163
- value: _primitives.ICON.RIGHT
164
- })));
171
+ }, images.length)), indicator && /*#__PURE__*/_react.default.createElement(_Progress.Progress, {
172
+ value: index * 100 / (images.length - 1),
173
+ className: (0, _helpers.styles)(_SliderModule.default.progress, index > 0 && _SliderModule.default.visible)
174
+ }));
165
175
  };
166
176
  exports.Slider = Slider;
167
177
  Slider.displayName = 'Component:Slider';
@@ -172,6 +182,8 @@ Slider.propTypes = {
172
182
  height: _propTypes.default.number.isRequired,
173
183
  images: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
174
184
  index: _propTypes.default.number,
185
+ indicator: _propTypes.default.bool,
186
+ replay: _propTypes.default.bool,
175
187
  width: _propTypes.default.number.isRequired,
176
188
  onChange: _propTypes.default.func,
177
189
  onCounter: _propTypes.default.func
package/build/components/Slider/Slider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","SCROLL_DELAY","handleIndex","nextIndex","Math","abs","defaultDirection","handleScroll","x","round","Theme","getDirection","DIRECTION_TYPE","LEFT","undefined","styles","style","container","className","button","hide","first","ICON","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","overlay","text","counter","reverse","PHOTO_LIBRARY","second","RIGHT","displayName","propTypes","PropTypes","bool","string","arrayOf","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { PRELOAD_IMAGES, SCROLL_DELAY } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n auto = false,\n behavior = 'smooth',\n captions = [],\n height: propHeight = 240,\n images = [],\n index: propIndex = 0,\n width: propWidth = 320,\n onChange = () => {},\n onCounter,\n ...others\n}) => {\n const { isDesktop } = useDevice();\n\n const [disabledScroll, setDisabledScroll] = useState(true);\n const [focus, setFocus] = useState(false);\n const [index, setIndex] = useState(propIndex);\n\n useEffect(() => {\n if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n return () => clearInterval(interval);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [auto, index]);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => {\n clearTimeout(timeout);\n timeout = setTimeout(() => setDisabledScroll(false), SCROLL_DELAY);\n\n onChange(index);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [index]);\n\n const height = propHeight;\n\n const width = propWidth;\n\n const handleIndex = (nextIndex) => {\n setDisabledScroll(true);\n setIndex(Math.abs(nextIndex) * (defaultDirection ? 1 : -1));\n };\n\n const handleScroll = ({ x } = {}) => {\n const nextIndex = x < width ? 0 : Math.round(x / width);\n\n if (nextIndex !== index) setIndex(nextIndex);\n };\n\n const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n\n return (\n <View\n {...others}\n role=\"slider\"\n onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n className={styles(style.container, others.className)}\n style={{ ...others.style, width }}\n >\n <Pressable\n onPress={() => handleIndex(index - 1)}\n className={styles(\n style.button,\n ((defaultDirection ? index <= 0 : index >= images.length - 1) || (isDesktop && !focus)) && style.hide,\n style.first,\n )}\n >\n <Icon value={ICON.LEFT} />\n </Pressable>\n\n <ScrollView\n behavior={behavior}\n horizontal\n scrollEventThrottle={SCROLL_DELAY}\n scrollTo={index * Math.floor(width)}\n snap\n width={width}\n onScroll={disabledScroll ? undefined : handleScroll}\n className={style.scrollView}\n >\n {images.map((image, imageIndex) => (\n <View key={imageIndex} className={style.item}>\n <View\n role=\"image\"\n className={style.image}\n style={{\n backgroundImage:\n imageIndex >= Math.abs(index) - PRELOAD_IMAGES && imageIndex <= Math.abs(index) + PRELOAD_IMAGES\n ? `url(${image})`\n : undefined,\n height,\n width,\n }}\n />\n {captions[imageIndex] && (\n <View className={style.caption}>\n <Text bold small className={[style.overlay, style.text]}>\n {captions[imageIndex]}\n </Text>\n </View>\n )}\n </View>\n ))}\n\n {images.length > 1 && onCounter && (\n <Pressable\n onPress={onCounter}\n className={styles(style.overlay, style.counter, !defaultDirection && style.reverse)}\n >\n <Icon action value={ICON.PHOTO_LIBRARY} />\n <Text bold small>\n {images.length}\n </Text>\n </Pressable>\n )}\n </ScrollView>\n\n <Pressable\n onPress={() => handleIndex(index + 1)}\n className={styles(\n style.button,\n ((defaultDirection ? index >= images.length - 1 : index === 0) || (isDesktop && !focus)) && style.hide,\n style.second,\n )}\n >\n <Icon value={ICON.RIGHT} />\n </Pressable>\n </View>\n );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n auto: PropTypes.bool,\n behavior: PropTypes.string,\n captions: PropTypes.arrayOf(PropTypes.string),\n height: PropTypes.number.isRequired,\n images: PropTypes.arrayOf(PropTypes.string).isRequired,\n index: PropTypes.number,\n width: PropTypes.number.isRequired,\n onChange: PropTypes.func,\n onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}
1
+ {"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","height","propHeight","images","index","propIndex","indicator","replay","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","SCROLL_DELAY","handleIndex","nextIndex","Math","abs","defaultDirection","handleScroll","x","round","Theme","getDirection","DIRECTION_TYPE","LEFT","hasImages","isEnd","undefined","styles","style","container","className","button","hide","first","ICON","REPLAY","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","overlay","text","second","RIGHT","counter","reverse","PHOTO_LIBRARY","progress","visible","displayName","propTypes","PropTypes","bool","string","arrayOf","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { Progress } from '../Progress';\nimport { PRELOAD_IMAGES, SCROLL_DELAY } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n auto = false,\n behavior = 'smooth',\n captions = [],\n height: propHeight = 240,\n images = [],\n index: propIndex = 0,\n indicator = false,\n replay = true,\n width: propWidth = 320,\n onChange = () => {},\n onCounter,\n ...others\n}) => {\n const { isDesktop } = useDevice();\n\n const [disabledScroll, setDisabledScroll] = useState(true);\n const [focus, setFocus] = useState(false);\n const [index, setIndex] = useState(propIndex);\n\n useEffect(() => {\n if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n return () => clearInterval(interval);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [auto, index]);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => {\n clearTimeout(timeout);\n timeout = setTimeout(() => setDisabledScroll(false), SCROLL_DELAY);\n\n onChange(index);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [index]);\n\n const height = propHeight;\n\n const width = propWidth;\n\n const handleIndex = (nextIndex) => {\n setDisabledScroll(true);\n setIndex(Math.abs(nextIndex) === images.length ? 0 : Math.abs(nextIndex) * (defaultDirection ? 1 : -1));\n };\n\n const handleScroll = ({ x } = {}) => {\n const nextIndex = x < width ? 0 : Math.round(x / width);\n\n if (nextIndex !== index) setIndex(nextIndex);\n };\n\n const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n const hasImages = images.length > 1;\n const isEnd = Math.abs(index) >= images.length - 1;\n\n return (\n <View\n {...others}\n role=\"slider\"\n onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n className={styles(style.container, others.className)}\n style={{ ...others.style, width }}\n >\n <Pressable\n onPress={() => handleIndex(index - 1)}\n className={styles(\n style.button,\n ((defaultDirection ? index <= 0 : replay ? false : isEnd) || (isDesktop && !focus)) && style.hide,\n style.first,\n )}\n >\n <Icon value={replay && !defaultDirection && isEnd ? ICON.REPLAY : ICON.LEFT} />\n </Pressable>\n\n <ScrollView\n behavior={behavior}\n horizontal\n scrollEventThrottle={SCROLL_DELAY}\n scrollTo={index * Math.floor(width)}\n snap\n width={width}\n onScroll={disabledScroll ? undefined : handleScroll}\n className={style.scrollView}\n >\n {images.map((image, imageIndex) => (\n <View key={imageIndex} className={style.item}>\n <View\n role=\"image\"\n className={style.image}\n style={{\n backgroundImage:\n replay ||\n (imageIndex >= Math.abs(index) - PRELOAD_IMAGES && imageIndex <= Math.abs(index) + PRELOAD_IMAGES)\n ? `url(${image})`\n : undefined,\n height,\n width,\n }}\n />\n {captions[imageIndex] && (\n <View className={style.caption}>\n <Text bold small className={[style.overlay, style.text]}>\n {captions[imageIndex]}\n </Text>\n </View>\n )}\n </View>\n ))}\n </ScrollView>\n\n <Pressable\n onPress={() => handleIndex(index + 1)}\n className={styles(\n style.button,\n ((defaultDirection ? (replay ? false : isEnd) : index === 0) || (isDesktop && !focus)) && style.hide,\n style.second,\n )}\n >\n <Icon value={replay && defaultDirection && index === images.length - 1 ? ICON.REPLAY : ICON.RIGHT} />\n </Pressable>\n\n {hasImages && onCounter && (\n <Pressable\n onPress={onCounter}\n className={styles(style.overlay, style.counter, !defaultDirection && style.reverse)}\n >\n <Icon action value={ICON.PHOTO_LIBRARY} />\n <Text bold small>\n {images.length}\n </Text>\n </Pressable>\n )}\n\n {indicator && (\n <Progress\n value={(index * 100) / (images.length - 1)}\n className={styles(style.progress, index > 0 && style.visible)}\n />\n )}\n </View>\n );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n auto: PropTypes.bool,\n behavior: PropTypes.string,\n captions: PropTypes.arrayOf(PropTypes.string),\n height: PropTypes.number.isRequired,\n images: PropTypes.arrayOf(PropTypes.string).isRequired,\n index: PropTypes.number,\n indicator: PropTypes.bool,\n replay: PropTypes.bool,\n width: PropTypes.number.isRequired,\n onChange: PropTypes.func,\n onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}
package/build/components/Slider/Slider.module.css CHANGED
@@ -91,6 +91,19 @@
91
91
  color: var(--mirai-ui-slider-overlay-color);
92
92
  }
93
93
 
94
+ .progress {
95
+ background-color: var(--mirai-ui-slider-overlay);
96
+ bottom: 0;
97
+ height: 0;
98
+ left: 0;
99
+ position: absolute;
100
+ right: 0;
101
+ }
102
+
103
+ .progress.visible {
104
+ height: calc(var(--mirai-ui-space-XS) / 1);
105
+ }
106
+
94
107
  /* S */
95
108
  @media only screen and (max-width: 430px) {
96
109
  }
package/build/components/Slider/Slider.stories.js CHANGED
@@ -38,15 +38,17 @@ Story.args = {
38
38
  behavior: 'smooth',
39
39
  captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],
40
40
  height: 208,
41
- index: 0,
42
41
  images: ['https://picsum.photos/seed/@soyjavi/1024/768', 'https://picsum.photos/seed/@jose/1024/768', 'https://picsum.photos/seed/@mario1/1024/768', 'https://picsum.photos/seed/@victor/1024/768', 'https://picsum.photos/seed/@svet/1024/768', 'https://picsum.photos/seed/@mario2/1024/768', 'https://picsum.photos/seed/1/1024/768', 'https://picsum.photos/seed/2/1024/768', 'https://picsum.photos/seed/3/1024/768', 'https://picsum.photos/seed/4/1024/768', 'https://picsum.photos/seed/5/1024/768', 'https://picsum.photos/seed/6/1024/768', 'https://picsum.photos/seed/7/1024/768', 'https://picsum.photos/seed/8/1024/768', 'https://picsum.photos/seed/9/1024/768', 'https://picsum.photos/seed/10/1024/768', 'https://picsum.photos/seed/11/1024/768', 'https://picsum.photos/seed/12/1024/768'],
43
42
  fullScreen: false,
44
43
  thumbnails: ['https://picsum.photos/seed/@soyjavi/128/128', 'https://picsum.photos/seed/@jose/128/128', 'https://picsum.photos/seed/@mario1/128/128', 'https://picsum.photos/seed/@victor/128/128', 'https://picsum.photos/seed/@svet/128/128', 'https://picsum.photos/seed/@mario2/128/128', 'https://picsum.photos/seed/1/128/128', 'https://picsum.photos/seed/2/128/128', 'https://picsum.photos/seed/3/128/128', 'https://picsum.photos/seed/4/128/128', 'https://picsum.photos/seed/5/128/128', 'https://picsum.photos/seed/6/128/128', 'https://picsum.photos/seed/7/128/128', 'https://picsum.photos/seed/8/128/128', 'https://picsum.photos/seed/9/128/128', 'https://picsum.photos/seed/10/128/128', 'https://picsum.photos/seed/11/128/128', 'https://picsum.photos/seed/12/128/128'],
44
+ index: 0,
45
+ indicator: true,
46
+ replay: true,
45
47
  width: 408,
46
48
  // inherited properties
47
49
  testId: 'test-story',
48
50
  style: {
49
- borderRadius: 16
51
+ borderRadius: 2
50
52
  }
51
53
  };
52
54
  Story.argTypes = {};
package/build/components/Slider/Slider.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","behavior","captions","undefined","height","index","images","fullScreen","thumbnails","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n <Slider\n {...props}\n onChange={(...params) => console.log('onChange', ...params)}\n onCounter={(...params) => console.log('onCounter', ...params)}\n />\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n auto: false,\n behavior: 'smooth',\n captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n height: 208,\n index: 0,\n images: [\n 'https://picsum.photos/seed/@soyjavi/1024/768',\n 'https://picsum.photos/seed/@jose/1024/768',\n 'https://picsum.photos/seed/@mario1/1024/768',\n 'https://picsum.photos/seed/@victor/1024/768',\n 'https://picsum.photos/seed/@svet/1024/768',\n 'https://picsum.photos/seed/@mario2/1024/768',\n 'https://picsum.photos/seed/1/1024/768',\n 'https://picsum.photos/seed/2/1024/768',\n 'https://picsum.photos/seed/3/1024/768',\n 'https://picsum.photos/seed/4/1024/768',\n 'https://picsum.photos/seed/5/1024/768',\n 'https://picsum.photos/seed/6/1024/768',\n 'https://picsum.photos/seed/7/1024/768',\n 'https://picsum.photos/seed/8/1024/768',\n 'https://picsum.photos/seed/9/1024/768',\n 'https://picsum.photos/seed/10/1024/768',\n 'https://picsum.photos/seed/11/1024/768',\n 'https://picsum.photos/seed/12/1024/768',\n ],\n fullScreen: false,\n thumbnails: [\n 'https://picsum.photos/seed/@soyjavi/128/128',\n 'https://picsum.photos/seed/@jose/128/128',\n 'https://picsum.photos/seed/@mario1/128/128',\n 'https://picsum.photos/seed/@victor/128/128',\n 'https://picsum.photos/seed/@svet/128/128',\n 'https://picsum.photos/seed/@mario2/128/128',\n 'https://picsum.photos/seed/1/128/128',\n 'https://picsum.photos/seed/2/128/128',\n 'https://picsum.photos/seed/3/128/128',\n 'https://picsum.photos/seed/4/128/128',\n 'https://picsum.photos/seed/5/128/128',\n 'https://picsum.photos/seed/6/128/128',\n 'https://picsum.photos/seed/7/128/128',\n 'https://picsum.photos/seed/8/128/128',\n 'https://picsum.photos/seed/9/128/128',\n 'https://picsum.photos/seed/10/128/128',\n 'https://picsum.photos/seed/11/128/128',\n 'https://picsum.photos/seed/12/128/128',\n ],\n width: 408,\n // inherited properties\n testId: 'test-story',\n style: { borderRadius: 16 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,cAAM,eACDA,KAAK;IACT,QAAQ,EAAE;MAAA;MAAA,kCAAIC,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,UAAU,SAAKF,MAAM,EAAC;IAAA,CAAC;IAC5D,SAAS,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,WAAW,SAAKF,MAAM,EAAC;IAAA;EAAC,GAC9D;AAAA,CACH;AAAC;AAEFF,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,QAAQ;EAClBC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,CACN,8CAA8C,EAC9C,2CAA2C,EAC3C,6CAA6C,EAC7C,6CAA6C,EAC7C,2CAA2C,EAC3C,6CAA6C,EAC7C,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC;EACDC,UAAU,EAAE,KAAK;EACjBC,UAAU,EAAE,CACV,6CAA6C,EAC7C,0CAA0C,EAC1C,4CAA4C,EAC5C,4CAA4C,EAC5C,0CAA0C,EAC1C,4CAA4C,EAC5C,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,CACxC;EACDC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAG;AAC5B,CAAC;AAEDnB,KAAK,CAACoB,QAAQ,GAAG,CAAC,CAAC"}
1
+ {"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","behavior","captions","undefined","height","images","fullScreen","thumbnails","index","indicator","replay","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n <Slider\n {...props}\n onChange={(...params) => console.log('onChange', ...params)}\n onCounter={(...params) => console.log('onCounter', ...params)}\n />\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n auto: false,\n behavior: 'smooth',\n captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n height: 208,\n images: [\n 'https://picsum.photos/seed/@soyjavi/1024/768',\n 'https://picsum.photos/seed/@jose/1024/768',\n 'https://picsum.photos/seed/@mario1/1024/768',\n 'https://picsum.photos/seed/@victor/1024/768',\n 'https://picsum.photos/seed/@svet/1024/768',\n 'https://picsum.photos/seed/@mario2/1024/768',\n 'https://picsum.photos/seed/1/1024/768',\n 'https://picsum.photos/seed/2/1024/768',\n 'https://picsum.photos/seed/3/1024/768',\n 'https://picsum.photos/seed/4/1024/768',\n 'https://picsum.photos/seed/5/1024/768',\n 'https://picsum.photos/seed/6/1024/768',\n 'https://picsum.photos/seed/7/1024/768',\n 'https://picsum.photos/seed/8/1024/768',\n 'https://picsum.photos/seed/9/1024/768',\n 'https://picsum.photos/seed/10/1024/768',\n 'https://picsum.photos/seed/11/1024/768',\n 'https://picsum.photos/seed/12/1024/768',\n ],\n fullScreen: false,\n thumbnails: [\n 'https://picsum.photos/seed/@soyjavi/128/128',\n 'https://picsum.photos/seed/@jose/128/128',\n 'https://picsum.photos/seed/@mario1/128/128',\n 'https://picsum.photos/seed/@victor/128/128',\n 'https://picsum.photos/seed/@svet/128/128',\n 'https://picsum.photos/seed/@mario2/128/128',\n 'https://picsum.photos/seed/1/128/128',\n 'https://picsum.photos/seed/2/128/128',\n 'https://picsum.photos/seed/3/128/128',\n 'https://picsum.photos/seed/4/128/128',\n 'https://picsum.photos/seed/5/128/128',\n 'https://picsum.photos/seed/6/128/128',\n 'https://picsum.photos/seed/7/128/128',\n 'https://picsum.photos/seed/8/128/128',\n 'https://picsum.photos/seed/9/128/128',\n 'https://picsum.photos/seed/10/128/128',\n 'https://picsum.photos/seed/11/128/128',\n 'https://picsum.photos/seed/12/128/128',\n ],\n index: 0,\n indicator: true,\n replay: true,\n width: 408,\n // inherited properties\n testId: 'test-story',\n style: { borderRadius: 2 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,cAAM,eACDA,KAAK;IACT,QAAQ,EAAE;MAAA;MAAA,kCAAIC,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,UAAU,SAAKF,MAAM,EAAC;IAAA,CAAC;IAC5D,SAAS,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,WAAW,SAAKF,MAAM,EAAC;IAAA;EAAC,GAC9D;AAAA,CACH;AAAC;AAEFF,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,QAAQ;EAClBC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,MAAM,EAAE,GAAG;EACXC,MAAM,EAAE,CACN,8CAA8C,EAC9C,2CAA2C,EAC3C,6CAA6C,EAC7C,6CAA6C,EAC7C,2CAA2C,EAC3C,6CAA6C,EAC7C,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC;EACDC,UAAU,EAAE,KAAK;EACjBC,UAAU,EAAE,CACV,6CAA6C,EAC7C,0CAA0C,EAC1C,4CAA4C,EAC5C,4CAA4C,EAC5C,0CAA0C,EAC1C,4CAA4C,EAC5C,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,CACxC;EACDC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,IAAI;EACfC,MAAM,EAAE,IAAI;EACZC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAE;AAC3B,CAAC;AAEDrB,KAAK,CAACsB,QAAQ,GAAG,CAAC,CAAC"}
package/build/components/Slider/__tests__/__snapshots__/Slider.test.js.snap CHANGED
@@ -64,7 +64,7 @@ exports[`component:<Slider> inherit:className 1`] = `
64
64
  >
65
65
  <div
66
66
  class="view image"
67
- style="height: 230px; width: 360px;"
67
+ style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
68
68
  />
69
69
  </div>
70
70
  <div
@@ -72,7 +72,7 @@ exports[`component:<Slider> inherit:className 1`] = `
72
72
  >
73
73
  <div
74
74
  class="view image"
75
- style="height: 230px; width: 360px;"
75
+ style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
76
76
  />
77
77
  </div>
78
78
  <div
@@ -80,7 +80,7 @@ exports[`component:<Slider> inherit:className 1`] = `
80
80
  >
81
81
  <div
82
82
  class="view image"
83
- style="height: 230px; width: 360px;"
83
+ style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
84
84
  />
85
85
  </div>
86
86
  </div>
@@ -177,7 +177,7 @@ exports[`component:<Slider> prop:auto 1`] = `
177
177
  >
178
178
  <div
179
179
  class="view image"
180
- style="height: 230px; width: 360px;"
180
+ style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
181
181
  />
182
182
  </div>
183
183
  <div
@@ -185,7 +185,7 @@ exports[`component:<Slider> prop:auto 1`] = `
185
185
  >
186
186
  <div
187
187
  class="view image"
188
- style="height: 230px; width: 360px;"
188
+ style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
189
189
  />
190
190
  </div>
191
191
  <div
@@ -193,7 +193,7 @@ exports[`component:<Slider> prop:auto 1`] = `
193
193
  >
194
194
  <div
195
195
  class="view image"
196
- style="height: 230px; width: 360px;"
196
+ style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
197
197
  />
198
198
  </div>
199
199
  </div>
@@ -290,7 +290,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
290
290
  >
291
291
  <div
292
292
  class="view image"
293
- style="height: 230px; width: 360px;"
293
+ style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
294
294
  />
295
295
  </div>
296
296
  <div
@@ -298,7 +298,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
298
298
  >
299
299
  <div
300
300
  class="view image"
301
- style="height: 230px; width: 360px;"
301
+ style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
302
302
  />
303
303
  </div>
304
304
  <div
@@ -306,7 +306,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
306
306
  >
307
307
  <div
308
308
  class="view image"
309
- style="height: 230px; width: 360px;"
309
+ style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
310
310
  />
311
311
  </div>
312
312
  </div>
@@ -421,7 +421,7 @@ exports[`component:<Slider> prop:captions 1`] = `
421
421
  >
422
422
  <div
423
423
  class="view image"
424
- style="height: 230px; width: 360px;"
424
+ style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
425
425
  />
426
426
  <div
427
427
  class="view caption"
@@ -438,7 +438,7 @@ exports[`component:<Slider> prop:captions 1`] = `
438
438
  >
439
439
  <div
440
440
  class="view image"
441
- style="height: 230px; width: 360px;"
441
+ style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
442
442
  />
443
443
  <div
444
444
  class="view caption"
@@ -455,7 +455,7 @@ exports[`component:<Slider> prop:captions 1`] = `
455
455
  >
456
456
  <div
457
457
  class="view image"
458
- style="height: 230px; width: 360px;"
458
+ style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
459
459
  />
460
460
  <div
461
461
  class="view caption"
@@ -537,7 +537,7 @@ exports[`component:<Slider> prop:index 1`] = `
537
537
  >
538
538
  <div
539
539
  class="view image"
540
- style="height: 230px; width: 360px;"
540
+ style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
541
541
  />
542
542
  </div>
543
543
  <div
@@ -545,7 +545,7 @@ exports[`component:<Slider> prop:index 1`] = `
545
545
  >
546
546
  <div
547
547
  class="view image"
548
- style="height: 230px; width: 360px;"
548
+ style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
549
549
  />
550
550
  </div>
551
551
  <div
@@ -610,7 +610,7 @@ exports[`component:<Slider> prop:index 1`] = `
610
610
  </DocumentFragment>
611
611
  `;
612
612
 
613
- exports[`component:<Slider> prop:onCounter 1`] = `
613
+ exports[`component:<Slider> prop:indicator 1`] = `
614
614
  <DocumentFragment>
615
615
  <div
616
616
  class="view container"
@@ -674,7 +674,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
674
674
  >
675
675
  <div
676
676
  class="view image"
677
- style="height: 230px; width: 360px;"
677
+ style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
678
678
  />
679
679
  </div>
680
680
  <div
@@ -682,7 +682,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
682
682
  >
683
683
  <div
684
684
  class="view image"
685
- style="height: 230px; width: 360px;"
685
+ style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
686
686
  />
687
687
  </div>
688
688
  <div
@@ -690,38 +690,129 @@ exports[`component:<Slider> prop:onCounter 1`] = `
690
690
  >
691
691
  <div
692
692
  class="view image"
693
- style="height: 230px; width: 360px;"
693
+ style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
694
694
  />
695
695
  </div>
696
- <div
697
- class="pressable overlay counter"
696
+ </div>
697
+ <div
698
+ class="pressable button hide second"
699
+ >
700
+ <span
701
+ class="icon headline-3"
698
702
  >
699
- <span
700
- class="icon action"
703
+ <svg
704
+ fill="currentColor"
705
+ height="1em"
706
+ stroke="currentColor"
707
+ stroke-width="0"
708
+ viewBox="0 0 24 24"
709
+ width="1em"
710
+ xmlns="http://www.w3.org/2000/svg"
701
711
  >
702
- <svg
703
- fill="currentColor"
704
- height="1em"
705
- stroke="currentColor"
706
- stroke-width="0"
707
- viewBox="0 0 24 24"
708
- width="1em"
709
- xmlns="http://www.w3.org/2000/svg"
710
- >
711
- <path
712
- d="M0 0h24v24H0V0z"
713
- fill="none"
714
- />
715
- <path
716
- d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"
717
- />
718
- </svg>
719
- </span>
720
- <span
721
- class="text bold small"
712
+ <path
713
+ d="M0 0h24v24H0V0z"
714
+ fill="none"
715
+ />
716
+ <path
717
+ d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
718
+ />
719
+ </svg>
720
+ </span>
721
+ </div>
722
+ <div
723
+ class="view progress progress"
724
+ >
725
+ <div
726
+ class="view value"
727
+ style="width: 0%;"
728
+ />
729
+ </div>
730
+ </div>
731
+ </DocumentFragment>
732
+ `;
733
+
734
+ exports[`component:<Slider> prop:onCounter 1`] = `
735
+ <DocumentFragment>
736
+ <div
737
+ class="view container"
738
+ style="width: 360px;"
739
+ >
740
+ <div
741
+ class="pressable button hide first"
742
+ >
743
+ <span
744
+ class="icon headline-3"
745
+ >
746
+ <svg
747
+ fill="currentColor"
748
+ height="1em"
749
+ stroke="currentColor"
750
+ stroke-width="0"
751
+ viewBox="0 0 24 24"
752
+ width="1em"
753
+ xmlns="http://www.w3.org/2000/svg"
722
754
  >
723
- 6
724
- </span>
755
+ <path
756
+ d="M0 0h24v24H0V0z"
757
+ fill="none"
758
+ />
759
+ <path
760
+ d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
761
+ />
762
+ </svg>
763
+ </span>
764
+ </div>
765
+ <div
766
+ class="scrollview snap horizontal notIndicator scrollView"
767
+ style="width: 360px;"
768
+ >
769
+ <div
770
+ class="view item"
771
+ >
772
+ <div
773
+ class="view image"
774
+ style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
775
+ />
776
+ </div>
777
+ <div
778
+ class="view item"
779
+ >
780
+ <div
781
+ class="view image"
782
+ style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
783
+ />
784
+ </div>
785
+ <div
786
+ class="view item"
787
+ >
788
+ <div
789
+ class="view image"
790
+ style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
791
+ />
792
+ </div>
793
+ <div
794
+ class="view item"
795
+ >
796
+ <div
797
+ class="view image"
798
+ style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
799
+ />
800
+ </div>
801
+ <div
802
+ class="view item"
803
+ >
804
+ <div
805
+ class="view image"
806
+ style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
807
+ />
808
+ </div>
809
+ <div
810
+ class="view item"
811
+ >
812
+ <div
813
+ class="view image"
814
+ style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
815
+ />
725
816
  </div>
726
817
  </div>
727
818
  <div
@@ -749,11 +840,41 @@ exports[`component:<Slider> prop:onCounter 1`] = `
749
840
  </svg>
750
841
  </span>
751
842
  </div>
843
+ <div
844
+ class="pressable overlay counter"
845
+ >
846
+ <span
847
+ class="icon action"
848
+ >
849
+ <svg
850
+ fill="currentColor"
851
+ height="1em"
852
+ stroke="currentColor"
853
+ stroke-width="0"
854
+ viewBox="0 0 24 24"
855
+ width="1em"
856
+ xmlns="http://www.w3.org/2000/svg"
857
+ >
858
+ <path
859
+ d="M0 0h24v24H0V0z"
860
+ fill="none"
861
+ />
862
+ <path
863
+ d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"
864
+ />
865
+ </svg>
866
+ </span>
867
+ <span
868
+ class="text bold small"
869
+ >
870
+ 6
871
+ </span>
872
+ </div>
752
873
  </div>
753
874
  </DocumentFragment>
754
875
  `;
755
876
 
756
- exports[`component:<Slider> renders 1`] = `
877
+ exports[`component:<Slider> prop:replay (false) 1`] = `
757
878
  <DocumentFragment>
758
879
  <div
759
880
  class="view container"
@@ -866,6 +987,119 @@ exports[`component:<Slider> renders 1`] = `
866
987
  </DocumentFragment>
867
988
  `;
868
989
 
990
+ exports[`component:<Slider> renders 1`] = `
991
+ <DocumentFragment>
992
+ <div
993
+ class="view container"
994
+ style="width: 360px;"
995
+ >
996
+ <div
997
+ class="pressable button hide first"
998
+ >
999
+ <span
1000
+ class="icon headline-3"
1001
+ >
1002
+ <svg
1003
+ fill="currentColor"
1004
+ height="1em"
1005
+ stroke="currentColor"
1006
+ stroke-width="0"
1007
+ viewBox="0 0 24 24"
1008
+ width="1em"
1009
+ xmlns="http://www.w3.org/2000/svg"
1010
+ >
1011
+ <path
1012
+ d="M0 0h24v24H0V0z"
1013
+ fill="none"
1014
+ />
1015
+ <path
1016
+ d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
1017
+ />
1018
+ </svg>
1019
+ </span>
1020
+ </div>
1021
+ <div
1022
+ class="scrollview snap horizontal notIndicator scrollView"
1023
+ style="width: 360px;"
1024
+ >
1025
+ <div
1026
+ class="view item"
1027
+ >
1028
+ <div
1029
+ class="view image"
1030
+ style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
1031
+ />
1032
+ </div>
1033
+ <div
1034
+ class="view item"
1035
+ >
1036
+ <div
1037
+ class="view image"
1038
+ style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
1039
+ />
1040
+ </div>
1041
+ <div
1042
+ class="view item"
1043
+ >
1044
+ <div
1045
+ class="view image"
1046
+ style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
1047
+ />
1048
+ </div>
1049
+ <div
1050
+ class="view item"
1051
+ >
1052
+ <div
1053
+ class="view image"
1054
+ style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
1055
+ />
1056
+ </div>
1057
+ <div
1058
+ class="view item"
1059
+ >
1060
+ <div
1061
+ class="view image"
1062
+ style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
1063
+ />
1064
+ </div>
1065
+ <div
1066
+ class="view item"
1067
+ >
1068
+ <div
1069
+ class="view image"
1070
+ style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
1071
+ />
1072
+ </div>
1073
+ </div>
1074
+ <div
1075
+ class="pressable button hide second"
1076
+ >
1077
+ <span
1078
+ class="icon headline-3"
1079
+ >
1080
+ <svg
1081
+ fill="currentColor"
1082
+ height="1em"
1083
+ stroke="currentColor"
1084
+ stroke-width="0"
1085
+ viewBox="0 0 24 24"
1086
+ width="1em"
1087
+ xmlns="http://www.w3.org/2000/svg"
1088
+ >
1089
+ <path
1090
+ d="M0 0h24v24H0V0z"
1091
+ fill="none"
1092
+ />
1093
+ <path
1094
+ d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
1095
+ />
1096
+ </svg>
1097
+ </span>
1098
+ </div>
1099
+ </div>
1100
+ </DocumentFragment>
1101
+ `;
1102
+
869
1103
  exports[`component:<Slider> testId 1`] = `
870
1104
  <DocumentFragment>
871
1105
  <div
@@ -931,7 +1165,7 @@ exports[`component:<Slider> testId 1`] = `
931
1165
  >
932
1166
  <div
933
1167
  class="view image"
934
- style="height: 230px; width: 360px;"
1168
+ style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
935
1169
  />
936
1170
  </div>
937
1171
  <div
@@ -939,7 +1173,7 @@ exports[`component:<Slider> testId 1`] = `
939
1173
  >
940
1174
  <div
941
1175
  class="view image"
942
- style="height: 230px; width: 360px;"
1176
+ style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
943
1177
  />
944
1178
  </div>
945
1179
  <div
@@ -947,7 +1181,7 @@ exports[`component:<Slider> testId 1`] = `
947
1181
  >
948
1182
  <div
949
1183
  class="view image"
950
- style="height: 230px; width: 360px;"
1184
+ style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
951
1185
  />
952
1186
  </div>
953
1187
  </div>
package/build/primitives/Checkbox/Checkbox.module.css CHANGED
@@ -41,6 +41,10 @@
41
41
  border-width: calc(var(--mirai-ui-border-width) * 2);
42
42
  }
43
43
 
44
+ .checkbox input:not(:disabled):not(:checked):focus {
45
+ border-color: var(--mirai-ui-input-text-focus);
46
+ }
47
+
44
48
  /* -- reset defaults -------------------------------------------------------- */
45
49
  .checkbox input.input {
46
50
  margin-right: 0;
package/build/primitives/Icon/Icon.constants.js CHANGED
@@ -20,6 +20,7 @@ var _MdOutlineFilterList = require("@react-icons/all-files/md/MdOutlineFilterLis
20
20
  var _MdOutlineInfo = require("@react-icons/all-files/md/MdOutlineInfo");
21
21
  var _MdOutlinePhotoLibrary = require("@react-icons/all-files/md/MdOutlinePhotoLibrary");
22
22
  var _MdOutlineRemove = require("@react-icons/all-files/md/MdOutlineRemove");
23
+ var _MdOutlineReplay = require("@react-icons/all-files/md/MdOutlineReplay");
23
24
  var _MdOutlineSearch = require("@react-icons/all-files/md/MdOutlineSearch");
24
25
  var _MdOutlineVisibility = require("@react-icons/all-files/md/MdOutlineVisibility");
25
26
  var _MdOutlineVisibilityOff = require("@react-icons/all-files/md/MdOutlineVisibilityOff");
@@ -51,6 +52,7 @@ var ICON = {
51
52
  WARNING: _MdOutlineWarningAmber.MdOutlineWarningAmber,
52
53
  // <Slider>
53
54
  PHOTO_LIBRARY: _MdOutlinePhotoLibrary.MdOutlinePhotoLibrary,
55
+ REPLAY: _MdOutlineReplay.MdOutlineReplay,
54
56
  // <Table>
55
57
  FILTER: _MdOutlineFilterList.MdOutlineFilterList,
56
58
  // Filetype
package/build/primitives/Icon/Icon.constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","SEARCH","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING","PHOTO_LIBRARY","FILTER","MARKDOWN"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import { LiaMarkdown as MARKDOWN } from '@react-icons/all-files/lia/LiaMarkdown';\nimport { MdCheckCircleOutline as SUCCESS } from '@react-icons/all-files/md/MdCheckCircleOutline';\nimport { MdErrorOutline as ERROR } from '@react-icons/all-files/md/MdErrorOutline';\nimport { MdOutlineAdd as ADD } from '@react-icons/all-files/md/MdOutlineAdd';\nimport { MdOutlineArrowBack as LEFT } from '@react-icons/all-files/md/MdOutlineArrowBack';\nimport { MdOutlineArrowDownward as DOWN } from '@react-icons/all-files/md/MdOutlineArrowDownward';\nimport { MdOutlineArrowForward as RIGHT } from '@react-icons/all-files/md/MdOutlineArrowForward';\nimport { MdOutlineArrowUpward as UP } from '@react-icons/all-files/md/MdOutlineArrowUpward';\nimport { MdOutlineCheck as CHECK } from '@react-icons/all-files/md/MdOutlineCheck';\nimport { MdOutlineClose as CLOSE } from '@react-icons/all-files/md/MdOutlineClose';\nimport { MdOutlineExpandLess as EXPAND_LESS } from '@react-icons/all-files/md/MdOutlineExpandLess';\nimport { MdOutlineExpandMore as EXPAND_MORE } from '@react-icons/all-files/md/MdOutlineExpandMore';\nimport { MdOutlineFilterList as FILTER } from '@react-icons/all-files/md/MdOutlineFilterList';\nimport { MdOutlineInfo as INFO } from '@react-icons/all-files/md/MdOutlineInfo';\nimport { MdOutlinePhotoLibrary as PHOTO_LIBRARY } from '@react-icons/all-files/md/MdOutlinePhotoLibrary';\nimport { MdOutlineRemove as REMOVE } from '@react-icons/all-files/md/MdOutlineRemove';\nimport { MdOutlineSearch as SEARCH } from '@react-icons/all-files/md/MdOutlineSearch';\nimport { MdOutlineVisibility as EYE_OPEN } from '@react-icons/all-files/md/MdOutlineVisibility';\nimport { MdOutlineVisibilityOff as EYE_CLOSE } from '@react-icons/all-files/md/MdOutlineVisibilityOff';\nimport { MdOutlineWarningAmber as WARNING } from '@react-icons/all-files/md/MdOutlineWarningAmber';\n\nexport const ICON = {\n // <Calendar>\n LEFT,\n RIGHT,\n UP,\n DOWN,\n // <Check>\n CHECK,\n // <InputOption>\n ADD,\n REMOVE,\n // <InputSelect>\n EXPAND_LESS,\n EXPAND_MORE,\n // <InputText>\n SEARCH,\n EYE_OPEN,\n EYE_CLOSE,\n // <Modal>\n CLOSE,\n // <Notification> & <InputText>\n ERROR,\n INFO,\n SUCCESS,\n WARNING,\n // <Slider>\n PHOTO_LIBRARY,\n // <Table>\n FILTER,\n // Filetype\n MARKDOWN,\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sCAAI;EACJC,KAAK,EAALA,4CAAK;EACLC,EAAE,EAAFA,0CAAE;EACFC,IAAI,EAAJA,8CAAI;EACJ;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,GAAG,EAAHA,0BAAG;EACHC,MAAM,EAANA,gCAAM;EACN;EACAC,WAAW,EAAXA,wCAAW;EACXC,WAAW,EAAXA,wCAAW;EACX;EACAC,MAAM,EAANA,gCAAM;EACNC,QAAQ,EAARA,wCAAQ;EACRC,SAAS,EAATA,8CAAS;EACT;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,KAAK,EAALA,8BAAK;EACLC,IAAI,EAAJA,4BAAI;EACJC,OAAO,EAAPA,0CAAO;EACPC,OAAO,EAAPA,4CAAO;EACP;EACAC,aAAa,EAAbA,4CAAa;EACb;EACAC,MAAM,EAANA,wCAAM;EACN;EACAC,QAAQ,EAARA;AACF,CAAC;AAAC"}
1
+ {"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","SEARCH","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING","PHOTO_LIBRARY","REPLAY","FILTER","MARKDOWN"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import { LiaMarkdown as MARKDOWN } from '@react-icons/all-files/lia/LiaMarkdown';\nimport { MdCheckCircleOutline as SUCCESS } from '@react-icons/all-files/md/MdCheckCircleOutline';\nimport { MdErrorOutline as ERROR } from '@react-icons/all-files/md/MdErrorOutline';\nimport { MdOutlineAdd as ADD } from '@react-icons/all-files/md/MdOutlineAdd';\nimport { MdOutlineArrowBack as LEFT } from '@react-icons/all-files/md/MdOutlineArrowBack';\nimport { MdOutlineArrowDownward as DOWN } from '@react-icons/all-files/md/MdOutlineArrowDownward';\nimport { MdOutlineArrowForward as RIGHT } from '@react-icons/all-files/md/MdOutlineArrowForward';\nimport { MdOutlineArrowUpward as UP } from '@react-icons/all-files/md/MdOutlineArrowUpward';\nimport { MdOutlineCheck as CHECK } from '@react-icons/all-files/md/MdOutlineCheck';\nimport { MdOutlineClose as CLOSE } from '@react-icons/all-files/md/MdOutlineClose';\nimport { MdOutlineExpandLess as EXPAND_LESS } from '@react-icons/all-files/md/MdOutlineExpandLess';\nimport { MdOutlineExpandMore as EXPAND_MORE } from '@react-icons/all-files/md/MdOutlineExpandMore';\nimport { MdOutlineFilterList as FILTER } from '@react-icons/all-files/md/MdOutlineFilterList';\nimport { MdOutlineInfo as INFO } from '@react-icons/all-files/md/MdOutlineInfo';\nimport { MdOutlinePhotoLibrary as PHOTO_LIBRARY } from '@react-icons/all-files/md/MdOutlinePhotoLibrary';\nimport { MdOutlineRemove as REMOVE } from '@react-icons/all-files/md/MdOutlineRemove';\nimport { MdOutlineReplay as REPLAY } from '@react-icons/all-files/md/MdOutlineReplay';\nimport { MdOutlineSearch as SEARCH } from '@react-icons/all-files/md/MdOutlineSearch';\nimport { MdOutlineVisibility as EYE_OPEN } from '@react-icons/all-files/md/MdOutlineVisibility';\nimport { MdOutlineVisibilityOff as EYE_CLOSE } from '@react-icons/all-files/md/MdOutlineVisibilityOff';\nimport { MdOutlineWarningAmber as WARNING } from '@react-icons/all-files/md/MdOutlineWarningAmber';\n\nexport const ICON = {\n // <Calendar>\n LEFT,\n RIGHT,\n UP,\n DOWN,\n // <Check>\n CHECK,\n // <InputOption>\n ADD,\n REMOVE,\n // <InputSelect>\n EXPAND_LESS,\n EXPAND_MORE,\n // <InputText>\n SEARCH,\n EYE_OPEN,\n EYE_CLOSE,\n // <Modal>\n CLOSE,\n // <Notification> & <InputText>\n ERROR,\n INFO,\n SUCCESS,\n WARNING,\n // <Slider>\n PHOTO_LIBRARY,\n REPLAY,\n // <Table>\n FILTER,\n // Filetype\n MARKDOWN,\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sCAAI;EACJC,KAAK,EAALA,4CAAK;EACLC,EAAE,EAAFA,0CAAE;EACFC,IAAI,EAAJA,8CAAI;EACJ;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,GAAG,EAAHA,0BAAG;EACHC,MAAM,EAANA,gCAAM;EACN;EACAC,WAAW,EAAXA,wCAAW;EACXC,WAAW,EAAXA,wCAAW;EACX;EACAC,MAAM,EAANA,gCAAM;EACNC,QAAQ,EAARA,wCAAQ;EACRC,SAAS,EAATA,8CAAS;EACT;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,KAAK,EAALA,8BAAK;EACLC,IAAI,EAAJA,4BAAI;EACJC,OAAO,EAAPA,0CAAO;EACPC,OAAO,EAAPA,4CAAO;EACP;EACAC,aAAa,EAAbA,4CAAa;EACbC,MAAM,EAANA,gCAAM;EACN;EACAC,MAAM,EAANA,wCAAM;EACN;EACAC,QAAQ,EAARA;AACF,CAAC;AAAC"}
package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap CHANGED
@@ -725,6 +725,41 @@ exports[`primitive:<Icon> prop:value prop:value (REMOVE) 1`] = `
725
725
  </DocumentFragment>
726
726
  `;
727
727
 
728
+ exports[`primitive:<Icon> prop:value prop:value (REPLAY) 1`] = `
729
+ <DocumentFragment>
730
+ <span
731
+ class="icon headline-3"
732
+ >
733
+ <svg
734
+ fill="currentColor"
735
+ height="1em"
736
+ stroke="currentColor"
737
+ stroke-width="0"
738
+ viewBox="0 0 24 24"
739
+ width="1em"
740
+ xmlns="http://www.w3.org/2000/svg"
741
+ >
742
+ <g
743
+ fill="none"
744
+ >
745
+ <path
746
+ d="M0 0h24v24H0z"
747
+ />
748
+ <path
749
+ d="M0 0h24v24H0z"
750
+ />
751
+ <path
752
+ d="M0 0h24v24H0z"
753
+ />
754
+ </g>
755
+ <path
756
+ d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
757
+ />
758
+ </svg>
759
+ </span>
760
+ </DocumentFragment>
761
+ `;
762
+
728
763
  exports[`primitive:<Icon> prop:value prop:value (RIGHT) 1`] = `
729
764
  <DocumentFragment>
730
765
  <span
package/build/primitives/Pressable/Pressable.module.css CHANGED
@@ -6,7 +6,6 @@
6
6
  display: inline-block;
7
7
  height: fit-content;
8
8
  margin: 0;
9
- overflow: hidden;
10
9
  padding: 0;
11
10
  user-select: none;
12
11
  width: fit-content;
package/build/primitives/Radio/Radio.module.css CHANGED
@@ -51,8 +51,17 @@
51
51
  background-color: var(--mirai-ui-radio-base);
52
52
  }
53
53
 
54
+ .radio input:not(:disabled).error {
55
+ border-color: var(--mirai-ui-error);
56
+ border-width: calc(var(--mirai-ui-border-width) * 2);
57
+ }
58
+
59
+ .radio input:not(:disabled):not(:checked):focus {
60
+ border-color: var(--mirai-ui-input-text-focus);
61
+ }
62
+
54
63
  /* -- reset defaults -------------------------------------------------------- */
55
64
  .radio input.input {
56
65
  margin-right: 0;
57
66
  top: 0;
58
- }
67
+ }
package/build/theme/default.theme.css CHANGED
@@ -48,15 +48,19 @@
48
48
 
49
49
  --mirai-ui-error: #d32f2f;
50
50
  --mirai-ui-error-background: #fdeded;
51
+ --mirai-ui-error-border: #fbdbdb;
51
52
 
52
53
  --mirai-ui-warning: #663c00;
53
54
  --mirai-ui-warning-background: #fff4e5;
55
+ --mirai-ui-warning-border: #ffe8ca;
54
56
 
55
57
  --mirai-ui-success: #1e4620;
56
58
  --mirai-ui-success-background: #edf7ed;
59
+ --mirai-ui-success-border: #dcefdc;
57
60
 
58
61
  --mirai-ui-info: #014361;
59
62
  --mirai-ui-info-background: #e6f5fd;
63
+ --mirai-ui-info-border: #cceafa;
60
64
 
61
65
  /* spacing */
62
66
  --mirai-ui-space-XS: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirai/ui",
3
- "version": "1.0.265",
3
+ "version": "1.0.267",
4
4
  "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
5
5
  "author": "JΛVI <hello@soyjavi.com>",
6
6
  "license": "MIT",