@telus-uds/components-base 1.2.0 → 1.4.0

package/component-docs.json

@@ -110,7 +110,8 @@
         "rightIcon": "icon",
         "iconDisplace": "size",
         "iconSize": "size",
-        "iconSpace": "integer"
+        "iconSpace": "integer",
+        "textLine": "textLine"
       },
       "CheckboxGroup": {
         "space": "integer",
@@ -1744,52 +1745,6 @@
             "required": false,
             "description": "Sets right padding using the theme's spacing scale.\n\n@see {@link SpacingValue}"
           },
-          "pointerEvents": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'all'",
-                  "computed": false
-                },
-                {
-                  "value": "'none'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-only'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-none'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": ""
-          },
-          "onLayout": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "nativeID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "testID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Use in tests if the box itself needs to be targetted and no other way of selecting the\nbox is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`)."
-          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -1946,6 +1901,13 @@
             "required": false,
             "description": "Optional semantic HTML tag, to apply to the container on web. Does not change styling.\n\nIn native apps, if a header tag is provided (\"h1\", \"h2\" etc) and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
           },
+          "testID": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Use in tests if the box itself needs to be targetted and no other way of selecting the\nbox is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`)."
+          },
           "children": {
             "type": {
               "name": "node"
@@ -2013,7 +1975,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
@@ -2021,6 +1983,13 @@
       "docs": {
         "description": "A pressable themeless base component that handles pressable states and passes tokens\nbased on these to an outer border and a base Card component. Not intended to be used in\napps or sites directly: build themed components on top of this.",
         "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "href ? 'link' : undefined",
+              "computed": false
+            },
+            "required": false
+          },
           "children": {
             "type": {
               "name": "union",
@@ -2067,7 +2036,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
@@ -3027,59 +2996,6 @@
             "required": false,
             "description": "Whether or not to include gutter at the ends to the left and right of the FlexGrid"
           },
-          "pointerEvents": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'all'",
-                  "computed": false
-                },
-                {
-                  "value": "'none'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-only'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-none'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": ""
-          },
-          "onLayout": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "nativeID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "testID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "dataSet": {
-            "type": {
-              "name": "object"
-            },
-            "required": false,
-            "description": ""
-          },
           "xsReverse": {
             "type": {
               "name": "bool"
@@ -3981,7 +3897,7 @@
     },
     "HorizontalScroll": {
       "docs": {
-        "description": "Base component that scrolls horizontally and displays left and right buttons if\nthere is content to the left and the right which can be scrolled to.\n\n@TODO revist `ScrollButton` after IconButton is stable.",
+        "description": "Base component that scrolls horizontally and displays left and right buttons if\nthere is content to the left and the right which can be scrolled to.\n\n@TODO revisit `ScrollButton` after IconButton is stable.",
         "props": {
           "itemPositions": {
             "type": {
@@ -4131,6 +4047,13 @@
       "docs": {
         "description": "A pressable themeless base component that handles pressable states and passes tokens\nbased on these to an outer border and a base Card component. Not intended to be used in\napps or sites directly: build themed components on top of this.",
         "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "href ? 'link' : 'button'",
+              "computed": false
+            },
+            "required": false
+          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -4237,7 +4160,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
@@ -4416,7 +4339,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       },
       "Item": {
@@ -4658,7 +4581,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       },
       "Item": {
@@ -5917,68 +5840,6 @@
       "docs": {
         "description": "A basic form single-choice select component. Use in forms or individually to receive user's input.\n\n## Usage criteria\n- Include a `placeholder` to provide instructions such as \"Please select...\" as an unselectable option (recommended)\n- Use when options are between 7-15 (recommended)\n- For options are 6 and under, use `Radio` groups or `ButtonGroup`.\n- For options 15 and above, look for alternatives (e.g grouping into categories, or input field with auto-complete etc.)\n\n## Controlled component\nIf it is required that the state of the `Select` be controlled by the application or other external methods,\n`value` and `onChange` props must be passed to the `Select`.\nIf the `Select` value should not be changed by user input, a `readOnly` prop must be provided.\n\n## Uncontrolled component\nIf it is not necessary to control the `Select` state, you can create one without a value prop.\nIn this case its value can be accessed within the `onChange` callback. Use the `initialValue` prop to set the\ndefault value for an uncontrolled `Select`.\n\n## Getting feedback for entered values\nUse the `feedback` prop to give the user feedback regarding their selection.\nYou can affirm that the user's selection was correct, or highlight errors that must be corrected, using the `validation` prop.\nKeep feedback text as brief as possible, should be limited to text and links.\n\n## Using a tooltip\nWhen a more in-depth explanation is needed to fill out a `Select` properly, the tooltip prop may be used.\n\n## Grouping options\n`Select` supports option groups. Use a `Select.Group` component to render an `<optgroup>` element with its items.\nNOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.",
         "props": {
-          "label": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "The input label."
-          },
-          "hint": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "A short description of the expected input."
-          },
-          "hintPosition": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'inline'",
-                  "computed": false
-                },
-                {
-                  "value": "'below'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Position of the hint relative to label. Use `below` to display a larger hint below the label."
-          },
-          "feedback": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "A detailed description of validation error/success or additional instructions.\nVisual variant is determined based on the `validation` prop."
-          },
-          "tooltip": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label."
-          },
-          "validation": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'error'",
-                  "computed": false
-                },
-                {
-                  "value": "'success'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Use to visually mark an input as valid or invalid."
-          },
           "initialValue": {
             "type": {
               "name": "string"
@@ -6261,6 +6122,13 @@
         "docs": {
           "description": "`SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.\n\n This component can only be accessed as a name-spaced component: `SideNav.Item`.",
           "props": {
+            "accessibilityRole": {
+              "defaultValue": {
+                "value": "'link'",
+                "computed": false
+              },
+              "required": false
+            },
             "children": {
               "type": {
                 "name": "node"
@@ -6371,7 +6239,7 @@
             }
           },
           "attributes": {
-            "acceptsRNA11yProps": true
+            "acceptsRNA11yProps": false
           }
         }
       },
@@ -6653,59 +6521,6 @@
             "required": false,
             "description": "Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction."
           },
-          "pointerEvents": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'all'",
-                  "computed": false
-                },
-                {
-                  "value": "'none'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-only'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-none'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": ""
-          },
-          "onLayout": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "nativeID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "testID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "dataSet": {
-            "type": {
-              "name": "object"
-            },
-            "required": false,
-            "description": ""
-          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -6769,11 +6584,6 @@
                       "name": "bool",
                       "description": "By default, the divider is a horizontal line the full width of its parent.\nWith `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.",
                       "required": false
-                    },
-                    "testID": {
-                      "name": "string",
-                      "description": "@ignore\nIn tests, the only way to select dividers is with testID prop and getByTestId, since they have no content,\nno accessibility role on native, and there is no equivalent of nextSibling in React Native Testing Library.",
-                      "required": false
                     }
                   }
                 }
@@ -7619,6 +7429,13 @@
             "required": false,
             "description": "Optional semantic HTML tag, to apply to the text on web. Does not change styling.\n\n`tag` and `heading` props set the same thing, so shouldn't be used together (`tag` overrides `heading`).\n\nIn native apps, if a header tag is provided (\"h1\", \"h2\" etc) and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
           },
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "heading === true ? 'header' : undefined",
+              "computed": false
+            },
+            "required": false
+          },
           "block": {
             "defaultValue": {
               "value": "false",
@@ -7747,7 +7564,7 @@
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
@@ -7850,24 +7667,56 @@
       "docs": {
         "description": "",
         "props": {
-          "inactive": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "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"
-          },
-          "disabled": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "Alias for `inactive`"
-          },
-          "children": {
+          "tokens": {
             "type": {
               "name": "custom",
-              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
+              "raw": {
+                "borderColor": "color",
+                "borderWidth": "border",
+                "borderRadius": "radius",
+                "shadow": "shadow",
+                "fontSize": "fontSize",
+                "color": "color",
+                "lineHeight": "lineHeight",
+                "textAlign": "flexJustifyContent",
+                "alignSelf": "flexAlign",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "backgroundColor": "color",
+                "opacity": "opacity",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "width": "size",
+                "minWidth": "size",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBackgroundColor": "color"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "inactive": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "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"
+          },
+          "disabled": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Alias for `inactive`"
+          },
+          "children": {
+            "type": {
+              "name": "custom",
+              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
             },
             "required": false,
             "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```"
@@ -7910,6 +7759,38 @@
       "docs": {
         "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.",
         "props": {
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "borderColor": "color",
+                "borderWidth": "border",
+                "borderRadius": "radius",
+                "shadow": "shadow",
+                "fontSize": "fontSize",
+                "color": "color",
+                "lineHeight": "lineHeight",
+                "textAlign": "flexJustifyContent",
+                "alignSelf": "flexAlign",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "backgroundColor": "color",
+                "opacity": "opacity",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "width": "size",
+                "minWidth": "size",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBackgroundColor": "color"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
           "inactive": {
             "type": {
               "name": "bool"
@@ -8685,79 +8566,12 @@
             "required": false,
             "description": ""
           },
-          "onPress": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPressIn": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPressOut": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "disabled": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": ""
-          },
-          "href": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "hrefAttrs": {
-            "type": {
-              "name": "shape",
-              "value": {
-                "download": {
-                  "name": "string",
-                  "required": false
-                },
-                "rel": {
-                  "name": "string",
-                  "required": false
-                },
-                "target": {
-                  "name": "enum",
-                  "value": [
-                    {
-                      "value": "'_self'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_blank'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_parent'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_top'",
-                      "computed": false
-                    }
-                  ],
-                  "required": false
-                }
-              }
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "'link'",
+              "computed": false
             },
-            "required": false,
-            "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
+            "required": false
           },
           "variant": {
             "type": {
@@ -8815,10 +8629,49 @@
             },
             "required": false,
             "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."
+          },
+          "hrefAttrs": {
+            "type": {
+              "name": "shape",
+              "value": {
+                "download": {
+                  "name": "string",
+                  "required": false
+                },
+                "rel": {
+                  "name": "string",
+                  "required": false
+                },
+                "target": {
+                  "name": "enum",
+                  "value": [
+                    {
+                      "value": "'_self'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'_blank'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'_parent'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'_top'",
+                      "computed": false
+                    }
+                  ],
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": true
+          "acceptsRNA11yProps": false
         }
       }
     },
@@ -9254,59 +9107,6 @@
       "docs": {
         "description": "StackWrap is an alternative to StackView where the spaced items are allowed to wrap.\n\nAs well as providing space between the items, StackWrap provides `gap` space between\nwrapped lines of items. By default, this `gap` is the same as the gap between spaced items.\nIf a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.",
         "props": {
-          "pointerEvents": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'all'",
-                  "computed": false
-                },
-                {
-                  "value": "'none'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-only'",
-                  "computed": false
-                },
-                {
-                  "value": "'box-none'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": ""
-          },
-          "onLayout": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "nativeID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "testID": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "dataSet": {
-            "type": {
-              "name": "object"
-            },
-            "required": false,
-            "description": ""
-          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -9489,68 +9289,6 @@
             "required": false,
             "description": ""
           },
-          "label": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "The input label."
-          },
-          "hint": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "A short description of the expected input."
-          },
-          "hintPosition": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'inline'",
-                  "computed": false
-                },
-                {
-                  "value": "'below'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Position of the hint relative to label. Use `below` to display a larger hint below the label."
-          },
-          "feedback": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "A detailed description of validation error/success or additional instructions.\nVisual variant is determined based on the `validation` prop."
-          },
-          "tooltip": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label."
-          },
-          "validation": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'error'",
-                  "computed": false
-                },
-                {
-                  "value": "'success'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Use to visually mark an input as valid or invalid."
-          },
           "value": {
             "type": {
               "name": "string"
@@ -9649,68 +9387,6 @@
             "required": false,
             "description": ""
           },
-          "label": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "The input label."
-          },
-          "hint": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "A short description of the expected input."
-          },
-          "hintPosition": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'inline'",
-                  "computed": false
-                },
-                {
-                  "value": "'below'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Position of the hint relative to label. Use `below` to display a larger hint below the label."
-          },
-          "feedback": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "A detailed description of validation error/success or additional instructions.\nVisual variant is determined based on the `validation` prop."
-          },
-          "tooltip": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label."
-          },
-          "validation": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'error'",
-                  "computed": false
-                },
-                {
-                  "value": "'success'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "Use to visually mark an input as valid or invalid."
-          },
           "value": {
             "type": {
               "name": "string"