@telus-uds/components-base 1.6.1 → 1.8.0

package/component-docs.json

@@ -36,6 +36,7 @@
       },
       "ButtonGroup": {
         "space": "integer",
+        "fieldSpace": "integer",
         "direction": "direction",
         "alignItems": "flexAlign",
         "justifyContent": "flexJustifyContent",
@@ -748,6 +749,7 @@
       },
       "ToggleSwitchGroup": {
         "space": "integer",
+        "fieldSpace": "integer",
         "direction": "direction",
         "alignItems": "flexAlign",
         "justifyContent": "flexJustifyContent",
@@ -2824,6 +2826,27 @@
       "docs": {
         "description": "An alternative to InputSupports for groups of input elements that, on web, are to be\nwrapped in a `<fieldset>` tag, with label content displated in a `<legend>` tag.\n\nFollows the same theming and most of the same props as InputSupports.",
         "props": {
+          "copy": {
+            "defaultValue": {
+              "value": "'en'",
+              "computed": false
+            },
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'en'",
+                  "computed": false
+                },
+                {
+                  "value": "'fr'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Whether the English or French copy will be used (e.g. for accessibility labels)."
+          },
           "feedbackPosition": {
             "defaultValue": {
               "value": "'top'",
@@ -4182,6 +4205,27 @@
       "docs": {
         "description": "",
         "props": {
+          "copy": {
+            "defaultValue": {
+              "value": "'en'",
+              "computed": false
+            },
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'en'",
+                  "computed": false
+                },
+                {
+                  "value": "'fr'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Whether the English or French copy will be used (e.g. for accessibility labels)."
+          },
           "hintPosition": {
             "defaultValue": {
               "value": "'inline'",
@@ -4843,7 +4887,7 @@
               ]
             },
             "required": false,
-            "description": "Select english or french copy for the accessible label of the dismiss button."
+            "description": "Select English or French copy for the accessible label of the dismiss button."
           },
           "children": {
             "type": {
@@ -5701,28 +5745,6 @@
       "docs": {
         "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`.",
         "props": {
-          "initialValue": {
-            "defaultValue": {
-              "value": "''",
-              "computed": false
-            },
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Use this to set the initial value of the search input.\nUpdating `initialValue` will **not** update the actual value."
-          },
-          "placeholder": {
-            "defaultValue": {
-              "value": "'Search'",
-              "computed": false
-            },
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Label rendered in the search input when it has no value."
-          },
           "copy": {
             "defaultValue": {
               "value": "'en'",
@@ -5764,7 +5786,21 @@
               ]
             },
             "required": false,
-            "description": "Select english or french copy for the accessible labels.\nYou may also pass in a custom dictionary object."
+            "description": "Select English or French copy for the accessible labels.\nYou may also pass in a custom dictionary object."
+          },
+          "initialValue": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Use this to set the initial value of the search input.\nUpdating `initialValue` will **not** update the actual value."
+          },
+          "placeholder": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Label rendered in the search input when it has no value."
           },
           "inactive": {
             "type": {
@@ -6365,6 +6401,27 @@
       "docs": {
         "description": "",
         "props": {
+          "sizeIndex": {
+            "defaultValue": {
+              "value": "size",
+              "computed": true
+            },
+            "type": {
+              "name": "union",
+              "value": [
+                {
+                  "name": "custom",
+                  "raw": "spacingIndexPropType"
+                },
+                {
+                  "name": "custom",
+                  "raw": "spacingObjectPropType"
+                }
+              ]
+            },
+            "required": false,
+            "description": "Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.\n\nMay also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details."
+          },
           "shape": {
             "defaultValue": {
               "value": "'line'",
@@ -6388,7 +6445,7 @@
               ]
             },
             "required": false,
-            "description": ""
+            "description": "Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners."
           },
           "tokens": {
             "type": {
@@ -6429,24 +6486,42 @@
           },
           "size": {
             "type": {
-              "name": "number"
+              "name": "union",
+              "value": [
+                {
+                  "name": "custom",
+                  "raw": "spacingIndexPropType"
+                },
+                {
+                  "name": "custom",
+                  "raw": "spacingObjectPropType"
+                }
+              ]
             },
             "required": false,
-            "description": ""
+            "description": "@deprecated alias for `sizeIndex`"
+          },
+          "sizePixels": {
+            "type": {
+              "name": "custom",
+              "raw": "responsiveProps.getTypeOptionallyByViewport(propTypes.number)"
+            },
+            "required": false,
+            "description": "Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.\n\nAccepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports."
           },
           "characters": {
             "type": {
               "name": "number"
             },
             "required": false,
-            "description": ""
+            "description": "Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).\n\nOnly has any affect if shape is line (the default). If unset, takes a default value from the theme."
           },
           "lines": {
             "type": {
               "name": "number"
             },
             "required": false,
-            "description": ""
+            "description": "Determines how many Skeleton items are rendered (default 1).\n\nRecommended usage is to simulate paragraphs of text when Skeleton's shape is 'line' (the default shape).\n\nThe amount of spacing between multiple lines is controlled by theme tokens."
           }
         },
         "attributes": {
@@ -7231,7 +7306,7 @@
               ]
             },
             "required": false,
-            "description": "Select english or french copy for the accessible label."
+            "description": "Select English or French copy for the accessible label."
           },
           "children": {
             "type": {
@@ -7992,14 +8067,22 @@
               "value": "false",
               "computed": false
             },
-            "required": false
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, the buttons cannot be selected by the user and simply show their current state."
           },
           "inactive": {
             "defaultValue": {
               "value": "false",
               "computed": false
             },
-            "required": false
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, the buttons cannot be interacted with, elements are set as `disabled` and if the\ntheme supports `inactive` appearances rules, these are applied."
           },
           "accessibilityRole": {
             "defaultValue": {
@@ -8013,6 +8096,7 @@
               "name": "custom",
               "raw": {
                 "space": "integer",
+                "fieldSpace": "integer",
                 "direction": "direction",
                 "alignItems": "flexAlign",
                 "justifyContent": "flexJustifyContent",
@@ -8070,6 +8154,75 @@
             },
             "required": false,
             "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."
+          },
+          "legend": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Main text used to describe this group, used in Fieldset's Legend element."
+          },
+          "hint": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Optional additional text giving more detail to help a user make a choice."
+          },
+          "tooltip": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Optional tooltip text content to include alongside the legend and hint."
+          },
+          "validation": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'error'",
+                  "computed": false
+                },
+                {
+                  "value": "'success'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Current validation status of the group, passed to the feedback element if there is one."
+          },
+          "feedback": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "If provided, a Feedback element is rendered containing this text."
+          },
+          "name": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "On Web, this is passed to the `name` attribute of the fieldset."
+          },
+          "copy": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'en'",
+                  "computed": false
+                },
+                {
+                  "value": "'fr'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Sets the language of microcopy in subcomponents (e.g. Tooltip's default accessibility label)."
           }
         },
         "attributes": {
@@ -8255,21 +8408,21 @@
               "name": "bool"
             },
             "required": false,
-            "description": "If true, the radio cards cannot be selected by the user and simply show their current state."
+            "description": "If true, the checkboxes cannot be selected by the user and simply show their current state."
           },
           "inactive": {
             "type": {
               "name": "bool"
             },
             "required": false,
-            "description": "If true, the checkbox cannot be interacted with, elements are set as `disabled` and if the\ntheme supports `inactive` appearances rules, these are applied."
+            "description": "If true, the checkboxes cannot be interacted with, elements are set as `disabled` and if the\ntheme supports `inactive` appearances rules, these are applied."
           },
           "name": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": "On Web, this is passed to the `name` attribute of the fieldset and each radio input."
