diff --git a/packages/dnb-design-system-portal/src/docs/contribute.mdx b/packages/dnb-design-system-portal/src/docs/contribute.mdx
index 798650d66d7..c5a2d38ff87 100644
--- a/packages/dnb-design-system-portal/src/docs/contribute.mdx
+++ b/packages/dnb-design-system-portal/src/docs/contribute.mdx
@@ -5,7 +5,11 @@ description: 'Project overview, development guides, conventions etc.'
import { Button } from '@dnb/eufemia/src'
import Card from 'dnb-design-system-portal/src/shared/menu/Card'
-import { NewContributor, GettingStarted, Principles } from 'Docs/contribute/assets/graphics'
+import {
+ NewContributor,
+ GettingStarted,
+ Principles,
+} from 'Docs/contribute/assets/graphics'
# Contributing to Eufemia
diff --git a/packages/dnb-design-system-portal/src/docs/contribute/contact.mdx b/packages/dnb-design-system-portal/src/docs/contribute/contact.mdx
index 9127d9726e4..a947b430089 100644
--- a/packages/dnb-design-system-portal/src/docs/contribute/contact.mdx
+++ b/packages/dnb-design-system-portal/src/docs/contribute/contact.mdx
@@ -12,7 +12,9 @@ import { Button } from '@dnb/eufemia/src'
For all discussion topics, ask in Slack:
-
+
### Related channels in [DNB IT](https://dnb-it.slack.com)
diff --git a/packages/dnb-design-system-portal/src/docs/contribute/first-contribution.mdx b/packages/dnb-design-system-portal/src/docs/contribute/first-contribution.mdx
index 004e000719d..8cc4abddd09 100644
--- a/packages/dnb-design-system-portal/src/docs/contribute/first-contribution.mdx
+++ b/packages/dnb-design-system-portal/src/docs/contribute/first-contribution.mdx
@@ -13,7 +13,13 @@ import { Button, Blockquote, Section } from '@dnb/eufemia/src'
If you are new to the Eufemia Library, we would recommend following an intro to the elementary parts of Eufemia.
-
+
## Your first contribution
@@ -44,7 +50,13 @@ More information in [Style guides - Git convention](/contribute/style-guides/git
Have a look at the "before getting started" section for a description of technical details. In this section, you will find what packages are included, design decisions explained, the format of the component structure, what purpose different files have, what happens during a build, and the different development environments.
-
+
## What to expect from the maintainers
@@ -56,8 +68,18 @@ As of this date, there are only a few maintainers. That means you can expect **l
## Next step
-The best way to understand a project is to just jump on a real task. It is scary, but the easiest and quickest way of getting into a new project. Also, you should not be afraid of having an imperfect commit, that's really what pull requests are for!
-Dina, new contributor
+ The best way to understand a project is to just jump on a real task. It
+ is scary, but the easiest and quickest way of getting into a new project.
+ Also, you should not be afraid of having an imperfect commit, that's
+ really what pull requests are for!
+ Dina, new contributor
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/contribute/first-contribution/before-started.mdx b/packages/dnb-design-system-portal/src/docs/contribute/first-contribution/before-started.mdx
index 6870ad53b08..cf6037b9d28 100644
--- a/packages/dnb-design-system-portal/src/docs/contribute/first-contribution/before-started.mdx
+++ b/packages/dnb-design-system-portal/src/docs/contribute/first-contribution/before-started.mdx
@@ -194,7 +194,13 @@ Every component and extension should have a similar structure, as described here
As an example, we show the folder structure of component Breadcrumb. You can also check out the [source on Github](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/breadcrumb).
-
+
1. **`/__tests__`**: Contains the tests (`Breadcrumb.test.tsx`) and screenshot tests (`Breadcrumb.screenshot.test.tsx`) for the component. All screenshots will be placed within the folder `__snapshots__`.
1. **`/style`**: Contains the styling of the component. The file `_breadcrumb.scss` defines all styling using [BEM](http://getbem.com/naming/). `dnb-breadcrumb.scss` contains the component style exports.
diff --git a/packages/dnb-design-system-portal/src/docs/contribute/getting-started.mdx b/packages/dnb-design-system-portal/src/docs/contribute/getting-started.mdx
index b4370a9b2c1..6dea8533e27 100644
--- a/packages/dnb-design-system-portal/src/docs/contribute/getting-started.mdx
+++ b/packages/dnb-design-system-portal/src/docs/contribute/getting-started.mdx
@@ -15,7 +15,7 @@ import { Hr } from '@dnb/eufemia/src'
You are now ready to get started. Here you will find a step-by-step guide to making changes in the Eufemia repo.
If you are new to the repository, first check out [what I should know before getting started](/contribute/first-contribution#what-should-i-know-before-getting-started).
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/contribute/getting-started/clone-repo.mdx b/packages/dnb-design-system-portal/src/docs/contribute/getting-started/clone-repo.mdx
index 10be3a9d741..2b3fe678fa1 100644
--- a/packages/dnb-design-system-portal/src/docs/contribute/getting-started/clone-repo.mdx
+++ b/packages/dnb-design-system-portal/src/docs/contribute/getting-started/clone-repo.mdx
@@ -16,4 +16,8 @@ git clone https://github.com/dnbexperience/eufemia.git
- or **Fork** the repo by clicking `Fork` in the top right corner in [Eufemia on GitHub](https://github.com/dnbexperience/eufemia).
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/contribute/rules.mdx b/packages/dnb-design-system-portal/src/docs/contribute/rules.mdx
index ee0f22308ae..741b1db3b21 100644
--- a/packages/dnb-design-system-portal/src/docs/contribute/rules.mdx
+++ b/packages/dnb-design-system-portal/src/docs/contribute/rules.mdx
@@ -72,5 +72,11 @@ Anyone asked to stop unacceptable behavior is expected to comply immediately. If
You may use [this "reproduction" starter](!/issue) to reproduce the issue when reporting.
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/contribute/style-guides/git.mdx b/packages/dnb-design-system-portal/src/docs/contribute/style-guides/git.mdx
index a311fcdd12f..08f853ef6f0 100644
--- a/packages/dnb-design-system-portal/src/docs/contribute/style-guides/git.mdx
+++ b/packages/dnb-design-system-portal/src/docs/contribute/style-guides/git.mdx
@@ -83,10 +83,22 @@ git fetch origin && git rebase origin/main
When you have committed changes to your branch, go to [Github Pull Requests](https://github.com/dnbexperience/eufemia/pulls) and open a `New pull request`.
-
+
You will most likely get the yellow notification bar mentioning that a branch had a recent push. Click on the `Compare and pull request` button. This will take you to the page for opening a pull request. Fill out the template under the `Write tab`.
-
+
Request a reviewer, create the pull request and watch the results of the pipeline checks.
diff --git a/packages/dnb-design-system-portal/src/docs/contribute/style-guides/issues.mdx b/packages/dnb-design-system-portal/src/docs/contribute/style-guides/issues.mdx
index 8c06d1c8cef..7fbb77bef09 100644
--- a/packages/dnb-design-system-portal/src/docs/contribute/style-guides/issues.mdx
+++ b/packages/dnb-design-system-portal/src/docs/contribute/style-guides/issues.mdx
@@ -19,11 +19,22 @@ When reporting issues on GitHub, you need to have a [GitHub account](https://git
First step is to click on the `New issue` button in the `Issues tab` on GitHub.
-
+
The next step will show you all the possibilities for new issues. Create a new `Bug Report` or a `Feature Proposal` to go next.
-
+
These will each have a prepared template you need to fill out in order to submit your issue.
diff --git a/packages/dnb-design-system-portal/src/docs/icons.mdx b/packages/dnb-design-system-portal/src/docs/icons.mdx
index 711d566ebd9..aadcfb6f7d1 100644
--- a/packages/dnb-design-system-portal/src/docs/icons.mdx
+++ b/packages/dnb-design-system-portal/src/docs/icons.mdx
@@ -4,7 +4,7 @@ description: 'List of all Eufemia icons.'
order: 1
---
-import ListAllIcons from "dnb-design-system-portal/src/shared/parts/icons/ListAllIcons";
+import ListAllIcons from 'dnb-design-system-portal/src/shared/parts/icons/ListAllIcons'
# Icons
diff --git a/packages/dnb-design-system-portal/src/docs/icons/form-status.mdx b/packages/dnb-design-system-portal/src/docs/icons/form-status.mdx
index a393f5ea653..c400c055ab2 100644
--- a/packages/dnb-design-system-portal/src/docs/icons/form-status.mdx
+++ b/packages/dnb-design-system-portal/src/docs/icons/form-status.mdx
@@ -1,4 +1,9 @@
-import { InfoIcon, WarnIcon, ErrorIcon, MarketingIcon} from '@dnb/eufemia/src/components/form-status/FormStatus'
+import {
+ InfoIcon,
+ WarnIcon,
+ ErrorIcon,
+ MarketingIcon,
+} from '@dnb/eufemia/src/components/form-status/FormStatus'
## Use the [**FormStatus**](/uilib/components/form-status) icons only
diff --git a/packages/dnb-design-system-portal/src/docs/icons/primary.mdx b/packages/dnb-design-system-portal/src/docs/icons/primary.mdx
index b07ea516312..a7fcd07547f 100644
--- a/packages/dnb-design-system-portal/src/docs/icons/primary.mdx
+++ b/packages/dnb-design-system-portal/src/docs/icons/primary.mdx
@@ -5,7 +5,7 @@ icon: 'primary'
order: 2
---
-import ListAllIcons from "dnb-design-system-portal/src/shared/parts/icons/ListAllIcons";
+import ListAllIcons from 'dnb-design-system-portal/src/shared/parts/icons/ListAllIcons'
# Primary Icons
diff --git a/packages/dnb-design-system-portal/src/docs/icons/secondary.mdx b/packages/dnb-design-system-portal/src/docs/icons/secondary.mdx
index e2e8bb4ae16..7075075255f 100644
--- a/packages/dnb-design-system-portal/src/docs/icons/secondary.mdx
+++ b/packages/dnb-design-system-portal/src/docs/icons/secondary.mdx
@@ -5,7 +5,7 @@ icon: 'secondary'
order: 3
---
-import ListAllIcons from "dnb-design-system-portal/src/shared/parts/icons/ListAllIcons";
+import ListAllIcons from 'dnb-design-system-portal/src/shared/parts/icons/ListAllIcons'
# Secondary Icons
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/inspiration.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/inspiration.mdx
index e9c7e85e2ea..48850e1ef61 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/inspiration.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/inspiration.mdx
@@ -15,10 +15,18 @@ Be aware that the default text styling in Eufemia does not include top and botto
The first image below shows how the final form looks. The second image highlights some of the vertical and horizontal spacing in the design.
-
+
## Using Eufemia's spatial system for layout
Even though there is a lot of freedom built into the Eufemia system regarding how UI layout designs should be, it is recommended to use the standard spacers found in the Eufemia library to attain a visually consistent look. The example above is laid out with the standard spacers and these are highlighted in the duplicate example below:
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/naming-conventions.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/naming-conventions.mdx
index c2615b69af3..24b95fd383d 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/naming-conventions.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/naming-conventions.mdx
@@ -16,11 +16,19 @@ import TablesSpace from 'Docs/quickguide-designer/assets/tables-space.svg'
Eufemia makes use of a very simple 8px unit grid. Margins, paddings, and distances consist of multiples of 8 (mostly - sometimes half and quarter units are required). If we were to combine multiples of this 8px 'space block', we could end up with something like this:
-
+
These titles can then be transferred to components, for example, tables. A 'medium' table would refer to the amount of padding in the cells.
-
+
The same can apply to components such as cards, form rows, etc. Responsive breakpoints can switch between these spacing units to expand or contract the overall size of an object.
@@ -28,9 +36,7 @@ The same can apply to components such as cards, form rows, etc. Responsive break
Eufemia for the web uses a simple naming system:
-
-Color name + percentage
-
+
Color name + percentage
Depending on where the color will be used, its name formation will be different. For example, in Figma (and other design tools), the name is constructed thus:
@@ -38,15 +44,11 @@ The color name is written with spaces between words. The first word starts with
Example:
-
-Fire red 8%
-
+
Fire red 8%
Whereas in CSS as a custom property this is written:
-
---color-fire-red-8
-
+
--color-fire-red-8
Colors have a naming convention across all platforms and formats. Please refer to the table in [colors section](/quickguide-designer/colors).
@@ -60,22 +62,16 @@ However, to maintain consistency, in Figma we name Pages and Frames (canvases) w
Example of a Figma Page name:
-
-04 Spacing & Common components
-
+
04 Spacing & Common components
Example of a Figma Frame name:
-
-02 Spacing components - horizontal
-
+
02 Spacing components - horizontal
Actual components are written with all small letters.
Example of a Figma component name:
-
-date picker
-
+
date picker
If in doubt, look at the main Eufemia file - [Eufemia - Web](https://www.figma.com/file/cdtwQD8IJ7pTeE45U148r1/Eufemia-Web?node-id=530%3A49).
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/spatial-system.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/spatial-system.mdx
index 24d095973bc..1028984a7bc 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/spatial-system.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/spatial-system.mdx
@@ -34,7 +34,11 @@ It is simple and consistent whilst allowing for some design freedom.
**NB!** All unitless measurements in the following illustrations are multiples of 8px (for example: x2 means two 8px units)
-
+
### Line-height % Grid base unit = 0
@@ -48,7 +52,11 @@ Applying the 8px base system to as much as possible within UI design means that
Sometimes 8 is not small enough or too big. Line thicknesses and borders are usually 1-2px in thickness. When we encounter situations where lines may 'throw' the layout off the grid, we can compensate by removing these line thicknesses from the padding or margin of the neighbouring element.
-
+
### Calculating line thickness v. the 8px grid
@@ -72,7 +80,11 @@ In this case **line-height / 8** is equal to 3 (24 / 8 = 3)
The same process should be applied in dealing with divider lines.
Horizontal rules and other dividing mechanisms usually have some margin or padding around them. Remove the lines thickness from the padding or margin (above or below), to maintain the baseline grid.
-
+
## Why do we need a spatial system?
@@ -81,9 +93,18 @@ Space affects consistency, usability, readability, and ultimately the user exper
A good spatial system takes some of the guesswork out of layout decisions for designers and developers. It also makes it's easier for others to understand the intentions of the designer when viewing design files.
In the example below, a viewer informed of the spatial system could easily assume that the colored line thicknesses are 8px, 16px, and 24px respectively, and not 'odd' numbers like 7, 13, and 25.
-
-
+
+
+
## Principles
@@ -108,17 +129,29 @@ Use margins to create space between elements. Objects which allow interaction by
Set margins based on one or more spatial blocks.
Margins do not have to be equal on all sides of an object. Margins between related objects can be reduced to position them closer together.
-
+
### 2. Padding
Padding refers to the space **within** an object.
-
+
Padding can be used to 'inflate' the' bounding or 'hit area' of objects, or make it larger without scaling its internal parts.
-
+
### 3. Z-index
@@ -126,19 +159,31 @@ Z-index spacing refers to space along the z-axis of an interface. It is not used
In the example below the shadow on the left is used for modal windows whereas the shadow on the right is used for open elements and components such as date pickers and dropdowns.
-
+
### 4. Extents
Extents refer to the amount of space available on displays and how much of it the content should take up. Ideal line length at default text-size (16px) is about 11-12 words. On larger displays, this can create vast areas of white space on the sides while still requiring the user to scroll. Use breakpoints to decide if multiple columns of content are a better way to present the content.
-
+
### 5. Space within elements
This relates to the amount of inner space an object has. It has similarities to padding but also deals with small intricate cavities especially in graphic elements such as icons. When icons are resized down they sometimes lose some of their details and legibility.
-
+
### 6. Typography
@@ -150,7 +195,11 @@ Eufemia typographic rules are built on the same units of measurement (multiples
The Eufemia type scale should be limited to **12px, 14px, 16px, 18px, 24px, 32px**. Larger sizes can be used but must follow the sizing and spacing rules.
-
+
For those familiar with CSS, we establish typographic rules in the following way:
@@ -175,7 +224,11 @@ For those familiar with CSS, we establish typographic rules in the following way
A spatial system and a grid system are two different things. A grid is a component that _uses_ space.
The Eufemia Spatial System is a very simple set of ’space-blocks’ than _create_ space - akin to the leading slugs in a typesetters frame.
-
+
A _grid system_ is typically a more elaborate set of containers that divide the UI into sections with margins and gutters between them. Eufemia's spatial system is a simple guide for space and type set around the 8px base unit.
@@ -209,7 +262,11 @@ When designing with type, there may sometimes be small discrepancies between the
To see how type is rendered in the browser and view the space it uses, toggle the grid view in the top right of this document.
-
+
In the image above the heading with the blue background is how Figma shows the space the heading uses. The heading with the yellow background is how the browser (Chrome) renders and shows the space taken up. Note the space above the first letter 'T'. In Figma this is 2 pixels whereas in Chrome it is 6 pixels.
@@ -217,7 +274,11 @@ In the image above the heading with the blue background is how Figma shows the s
The Eufemia Figma library contains a set of standard spacing components that can be very helpful when laying out user interfaces, web pages etc.:
-
+
Layout design is not limited to these selected sizing blocks. If you need more space than the blocks provide simply add it in multiples of **8 pixels**, but don't stretch the components as another designer or developer may simply glance at the space component and read its label assuming it is exactly as large it was when created.
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
index bdedcf4b875..4465224c886 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
@@ -8,12 +8,11 @@ The default font family for all web applications is the `DNB` font.
- Here is a paragraph with some nonsense lipsum text. Contrary to
- popular belief, Lorem Ipsum passage, and going through the cites
- of the word in classical literature, discovered the undoubtable
- source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
- "de Finibus Bonorum et Malorum" (The Extremes of Good
- and Evil) by Cicero, written in 45 BC.
+ Here is a paragraph with some nonsense lipsum text. Contrary to popular
+ belief, Lorem Ipsum passage, and going through the cites of the word in
+ classical literature, discovered the undoubtable source. Lorem Ipsum
+ comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+ Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
@@ -21,12 +20,11 @@ The default font family for all web applications is the `DNB` font.
- Here is a paragraph with some nonsense lipsum text. Contrary to
- popular belief, Lorem Ipsum passage, and going through the cites
- of the word in classical literature, discovered the undoubtable
- source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
- "de Finibus Bonorum et Malorum" (The Extremes of Good
- and Evil) by Cicero, written in 45 BC.
+ Here is a paragraph with some nonsense lipsum text. Contrary to popular
+ belief, Lorem Ipsum passage, and going through the cites of the word in
+ classical literature, discovered the undoubtable source. Lorem Ipsum
+ comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+ Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
@@ -34,12 +32,11 @@ The default font family for all web applications is the `DNB` font.
- Here is a paragraph with some nonsense lipsum text. Contrary to
- popular belief, Lorem Ipsum passage, and going through the cites
- of the word in classical literature, discovered the undoubtable
- source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
- "de Finibus Bonorum et Malorum" (The Extremes of Good
- and Evil) by Cicero, written in 45 BC.
+ Here is a paragraph with some nonsense lipsum text. Contrary to popular
+ belief, Lorem Ipsum passage, and going through the cites of the word in
+ classical literature, discovered the undoubtable source. Lorem Ipsum
+ comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+ Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
@@ -47,11 +44,10 @@ The default font family for all web applications is the `DNB` font.
- Here is a paragraph with some nonsense lipsum text. Contrary to
- popular belief, Lorem Ipsum passage, and going through the cites
- of the word in classical literature, discovered the undoubtable
- source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
- "de Finibus Bonorum et Malorum" (The Extremes of Good
- and Evil) by Cicero, written in 45 BC.
+ Here is a paragraph with some nonsense lipsum text. Contrary to popular
+ belief, Lorem Ipsum passage, and going through the cites of the word in
+ classical literature, discovered the undoubtable source. Lorem Ipsum
+ comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+ Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
index ce8cb859f70..f5d55fac960 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
@@ -9,12 +9,11 @@ no need to use a class.
- Here is a paragraph with some nonsense lipsum text. Contrary to
- popular belief, Lorem Ipsum passage, and going through the cites of
- the word in classical literature, discovered the undoubtable
- source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
- "de Finibus Bonorum et Malorum" (The Extremes of Good and
- Evil) by Cicero, written in 45 BC.
+ Here is a paragraph with some nonsense lipsum text. Contrary to popular
+ belief, Lorem Ipsum passage, and going through the cites of the word in
+ classical literature, discovered the undoubtable source. Lorem Ipsum
+ comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+ Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
@@ -22,12 +21,11 @@ no need to use a class.
- Here is a paragraph with some nonsense lipsum text. Contrary to
- popular belief, Lorem Ipsum passage, and going through the cites of
- the word in classical literature, discovered the undoubtable
- source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
- "de Finibus Bonorum et Malorum" (The Extremes of Good and
- Evil) by Cicero, written in 45 BC.
+ Here is a paragraph with some nonsense lipsum text. Contrary to popular
+ belief, Lorem Ipsum passage, and going through the cites of the word in
+ classical literature, discovered the undoubtable source. Lorem Ipsum
+ comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+ Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
@@ -35,11 +33,10 @@ no need to use a class.
- Here is a paragraph with some nonsense lipsum text. Contrary to
- popular belief, Lorem Ipsum passage, and going through the cites of
- the word in classical literature, discovered the undoubtable
- source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
- "de Finibus Bonorum et Malorum" (The Extremes of Good and
- Evil) by Cicero, written in 45 BC.
+ Here is a paragraph with some nonsense lipsum text. Contrary to popular
+ belief, Lorem Ipsum passage, and going through the cites of the word in
+ classical literature, discovered the undoubtable source. Lorem Ipsum
+ comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+ Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/line-height.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/line-height.mdx
index 922b58d9ece..6af1abb32a4 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/line-height.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/line-height.mdx
@@ -7,14 +7,18 @@ When line heights are multiples of 8px (0.5rem), they will cause the content blo
### These break _*neatly*_ on the grid (line heights 1rem, 1.5rem and 2rem)
Because their line-height **is** evenly divisible by 8.
+
### Line height = 1rem (16px)
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
- ne primis intellegat. Dico purto nullam sea an.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
+ Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
+ Dico purto nullam sea an.
@@ -22,8 +26,11 @@ Because their line-height **is** evenly divisible by 8.
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
- ne primis intellegat. Dico purto nullam sea an.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
+ Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
+ Dico purto nullam sea an.
@@ -31,8 +38,11 @@ Because their line-height **is** evenly divisible by 8.
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
- ne primis intellegat. Dico purto nullam sea an.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
+ Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
+ Dico purto nullam sea an.
@@ -45,8 +55,11 @@ Try resizing the browser - you will see the 'off-grid' result.
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
- ne primis intellegat. Dico purto nullam sea an.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
+ Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
+ Dico purto nullam sea an.
@@ -54,8 +67,11 @@ Try resizing the browser - you will see the 'off-grid' result.
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
- ne primis intellegat. Dico purto nullam sea an.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
+ Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
+ Dico purto nullam sea an.
@@ -63,7 +79,10 @@ Try resizing the browser - you will see the 'off-grid' result.
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
- ne primis intellegat. Dico purto nullam sea an.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
+ Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
+ Dico purto nullam sea an.
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx
index 1060362b605..1c7fe44f7eb 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx
@@ -19,7 +19,9 @@ This is an overview of the default, basic typographic elements such as **heading
Quem facilisi moderatius id eam, id tamquam albucius per.
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim.
@@ -38,11 +40,14 @@ This is an overview of the default, basic typographic elements such as **heading
- This part is small facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire
+ This part is small facilisi moderatius id eam, id tamquam albucius
+ per. Vel quem congue appareat cu, mei te eros convenire
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim.
@@ -60,10 +65,14 @@ This is an overview of the default, basic typographic elements such as **heading
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro.
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim.
@@ -81,11 +90,16 @@ This is an overview of the default, basic typographic elements such as **heading
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
- ne primis intellegat. Dico purto nullam sea an.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
+ Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
+ Dico purto nullam sea an.
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim.
@@ -102,11 +116,16 @@ This is an overview of the default, basic typographic elements such as **heading
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
- ne primis intellegat. Dico purto nullam sea an.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
+ Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
+ Dico purto nullam sea an.
- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
+ Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+ congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
+ exerci tacimates pro, aliquam pertinacia eu vim.
@@ -127,11 +146,18 @@ There are two methods to create small text. One, is to use the `.dnb-p--small` m
- This is a paragraph with a modifier class. This is the small content. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
+ This is a paragraph with a modifier class. This is the small
+ content. Quem facilisi moderatius id eam, id tamquam albucius per. Vel
+ quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea,
+ ei exerci tacimates pro, aliquam pertinacia eu vim.
- This is a paragraph with a small tag inserted here: this is the small content. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
+ This is a paragraph with a small tag inserted here: this is
+ the small content. Quem facilisi moderatius id eam, id tamquam
+ albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea
+ bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu
+ vim.
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
index 7daa2be73ba..a30cb035d25 100644
--- 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
@@ -3,13 +3,13 @@ showTabs: true
---
import {
-AccordionDefaultExample,
-AccordionLargeContentExample,
-AccordionCustomisationExample,
-AccordionContainerExample,
-AccordionGroupExample,
-AccordionNestedExample,
-AccordionPlainVariant,
+ AccordionDefaultExample,
+ AccordionLargeContentExample,
+ AccordionCustomisationExample,
+ AccordionContainerExample,
+ AccordionGroupExample,
+ AccordionNestedExample,
+ AccordionPlainVariant,
} from 'Docs/uilib/components/accordion/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.mdx
index b2d7fcc707d..043559acbd6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.mdx
@@ -3,17 +3,17 @@ showTabs: true
---
import {
-AutocompleteDefaultExample,
-AutocompleteNumbersExample,
-AutocompleteWithCustomTitle,
-AutocompleteDynamicallyUpdatedData,
-AutocompleteFirstFocusUpdate,
-AutocompleteToggleExample,
-AutocompletePredefinedInput,
-AutocompleteDifferentSizes,
-AutocompleteCustomWidth,
-AutocompleteSuffix,
-AutocompleteStatusExample,
+ AutocompleteDefaultExample,
+ AutocompleteNumbersExample,
+ AutocompleteWithCustomTitle,
+ AutocompleteDynamicallyUpdatedData,
+ AutocompleteFirstFocusUpdate,
+ AutocompleteToggleExample,
+ AutocompletePredefinedInput,
+ AutocompleteDifferentSizes,
+ AutocompleteCustomWidth,
+ AutocompleteSuffix,
+ AutocompleteStatusExample,
} from 'Docs/uilib/components/autocomplete/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/visual-tests.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/visual-tests.mdx
index 7b52e341bc6..4bf49381362 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/visual-tests.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/visual-tests.mdx
@@ -3,8 +3,8 @@ draft: true
---
import {
-AutocompleteOpened,
-AutocompleteDisabledExample,
+ AutocompleteOpened,
+ AutocompleteDisabledExample,
} from 'Docs/uilib/components/autocomplete/Examples'
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/avatar/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/avatar/demos.mdx
index bc5ff09757f..49c045a1cb8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/avatar/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/avatar/demos.mdx
@@ -3,28 +3,28 @@ showTabs: true
---
import {
-AvatarSizeDefault,
-AvatarSizeSmall,
-AvatarSizeMedium,
-AvatarSizeLarge,
-AvatarSizeXLarge,
-AvatarVariantDefault,
-AvatarVariantPrimary,
-AvatarVariantSecondary,
-AvatarVariantTertiary,
-AvatarConfettiIcon,
-AvatarCardIcon,
-AvatarAccountCardIcon,
-AvatarDNBLogo,
-AvatarImageDNB,
-AvatarImageTobias,
-AvatarImagePinnedTab,
-AvatarImageProps,
-GroupedAvatarsSmall,
-GroupedAvatarsMedium,
-GroupedAvatarsLarge,
-GroupedAvatarsXLarge,
-GroupedAvatarsImg
+ AvatarSizeDefault,
+ AvatarSizeSmall,
+ AvatarSizeMedium,
+ AvatarSizeLarge,
+ AvatarSizeXLarge,
+ AvatarVariantDefault,
+ AvatarVariantPrimary,
+ AvatarVariantSecondary,
+ AvatarVariantTertiary,
+ AvatarConfettiIcon,
+ AvatarCardIcon,
+ AvatarAccountCardIcon,
+ AvatarDNBLogo,
+ AvatarImageDNB,
+ AvatarImageTobias,
+ AvatarImagePinnedTab,
+ AvatarImageProps,
+ GroupedAvatarsSmall,
+ GroupedAvatarsMedium,
+ GroupedAvatarsLarge,
+ GroupedAvatarsXLarge,
+ GroupedAvatarsImg,
} from 'Docs/uilib/components/avatar/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/badge/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/badge/demos.mdx
index dc90ef06e28..f77485700a8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/badge/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/badge/demos.mdx
@@ -3,18 +3,18 @@ showTabs: true
---
import {
-BadgeNotification,
-BadgeNotificationInline,
-BadgeNotificationAvatar,
-BadgeDefault,
-BadgeInformationInline,
-BadgeInformationAvatar,
-BadgeTopLeft,
-BadgeTopRight,
-BadgeBottomLeft,
-BadgeBottomRight,
-BadgeImgWithIcon,
-BadgeMailIcon
+ BadgeNotification,
+ BadgeNotificationInline,
+ BadgeNotificationAvatar,
+ BadgeDefault,
+ BadgeInformationInline,
+ BadgeInformationAvatar,
+ BadgeTopLeft,
+ BadgeTopRight,
+ BadgeBottomLeft,
+ BadgeBottomRight,
+ BadgeImgWithIcon,
+ BadgeMailIcon,
} from 'Docs/uilib/components/badge/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/demos.mdx
index 015cc0f4b2b..b420b5fe52f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/demos.mdx
@@ -3,11 +3,11 @@ showTabs: true
---
import {
-BreadcrumbSingle,
-BreadcrumbMultiple,
-BreadcrumbMultipleData,
-BreadcrumbVariants,
-BreadcrumbCollapseOpen
+ BreadcrumbSingle,
+ BreadcrumbMultiple,
+ BreadcrumbMultipleData,
+ BreadcrumbVariants,
+ BreadcrumbCollapseOpen,
} from 'Docs/uilib/components/breadcrumb/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx
index f458f8014c7..46ae8068b95 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx
@@ -3,22 +3,22 @@ showTabs: true
---
import {
-ButtonPrimary,
-ButtonSecondary,
-ButtonDisabled,
-ButtonPrimaryWithIcon,
-ButtonPrimaryWithIconLeft,
-ButtonTertiary,
-ButtonTertiaryTop,
-ButtonTertiaryWrap,
-ButtonAnchor,
-ButtonCustomContent,
-ButtonSignal,
-ButtonSignalLarge,
-ButtonIcon,
-ButtonStretch,
-TertiaryWithNoIcon,
-UnstyledVariant,
+ ButtonPrimary,
+ ButtonSecondary,
+ ButtonDisabled,
+ ButtonPrimaryWithIcon,
+ ButtonPrimaryWithIconLeft,
+ ButtonTertiary,
+ ButtonTertiaryTop,
+ ButtonTertiaryWrap,
+ ButtonAnchor,
+ ButtonCustomContent,
+ ButtonSignal,
+ ButtonSignalLarge,
+ ButtonIcon,
+ ButtonStretch,
+ TertiaryWithNoIcon,
+ UnstyledVariant,
} from 'Docs/uilib/components/button/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/button/info.mdx
index 69a8b006413..d0ad1077526 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/button/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/button/info.mdx
@@ -2,7 +2,13 @@
showTabs: true
---
-import { PrimaryButtonSizes, SecondaryButtonSizes, TertiaryButtonSizes, SignalButtonSizes, IconButtonSizes } from 'Docs/uilib/components/button/Examples'
+import {
+ PrimaryButtonSizes,
+ SecondaryButtonSizes,
+ TertiaryButtonSizes,
+ SignalButtonSizes,
+ IconButtonSizes,
+} from 'Docs/uilib/components/button/Examples'
## Description
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
index 85c81f17d7d..9eb6b646d0f 100644
--- 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
@@ -3,12 +3,12 @@ showTabs: true
---
import {
-CheckboxUnchecked,
-CheckboxChecked,
-CheckboxWithError,
-CheckboxSuffix,
-CheckboxDifferentSizes,
-CheckboxDisabled
+ CheckboxUnchecked,
+ CheckboxChecked,
+ CheckboxWithError,
+ CheckboxSuffix,
+ CheckboxDifferentSizes,
+ CheckboxDisabled,
} from 'Docs/uilib/components/checkbox/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.mdx
index 7ba5f17aa45..db26f5fe803 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.mdx
@@ -3,19 +3,19 @@ showTabs: true
---
import {
-DatePickerRange,
-DatePickerTrigger,
-DatePickerWithInput,
-DatePickerHiddenNav,
-DatePickerMonthOnly,
-DatePickerDisabled,
-DatePickerSuffix,
-DatePickerLinked,
-DatePickerNoInputStatus,
-DatePickerErrorMessage,
-DatePickerErrorStatus,
-DatePickerCalendar,
-DatePickerScreenshotTests,
+ DatePickerRange,
+ DatePickerTrigger,
+ DatePickerWithInput,
+ DatePickerHiddenNav,
+ DatePickerMonthOnly,
+ DatePickerDisabled,
+ DatePickerSuffix,
+ DatePickerLinked,
+ DatePickerNoInputStatus,
+ DatePickerErrorMessage,
+ DatePickerErrorStatus,
+ DatePickerCalendar,
+ DatePickerScreenshotTests,
} from 'Docs/uilib/components/date-picker/Examples'
import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/events.mdx
index 9c47abcc78a..cfdbd7e5cd8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/events.mdx
@@ -13,7 +13,7 @@ showTabs: true
| `on_reset` | _(optional)_ will be called once a user presses the reset button. |
| `on_show` | _(optional)_ will be called once date-picker is visible. |
| `on_hide` | _(optional)_ will be called once date-picker is hidden. |
-| `on_days_render` | _(optional)_ will be called right before every new calendar view gets rendered. See the example above. |
+| `on_days_render` | _(optional)_ will be called right before every new calendar view gets rendered. See the example above. |
## Returned Object
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/demos.mdx
index b8f6c60a230..8e6648ee9a0 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/demos.mdx
@@ -3,18 +3,18 @@ showTabs: true
---
import {
-DialogExampleDefault,
-DialogExampleHelpButton,
-DialogExampleFullscreen,
-DialogExampleDelayClose,
-DialogExampleCustomTrigger,
-DialogExampleProgressIndicator,
-FullDialogExample,
-DialogConfirmDefault,
-DialogConfirmDelete,
-DialogConfirmLoggedOut,
-DialogConfirmCookies,
-DialogConfirmScrollableContent,
+ DialogExampleDefault,
+ DialogExampleHelpButton,
+ DialogExampleFullscreen,
+ DialogExampleDelayClose,
+ DialogExampleCustomTrigger,
+ DialogExampleProgressIndicator,
+ FullDialogExample,
+ DialogConfirmDefault,
+ DialogConfirmDelete,
+ DialogConfirmLoggedOut,
+ DialogConfirmCookies,
+ DialogConfirmScrollableContent,
} from 'Docs/uilib/components/dialog/Examples'
## Table of contents
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/info.mdx
index 31562724406..c401a2147a3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/info.mdx
@@ -14,8 +14,20 @@ The Dialog component is a [Modal](/uilib/components/modal) variation that appear
There are two variants of the Dialog component: `information` and `confirmation`.
-
-
+
+
The informational variant (`information`) is used for informational purposes, for example explaining a word/something on the page. It has to be triggered by the user to appear. Typical usage for it would be to read an explanation, then closing it.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx
index d2b8f43dca7..aa74c2072a4 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx
@@ -3,13 +3,13 @@ showTabs: true
---
import {
-SimpleDrawerExample,
-FullDrawerExample,
-FullscreenDrawerExample,
-LeftPlacementDrawerExample,
-DrawerCallbackExample,
-DrawerCustomTriggerExample,
-DrawerNoAnimationNoSpacing,
+ SimpleDrawerExample,
+ FullDrawerExample,
+ FullscreenDrawerExample,
+ LeftPlacementDrawerExample,
+ DrawerCallbackExample,
+ DrawerCustomTriggerExample,
+ DrawerNoAnimationNoSpacing,
} from 'Docs/uilib/components/drawer/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/hidden-tests.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/hidden-tests.mdx
index 6eba4d2c4a1..73d33b81c2c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/hidden-tests.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/hidden-tests.mdx
@@ -2,8 +2,6 @@
draft: true
---
-import {
-DrawerScrollViewSetup,
-} from 'Docs/uilib/components/drawer/visual-tests/Examples'
+import { DrawerScrollViewSetup } from 'Docs/uilib/components/drawer/visual-tests/Examples'
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/demos.mdx
index e60810ff789..66c006e98aa 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/demos.mdx
@@ -3,21 +3,21 @@ showTabs: true
---
import {
-DropdownFind,
-DropdownNoValue,
-DropdownDirections,
-DropdownIconLeft,
-DropdownActionMenu,
-DropdownTertiary,
-DropdownMoreMenu,
-DropdownDisabled,
-DropdownCustomEvent,
-DropdownSizes,
-DropdownCustomWidth,
-DropdownStatusVertical,
-DropdownListOpened,
-DropdownDisabledTertiary,
-DropdownEllipsisOverflow,
+ DropdownFind,
+ DropdownNoValue,
+ DropdownDirections,
+ DropdownIconLeft,
+ DropdownActionMenu,
+ DropdownTertiary,
+ DropdownMoreMenu,
+ DropdownDisabled,
+ DropdownCustomEvent,
+ DropdownSizes,
+ DropdownCustomWidth,
+ DropdownStatusVertical,
+ DropdownListOpened,
+ DropdownDisabledTertiary,
+ DropdownEllipsisOverflow,
} from 'Docs/uilib/components/dropdown/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/demos.mdx
index cc600149303..5b7a319e848 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/demos.mdx
@@ -3,10 +3,10 @@ showTabs: true
---
import {
-FormLabelDefaultExample,
-FormLabelVerticalExample,
-FormLabelNoForIdExample,
-FormLabelLinkedLabelExample,
+ FormLabelDefaultExample,
+ FormLabelVerticalExample,
+ FormLabelNoForIdExample,
+ FormLabelLinkedLabelExample,
} from 'Docs/uilib/components/form-label/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.mdx
index 6c3b3b2304f..887a37b8572 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.mdx
@@ -6,7 +6,7 @@ showTabs: true
| Properties | Description |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `for_id` | _(required)_ the `id` of the input. |
+| `for_id` | _(required)_ the `id` of the input. |
| `vertical` | _(optional)_ will force both `direction` and `label_direction` to be **vertical** if set to `true`. |
| `title` | _(optional)_ the `title` attribute of the label. |
| `text` | _(optional)_ the `text` of the label. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/demos.mdx
index 7661f147f60..a4ce095f6bf 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/demos.mdx
@@ -3,17 +3,17 @@ showTabs: true
---
import FormRowVisualTests, {
-FormRowVerticalAlignedLabels,
-FormRowSectionStyle,
-FormRowCombineVerticalAndHorizontal,
-FormRowDefault,
-FormRowVertical,
-FormRowVerticalDirection,
-FormRowNoWrap,
-FormRowWrap,
-FormRowLegendUsage,
-FormRowInheritContext,
-FormRowDifferentDirections,
+ FormRowVerticalAlignedLabels,
+ FormRowSectionStyle,
+ FormRowCombineVerticalAndHorizontal,
+ FormRowDefault,
+ FormRowVertical,
+ FormRowVerticalDirection,
+ FormRowNoWrap,
+ FormRowWrap,
+ FormRowLegendUsage,
+ FormRowInheritContext,
+ FormRowDifferentDirections,
} from 'Docs/uilib/components/form-row/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/info.mdx
index 3978ca5dca9..525b2794c7c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/info.mdx
@@ -3,12 +3,12 @@ showTabs: true
---
import {
-FormRowLabelDirectionInfo,
-FormRowDirectionInfo,
-FormRowVerticalInfo,
-FormRowDefaultInfo,
-FormRowSpacingInfo,
-FormRowResponsiveInfo
+ FormRowLabelDirectionInfo,
+ FormRowDirectionInfo,
+ FormRowVerticalInfo,
+ FormRowDefaultInfo,
+ FormRowSpacingInfo,
+ FormRowResponsiveInfo,
} from 'Docs/uilib/components/form-row/Examples'
## Description
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/events.mdx
index 2383a49eeea..ae925569de9 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/events.mdx
@@ -4,6 +4,6 @@ showTabs: true
## Events
-| Events | Description |
-| ----------- | --------------------------------------------------------------------------------------------- |
+| Events | Description |
+| ----------- | ----------------------------------------------------------------------------------------- |
| `on_submit` | _(optional)_ will be called on submit. Returns an object with a native event: `{ event }` |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/demos.mdx
index 757a9396d29..ee199b61c78 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/demos.mdx
@@ -5,15 +5,15 @@ redirect_from:
---
import {
-FormStatusDefault,
-FormStatusWithInfo,
-FormStatusWithStretch,
-FormStatusWithWarn,
-FormStatusWithMarketing,
-FormStatusInput,
-FormStatusCustom,
-FormStatusLarge,
-FormStatusWithIcons,
+ FormStatusDefault,
+ FormStatusWithInfo,
+ FormStatusWithStretch,
+ FormStatusWithWarn,
+ FormStatusWithMarketing,
+ FormStatusInput,
+ FormStatusCustom,
+ FormStatusLarge,
+ FormStatusWithIcons,
} from 'Docs/uilib/components/form-status/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.mdx
index 32cb1d65093..97690b4231c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.mdx
@@ -6,19 +6,19 @@ redirect_from:
## Properties
-| Properties | Description |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `text` or `children` | _(optional)_ the `text` appears as the status message. Beside plain text, You can send in a React component as well. |
-| `title` | _(optional)_ the `title` attribute in the status. |
-| `role` | _(optional)_ the `role` attribute for accessibility, defaults to `alert` |
+| Properties | Description |
+| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `text` or `children` | _(optional)_ the `text` appears as the status message. Beside plain text, You can send in a React component as well. |
+| `title` | _(optional)_ the `title` attribute in the status. |
+| `role` | _(optional)_ the `role` attribute for accessibility, defaults to `alert` |
| `state` | _(optional)_ defines the visual appearance of the status. These are the statuses `error`, `warn`, `info` and `marketing`. The default status is `error`. |
-| `size` | _(optional)_ defines the appearance size. There are these sizes `default`, `large`. The default status is `default`. |
-| `icon` | _(optional)_ the `icon` show before the status text. Defaults to `exclamation`. |
-| `icon_size` | _(optional)_ the icon size of the icon shows. Defaults to `medium`. |
-| `variant` | _(optional)_ as of now, there is the `flat` and the `outlined` variant. Defaults to `flat`. |
-| `stretch` | _(optional)_ if set to `true`, then the FormStatus will be 100% in available `width`. **NB:** Only use this on independent status messages. |
-| `show` | _(optional)_ provide `false` if you want to animate the visibility. Defaults to `true`. |
-| `no_animation` | _(optional)_ NB: Animation is disabled as of now. ~~use `true` to omit the animation on content visibility. Defaults to `false`.~~ |
-| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). |
-| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
-| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
+| `size` | _(optional)_ defines the appearance size. There are these sizes `default`, `large`. The default status is `default`. |
+| `icon` | _(optional)_ the `icon` show before the status text. Defaults to `exclamation`. |
+| `icon_size` | _(optional)_ the icon size of the icon shows. Defaults to `medium`. |
+| `variant` | _(optional)_ as of now, there is the `flat` and the `outlined` variant. Defaults to `flat`. |
+| `stretch` | _(optional)_ if set to `true`, then the FormStatus will be 100% in available `width`. **NB:** Only use this on independent status messages. |
+| `show` | _(optional)_ provide `false` if you want to animate the visibility. Defaults to `true`. |
+| `no_animation` | _(optional)_ NB: Animation is disabled as of now. ~~use `true` to omit the animation on content visibility. Defaults to `false`.~~ |
+| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). |
+| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
+| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/demos.mdx
index 4320526ad9f..f08e26e89d1 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/demos.mdx
@@ -3,11 +3,11 @@ showTabs: true
---
import {
-DrawerListExampleInteractive,
-DrawerListExampleOnlyToVisualize,
-DrawerListExampleDefault,
-DrawerListExampleSingleItem,
-DrawerListExampleMarkup
+ DrawerListExampleInteractive,
+ DrawerListExampleOnlyToVisualize,
+ DrawerListExampleDefault,
+ DrawerListExampleSingleItem,
+ DrawerListExampleMarkup,
} from 'Docs/uilib/components/fragments/drawer-list/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/events.mdx
index 0515309a1ec..2527bd872dd 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/events.mdx
@@ -4,13 +4,13 @@ showTabs: true
## Events
-| Events | Description |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `on_pre_change` | _(optional)_ will be called before `on_change`, this way you can return false to prevent selection and to prevent `on_change` execution. Returns the data item `{ data, attributes }`. |
-| `on_change` | _(optional)_ will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value, selected_item }`. |
+| Events | Description |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `on_pre_change` | _(optional)_ will be called before `on_change`, this way you can return false to prevent selection and to prevent `on_change` execution. Returns the data item `{ data, attributes }`. |
+| `on_change` | _(optional)_ will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value, selected_item }`. |
| `on_select` | _(optional)_ will be called once the user selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item, selected_item }`. The **active_item** property is the currently selected item by keyboard navigation |
-| `on_show` | _(optional)_ will be called once the user presses the drawer-list. Returns the data item `{ data, attributes }`. |
-| `on_hide` | _(optional)_ will be called once the user presses the drawer-list again, or clicks somewhere else. Returns the data item `{ data, attributes }`. |
+| `on_show` | _(optional)_ will be called once the user presses the drawer-list. Returns the data item `{ data, attributes }`. |
+| `on_hide` | _(optional)_ will be called once the user presses the drawer-list again, or clicks somewhere else. Returns the data item `{ data, attributes }`. |
### The `on_change` vs `on_select` difference
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/scroll-view/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/scroll-view/demos.mdx
index 052ac20ae14..a0bec4786b8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/scroll-view/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/scroll-view/demos.mdx
@@ -2,9 +2,7 @@
showTabs: true
---
-import {
-ScrollViewInteractive,
-} from 'Docs/uilib/components/fragments/scroll-view/Examples'
+import { ScrollViewInteractive } from 'Docs/uilib/components/fragments/scroll-view/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/demos.mdx
index e25e44a39e4..0c77aa4cea6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/demos.mdx
@@ -3,8 +3,8 @@ showTabs: true
---
import {
-GlobalError404Example,
-GlobalError500Example,
+ GlobalError404Example,
+ GlobalError500Example,
} from 'Docs/uilib/components/global-error/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/properties.mdx
index 6055db8be99..e7d31f4dcfe 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/global-error/properties.mdx
@@ -6,7 +6,7 @@ showTabs: true
| Properties | Description |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `status` | _(optional)_ status code defines the view showing up. |
+| `status` | _(optional)_ status code defines the view showing up. |
| `status_content` | _(optional)_ a JSON object or a JS object providing the status texts. More details below. |
| `title` | _(optional)_ defining a `title` will overwrite the default provided by `status_content`. |
| `text` | _(optional)_ defining a `text` will overwrite the default provided by `status_content`. |
@@ -32,4 +32,4 @@ The structure for the `status_content` property.
alt: ...
}
}
-```
\ No newline at end of file
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/demos.mdx
index 808bb913c1b..f0ea2a7a02a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/demos.mdx
@@ -3,12 +3,12 @@ showTabs: true
---
import {
-GlobalStatusError,
-GlobalStatusInfo,
-GlobalStatusUpdate,
-GlobalStatusCoupling,
-GlobalStatusAddRemoveItems,
-GlobalStatusScrolling,
+ GlobalStatusError,
+ GlobalStatusInfo,
+ GlobalStatusUpdate,
+ GlobalStatusCoupling,
+ GlobalStatusAddRemoveItems,
+ GlobalStatusScrolling,
} from 'Docs/uilib/components/global-status/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/heading/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/heading/demos.mdx
index cee90498f6d..c886a4ab35b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/heading/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/heading/demos.mdx
@@ -3,10 +3,10 @@ showTabs: true
---
import {
-HeadingDefault,
-HeadingContext,
-HeadingIsolation,
-HeadingMix
+ HeadingDefault,
+ HeadingContext,
+ HeadingIsolation,
+ HeadingMix,
} from 'Docs/uilib/components/heading/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/demos.mdx
index 1178032825c..8d437aa2822 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/demos.mdx
@@ -3,9 +3,9 @@ showTabs: true
---
import {
-HeightAnimationDefault,
-HeightAnimationAutosizing,
-HeightAnimationKeepInDOM,
+ HeightAnimationDefault,
+ HeightAnimationAutosizing,
+ HeightAnimationKeepInDOM,
} from 'Docs/uilib/components/height-animation/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/demos.mdx
index 8c4f8b53890..730a5db870d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/demos.mdx
@@ -3,11 +3,11 @@ showTabs: true
---
import {
-HelpButtonDefaultExample,
-HelpButtonSuffixExample,
-HelpButtonSizesExample,
-HelpButtonInfoIconExample,
-HelpButtonInsideTextExample,
+ HelpButtonDefaultExample,
+ HelpButtonSuffixExample,
+ HelpButtonSizesExample,
+ HelpButtonInfoIconExample,
+ HelpButtonInsideTextExample,
} from 'Docs/uilib/components/help-button/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/demos.mdx
index e1bbab06797..5a83086b83e 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/demos.mdx
@@ -3,8 +3,8 @@ showTabs: true
---
import {
-IconPrimaryDefaultExample,
-IconPrimaryFixedSizeExample,
+ IconPrimaryDefaultExample,
+ IconPrimaryFixedSizeExample,
} from 'Docs/uilib/components/icon-primary/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/properties.mdx
index c3c1837524e..02ba179129f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/properties.mdx
@@ -4,8 +4,8 @@ showTabs: true
## Properties
-| Properties | Description |
-| ------------------------------------------- | --------------------------------------------------------------------------------- |
+| Properties | Description |
+| ------------------------------------------- | -------------------------------------------------------------------------------- |
| `icon` | _(required)_ Defines the [primary icon](/icons/primary) to be used, as a string. |
-| [Icon](/uilib/components/icon/properties) | _(optional)_ accepts else all the default icon properties. |
-| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
+| [Icon](/uilib/components/icon/properties) | _(optional)_ accepts else all the default icon properties. |
+| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/demos.mdx
index e72045d3f8d..e5e04b04013 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/demos.mdx
@@ -3,10 +3,10 @@ showTabs: true
---
import IconTests, {
-IconDefault,
-IconBorder,
-IconInheritSized,
-IconColors
+ IconDefault,
+ IconBorder,
+ IconInheritSized,
+ IconColors,
} from 'Docs/uilib/components/icon/Examples'
## Demos
@@ -24,6 +24,7 @@ IconColors
### Icon color variations
+
All of these methods will output the same color
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/properties.mdx
index 3b4645c888f..aaab6655bea 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/properties.mdx
@@ -4,15 +4,15 @@ showTabs: true
## Properties
-| Properties | Description |
-| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Properties | Description |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `icon` | _(required)_ a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`). |
-| `title` | _(optional)_ Use a title to provide extra information about the icon used. |
-| `border` | _(optional)_ use `true` to display a rounded border with an inherited color. Keep in mind that the icon will have a larger total width and height of `+0.5em`. |
-| `alt` | _(optional)_ the alternative label (text version) of the icon. Defaults to the imported icon name. |
+| `title` | _(optional)_ Use a title to provide extra information about the icon used. |
+| `border` | _(optional)_ use `true` to display a rounded border with an inherited color. Keep in mind that the icon will have a larger total width and height of `+0.5em`. |
+| `alt` | _(optional)_ the alternative label (text version) of the icon. Defaults to the imported icon name. |
| `size` | _(optional)_ the dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`. |
-| `color` | _(optional)_ the color can be any valid color property, such as Hex, RGB or preferable – any CSS variable from the [colors table](/uilib/usage/customisation/colors), e.g. `var(--color-ocean-green)`. Default is no color, which means `--color-black-80`. |
-| `inherit_color` | _(optional)_ Default to `true`. Set to `false` if you do not want to inherit the color by `currentColor`. |
-| `modifier` | _(optional)_ modifier class to define. Will result in: `dnb-icon--${modifier}`. |
-| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
-| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
+| `color` | _(optional)_ the color can be any valid color property, such as Hex, RGB or preferable – any CSS variable from the [colors table](/uilib/usage/customisation/colors), e.g. `var(--color-ocean-green)`. Default is no color, which means `--color-black-80`. |
+| `inherit_color` | _(optional)_ Default to `true`. Set to `false` if you do not want to inherit the color by `currentColor`. |
+| `modifier` | _(optional)_ modifier class to define. Will result in: `dnb-icon--${modifier}`. |
+| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
+| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/info-card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/info-card/demos.mdx
index 871f8638572..dd884a7d724 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/info-card/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/info-card/demos.mdx
@@ -3,16 +3,16 @@ showTabs: true
---
import {
-InfoCardBasic,
-InfoCardTitle,
-InfoCardButtons,
-InfoCardButtonsCentered,
-InfoCardAcceptButton,
-InfoCardCloseButton,
-InfoCardCustomIcon,
-InfoCardCentered,
-InfoCardCustomImage,
-InfoCardCustomImageCentered,
+ InfoCardBasic,
+ InfoCardTitle,
+ InfoCardButtons,
+ InfoCardButtonsCentered,
+ InfoCardAcceptButton,
+ InfoCardCloseButton,
+ InfoCardCustomIcon,
+ InfoCardCentered,
+ InfoCardCustomImage,
+ InfoCardCustomImageCentered,
} from 'Docs/uilib/components/info-card/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/demos.mdx
index 8289d50a4d4..f4be35000ab 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/demos.mdx
@@ -3,19 +3,23 @@ showTabs: true
---
import {
-InputMaskedExampleCurrencyLocale,
-InputMaskedExampleCurrencyMask,
-InputMaskedExampleNumberLocale,
-InputMaskedExampleCustomNumberMask,
-InputMaskedExampleNumberMask,
-InputMaskedExamplePrefix,
-InputMaskedExamplePhone
+ InputMaskedExampleCurrencyLocale,
+ InputMaskedExampleCurrencyMask,
+ InputMaskedExampleNumberLocale,
+ InputMaskedExampleCustomNumberMask,
+ InputMaskedExampleNumberMask,
+ InputMaskedExamplePrefix,
+ InputMaskedExamplePhone,
} from 'Docs/uilib/components/input-masked/Examples'
import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
## Demos
-
+
### Locale based numbers
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/events.mdx
index e604b4f00eb..5876429ade6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/events.mdx
@@ -4,9 +4,9 @@ showTabs: true
## Events
-| Events | Description |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Events | Description |
+| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `on_change` | _(optional)_ will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, numberValue, cleanedValue, event }`. |
-| [Input](/uilib/components/input/events) | _(optional)_ all `Input` events are supported. |
+| [Input](/uilib/components/input/events) | _(optional)_ all `Input` events are supported. |
**NB:** `numberValue` is returned as a float value and is only returned if the createNumberMask is used by either using `number_mask`, `currency_mask`, `as_number` or `as_currency`.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/demos.mdx
index 4ee37c56cb5..a44d3c3b4db 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/input/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input/demos.mdx
@@ -3,19 +3,19 @@ showTabs: true
---
import {
-InputScreenshotTests,
-InputExampleDefault,
-InputExampleSearch,
-InputExampleMedium,
-InputExampleWithIcon,
-InputExampleDisabled,
-InputExampleFormStatus,
-InputExampleSuffix,
-InputExampleStretched,
-InputExampleNumbers,
-InputExamplePassword,
-InputExampleSubmit,
-InputExampleClear
+ InputScreenshotTests,
+ InputExampleDefault,
+ InputExampleSearch,
+ InputExampleMedium,
+ InputExampleWithIcon,
+ InputExampleDisabled,
+ InputExampleFormStatus,
+ InputExampleSuffix,
+ InputExampleStretched,
+ InputExampleNumbers,
+ InputExamplePassword,
+ InputExampleSubmit,
+ InputExampleClear,
} from 'Docs/uilib/components/input/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/events.mdx
index 5028e3b1a59..6898baa7929 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/input/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input/events.mdx
@@ -4,12 +4,12 @@ showTabs: true
## Events
-| Events | Description |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Events | Description |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `on_change` | _(optional)_ will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`. |
-| `on_focus` | _(optional)_ will be called on focus set by the user. Returns `{ value, event }`. |
-| `on_blur` | _(optional)_ will be called on blur set by the user. Returns `{ value, event }`. |
-| `on_submit` | _(optional)_ will be called on submit button click. Returns `{ value, event }`. |
+| `on_focus` | _(optional)_ will be called on focus set by the user. Returns `{ value, event }`. |
+| `on_blur` | _(optional)_ will be called on blur set by the user. Returns `{ value, event }`. |
+| `on_submit` | _(optional)_ will be called on submit button click. Returns `{ value, event }`. |
### Manipulate the input value during typing
@@ -42,4 +42,4 @@ function Component() {
return
}
-```
\ No newline at end of file
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/info.mdx
index d74d81cdcd9..5ff46f69442 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/input/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input/info.mdx
@@ -11,4 +11,8 @@ The input component is an umbrella component for all inputs which share the same
**NB:** Is [InputMasked](/uilib/components/input-masked/) what you are looking for?
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/logo/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/logo/demos.mdx
index 5a47e6b4753..f71fab24342 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/logo/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/logo/demos.mdx
@@ -3,10 +3,10 @@ showTabs: true
---
import {
-LogoAutoSizeExample,
-LogoInheritSizeExample,
-LogoDefaultExample,
-LogoInheritColorExample,
+ LogoAutoSizeExample,
+ LogoInheritSizeExample,
+ LogoDefaultExample,
+ LogoInheritColorExample,
} from 'Docs/uilib/components/logo/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/demos.mdx
index 72f2cbfb001..d9d51d1fbfc 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/demos.mdx
@@ -3,9 +3,9 @@ showTabs: true
---
import {
-ModalExampleStandard,
-ModalExampleStateOnly,
-ModalExampleCloseByHandler
+ ModalExampleStandard,
+ ModalExampleStateOnly,
+ ModalExampleCloseByHandler,
} from 'Docs/uilib/components/modal/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/event-table.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/event-table.mdx
index e7683592d5a..eef4e57c901 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/event-table.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/event-table.mdx
@@ -1,8 +1,8 @@
---
---
-| Events | Description |
-| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Events | Description |
+| ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onOpen` / `on_open` | _(optional)_ This event gets triggered once the modal shows up. Returns the modal id: `\{ id \}`.`. |
| `onClose` / `on_close` | _(optional)_ this event gets triggered once the modal gets closed. Returns the modal id: `\{ id, event, triggeredBy \}`. |
| `onClosePrevent` / `on_close_prevent` | _(optional)_ this event gets triggered once the user tries to close the modal, but `prevent_close` is set to **true**. Returns a callback `close` You can call to trigger the close mechanism. More details below. Returns the modal id: `\{ id, event, close: Method, triggeredBy \}` |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/demos.mdx
index 594c0d0111c..22a69f080f9 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/demos.mdx
@@ -5,23 +5,26 @@ redirect_from:
---
import {
-NumberDefault,
-NumberCurrency,
-NumberCompact,
-NumberPercent,
-NumberPhone,
-NumberBankAccount,
-NumberNationalIdentification,
-NumberOrganization,
-NumberLocales,
-NumberSpacing,
-NumberProvider,
+ NumberDefault,
+ NumberCurrency,
+ NumberCompact,
+ NumberPercent,
+ NumberPhone,
+ NumberBankAccount,
+ NumberNationalIdentification,
+ NumberOrganization,
+ NumberLocales,
+ NumberSpacing,
+ NumberProvider,
} from 'Docs/uilib/components/number-format/Examples'
import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
## Demos
-
+
### Default numbers
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/demos.mdx
index 96cf7cde26f..737ca5e6ca3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/demos.mdx
@@ -3,9 +3,9 @@ showTabs: true
---
import {
-PaginationExampleDefault,
-PaginationExampleWithCallback,
-PaginationExampleCentered,
+ PaginationExampleDefault,
+ PaginationExampleWithCallback,
+ PaginationExampleCentered,
} from 'Docs/uilib/components/pagination/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/demos.mdx
index b2e91cab931..9342235c3a4 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/demos.mdx
@@ -3,10 +3,10 @@ showTabs: true
---
import {
-PaginationExampleInfinityLoadButton,
-PaginationExampleInfinityIndicator,
-PaginationExampleInfinityUnknown,
-PaginationExampleInfinityTable,
+ PaginationExampleInfinityLoadButton,
+ PaginationExampleInfinityIndicator,
+ PaginationExampleInfinityUnknown,
+ PaginationExampleInfinityTable,
} from 'Docs/uilib/components/pagination/infinity-scroller/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/demos.mdx
index 3c4f254ddbf..bdffb77ead1 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/demos.mdx
@@ -5,24 +5,24 @@ redirect_from:
---
import {
-ProgressIndicatorDefaultExample,
-ProgressIndicatorCircularExample,
-ProgressIndicatorCircularLabelHorizontalExample,
-ProgressIndicatorCircularLabelVerticalExample,
-ProgressIndicatorCircularPrimaryExample,
-ProgressIndicatorCircularRandomExample,
-ProgressIndicatorCircularRandomTransitionExample,
-ProgressIndicatorCircularRandomOnCompleteExample,
-ProgressIndicatorCircularDialogExample,
-ProgressIndicatorLinearDefaultExample,
-ProgressIndicatorLinearSmallExample,
-ProgressIndicatorLinearLabelHorizontalExample,
-ProgressIndicatorLinearLabelVerticalExample,
-ProgressIndicatorLinearLargeExample,
-ProgressIndicatorLinearRandomExample,
-ProgressIndicatorLinearRandomTransitionExample,
-ProgressIndicatorLinearRandomOnCompleteExample,
-ProgressIndicatorLinearDialogExample,
+ ProgressIndicatorDefaultExample,
+ ProgressIndicatorCircularExample,
+ ProgressIndicatorCircularLabelHorizontalExample,
+ ProgressIndicatorCircularLabelVerticalExample,
+ ProgressIndicatorCircularPrimaryExample,
+ ProgressIndicatorCircularRandomExample,
+ ProgressIndicatorCircularRandomTransitionExample,
+ ProgressIndicatorCircularRandomOnCompleteExample,
+ ProgressIndicatorCircularDialogExample,
+ ProgressIndicatorLinearDefaultExample,
+ ProgressIndicatorLinearSmallExample,
+ ProgressIndicatorLinearLabelHorizontalExample,
+ ProgressIndicatorLinearLabelVerticalExample,
+ ProgressIndicatorLinearLargeExample,
+ ProgressIndicatorLinearRandomExample,
+ ProgressIndicatorLinearRandomTransitionExample,
+ ProgressIndicatorLinearRandomOnCompleteExample,
+ ProgressIndicatorLinearDialogExample,
} from 'Docs/uilib/components/progress-indicator/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/visual-tests.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/visual-tests.mdx
index 52b31efca54..c257edd0b92 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/visual-tests.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/visual-tests.mdx
@@ -2,8 +2,6 @@
draft: true
---
-import {
-ProgressIndicatorSizesExample
-} from 'Docs/uilib/components/progress-indicator/Examples'
+import { ProgressIndicatorSizesExample } from 'Docs/uilib/components/progress-indicator/Examples'
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/demos.mdx
index b29396b7a4f..b61f5b71afa 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/demos.mdx
@@ -3,15 +3,15 @@ showTabs: true
---
import {
-RadioExampleDefault,
-RadioExampleVerticalGroup,
-RadioExampleLabelAbove,
-RadioExampleGroupStatus,
-RadioExampleWithoutGroup,
-RadioExampleSizes,
-RadioExampleDisabled,
-RadioExampleSuffix,
-RadioVisualTests
+ RadioExampleDefault,
+ RadioExampleVerticalGroup,
+ RadioExampleLabelAbove,
+ RadioExampleGroupStatus,
+ RadioExampleWithoutGroup,
+ RadioExampleSizes,
+ RadioExampleDisabled,
+ RadioExampleSuffix,
+ RadioVisualTests,
} from 'Docs/uilib/components/radio/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/events.mdx
index 54e0e640440..e36f2983360 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/events.mdx
@@ -4,8 +4,8 @@ showTabs: true
## Radio button events
-| Events | Description |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------- |
+| Events | Description |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------ |
| `on_change` | _(optional)_ will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`. |
## Radio events
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.mdx
index ec77d12e691..f9d50dd26af 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/section/demos.mdx
@@ -3,20 +3,20 @@ showTabs: true
---
import {
-SectionDemo,
-SectionDemoSpacing,
-SectionDemoWhite,
-SectionDemoDivider,
-SectionDemoMintGreen,
-SectionDemoSeaGreen,
-SectionDemoEmeraldGreen,
-SectionDemoLavender,
-SectionDemoBlack3,
-SectionDemoSandYellow,
-SectionDemoPistachio,
-SectionDemoFireRed,
-SectionDemoFireRed8,
-SectionZIndex,
+ SectionDemo,
+ SectionDemoSpacing,
+ SectionDemoWhite,
+ SectionDemoDivider,
+ SectionDemoMintGreen,
+ SectionDemoSeaGreen,
+ SectionDemoEmeraldGreen,
+ SectionDemoLavender,
+ SectionDemoBlack3,
+ SectionDemoSandYellow,
+ SectionDemoPistachio,
+ SectionDemoFireRed,
+ SectionDemoFireRed8,
+ SectionZIndex,
} from 'Docs/uilib/components/section/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.mdx
index 1330a96e14a..e11d55a8ee3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.mdx
@@ -4,13 +4,13 @@ showTabs: true
## Properties
-| Properties | Description |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `style_type` | _(optional)_ to define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`. |
+| Properties | Description |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `style_type` | _(optional)_ to define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`. |
| `spacing` | _(optional)_ will add spacing around the given content. If `true`, then `large` is used. Se the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). Defaults to `false`. |
-| `element` | _(optional)_ define what HTML element should be used. Defaults to ``. |
-| `inner_ref` | _(optional)_ by providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`. |
-| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
+| `element` | _(optional)_ define what HTML element should be used. Defaults to ``. |
+| `inner_ref` | _(optional)_ by providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`. |
+| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
## Styles
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/demos.mdx
index 67e08cd929f..17ee970f73a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/demos.mdx
@@ -3,12 +3,12 @@ showTabs: true
---
import {
-SkeletonInputExample,
-SkeletonToggleExample,
-SkeletonWrapperExample,
-SkeletonEufemiaProviderExample,
-SkeletonFiguresExample,
-SkeletonVisualTests
+ SkeletonInputExample,
+ SkeletonToggleExample,
+ SkeletonWrapperExample,
+ SkeletonEufemiaProviderExample,
+ SkeletonFiguresExample,
+ SkeletonVisualTests,
} from 'Docs/uilib/components/skeleton/Examples'
import PortalSkeleton from 'dnb-design-system-portal/src/shared/parts/uilib/PortalSkeleton'
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/properties.mdx
index 020ae2bcd4d..16c56e52eaf 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/properties.mdx
@@ -4,13 +4,13 @@ showTabs: true
## Properties
-| Properties | Description |
-| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` | _(optional)_ Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`. |
-| `style_type` | _(optional)_ Defines the style type to use (`shine`). Defaults to `lines`. |
-| `figure` | _(optional)_ Define a figure to use, like `article`. The wrapped content will be hidden while the skeleton figure is shown. |
-| `no_animation` | _(optional)_ Use `true` to disable the animation. |
-| `aria_busy` | _(optional)_ Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed. |
-| `aria_ready` | _(optional)_ Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed. |
+| Properties | Description |
+| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` | _(optional)_ Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`. |
+| `style_type` | _(optional)_ Defines the style type to use (`shine`). Defaults to `lines`. |
+| `figure` | _(optional)_ Define a figure to use, like `article`. The wrapped content will be hidden while the skeleton figure is shown. |
+| `no_animation` | _(optional)_ Use `true` to disable the animation. |
+| `aria_busy` | _(optional)_ Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed. |
+| `aria_ready` | _(optional)_ Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed. |
| `element` | _(optional)_ Set any HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div` |
-| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
+| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/demos.mdx
index 4688fb90290..d4d6684cb07 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/demos.mdx
@@ -2,9 +2,7 @@
showTabs: true
---
-import {
-SkipContentTable,
-} from 'Docs/uilib/components/skip-content/Examples'
+import { SkipContentTable } from 'Docs/uilib/components/skip-content/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/demos.mdx
index 052c9bb9c7f..82196a6b411 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/demos.mdx
@@ -3,12 +3,12 @@ showTabs: true
---
import {
-SliderExampleDefault,
-SliderVerticalWithSteps,
-SliderExampleHorizontalSync,
-SliderExampleSuffix,
-SliderExampleMultiButtons,
-SliderExampleMultiButtonsThumbBehavior,
+ SliderExampleDefault,
+ SliderVerticalWithSteps,
+ SliderExampleHorizontalSync,
+ SliderExampleSuffix,
+ SliderExampleMultiButtons,
+ SliderExampleMultiButtonsThumbBehavior,
} from 'Docs/uilib/components/slider/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/space/demos.mdx
index 85776890ec7..d8897f8aab1 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/demos.mdx
@@ -3,14 +3,14 @@ showTabs: true
---
import {
-SpaceExamplesMethod1,
-SpaceExamplesMethod2,
-SpaceExamplesMethod3,
-SpaceExampleMarginCollapse,
-SpaceExampleMargins,
-SpaceVisualTestPatterns,
-SpaceVisualTestElements,
-SpaceVisualTestReset,
+ SpaceExamplesMethod1,
+ SpaceExamplesMethod2,
+ SpaceExamplesMethod3,
+ SpaceExampleMarginCollapse,
+ SpaceExampleMargins,
+ SpaceVisualTestPatterns,
+ SpaceVisualTestElements,
+ SpaceVisualTestReset,
} from 'Docs/uilib/components/space/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos.mdx
index 435a195990c..24521a9af1a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/demos.mdx
@@ -3,14 +3,14 @@ showTabs: true
---
import {
-StepIndicatorStatic,
-StepIndicatorStrict,
-StepIndicatorLoose,
-StepIndicatorCustomized,
-StepIndicatorSidebar,
-StepIndicatorTextOnly,
-StepIndicatorCustomRenderer,
-StepIndicatorRouter,
+ StepIndicatorStatic,
+ StepIndicatorStrict,
+ StepIndicatorLoose,
+ StepIndicatorCustomized,
+ StepIndicatorSidebar,
+ StepIndicatorTextOnly,
+ StepIndicatorCustomRenderer,
+ StepIndicatorRouter,
} from 'Docs/uilib/components/step-indicator/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/events.mdx
index 60c84cc7876..a7259de04ff 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/events.mdx
@@ -4,13 +4,13 @@ showTabs: true
## Component events
-| Events | Description |
-| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Events | Description |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `on_change` | _(optional)_ will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`. |
| `on_click` | _(optional)_ will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`. |
## Item events
-| Events | Description |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| Events | Description |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `on_click` | _(optional)_ will be called on a click event if a `anchor` or a `button` is available. Returns an object `{ event, item, current_step }`. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/switch/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/switch/demos.mdx
index e07cbfb78a7..846074c94c4 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/switch/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/switch/demos.mdx
@@ -3,12 +3,12 @@ showTabs: true
---
import {
-SwitchExampleDefault,
-SwitchExampleChecked,
-SwitchExampleErrorMessage,
-SwitchExampleSuffix,
-SwitchExampleSizes,
-SwitchExampleDisabled
+ SwitchExampleDefault,
+ SwitchExampleChecked,
+ SwitchExampleErrorMessage,
+ SwitchExampleSuffix,
+ SwitchExampleSizes,
+ SwitchExampleDisabled,
} from 'Docs/uilib/components/switch/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/switch/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/switch/events.mdx
index ae1676ef9b8..1d3d6cba199 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/switch/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/switch/events.mdx
@@ -4,7 +4,7 @@ showTabs: true
## Events
-| Events | Description |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `on_change` | _(optional)_ will be called on state changes made by the user. Returns a boolean `{ checked, event }`. |
+| Events | Description |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `on_change` | _(optional)_ will be called on state changes made by the user. Returns a boolean `{ checked, event }`. |
| `on_change_end` | _(optional)_ will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean `{ checked, event }`. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.mdx
index f0660fa5652..d4405a2a8c6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.mdx
@@ -3,21 +3,21 @@ showTabs: true
---
import {
-TableVariantBasic,
-TableVariantComplex,
-TableRowScopeOnly,
-TableVariantFixed,
-TableStackedContainer,
-TableContainerEmptyHeaderFooter,
-TableClassHelpers,
-TableWithoutClasses,
-TableLongHeader,
-TableSticky,
-TableStickyMaxHeight,
-TableSizeMedium,
-TableSizeSmall,
-PaginationTable,
-TableAccordion,
+ TableVariantBasic,
+ TableVariantComplex,
+ TableRowScopeOnly,
+ TableVariantFixed,
+ TableStackedContainer,
+ TableContainerEmptyHeaderFooter,
+ TableClassHelpers,
+ TableWithoutClasses,
+ TableLongHeader,
+ TableSticky,
+ TableStickyMaxHeight,
+ TableSizeMedium,
+ TableSizeSmall,
+ PaginationTable,
+ TableAccordion,
} from 'Docs/uilib/components/table/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.mdx
index 04b98ab34e6..d45e4babf5a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.mdx
@@ -3,16 +3,16 @@ showTabs: true
---
import {
-TabsExampleContentOutside,
-TabsExampleContentObject,
-TabsExampleScrollable,
-TabsExampleLeftAligned,
-TabsExampleUsingData,
-TabsExampleHorizontalAligned,
-TabsExampleMaxWidth,
-TabsExampleReachRouterNavigation,
-TabsNoBorder,
-TabsExamplePrerender,
+ TabsExampleContentOutside,
+ TabsExampleContentObject,
+ TabsExampleScrollable,
+ TabsExampleLeftAligned,
+ TabsExampleUsingData,
+ TabsExampleHorizontalAligned,
+ TabsExampleMaxWidth,
+ TabsExampleReachRouterNavigation,
+ TabsNoBorder,
+ TabsExamplePrerender,
} from 'Docs/uilib/components/tabs/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/events.mdx
index 23693b7e46d..e8fce705008 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/events.mdx
@@ -9,7 +9,7 @@ showTabs: true
| `on_change` | _(optional)_ (preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selected_key, focus_key, event }`. |
| `on_click` | _(optional)_ this event gets triggered once the tab gets clicked. Returns `{ key, selected_key, focus_key, event }`. |
| `on_focus` | _(optional)_ this event gets triggered once the tab changes its focus key. Returns `{ key, selected_key, focus_key, event }`. |
-| `on_mouse_enter` | _(optional)_ this event gets triggered once the user's mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`. |
+| `on_mouse_enter` | _(optional)_ this event gets triggered once the user's mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`. |
### Prevent a change
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tag/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tag/demos.mdx
index 5ac3b6544fa..b9ea185fb25 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/tag/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tag/demos.mdx
@@ -3,12 +3,12 @@ showTabs: true
---
import {
-TagDefault,
-TagWithIcon,
-TagRemovable,
-TagMultipleRemovable,
-TagInline,
-TagSkeleton,
+ TagDefault,
+ TagWithIcon,
+ TagRemovable,
+ TagMultipleRemovable,
+ TagInline,
+ TagSkeleton,
} from 'Docs/uilib/components/tag/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tag/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tag/events.mdx
index c8c3e1aaeb9..e5af16922a0 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/tag/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tag/events.mdx
@@ -4,7 +4,7 @@ showTabs: true
## Events
-| Events | Description |
-| ---------- | --------------------------------------------------------------------------------------------------- |
-| `onClick` | _(optional)_ will be called on a click event. Returns an object with the native event: `{ event }`. |
+| Events | Description |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onClick` | _(optional)_ will be called on a click event. Returns an object with the native event: `{ event }`. |
| `onDelete` | _(optional)_ will be called on a click event. Returns an object with the native event: `{ event }`. This prop does not support icon and will be ignored if `onClick`is defined. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/demos.mdx
index ef2a1bf9408..59706fb27a5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/demos.mdx
@@ -3,15 +3,15 @@ showTabs: true
---
import {
-TextareaExampleRowsCols,
-TextareaExamplePlaceholder,
-TextareaExampleVertical,
-TextareaExampleStretched,
-TextareaExampleAutoresize,
-TextareaExampleMaxLength,
-TextareaExampleFormStatus,
-TextareaExampleDisabled,
-TextareaExampleSuffix
+ TextareaExampleRowsCols,
+ TextareaExamplePlaceholder,
+ TextareaExampleVertical,
+ TextareaExampleStretched,
+ TextareaExampleAutoresize,
+ TextareaExampleMaxLength,
+ TextareaExampleFormStatus,
+ TextareaExampleDisabled,
+ TextareaExampleSuffix,
} from 'Docs/uilib/components/textarea/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/events.mdx
index 872909cd484..99279a378ed 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/events.mdx
@@ -7,6 +7,6 @@ showTabs: true
| Events | Description |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `on_change` | _(optional)_ will be called on value changes made by the user. Returns an object with a string value and the native event: `{ value, rows, event }`. |
-| `on_focus` | _(optional)_ will be called on the focus set by the user. Returns `{ value, event }`. |
+| `on_focus` | _(optional)_ will be called on the focus set by the user. Returns `{ value, event }`. |
| `on_blur` | _(optional)_ will be called on blur set by the user. Returns `{ value, event }`. |
| `on_key_down` | _(optional)_ will be called during every keystroke. Returns `{ value, rows, event }`. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx
index 444cc7b7172..ee9658feb8c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx
@@ -17,13 +17,13 @@ showTabs: true
| `autoresize` | _(optional)_ use `true` to make the Textarea grow and shrink depending on how many lines the user has filled. |
| `autoresize_max_rows` | _(optional)_ set a number to define how many rows the Textarea can auto grow. |
| `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_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. |
| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). |
| `textarea_state` | _(optional)_ to control the visual focus state as a prop, like `focus` or `blur`. |
| `textarea_class` | _(optional)_ in case we have to set a custom Textarea class. |
| `textarea_attributes` | _(optional)_ provide the Textarea element with any attributes by using an Object `textarea_attributes={{size:'2'}}` or a JSON Object `textarea_attributes='{"size":"2"}'`. **NB:** Keep in mind, that also every not listed component property will be sent along and set as a Textarea element attribute. |
-| `inner_ref` | _(optional)_ by providing a React.ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`. |
+| `inner_ref` | _(optional)_ by providing a React.ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`. |
| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/demos.mdx
index 45d4c5c51f1..5e530a6d3f7 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/demos.mdx
@@ -3,19 +3,19 @@ showTabs: true
---
import {
-TimelineSingleCompleted,
-TimelineSingleCurrent,
-TimelineSingleUpcoming,
-TimelineMultiple,
-TimelineMultipleData,
-TimelineMultipleCompletedData,
-TimelineMultipleCurrentData,
-TimelineMultipleUpcomingData,
-TimelineStates,
-TimelineIcons,
-TimelineSkeleton,
-TimelineAsChildrenSkeleton,
-TimelineItemSkeleton
+ TimelineSingleCompleted,
+ TimelineSingleCurrent,
+ TimelineSingleUpcoming,
+ TimelineMultiple,
+ TimelineMultipleData,
+ TimelineMultipleCompletedData,
+ TimelineMultipleCurrentData,
+ TimelineMultipleUpcomingData,
+ TimelineStates,
+ TimelineIcons,
+ TimelineSkeleton,
+ TimelineAsChildrenSkeleton,
+ TimelineItemSkeleton,
} from 'Docs/uilib/components/timeline/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/demos.mdx
index 449b6ba447d..ad8fb546dd3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/demos.mdx
@@ -3,16 +3,16 @@ showTabs: true
---
import {
-ToggleButtonUnchecked,
-ToggleButtonChecked,
-ToggleButtonDefault,
-ToggleButtonMultiselect,
-ToggleButtonVertical,
-ToggleButtonStatus,
-ToggleButtonStatusMessages,
-ToggleButtonDisabledGroup,
-ToggleButtonSuffix,
-ToggleButtonIconOnly
+ ToggleButtonUnchecked,
+ ToggleButtonChecked,
+ ToggleButtonDefault,
+ ToggleButtonMultiselect,
+ ToggleButtonVertical,
+ ToggleButtonStatus,
+ ToggleButtonStatusMessages,
+ ToggleButtonDisabledGroup,
+ ToggleButtonSuffix,
+ ToggleButtonIconOnly,
} from 'Docs/uilib/components/toggle-button/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/events.mdx
index 0090d12dff1..176eaa944af 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/events.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/events.mdx
@@ -4,8 +4,8 @@ showTabs: true
## ToggleButton (button) events
-| Events | Description |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------- |
+| Events | Description |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------ |
| `on_change` | _(optional)_ will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`. |
## ToggleButton (group) events
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/demos.mdx
index 2cbb7c64ae1..3d00c7ff8af 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/demos.mdx
@@ -3,12 +3,12 @@ showTabs: true
---
import {
-TooltipExampleDefault,
-TooltipExampleAnimation,
-TooltipExampleNumberFormat,
-TooltipExampleNumberFormatWrapped,
-TooltipExampleLinked,
-TooltipExampleActive
+ TooltipExampleDefault,
+ TooltipExampleAnimation,
+ TooltipExampleNumberFormat,
+ TooltipExampleNumberFormatWrapped,
+ TooltipExampleLinked,
+ TooltipExampleActive,
} from 'Docs/uilib/components/tooltip/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx
index 105f5931c49..bd88c286958 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx
@@ -3,13 +3,13 @@ showTabs: true
---
import {
-UploadBasic,
-UploadPrefilledFileList,
-UploadRemoveFile,
-UploadSingleFile,
-UploadIsLoading,
-UploadErrorMessage,
-UploadAcceptedFormats,
+ UploadBasic,
+ UploadPrefilledFileList,
+ UploadRemoveFile,
+ UploadSingleFile,
+ UploadIsLoading,
+ UploadErrorMessage,
+ UploadAcceptedFormats,
} from 'Docs/uilib/components/upload/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden/demos.mdx
index 502314c21aa..9393ab514b9 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden/demos.mdx
@@ -3,10 +3,10 @@ showTabs: true
---
import {
-VisuallyHiddenDefault,
-VisuallyHiddenFocusable,
-VisuallyHiddenSection,
-VisuallyHiddenUseCase,
+ VisuallyHiddenDefault,
+ VisuallyHiddenFocusable,
+ VisuallyHiddenSection,
+ VisuallyHiddenUseCase,
} from 'Docs/uilib/components/visually-hidden/Examples'
## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements.mdx
index d2a3da167a8..ddb82ccdda5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements.mdx
@@ -8,9 +8,7 @@ import CodeBlock from 'dnb-design-system-portal/src/shared/tags/CodeBlock'
import NotSupportedElements from 'Docs/uilib/elements/not-supported'
import UnstyledElementsDemos from 'Docs/uilib/elements/unstyled'
import ListSummaryFromPages from 'dnb-design-system-portal/src/shared/parts/ListSummaryFromPages'
-import {
-StyledComponentsExample,
-} from 'Docs/uilib/Examples'
+import { StyledComponentsExample } from 'Docs/uilib/Examples'
# HTML Elements
@@ -52,7 +50,7 @@ render(
They work seamlessly with Styled Components (emotion) as well:
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.mdx
index 62e4330a683..831ad18d37c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.mdx
@@ -3,11 +3,11 @@ title: 'Anchor (Text Link)'
---
import {
-AnchorExampleInSection,
-AnchorExampleStates,
-AnchorExampleHelperClasses,
-AnchorExampleIcons,
-AnchorExampleHeadings,
+ AnchorExampleInSection,
+ AnchorExampleStates,
+ AnchorExampleHelperClasses,
+ AnchorExampleIcons,
+ AnchorExampleHeadings,
} from 'Docs/uilib/elements/anchor/Examples'
# Anchor (Text Link)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/blockquote.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/blockquote.mdx
index 666030797fa..88de20975a4 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/blockquote.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/blockquote.mdx
@@ -3,10 +3,10 @@ title: 'Blockquote'
---
import {
-BlockquoteDefaultExample,
-BlockquoteGraphicsExample,
-BlockquoteTransparentExample,
-BlockquoteTransparentOnTopExample
+ BlockquoteDefaultExample,
+ BlockquoteGraphicsExample,
+ BlockquoteTransparentExample,
+ BlockquoteTransparentOnTopExample,
} from 'Docs/uilib/elements/blockquote/Examples'
# Blockquote
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/heading.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/heading.mdx
index 0ec5ecf56b7..d3143cac0d8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/heading.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/heading.mdx
@@ -5,11 +5,11 @@ redirect_from:
---
import {
-HeadingTypographyExample,
-HeadingTypographyXLargeExample,
-HeadingVanillaHTMLExample,
-HeadingModifiersExample,
-HeadingMarginCollapsingExample
+ HeadingTypographyExample,
+ HeadingTypographyXLargeExample,
+ HeadingVanillaHTMLExample,
+ HeadingModifiersExample,
+ HeadingMarginCollapsingExample,
} from 'Docs/uilib/elements/heading/Examples'
# Heading
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/horizontal-rule.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/horizontal-rule.mdx
index 96e6ec3d982..dc375ef31f7 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/horizontal-rule.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/horizontal-rule.mdx
@@ -5,9 +5,9 @@ redirect_from:
---
import {
-HorizontalRuleDefaultExample,
-HorizontalRuleFullscreenExample,
-HorizontalRuleThicknessExample
+ HorizontalRuleDefaultExample,
+ HorizontalRuleFullscreenExample,
+ HorizontalRuleThicknessExample,
} from 'Docs/uilib/elements/horizontal-rule/Examples'
# Horizontal Rule
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/image.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/image.mdx
index 60a51fee12f..de314807eaa 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/image.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/image.mdx
@@ -3,10 +3,10 @@ title: 'Image'
---
import {
-ImagePlainExample,
-ImageInvalidSourceExample,
-ImageCaptionExample,
-ImageSkeletonExample
+ ImagePlainExample,
+ ImageInvalidSourceExample,
+ ImageCaptionExample,
+ ImageSkeletonExample,
} from 'Docs/uilib/elements/image/Examples'
# Image
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/lists.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/lists.mdx
index c7020e88117..c095191cef5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/lists.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/lists.mdx
@@ -3,13 +3,13 @@ title: 'Lists'
---
import {
-DefinitionListExample,
-DefinitionListHorizontalExample,
-UnorderedListExample,
-OrderedListNestedExample,
-OrderedListStylePositionExample,
-OrderedListOtherTypesExample,
-RemoveListExample
+ DefinitionListExample,
+ DefinitionListHorizontalExample,
+ UnorderedListExample,
+ OrderedListNestedExample,
+ OrderedListStylePositionExample,
+ OrderedListOtherTypesExample,
+ RemoveListExample,
} from 'Docs/uilib/elements/lists/Examples'
# Lists
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph.mdx
index 7c8dca1bc7d..ca66986eb9f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph.mdx
@@ -4,7 +4,12 @@ redirect_from:
- /uilib/typography/paragraph
---
-import { ParagraphDefault, ParagraphSmall, ParagraphAdditional, ParagraphModifiers } from 'Docs/uilib/elements/paragraph/Examples'
+import {
+ ParagraphDefault,
+ ParagraphSmall,
+ ParagraphAdditional,
+ ParagraphModifiers,
+} from 'Docs/uilib/elements/paragraph/Examples'
# Paragraph
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/unstyled.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/unstyled.mdx
index e8f58cc549b..c09bcc00a77 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/unstyled.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/unstyled.mdx
@@ -1,6 +1,4 @@
-import {
-UnstyledExample
-} from 'Docs/uilib/elements/unstyled/Examples'
+import { UnstyledExample } from 'Docs/uilib/elements/unstyled/Examples'
## Unstyled HTML Elements
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx
index 806404fdda1..f98c9a8a465 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx
@@ -2,19 +2,27 @@
showTabs: true
---
-import PaymentCard, { getCardData, Designs, ProductType, CardType } from '@dnb/eufemia/src/extensions/payment-card'
+import PaymentCard, {
+ getCardData,
+ Designs,
+ ProductType,
+ CardType,
+} from '@dnb/eufemia/src/extensions/payment-card'
import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
import {
-PaymentCardBasicExample,
-PaymentCardCustomExample,
-PaymentCardStatusExample,
-PaymentCardCompactExample,
-PaymentCardAllCardsExample,
+ PaymentCardBasicExample,
+ PaymentCardCustomExample,
+ PaymentCardStatusExample,
+ PaymentCardCompactExample,
+ PaymentCardAllCardsExample,
} from './Examples'
## Demos
-
+
### Basic example
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx
index 2af6beb2bc8..f71f157845d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx
@@ -4,22 +4,22 @@ showTabs: true
## Card Properties
-| Properties | Description |
-| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Properties | Description |
+| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `product_code` | _(required)_ if product code matches one of the codes in the list the card will get that design, if no match is found Default design will be used. |
-| `raw_data` | _(optional)_ useful if you want to create custom cards. See Card data properties. |
-| `card_status` | _(optional)_ use one of these: `active`, `blocked`, `expired`. Defaults to `active`. |
-| `variant` | _(optional)_ defines the appearance. Use one of these: `normal` or `compact`. Defaults to `normal`. |
-| `digits` | _(optional)_ will use 8 digits if none are specified. |
-| `card_number` | _(optional)_ masked card number. |
-| `locale` | _(optional)_ use `nb-NO` or `en-GB`. Defaults to the Eufemia provider. |
-| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
-| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
+| `raw_data` | _(optional)_ useful if you want to create custom cards. See Card data properties. |
+| `card_status` | _(optional)_ use one of these: `active`, `blocked`, `expired`. Defaults to `active`. |
+| `variant` | _(optional)_ defines the appearance. Use one of these: `normal` or `compact`. Defaults to `normal`. |
+| `digits` | _(optional)_ will use 8 digits if none are specified. |
+| `card_number` | _(optional)_ masked card number. |
+| `locale` | _(optional)_ use `nb-NO` or `en-GB`. Defaults to the Eufemia provider. |
+| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
+| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
## Card Data
-| Properties | Type | Description |
-| ------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Properties | Type | Description |
+| ------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productCode` | `string` | _(required)_ product code for the given card. |
| `productName` | `string` | _(required)_ product name. Can be blank. |
| `displayName` | `string` | _(required)_ the visible product name. Can be empty. |
@@ -29,8 +29,8 @@ showTabs: true
## Card Design
-| Properties | Type | Description |
-| ---------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Properties | Type | Description |
+| ---------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | _(required)_ string Name of design |
| `cardStyle` | `string` | _(required)_ css class. mainly to set background and color |
| `bankLogo` | `Union Type` | _(required)_ Union Type. import DNB from ./card/utils/Types to use. Can be DNB.Colored('HexValue') or DNB.Metalic |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/getting-started/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/getting-started/demos.mdx
index 784276de59b..70b6234da8a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/getting-started/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/getting-started/demos.mdx
@@ -11,14 +11,35 @@ import GithubLogo from 'Docs/contribute/assets/github-logo.js'
The purpose of having Eufemia Demos is that you as a developer can see the code and understand Eufemia and be inspired - and not least, give you a good start.
-
+
## Form Demo #1
The [code](https://github.com/dnbexperience/eufemia-demo/blob/main/src/form-demos/form-demo-01.js) for this little demo app is to show how to make a form layout with Eufemia. It is mainly to demonstrate the visual part, but includes also some event handling - but no state management.
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/01-about-design-systems.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/01-about-design-systems.mdx
index f3515536a38..550c070f5d1 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/01-about-design-systems.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/01-about-design-systems.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - What forms the system?'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
import InlineImg from 'dnb-design-system-portal/src/shared/tags/Img'
import WhatIsEufemia from 'Docs/uilib/intro/assets/what-is-a-design-system.svg'
@@ -33,10 +35,17 @@ Eufemia as a Design System consist of many sub-systems, like:
All of these sub-systems dictates on how components, extensions and styles are build. And documentation, principles and guides of best practices will again tell how to build solutions with good UX.
-
+
---
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/02-common-patterns.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/02-common-patterns.mdx
index 23e73cd395f..076e4788481 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/02-common-patterns.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/02-common-patterns.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - Common Design Patterns'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
@@ -23,6 +25,9 @@ Both UX designers and frontend web developers will have a huge benefit of **"tal
---
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx
index 04bc922cba8..2754cf43153 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - Accessibility'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
@@ -57,6 +59,9 @@ And all form components includes the [FormStatus](!/uilib/components/form-status
---
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/04-ux-handover.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/04-ux-handover.mdx
index 6dd67892dd5..616e2a894a3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/04-ux-handover.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/04-ux-handover.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - UX handover'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
@@ -43,6 +45,9 @@ Remember, everything should be in the **8px grid** (0.5rem) spacing - even it th
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/05-eufemia-for-developers.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/05-eufemia-for-developers.mdx
index 23ef9543942..92ebbe6d313 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/05-eufemia-for-developers.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/05-eufemia-for-developers.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - for Developers'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
@@ -24,6 +26,9 @@ What Eufemia offers for Developers? NPM Package including:
---
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/06-css-packages.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/06-css-packages.mdx
index b78591a7ea3..6892dec194d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/06-css-packages.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/06-css-packages.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - CSS Packages'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
import { Next } from 'dnb-design-system-portal/src/shared/tags/Intro'
import { Link } from '@dnb/eufemia/src/elements'
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/07-typography.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/07-typography.mdx
index 2524d4ac6b8..9dfd664ae8d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/07-typography.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/07-typography.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - Typography'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
@@ -29,6 +31,9 @@ Read [more about Typography](!/uilib/typography)
---
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/08-color-usage.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/08-color-usage.mdx
index 0e48ed4715b..8849510a7d8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/08-color-usage.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/08-color-usage.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - Color usage'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/09-icons.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/09-icons.mdx
index 9de402eb21b..9ceffa9a5e5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/09-icons.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/09-icons.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - Icons'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
@@ -30,6 +32,9 @@ It is recommended to use the [Icon Component](!/uilib/components/icon) to displa
---
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/10-layout.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/10-layout.mdx
index 82c1e3e1553..e5458a8b799 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/10-layout.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/10-layout.mdx
@@ -3,10 +3,10 @@ fullscreen: true
search: 'Intro - Layout'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
-import {
-LayoutExample,
-} from 'Docs/uilib/intro/Examples'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
+import { LayoutExample } from 'Docs/uilib/intro/Examples'
@@ -34,6 +34,9 @@ But there is also support for basic spacing in every component:
---
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/11-components-elements-extensions.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/11-components-elements-extensions.mdx
index 5045a45bc82..29c10843373 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/11-components-elements-extensions.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/11-components-elements-extensions.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - Components, Elements and Extensions'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
import { Button } from '@dnb/eufemia/src'
@@ -15,7 +17,7 @@ import { Button } from '@dnb/eufemia/src'
Components are custom made **user interaction elements** with an internal state, your application can interact with.
-
+
## [Elements](!/uilib/elements)
@@ -23,7 +25,9 @@ Components are custom made **user interaction elements** with an internal state,
Elements are basicity ready to use styled HTML elements.
## [Extensions](!/uilib/extensions)
@@ -32,6 +36,9 @@ Eufemia extensions are reusable parts that not fits naturally in to a component
---
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/12-usage-of-components-elements.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/12-usage-of-components-elements.mdx
index b22a47c2e23..3457cf325b0 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/12-usage-of-components-elements.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/12-usage-of-components-elements.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - Usage of components and elements'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
@@ -54,6 +56,9 @@ Read more about using elements as [React JSX](!/uilib/elements#react-jsx)
---
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/13-quality-and-tests.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/13-quality-and-tests.mdx
index 30f46b1bcfc..25556b7cc29 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/13-quality-and-tests.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/13-quality-and-tests.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - Quality and Tests'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/14-helpers.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/14-helpers.mdx
index bb6aa507340..c872d9d39e2 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/14-helpers.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/14-helpers.mdx
@@ -5,7 +5,9 @@ redirect_from:
- /uilib/intro/14-helper-classes
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/15-summary.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/15-summary.mdx
index f019f11df14..f3c2737a32c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/15-summary.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/15-summary.mdx
@@ -3,7 +3,9 @@ fullscreen: true
search: 'Intro - Summary'
---
-import Intro, { IntroFooter } from 'dnb-design-system-portal/src/shared/tags/Intro'
+import Intro, {
+ IntroFooter,
+} from 'dnb-design-system-portal/src/shared/tags/Intro'
@@ -13,6 +15,9 @@ The UX Team behind the **Eufemia Design System** would love to hear [your meanin
---
-
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/icons.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/icons.mdx
index 66e67a175dc..149451d52dd 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/icons.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/icons.mdx
@@ -3,9 +3,9 @@ title: 'Icons'
---
import {
-IconsDecorativeExample,
-IconsResponsiveExample,
-IconsSVGExample
+ IconsDecorativeExample,
+ IconsResponsiveExample,
+ IconsSVGExample,
} from 'Docs/uilib/usage/accessibility/icons/Examples'
# Accessibility of Icons
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/best-practices/for-testing.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/best-practices/for-testing.mdx
index e2f83cab893..d99c97dbea2 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/usage/best-practices/for-testing.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/best-practices/for-testing.mdx
@@ -27,7 +27,7 @@ Do not write unit tests in frontend code. But make integration tests. Avoid test
Think as a user. Think how the user will interact with your application. Do not shallow test, but test components like a user would interact (use mount or render to also test their children).
-Try to use queries that help you to find elements in the same way that end-users will find them.
+Try to use queries that help you to find elements in the same way that end-users will find them.
React Testing Library provides queries that allow you to find elements by their role, label, placeholder, text contents, display value, alt text, title, test ID (it is only recommended to use this after the other queries don't work for your use case).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/component-properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/component-properties.mdx
index ce335f739c0..4e66b78850d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/component-properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/component-properties.mdx
@@ -4,8 +4,8 @@ order: 1
---
import {
-LargeButtonsAndIconsExample,
-ExtendedExample
+ LargeButtonsAndIconsExample,
+ ExtendedExample,
} from 'Docs/uilib/usage/customisation/Examples'
# Component Properties
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/react.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/react.mdx
index 78c38d11f03..f0642bdba17 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/react.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/react.mdx
@@ -4,8 +4,8 @@ order: 5
---
import {
-BasicButtonsExample,
-EventsExample
+ BasicButtonsExample,
+ EventsExample,
} from 'Docs/uilib/usage/first-steps/Examples'
# React JS for the web
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/the-basics.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/the-basics.mdx
index 87c00cc1ef5..0fa9ffaec01 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/the-basics.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/the-basics.mdx
@@ -3,9 +3,7 @@ title: 'The Basics'
order: 2
---
-import {
-PrimaryButtonExample,
-} from 'Docs/uilib/usage/first-steps/Examples'
+import { PrimaryButtonExample } from 'Docs/uilib/usage/first-steps/Examples'
# The Basics
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/layout/media-queries.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/layout/media-queries.mdx
index 511a8b3efbf..e74efb1fbe4 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/usage/layout/media-queries.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/layout/media-queries.mdx
@@ -4,8 +4,8 @@ order: 2
---
import {
-MediaQueryLiveExample,
-MediaQueryUseMedia,
+ MediaQueryLiveExample,
+ MediaQueryUseMedia,
} from 'dnb-design-system-portal/src/docs/uilib/usage/layout/Examples'
# Media Queries and Breakpoints
+
+