@adyen/bento-vue2 0.5.0 → 0.7.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -943,7 +943,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"
@@ -1290,7 +1290,7 @@
             },
             {
               "name": "columnPanel",
-              "description": "Enables / hides the column settings panel.",
+              "description": "Enables / hides the view settings panel and the column contextual menu functionality.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1528,6 +1528,88 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-date-picker",
+          "description": "Date picker selector.",
+          "attributes": [
+            {
+              "name": "description",
+              "description": "Descriptive supporting text visbile underneath the dropdown.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables dropdown functionality.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "firstDayOfWeek",
+              "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatePickerFirstDayOfWeek"
+              },
+              "default": "BentoDatePickerFirstDayOfWeek.MONDAY"
+            },
+            {
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "func"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "label",
+              "description": "Text that is displayed as a label above the element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "optional",
+              "description": "Highlights the dropdown is optional.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "required",
+              "description": "Highlights the dropdown is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "description": "Selected date",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              },
+              "default": "null"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/date-picker.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-dropdown-avatar",
           "description": "A Avatar Dropdown showing a selectable list of countries.",
@@ -2440,13 +2522,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": {
@@ -2454,6 +2554,19 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-menu-list-container",
+          "description": "Menu list container component to set the correct styling in a menu list. For internal use only.",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/menu/components/menu-list-container/menu-list-container.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",
@@ -3018,10 +3131,10 @@
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item {@see BentoCountryVariant}.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCurrencyFilterOptions"
+                "type": "BentoSelectCountryFilterOptions"
               },
               "default": "undefined"
             }
@@ -3032,7 +3145,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
             "symbol": "default"
           }
         },
@@ -3042,10 +3155,10 @@
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item {@see BentoCountryVariant}.",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCountryFilterOptions"
+                "type": "BentoSelectCurrencyFilterOptions"
               },
               "default": "undefined"
             }
@@ -3056,7 +3169,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
             "symbol": "default"
           }
         },
@@ -3207,7 +3320,7 @@
                 "kind": "expression",
                 "type": "BentoTagVariant"
               },
-              "default": "BentoTagVariant.DEFAULT"
+              "default": "BentoTagVariant.GREY"
             },
             {
               "name": "truncate",
@@ -3527,6 +3640,15 @@
               },
               "default": "true"
             },
+            {
+              "name": "hasContextualMenuEnabled",
+              "description": "Toggles if the contextual menu is enabled",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "isFrozenColumns",
               "description": "If these columns are frozen (pinned) columns",
@@ -3573,6 +3695,227 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "date-picker-calendar",
+          "description": "Date picker calendar that displays all the days of a given month\nand allows to move back and forth the visible month with the Next\nand Previous buttons",
+          "attributes": [
+            {
+              "name": "firstDayOfWeek",
+              "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarFirstDayOfWeek"
+              },
+              "default": "DatePickerCalendarFirstDayOfWeek.MONDAY"
+            },
+            {
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "func"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "month",
+              "required": true,
+              "description": "Month of the year to be displayed in the calendar",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              }
+            },
+            {
+              "name": "value",
+              "description": "Selected date",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              },
+              "default": "undefined"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar/date-picker-calendar.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "date-picker-calendar-container",
+          "description": "Handles the popover logic and displays the month, date, and range containers\naccording to the type of Date picker variation.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Disables dropdown functionality",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "firstDayOfWeek",
+              "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "DatePickerCalendarFirstDayOfWeek.MONDAY"
+            },
+            {
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "func"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "label",
+              "description": "Text that is displayed as a label above the element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "month",
+              "required": true,
+              "description": "Month of the year to be displayed in the calendar",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              }
+            },
+            {
+              "name": "open",
+              "required": true,
+              "description": "Indicates if the dropdown is open so that\nthe container can be displayed.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "value",
+              "description": "Selected date",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "targetElement",
+              "required": true,
+              "description": "Reference to the DOM element or Vue component for positioning\nthe Dropdown container.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoPopover.props.targetElement.type"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar-container/date-picker-calendar-container.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "date-picker-calendar-container-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "month",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarContainer.props.month"
+              }
+            },
+            {
+              "name": "open",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarContainer.props.open"
+              }
+            },
+            {
+              "name": "disabled",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarContainer.props.disabled"
+              }
+            },
+            {
+              "name": "value",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarContainer.props.value"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "<undefined>"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar-container/__test__/date-picker-calendar-container-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "date-picker-calendar-day",
+          "description": "Handles the styles and states of the individual dates of the calendar.",
+          "attributes": [
+            {
+              "name": "day",
+              "required": true,
+              "description": "Date to be displayed as the calendar day. From 1st to 31st (or end of the month defined in the date)",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              }
+            },
+            {
+              "name": "selected",
+              "description": "Changes the state of the calendar day to selected.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar/components/date-picker-calendar-day/date-picker-calendar-day.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "date-picker-calendar-day-stub",
+          "description": "",
+          "events": [
+            {
+              "name": "<undefined>"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar/components/date-picker-calendar-day/__test__/date-picker-calendar-day-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "dropdown-base-textbox",
           "description": "Only for internal use, implements the logic of the textbox element to be implemented in the combobox.",
@@ -4275,6 +4618,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "isTitle",
+              "description": "Renders the text in a bold variant",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
@@ -4728,6 +5080,32 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "sub-menu-item-list",
+          "description": "SubMenuItemList component to render a submenu with the sliding transition. For internal use only.",
+          "attributes": [
+            {
+              "name": "items",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "BentoMenuItem[]"
+              }
+            },
+            {
+              "name": "title",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/menu/components/sub-menu-item-list/sub-menu-item-list.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "tab",
           "description": "",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "0.5.0",
+    "version": "0.7.0",
     "description": "Adyen Bento Vue2 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -50,10 +50,10 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "0.4.2",
-        "@adyen/ui-assets-flag-icons": "1.1.0",
-        "@adyen/ui-assets-icons-16": "3.0.0",
-        "@adyen/ui-assets-payment-method-icons": "5.1.0",
+        "@adyen/bento-design-tokens": "0.4.4",
+        "@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",
         "@popperjs/core": "2.11.8",
         "date-fns": "2.28.0",
         "focus-lock": "0.11.0",