@adyen/bento-vue2 1.18.0 → 1.19.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4750,6 +4750,103 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "checkbox-input",
+          "description": "",
+          "attributes": [
+            {
+              "name": "ariaLabel",
+              "description": "The aria label associated to the input checkbox.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "ariaDescribedby",
+              "description": "An additional string that serves as description for the input checkbox (useful if the component shows a description).",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "disabled",
+              "description": "Setting this property to true will disable the checkbox in your form.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "hasError",
+              "description": "Setting this property to true will show the checkbox in error state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "id",
+              "description": "Sets the id of the checkbox. Required for accessibility purposes",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "indeterminate",
+              "description": "The :indeterminate CSS pseudo-class represents any form element\nwhose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\nset to true, radio buttons which are members of a group in which all radio buttons are unchecked,\nand indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\nThis property lets you control the input.indeterminate native property.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "modelValue",
+              "description": "When handling a single checkbox with a singular state, use a boolean.\n\nWhen handling multiple checkboxes, use an array of keys.\nThese keys exist as a set \"value\" prop for each checkbox.",
+              "value": {
+                "kind": "expression",
+                "type": "CheckboxInputType | CheckboxInputGroupItems"
+              },
+              "default": "false"
+            },
+            {
+              "name": "readonly",
+              "description": "Setting this property to true will set the checkbox to read only state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "description": "The value of the component. The DOM API casts this to a string.\nThe browser uses \"on\" as the default value.\n\nIn the case of multiple checkboxes this value is used as a unique key.",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "update:model-value",
+              "description": "Emit that emits the input value"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/checkbox-input/checkbox-input.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "click-outside-stub",
           "description": "",
@@ -5709,6 +5806,69 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "dialog-page",
+          "description": "",
+          "attributes": [
+            {
+              "name": "pageId",
+              "description": "Identifier of the page, used with activePage prop to handle navigation",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "alwaysShowBorder",
+              "description": "Show header and actions border",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "backButtonStyling",
+              "description": "Pass custom styling to the back button to position it correctly with the header slot",
+              "value": {
+                "kind": "expression",
+                "type": "CSSProperties"
+              },
+              "default": "null"
+            },
+            {
+              "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"
+            }
+          ],
+          "events": [
+            {
+              "name": "animationend",
+              "description": "Fires when the animation ends"
+            }
+          ],
+          "slots": [
+            {
+              "name": "header"
+            },
+            {
+              "name": "content"
+            },
+            {
+              "name": "footer"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/dialog-page/dialog-page.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "divider",
           "description": "",
@@ -6280,7 +6440,7 @@
         },
         {
           "name": "dropdown-default-textbox",
-          "description": "For internal use only, textbox component used in the dropdown component.",
+          "description": "",
           "attributes": [
             {
               "name": "additionalItemsSelected",
@@ -6435,6 +6595,28 @@
               "default": "false"
             }
           ],
+          "events": [
+            {
+              "name": "clear",
+              "description": "Emitted on clearing the input."
+            },
+            {
+              "name": "close",
+              "description": "Emitted on click, space and enter user events. It will open the dropdown."
+            },
+            {
+              "name": "input",
+              "description": "Emitted on input event."
+            },
+            {
+              "name": "keydown",
+              "description": "Emitted on keydown event."
+            },
+            {
+              "name": "open",
+              "description": "Emitted on click, space, enter and esc user events. It will close the dropdown."
+            }
+          ],
           "slots": [
             {
               "name": "innerSlot"
@@ -6855,6 +7037,16 @@
               "default": "''"
             }
           ],
+          "events": [
+            {
+              "name": "open",
+              "description": "Emitted on click, space, enter and esc user events. It will close the dropdown."
+            },
+            {
+              "name": "close",
+              "description": "Emitted on click, space and enter user events. It will open the dropdown."
+            }
+          ],
           "source": {
             "module": "./src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue",
             "symbol": "default"
@@ -7814,7 +8006,7 @@
             {
               "name": "external",
               "required": false,
-              "description": "Set the rendered link to a regular external anchor link.",
+              "description": "Set the rendered link to a regular external anchor link and renders an external link icon.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -7832,7 +8024,7 @@
             {
               "name": "isNotRouting",
               "required": false,
-              "description": "Simply renders a regular anchor tag instead of using the the default `router-link` component",
+              "description": "Set the rendered link to a regular external anchor link.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -8638,6 +8830,15 @@
               },
               "default": "null"
             },
+            {
+              "name": "activePage",
+              "description": "The id of the current active page\nShould be the same as the pageId of the BentoModalFullscreenPage to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
             {
               "name": "contextualLabel",
               "description": "Label shown next to the modal actions",
@@ -8670,6 +8871,73 @@
             {
               "name": "update:is-open",
               "description": "Emits 'update:is-open' event when the modal is closed"
+            },
+            {
+              "name": "update:active-page",
+              "description": "Emits update event when page is changed internally"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "header"
+            }
+          ],
+          "source": {
+            "module": "./src/components/modal-fullscreen/modal-fullscreen.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "modal-fullscreen-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\nEach object in the list should have a `title`, an `event` and\n(optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              },
+              "default": "null"
+            },
+            {
+              "name": "contextualLabel",
+              "description": "Label shown next to the modal actions",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "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 modal",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
             }
           ],
           "slots": [
@@ -8681,7 +8949,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/modal-fullscreen/modal-fullscreen.vue",
+            "module": "./src/components/modal-fullscreen/components/modal-fullscreen-page.vue",
             "symbol": "default"
           }
         },
@@ -9457,6 +9725,94 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "radio-input",
+          "description": "",
+          "attributes": [
+            {
+              "name": "ariaLabel",
+              "description": "The aria label associated to the input checkbox.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "ariaDescribedby",
+              "description": "An additional string that serves as description for the input checkbox (useful if the component shows a description).",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "disabled",
+              "description": "Disable the radio button (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "hasError",
+              "description": "Shows bento-radio-button in error state (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "id",
+              "description": "Sets the id of the radio input. Required for accessibility purposes",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "modelValue",
+              "description": "This property should not be used directly.\nIt will be used by v-model directive on radio component.",
+              "value": {
+                "kind": "expression",
+                "type": "RadioInputValue"
+              },
+              "default": "null"
+            },
+            {
+              "name": "readonly",
+              "description": "Sets the radio button to readonly (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "required": true,
+              "description": "Indicates the value of the input that will be returned when it's checked",
+              "value": {
+                "kind": "expression",
+                "type": "RadioInputValue"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "update:model-value",
+              "description": "Emit that emits the input value"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/radio-input/radio-input.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "search-bar",
           "description": "",
@@ -10342,6 +10698,76 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "toggle-button",
+          "description": "",
+          "attributes": [
+            {
+              "name": "condensed",
+              "description": "Reduces sizing of button",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButton.props.condensed.type"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables button functonality",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButton.props.disabled.type"
+              },
+              "default": "false"
+            },
+            {
+              "name": "inverse",
+              "description": "Sets color set to inverse",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "variant",
+              "description": "Types of flavour of Button",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButton.props.variant.type"
+              },
+              "default": "'primary'"
+            },
+            {
+              "name": "toggled",
+              "description": "The state of the button whether it is toggled or not.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "Click event handler"
+            },
+            {
+              "name": "update:toggled",
+              "description": "Update the toggle state when the button has been clicked."
+            }
+          ],
+          "slots": [
+            {
+              "name": "innerSlot"
+            }
+          ],
+          "source": {
+            "module": "./src/components/button/components/toggle-button/toggle-button.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "tooltip",
           "description": "Tooltip container, to be used internally to render the tooltip container where the text is shown.",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "1.18.0",
+    "version": "1.19.0",
     "description": "Adyen Bento Vue2 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -60,7 +60,7 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.18.0",
+        "@adyen/bento-design-tokens": "1.19.0",
         "@adyen/ui-assets-icons-16": "4.1.0",
         "@adyen/ui-assets-payment-method-icons": "6.1.0",
         "@codemirror/commands": "6.3.3",
@@ -87,7 +87,7 @@
         "react": "16.14.0"
     },
     "devDependencies": {
-        "@adyen/bento-cli": "0.0.12",
+        "@adyen/bento-cli": "0.0.13",
         "@storybook/addon-a11y": "7.6.17",
         "@storybook/addon-essentials": "7.6.17",
         "@storybook/addon-storysource": "7.6.17",