@adyen/bento-vue2 0.9.2 → 0.10.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -180,113 +180,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "adl-segmented-control",
-          "description": "",
-          "attributes": [
-            {
-              "name": "disabled",
-              "description": "Determines whether the entire control is disabled.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "value",
-              "description": "The currently selected value.",
-              "value": {
-                "kind": "expression",
-                "type": "null"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "name",
-              "required": true,
-              "description": "The name to be used on the radio button input elements internally.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "input"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/components/segmented-control/segmented-control.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "adl-segmented-option",
-          "description": "",
-          "attributes": [
-            {
-              "name": "disabled",
-              "description": "Determines whether this option is disabled or not.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "value",
-              "required": true,
-              "description": "The value for this option. This will determine whether this option is currently selected\nbased on if it matches with `value` of SegmentedControl (injected here as `adlSegmentedControlApi.state.selectedValue`).",
-              "value": {
-                "kind": "expression",
-                "type": "null"
-              }
-            },
-            {
-              "name": "label",
-              "description": "The label text. Note if this is provided, the icon shall not be rendered.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "''"
-            },
-            {
-              "name": "segmentedControl",
-              "description": "Injected prop that contains the required segmentedControl interface.\nNOTE: This Prop definition can be removed when the following issue is resolved:\nhttps://github.com/vuejs/vue/issues/8969",
-              "value": {
-                "kind": "expression",
-                "type": "AdlSegmentedControlApi"
-              },
-              "default": "null"
-            },
-            {
-              "name": "testId",
-              "description": "For testing purposes you can decide which testId your adl-segmented-option instance will have",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "'adl-segmented-option'"
-            }
-          ],
-          "slots": [
-            {
-              "name": "icon"
-            }
-          ],
-          "source": {
-            "module": "./src/components/segmented-control/components/segmented-option.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "adl-textarea",
           "description": "",
@@ -1375,6 +1268,15 @@
               },
               "default": "BentoCardBackground.PRIMARY"
             },
+            {
+              "name": "titleSize",
+              "description": "Defines the title size of the card header",
+              "value": {
+                "kind": "expression",
+                "type": "BentoCardTitleSize"
+              },
+              "default": "BentoCardTitleSize.DEFAULT"
+            },
             {
               "name": "expandable",
               "description": "The whole content of the card will be expandable in accordion manner",
@@ -1476,6 +1378,15 @@
               },
               "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": "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.",
@@ -1553,6 +1464,15 @@
               },
               "default": "false"
             },
+            {
+              "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": "label",
               "required": true,
@@ -1921,6 +1841,14 @@
           "name": "bento-date-filter",
           "description": "The Date filter displays a calendar that allows\nto select a single date.",
           "attributes": [
+            {
+              "name": "isDateInput",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
             {
               "name": "defaultValue",
               "description": "Default value of the filter to reset to.",
@@ -1948,6 +1876,15 @@
                 "type": "string"
               }
             },
+            {
+              "name": "onlySlot",
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "options",
               "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not",
@@ -1965,15 +1902,6 @@
                 "type": "BentoDateFilterValue"
               },
               "default": "undefined"
-            },
-            {
-              "name": "onlySlot",
-              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
             }
           ],
           "source": {
@@ -2163,6 +2091,15 @@
                 "type": "string"
               }
             },
+            {
+              "name": "onlySlot",
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "options",
               "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not",
@@ -2180,15 +2117,6 @@
                 "type": "BentoDateRangeFilterValue"
               },
               "default": "() => ({ startDate: undefined, endDate: undefined })"
-            },
-            {
-              "name": "onlySlot",
-              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
             }
           ],
           "source": {
@@ -2417,11 +2345,6 @@
               "default": "() => []"
             }
           ],
