@telus-uds/components-base 1.53.0 → 1.55.0

package/component-docs.json

@@ -36,7 +36,11 @@
         "pressableBorderTopColor": "color",
         "pressablePaddingBottom": "size",
         "titleColor": "color",
-        "subTitleColor": "color"
+        "subTitleColor": "color",
+        "outerBorderColor": "color",
+        "outerBorderGap": "size",
+        "outerBorderRadius": "radius",
+        "outerBorderWidth": "border"
       },
       "VideoPickerSlider": {
         "previousIcon": "icon",
@@ -59,14 +63,10 @@
         "lineHeight": "lineHeight"
       },
       "Table": {
-        "tablePaddingBottom": "size",
         "cellMinWidth": "size",
-        "cellHeadingBackground": "color",
-        "cellHeadingBoxShadowColor": "color",
+        "tablePaddingBottom": "size",
         "cellBoxShadowColor": "color",
-        "cellSubheadingBackground": "color",
         "cellBackground": "color",
-        "cellRowHeadingBackground": "color",
         "cellStickyShadow": "shadow",
         "cellPaddingTop": "size",
         "cellPaddingRight": "size",
@@ -74,7 +74,9 @@
         "cellPaddingBottom": "size",
         "fontWeight": "fontWeight",
         "fontName": "fontName",
-        "fontSize": "fontSize"
+        "fontSize": "fontSize",
+        "lineHeight": "lineHeight",
+        "stickyBackgroundColor": "color"
       },
       "Image": {
         "borderRadius": "radius"
@@ -170,17 +172,40 @@
         "itemPadding": "size"
       },
       "QuantitySelector": {
-        "leftIcon": "icon",
-        "rightIcon": "icon",
-        "iconSize": "size",
-        "borderColor": "color",
         "inputBorderColor": "color",
         "inputBackgroundColor": "color",
-        "inputBorderWidth": "size",
+        "inputBorderWidth": "border",
         "padding": "size",
-        "backgroundColor": "color",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
         "textColor": "color",
-        "iconColor": "color"
+        "inputWidth": "size",
+        "lineHeight": "lineHeight",
+        "fontSize": "fontSize"
+      },
+      "QuantitySelectorSideButton": {
+        "borderRadius": "radius",
+        "borderTopLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "borderBottomLeftRadius": "radius",
+        "borderBottomRightRadius": "radius",
+        "borderColor": "color",
+        "borderWidth": "border",
+        "borderLeftWidth": "border",
+        "borderRightWidth": "border",
+        "borderTopWidth": "border",
+        "borderBottomWidth": "border",
+        "padding": "size",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "iconColor": "color",
+        "iconSize": "size",
+        "icon": "icon",
+        "backgroundColor": "color"
       },
       "Footnote": {
         "footnoteBackground": "color",
@@ -268,6 +293,7 @@
       },
       "Badge": {
         "fontWeight": "fontWeight",
+        "fontSize": "fontSize",
         "fontName": "fontName",
         "backgroundColor": "color",
         "borderColor": "color",
@@ -463,15 +489,19 @@
         "showPanelTabs": "show",
         "spaceBetweenSlideAndPreviousNextNavigation": "size",
         "spaceBetweenSlideAndPanelNavigation": "size",
-        "thumbnailBorderColor": "color",
-        "thumbnailBorderRadius": "radius",
-        "thumbnailBorderWidth": "border",
-        "thumbnailContainerPaddingTop": "size",
-        "thumbnailMargin": "size",
-        "thumbnailPadding": "size",
-        "thumbnailSelectedBorderColor": "color",
-        "thumbnailSelectedBorderWidth": "border",
-        "thumbnailSize": "size"
+        "stepTrackerCurrentBackgroundColor": "color"
+      },
+      "CarouselThumbnail": {
+        "alignItems": "flexAlign",
+        "borderColor": "color",
+        "borderRadius": "radius",
+        "borderWidth": "border",
+        "containerPaddingTop": "size",
+        "margin": "size",
+        "padding": "size",
+        "selectedBorderColor": "color",
+        "selectedBorderWidth": "border",
+        "size": "size"
       },
       "CarouselTabsPanelItem": {
         "paddingLeft": "size",
@@ -646,7 +676,19 @@
         "borderRadius": "radius",
         "borderWidth": "border",
         "expandDividerColor": "color",
-        "expandDividerWidth": "size"
+        "expandDividerWidth": "size",
+        "contentPanelBackgroundColor": "color",
+        "contentPanelPaddingLeft": "size",
+        "contentPanelPaddingRight": "size",
+        "contentPanelPaddingTop": "size",
+        "contentPanelPaddingBottom": "size",
+        "contentPanelBorderWidth": "border",
+        "contentPanelBorderColor": "color",
+        "contentPanelFontName": "fontName",
+        "contentPanelFontSize": "fontSize",
+        "contentPanelFontColor": "color",
+        "contentPanelFontWeight": "fontWeight",
+        "contentPanelLineHeight": "lineHeight"
       },
       "Feedback": {
         "backgroundColor": "color",
@@ -725,6 +767,14 @@
         "icon": "icon",
         "backgroundColor": "color",
         "borderRadius": "radius",
+        "borderTopLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "borderBottomLeftRadius": "radius",
+        "borderBottomRightRadius": "radius",
+        "borderTopWidth": "border",
+        "borderBottomWidth": "border",
+        "borderLeftWidth": "border",
+        "borderRightWidth": "border",
         "borderColor": "color",
         "borderWidth": "border",
         "outerBorderWidth": "border",
@@ -1399,7 +1449,12 @@
         "outlineWidth": "border",
         "paddingHorizontal": "size",
         "paddingVertical": "size",
-        "borderRadius": "radius"
+        "borderRadius": "radius",
+        "textLine": "textLine",
+        "fontName": "fontName",
+        "fontWeight": "fontWeight",
+        "fontSize": "fontSize",
+        "lineHeight": "lineHeight"
       },
       "StoryCard": {
         "outerBorderColor": "color",
@@ -1506,11 +1561,30 @@
         "figcaptionGap": "size",
         "textColor": "color",
         "imageSize": "size",
-        "icon": "icon"
+        "icon": "icon",
+        "iconFr": "icon",
+        "testimonialFontSizeLarge": "fontSize",
+        "testimonialLineHeightLarge": "lineHeight",
+        "testimonialFontNameLarge": "fontName",
+        "testimonialFontWeightLarge": "fontWeight",
+        "testimonialFontSizeHeading": "fontSize",
+        "testimonialLineHeightHeading": "lineHeight",
+        "testimonialFontNameHeading": "fontName",
+        "testimonialFontWeightHeading": "fontWeight",
+        "authorFontSize": "fontSize",
+        "authorLineHeight": "lineHeight",
+        "authorFontName": "fontName",
+        "authorFontWeight": "fontWeight",
+        "additionalFontSize": "fontSize",
+        "additionalLineHeight": "lineHeight",
+        "additionalFontName": "fontName",
+        "additionalFontWeight": "fontWeight"
       },
       "TermsAndConditions": {
         "contentPaddingBottom": "size",
         "contentPaddingLeft": "size",
+        "contentBorderColor": "color",
+        "contentMarginBottom": "size",
         "mdContentPaddingBottom": "size",
         "mdContentPaddingLeft": "size",
         "orderedPadding": "size",
@@ -1537,13 +1611,20 @@
         "expandTitleColor": "color",
         "expandTitleFontSize": "size",
         "expandTitleLineHeight": "lineHeight",
+        "expandTitleFontName": "fontName",
+        "expandTitleFontWeight": "fontWeight",
         "expandTitleMarginX": "size",
         "expandTitleMarginY": "size",
+        "expandTitlePaddingLeft": "size",
+        "expandTitleBorder": "border",
+        "expandTitleBorderColor": "color",
+        "expandTitleUnderline": "textLine",
         "expandBaseBorderWidth": "border",
         "expandContentPaddingBottom": "size",
         "expandContentPaddingLeft": "size",
         "expandContentPaddingRight": "size",
         "expandContentPaddingTop": "size",
+        "dividerColor": "color",
         "icon": "icon"
       },
       "TextArea": {
@@ -1693,6 +1774,7 @@
       },
       "TooltipButton": {
         "outerBorderColor": "color",
+        "backgroundColor": "color",
         "outerBorderWidth": "border",
         "outerBorderGap": "size",
         "borderRadius": "radius",
@@ -1704,6 +1786,7 @@
       },
       "Typography": {
         "fontName": "fontName",
+        "superScriptFontSize": "fontSize",
         "fontWeight": "fontWeight",
         "fontSize": "fontSize",
         "color": "color",
@@ -1994,6 +2077,38 @@
           "type": "state"
         }
       },
