docs: fix outdated boolean usage (#2013)

packages/dnb-design-system-portal/src/docs/contribute/style-guides/naming.md

@@ -66,7 +66,7 @@ HTML attributes uses `kebab-case`, so we needed something between.
 The aspect to distinguish between case styles will also make code easier to read and support future code changes and refactoring.
 
 ```jsx
-<Component aria-hidden="true" myReactProp={...} on_click={...} />
+<Component aria-hidden={true} myReactProp={...} on_click={...} />
 ```
 
 _Update:_ Eufemia does not need to support **Web Components** anymore. That makes it possible to use **camel case** for React Component Properties.

packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.tsx

@@ -123,7 +123,7 @@ export const AutocompleteDynamicallyUpdatedData = () => (
           <Autocomplete
             mode="async"
             on_type={onTypeHandler}
-            no_scroll_animation="true"
+            no_scroll_animation={true}
             placeholder="Search ..."
           />
         )
@@ -152,8 +152,8 @@ export const AutocompleteFirstFocusUpdate = () => (
         return (
           <Autocomplete
             mode="async"
-            no_scroll_animation="true"
-            prevent_selection="true"
+            no_scroll_animation={true}
+            prevent_selection={true}
             on_type={({ value /* updateData, ... */ }) => {
               console.log('on_type', value)
             }}

packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.tsx

@@ -213,10 +213,10 @@ export const DatePickerCalendar = () => (
   <Wrapper>
     <ComponentBox data-visual-test="date-picker-calendar">
       <DatePicker
-        opened="true"
-        prevent_close="true"
-        disable_autofocus="true"
-        range="true"
+        opened={true}
+        prevent_close={true}
+        disable_autofocus={true}
+        range={true}
         start_date="2019-05-05"
         end_date="2019-06-05"
       />

packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx

@@ -337,7 +337,7 @@ export const DropdownMoreMenu = () => {
         data-visual-test="dropdown-more_menu"
       >
         <Dropdown
-          more_menu="true"
+          more_menu={true}
           size="small"
           title="Choose an item"
           data={() => [
@@ -354,7 +354,7 @@ export const DropdownMoreMenu = () => {
           )}
         />
         <Dropdown
-          prevent_selection="true"
+          prevent_selection={true}
           align_dropdown="right"
           size="small"
           title={null}
@@ -373,7 +373,7 @@ export const DropdownMoreMenu = () => {
           )}
         />
         <Dropdown
-          more_menu="true"
+          more_menu={true}
           title="Choose an item"
           data={[
             <Link href="/" key="item-1">
@@ -385,7 +385,7 @@ export const DropdownMoreMenu = () => {
           right="small"
         />
         <Dropdown
-          prevent_selection="true"
+          prevent_selection={true}
           align_dropdown="right"
           title={null}
           aria-label="Choose an item"

packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/info.md

@@ -22,11 +22,11 @@ When you need to provide a considerable amount of options to the user and do not
 
 ## Action Menu
 
-The Dropdown component can easily be used as a so-called **action button** by setting the prop `action_menu="true"`. In mobile view, the title/text will be hidden, only showing the icon and the DrawerList will open from the browser bottom.
+The Dropdown component can easily be used as a so-called **action button** by setting the prop `action_menu={true}`. In mobile view, the title/text will be hidden, only showing the icon and the DrawerList will open from the browser bottom.
 
 ## Menu Button
 
-The Dropdown component can easily be used as a so called **menu button** by setting the prop `more_menu="true"` which shows then the [more](/icons/primary#icon-more) icon, appears as dots. You also could use `prevent_selection="true"` together with an empty title `title=""` and `aria-label="Choose an item"`.
+The Dropdown component can easily be used as a so called **menu button** by setting the prop `more_menu={true}` which shows then the [more](/icons/primary#icon-more) icon, appears as dots. You also could use `prevent_selection={true}` together with an empty title `title=""` and `aria-label="Choose an item"`.
 
 ## Accessibility
 
@@ -55,7 +55,7 @@ You can also set the width directly, but then it has to be defined like so (incl
   width: 10rem;
 }
 
-/** If more_menu="true" is used */
+/** If more_menu={true} is used */
 .dnb-dropdown--is-popup .dnb-drawer-list__root {
   width: 10rem;
 }

packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.tsx

@@ -342,7 +342,7 @@ const VisualTestVerticalEverything = () => (
     data-visual-test="form-row-all-vertical-everything"
   >
     <WidthLimit>
-      <FormRow label="Vertical everything:" vertical="true">
+      <FormRow label="Vertical everything:" vertical={true}>
         <AllComponents />
       </FormRow>
     </WidthLimit>
@@ -641,7 +641,7 @@ export function FormRowSpacingInfo() {
 export function FormRowResponsiveInfo() {
   return (
     <ComponentBox>
-      <FormRow responsive="true">
+      <FormRow responsive={true}>
         <Input label="Input label">Value</Input>
       </FormRow>
     </ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx

@@ -25,10 +25,10 @@ export const GlobalStatusError = () => (
           status_anchor_label: 'eksempel',
         },
       ]}
-      show="true"
+      show={true}
       autoscroll="false"
-      no_animation="true"
-      omit_set_focus="true"
+      no_animation={true}
+      omit_set_focus={true}
       id="demo-1"
     />
   </ComponentBox>
@@ -41,10 +41,10 @@ export const GlobalStatusInfo = () => (
       title="Custom info title ..."
       text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
       items={['Status text 1', 'Status text 2']}
-      show="true"
+      show={true}
       autoscroll="false"
-      no_animation="true"
-      omit_set_focus="true"
+      no_animation={true}
+      omit_set_focus={true}
       id="demo-4"
     />
   </ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/components/global-status/properties.md

@@ -8,16 +8,16 @@ showTabs: true
 | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `id`                                        | _(optional)_ the main ID. Defaults to the prop                                                                                                                                                           |
 | `title`                                     | _(optional)_ the title appears as a part of the status content. Use `false` to hide / remove the title and icon. Defaults to `En feil har skjedd`.                                                       |
-| `text` or `children`                        | _(optional)_ the text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.                                                                   |
-| `items`                                     | _(optional)_ the items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. Se **Item Object** example below.    |
-| `icon`                                      | _(optional)_ the icon shown before the status title. Defaults to `exclamation`.                                                                                                                           |
+| `text` or `children`                        | _(optional)_ the text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.                                                                  |
+| `items`                                     | _(optional)_ the items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. Se **Item Object** example below.     |
+| `icon`                                      | _(optional)_ the icon shown before the status title. Defaults to `exclamation`.                                                                                                                          |
 | `state`                                     | _(optional)_ defines the visual appearance of the status. There are two main statuses `error` and `info`. The default status is `error`.                                                                 |
 | `icon_size`                                 | _(optional)_ the icon size of the title icon shows. Defaults to `medium`.                                                                                                                                |
 | `show`                                      | _(optional)_ set to `true` or `false` to manually make the global status visible. Defaults to `true`.                                                                                                    |
 | `autoclose`                                 | _(optional)_ set to `true` to automatically close the global status if there are no more left items in the provider stack. Defaults to `true`.                                                           |
 | `autoscroll`                                | _(optional)_ set to `true` to automatically scroll the page to the appeared global status. Defaults to `true`.                                                                                           |
 | `no_animation`                              | _(optional)_ set to `true` to disable the show/hide/slide/fade/grow/shrink animation. Defaults to `false`.                                                                                               |
-| `delay`                                     | _(optional)_ defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`.                                                                     |
+| `delay`                                     | _(optional)_ defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`.                                                                      |
 | `hide_close_button`                         | _(optional)_ set to `true` if the close button should be hidden for the user. Defaults to `false`.                                                                                                       |
 | `close_text`                                | _(optional)_ text of the close button. Defaults to `Lukk`.                                                                                                                                               |
 | `status_anchor_text`                        | _(optional)_ defines the anchor text showing up after every item, in case there is a `status_id` defined. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition. |
@@ -41,7 +41,7 @@ const items = [
 | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `text`                   | _(required)_ the text appears as the status content. Beside plain text, you can send in a React component as well.                                                                   |
 | `status_id`              | _(required)_ defines an unique ID so the message can be either updated or removed individual.                                                                                        |
-| `status_anchor_url`      | _(optional)_ Use `status_anchor_url="true"` to enable the go-to link, defined as a url hash using the `status_id`. Or provide it with an actual url: `status_anchor_url="https://"`. |
+| `status_anchor_url`      | _(optional)_ Use `status_anchor_url={true}` to enable the go-to link, defined as a url hash using the `status_id`. Or provide it with an actual url: `status_anchor_url="https://"`. |
 | `status_anchor_text`     | _(optional)_ defines the anchor text showing up after every item. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition.                     |
 | `status_anchor_label`    | _(optional)_ adds an additional text to the anchor (replaces `%s`), showing up after every item. Is used by default by other form components, if they have an `label`.               |
 
@@ -70,4 +70,4 @@ The goal is to update the content (properties/events) of the target GlobalStatus
 | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `id`                  | _(optional)_ the main ID. Defaults to the prop `main`.                                                                                                                                                                                   |
 | `status_id`           | _(optional)_ define a new stack ID so you can remove it with the same ID later on. Defaults to `null`.                                                                                                                                   |
-| `remove_on_unmount`   | _(optional)_ set to `true` if you want that the component `<GlobalStatus.Add remove_on_unmount="true" ... />` should automatically remove the stacked status from the target **GlobalStatus** on component unmount. Defaults to `false`. |
+| `remove_on_unmount`   | _(optional)_ set to `true` if you want that the component `<GlobalStatus.Add remove_on_unmount={true} ... />` should automatically remove the stacked status from the target **GlobalStatus** on component unmount. Defaults to `false`. |

packages/dnb-design-system-portal/src/docs/uilib/components/icon/Examples.tsx

@@ -33,11 +33,11 @@ export const IconBorder = () => (
     scope={{ Bell, BellMedium }}
   >
     <P>
-      <Icon border="true" icon={Bell} right />
-      <Icon border="true" icon={BellMedium} size="medium" right />
-      <IconPrimary border="true" icon={'information'} right />
+      <Icon border={true} icon={Bell} right />
+      <Icon border={true} icon={BellMedium} size="medium" right />
+      <IconPrimary border={true} icon={'information'} right />
       <IconPrimary
-        border="true"
+        border={true}
         icon={'information'}
         size="medium"
         right

packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/Examples.tsx

@@ -170,7 +170,7 @@ export const InputMaskedExamplePrefix = () => (
         number_mask={{
           prefix: 'NOK ',
         }}
-        stretch="true"
+        stretch={true}
         placeholder="Enter a number"
         on_change={({ numberValue }) => {
           console.log(numberValue)

packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.md

@@ -95,7 +95,7 @@ render(
     label="Email:"
     mask={emailMask}
     placeholder="@."
-    keep_placeholder="true"
+    keep_placeholder={true}
   />
 )
 ```

packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.tsx

@@ -192,7 +192,7 @@ export const InputExampleSubmit = () => (
             type="search"
             label="Label:"
             value="Input ..."
-            selectall="true"
+            selectall={true}
             on_submit={(event) => {
               console.log('Input.on_submit', event)
             }}

packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/Examples.tsx

@@ -29,7 +29,7 @@ export const ProgressIndicatorCircularLabelHorizontalExample = () => (
     <ProgressIndicator
       // label="Custom label ..."
       type="circular"
-      show_label="true"
+      show_label={true}
       label_direction="horizontal"
     />
   </ComponentBox>
@@ -40,7 +40,7 @@ export const ProgressIndicatorCircularLabelVerticalExample = () => (
     <ProgressIndicator
       // label="Custom label ..."
       type="circular"
-      show_label="true"
+      show_label={true}
       label_direction="vertical"
     />
   </ComponentBox>
@@ -186,7 +186,7 @@ export const ProgressIndicatorLinearLabelHorizontalExample = () => (
     <ProgressIndicator
       type="linear"
       // label="Custom label ..."
-      show_label="true"
+      show_label={true}
       label_direction="horizontal"
     />
   </ComponentBox>
@@ -197,7 +197,7 @@ export const ProgressIndicatorLinearLabelVerticalExample = () => (
     <ProgressIndicator
       type="linear"
       // label="Custom label ..."
-      show_label="true"
+      show_label={true}
       label_direction="vertical"
     />
   </ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/Examples.tsx

@@ -115,7 +115,7 @@ export const SkeletonVisualTests = () => {
         data-visual-test="skeleton-all-vertical"
         scope={{ AllComponents }}
       >
-        <FormRow vertical="true">
+        <FormRow vertical={true}>
           <Skeleton show no_animation>
             <AllComponents />
           </Skeleton>

packages/dnb-design-system-portal/src/docs/uilib/components/space/properties.md

@@ -21,7 +21,7 @@ These properties are available in many other components and elements.
 | `element`     | _(optional)_ defines the HTML element used. Defaults to `div`.                                                                                                                                         |
 | `stretch`     | _(optional)_ if set to `true`, then the space element will be 100% in `width`.                                                                                                                         |
 | `inline`      | _(optional)_ if set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`.                                                              |
-| `no_collapse` | _(optional)_ if set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline="true"` in combination. |
+| `no_collapse` | _(optional)_ if set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline={true}` in combination. |
 
 ## Zero
 

packages/dnb-design-system-portal/src/docs/uilib/components/textarea/Examples.tsx

@@ -57,7 +57,7 @@ export const TextareaExampleStretched = () => (
     <ComponentBox data-visual-test="textarea-stretch">
       <Textarea
         label="Horizontal:"
-        stretch="true"
+        stretch={true}
         rows="3"
         value="Nec litora inceptos vestibulum id interdum donec gravida."
       />

packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/Examples.tsx

@@ -46,7 +46,7 @@ export const ToggleButtonMultiselect = () => (
   <ComponentBox data-visual-test="toggle-button-group-multiselect">
     <ToggleButton.Group
       label="Multi-select:"
-      multiselect="true"
+      multiselect={true}
       values={['first', 'third']}
       on_change={({ values }) => {
         console.log('on_change', values)
@@ -89,7 +89,7 @@ export const ToggleButtonStatus = () => (
     >
       <ToggleButton text="First" value="first" />
       <ToggleButton text="Second" value="second" checked />
-      <ToggleButton text="Third" value="third" checked="true" />
+      <ToggleButton text="Third" value="third" checked={true} />
     </ToggleButton.Group>
   </ComponentBox>
 )

packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/icons.md

@@ -14,7 +14,7 @@ By using inline SVG, we have the possibility to make graphical assets both **res
 
 ## Decorative Icons
 
-If your icons are purely **decorative**, you’ll need to manually add an **aria-hidden** (results in `aria-hidden="true"`) attribute to each of your icons so your app is "accessible".
+If your icons are purely **decorative**, you’ll need to manually add an **aria-hidden** (results in `aria-hidden={true}`) attribute to each of your icons so your app is "accessible".
 
 <IconsDecorativeExample />
 

packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/icons/Examples.tsx

@@ -6,7 +6,7 @@ import Beach from 'dnb-design-system-portal/src/docs/uilib/usage/accessibility/a
 
 export const IconsDecorativeExample = () => (
   <ComponentBox scope={{ Beach }}>
-    <Icon icon={Beach} size="64" title="Beach" aria-hidden="true" />
+    <Icon icon={Beach} size="64" title="Beach" aria-hidden={true} />
   </ComponentBox>
 )
 

packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js

@@ -95,7 +95,7 @@ export default function StickyMenuBar({
             id="toggle-sidebar-menu"
             size="default"
             icon_size="default"
-            aria-haspopup="true"
+            aria-haspopup={true}
             aria-controls="portal-sidebar-menu"
             aria-expanded={isOpen}
             aria-label="Section Content Menu"