+            "description": "On Web, this is passed to the `name` attribute of the fieldset and each checkbox input."
           }
         },
         "attributes": {
@@ -8757,8 +8910,29 @@
     },
     "RadioGroup": {
       "docs": {
-        "description": "A group of Radios that behave as a radio group. Use when users select a single choice from mutually\nexclusive options.\n\n## Component API\n\nUse the `items` prop to pass an array of objects describing each Radio in the group:\n\n - `label`: main text passed to Radio's `label` prop\n - `id`: identifier used to store which Radio is selected (uses `label` if undefinded)\n - `onChange`: optional function called on selection, in addition to updating the group's selection state\n\n### Controlled version\n\nIf the selection state is controlled from outside, it needs to receive `checkedId` and `onChange` props.\n\n### Uncontrolled version\n\nIf the RadioGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.\nWhenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).\n\n### Use in forms\n\nFor web forms, the `name` prop may be used to define the name of the group's `fieldset` and input elements.\n\n### Validation\n\nValidation state may be set by passing 'error' or 'success' to the `validation` prop.\n\n## A11y guidelines\n\nRadioGroup accepts all the common accessibility props, but also sets accessibility role `'radiogroup'`\nand controls the accessibility state of children like Radio and Feedback based on current state.\n\n@example\n```jsx\n<RadioGroup\n  initialCheckedId=\"radio1\"\n  items={[\n    { label: 'Radio 1', id: 'radio1' },\n    { label: 'Radio 2', id: 'radio2' },\n    { label: 'Radio 3', id: 'radio3' }\n  ]}\n  legend=\"Radios\"\n  hint=\"Choose one option\"\n/>\n```",
+        "description": "A group of Radios that behave as a radio group. Use when users select a single choice from mutually\nexclusive options.\n\n## Component API\n\nUse the `items` prop to pass an array of objects describing each Radio in the group:\n\n - `label`: main text passed to Radio's `label` prop\n - `id`: identifier used to store which Radio is selected (uses `label` if undefinded)\n - `onChange`: optional function called on selection, in addition to updating the group's selection state\n\n### Controlled version\n\nIf the selection state is controlled from outside, it needs to receive `checkedId` and `onChange` props.\n\n### Uncontrolled version\n\nIf the RadioGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.\nWhenever the radio gets toggled, it calls the `onChange` callback with the new value (string).\n\n### Use in forms\n\nFor web forms, the `name` prop may be used to define the name of the group's `fieldset` and input elements.\n\n### Validation\n\nValidation state may be set by passing 'error' or 'success' to the `validation` prop.\n\n## A11y guidelines\n\nRadioGroup accepts all the common accessibility props, but also sets accessibility role `'radiogroup'`\nand controls the accessibility state of children like Radio and Feedback based on current state.\n\n@example\n```jsx\n<RadioGroup\n  initialCheckedId=\"radio1\"\n  items={[\n    { label: 'Radio 1', id: 'radio1' },\n    { label: 'Radio 2', id: 'radio2' },\n    { label: 'Radio 3', id: 'radio3' }\n  ]}\n  legend=\"Radios\"\n  hint=\"Choose one option\"\n/>\n```",
         "props": {
+          "copy": {
+            "defaultValue": {
+              "value": "'en'",
+              "computed": false
+            },
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'en'",
+                  "computed": false
+                },
+                {
+                  "value": "'fr'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Whether the English or French copy will be used (e.g. for accessibility labels)."
+          },
           "items": {
             "defaultValue": {
               "value": "[]",
@@ -8911,14 +9085,14 @@
               "name": "string"
             },
             "required": false,
-            "description": "If provided, the radio card with this id is selected on first render."
+            "description": "If provided, the radio with this id is selected on first render."
           },
           "checkedId": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": "If not undefined, the radio card with this id is selected (or none is selected if `null`), and the\nelement's selection state will be controlled by its parent using the `onChange` function."
+            "description": "If not undefined, the radio with this id is selected (or none is selected if `null`), and the\nelement's selection state will be controlled by its parent using the `onChange` function."
           },
           "onChange": {
             "type": {
@@ -8932,14 +9106,14 @@
               "name": "bool"
             },
             "required": false,
-            "description": "If true, the radio cards cannot be selected by the user and simply show their current state."
+            "description": "If true, the radios cannot be selected by the user and simply show their current state."
           },
           "inactive": {
             "type": {
               "name": "bool"
             },
             "required": false,
-            "description": "If true, the radio card cannot be interacted with, elements are set as `disabled` and if the\ntheme supports `inactive` appearances rules, these are applied."
+            "description": "If true, the radios cannot be interacted with, elements are set as `disabled` and if the\ntheme supports `inactive` appearances rules, these are applied."
           },
           "name": {
             "type": {
@@ -8958,6 +9132,27 @@
       "docs": {
         "description": "A group of Cards that behave as a radio button group. Use when users select a single choice from mutually\nexclusive options with need to show additional information for each option. The whole cards are each\ninteractive as one item.\n\n## Component API\n\nUse the `items` prop to pass an array of objects describing each RadioCard in the group:\n\n - `title`: main text passed to RadioCard's `title` prop\n - `content`: React content passed to RadioCard's `children` prop\n - `id`: identifier used to store which RadioCard is selected (uses `title` if undefinded)\n - `onChange`: optional function called on selection, in addition to updating the group's selection state\n\n### Controlled version\n\nIf the selection state is controlled from outside, it needs to receive `checkedId` and `onChange` props.\n\n### Uncontrolled version\n\nIf the RadioCardGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.\nWhenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).\n\n### Use in forms\n\nFor web forms, the `name` prop may be used to define the name of the group's `fieldset` and input elements.\n\n### Validation\n\nValidation state may be set by passing 'error' or 'success' to the `validation` prop.\n\n## A11y guidelines\n\nRadioCardGroup accepts all the common accessibility props, but also sets accessibility role `'radiogroup'`\nand controls the accessibility state of children like RadioCard and Feedback based on current state.\n\n@example\n```jsx\n<RadioCardGroup\n  initialCheckedId=\"card1\"\n  items={[\n    { title: 'Card 1', id: 'card1', content: <Typography>More info</Typography> },\n    { title: 'Card 2', id: 'card2', content: <Typography>Extra content</Typography> },\n    { title: 'Card 3', id: 'card3', content: <Typography>More content</Typography> }\n  ]}\n  legend=\"Cards\"\n  hint=\"Choose a card to select\"\n/>\n```",
         "props": {
+          "copy": {
+            "defaultValue": {
+              "value": "'en'",
+              "computed": false
+            },
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'en'",
+                  "computed": false
+                },
+                {
+                  "value": "'fr'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Whether the English or French copy will be used (e.g. for accessibility labels)."
+          },
           "items": {
             "defaultValue": {
               "value": "[]",
@@ -9518,6 +9713,27 @@
       "docs": {
         "description": "",
         "props": {
+          "copy": {
+            "defaultValue": {
+              "value": "'en'",
+              "computed": false
+            },
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'en'",
+                  "computed": false
+                },
+                {
+                  "value": "'fr'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Whether the English or French copy will be used (e.g. for accessibility labels)."
+          },
           "accessibilityRole": {
             "defaultValue": {
               "value": "'switch'",
@@ -9655,6 +9871,27 @@
       "docs": {
         "description": "",
         "props": {
+          "copy": {
+            "defaultValue": {
+              "value": "'en'",
+              "computed": false
+            },
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'en'",
+                  "computed": false
+                },
+                {
+                  "value": "'fr'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Whether the English or French copy will be used (e.g. for accessibility labels)."
+          },
           "items": {
             "defaultValue": {
               "value": "[]",
@@ -9729,6 +9966,7 @@
               "name": "custom",
               "raw": {
                 "space": "integer",
+                "fieldSpace": "integer",
                 "direction": "direction",
                 "alignItems": "flexAlign",
                 "justifyContent": "flexJustifyContent",