+      "CarouselThumbnail": {
+        "focus": {
+          "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.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "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.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state"
+        }
+      },
       "Checkbox": {
         "checked": {
           "description": "Corresponds to a selected state for a checkbox or radio",
@@ -2132,7 +2247,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -2154,7 +2270,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -2307,7 +2424,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         },
@@ -2404,7 +2522,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         },
@@ -2857,7 +2976,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         },
@@ -2888,7 +3008,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -3070,7 +3191,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -3153,6 +3275,45 @@
           "type": "state"
         }
       },
+      "VideoPickerThumbnail": {
+        "focus": {
+          "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.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "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.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state"
+        },
+        "selected": {
+          "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "SkipLink": {
         "focus": {
           "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.",
@@ -3164,6 +3325,14 @@
           "platforms": [
             "rn"
           ]
+        },
+        "pressed": {
+          "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.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state"
         }
       }
     },
@@ -3186,9 +3355,11 @@
       },
       "border": {
         "default": 0,
-        "nullable": false,
+        "nullable": true,
+        "type": "undefined|null",
         "values": {
-          "zero": 0
+          "zero": 0,
+          "none": null
         }
       },
       "color": {
@@ -3205,6 +3376,7 @@
         "nullable": true,
         "type": "undefined|null",
         "values": {
+          "none": null,
           "zero": 0,
           "round": 99999999999999
         }
@@ -3219,8 +3391,11 @@
       },
       "fontSize": {
         "default": 16,
-        "nullable": false,
-        "type": "Number"
+        "nullable": true,
+        "type": "Number|String|null",
+        "values": {
+          "none": null
+        }
       },
       "lineHeight": {
         "default": 1,
@@ -3604,7 +3779,19 @@
                   "borderRadius": "radius",
                   "borderWidth": "border",
                   "expandDividerColor": "color",
-                  "expandDividerWidth": "size"
+                  "expandDividerWidth": "size",
+                  "contentPanelBackgroundColor": "color",
+                  "contentPanelPaddingLeft": "size",
+                  "contentPanelPaddingRight": "size",
+                  "contentPanelPaddingTop": "size",
+                  "contentPanelPaddingBottom": "size",
+                  "contentPanelBorderWidth": "border",
+                  "contentPanelBorderColor": "color",
+                  "contentPanelFontName": "fontName",
+                  "contentPanelFontSize": "fontSize",
+                  "contentPanelFontColor": "color",
+                  "contentPanelFontWeight": "fontWeight",
+                  "contentPanelLineHeight": "lineHeight"
                 }
               },
               "required": false,