-          "events": [
-            {
-              "name": "input"
-            }
-          ],
           "source": {
             "module": "./src/components/filter-bar/filter-bar.vue",
             "symbol": "default"
@@ -2790,6 +2713,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "noResultsMessage",
+              "required": true,
+              "description": "Messaged displayed when no items are listed in the listbox",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "searching",
               "description": "Flag that indicates that an external search it's being made\nto filter out the items inside the the multi-select listbox\n\nIf enabled, hides the \"Select all\" checkbox in \"multiple\" mode.",
@@ -3954,7 +3886,16 @@
             },
             {
               "name": "disabled",
-              "description": "If set to true, renders all checkboxes in the group in a disabled state.",
+              "description": "If set to true, renders all radio-buttons in the group in a disabled state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "hasError",
+              "description": "If set to true, renders all radio-buttons in the group in an error state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -4096,6 +4037,66 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-segmented-control-button",
+          "description": "Internal component to be used within the BentoSegmentedControl component only",
+          "attributes": [
+            {
+              "name": "label",
+              "required": true,
+              "description": "The string the button will showcase",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "value",
+              "required": true,
+              "description": "Indicates the value of the input that will be returned when it's selected",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              }
+            },
+            {
+              "name": "v-model",
+              "description": "This property should not be used directly.\nIt will be used by v-model directive on the segmented control component",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "default": "null"
+            },
+            {
+              "name": "disabled",
+              "description": "Disable the radio button (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "fullWidth",
+              "description": "Renders the button with a 100% width",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "source": {
+            "module": "./src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-select-avatar-filter",
           "description": "The Select Avatar filter displays a listbox of avatar items\npassed in the \"options.listboxItems\" property.",
@@ -4223,6 +4224,15 @@
                 "type": "string"
               }
             },
+            {
+              "name": "onlySlot",
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "options",
               "description": "List of options that are needed to setup the 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.",
@@ -4240,15 +4250,6 @@
                 "type": "BentoListboxSelectedValue"
               },
               "default": "undefined"
-            },
-            {
-              "name": "onlySlot",
-              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
             }
           ],
           "slots": [
@@ -4857,9 +4858,6 @@
             {
               "name": "default"
             },
-            {
-              "name": "subLabel"
-            },
             {
               "name": "description"
             }
@@ -4967,14 +4965,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "checkbox.test",
-          "description": "",
-          "source": {
-            "module": "./src/components/checkbox/checkbox.test.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "click-outside-stub",
           "description": "",
@@ -6014,11 +6004,21 @@
           "attributes": [
             {
               "name": "columnWidth",
+              "description": "Sets the responsive columns widths for the grid.",
               "value": {
                 "kind": "expression",
                 "type": "GridLayoutColumnWidths"
               },
               "default": "null"
+            },
+            {
+              "name": "containerType",
+              "description": "Set the type of CSS container the grid layout has",
+              "value": {
+                "kind": "expression",
+                "type": "GridLayoutContainerType"
+              },
+              "default": "GridLayoutContainerType.INLINE"
             }
           ],
           "slots": [
@@ -6627,6 +6627,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "hasError",
+              "description": "Shows radio-button in error state (optional)",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "value",
               "required": true,
@@ -6655,9 +6664,6 @@
             {
               "name": "default"
             },
-            {
-              "name": "subLabel"
-            },
             {
               "name": "description"
             }
@@ -6667,22 +6673,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "radio-button.test",
-          "description": "",
-          "source": {
-            "module": "./src/components/radio-group/components/radio-button/radio-button.test.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "segmented-control.test",
-          "description": "",
-          "source": {
-            "module": "./src/components/segmented-control/segmented-control.test.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "status.test",
           "description": "",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "0.9.2",
+    "version": "0.10.0",
     "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.5.2",
+        "@adyen/bento-design-tokens": "0.5.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",

package/dist/@types/components/segmented-control/components/segmented-option.vue.d.ts

@@ -1,59 +0,0 @@
-import { PropType } from 'vue';
-import { AdlSegmentedControlApi } from '../segmented-control.types';
-declare const _default: import("vue").DefineComponent<{
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    value: {
-        type: any;
-        required: true;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    segmentedControl: {
-        type: PropType<AdlSegmentedControlApi>;
-        default: any;
-    };
-    testId: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {}, {}, {
-    isSelected(): boolean;
-    isDisabled(): boolean;
-    isChecked(): boolean;
-    adlSegmentedControlApi(): AdlSegmentedControlApi;
-    conditionalClasses(): {
-        [className: string]: boolean;
-    };
-}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    value: {
-        type: any;
-        required: true;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    segmentedControl: {
-        type: PropType<AdlSegmentedControlApi>;
-        default: any;
-    };
-    testId: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    label: string;
-    disabled: boolean;
-    testId: string;
-    segmentedControl: AdlSegmentedControlApi;
-}>;
-export default _default;

package/dist/@types/components/segmented-control/index.d.ts

@@ -1,3 +0,0 @@
-export { default as AdlSegmentedOption } from './components/segmented-option.vue';
-export { default as AdlSegmentedControl } from './segmented-control.vue';
-export * from './segmented-control.types';

package/dist/@types/components/segmented-control/segmented-control.keys.d.ts

@@ -1 +0,0 @@
-export declare const SEGMENTED_CONTROL_INJ_KEY: unique symbol;

package/dist/@types/components/segmented-control/segmented-control.types.d.ts

@@ -1,15 +0,0 @@
-export interface AdlSegmentedControlApi {
-    state: {
-        name: string;
-        disabled: boolean;
-        selectedValue: unknown;
-    };
-    changeValue: (newValue: unknown) => void;
-}
-export declare enum AdlSegmentedControlState {
-    DISABLED = "disabled"
-}
-export declare enum AdlSegmentedOptionState {
-    DISABLED = "disabled",
-    SELECTED = "selected"
-}

package/dist/@types/components/segmented-control/segmented-control.vue.d.ts

@@ -1,42 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    value: {
-        type: any;
-        default: any;
-    };
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-}, {}, {
-    state: {
-        disabled: boolean;
-        selectedValue: any;
-        name: string;
-    };
-    ariaLabel: any;
-}, {
-    conditionalClasses(): {
-        [className: string]: boolean;
-    };
-}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    value: {
-        type: any;
-        default: any;
-    };
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-}>>, {
-    value: any;
-    disabled: boolean;
-}>;
-export default _default;