@adyen/bento-vue2 0.6.0 → 0.7.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -641,6 +641,90 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "base-modal",
+          "description": "",
+          "attributes": [
+            {
+              "name": "modalRole",
+              "description": "Defines whether the modal will be an alert modal",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "BentoModalRole.DIALOG"
+            },
+            {
+              "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": "boolean"
+              }
+            },
+            {
+              "name": "hideCloseButton",
+              "required": true,
+              "description": "Hides a cross icon on the right side of the title",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "customPadding",
+              "description": "If provided, manages the padding of the whole modal container",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "isOpen",
+              "required": true,
+              "description": "Controls the modal's state from the outside. Set it to true to open the modal",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "size",
+              "description": "Sets the width of the modal",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalSize"
+              },
+              "default": "BentoModalSize.SMALL"
+            },
+            {
+              "name": "initiallyOpen",
+              "description": "Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "content"
+            },
+            {
+              "name": "actions"
+            }
+          ],
+          "source": {
+            "module": "./src/components/modal/components/base-modal/base-modal.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-alert",
           "description": "An Alert component is used to display a persistent\nnotification containing information important to the user",
@@ -744,6 +828,15 @@
               },
               "default": "null"
             },
+            {
+              "name": "buttonHasChevron",
+              "description": "Toggles if a chevron icon should be displayed in the button.\nThe chevron will change depending on the open state of the filter.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "disableApplyButton",
               "description": "Disable the \"apply\" button",
@@ -943,7 +1036,7 @@
             {
               "name": "actions",
               "required": true,
-              "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`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n`disabled` (optional): Disables the action.\n\n```\n[{\n  title: 'Primary',\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n  disabled: true\n}]\n```",
+              "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`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n`disabled` (optional): Disables the action.\n\n`variant` (optional): Sets button's variant background color.\n\n`critical` (optional): Sets button red border adn color.\n\n```\n[{\n  title: 'Primary',\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n  disabled: true,\n  variant: BentoButtonVariant.PRIMARY,\n  critical: true\n}]\n```",
               "value": {
                 "kind": "expression",
                 "type": "BentoButtonActionsList"
@@ -1854,11 +1947,24 @@
                 "type": "boolean"
               },
               "default": "false"
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "click"
+              "name": "isFilterOpen",
+              "description": "Signifies if the filter is open or closed.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "hasChevron",
+              "description": "Toggles if a chevron icon should be displayed in the button.\nThe chevron will change depending on the open state of the filter.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "slots": [
@@ -1949,7 +2055,7 @@
               "description": "JavaScript \"Date\" object for when the content was last updated",
               "value": {
                 "kind": "expression",
-                "type": "date"
+                "type": "date|number"
               },
               "default": "null"
             }
@@ -2522,13 +2628,31 @@
               }
             },
             {
-              "name": "ghostButton",
+              "name": "tertiaryButton",
               "description": "Displays the menu button in its ghost variant",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "menuPosition",
+              "description": "The position of where the menu should open.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoPopoverPositions"
+              },
+              "default": "BentoPopoverPositions.BOTTOM_START"
+            },
+            {
+              "name": "menuFixedPositioning",
+              "description": "Instructs the menu popover to be visible outside of the containing container.\nhttps://popper.js.org/docs/v2/constructors/#strategy",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
@@ -2549,6 +2673,294 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-modal",
+          "description": "Modal is a window that appear over any other page content and focus user attention exclusively on one task or piece of information at the moment.",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "Choose between default or dialog versions of modal",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalVariant"
+              },
+              "default": "BentoModalVariant.DEFAULT"
+            },
+            {
+              "name": "isDismissible",
+              "description": "If set to true, it allows the modal to be closed by clicking outside of it",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "null"
+            },
+            {
+              "name": "isOpen",
+              "description": "Controls the modal's state from the outside. Set it to true to open the modal",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "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`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n```\n[{\n  title: 'Primary',2\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n}]\n```",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              },
+              "default": "null"
+            },
+            {
+              "name": "hideCloseButton",
+              "description": "Hides a cross icon on the right side of the title",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "size",
+              "description": "Sets the width of the modal",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalSize"
+              },
+              "default": "BentoModalSize.SMALL"
+            },
+            {
+              "name": "customPadding",
+              "description": "If provided, manages the padding of the whole modal container",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "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": "dialogType",
+              "description": "Changes the visual styling of action buttons",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalDialogType"
+              },
+              "default": "BentoModalDialogType.CONFIRMATION"
+            },
+            {
+              "name": "content",
+              "description": "Text that will be displayed in the content section of Modal",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "content"
+            }
+          ],
+          "source": {
+            "module": "./src/components/modal/modal.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-modal-default",
+          "description": "",
+          "attributes": [
+            {
+              "name": "isOpen",
+              "required": true,
+              "description": "Controls the modal's state from the outside. Set it to true to open the modal",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "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": "boolean"
+              }
+            },
+            {
+              "name": "hideCloseButton",
+              "description": "Hides a cross icon on the right side of the title",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "size",
+              "required": true,
+              "description": "Sets the width of the modal",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalSize"
+              }
+            },
+            {
+              "name": "customPadding",
+              "description": "If provided, manages the padding of the whole modal container",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "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\".\nBut you may change the color of 1-st action to red with 'critial' key\nNot more than 3 action buttons can be provided\nOr 2 action buttons and 1 Label for them\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`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n```\n[{\n  title: 'Primary',2\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": "initiallyOpen",
+              "description": "Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "content"
+            },
+            {
+              "name": "actions"
+            }
+          ],
+          "source": {
+            "module": "./src/components/modal/components/modal-default/modal-default.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-modal-dialog",
+          "description": "",
+          "attributes": [
+            {
+              "name": "isOpen",
+              "required": true,
+              "description": "Controls the modal's state from the outside. Set it to true to open the modal",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "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": "boolean"
+              }
+            },
+            {
+              "name": "dialogType",
+              "required": true,
+              "description": "Sets different action buttons styling and appearance",
+              "value": {
+                "kind": "expression",
+                "type": "BentoModalDialogType"
+              }
+            },
+            {
+              "name": "content",
+              "required": true,
+              "description": "Text that is displayed in the content section of modal",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "actions",
+              "description": "List of actions that will be used to render the buttons.\nOnly 1 action button is allowed for Modal Dialog\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`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n```\n[{\n  title: 'Primary',2\n  event: () => { ... },\n  icon: FourPeopleIcon\n}]\n```",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              },
+              "default": "null"
+            },
+            {
+              "name": "initiallyOpen",
+              "description": "Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/modal/components/modal-dialog/modal-dialog.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-pagination",
           "description": "Paginiation component to help users page through data sets.\n\nThere are two ways of doing navigation in this component:\n     1. (Basic) You tell the component if there is a next page (hasNext)\n     2. (Enhanced) You tell the component:\n         - How many total items exist (totalCount)\n         - The max number of items that you show/fetch per page (size)\n         - In this case you should not set the hasNext props\n\nIf you have the data available and opt to use the Enhanced way you get extra controls:\n     - Page dropdown selector\n     - Last page button\n     - \"Showing 10 of 200 items\" text",
@@ -2926,7 +3338,7 @@
         },
         {
           "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 sub label' },\n                ]\"\n                :variant=\"BentoRadioGroupVariant.HORIZONTAL\"\n             />\n    `\n};",
+          "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": "items",
@@ -3379,6 +3791,9 @@
             },
             {
               "name": "subLabel"
+            },
+            {
+              "name": "description"
             }
           ],
           "source": {
@@ -4427,6 +4842,24 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "grid-layout",
+          "description": "Component used to render the grid layout in the bento-summary-grid. For internal use only",
+          "attributes": [
+            {
+              "name": "items",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "GridLayoutItem[]"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/summary-grid/components/grid-layout/grid-layout.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "input-field.test",
           "description": "",
@@ -5031,6 +5464,9 @@
             },
             {
               "name": "subLabel"
+            },
+            {
+              "name": "description"
             }
           ],
           "source": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "0.6.0",
+    "version": "0.7.1",
     "description": "Adyen Bento Vue2 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -50,7 +50,7 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "0.4.3",
+        "@adyen/bento-design-tokens": "0.4.5",
         "@adyen/ui-assets-flag-icons": "1.2.0",
         "@adyen/ui-assets-icons-16": "3.1.0",
         "@adyen/ui-assets-payment-method-icons": "5.2.0",
@@ -69,7 +69,7 @@
         "react": "16.14.0"
     },
     "devDependencies": {
-        "@adyen/bento-cli": "0.0.8",
+        "@adyen/bento-cli": "0.0.9",
         "@playwright/experimental-ct-vue2": "1.30.0",
         "@playwright/test": "^1.21.0",
         "@storybook/addon-a11y": "7.0.4",