@@ -3621,7 +3808,7 @@
               "type": {
                 "name": "func"
               },
-              "required": true,
+              "required": false,
               "description": "Function to call on pressing the panel's control, which should open or close the panel.\nIf Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent."
             },
             "onPress": {
@@ -3649,10 +3836,10 @@
             "control": {
               "type": {
                 "name": "custom",
-                "raw": "ExpandCollapseControl.propTypes.children.isRequired"
+                "raw": "ExpandCollapseControl.propTypes.children"
               },
               "required": false,
-              "description": "The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed."
+              "description": "The content inside the control element that opens and closes the ExpandCollapse when pressed."
             },
             "controlTokens": {
               "type": {
@@ -3690,6 +3877,13 @@
               },
               "required": false,
               "description": "An optional ref to be attached to the control"
+            },
+            "content": {
+              "type": {
+                "name": "bool"
+              },
+              "required": false,
+              "description": "A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control"
             }
           },
           "attributes": {
@@ -4548,7 +4742,19 @@
                   "borderRadius": "radius",
                   "borderWidth": "border",
                   "expandDividerColor": "color",
-                  "expandDividerWidth": "size"
+                  "expandDividerWidth": "size",
+                  "contentPanelBackgroundColor": "color",
+                  "contentPanelPaddingLeft": "size",
+                  "contentPanelPaddingRight": "size",
+                  "contentPanelPaddingTop": "size",
+                  "contentPanelPaddingBottom": "size",
+                  "contentPanelBorderWidth": "border",
+                  "contentPanelBorderColor": "color",
+                  "contentPanelFontName": "fontName",
+                  "contentPanelFontSize": "fontSize",
+                  "contentPanelFontColor": "color",
+                  "contentPanelFontWeight": "fontWeight",
+                  "contentPanelLineHeight": "lineHeight"
                 }
               },
               "required": false,
