@adyen/bento-vue2 1.2.0 → 1.3.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -510,7 +510,7 @@
           "attributes": [
             {
               "name": "items",
-              "description": "The option elements to populate the country dropdown with.\nIt must be an array of {@see BentoCountryListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {BentoCountryCode} value.value - Country code of the option",
+              "description": "The option elements to populate the country dropdown with.\nIt must be an array of {@see BentoCountryListboxOptions }\n * @deprecated {string} value.label - Use BentoDropdown instead of custom labels\n * @property {BentoCountryCode} value.value - Country code of the option",
               "value": {
                 "kind": "expression",
                 "type": "BentoCountryListboxOptions"
@@ -682,22 +682,22 @@
           "description": "",
           "attributes": [
             {
-              "name": "modalRole",
-              "description": "Defines whether the modal will be an alert modal",
+              "name": "columnsSize",
+              "description": "If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoModalColumnLayoutVariant"
               },
-              "default": "BentoModalRole.DIALOG"
+              "default": "BentoModalColumnLayoutVariant.SMALLER"
             },
             {
-              "name": "isDismissible",
-              "required": true,
-              "description": "If set to true, it allows the modal to be closed by clicking outside of it",
+              "name": "customPadding",
+              "description": "If provided, manages the padding of the whole modal container",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              }
+                "type": "string"
+              },
+              "default": "null"
             },
             {
               "name": "hideCloseButton",
@@ -709,17 +709,8 @@
               }
             },
             {
-              "name": "customPadding",
-              "description": "If provided, manages the padding of the whole modal container",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "withColumnLayout",
-              "description": "If provided, renders the modal's content in a two-column layout an wth dividers separating its content",
+              "name": "initiallyOpen",
+              "description": "Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -727,13 +718,13 @@
               "default": "false"
             },
             {
-              "name": "columnsSize",
-              "description": "If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.",
+              "name": "isDismissible",
+              "required": true,
+              "description": "If set to true, it allows the modal to be closed by clicking outside of it",
               "value": {
                 "kind": "expression",
-                "type": "BentoModalColumnLayoutVariant"
-              },
-              "default": "BentoModalColumnLayoutVariant.SMALLER"
+                "type": "boolean"
+              }
             },
             {
               "name": "isOpen",
@@ -745,17 +736,17 @@
               }
             },
             {
-              "name": "size",
-              "description": "Sets the width of the modal",
+              "name": "modalRole",
+              "description": "Defines whether the modal will be an alert modal",
               "value": {
                 "kind": "expression",
-                "type": "BentoModalSize"
+                "type": "string"
               },
-              "default": "BentoModalSize.SMALL"
+              "default": "BentoModalRole.DIALOG"
             },
             {
-              "name": "initiallyOpen",
-              "description": "Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.",
+              "name": "overflowVisible",
+              "description": "Allows the inner elments to overflow the dialog",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -763,7 +754,17 @@
               "default": "false"
             },
             {
-              "name": "overflowVisible",
+              "name": "size",
+              "description": "Sets the width of the modal",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalSize"
+              },
+              "default": "BentoModalSize.SMALL"
+            },
+            {
+              "name": "withColumnLayout",
+              "description": "If provided, renders the modal's content in a two-column layout an wth dividers separating its content",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1452,31 +1453,31 @@
           "description": "A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\nThis component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n\nimport { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n\nexport default {\n    components: { BentoCheckboxGroup },\n    template: `\n            <bento-checkbox-group\n               label=\"Your group label\"\n               :items=\"[\n                   { value: 1, label: 'Your label' },\n                   { value: 2, label: 'Another label', description: 'Your sub label' },\n                ]\"\n             />\n    `\n};",
           "attributes": [
             {
-              "name": "items",
-              "required": true,
-              "description": "The checkbox group's items.",
+              "name": "description",
+              "description": "Descriptive supporting text visbile underneath the label.",
               "value": {
                 "kind": "expression",
-                "type": "BentoCheckboxGroupItems"
-              }
+                "type": "string"
+              },
+              "default": "null"
             },
             {
-              "name": "modelValue",
-              "description": "Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\nDefaults to no value selected.",
+              "name": "disabled",
+              "description": "If set to true, renders all checkboxes in the group in a disabled state.",
               "value": {
                 "kind": "expression",
-                "type": "Array<number | string | null>"
+                "type": "boolean"
               },
-              "default": "() => []"
+              "default": "false"
             },
             {
-              "name": "variant",
-              "description": "The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.",
+              "name": "errorMessage",
+              "description": "Renders all checkboxes in an error state with an error message.",
               "value": {
                 "kind": "expression",
-                "type": "BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`"
+                "type": "string"
               },
-              "default": "BentoCheckboxGroupVariant.VERTICAL"
+              "default": "null"
             },
             {
               "name": "formId",
@@ -1488,8 +1489,53 @@
               "default": "null"
             },
             {
-              "name": "disabled",
-              "description": "If set to true, renders all checkboxes in the group in a disabled state.",
+              "name": "hasError",
+              "description": "If set to true, renders all checkboxes in the group in an error state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "hideLabel",
+              "description": "Shows/hides the group label.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "null"
+            },
+            {
+              "name": "items",
+              "required": true,
+              "description": "The checkbox group's items.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoCheckboxGroupItems"
+              }
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "The name associated with the group. Required for accessibility purposes.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "modelValue",
+              "description": "Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\nDefaults to no value selected.",
+              "value": {
+                "kind": "expression",
+                "type": "Array<number | string | null>"
+              },
+              "default": "() => []"
+            },
+            {
+              "name": "optional",
+              "description": "Indicates the field is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1506,8 +1552,8 @@
               "default": "false"
             },
             {
-              "name": "hasError",
-              "description": "If set to true, renders all checkboxes in the group in an error state.",
+              "name": "required",
+              "description": "Indicates the field is required.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1515,8 +1561,8 @@
               "default": "false"
             },
             {
-              "name": "errorMessage",
-              "description": "Renders all checkboxes in an error state with an error message.",
+              "name": "tooltipText",
+              "description": "Tooltip message.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1524,13 +1570,13 @@
               "default": "null"
             },
             {
-              "name": "label",
-              "required": true,
-              "description": "The name associated with the group. Required for accessibility purposes.",
+              "name": "variant",
+              "description": "The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`"
+              },
+              "default": "BentoCheckboxGroupVariant.VERTICAL"
             }
           ],
           "source": {
@@ -1618,7 +1664,7 @@
         },
         {
           "name": "bento-country",
-          "description": "A component to display a country's flag and label.\nThe label comes in four variates: iso code, country name, phone number code or capital city.",
+          "description": "A component to display a country's label.\nThe label comes in four variates: iso code, country name, phone number code or capital city.",
           "attributes": [
             {
               "name": "code",
@@ -1631,7 +1677,7 @@
             },
             {
               "name": "label",
-              "description": "Custom label text for next to the flag.",
+              "description": "Custom label text.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2136,6 +2182,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "readonly",
+              "description": "The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date picker.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "required",
               "description": "Highlights the dropdown is required.",
@@ -2298,6 +2353,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "readonly",
+              "description": "The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "required",
               "description": "Highlights the dropdown is required.",
@@ -3294,7 +3358,7 @@
               "description": "State of the button.",
               "value": {
                 "kind": "expression",
-                "type": "BentoLoadingButtonState"
+                "type": "BentoLoadingButtonState | `${BentoLoadingButtonState}`"
               },
               "default": "BentoLoadingButtonState.START"
             },
@@ -4197,6 +4261,15 @@
           "name": "bento-radio-group",
           "description": "A radio group component should be used whenever it is necessary to use a set of radio buttons\nThis component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n\nimport { BentoRadioGroup, BentoRadioGroupVariant } from '@adyen/bento-vue2/';\n\nexport default {\n    components: { BentoRadioGroup },\n    template: `\n            <bento-radio-group\n               label=\"Your group label\"\n               :items=\"[\n                   { value: 1, label: 'Your label' },\n                   { value: 2, label: 'Another label', description: 'Your descriptive sub label' },\n                ]\"\n                :variant=\"BentoRadioGroupVariant.HORIZONTAL\"\n             />\n    `\n};",
           "attributes": [
+            {
+              "name": "description",
+              "description": "Descriptive supporting text visbile underneath the label.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
             {
               "name": "disabled",
               "description": "If set to true, renders all radio-buttons in the group in a disabled state.",
@@ -4233,6 +4306,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "hideLabel",
+              "description": "Shows/hides the group label.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "null"
+            },
             {
               "name": "items",
               "required": true,
@@ -4251,6 +4333,24 @@
                 "type": "string"
               }
             },
+            {
+              "name": "modelValue",
+              "description": "Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\nDefaults to no value selected.",
+              "value": {
+                "kind": "expression",
+                "type": "number|string|null"
+              },
+              "default": "null"
+            },
+            {
+              "name": "optional",
+              "description": "Indicates the field is optional.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "readonly",
               "description": "If set to true, renders all radio-buttons in the group in a readonly state.",
@@ -4261,11 +4361,20 @@
               "default": "false"
             },
             {
-              "name": "modelValue",
-              "description": "Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\nDefaults to no value selected.",
+              "name": "required",
+              "description": "Indicates the field is required.",
               "value": {
                 "kind": "expression",
-                "type": "number|string|null"
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "tooltipText",
+              "description": "Tooltip message.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
               },
               "default": "null"
             },
@@ -5936,20 +6045,20 @@
         },
         {
           "name": "controls-group",
-          "description": "A controls group components should be used whenever it is necessary to group a set of controls (i.e. radio buttons or checkboxes)\nThis component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n\nNOTE: This component should not be used by itself but more implemented by other exported components",
+          "description": "",
           "attributes": [
             {
-              "name": "label",
-              "required": true,
-              "description": "The name associated with the group. Required for accessibility purposes.",
+              "name": "description",
+              "description": "Descriptive supporting text visbile underneath the label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "null"
             },
             {
-              "name": "showLabel",
-              "description": "Shows/hides the group label.",
+              "name": "disabled",
+              "description": "Sets all child controls of the <fieldset> as disabled.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5966,13 +6075,49 @@
               "default": "null"
             },
             {
-              "name": "disabled",
-              "description": "Sets all child controls of the <fieldset> as disabled.",
+              "name": "hideLabel",
+              "description": "Shows/hides the group label.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "null"
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "The name associated with the group. Required for accessibility purposes.\nThe label is shown when `hideLabel` is set to `true` or if `description` is passed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "optional",
+              "description": "Indicates the field is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "required",
+              "description": "Indicates the field is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "tooltipText",
+              "description": "Tooltip message.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
             }
           ],
           "slots": [
@@ -6885,6 +7030,124 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "form-layout",
+          "description": "",
+          "attributes": [
+            {
+              "name": "form",
+              "description": "Renders the form layout as an HTML `form`",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "loading",
+              "description": "Sets the state of the form and its fields to\na read only status.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "error-message"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "actions-left"
+            },
+            {
+              "name": "actions-right"
+            }
+          ],
+          "source": {
+            "module": "./src/components/form-layout/form-layout.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "form-layout-field-tip",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "message"
+            }
+          ],
+          "source": {
+            "module": "./src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "form-layout-group",
+          "description": "",
+          "attributes": [
+            {
+              "name": "layout",
+              "description": "The layout of the pair group of components.\nThis will render the components within the width of the proportions.\nOnly two colums are available.\n\nIf only one value is entered, then it will assume there's only one child in the group.\nIf two values are entered, the first value will be use for the first child and the second\nvalue for the second child.\n\nIf the value entered is not listed in the example\nlist below it will use 100% by default.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoLayoutGroupProportions"
+              },
+              "default": "'100'"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/form-layout/components/form-layout-group/form-layout-group.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "form-layout-title",
+          "description": "",
+          "attributes": [
+            {
+              "name": "subsection",
+              "description": "Defines if the Form Layout title is\na \"section\" or a \"subsection\".\nDefault is \"section\" (false). Turn into \"true\" for \"subsection\"",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "el",
+              "required": true,
+              "description": "Sets the HTML DOM element.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoTypography.props.el.type"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "description"
+            }
+          ],
+          "source": {
+            "module": "./src/components/form-layout/components/form-layout-title/form-layout-title.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "grid-layout",
           "description": "Component used to render the grid layout in the bento-summary-grid. For internal use only",
@@ -7598,6 +7861,125 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "sidepanel",
+          "description": "",
+          "attributes": [
+            {
+              "name": "activePage",
+              "description": "The id of the current active page\nShould be the same id as the BentoSidepanelPage to be displayed\nIf the component only has one page, it can be left null/undefined.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "isDismissible",
+              "description": "If set to true, it allows the sidepanel to be closed",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "isOpen",
+              "description": "Controls the sidepanel's state from the outside. Set it to true to open the sidepanel",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/sidepanel/sidepanel.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "sidepanel-mock",
+          "description": "",
+          "source": {
+            "module": "./src/components/sidepanel/__tests__/sidepanel-mock.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "sidepanel-page",
+          "description": "",
+          "attributes": [
+            {
+              "name": "actions",
+              "description": "List of actions that will be used to render the buttons.\nFirst element in the list will be rendered as \"primary\".\nAll elements after the first will be rendered as \"secondary\".\n\n```\n[{\n  title: 'Primary',\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n}]\n```",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              },
+              "default": "null"
+            },
+            {
+              "name": "actionsLabel",
+              "description": "Text label that is displayed left to the action buttons",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "destructiveActions",
+              "description": "If passed - sets first button color to red",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "pageId",
+              "description": "Identifier of the page, used with activePage prop to handle sidepanel navigation",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "previousPage",
+              "description": "ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\nUsed when the back button should not take the user to the natural previous page\nSet to `null` to hide back button in the page",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "title",
+              "description": "Title of the sidepanel page",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/sidepanel/components/sidepanel-page.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "structured-list-mock",
           "description": "",