release of v10.15 (#2951)

[Visit Preview](https://vercel.live/open-feedback/eufemia-git-main-eufemia.vercel.app?via=pr-comment-visit-preview-link&passThrough=1) [CSB eufemia-starter](https://codesandbox.io/s/eufemia-starter-x64n8v)
dnbexperience · Dec 12, 2023 · 8bc5d2e · 8bc5d2e
2 parents f6b331a + b46b1c9
commit 8bc5d2e
Show file tree

Hide file tree

Showing 585 changed files with 9,393 additions and 3,744 deletions.
diff --git a/packages/dnb-design-system-portal/gatsby-node.js b/packages/dnb-design-system-portal/gatsby-node.js
@@ -123,7 +123,7 @@ exports.onPostBuild = async (params) => {
 
   if (deletedPages.length) {
     params.reporter.warn(
-      `❗️ These pages where deleted:\n${deletedPages
+      `❗️ These pages were deleted:\n${deletedPages
         .map((page) => `├ ${page}`)
         .join('\n')}\n\n`,
     )
@@ -264,7 +264,7 @@ exports.onCreateWebpackConfig = ({
   if (PREBUILD_EXISTS && stage === 'build-javascript') {
     if (PREBUILD_EXISTS && !isCI) {
       reporter.warn(
-        '😱 There is a "dnb-eufemia/build" in your local repo. It is used durnig your local Portal build! \nKeep in mind, the code from "dnb-eufemia/build" may be outdated. \n\n👉 You can remove the build with: "yarn build:clean"\n\n',
+        '😱 There is a "dnb-eufemia/build" in your local repo. It is used during your local Portal build! \nKeep in mind, the code from "dnb-eufemia/build" may be outdated. \n\n👉 You can remove the build with: "yarn build:clean"\n\n',
       )
     }
 

diff --git a/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx b/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx
@@ -110,7 +110,7 @@
 
 ## February, 2. 2021
 
-- A good amount of new icons where added. See [code commit](https://github.com/dnbexperience/eufemia/pull/755) for more details.
+- A good amount of new icons were added. See [code commit](https://github.com/dnbexperience/eufemia/pull/755) for more details.
 
 ## January, 28. 2021
 
@@ -366,15 +366,15 @@ Get more details about the `@dnb/eufemia` [v5 release](/uilib/about-the-lib/rele
 
 **Changes to the default styles**
 
-- New Primary and Secondary Icons where added (link_out, pencil, bubble, save)
+- New Primary and Secondary Icons were added (link_out, pencil, bubble, save)
 - Enhanced the behavior of the Input Component with a entered text (dirty) state, changing the typography color to Emerald Green
 
 ## March, 12. 2019
 
 **Changes to the default styles**
 
 - Toggle Switch got new states and look & feel
-- New Primary Icons where added (information)
+- New Primary Icons were added (information)
 - Overall Component enhancements
 
 ## March, 6. 2019

diff --git a/packages/dnb-design-system-portal/src/docs/contribute.mdx b/packages/dnb-design-system-portal/src/docs/contribute.mdx
@@ -15,7 +15,7 @@ import {
 
 Welcome to the contribution pages of Eufemia.
 
-We want to **thank you** for being interested and we are so glad you want to help out! Following these guidelines will help you get started, make appropriate changes and guide you through Eufemias environment.
+We want to **thank you** for being interested and we are so glad you want to help out! Following these guidelines will help you get started, make appropriate changes and guide you through Eufemia's environment.
 
 Eufemia is a [living design system](/design-system/about/living-system). It doesn't have a 'finished' state. Continuous improvement, removal and addition of content is important if it is to remain relevant as a resource for current and future DNB products and services. For the future of Eufemia, have a look at [our vision](/contribute/vision).
 

diff --git a/packages/dnb-design-system-portal/src/docs/contribute/faq.mdx b/packages/dnb-design-system-portal/src/docs/contribute/faq.mdx
@@ -17,17 +17,13 @@ LINT_STAGED=1
 
 ## Dependency issues
 
-### Stylelint
-
-- v14 has changed a good amount of their default styling rules. Updating would require us to refactor a good amount of SCSS code. We are currently on v13.
-
 ## Babel
 
 Due to this bug: https://github.com/babel/babel/issues/11394 we add `.png,.snap` so they not get copied: `--extensions '.js,.ts,.tsx,.png,.snap'`
 
 ### Yarn PnP
 
-Currently, Eufemia uses yarn v3 with `node_modules`.
+Currently, Eufemia uses yarn with `node_modules`.
 
 When switching over to Yarn PnP, there are some issues:
 

diff --git a/...-design-system-portal/src/docs/contribute/first-contribution/before-started.mdx b/...-design-system-portal/src/docs/contribute/first-contribution/before-started.mdx
@@ -91,7 +91,7 @@ For JavaScript based components, the documentation for properties (`properties.m
 
 You can still sync/update the documentation of these files (`d.ts`), by running: `yarn @dnb/eufemia build:types:docs` or `yarn build`.
 
-**NB:** After you have synced/updated the files, you will see that some newlines where removed. Thats a negative side-effect we have no solution at the moment.
+**NB:** After you have synced/updated the files, you will see that some newlines were removed. Thats a negative side-effect we have no solution at the moment.
 
 #### Sharing PropTypes between components (legacy)
 

diff --git a/packages/dnb-design-system-portal/src/docs/icons/secondary.mdx b/packages/dnb-design-system-portal/src/docs/icons/secondary.mdx
@@ -13,7 +13,7 @@ The Secondary Icons are an addition to the [Primary Icons](/icons/primary). They
 
 The Secondary Icons can be extended infinitely.
 
-**Technically:** The consequence is that they have to be [imported](/uilib/components/icon) where ever they have to be used.
+**Technically:** The consequence is that they have to be [imported](/uilib/components/icon) wherever they have to be used.
 
 ## React example usage
 

diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/accessibility.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/accessibility.mdx
@@ -111,7 +111,7 @@ It helps people using keyboard navigation, skipping header areas with many focus
 ### Is a Skip Link required?
 
 It depends on content, context, and user needs. If your page has blocks of content, which are identical throughout many pages, then you should give the user the ability to skip these blocks.
-It is not a requirement to have a Skip-Link but a needed assesity.
+It is not a requirement to have a Skip-Link but a needed consideration.
 
 ## Accessibility checklist for designers
 

diff --git a/...sign-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v7-info.mdx b/...sign-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v7-info.mdx
@@ -34,7 +34,7 @@ v7 contains a couple of _breaking changes_. As a migration process, you can simp
 1. If you used `style_type`, like `<H1 style_type="small">` before, use rather `<H1 size="x-large">` and the same applies to `<P style_type="small">`, so use the `modifier` prop here `<P modifier="small">`
 1. **For UMD usage only** find `dnb-ui-lib.min.js` replace it with `dnb-ui-web-components.min.js`
 1. The [Anchor (Text link)](/uilib/components/anchor) has now also the default font-size of 18px (basis) - this means, you may have places where you would rather inherit the font-size by: `.dnb-anchor { font-size: inherit; }`
-1. New strings where added to the [language files](/uilib/usage/customisation/localization) `nb-NO.js` and `en-US.js`. If you have a customized localization ([changes or addition](https://gist.github.com/tujoworker/f754da1137507fdd5d4bb61949a92259/revisions)), then make sure you maintain these new groups of strings:
+1. New strings were added to the [language files](/uilib/usage/customisation/localization) `nb-NO.js` and `en-US.js`. If you have a customized localization ([changes or addition](https://gist.github.com/tujoworker/f754da1137507fdd5d4bb61949a92259/revisions)), then make sure you maintain these new groups of strings:
    - Autocomplete
    - Pagination
    - ProgressIndicator

diff --git a/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v9-info.mdx b/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v9-info.mdx
@@ -90,7 +90,7 @@ Removed already deprecated CSS properties (vars):
 
 ### Updates to the language files
 
-Strings where changed/removed and added to the [language files](/uilib/usage/customisation/localization) `nb-NO.js` and `en-GB.js`:
+Strings were changed/removed and added to the [language files](/uilib/usage/customisation/localization) `nb-NO.js` and `en-GB.js`:
 
 - NumberFormat (added)
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/Examples.tsx
@@ -192,3 +192,36 @@ export const AccordionDisabledExample = () => (
     </Accordion.Provider>
   </ComponentBox>
 )
+
+export const AccordionDescriptionExample = () => (
+  <ComponentBox data-visual-test="accordion-description">
+    <Accordion
+      expanded
+      title="Accordion title"
+      description="Accordion description"
+    >
+      <P>Accordion content</P>
+    </Accordion>
+    <Accordion
+      top
+      icon="chevron_down"
+      icon_position="right"
+      id="description-provider-accordion"
+      title="Accordion title"
+      description="Accordion description"
+    >
+      <P>Accordion content</P>
+    </Accordion>
+  </ComponentBox>
+)
+
+export const AccordionFilledExample = () => (
+  <ComponentBox data-visual-test="accordion-filled">
+    <Accordion expanded title="Accordion title" variant="filled">
+      <P>Accordion content</P>
+    </Accordion>
+    <Accordion top title="Accordion title" variant="filled">
+      <P>Accordion content</P>
+    </Accordion>
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/demos.mdx
@@ -11,6 +11,8 @@ import {
   AccordionNestedExample,
   AccordionPlainVariant,
   AccordionDisabledExample,
+  AccordionDescriptionExample,
+  AccordionFilledExample,
 } from 'Docs/uilib/components/accordion/Examples'
 
 ## Demos
@@ -25,7 +27,7 @@ import {
 
 ### Grouped Accordion
 
-**NB:** Please have a read on the [unexpected behavior](/uilib/components/accordion/info#unexpected-behavior) thoughts.
+**NB:** Please have a read on the [unexpected behavior](/uilib/components/accordion#unexpected-behavior) thoughts.
 
 <AccordionGroupExample />
 
@@ -46,3 +48,15 @@ import {
 Accordion can be disabled, though is not exactly defined what the use case is.
 
 <AccordionDisabledExample />
+
+### Variant `filled`
+
+<VisibilityByTheme visible="sbanken">
+  This variant does not have any different styling in the Sbanken theme.
+</VisibilityByTheme>
+
+<AccordionFilledExample />
+
+<VisibleWhenVisualTest>
+  <AccordionDescriptionExample />
+</VisibleWhenVisualTest>
diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/components/accordion/properties.mdx b/...ges/dnb-design-system-portal/src/docs/uilib/components/accordion/properties.mdx
@@ -15,7 +15,7 @@ These properties can send along with the `Accordion.Provider` or `Accordion.Grou
 | `remember_state`                        | _(optional)_ if set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.                                                                               |
 | `flush_remembered_state`                | _(optional)_ if set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.                                                                                                                  |
 | `no_animation`                          | _(optional)_ if set to `true`, the open and close animation will be omitted.                                                                                                                                                                 |
-| `variant`                               | _(optional)_ defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`.                                                                                                        |
+| `variant`                               | _(optional)_ defines the used styling. `outlined`, `filled`, or `plain`(no styling). Defaults to `outlined`.                                                                                                                                 |
 | `icon`                                  | _(optional)_ will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.                         |
 | `icon_position`                         | _(optional)_ will set the placement of the icon. Defaults to `left`.                                                                                                                                                                         |
 | `icon_size`                             | _(optional)_ define a different icon size. Defaults to `medium` (1.5rem).                                                                                                                                                                    |

diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/components/autocomplete/methods.mdx b/...ges/dnb-design-system-portal/src/docs/uilib/components/autocomplete/methods.mdx
@@ -7,8 +7,11 @@ You can manipulate the used data dynamically, either by changing the `data` prop
 - `updateData` replace all data entries.
 - `emptyData` remove all data entries.
 - `resetSelectedItem` will invalidate the selected key.
-- `revalidateSelectedItem` will re-validate the selected key on the given `value`.
+- `revalidateSelectedItem` will re-validate the internal selected key on the given `value`.
+- `revalidateInputValue` will re-validate the current input value and update it – based on the given `value`.
 - `setInputValue` update the input value.
+- `clearInputValue` will set the current input value to an empty string.
+- `focusInput` will set focus on the input element.
 - `showIndicator` shows a progress indicator instead of the icon (inside the input).
 - `hideIndicator` hides the progress indicator inside the input.
 - `showIndicatorItem` shows an item with a [ProgressIndicator](/uilib/components/progress-indicator) status as an data option item.

diff --git a/.../dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx b/.../dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx
@@ -19,6 +19,7 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below
 | `search_numbers`                                                 | _(optional)_ if set to `true` and `search_in_word_index` is not set, the user will be able to more easily search and filter e.g. bank account numbers. Defaults to `false`.                                                           |
 | `search_in_word_index`                                           | _(optional)_ this gives you the possibility to change the threshold number, which defines from what word on we search "inside words". Defaults to `3`.                                                                                |
 | `keep_value`                                                     | _(optional)_ use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur. Defaults to `false`. |
+| `keep_selection`                                                 | _(optional)_ use `true` to not remove selected item on input blur, when the input value is empty. Defaults to `false`.                                                                                                                |
 | `keep_value_and_selection`                                       | _(optional)_ like `keep_value` – but would not reset to the selected value during input field blur. Also, the selected value would still be kept. Defaults to `false`.                                                                |
 | `prevent_selection`                                              | _(optional)_ if set to `true`, no permanent selection will be made. Also, the typed value will not disappear on input blur (like `keep_value`). Defaults to `false`.                                                                  |
 | `show_clear_button`                                              | _(optional)_ if set to `true`, a clear button is shown inside the input field. Defaults to `false`.                                                                                                                                   |

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/badge.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/badge.mdx
@@ -1,7 +1,6 @@
 ---
 title: 'Badge'
 description: 'The Badge component allows the user to focus on new or unread content or notifications.'
-status: 'new'
 showTabs: true
 ---
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx
@@ -43,6 +43,19 @@ export const VerticalFields = () => {
   )
 }
 
+export const HorizontalFields = () => {
+  return (
+    <ComponentBox>
+      <Card>
+        <Flex.Horizontal>
+          <Field.String label="Label" value="Value" width="small" />
+          <Field.String label="Label" value="Value" width="stretch" />
+        </Flex.Horizontal>
+      </Card>
+    </ComponentBox>
+  )
+}
+
 export const WithHeadingsAndAriaLabel = () => {
   return (
     <ComponentBox hidePreview>

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx
@@ -14,6 +14,10 @@ import * as Examples from './Examples'
 
 <Examples.VerticalFields />
 
+### Horizontal fields
+
+<Examples.HorizontalFields />
+
 ### Stack
 
 <Examples.Stack />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx
@@ -8,7 +8,7 @@ import * as Examples from './Examples'
 
 `Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.
 
-It uses [Flex.Item](/uilib/layout/flex/item) under the hood. When one of these props where given, `stack`, `direction` or `spacing` – the [Flex.Container](/uilib/layout/flex/container) will be used.
+It uses [Flex.Item](/uilib/layout/flex/item) under the hood. When one of these props were given, `stack`, `direction` or `spacing` – the [Flex.Container](/uilib/layout/flex/container) will be used.
 
 **BETA:** The design is not 100% finalised and may change to be officially approved by UX through an RFC.
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox.mdx
@@ -2,6 +2,7 @@
 title: 'Checkbox'
 description: 'The Checkbox component is shown as a square box that is ticked (checked) when activated.'
 showTabs: true
+theme: 'sbanken'
 ---
 
 import CheckboxInfo from 'Docs/uilib/components/checkbox/info'

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/Examples.tsx
@@ -52,3 +52,14 @@ export const CheckboxDisabled = () => (
     <Checkbox checked disabled />
   </ComponentBox>
 )
+
+export const CheckboxWithErrorStates = () => (
+  <>
+    <ComponentBox data-visual-test="checkbox-error-unchecked">
+      <Checkbox label="Unchecked" status="error" />
+    </ComponentBox>
+    <ComponentBox data-visual-test="checkbox-error-checked">
+      <Checkbox label="Checked" status="error" checked />
+    </ComponentBox>
+  </>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/demos.mdx
@@ -9,6 +9,7 @@ import {
   CheckboxSuffix,
   CheckboxDifferentSizes,
   CheckboxDisabled,
+  CheckboxWithErrorStates,
 } from 'Docs/uilib/components/checkbox/Examples'
 
 ## Demos
@@ -38,3 +39,7 @@ As for now, there are two sizes. `medium` is the default size.
 ### Disabled checkbox
 
 <CheckboxDisabled />
+
+<VisibleWhenVisualTest>
+  <CheckboxWithErrorStates />
+</VisibleWhenVisualTest>
diff --git a/...s/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx b/...s/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx
@@ -45,7 +45,7 @@ import {
 | `label_sr_only`                         | _(optional)_ use `true` to make the label only readable by screen readers.                                                                                                                                                                                                                                                                                                           |
 | `shortcuts`                             | _(optional)_ gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.                                                                                                                                                                          |
 | `addon_element`                         | _(optional)_ gives you the possibility to inject a React element showing up over the footer. Use it to customize `shortcuts`.                                                                                                                                                                                                                                                        |
-| `input_element`                         | _(optional)_ gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => (<Return />)}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input. |
+| `input_element`                         | _(optional)_ gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => (<Return />)}`. Can also be used in circumstances where the `react-text-mask` should not be used, e.g. in testing environments. Defaults to custom masked input. |
 | `status`                                | _(optional)_ text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.                                                                                                                                                                                                                                 |
 | `status_state`                          | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.                                                                                                                                                                                                                                                                |
 | `status_props`                          | _(optional)_ use an object to define additional FormStatus properties.                                                                                                                                                                                                                                                                                                               |