npm - @adyen/bento-vue2 - Versions diffs - 1.69.0 → 1.70.0 - Mend

@adyen/bento-vue2 1.69.0 → 1.70.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (301) hide show

package/README.md CHANGED Viewed

@@ -9,44 +9,41 @@ Bento Vue contains foundational Vue 2.x (and Vue 3.x) UI components for shipping
 ## Table of contents
--   [Bento Vue component library](#bento-vue-component-library)
-    -   [Table of contents](#table-of-contents)
-    -   [Getting started](#getting-started)
-        -   [Installation](#installation)
-            -   [Vue 2](#vue-2)
-            -   [Vue 3](#vue-3)
-        -   [Adyen Design System Vue ecosystem](#adyen-design-system-vue-ecosystem)
-        -   [Usage](#usage)
-            -   [Load plugin and register components](#load-plugin-and-register-components)
-                -   [Vue 2](#vue-2-1)
-                -   [Vue 3](#vue-3-1)
-            -   [Import the fonts](#import-the-fonts)
-                -   [Vue 2](#vue-2-2)
-                -   [Vue 3](#vue-3-2)
-                -   [Using our CDN directly](#using-our-cdn-directly)
-            -   [Import CSS variables](#import-css-variables)
-                -   [⚠️ `bento.css` deprecated ⚠️](#️-bentocss-deprecated-️)
-                -   [Vue 2](#vue-2-3)
-                -   [Vue 3](#vue-3-3)
-            -   [Initialize `vue-i18n`](#initialize-vue-i18n)
-                -   [Vue 2](#vue-2-4)
-                -   [Vue 3](#vue-3-4)
-            -   [Use the components](#use-the-components)
-                -   [Vue 2](#vue-2-5)
-                -   [Vue 3](#vue-3-5)
-        -   [Bundlers](#bundlers)
-            -   [Webpack](#webpack)
-            -   [Vite](#vite)
-        -   [Stylelint](#stylelint)
-    -   [Theming](#theming)
-        -   [⚠️ `BentoTheme.BENTO` deprecated ⚠️](#️-bentothemebento-deprecated-️)
-        -   [Light and dark themes](#light-and-dark-themes)
-            -   [Setting a default theme](#setting-a-default-theme)
-            -   [Toggling a theme](#toggling-a-theme)
-        -   [ADL theme](#adl-theme)
-            -   [Set **legacy ADL** theme as default](#set-legacy-adl-theme-as-default)
-        -   [Setting themes without the Bento Plugin](#setting-themes-without-the-bento-plugin)
-    -   [Support](#support)
+- [Bento Vue component library](#bento-vue-component-library)
+    - [Table of contents](#table-of-contents)
+    - [Getting started](#getting-started)
+        - [Installation](#installation)
+            - [Vue 2](#vue-2)
+            - [Vue 3](#vue-3)
+        - [Adyen Design System Vue ecosystem](#adyen-design-system-vue-ecosystem)
+        - [Usage](#usage)
+            - [Load plugin and register components](#load-plugin-and-register-components)
+                - [Vue 2](#vue-2-1)
+                - [Vue 3](#vue-3-1)
+            - [Import the fonts](#import-the-fonts)
+                - [Vue 2](#vue-2-2)
+                - [Vue 3](#vue-3-2)
+                - [Using our CDN directly](#using-our-cdn-directly)
+            - [Import CSS variables](#import-css-variables)
+                - [⚠️ `bento.css` deprecated ⚠️](#️-bentocss-deprecated-️)
+                - [Vue 2](#vue-2-3)
+                - [Vue 3](#vue-3-3)
+            - [Initialize `vue-i18n`](#initialize-vue-i18n)
+                - [Vue 2](#vue-2-4)
+                - [Vue 3](#vue-3-4)
+            - [Use the components](#use-the-components)
+                - [Vue 2](#vue-2-5)
+                - [Vue 3](#vue-3-5)
+        - [Bundlers](#bundlers)
+            - [Webpack](#webpack)
+            - [Vite](#vite)
+        - [Stylelint](#stylelint)
+    - [Theming](#theming)
+        - [⚠️ `BentoTheme.BENTO` deprecated ⚠️](#️-bentothemebento-deprecated-️)
+        - [Light and dark themes](#light-and-dark-themes)
+            - [Setting a default theme](#setting-a-default-theme)
+            - [Toggling a theme](#toggling-a-theme)
+    - [Support](#support)
 ## Getting started
@@ -94,11 +91,11 @@ allow the components to use the Design Token CSS variables.
 You can enable the following feature by passing them the second argument to in the `.use` function.
--   `withDesignTokensCSSInjection`: Setting this to false, will disable CSS injection of styles. We recommend you do
-    this and [import the styles manually](#import-css-variables) instead.
--   `withToast`: Will enable all toast functionality required by the `BentoToast` component.
--   `withUtilityClasses` (deprecated): Will inject the utility classes into the page. We recommend you not use this
-    property but [import the styles manually](#import-css-variables) instead.
+- `withDesignTokensCSSInjection`: Setting this to false, will disable CSS injection of styles. We recommend you do this
+  and [import the styles manually](#import-css-variables) instead.
+- `withToast`: Will enable all toast functionality required by the `BentoToast` component.
+- `withUtilityClasses` (deprecated): Will inject the utility classes into the page. We recommend you not use this
+  property but [import the styles manually](#import-css-variables) instead.
 ##### Vue 2
@@ -163,10 +160,9 @@ default value of `withDesignTokensCSSInjection` in the next major version of Ben
 We currently export the following styles:
--   Bento light (default): `@adyen/bento-vue2/styles/bento-light`
--   Bento dark: `@adyen/bento-vue2/styles/bento-dark`
--   Legacy i.e. ADL (deprecated): `@adyen/bento-vue2/styles/legacy`
--   Utility classes: `@adyen/bento-vue2/styles/utility`
+- Bento light (default): `@adyen/bento-vue2/styles/bento-light`
+- Bento dark: `@adyen/bento-vue2/styles/bento-dark`
+- Utility classes: `@adyen/bento-vue2/styles/utility`
 NOTE: This way of importing bento styles will be mandatory in Bento 2.X
@@ -518,56 +514,6 @@ For enhanced accessibility, consider storing the user's theme preferences in `lo
 theme settings by using `BentoTheme.BENTO_SYSTEM`. This ensures that the theme aligns with the user's browser or system
 preferences.
-### ADL theme
-#### Set **legacy ADL** theme as default
-The Legacy ADL theme strives to offer a mapping to current ADL components as much as possible. The **legacy ADL** theme
-is set at time of instantiation and thus has to be applied app-wide (i.e. it's not possible to have some Bento
-components in the default Bento theme and others in the ADL legacy theme in the same app). You can apply the ADL Legacy
-theme as follows:
-```typescript
-import BentoVue, { BentoTheme } from '@adyen/bento-vue2';
-Vue.use(BentoVue, { theme: BentoTheme.LEGACY });
-```
-### Setting themes without the Bento Plugin
-Instead of using the theme plugin at the time of initialiation, you can set a theme for your Bento components by
-applying custom classes as the theme class overrides the default Design Token CSS variables. Currently supported classes
-are:
--   Default: _no class needed_
--   ADL: `.b-legacy-theme`.
-To use an alternative theme in your application, you will need to:
-1.  Import the the css file into your app.
-e.g. add the ADL theme.
-```typescript
-import '@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css';
-```
-2.  set the respective theme class in the main container inside the `App.vue` component.
-```html
-<template>
-    <transition name="navigation-fading" mode="out-in" appear>
-        <navigation-loading-indicator v-if="initialNavigation" />
-        <div v-else class="app b-legacy-theme">
-            <!-- Here goes your App code -->
-        </div>
-    </transition>
-</template>
-```
-Notice the class being added to the first `div` inside the `App.vue` component.
 ## Support
 If you have a feature request, or spotted a bug or a technical problem, please reach out to the Bento team.