@@ -4565,7 +4771,7 @@
               "type": {
                 "name": "func"
               },
-              "required": true,
+              "required": false,
               "description": "Function to call on pressing the panel's control, which should open or close the panel.\nIf Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent."
             },
             "onPress": {
@@ -4593,10 +4799,10 @@
             "control": {
               "type": {
                 "name": "custom",
-                "raw": "ExpandCollapseControl.propTypes.children.isRequired"
+                "raw": "ExpandCollapseControl.propTypes.children"
               },
               "required": false,
-              "description": "The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed."
+              "description": "The content inside the control element that opens and closes the ExpandCollapse when pressed."
             },
             "controlTokens": {
               "type": {
@@ -4634,6 +4840,13 @@
               },
               "required": false,
               "description": "An optional ref to be attached to the control"
+            },
+            "content": {
+              "type": {
+                "name": "bool"
+              },
+              "required": false,
+              "description": "A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control"
             }
           },
           "attributes": {
@@ -6115,6 +6328,14 @@
                 "icon": "icon",
                 "backgroundColor": "color",
                 "borderRadius": "radius",
+                "borderTopLeftRadius": "radius",
+                "borderTopRightRadius": "radius",
+                "borderBottomLeftRadius": "radius",
+                "borderBottomRightRadius": "radius",
+                "borderTopWidth": "border",
+                "borderBottomWidth": "border",
+                "borderLeftWidth": "border",
+                "borderRightWidth": "border",
                 "borderColor": "color",
                 "borderWidth": "border",
                 "outerBorderWidth": "border",
@@ -6136,7 +6357,7 @@
             "type": {
               "name": "elementType"
             },
-            "required": true,
+            "required": false,
             "description": "Defines the icon to be rendered"
           },
           "href": {
@@ -9516,7 +9737,12 @@
                 "outlineWidth": "border",
                 "paddingHorizontal": "size",
                 "paddingVertical": "size",
-                "borderRadius": "radius"
+                "borderRadius": "radius",
+                "textLine": "textLine",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "fontSize": "fontSize",
+                "lineHeight": "lineHeight"
               }
             },
             "required": false,
@@ -10763,6 +10989,7 @@
               "name": "custom",
               "raw": {
                 "outerBorderColor": "color",
+                "backgroundColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
                 "borderRadius": "radius",
@@ -10943,6 +11170,7 @@
               "name": "custom",
               "raw": {
                 "fontName": "fontName",
+                "superScriptFontSize": "fontSize",
                 "fontWeight": "fontWeight",
                 "fontSize": "fontSize",
                 "color": "color",
@@ -12192,15 +12420,7 @@
                 "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
-                "thumbnailBorderColor": "color",
-                "thumbnailBorderRadius": "radius",
-                "thumbnailBorderWidth": "border",
-                "thumbnailContainerPaddingTop": "size",
-                "thumbnailMargin": "size",
-                "thumbnailPadding": "size",
-                "thumbnailSelectedBorderColor": "color",
-                "thumbnailSelectedBorderWidth": "border",
-                "thumbnailSize": "size"
+                "stepTrackerCurrentBackgroundColor": "color"
               }
             },
             "required": false,
@@ -12561,15 +12781,7 @@
                 "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
-                "thumbnailBorderColor": "color",
-                "thumbnailBorderRadius": "radius",
-                "thumbnailBorderWidth": "border",
-                "thumbnailContainerPaddingTop": "size",
-                "thumbnailMargin": "size",
-                "thumbnailPadding": "size",
-                "thumbnailSelectedBorderColor": "color",
-                "thumbnailSelectedBorderWidth": "border",
-                "thumbnailSize": "size"
+                "stepTrackerCurrentBackgroundColor": "color"
               }
             },
             "required": false,
@@ -12975,15 +13187,7 @@
                 "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
-                "thumbnailBorderColor": "color",
-                "thumbnailBorderRadius": "radius",
-                "thumbnailBorderWidth": "border",
-                "thumbnailContainerPaddingTop": "size",
-                "thumbnailMargin": "size",
-                "thumbnailPadding": "size",
-                "thumbnailSelectedBorderColor": "color",
-                "thumbnailSelectedBorderWidth": "border",
-                "thumbnailSize": "size"
+                "stepTrackerCurrentBackgroundColor": "color"
               }
             },
             "required": false,