@telus-uds/components-base 1.15.0 → 1.17.0
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.
- package/CHANGELOG.md +36 -2
- package/component-docs.json +1322 -346
- package/lib/BaseProvider/index.js +5 -1
- package/lib/Button/ButtonBase.js +2 -1
- package/lib/Carousel/Carousel.js +18 -2
- package/lib/Carousel/CarouselTabs/CarouselTabs.js +6 -7
- package/lib/List/List.js +11 -8
- package/lib/List/PressableListItemBase.js +5 -9
- package/lib/QuickLinks/QuickLinks.js +91 -0
- package/lib/QuickLinks/QuickLinksCard.js +47 -0
- package/lib/QuickLinks/QuickLinksItem.js +73 -0
- package/lib/QuickLinks/index.js +16 -0
- package/lib/Skeleton/Skeleton.js +18 -13
- package/lib/Skeleton/useSkeletonNativeAnimation.js +4 -2
- package/lib/Timeline/Timeline.js +193 -0
- package/lib/Timeline/index.js +13 -0
- package/lib/ToggleSwitch/ToggleSwitch.js +24 -19
- package/lib/index.js +28 -1
- package/lib/utils/props/a11yProps.js +50 -47
- package/lib-module/BaseProvider/index.js +4 -1
- package/lib-module/Button/ButtonBase.js +2 -1
- package/lib-module/Carousel/Carousel.js +16 -2
- package/lib-module/Carousel/CarouselTabs/CarouselTabs.js +7 -6
- package/lib-module/List/List.js +12 -8
- package/lib-module/List/PressableListItemBase.js +6 -10
- package/lib-module/QuickLinks/QuickLinks.js +71 -0
- package/lib-module/QuickLinks/QuickLinksCard.js +33 -0
- package/lib-module/QuickLinks/QuickLinksItem.js +50 -0
- package/lib-module/QuickLinks/index.js +4 -0
- package/lib-module/Skeleton/Skeleton.js +15 -13
- package/lib-module/Skeleton/useSkeletonNativeAnimation.js +3 -2
- package/lib-module/Timeline/Timeline.js +174 -0
- package/lib-module/Timeline/index.js +2 -0
- package/lib-module/ToggleSwitch/ToggleSwitch.js +24 -19
- package/lib-module/index.js +4 -1
- package/lib-module/utils/props/a11yProps.js +50 -47
- package/package.json +8 -7
- package/src/BaseProvider/index.jsx +2 -1
- package/src/Button/ButtonBase.jsx +2 -2
- package/src/Carousel/Carousel.jsx +15 -2
- package/src/Carousel/CarouselTabs/CarouselTabs.jsx +5 -3
- package/src/List/List.jsx +9 -13
- package/src/List/PressableListItemBase.jsx +7 -9
- package/src/QuickLinks/QuickLinks.jsx +61 -0
- package/src/QuickLinks/QuickLinksCard.jsx +26 -0
- package/src/QuickLinks/QuickLinksItem.jsx +46 -0
- package/src/QuickLinks/index.js +6 -0
- package/src/Skeleton/Skeleton.jsx +25 -19
- package/src/Skeleton/useSkeletonNativeAnimation.js +3 -3
- package/src/Timeline/Timeline.jsx +148 -0
- package/src/Timeline/index.js +3 -0
- package/src/ToggleSwitch/ToggleSwitch.jsx +3 -3
- package/src/index.js +3 -0
- package/src/utils/props/a11yProps.js +61 -68
package/component-docs.json
CHANGED
|
@@ -89,6 +89,7 @@
|
|
|
89
89
|
"previousIcon": "icon",
|
|
90
90
|
"showPreviousNextNavigation": "show",
|
|
91
91
|
"showPanelNavigation": "show",
|
|
92
|
+
"showPanelTabs": "show",
|
|
92
93
|
"spaceBetweenSlideAndPreviousNextNavigation": "size",
|
|
93
94
|
"spaceBetweenSlideAndPanelNavigation": "size",
|
|
94
95
|
"thumbnailBorderColor": "color",
|
|
@@ -418,6 +419,80 @@
|
|
|
418
419
|
"outlineColor": "color",
|
|
419
420
|
"outlineWidth": "border"
|
|
420
421
|
},
|
|
422
|
+
"QuickLinks": {
|
|
423
|
+
"list": "show",
|
|
424
|
+
"card": "show",
|
|
425
|
+
"dividers": "show",
|
|
426
|
+
"stackSpace": "integer",
|
|
427
|
+
"stackGap": "integer",
|
|
428
|
+
"stackJustify": "flexJustifyContent"
|
|
429
|
+
},
|
|
430
|
+
"QuickLinksCard": {
|
|
431
|
+
"flex": "integer",
|
|
432
|
+
"backgroundColor": "color",
|
|
433
|
+
"borderColor": "color",
|
|
434
|
+
"borderRadius": "radius",
|
|
435
|
+
"borderWidth": "border",
|
|
436
|
+
"paddingBottom": "size",
|
|
437
|
+
"paddingLeft": "size",
|
|
438
|
+
"paddingRight": "size",
|
|
439
|
+
"paddingTop": "size",
|
|
440
|
+
"minWidth": "size",
|
|
441
|
+
"shadow": "shadow"
|
|
442
|
+
},
|
|
443
|
+
"QuickLinksList": {
|
|
444
|
+
"dividerColor": "color",
|
|
445
|
+
"dividerSize": "border",
|
|
446
|
+
"iconMarginTop": "size",
|
|
447
|
+
"interItemMargin": "size",
|
|
448
|
+
"interItemMarginWithDivider": "size",
|
|
449
|
+
"itemBulletColor": "color",
|
|
450
|
+
"itemBulletContainerAlign": "textAlign",
|
|
451
|
+
"itemBulletContainerWidth": "size",
|
|
452
|
+
"itemBulletHeight": "size",
|
|
453
|
+
"itemBulletWidth": "size",
|
|
454
|
+
"itemFontName": "fontName",
|
|
455
|
+
"itemFontSize": "fontSize",
|
|
456
|
+
"itemFontWeight": "fontWeight",
|
|
457
|
+
"itemIconColor": "color",
|
|
458
|
+
"itemIconSize": "size",
|
|
459
|
+
"itemLineHeight": "lineHeight",
|
|
460
|
+
"listGutter": "size",
|
|
461
|
+
"backgroundColor": "color",
|
|
462
|
+
"paddingLeft": "size",
|
|
463
|
+
"paddingRight": "size",
|
|
464
|
+
"paddingTop": "size",
|
|
465
|
+
"paddingBottom": "size"
|
|
466
|
+
},
|
|
467
|
+
"QuickLinksButton": {
|
|
468
|
+
"borderColor": "color",
|
|
469
|
+
"borderWidth": "border",
|
|
470
|
+
"borderRadius": "radius",
|
|
471
|
+
"shadow": "shadow",
|
|
472
|
+
"fontSize": "fontSize",
|
|
473
|
+
"color": "color",
|
|
474
|
+
"lineHeight": "lineHeight",
|
|
475
|
+
"textAlign": "flexJustifyContent",
|
|
476
|
+
"alignSelf": "flexAlign",
|
|
477
|
+
"fontName": "fontName",
|
|
478
|
+
"fontWeight": "fontWeight",
|
|
479
|
+
"backgroundColor": "color",
|
|
480
|
+
"opacity": "opacity",
|
|
481
|
+
"paddingLeft": "size",
|
|
482
|
+
"paddingRight": "size",
|
|
483
|
+
"paddingTop": "size",
|
|
484
|
+
"paddingBottom": "size",
|
|
485
|
+
"width": "size",
|
|
486
|
+
"minWidth": "size",
|
|
487
|
+
"outerBorderColor": "color",
|
|
488
|
+
"outerBorderWidth": "border",
|
|
489
|
+
"outerBorderGap": "size",
|
|
490
|
+
"outerBackgroundColor": "color",
|
|
491
|
+
"icon": "icon",
|
|
492
|
+
"iconColor": "color",
|
|
493
|
+
"iconSize": "size",
|
|
494
|
+
"iconSpace": "integer"
|
|
495
|
+
},
|
|
421
496
|
"Radio": {
|
|
422
497
|
"checkedBackgroundColor": "color",
|
|
423
498
|
"checkedSize": "size",
|
|
@@ -806,6 +881,24 @@
|
|
|
806
881
|
"flexGrow": "integer",
|
|
807
882
|
"flexShrink": "integer"
|
|
808
883
|
},
|
|
884
|
+
"Timeline": {
|
|
885
|
+
"dotColor": "color",
|
|
886
|
+
"dotWidth": "size",
|
|
887
|
+
"dotBorderWidth": "border",
|
|
888
|
+
"timelineContainerDirection": "direction",
|
|
889
|
+
"timelineColor": "color",
|
|
890
|
+
"connectorWidth": "size",
|
|
891
|
+
"connectorHeight": "size",
|
|
892
|
+
"lineItemContainerDirection": "direction",
|
|
893
|
+
"lineContainerFlexSize": "integer",
|
|
894
|
+
"lineItemAlign": "flexAlign",
|
|
895
|
+
"lineItemDirection": "direction",
|
|
896
|
+
"lineItemMarginRight": "size",
|
|
897
|
+
"lineItemMarginBottom": "size",
|
|
898
|
+
"itemContentFlexSize": "integer",
|
|
899
|
+
"itemContentMarginRight": "size",
|
|
900
|
+
"itemContentMarginBottom": "size"
|
|
901
|
+
},
|
|
809
902
|
"Tooltip": {
|
|
810
903
|
"backgroundColor": "color",
|
|
811
904
|
"paddingTop": "size",
|
|
@@ -1262,6 +1355,29 @@
|
|
|
1262
1355
|
"type": "state"
|
|
1263
1356
|
}
|
|
1264
1357
|
},
|
|
1358
|
+
"QuickLinksList": {
|
|
1359
|
+
"hover": {
|
|
1360
|
+
"description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1361
|
+
"values": [
|
|
1362
|
+
true
|
|
1363
|
+
],
|
|
1364
|
+
"type": "state"
|
|
1365
|
+
},
|
|
1366
|
+
"focus": {
|
|
1367
|
+
"description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
1368
|
+
"values": [
|
|
1369
|
+
true
|
|
1370
|
+
],
|
|
1371
|
+
"type": "state"
|
|
1372
|
+
},
|
|
1373
|
+
"pressed": {
|
|
1374
|
+
"description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
|
|
1375
|
+
"values": [
|
|
1376
|
+
true
|
|
1377
|
+
],
|
|
1378
|
+
"type": "state"
|
|
1379
|
+
}
|
|
1380
|
+
},
|
|
1265
1381
|
"Radio": {
|
|
1266
1382
|
"checked": {
|
|
1267
1383
|
"description": "Corresponds to a selected state for a checkbox or radio",
|
|
@@ -4624,8 +4740,7 @@
|
|
|
4624
4740
|
},
|
|
4625
4741
|
"children": {
|
|
4626
4742
|
"type": {
|
|
4627
|
-
"name": "
|
|
4628
|
-
"raw": "componentPropType('ListItem')"
|
|
4743
|
+
"name": "node"
|
|
4629
4744
|
},
|
|
4630
4745
|
"required": false,
|
|
4631
4746
|
"description": ""
|
|
@@ -4796,8 +4911,7 @@
|
|
|
4796
4911
|
},
|
|
4797
4912
|
"children": {
|
|
4798
4913
|
"type": {
|
|
4799
|
-
"name": "
|
|
4800
|
-
"raw": "componentPropType('ListItem')"
|
|
4914
|
+
"name": "node"
|
|
4801
4915
|
},
|
|
4802
4916
|
"required": false,
|
|
4803
4917
|
"description": ""
|
|
@@ -5553,7 +5667,7 @@
|
|
|
5553
5667
|
}
|
|
5554
5668
|
},
|
|
5555
5669
|
"attributes": {
|
|
5556
|
-
"acceptsRNA11yProps":
|
|
5670
|
+
"acceptsRNA11yProps": true
|
|
5557
5671
|
}
|
|
5558
5672
|
}
|
|
5559
5673
|
}
|
|
@@ -5745,131 +5859,86 @@
|
|
|
5745
5859
|
}
|
|
5746
5860
|
}
|
|
5747
5861
|
},
|
|
5748
|
-
"
|
|
5862
|
+
"QuickLinks": {
|
|
5749
5863
|
"docs": {
|
|
5750
|
-
"description": "
|
|
5864
|
+
"description": "QuickLinks renders a list of interactive items. How it renders these items depends on theme options:\n - If the theme returns `list` token as true, it renders an ordered list based on List\n - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons\n - If the theme returns `card` token as true, it wraps the above with a `Card`.",
|
|
5751
5865
|
"props": {
|
|
5752
|
-
"
|
|
5866
|
+
"tag": {
|
|
5753
5867
|
"defaultValue": {
|
|
5754
|
-
"value": "
|
|
5868
|
+
"value": "'ul'",
|
|
5755
5869
|
"computed": false
|
|
5756
5870
|
},
|
|
5757
|
-
"type": {
|
|
5758
|
-
"name": "bool"
|
|
5759
|
-
},
|
|
5760
|
-
"required": false,
|
|
5761
|
-
"description": "Whether the underlying input triggered a validation error or not."
|
|
5762
|
-
},
|
|
5763
|
-
"checked": {
|
|
5764
|
-
"type": {
|
|
5765
|
-
"name": "bool"
|
|
5766
|
-
},
|
|
5767
|
-
"required": false,
|
|
5768
|
-
"description": "Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop."
|
|
5769
|
-
},
|
|
5770
|
-
"defaultChecked": {
|
|
5771
|
-
"type": {
|
|
5772
|
-
"name": "bool"
|
|
5773
|
-
},
|
|
5774
|
-
"required": false,
|
|
5775
|
-
"description": "Use `defaultChecked` to provide the initial value for an uncontrolled Radio."
|
|
5776
|
-
},
|
|
5777
|
-
"description": {
|
|
5778
|
-
"type": {
|
|
5779
|
-
"name": "string"
|
|
5780
|
-
},
|
|
5781
|
-
"required": false,
|
|
5782
|
-
"description": "An optional radio button description."
|
|
5783
|
-
},
|
|
5784
|
-
"id": {
|
|
5785
|
-
"type": {
|
|
5786
|
-
"name": "string"
|
|
5787
|
-
},
|
|
5788
|
-
"required": false,
|
|
5789
|
-
"description": "Radio button ID."
|
|
5790
|
-
},
|
|
5791
|
-
"inactive": {
|
|
5792
|
-
"type": {
|
|
5793
|
-
"name": "bool"
|
|
5794
|
-
},
|
|
5795
|
-
"required": false,
|
|
5796
|
-
"description": "Whether the corresponding input is disabled or active."
|
|
5797
|
-
},
|
|
5798
|
-
"label": {
|
|
5799
|
-
"type": {
|
|
5800
|
-
"name": "string"
|
|
5801
|
-
},
|
|
5802
|
-
"required": false,
|
|
5803
|
-
"description": "The label."
|
|
5804
|
-
},
|
|
5805
|
-
"name": {
|
|
5806
5871
|
"type": {
|
|
5807
5872
|
"name": "string"
|
|
5808
5873
|
},
|
|
5809
5874
|
"required": false,
|
|
5810
|
-
"description": "
|
|
5875
|
+
"description": ""
|
|
5811
5876
|
},
|
|
5812
|
-
"
|
|
5877
|
+
"tokens": {
|
|
5813
5878
|
"type": {
|
|
5814
|
-
"name": "
|
|
5815
|
-
"
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
"name": "bool"
|
|
5824
|
-
}
|
|
5825
|
-
]
|
|
5879
|
+
"name": "custom",
|
|
5880
|
+
"raw": {
|
|
5881
|
+
"list": "show",
|
|
5882
|
+
"card": "show",
|
|
5883
|
+
"dividers": "show",
|
|
5884
|
+
"stackSpace": "integer",
|
|
5885
|
+
"stackGap": "integer",
|
|
5886
|
+
"stackJustify": "flexJustifyContent"
|
|
5887
|
+
}
|
|
5826
5888
|
},
|
|
5827
5889
|
"required": false,
|
|
5828
|
-
"description": "
|
|
5890
|
+
"description": ""
|
|
5829
5891
|
},
|
|
5830
|
-
"
|
|
5892
|
+
"cardTokens": {
|
|
5831
5893
|
"type": {
|
|
5832
|
-
"name": "
|
|
5894
|
+
"name": "custom",
|
|
5895
|
+
"raw": {
|
|
5896
|
+
"flex": "integer",
|
|
5897
|
+
"backgroundColor": "color",
|
|
5898
|
+
"borderColor": "color",
|
|
5899
|
+
"borderRadius": "radius",
|
|
5900
|
+
"borderWidth": "border",
|
|
5901
|
+
"paddingBottom": "size",
|
|
5902
|
+
"paddingLeft": "size",
|
|
5903
|
+
"paddingRight": "size",
|
|
5904
|
+
"paddingTop": "size",
|
|
5905
|
+
"minWidth": "size",
|
|
5906
|
+
"shadow": "shadow"
|
|
5907
|
+
}
|
|
5833
5908
|
},
|
|
5834
5909
|
"required": false,
|
|
5835
|
-
"description": "
|
|
5910
|
+
"description": ""
|
|
5836
5911
|
},
|
|
5837
|
-
"
|
|
5912
|
+
"listTokens": {
|
|
5838
5913
|
"type": {
|
|
5839
5914
|
"name": "custom",
|
|
5840
5915
|
"raw": {
|
|
5841
|
-
"
|
|
5842
|
-
"
|
|
5843
|
-
"
|
|
5844
|
-
"
|
|
5845
|
-
"
|
|
5846
|
-
"
|
|
5847
|
-
"
|
|
5848
|
-
"
|
|
5849
|
-
"
|
|
5850
|
-
"
|
|
5851
|
-
"
|
|
5852
|
-
"
|
|
5853
|
-
"
|
|
5854
|
-
"
|
|
5855
|
-
"
|
|
5856
|
-
"
|
|
5857
|
-
"
|
|
5858
|
-
"
|
|
5859
|
-
"
|
|
5860
|
-
"
|
|
5861
|
-
"
|
|
5862
|
-
"
|
|
5863
|
-
"labelColor": "color",
|
|
5864
|
-
"labelFontName": "fontName",
|
|
5865
|
-
"labelFontSize": "fontSize",
|
|
5866
|
-
"labelFontWeight": "fontWeight",
|
|
5867
|
-
"labelLineHeight": "lineHeight",
|
|
5868
|
-
"labelMarginLeft": "size"
|
|
5916
|
+
"dividerColor": "color",
|
|
5917
|
+
"dividerSize": "border",
|
|
5918
|
+
"iconMarginTop": "size",
|
|
5919
|
+
"interItemMargin": "size",
|
|
5920
|
+
"interItemMarginWithDivider": "size",
|
|
5921
|
+
"itemBulletColor": "color",
|
|
5922
|
+
"itemBulletContainerAlign": "textAlign",
|
|
5923
|
+
"itemBulletContainerWidth": "size",
|
|
5924
|
+
"itemBulletHeight": "size",
|
|
5925
|
+
"itemBulletWidth": "size",
|
|
5926
|
+
"itemFontName": "fontName",
|
|
5927
|
+
"itemFontSize": "fontSize",
|
|
5928
|
+
"itemFontWeight": "fontWeight",
|
|
5929
|
+
"itemIconColor": "color",
|
|
5930
|
+
"itemIconSize": "size",
|
|
5931
|
+
"itemLineHeight": "lineHeight",
|
|
5932
|
+
"listGutter": "size",
|
|
5933
|
+
"backgroundColor": "color",
|
|
5934
|
+
"paddingLeft": "size",
|
|
5935
|
+
"paddingRight": "size",
|
|
5936
|
+
"paddingTop": "size",
|
|
5937
|
+
"paddingBottom": "size"
|
|
5869
5938
|
}
|
|
5870
5939
|
},
|
|
5871
5940
|
"required": false,
|
|
5872
|
-
"description": "
|
|
5941
|
+
"description": ""
|
|
5873
5942
|
},
|
|
5874
5943
|
"variant": {
|
|
5875
5944
|
"type": {
|
|
@@ -5890,39 +5959,140 @@
|
|
|
5890
5959
|
}
|
|
5891
5960
|
},
|
|
5892
5961
|
"required": false,
|
|
5893
|
-
"description": "
|
|
5962
|
+
"description": ""
|
|
5963
|
+
},
|
|
5964
|
+
"children": {
|
|
5965
|
+
"type": {
|
|
5966
|
+
"name": "node"
|
|
5967
|
+
},
|
|
5968
|
+
"required": false,
|
|
5969
|
+
"description": ""
|
|
5894
5970
|
}
|
|
5895
5971
|
},
|
|
5896
5972
|
"attributes": {
|
|
5897
5973
|
"acceptsRNA11yProps": false
|
|
5898
5974
|
}
|
|
5899
|
-
}
|
|
5900
|
-
|
|
5901
|
-
|
|
5902
|
-
|
|
5903
|
-
|
|
5904
|
-
|
|
5905
|
-
|
|
5906
|
-
|
|
5907
|
-
|
|
5908
|
-
|
|
5909
|
-
|
|
5910
|
-
|
|
5911
|
-
|
|
5912
|
-
|
|
5913
|
-
|
|
5914
|
-
|
|
5915
|
-
"
|
|
5916
|
-
|
|
5917
|
-
|
|
5918
|
-
|
|
5919
|
-
|
|
5920
|
-
|
|
5975
|
+
},
|
|
5976
|
+
"Item": {
|
|
5977
|
+
"docs": {
|
|
5978
|
+
"description": "Public component exported as QuickLinks.Item, for use as children of QuickLinks.\n\nReceives props injected by QuickLinks and renders the appropriate child component.",
|
|
5979
|
+
"props": {
|
|
5980
|
+
"LinkRouter": {
|
|
5981
|
+
"type": {
|
|
5982
|
+
"name": "elementType"
|
|
5983
|
+
},
|
|
5984
|
+
"required": false,
|
|
5985
|
+
"description": ""
|
|
5986
|
+
},
|
|
5987
|
+
"linkRouterProps": {
|
|
5988
|
+
"type": {
|
|
5989
|
+
"name": "object"
|
|
5990
|
+
},
|
|
5991
|
+
"required": false,
|
|
5992
|
+
"description": ""
|
|
5993
|
+
},
|
|
5994
|
+
"tokens": {
|
|
5995
|
+
"type": {
|
|
5996
|
+
"name": "custom",
|
|
5997
|
+
"raw": {
|
|
5998
|
+
"dividerColor": "color",
|
|
5999
|
+
"dividerSize": "border",
|
|
6000
|
+
"iconMarginTop": "size",
|
|
6001
|
+
"interItemMargin": "size",
|
|
6002
|
+
"interItemMarginWithDivider": "size",
|
|
6003
|
+
"itemBulletColor": "color",
|
|
6004
|
+
"itemBulletContainerAlign": "textAlign",
|
|
6005
|
+
"itemBulletContainerWidth": "size",
|
|
6006
|
+
"itemBulletHeight": "size",
|
|
6007
|
+
"itemBulletWidth": "size",
|
|
6008
|
+
"itemFontName": "fontName",
|
|
6009
|
+
"itemFontSize": "fontSize",
|
|
6010
|
+
"itemFontWeight": "fontWeight",
|
|
6011
|
+
"itemIconColor": "color",
|
|
6012
|
+
"itemIconSize": "size",
|
|
6013
|
+
"itemLineHeight": "lineHeight",
|
|
6014
|
+
"listGutter": "size",
|
|
6015
|
+
"backgroundColor": "color",
|
|
6016
|
+
"paddingLeft": "size",
|
|
6017
|
+
"paddingRight": "size",
|
|
6018
|
+
"paddingTop": "size",
|
|
6019
|
+
"paddingBottom": "size",
|
|
6020
|
+
"borderColor": "color",
|
|
6021
|
+
"borderWidth": "border",
|
|
6022
|
+
"borderRadius": "radius",
|
|
6023
|
+
"shadow": "shadow",
|
|
6024
|
+
"fontSize": "fontSize",
|
|
6025
|
+
"color": "color",
|
|
6026
|
+
"lineHeight": "lineHeight",
|
|
6027
|
+
"textAlign": "flexJustifyContent",
|
|
6028
|
+
"alignSelf": "flexAlign",
|
|
6029
|
+
"fontName": "fontName",
|
|
6030
|
+
"fontWeight": "fontWeight",
|
|
6031
|
+
"opacity": "opacity",
|
|
6032
|
+
"width": "size",
|
|
6033
|
+
"minWidth": "size",
|
|
6034
|
+
"outerBorderColor": "color",
|
|
6035
|
+
"outerBorderWidth": "border",
|
|
6036
|
+
"outerBorderGap": "size",
|
|
6037
|
+
"outerBackgroundColor": "color",
|
|
6038
|
+
"icon": "icon",
|
|
6039
|
+
"iconColor": "color",
|
|
6040
|
+
"iconSize": "size",
|
|
6041
|
+
"iconSpace": "integer"
|
|
5921
6042
|
}
|
|
5922
|
-
|
|
6043
|
+
},
|
|
6044
|
+
"required": false,
|
|
6045
|
+
"description": ""
|
|
6046
|
+
},
|
|
6047
|
+
"variant": {
|
|
6048
|
+
"type": {
|
|
6049
|
+
"name": "objectOf",
|
|
6050
|
+
"value": {
|
|
6051
|
+
"name": "union",
|
|
6052
|
+
"value": [
|
|
6053
|
+
{
|
|
6054
|
+
"name": "string"
|
|
6055
|
+
},
|
|
6056
|
+
{
|
|
6057
|
+
"name": "number"
|
|
6058
|
+
},
|
|
6059
|
+
{
|
|
6060
|
+
"name": "bool"
|
|
6061
|
+
}
|
|
6062
|
+
]
|
|
6063
|
+
}
|
|
6064
|
+
},
|
|
6065
|
+
"required": false,
|
|
6066
|
+
"description": ""
|
|
6067
|
+
},
|
|
6068
|
+
"children": {
|
|
6069
|
+
"type": {
|
|
6070
|
+
"name": "node"
|
|
6071
|
+
},
|
|
6072
|
+
"required": false,
|
|
6073
|
+
"description": ""
|
|
6074
|
+
}
|
|
6075
|
+
},
|
|
6076
|
+
"attributes": {
|
|
6077
|
+
"acceptsRNA11yProps": false
|
|
6078
|
+
}
|
|
6079
|
+
}
|
|
6080
|
+
}
|
|
6081
|
+
},
|
|
6082
|
+
"Radio": {
|
|
6083
|
+
"docs": {
|
|
6084
|
+
"description": "Basic Radio component.\n\n## Component API\n\nUse `label` prop to provide a label for the radio button. For a disabled `Radio` set the `inactive` prop to `true`.\n\n### Controlled version\n\nIf the radio button is controlled from outside, it needs to receive `checked` and `onChange` props.\n\n### Uncontrolled version\n\nIn case of uncontrolled radio button you can use `defaultChecked` prop to provide the initial value.\nWhenever the radio button gets toggled, it calls the `onChange` callback with the new value (boolean).\n\n### Using within forms\n\nYou can pass `name` and `value` props if you need a particular radio button to be a part of a radio group\non a form.\n\n### Validation\n\nYou can mark a radio button as failing validation by setting the `error` prop to `true`.\n\n## A11y guidelines\n\nRadio component accepts all the common accessibility props, but also sets some defaults, including\naccessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)\nor the internal state in case of uncontrolled radio button.",
|
|
6085
|
+
"props": {
|
|
6086
|
+
"error": {
|
|
6087
|
+
"defaultValue": {
|
|
6088
|
+
"value": "false",
|
|
6089
|
+
"computed": false
|
|
6090
|
+
},
|
|
6091
|
+
"type": {
|
|
6092
|
+
"name": "bool"
|
|
5923
6093
|
},
|
|
5924
6094
|
"required": false,
|
|
5925
|
-
"description": "
|
|
6095
|
+
"description": "Whether the underlying input triggered a validation error or not."
|
|
5926
6096
|
},
|
|
5927
6097
|
"checked": {
|
|
5928
6098
|
"type": {
|
|
@@ -5950,7 +6120,7 @@
|
|
|
5950
6120
|
"name": "string"
|
|
5951
6121
|
},
|
|
5952
6122
|
"required": false,
|
|
5953
|
-
"description": "Radio
|
|
6123
|
+
"description": "Radio button ID."
|
|
5954
6124
|
},
|
|
5955
6125
|
"inactive": {
|
|
5956
6126
|
"type": {
|
|
@@ -5971,14 +6141,7 @@
|
|
|
5971
6141
|
"name": "string"
|
|
5972
6142
|
},
|
|
5973
6143
|
"required": false,
|
|
5974
|
-
"description": "Associate this radio
|
|
5975
|
-
},
|
|
5976
|
-
"error": {
|
|
5977
|
-
"type": {
|
|
5978
|
-
"name": "bool"
|
|
5979
|
-
},
|
|
5980
|
-
"required": false,
|
|
5981
|
-
"description": "Whether the underlying input triggered a validation error or not."
|
|
6144
|
+
"description": "Associate this radio button with a group (set as the name attribute)."
|
|
5982
6145
|
},
|
|
5983
6146
|
"value": {
|
|
5984
6147
|
"type": {
|
|
@@ -6003,50 +6166,44 @@
|
|
|
6003
6166
|
"name": "func"
|
|
6004
6167
|
},
|
|
6005
6168
|
"required": false,
|
|
6006
|
-
"description": "Callback called when a controlled radio
|
|
6169
|
+
"description": "Callback called when a controlled radio button gets interacted with."
|
|
6007
6170
|
},
|
|
6008
6171
|
"tokens": {
|
|
6009
6172
|
"type": {
|
|
6010
6173
|
"name": "custom",
|
|
6011
6174
|
"raw": {
|
|
6012
|
-
"
|
|
6013
|
-
"
|
|
6175
|
+
"checkedBackgroundColor": "color",
|
|
6176
|
+
"checkedSize": "size",
|
|
6177
|
+
"containerBackgroundColor": "color",
|
|
6178
|
+
"containerBorderRadius": "radius",
|
|
6179
|
+
"containerOpacity": "opacity",
|
|
6180
|
+
"containerPaddingBottom": "size",
|
|
6181
|
+
"containerPaddingLeft": "size",
|
|
6182
|
+
"containerPaddingRight": "size",
|
|
6183
|
+
"containerPaddingTop": "size",
|
|
6184
|
+
"containerShadow": "shadow",
|
|
6185
|
+
"descriptionFontSize": "fontSize",
|
|
6186
|
+
"descriptionLineHeight": "lineHeight",
|
|
6187
|
+
"descriptionMarginLeft": "size",
|
|
6188
|
+
"inputBackgroundColor": "color",
|
|
6189
|
+
"inputBorderColor": "color",
|
|
6190
|
+
"inputBorderWidth": "border",
|
|
6191
|
+
"inputOutlineColor": "color",
|
|
6192
|
+
"inputOutlineWidth": "border",
|
|
6193
|
+
"inputSize": "size",
|
|
6014
6194
|
"outerBorderGap": "size",
|
|
6015
|
-
"
|
|
6016
|
-
"
|
|
6017
|
-
"
|
|
6018
|
-
"
|
|
6019
|
-
"
|
|
6020
|
-
"
|
|
6021
|
-
"
|
|
6022
|
-
"
|
|
6023
|
-
"paddingTop": "size",
|
|
6024
|
-
"minWidth": "size",
|
|
6025
|
-
"shadow": "shadow",
|
|
6026
|
-
"radioCheckedBackgroundColor": "color",
|
|
6027
|
-
"radioCheckedSize": "size",
|
|
6028
|
-
"radioInputBackgroundColor": "color",
|
|
6029
|
-
"radioInputBorderColor": "color",
|
|
6030
|
-
"radioInputBorderWidth": "border",
|
|
6031
|
-
"radioInputOutlineColor": "color",
|
|
6032
|
-
"radioInputOutlineWidth": "border",
|
|
6033
|
-
"radioInputSize": "size",
|
|
6034
|
-
"radioOuterBorderColor": "color",
|
|
6035
|
-
"radioOuterBorderWidth": "border",
|
|
6036
|
-
"radioOuterBorderGap": "size",
|
|
6037
|
-
"fontSize": "fontSize",
|
|
6038
|
-
"fontName": "fontName",
|
|
6039
|
-
"lineHeight": "lineHeight",
|
|
6040
|
-
"color": "color",
|
|
6041
|
-
"letterSpacing": "letterSpacing",
|
|
6042
|
-
"textTransform": "textTransform",
|
|
6043
|
-
"fontWeight": "fontWeight",
|
|
6044
|
-
"radioSpace": "integer",
|
|
6045
|
-
"contentSpace": "integer"
|
|
6195
|
+
"outerBorderWidth": "border",
|
|
6196
|
+
"outerBorderColor": "color",
|
|
6197
|
+
"labelColor": "color",
|
|
6198
|
+
"labelFontName": "fontName",
|
|
6199
|
+
"labelFontSize": "fontSize",
|
|
6200
|
+
"labelFontWeight": "fontWeight",
|
|
6201
|
+
"labelLineHeight": "lineHeight",
|
|
6202
|
+
"labelMarginLeft": "size"
|
|
6046
6203
|
}
|
|
6047
6204
|
},
|
|
6048
6205
|
"required": false,
|
|
6049
|
-
"description": "Radio
|
|
6206
|
+
"description": "Radio tokens."
|
|
6050
6207
|
},
|
|
6051
6208
|
"variant": {
|
|
6052
6209
|
"type": {
|
|
@@ -6075,73 +6232,250 @@
|
|
|
6075
6232
|
}
|
|
6076
6233
|
}
|
|
6077
6234
|
},
|
|
6078
|
-
"
|
|
6235
|
+
"RadioCard": {
|
|
6079
6236
|
"docs": {
|
|
6080
|
-
"description": "The `
|
|
6237
|
+
"description": "A Card that behaves like a radio button. Use when users select a single choice from mutually exclusive options\nwith need to show additional information for each option. The whole card is interactive as one item.\n\n## Component API\n\nUse `title` prop to provide a main description, and `children` for additional content. Avoid including\ninteractive elements within the RadioCard content.\n\nFor a disabled `RadioCard`, set the `inactive` prop to `true`.\n\n### Controlled version\n\nIf the radio card is controlled from outside, it needs to receive `checked` and `onChange` props.\n\n### Uncontrolled version\n\nIn case of uncontrolled radio card you can use `defaultChecked` prop to provide the initial value.\nWhenever the radio card gets toggled, it calls the `onChange` callback with the new value (boolean).\n\n### Using within forms\n\nYou can pass `name` and `value` props if you need a particular radio card to be a part of a radio group\non a form.\n\n### Validation\n\nYou can mark a radio card as failing validation by setting the `error` prop to `true`.\n\n## A11y guidelines\n\nRadio card accepts all the common accessibility props, but also sets some defaults, including\naccessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)\nor the internal state in case of uncontrolled radio button.",
|
|
6081
6238
|
"props": {
|
|
6082
|
-
"
|
|
6083
|
-
"
|
|
6084
|
-
"
|
|
6085
|
-
"computed": false
|
|
6239
|
+
"title": {
|
|
6240
|
+
"type": {
|
|
6241
|
+
"name": "string"
|
|
6086
6242
|
},
|
|
6243
|
+
"required": false,
|
|
6244
|
+
"description": "Content to be displayed at the top of the card alongside the radio button"
|
|
6245
|
+
},
|
|
6246
|
+
"children": {
|
|
6087
6247
|
"type": {
|
|
6088
6248
|
"name": "union",
|
|
6089
6249
|
"value": [
|
|
6090
6250
|
{
|
|
6091
|
-
"name": "
|
|
6092
|
-
"value": [
|
|
6093
|
-
{
|
|
6094
|
-
"value": "'en'",
|
|
6095
|
-
"computed": false
|
|
6096
|
-
},
|
|
6097
|
-
{
|
|
6098
|
-
"value": "'fr'",
|
|
6099
|
-
"computed": false
|
|
6100
|
-
}
|
|
6101
|
-
]
|
|
6251
|
+
"name": "node"
|
|
6102
6252
|
},
|
|
6103
6253
|
{
|
|
6104
|
-
"name": "
|
|
6105
|
-
"value": {
|
|
6106
|
-
"accessibilityLabel": {
|
|
6107
|
-
"name": "string",
|
|
6108
|
-
"required": false
|
|
6109
|
-
},
|
|
6110
|
-
"clearButtonAccessibilityLabel": {
|
|
6111
|
-
"name": "string",
|
|
6112
|
-
"required": false
|
|
6113
|
-
},
|
|
6114
|
-
"submitButtonAccessibilityLabel": {
|
|
6115
|
-
"name": "string",
|
|
6116
|
-
"required": false
|
|
6117
|
-
}
|
|
6118
|
-
}
|
|
6254
|
+
"name": "func"
|
|
6119
6255
|
}
|
|
6120
6256
|
]
|
|
6121
6257
|
},
|
|
6122
6258
|
"required": false,
|
|
6123
|
-
"description": "
|
|
6259
|
+
"description": "Additional content to be displayed below the button."
|
|
6124
6260
|
},
|
|
6125
|
-
"
|
|
6261
|
+
"checked": {
|
|
6126
6262
|
"type": {
|
|
6127
|
-
"name": "
|
|
6263
|
+
"name": "bool"
|
|
6128
6264
|
},
|
|
6129
6265
|
"required": false,
|
|
6130
|
-
"description": "Use
|
|
6266
|
+
"description": "Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop."
|
|
6131
6267
|
},
|
|
6132
|
-
"
|
|
6268
|
+
"defaultChecked": {
|
|
6133
6269
|
"type": {
|
|
6134
|
-
"name": "
|
|
6270
|
+
"name": "bool"
|
|
6135
6271
|
},
|
|
6136
6272
|
"required": false,
|
|
6137
|
-
"description": "
|
|
6273
|
+
"description": "Use `defaultChecked` to provide the initial value for an uncontrolled Radio."
|
|
6138
6274
|
},
|
|
6139
|
-
"
|
|
6275
|
+
"description": {
|
|
6140
6276
|
"type": {
|
|
6141
|
-
"name": "
|
|
6277
|
+
"name": "string"
|
|
6142
6278
|
},
|
|
6143
6279
|
"required": false,
|
|
6144
|
-
"description": "
|
|
6280
|
+
"description": "An optional radio button description."
|
|
6281
|
+
},
|
|
6282
|
+
"id": {
|
|
6283
|
+
"type": {
|
|
6284
|
+
"name": "string"
|
|
6285
|
+
},
|
|
6286
|
+
"required": false,
|
|
6287
|
+
"description": "Radio card button ID."
|
|
6288
|
+
},
|
|
6289
|
+
"inactive": {
|
|
6290
|
+
"type": {
|
|
6291
|
+
"name": "bool"
|
|
6292
|
+
},
|
|
6293
|
+
"required": false,
|
|
6294
|
+
"description": "Whether the corresponding input is disabled or active."
|
|
6295
|
+
},
|
|
6296
|
+
"label": {
|
|
6297
|
+
"type": {
|
|
6298
|
+
"name": "string"
|
|
6299
|
+
},
|
|
6300
|
+
"required": false,
|
|
6301
|
+
"description": "The label."
|
|
6302
|
+
},
|
|
6303
|
+
"name": {
|
|
6304
|
+
"type": {
|
|
6305
|
+
"name": "string"
|
|
6306
|
+
},
|
|
6307
|
+
"required": false,
|
|
6308
|
+
"description": "Associate this radio card with a group (set as the name attribute)."
|
|
6309
|
+
},
|
|
6310
|
+
"error": {
|
|
6311
|
+
"type": {
|
|
6312
|
+
"name": "bool"
|
|
6313
|
+
},
|
|
6314
|
+
"required": false,
|
|
6315
|
+
"description": "Whether the underlying input triggered a validation error or not."
|
|
6316
|
+
},
|
|
6317
|
+
"value": {
|
|
6318
|
+
"type": {
|
|
6319
|
+
"name": "union",
|
|
6320
|
+
"value": [
|
|
6321
|
+
{
|
|
6322
|
+
"name": "string"
|
|
6323
|
+
},
|
|
6324
|
+
{
|
|
6325
|
+
"name": "number"
|
|
6326
|
+
},
|
|
6327
|
+
{
|
|
6328
|
+
"name": "bool"
|
|
6329
|
+
}
|
|
6330
|
+
]
|
|
6331
|
+
},
|
|
6332
|
+
"required": false,
|
|
6333
|
+
"description": "The value. Must be unique within the group."
|
|
6334
|
+
},
|
|
6335
|
+
"onChange": {
|
|
6336
|
+
"type": {
|
|
6337
|
+
"name": "func"
|
|
6338
|
+
},
|
|
6339
|
+
"required": false,
|
|
6340
|
+
"description": "Callback called when a controlled radio card gets interacted with."
|
|
6341
|
+
},
|
|
6342
|
+
"tokens": {
|
|
6343
|
+
"type": {
|
|
6344
|
+
"name": "custom",
|
|
6345
|
+
"raw": {
|
|
6346
|
+
"outerBorderColor": "color",
|
|
6347
|
+
"outerBorderWidth": "border",
|
|
6348
|
+
"outerBorderGap": "size",
|
|
6349
|
+
"flex": "integer",
|
|
6350
|
+
"backgroundColor": "color",
|
|
6351
|
+
"borderColor": "color",
|
|
6352
|
+
"borderRadius": "radius",
|
|
6353
|
+
"borderWidth": "border",
|
|
6354
|
+
"paddingBottom": "size",
|
|
6355
|
+
"paddingLeft": "size",
|
|
6356
|
+
"paddingRight": "size",
|
|
6357
|
+
"paddingTop": "size",
|
|
6358
|
+
"minWidth": "size",
|
|
6359
|
+
"shadow": "shadow",
|
|
6360
|
+
"radioCheckedBackgroundColor": "color",
|
|
6361
|
+
"radioCheckedSize": "size",
|
|
6362
|
+
"radioInputBackgroundColor": "color",
|
|
6363
|
+
"radioInputBorderColor": "color",
|
|
6364
|
+
"radioInputBorderWidth": "border",
|
|
6365
|
+
"radioInputOutlineColor": "color",
|
|
6366
|
+
"radioInputOutlineWidth": "border",
|
|
6367
|
+
"radioInputSize": "size",
|
|
6368
|
+
"radioOuterBorderColor": "color",
|
|
6369
|
+
"radioOuterBorderWidth": "border",
|
|
6370
|
+
"radioOuterBorderGap": "size",
|
|
6371
|
+
"fontSize": "fontSize",
|
|
6372
|
+
"fontName": "fontName",
|
|
6373
|
+
"lineHeight": "lineHeight",
|
|
6374
|
+
"color": "color",
|
|
6375
|
+
"letterSpacing": "letterSpacing",
|
|
6376
|
+
"textTransform": "textTransform",
|
|
6377
|
+
"fontWeight": "fontWeight",
|
|
6378
|
+
"radioSpace": "integer",
|
|
6379
|
+
"contentSpace": "integer"
|
|
6380
|
+
}
|
|
6381
|
+
},
|
|
6382
|
+
"required": false,
|
|
6383
|
+
"description": "Radio card tokens."
|
|
6384
|
+
},
|
|
6385
|
+
"variant": {
|
|
6386
|
+
"type": {
|
|
6387
|
+
"name": "objectOf",
|
|
6388
|
+
"value": {
|
|
6389
|
+
"name": "union",
|
|
6390
|
+
"value": [
|
|
6391
|
+
{
|
|
6392
|
+
"name": "string"
|
|
6393
|
+
},
|
|
6394
|
+
{
|
|
6395
|
+
"name": "number"
|
|
6396
|
+
},
|
|
6397
|
+
{
|
|
6398
|
+
"name": "bool"
|
|
6399
|
+
}
|
|
6400
|
+
]
|
|
6401
|
+
}
|
|
6402
|
+
},
|
|
6403
|
+
"required": false,
|
|
6404
|
+
"description": "Radio variant."
|
|
6405
|
+
}
|
|
6406
|
+
},
|
|
6407
|
+
"attributes": {
|
|
6408
|
+
"acceptsRNA11yProps": false
|
|
6409
|
+
}
|
|
6410
|
+
}
|
|
6411
|
+
},
|
|
6412
|
+
"Search": {
|
|
6413
|
+
"docs": {
|
|
6414
|
+
"description": "The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.\nUse `Search` to feature autocomplete interactions.\n\nThis component includes a clear button, which will appear as text is entered and pressing it will\ncause the input's internal state value to be set to an empty string.\n\nThis component may only be used as uncontrolled, as the search value is managed within an internal state.\nYou can use the `onChange` prop to react to value changes and the `onSubmit` prop to react on search submission.\n\nUse the following props to supply additional accessibility labels for the input - `accessibilityLabel`,\nclear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.",
|
|
6415
|
+
"props": {
|
|
6416
|
+
"copy": {
|
|
6417
|
+
"defaultValue": {
|
|
6418
|
+
"value": "'en'",
|
|
6419
|
+
"computed": false
|
|
6420
|
+
},
|
|
6421
|
+
"type": {
|
|
6422
|
+
"name": "union",
|
|
6423
|
+
"value": [
|
|
6424
|
+
{
|
|
6425
|
+
"name": "enum",
|
|
6426
|
+
"value": [
|
|
6427
|
+
{
|
|
6428
|
+
"value": "'en'",
|
|
6429
|
+
"computed": false
|
|
6430
|
+
},
|
|
6431
|
+
{
|
|
6432
|
+
"value": "'fr'",
|
|
6433
|
+
"computed": false
|
|
6434
|
+
}
|
|
6435
|
+
]
|
|
6436
|
+
},
|
|
6437
|
+
{
|
|
6438
|
+
"name": "shape",
|
|
6439
|
+
"value": {
|
|
6440
|
+
"accessibilityLabel": {
|
|
6441
|
+
"name": "string",
|
|
6442
|
+
"required": false
|
|
6443
|
+
},
|
|
6444
|
+
"clearButtonAccessibilityLabel": {
|
|
6445
|
+
"name": "string",
|
|
6446
|
+
"required": false
|
|
6447
|
+
},
|
|
6448
|
+
"submitButtonAccessibilityLabel": {
|
|
6449
|
+
"name": "string",
|
|
6450
|
+
"required": false
|
|
6451
|
+
}
|
|
6452
|
+
}
|
|
6453
|
+
}
|
|
6454
|
+
]
|
|
6455
|
+
},
|
|
6456
|
+
"required": false,
|
|
6457
|
+
"description": "Select English or French copy for the accessible labels.\nYou may also pass in a custom dictionary object."
|
|
6458
|
+
},
|
|
6459
|
+
"initialValue": {
|
|
6460
|
+
"type": {
|
|
6461
|
+
"name": "string"
|
|
6462
|
+
},
|
|
6463
|
+
"required": false,
|
|
6464
|
+
"description": "Use this to set the initial value of the search input.\nUpdating `initialValue` will **not** update the actual value."
|
|
6465
|
+
},
|
|
6466
|
+
"placeholder": {
|
|
6467
|
+
"type": {
|
|
6468
|
+
"name": "string"
|
|
6469
|
+
},
|
|
6470
|
+
"required": false,
|
|
6471
|
+
"description": "Label rendered in the search input when it has no value."
|
|
6472
|
+
},
|
|
6473
|
+
"inactive": {
|
|
6474
|
+
"type": {
|
|
6475
|
+
"name": "bool"
|
|
6476
|
+
},
|
|
6477
|
+
"required": false,
|
|
6478
|
+
"description": "Disables all user interactions with the search input."
|
|
6145
6479
|
},
|
|
6146
6480
|
"onChange": {
|
|
6147
6481
|
"type": {
|
|
@@ -7567,135 +7901,390 @@
|
|
|
7567
7901
|
"value": "Platform.select({ web: 'group', default: 'none' })",
|
|
7568
7902
|
"computed": true
|
|
7569
7903
|
},
|
|
7570
|
-
"required": false
|
|
7904
|
+
"required": false
|
|
7905
|
+
},
|
|
7906
|
+
"tokens": {
|
|
7907
|
+
"type": {
|
|
7908
|
+
"name": "custom",
|
|
7909
|
+
"raw": {
|
|
7910
|
+
"space": "integer",
|
|
7911
|
+
"direction": "direction",
|
|
7912
|
+
"alignItems": "flexAlign",
|
|
7913
|
+
"justifyContent": "flexJustifyContent",
|
|
7914
|
+
"flexGrow": "integer",
|
|
7915
|
+
"flexShrink": "integer"
|
|
7916
|
+
}
|
|
7917
|
+
},
|
|
7918
|
+
"required": false,
|
|
7919
|
+
"description": ""
|
|
7920
|
+
},
|
|
7921
|
+
"variant": {
|
|
7922
|
+
"type": {
|
|
7923
|
+
"name": "objectOf",
|
|
7924
|
+
"value": {
|
|
7925
|
+
"name": "union",
|
|
7926
|
+
"value": [
|
|
7927
|
+
{
|
|
7928
|
+
"name": "string"
|
|
7929
|
+
},
|
|
7930
|
+
{
|
|
7931
|
+
"name": "number"
|
|
7932
|
+
},
|
|
7933
|
+
{
|
|
7934
|
+
"name": "bool"
|
|
7935
|
+
}
|
|
7936
|
+
]
|
|
7937
|
+
}
|
|
7938
|
+
},
|
|
7939
|
+
"required": false,
|
|
7940
|
+
"description": ""
|
|
7941
|
+
},
|
|
7942
|
+
"maxValues": {
|
|
7943
|
+
"type": {
|
|
7944
|
+
"name": "number"
|
|
7945
|
+
},
|
|
7946
|
+
"required": false,
|
|
7947
|
+
"description": "If provided, sets a maximum number of items a user may select at once."
|
|
7948
|
+
},
|
|
7949
|
+
"onChange": {
|
|
7950
|
+
"type": {
|
|
7951
|
+
"name": "func"
|
|
7952
|
+
},
|
|
7953
|
+
"required": false,
|
|
7954
|
+
"description": "If provided, this function is called when the current selection is changed\nand is passed an array of the `id`s of all currently selected `items`."
|
|
7955
|
+
},
|
|
7956
|
+
"values": {
|
|
7957
|
+
"type": {
|
|
7958
|
+
"name": "arrayOf",
|
|
7959
|
+
"value": {
|
|
7960
|
+
"name": "string"
|
|
7961
|
+
}
|
|
7962
|
+
},
|
|
7963
|
+
"required": false,
|
|
7964
|
+
"description": "If the selected item(s) in the button group are to be controlled externally by\na parent component, pass an array of strings as well as an `onChange` handler.\nPassing an array for \"values\" makes the ButtonGroup a \"controlled\" component that\nexpects its state to be handled via `onChange` and so doesn't handle it itself."
|
|
7965
|
+
},
|
|
7966
|
+
"initialValues": {
|
|
7967
|
+
"type": {
|
|
7968
|
+
"name": "arrayOf",
|
|
7969
|
+
"value": {
|
|
7970
|
+
"name": "string"
|
|
7971
|
+
}
|
|
7972
|
+
},
|
|
7973
|
+
"required": false,
|
|
7974
|
+
"description": "If `values` is not passed, making the ButtonGroup an \"uncontrolled\" component\nmanaging its own selected state, a default set of selections may be provided.\nChanging the `initialValues` does not change the user's selections."
|
|
7975
|
+
}
|
|
7976
|
+
},
|
|
7977
|
+
"attributes": {
|
|
7978
|
+
"acceptsRNA11yProps": false
|
|
7979
|
+
}
|
|
7980
|
+
}
|
|
7981
|
+
},
|
|
7982
|
+
"ThemeProvider": {
|
|
7983
|
+
"docs": {
|
|
7984
|
+
"description": "",
|
|
7985
|
+
"props": {
|
|
7986
|
+
"themeOptions": {
|
|
7987
|
+
"defaultValue": {
|
|
7988
|
+
"value": "{ forceAbsoluteFontSizing: true }",
|
|
7989
|
+
"computed": false
|
|
7990
|
+
},
|
|
7991
|
+
"type": {
|
|
7992
|
+
"name": "shape",
|
|
7993
|
+
"value": {
|
|
7994
|
+
"forceAbsoluteFontSizing": {
|
|
7995
|
+
"name": "bool",
|
|
7996
|
+
"required": false
|
|
7997
|
+
},
|
|
7998
|
+
"contentMaxWidth": {
|
|
7999
|
+
"name": "custom",
|
|
8000
|
+
"raw": "responsiveProps.getTypeOptionallyByViewport(PropTypes.number)",
|
|
8001
|
+
"required": false
|
|
8002
|
+
}
|
|
8003
|
+
}
|
|
8004
|
+
},
|
|
8005
|
+
"required": false,
|
|
8006
|
+
"description": "An object containing options allowing to customize the theming experience:\n\n- `forceAbsoluteFontSizing`: available on web only; when set to true, allows\n using absolute font sizing (in pixels, doesn't scale) instead of the\n relative sizing (in `rem`, scales depending on the browser settings)\n- `contentMaxWidth`: allows configuration of the content max width to be used in components\n such as Footnote and Notification to avoid content to stretch width more then the page's width"
|
|
8007
|
+
},
|
|
8008
|
+
"children": {
|
|
8009
|
+
"type": {
|
|
8010
|
+
"name": "node"
|
|
8011
|
+
},
|
|
8012
|
+
"required": true,
|
|
8013
|
+
"description": ""
|
|
8014
|
+
},
|
|
8015
|
+
"defaultTheme": {
|
|
8016
|
+
"type": {
|
|
8017
|
+
"name": "shape",
|
|
8018
|
+
"value": {
|
|
8019
|
+
"metadata": {
|
|
8020
|
+
"name": "shape",
|
|
8021
|
+
"value": {
|
|
8022
|
+
"themeTokensVersion": {
|
|
8023
|
+
"name": "string",
|
|
8024
|
+
"required": true
|
|
8025
|
+
}
|
|
8026
|
+
},
|
|
8027
|
+
"required": true
|
|
8028
|
+
}
|
|
8029
|
+
}
|
|
8030
|
+
},
|
|
8031
|
+
"required": true,
|
|
8032
|
+
"description": ""
|
|
8033
|
+
}
|
|
8034
|
+
},
|
|
8035
|
+
"attributes": {
|
|
8036
|
+
"acceptsRNA11yProps": false
|
|
8037
|
+
}
|
|
8038
|
+
}
|
|
8039
|
+
},
|
|
8040
|
+
"Timeline": {
|
|
8041
|
+
"docs": {
|
|
8042
|
+
"description": "Timeline is a component that displays either a horizontal or vertical list of the\nchildren components passed by props\n\n## Component API\n\n- `horizontal` In order to display the Component list horizontally\n\n\n## A11y guidelines\nTimeline link supports all the common a11y props.",
|
|
8043
|
+
"props": {
|
|
8044
|
+
"variant": {
|
|
8045
|
+
"defaultValue": {
|
|
8046
|
+
"value": "{}",
|
|
8047
|
+
"computed": false
|
|
8048
|
+
},
|
|
8049
|
+
"type": {
|
|
8050
|
+
"name": "objectOf",
|
|
8051
|
+
"value": {
|
|
8052
|
+
"name": "union",
|
|
8053
|
+
"value": [
|
|
8054
|
+
{
|
|
8055
|
+
"name": "string"
|
|
8056
|
+
},
|
|
8057
|
+
{
|
|
8058
|
+
"name": "number"
|
|
8059
|
+
},
|
|
8060
|
+
{
|
|
8061
|
+
"name": "bool"
|
|
8062
|
+
}
|
|
8063
|
+
]
|
|
8064
|
+
}
|
|
8065
|
+
},
|
|
8066
|
+
"required": false,
|
|
8067
|
+
"description": ""
|
|
8068
|
+
},
|
|
8069
|
+
"tag": {
|
|
8070
|
+
"defaultValue": {
|
|
8071
|
+
"value": "'ul'",
|
|
8072
|
+
"computed": false
|
|
8073
|
+
},
|
|
8074
|
+
"type": {
|
|
8075
|
+
"name": "enum",
|
|
8076
|
+
"value": [
|
|
8077
|
+
{
|
|
8078
|
+
"value": "'h1'",
|
|
8079
|
+
"computed": false
|
|
8080
|
+
},
|
|
8081
|
+
{
|
|
8082
|
+
"value": "'h2'",
|
|
8083
|
+
"computed": false
|
|
8084
|
+
},
|
|
8085
|
+
{
|
|
8086
|
+
"value": "'h3'",
|
|
8087
|
+
"computed": false
|
|
8088
|
+
},
|
|
8089
|
+
{
|
|
8090
|
+
"value": "'h4'",
|
|
8091
|
+
"computed": false
|
|
8092
|
+
},
|
|
8093
|
+
{
|
|
8094
|
+
"value": "'h5'",
|
|
8095
|
+
"computed": false
|
|
8096
|
+
},
|
|
8097
|
+
{
|
|
8098
|
+
"value": "'h6'",
|
|
8099
|
+
"computed": false
|
|
8100
|
+
},
|
|
8101
|
+
{
|
|
8102
|
+
"value": "'article'",
|
|
8103
|
+
"computed": false
|
|
8104
|
+
},
|
|
8105
|
+
{
|
|
8106
|
+
"value": "'aside'",
|
|
8107
|
+
"computed": false
|
|
8108
|
+
},
|
|
8109
|
+
{
|
|
8110
|
+
"value": "'blockquote'",
|
|
8111
|
+
"computed": false
|
|
8112
|
+
},
|
|
8113
|
+
{
|
|
8114
|
+
"value": "'footer'",
|
|
8115
|
+
"computed": false
|
|
8116
|
+
},
|
|
8117
|
+
{
|
|
8118
|
+
"value": "'figure'",
|
|
8119
|
+
"computed": false
|
|
8120
|
+
},
|
|
8121
|
+
{
|
|
8122
|
+
"value": "'form'",
|
|
8123
|
+
"computed": false
|
|
8124
|
+
},
|
|
8125
|
+
{
|
|
8126
|
+
"value": "'header'",
|
|
8127
|
+
"computed": false
|
|
8128
|
+
},
|
|
8129
|
+
{
|
|
8130
|
+
"value": "'ul'",
|
|
8131
|
+
"computed": false
|
|
8132
|
+
},
|
|
8133
|
+
{
|
|
8134
|
+
"value": "'li'",
|
|
8135
|
+
"computed": false
|
|
8136
|
+
},
|
|
8137
|
+
{
|
|
8138
|
+
"value": "'main'",
|
|
8139
|
+
"computed": false
|
|
8140
|
+
},
|
|
8141
|
+
{
|
|
8142
|
+
"value": "'nav'",
|
|
8143
|
+
"computed": false
|
|
8144
|
+
},
|
|
8145
|
+
{
|
|
8146
|
+
"value": "'section'",
|
|
8147
|
+
"computed": false
|
|
8148
|
+
},
|
|
8149
|
+
{
|
|
8150
|
+
"value": "'label'",
|
|
8151
|
+
"computed": false
|
|
8152
|
+
}
|
|
8153
|
+
]
|
|
8154
|
+
},
|
|
8155
|
+
"required": false,
|
|
8156
|
+
"description": "Sets the HTML tag of the outer container and the children. By default `'li'` for the children\nand `'ul'` for the container\n\nIf either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML."
|
|
8157
|
+
},
|
|
8158
|
+
"childrenTag": {
|
|
8159
|
+
"defaultValue": {
|
|
8160
|
+
"value": "'li'",
|
|
8161
|
+
"computed": false
|
|
8162
|
+
},
|
|
8163
|
+
"type": {
|
|
8164
|
+
"name": "enum",
|
|
8165
|
+
"value": [
|
|
8166
|
+
{
|
|
8167
|
+
"value": "'h1'",
|
|
8168
|
+
"computed": false
|
|
8169
|
+
},
|
|
8170
|
+
{
|
|
8171
|
+
"value": "'h2'",
|
|
8172
|
+
"computed": false
|
|
8173
|
+
},
|
|
8174
|
+
{
|
|
8175
|
+
"value": "'h3'",
|
|
8176
|
+
"computed": false
|
|
8177
|
+
},
|
|
8178
|
+
{
|
|
8179
|
+
"value": "'h4'",
|
|
8180
|
+
"computed": false
|
|
8181
|
+
},
|
|
8182
|
+
{
|
|
8183
|
+
"value": "'h5'",
|
|
8184
|
+
"computed": false
|
|
8185
|
+
},
|
|
8186
|
+
{
|
|
8187
|
+
"value": "'h6'",
|
|
8188
|
+
"computed": false
|
|
8189
|
+
},
|
|
8190
|
+
{
|
|
8191
|
+
"value": "'article'",
|
|
8192
|
+
"computed": false
|
|
8193
|
+
},
|
|
8194
|
+
{
|
|
8195
|
+
"value": "'aside'",
|
|
8196
|
+
"computed": false
|
|
8197
|
+
},
|
|
8198
|
+
{
|
|
8199
|
+
"value": "'blockquote'",
|
|
8200
|
+
"computed": false
|
|
8201
|
+
},
|
|
8202
|
+
{
|
|
8203
|
+
"value": "'footer'",
|
|
8204
|
+
"computed": false
|
|
8205
|
+
},
|
|
8206
|
+
{
|
|
8207
|
+
"value": "'figure'",
|
|
8208
|
+
"computed": false
|
|
8209
|
+
},
|
|
8210
|
+
{
|
|
8211
|
+
"value": "'form'",
|
|
8212
|
+
"computed": false
|
|
8213
|
+
},
|
|
8214
|
+
{
|
|
8215
|
+
"value": "'header'",
|
|
8216
|
+
"computed": false
|
|
8217
|
+
},
|
|
8218
|
+
{
|
|
8219
|
+
"value": "'ul'",
|
|
8220
|
+
"computed": false
|
|
8221
|
+
},
|
|
8222
|
+
{
|
|
8223
|
+
"value": "'li'",
|
|
8224
|
+
"computed": false
|
|
8225
|
+
},
|
|
8226
|
+
{
|
|
8227
|
+
"value": "'main'",
|
|
8228
|
+
"computed": false
|
|
8229
|
+
},
|
|
8230
|
+
{
|
|
8231
|
+
"value": "'nav'",
|
|
8232
|
+
"computed": false
|
|
8233
|
+
},
|
|
8234
|
+
{
|
|
8235
|
+
"value": "'section'",
|
|
8236
|
+
"computed": false
|
|
8237
|
+
},
|
|
8238
|
+
{
|
|
8239
|
+
"value": "'label'",
|
|
8240
|
+
"computed": false
|
|
8241
|
+
}
|
|
8242
|
+
]
|
|
8243
|
+
},
|
|
8244
|
+
"required": false,
|
|
8245
|
+
"description": ""
|
|
7571
8246
|
},
|
|
7572
8247
|
"tokens": {
|
|
7573
8248
|
"type": {
|
|
7574
8249
|
"name": "custom",
|
|
7575
8250
|
"raw": {
|
|
7576
|
-
"
|
|
7577
|
-
"
|
|
7578
|
-
"
|
|
7579
|
-
"
|
|
7580
|
-
"
|
|
7581
|
-
"
|
|
7582
|
-
|
|
7583
|
-
|
|
7584
|
-
|
|
7585
|
-
|
|
7586
|
-
|
|
7587
|
-
|
|
7588
|
-
|
|
7589
|
-
|
|
7590
|
-
|
|
7591
|
-
"
|
|
7592
|
-
"value": [
|
|
7593
|
-
{
|
|
7594
|
-
"name": "string"
|
|
7595
|
-
},
|
|
7596
|
-
{
|
|
7597
|
-
"name": "number"
|
|
7598
|
-
},
|
|
7599
|
-
{
|
|
7600
|
-
"name": "bool"
|
|
7601
|
-
}
|
|
7602
|
-
]
|
|
8251
|
+
"dotColor": "color",
|
|
8252
|
+
"dotWidth": "size",
|
|
8253
|
+
"dotBorderWidth": "border",
|
|
8254
|
+
"timelineContainerDirection": "direction",
|
|
8255
|
+
"timelineColor": "color",
|
|
8256
|
+
"connectorWidth": "size",
|
|
8257
|
+
"connectorHeight": "size",
|
|
8258
|
+
"lineItemContainerDirection": "direction",
|
|
8259
|
+
"lineContainerFlexSize": "integer",
|
|
8260
|
+
"lineItemAlign": "flexAlign",
|
|
8261
|
+
"lineItemDirection": "direction",
|
|
8262
|
+
"lineItemMarginRight": "size",
|
|
8263
|
+
"lineItemMarginBottom": "size",
|
|
8264
|
+
"itemContentFlexSize": "integer",
|
|
8265
|
+
"itemContentMarginRight": "size",
|
|
8266
|
+
"itemContentMarginBottom": "size"
|
|
7603
8267
|
}
|
|
7604
8268
|
},
|
|
7605
8269
|
"required": false,
|
|
7606
8270
|
"description": ""
|
|
7607
8271
|
},
|
|
7608
|
-
"
|
|
7609
|
-
"type": {
|
|
7610
|
-
"name": "number"
|
|
7611
|
-
},
|
|
7612
|
-
"required": false,
|
|
7613
|
-
"description": "If provided, sets a maximum number of items a user may select at once."
|
|
7614
|
-
},
|
|
7615
|
-
"onChange": {
|
|
7616
|
-
"type": {
|
|
7617
|
-
"name": "func"
|
|
7618
|
-
},
|
|
7619
|
-
"required": false,
|
|
7620
|
-
"description": "If provided, this function is called when the current selection is changed\nand is passed an array of the `id`s of all currently selected `items`."
|
|
7621
|
-
},
|
|
7622
|
-
"values": {
|
|
7623
|
-
"type": {
|
|
7624
|
-
"name": "arrayOf",
|
|
7625
|
-
"value": {
|
|
7626
|
-
"name": "string"
|
|
7627
|
-
}
|
|
7628
|
-
},
|
|
7629
|
-
"required": false,
|
|
7630
|
-
"description": "If the selected item(s) in the button group are to be controlled externally by\na parent component, pass an array of strings as well as an `onChange` handler.\nPassing an array for \"values\" makes the ButtonGroup a \"controlled\" component that\nexpects its state to be handled via `onChange` and so doesn't handle it itself."
|
|
7631
|
-
},
|
|
7632
|
-
"initialValues": {
|
|
8272
|
+
"children": {
|
|
7633
8273
|
"type": {
|
|
7634
8274
|
"name": "arrayOf",
|
|
7635
8275
|
"value": {
|
|
7636
|
-
"name": "
|
|
7637
|
-
}
|
|
7638
|
-
},
|
|
7639
|
-
"required": false,
|
|
7640
|
-
"description": "If `values` is not passed, making the ButtonGroup an \"uncontrolled\" component\nmanaging its own selected state, a default set of selections may be provided.\nChanging the `initialValues` does not change the user's selections."
|
|
7641
|
-
}
|
|
7642
|
-
},
|
|
7643
|
-
"attributes": {
|
|
7644
|
-
"acceptsRNA11yProps": false
|
|
7645
|
-
}
|
|
7646
|
-
}
|
|
7647
|
-
},
|
|
7648
|
-
"ThemeProvider": {
|
|
7649
|
-
"docs": {
|
|
7650
|
-
"description": "",
|
|
7651
|
-
"props": {
|
|
7652
|
-
"themeOptions": {
|
|
7653
|
-
"defaultValue": {
|
|
7654
|
-
"value": "{ forceAbsoluteFontSizing: true }",
|
|
7655
|
-
"computed": false
|
|
7656
|
-
},
|
|
7657
|
-
"type": {
|
|
7658
|
-
"name": "shape",
|
|
7659
|
-
"value": {
|
|
7660
|
-
"forceAbsoluteFontSizing": {
|
|
7661
|
-
"name": "bool",
|
|
7662
|
-
"required": false
|
|
7663
|
-
},
|
|
7664
|
-
"contentMaxWidth": {
|
|
7665
|
-
"name": "custom",
|
|
7666
|
-
"raw": "responsiveProps.getTypeOptionallyByViewport(PropTypes.number)",
|
|
7667
|
-
"required": false
|
|
7668
|
-
}
|
|
8276
|
+
"name": "node"
|
|
7669
8277
|
}
|
|
7670
8278
|
},
|
|
7671
|
-
"required": false,
|
|
7672
|
-
"description": "An object containing options allowing to customize the theming experience:\n\n- `forceAbsoluteFontSizing`: available on web only; when set to true, allows\n using absolute font sizing (in pixels, doesn't scale) instead of the\n relative sizing (in `rem`, scales depending on the browser settings)\n- `contentMaxWidth`: allows configuration of the content max width to be used in components\n such as Footnote and Notification to avoid content to stretch width more then the page's width"
|
|
7673
|
-
},
|
|
7674
|
-
"children": {
|
|
7675
|
-
"type": {
|
|
7676
|
-
"name": "node"
|
|
7677
|
-
},
|
|
7678
8279
|
"required": true,
|
|
7679
|
-
"description": ""
|
|
8280
|
+
"description": "A list of components that will be rendered either horizontally or vertically"
|
|
7680
8281
|
},
|
|
7681
|
-
"
|
|
8282
|
+
"accessibilityLabel": {
|
|
7682
8283
|
"type": {
|
|
7683
|
-
"name": "
|
|
7684
|
-
"value": {
|
|
7685
|
-
"metadata": {
|
|
7686
|
-
"name": "shape",
|
|
7687
|
-
"value": {
|
|
7688
|
-
"themeTokensVersion": {
|
|
7689
|
-
"name": "string",
|
|
7690
|
-
"required": true
|
|
7691
|
-
}
|
|
7692
|
-
},
|
|
7693
|
-
"required": true
|
|
7694
|
-
}
|
|
7695
|
-
}
|
|
8284
|
+
"name": "string"
|
|
7696
8285
|
},
|
|
7697
8286
|
"required": true,
|
|
7698
|
-
"description": ""
|
|
8287
|
+
"description": "A required accessibility label that needs to be passed to be used on List\nwhich is applied as normal for a React Native accessibilityLabel prop."
|
|
7699
8288
|
}
|
|
7700
8289
|
},
|
|
7701
8290
|
"attributes": {
|
|
@@ -8116,28 +8705,176 @@
|
|
|
8116
8705
|
"name": "node"
|
|
8117
8706
|
},
|
|
8118
8707
|
"required": false,
|
|
8119
|
-
"description": "Same children allowed as a React Native <Text> node"
|
|
8120
|
-
}
|
|
8121
|
-
},
|
|
8122
|
-
"attributes": {
|
|
8123
|
-
"acceptsRNA11yProps": false
|
|
8124
|
-
}
|
|
8125
|
-
}
|
|
8126
|
-
},
|
|
8127
|
-
"ViewportProvider": {
|
|
8128
|
-
"docs": {
|
|
8129
|
-
"description": "Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook",
|
|
8130
|
-
"props": {
|
|
8131
|
-
"children": {
|
|
8708
|
+
"description": "Same children allowed as a React Native <Text> node"
|
|
8709
|
+
}
|
|
8710
|
+
},
|
|
8711
|
+
"attributes": {
|
|
8712
|
+
"acceptsRNA11yProps": false
|
|
8713
|
+
}
|
|
8714
|
+
}
|
|
8715
|
+
},
|
|
8716
|
+
"ViewportProvider": {
|
|
8717
|
+
"docs": {
|
|
8718
|
+
"description": "Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook",
|
|
8719
|
+
"props": {
|
|
8720
|
+
"children": {
|
|
8721
|
+
"type": {
|
|
8722
|
+
"name": "node"
|
|
8723
|
+
},
|
|
8724
|
+
"required": true,
|
|
8725
|
+
"description": ""
|
|
8726
|
+
}
|
|
8727
|
+
},
|
|
8728
|
+
"attributes": {
|
|
8729
|
+
"acceptsRNA11yProps": false
|
|
8730
|
+
}
|
|
8731
|
+
}
|
|
8732
|
+
},
|
|
8733
|
+
"Button": {
|
|
8734
|
+
"docs": {
|
|
8735
|
+
"description": "",
|
|
8736
|
+
"props": {
|
|
8737
|
+
"tokens": {
|
|
8738
|
+
"type": {
|
|
8739
|
+
"name": "custom",
|
|
8740
|
+
"raw": {
|
|
8741
|
+
"borderColor": "color",
|
|
8742
|
+
"borderWidth": "border",
|
|
8743
|
+
"borderRadius": "radius",
|
|
8744
|
+
"shadow": "shadow",
|
|
8745
|
+
"fontSize": "fontSize",
|
|
8746
|
+
"color": "color",
|
|
8747
|
+
"lineHeight": "lineHeight",
|
|
8748
|
+
"textAlign": "flexJustifyContent",
|
|
8749
|
+
"alignSelf": "flexAlign",
|
|
8750
|
+
"fontName": "fontName",
|
|
8751
|
+
"fontWeight": "fontWeight",
|
|
8752
|
+
"backgroundColor": "color",
|
|
8753
|
+
"opacity": "opacity",
|
|
8754
|
+
"paddingLeft": "size",
|
|
8755
|
+
"paddingRight": "size",
|
|
8756
|
+
"paddingTop": "size",
|
|
8757
|
+
"paddingBottom": "size",
|
|
8758
|
+
"width": "size",
|
|
8759
|
+
"minWidth": "size",
|
|
8760
|
+
"iconSize": "size",
|
|
8761
|
+
"iconSpace": "integer",
|
|
8762
|
+
"icon": "icon",
|
|
8763
|
+
"outerBorderColor": "color",
|
|
8764
|
+
"outerBorderWidth": "border",
|
|
8765
|
+
"outerBorderGap": "size",
|
|
8766
|
+
"outerBackgroundColor": "color"
|
|
8767
|
+
}
|
|
8768
|
+
},
|
|
8769
|
+
"required": false,
|
|
8770
|
+
"description": ""
|
|
8771
|
+
},
|
|
8772
|
+
"inactive": {
|
|
8773
|
+
"type": {
|
|
8774
|
+
"name": "bool"
|
|
8775
|
+
},
|
|
8776
|
+
"required": false,
|
|
8777
|
+
"description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
|
|
8778
|
+
},
|
|
8779
|
+
"disabled": {
|
|
8780
|
+
"type": {
|
|
8781
|
+
"name": "bool"
|
|
8782
|
+
},
|
|
8783
|
+
"required": false,
|
|
8784
|
+
"description": "Alias for `inactive`"
|
|
8785
|
+
},
|
|
8786
|
+
"children": {
|
|
8787
|
+
"type": {
|
|
8788
|
+
"name": "custom",
|
|
8789
|
+
"raw": "ABBPropTypes.childrenOf(\n PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
|
|
8790
|
+
},
|
|
8791
|
+
"required": false,
|
|
8792
|
+
"description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
|
|
8793
|
+
},
|
|
8794
|
+
"onPress": {
|
|
8795
|
+
"type": {
|
|
8796
|
+
"name": "func"
|
|
8797
|
+
},
|
|
8798
|
+
"required": false,
|
|
8799
|
+
"description": "Function called when the button is pressed. Required unless the button has a href."
|
|
8800
|
+
},
|
|
8801
|
+
"iconProps": {
|
|
8802
|
+
"type": {
|
|
8803
|
+
"name": "exact",
|
|
8804
|
+
"value": {
|
|
8805
|
+
"variant": {
|
|
8806
|
+
"name": "custom",
|
|
8807
|
+
"raw": "variantProp.propType",
|
|
8808
|
+
"required": false
|
|
8809
|
+
},
|
|
8810
|
+
"tokens": {
|
|
8811
|
+
"name": "custom",
|
|
8812
|
+
"raw": "getTokensPropType('Icon')",
|
|
8813
|
+
"required": false
|
|
8814
|
+
},
|
|
8815
|
+
"accessibilityLabel": {
|
|
8816
|
+
"name": "string",
|
|
8817
|
+
"description": "Descriptive label used in web SVG title tag for accessibility",
|
|
8818
|
+
"required": false
|
|
8819
|
+
},
|
|
8820
|
+
"scalesWithText": {
|
|
8821
|
+
"name": "bool",
|
|
8822
|
+
"description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
|
|
8823
|
+
"required": false
|
|
8824
|
+
}
|
|
8825
|
+
}
|
|
8826
|
+
},
|
|
8827
|
+
"required": false,
|
|
8828
|
+
"description": "Optional variant that may be passed down to the link's icon if there is one"
|
|
8829
|
+
},
|
|
8830
|
+
"iconPosition": {
|
|
8831
|
+
"type": {
|
|
8832
|
+
"name": "enum",
|
|
8833
|
+
"value": [
|
|
8834
|
+
{
|
|
8835
|
+
"value": "'left'",
|
|
8836
|
+
"computed": false
|
|
8837
|
+
},
|
|
8838
|
+
{
|
|
8839
|
+
"value": "'right'",
|
|
8840
|
+
"computed": false
|
|
8841
|
+
}
|
|
8842
|
+
]
|
|
8843
|
+
},
|
|
8844
|
+
"required": false,
|
|
8845
|
+
"description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button."
|
|
8846
|
+
},
|
|
8847
|
+
"icon": {
|
|
8848
|
+
"type": {
|
|
8849
|
+
"name": "func"
|
|
8850
|
+
},
|
|
8851
|
+
"required": false,
|
|
8852
|
+
"description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
|
|
8853
|
+
},
|
|
8854
|
+
"variant": {
|
|
8132
8855
|
"type": {
|
|
8133
|
-
"name": "
|
|
8856
|
+
"name": "objectOf",
|
|
8857
|
+
"value": {
|
|
8858
|
+
"name": "union",
|
|
8859
|
+
"value": [
|
|
8860
|
+
{
|
|
8861
|
+
"name": "string"
|
|
8862
|
+
},
|
|
8863
|
+
{
|
|
8864
|
+
"name": "number"
|
|
8865
|
+
},
|
|
8866
|
+
{
|
|
8867
|
+
"name": "bool"
|
|
8868
|
+
}
|
|
8869
|
+
]
|
|
8870
|
+
}
|
|
8134
8871
|
},
|
|
8135
|
-
"required":
|
|
8872
|
+
"required": false,
|
|
8136
8873
|
"description": ""
|
|
8137
8874
|
}
|
|
8138
8875
|
},
|
|
8139
8876
|
"attributes": {
|
|
8140
|
-
"acceptsRNA11yProps":
|
|
8877
|
+
"acceptsRNA11yProps": true
|
|
8141
8878
|
}
|
|
8142
8879
|
}
|
|
8143
8880
|
},
|
|
@@ -8382,6 +9119,214 @@
|
|
|
8382
9119
|
}
|
|
8383
9120
|
}
|
|
8384
9121
|
},
|
|
9122
|
+
"ButtonLink": {
|
|
9123
|
+
"docs": {
|
|
9124
|
+
"description": "`ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.\nButtonLink is a block-level component and should not be used inline.",
|
|
9125
|
+
"props": {
|
|
9126
|
+
"tokens": {
|
|
9127
|
+
"type": {
|
|
9128
|
+
"name": "custom",
|
|
9129
|
+
"raw": {
|
|
9130
|
+
"borderColor": "color",
|
|
9131
|
+
"borderWidth": "border",
|
|
9132
|
+
"borderRadius": "radius",
|
|
9133
|
+
"shadow": "shadow",
|
|
9134
|
+
"fontSize": "fontSize",
|
|
9135
|
+
"color": "color",
|
|
9136
|
+
"lineHeight": "lineHeight",
|
|
9137
|
+
"textAlign": "flexJustifyContent",
|
|
9138
|
+
"alignSelf": "flexAlign",
|
|
9139
|
+
"fontName": "fontName",
|
|
9140
|
+
"fontWeight": "fontWeight",
|
|
9141
|
+
"backgroundColor": "color",
|
|
9142
|
+
"opacity": "opacity",
|
|
9143
|
+
"paddingLeft": "size",
|
|
9144
|
+
"paddingRight": "size",
|
|
9145
|
+
"paddingTop": "size",
|
|
9146
|
+
"paddingBottom": "size",
|
|
9147
|
+
"width": "size",
|
|
9148
|
+
"minWidth": "size",
|
|
9149
|
+
"iconSize": "size",
|
|
9150
|
+
"iconSpace": "integer",
|
|
9151
|
+
"icon": "icon",
|
|
9152
|
+
"outerBorderColor": "color",
|
|
9153
|
+
"outerBorderWidth": "border",
|
|
9154
|
+
"outerBorderGap": "size",
|
|
9155
|
+
"outerBackgroundColor": "color"
|
|
9156
|
+
}
|
|
9157
|
+
},
|
|
9158
|
+
"required": false,
|
|
9159
|
+
"description": ""
|
|
9160
|
+
},
|
|
9161
|
+
"inactive": {
|
|
9162
|
+
"type": {
|
|
9163
|
+
"name": "bool"
|
|
9164
|
+
},
|
|
9165
|
+
"required": false,
|
|
9166
|
+
"description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
|
|
9167
|
+
},
|
|
9168
|
+
"disabled": {
|
|
9169
|
+
"type": {
|
|
9170
|
+
"name": "bool"
|
|
9171
|
+
},
|
|
9172
|
+
"required": false,
|
|
9173
|
+
"description": "Alias for `inactive`"
|
|
9174
|
+
},
|
|
9175
|
+
"children": {
|
|
9176
|
+
"type": {
|
|
9177
|
+
"name": "custom",
|
|
9178
|
+
"raw": "ABBPropTypes.childrenOf(\n PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
|
|
9179
|
+
},
|
|
9180
|
+
"required": false,
|
|
9181
|
+
"description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
|
|
9182
|
+
},
|
|
9183
|
+
"onPress": {
|
|
9184
|
+
"type": {
|
|
9185
|
+
"name": "func"
|
|
9186
|
+
},
|
|
9187
|
+
"required": false,
|
|
9188
|
+
"description": "Function called when the button is pressed. Required unless the button has a href."
|
|
9189
|
+
},
|
|
9190
|
+
"iconProps": {
|
|
9191
|
+
"type": {
|
|
9192
|
+
"name": "exact",
|
|
9193
|
+
"value": {
|
|
9194
|
+
"variant": {
|
|
9195
|
+
"name": "custom",
|
|
9196
|
+
"raw": "variantProp.propType",
|
|
9197
|
+
"required": false
|
|
9198
|
+
},
|
|
9199
|
+
"tokens": {
|
|
9200
|
+
"name": "custom",
|
|
9201
|
+
"raw": "getTokensPropType('Icon')",
|
|
9202
|
+
"required": false
|
|
9203
|
+
},
|
|
9204
|
+
"accessibilityLabel": {
|
|
9205
|
+
"name": "string",
|
|
9206
|
+
"description": "Descriptive label used in web SVG title tag for accessibility",
|
|
9207
|
+
"required": false
|
|
9208
|
+
},
|
|
9209
|
+
"scalesWithText": {
|
|
9210
|
+
"name": "bool",
|
|
9211
|
+
"description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
|
|
9212
|
+
"required": false
|
|
9213
|
+
}
|
|
9214
|
+
}
|
|
9215
|
+
},
|
|
9216
|
+
"required": false,
|
|
9217
|
+
"description": "Optional variant that may be passed down to the link's icon if there is one"
|
|
9218
|
+
},
|
|
9219
|
+
"iconPosition": {
|
|
9220
|
+
"type": {
|
|
9221
|
+
"name": "enum",
|
|
9222
|
+
"value": [
|
|
9223
|
+
{
|
|
9224
|
+
"value": "'left'",
|
|
9225
|
+
"computed": false
|
|
9226
|
+
},
|
|
9227
|
+
{
|
|
9228
|
+
"value": "'right'",
|
|
9229
|
+
"computed": false
|
|
9230
|
+
}
|
|
9231
|
+
]
|
|
9232
|
+
},
|
|
9233
|
+
"required": false,
|
|
9234
|
+
"description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button."
|
|
9235
|
+
},
|
|
9236
|
+
"icon": {
|
|
9237
|
+
"type": {
|
|
9238
|
+
"name": "func"
|
|
9239
|
+
},
|
|
9240
|
+
"required": false,
|
|
9241
|
+
"description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
|
|
9242
|
+
},
|
|
9243
|
+
"variant": {
|
|
9244
|
+
"type": {
|
|
9245
|
+
"name": "objectOf",
|
|
9246
|
+
"value": {
|
|
9247
|
+
"name": "union",
|
|
9248
|
+
"value": [
|
|
9249
|
+
{
|
|
9250
|
+
"name": "string"
|
|
9251
|
+
},
|
|
9252
|
+
{
|
|
9253
|
+
"name": "number"
|
|
9254
|
+
},
|
|
9255
|
+
{
|
|
9256
|
+
"name": "bool"
|
|
9257
|
+
}
|
|
9258
|
+
]
|
|
9259
|
+
}
|
|
9260
|
+
},
|
|
9261
|
+
"required": false,
|
|
9262
|
+
"description": ""
|
|
9263
|
+
},
|
|
9264
|
+
"onPressIn": {
|
|
9265
|
+
"type": {
|
|
9266
|
+
"name": "func"
|
|
9267
|
+
},
|
|
9268
|
+
"required": false,
|
|
9269
|
+
"description": ""
|
|
9270
|
+
},
|
|
9271
|
+
"onPressOut": {
|
|
9272
|
+
"type": {
|
|
9273
|
+
"name": "func"
|
|
9274
|
+
},
|
|
9275
|
+
"required": false,
|
|
9276
|
+
"description": ""
|
|
9277
|
+
},
|
|
9278
|
+
"href": {
|
|
9279
|
+
"type": {
|
|
9280
|
+
"name": "string"
|
|
9281
|
+
},
|
|
9282
|
+
"required": false,
|
|
9283
|
+
"description": ""
|
|
9284
|
+
},
|
|
9285
|
+
"hrefAttrs": {
|
|
9286
|
+
"type": {
|
|
9287
|
+
"name": "shape",
|
|
9288
|
+
"value": {
|
|
9289
|
+
"download": {
|
|
9290
|
+
"name": "string",
|
|
9291
|
+
"required": false
|
|
9292
|
+
},
|
|
9293
|
+
"rel": {
|
|
9294
|
+
"name": "string",
|
|
9295
|
+
"required": false
|
|
9296
|
+
},
|
|
9297
|
+
"target": {
|
|
9298
|
+
"name": "enum",
|
|
9299
|
+
"value": [
|
|
9300
|
+
{
|
|
9301
|
+
"value": "'_self'",
|
|
9302
|
+
"computed": false
|
|
9303
|
+
},
|
|
9304
|
+
{
|
|
9305
|
+
"value": "'_blank'",
|
|
9306
|
+
"computed": false
|
|
9307
|
+
},
|
|
9308
|
+
{
|
|
9309
|
+
"value": "'_parent'",
|
|
9310
|
+
"computed": false
|
|
9311
|
+
},
|
|
9312
|
+
{
|
|
9313
|
+
"value": "'_top'",
|
|
9314
|
+
"computed": false
|
|
9315
|
+
}
|
|
9316
|
+
],
|
|
9317
|
+
"required": false
|
|
9318
|
+
}
|
|
9319
|
+
}
|
|
9320
|
+
},
|
|
9321
|
+
"required": false,
|
|
9322
|
+
"description": ""
|
|
9323
|
+
}
|
|
9324
|
+
},
|
|
9325
|
+
"attributes": {
|
|
9326
|
+
"acceptsRNA11yProps": true
|
|
9327
|
+
}
|
|
9328
|
+
}
|
|
9329
|
+
},
|
|
8385
9330
|
"Carousel": {
|
|
8386
9331
|
"docs": {
|
|
8387
9332
|
"description": "Carousel is a general-purpose content slider that can be used to render content in terms of slides.\n\n ## Usage\n - `Carousel` is a top-level export from `@telus-uds/components-base` which is used to render a Carousel\n - Immediately within `Carousel`, individual slides are wrapped in `Carousel.Item` for the top-level `Carousel` to know how to identify an individual slide\n - You can use any UDS component or other platform-specific component, (based on the platform you're rendering) to achieve any desired layout\n - By default, Carousel takea all the `width` available to it and the `height` is determined based on the content in the slide with more content\n - You may want to wrap Carousel in other layout components like `Box`, `FlexGrid` etc, to achieve a responsive layout of your need\n\n ## `useCarousel` custom hook\n\n ```jsx\n import { useCarousel } from '@telus-uds/components-base'\n\n const SomeComponentWithinCarouselItem = () => {\n const {\n activeIndex,\n totalItems,\n width,\n goTo\n } = useCarousel()\n return <Text>Hi!</Text>\n }\n ```\n\n You can use `useCarousel` to hook into internal state of the Carousel component like:\n - `activeIndex`: Index of the current slide\n - `totalItems`: Total number of items/slides passed to the Carousel\n - `width`: Width of the individual carousel slide\n - `goTo`: A function to go to a particular slide by passing the index of that slide, e.g: goTo(0) where `0` is the index of the first slide\n\n ## Accessibility\n\n - Top-level `Carousel` and `Carousel.Item` can take all possible React Native's `View` and `a11y` props\n - If your slide contains input elements like buttons, you may want to configure them to be only focusable when `activeIndex` is equal to the current slide index in order to avoid tabbing going between slides\n\n ## Platform considerations\n The component is available on both native platforms and web.\n\n ## Other considerations\n - You may want to use the same kind of layout in all your slides to avoid visual and height differences\n - `previous` and `next` navigation buttons are automatically removed in `sm` and `xs` viewports, as these smaller viewports offers swipe functionality\n\n ## Tokens\n\n You can override the following tokens in exceptional circumstances:\n - `previousIcon` - Icon of the previous button\n - `nextIcon` - Icon of the next button\n - `showPreviousNextNavigation` - If you want to show/hide the previous/next navigation\n - `showPanelNavigation` - If you want to show/hide the panel navigation\n - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons\n - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area",
|
|
@@ -8469,6 +9414,17 @@
|
|
|
8469
9414
|
"required": false,
|
|
8470
9415
|
"description": "Minimal part of slide width must be swiped for changing index.\nOtherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index"
|
|
8471
9416
|
},
|
|
9417
|
+
"refocus": {
|
|
9418
|
+
"defaultValue": {
|
|
9419
|
+
"value": "Boolean(tabs)",
|
|
9420
|
+
"computed": true
|
|
9421
|
+
},
|
|
9422
|
+
"type": {
|
|
9423
|
+
"name": "bool"
|
|
9424
|
+
},
|
|
9425
|
+
"required": false,
|
|
9426
|
+
"description": "If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.\n\nPass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.\n\nIf skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content."
|
|
9427
|
+
},
|
|
8472
9428
|
"title": {
|
|
8473
9429
|
"defaultValue": {
|
|
8474
9430
|
"value": "'carousel'",
|
|
@@ -8641,6 +9597,7 @@
|
|
|
8641
9597
|
"previousIcon": "icon",
|
|
8642
9598
|
"showPreviousNextNavigation": "show",
|
|
8643
9599
|
"showPanelNavigation": "show",
|
|
9600
|
+
"showPanelTabs": "show",
|
|
8644
9601
|
"spaceBetweenSlideAndPreviousNextNavigation": "size",
|
|
8645
9602
|
"spaceBetweenSlideAndPanelNavigation": "size",
|
|
8646
9603
|
"thumbnailBorderColor": "color",
|
|
@@ -8710,12 +9667,17 @@
|
|
|
8710
9667
|
"required": false,
|
|
8711
9668
|
"description": "If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link\nwith the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`."
|
|
8712
9669
|
},
|
|
8713
|
-
"
|
|
9670
|
+
"tabs": {
|
|
8714
9671
|
"type": {
|
|
8715
|
-
"name": "
|
|
9672
|
+
"name": "arrayOf",
|
|
9673
|
+
"value": {
|
|
9674
|
+
"name": "shape",
|
|
9675
|
+
"value": "CarouselTabsPanelItem.propTypes || {}",
|
|
9676
|
+
"computed": true
|
|
9677
|
+
}
|
|
8716
9678
|
},
|
|
8717
9679
|
"required": false,
|
|
8718
|
-
"description": "If
|
|
9680
|
+
"description": "If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.\n\nBe careful to ensure that the order of each element in the items array matches the order of each child in the Carousel."
|
|
8719
9681
|
},
|
|
8720
9682
|
"onAnimationStart": {
|
|
8721
9683
|
"type": {
|
|
@@ -8906,7 +9868,7 @@
|
|
|
8906
9868
|
},
|
|
8907
9869
|
"CarouselTabs": {
|
|
8908
9870
|
"docs": {
|
|
8909
|
-
"description": "",
|
|
9871
|
+
"description": "@deprecated Please use Carousel and pass the `tabs` prop.",
|
|
8910
9872
|
"props": {
|
|
8911
9873
|
"refocus": {
|
|
8912
9874
|
"defaultValue": {
|
|
@@ -8947,6 +9909,7 @@
|
|
|
8947
9909
|
"previousIcon": "icon",
|
|
8948
9910
|
"showPreviousNextNavigation": "show",
|
|
8949
9911
|
"showPanelNavigation": "show",
|
|
9912
|
+
"showPanelTabs": "show",
|
|
8950
9913
|
"spaceBetweenSlideAndPreviousNextNavigation": "size",
|
|
8951
9914
|
"spaceBetweenSlideAndPanelNavigation": "size",
|
|
8952
9915
|
"thumbnailBorderColor": "color",
|
|
@@ -9110,6 +10073,18 @@
|
|
|
9110
10073
|
"required": false,
|
|
9111
10074
|
"description": "If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link\nwith the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`."
|
|
9112
10075
|
},
|
|
10076
|
+
"tabs": {
|
|
10077
|
+
"type": {
|
|
10078
|
+
"name": "arrayOf",
|
|
10079
|
+
"value": {
|
|
10080
|
+
"name": "shape",
|
|
10081
|
+
"value": "CarouselTabsPanelItem.propTypes || {}",
|
|
10082
|
+
"computed": true
|
|
10083
|
+
}
|
|
10084
|
+
},
|
|
10085
|
+
"required": false,
|
|
10086
|
+
"description": "If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.\n\nBe careful to ensure that the order of each element in the items array matches the order of each child in the Carousel."
|
|
10087
|
+
},
|
|
9113
10088
|
"panelNavigation": {
|
|
9114
10089
|
"type": {
|
|
9115
10090
|
"name": "element"
|
|
@@ -9326,6 +10301,7 @@
|
|
|
9326
10301
|
"previousIcon": "icon",
|
|
9327
10302
|
"showPreviousNextNavigation": "show",
|
|
9328
10303
|
"showPanelNavigation": "show",
|
|
10304
|
+
"showPanelTabs": "show",
|
|
9329
10305
|
"spaceBetweenSlideAndPreviousNextNavigation": "size",
|
|
9330
10306
|
"spaceBetweenSlideAndPanelNavigation": "size",
|
|
9331
10307
|
"thumbnailBorderColor": "color",
|