### Drawer Scroll View Setup Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx

Provides an example of setting up a scrollable view within the Drawer.

```javascript
import { DrawerScrollViewSetup } from 'Docs/uilib/components/drawer/Examples'
```

--------------------------------

### HTML Focus Management Setup

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/focus.mdx

Example of setting up focusable elements within the DOM structure.

```html
<body>
  <nav><!-- focusable navigation --></nav>
  <main>
    <!-- more markup with focusable HTMLElements -->
    <h1 class="dnb-h--xx-large dnb-no-focus" tabindex="-1">Main Title</h1>
    <a href="/path">I'm now focusable on next tab</a>
  </main>
</body>
```

--------------------------------

### Basic Iterate Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Visibility/demos.mdx

Demonstrates the fundamental usage of the Iterate component. No specific setup is required beyond importing the component.

```jsx
import * as Examples from './Examples'

## Demos

### Basic example

<Examples.BasicExample />
```

--------------------------------

### Render Before getting started button

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/first-contribution.mdx

Displays a navigation button to the technical documentation section for new contributors.

```jsx
<Section variant="information" innerSpace={{ block: 'large' }}>
  <Button
    href="/contribute/first-contribution/before-started"
    size="large"
    text="Before getting started"
    icon="chevron_right"
    variant="secondary"
  />
</Section>
```

--------------------------------

### Lead Element Examples

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/elements/lead/demos.mdx

Renders various examples of the Lead component. Ensure the Examples component is correctly imported and configured.

```javascript
import * as Examples from './Examples'

<Examples.LeadExamples />
```

--------------------------------

### Render Next up button

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/first-contribution.mdx

Displays a navigation button to the getting started guide.

```jsx
<Button
  href="/contribute/getting-started"
  size="large"
  text="Next up: Getting started"
  icon="chevron_right"
  variant="tertiary"
  bottom="2rem"
/>
```

--------------------------------

### HelpButton Render Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/properties.mdx

Provides a live example of how to render the HelpButton component. This is helpful for visualizing its appearance and basic functionality.

```javascript
import { HelpButtonRenderExample } from 'Docs/uilib/components/help-button/Examples'

<HelpButtonRenderExample />
```

--------------------------------

### Run DNB Eufemia Portal Locally

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/README.md

Use this command to start the DNB Eufemia Design System Portal for local development. Ensure Node.js and NPM/Yarn are installed.

```bash
yarn workspace dnb-design-system-portal start
```

--------------------------------

### Start the Eufemia portal locally

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/first-contribution/before-started.mdx

Starts the development server for the portal, enabling hot-reloading for MDX, SCSS, and code changes.

```bash
$ yarn start
```

--------------------------------

### Menu with Links Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/menu/demos.mdx

Provides an example of using the Menu component with navigation links.

```javascript
import * as Examples from './Examples'

<Examples.MenuExampleWithLinks />
```

--------------------------------

### Basic Menu Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/menu/demos.mdx

Demonstrates the default configuration of the Menu component.

```javascript
import * as Examples from './Examples'

<Examples.MenuExampleDefault />
```

--------------------------------

### Page Layout Example with Grid

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/layout/grid/visual-tests/page-layout.mdx

This example demonstrates how to use the Grid component for a page layout. It visualizes each column and adapts to different breakpoints when the browser window is resized.

```javascript
import * as Examples from './Examples'

This is a demo of how to use the Grid component for a page layout. It visualizes each column, instead of the actual content.
Resize your browser window to see how it changes based on different breakpoints.

<Examples.PageLayoutExample />
```

--------------------------------

### Component Implementation Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/info.mdx

Basic usage example for including the PaymentCard in an application.

```jsx
import '@dnb/eufemia/extensions/payment-card/style'
import PaymentCard, {
  getCardData,
} from '@dnb/eufemia/extensions/payment-card'

render(<PaymentCard productCode="..." />)
```

--------------------------------

### Basic Drawer Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx

Demonstrates the default usage of the Drawer component.

```javascript
import { SimpleDrawerExample } from 'Docs/uilib/components/drawer/Examples'
```

--------------------------------

### Top Placement Drawer Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx

Shows how to configure the Drawer to appear at the top of the screen.

```javascript
import { TopPlacementDrawerExample } from 'Docs/uilib/components/drawer/Examples'
```

--------------------------------

### Bottom Placement Drawer Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx

Demonstrates how to configure the Drawer to appear at the bottom of the screen.

```javascript
import { BottomPlacementDrawerExample } from 'Docs/uilib/components/drawer/Examples'
```

--------------------------------

### Theme Basis Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming/theme/demos.mdx

Displays the foundational theme configuration.

```jsx
<ThemeBasis />
```

--------------------------------

### Install Project Dependencies with Yarn

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/getting-started/install-dependencies.mdx

Run this command in your project's root directory to install all required packages. Ensure Yarn is installed globally.

```bash
yarn install
```

--------------------------------

### Default Copy On Click Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/demos.mdx

Renders the default Copy On Click component. No specific setup is required beyond importing the component.

```jsx
import * as Examples from './Examples'

<Examples.Default />
```

--------------------------------

### Form Nested Sizing Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Appearance/demos.mdx

Illustrates how form elements behave with nested sizing configurations. Requires the Examples component.

```javascript
import * as Examples from './Examples'

<Examples.NestedSize />
```

--------------------------------

### Component property migration examples

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v7-info.mdx

Examples of updating component properties from the old style_type syntax to the new size and modifier properties.

```html
<H1 size="x-large">
```

```html
<P modifier="small">
```

--------------------------------

### Fullscreen Drawer Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx

Illustrates how to make the Drawer occupy the entire screen.

```javascript
import { FullscreenDrawerExample } from 'Docs/uilib/components/drawer/Examples'
```

--------------------------------

### Ingress Component Examples

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/elements/ingress/demos.mdx

Renders various examples of the Ingress component. This is a placeholder for actual code examples that would be defined in the Examples.IngressExamples component.

```javascript
import * as Examples from './Examples'

<Examples.IngressExamples />
```

--------------------------------

### Wizard Step: Dynamic Steps

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Step/demos.mdx

Demonstrates how to implement dynamic steps in a wizard. This example uses a React component from the Examples namespace.

```jsx
import * as Examples from './Examples'

<Examples.DynamicSteps />
```

--------------------------------

### Install Eufemia v11

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx

Commands to install the v11 release using common package managers.

```bash
$ npm i @dnb/eufemia@11
# or
$ yarn add @dnb/eufemia@11
# or
$ pnpm add @dnb/eufemia@11
```

--------------------------------

### Install screenshot browser

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/faq.mdx

Commands to manage Playwright browser installations for specific workspaces.

```bash
yarn workspace @dnb/eufemia playwright uninstall --all
yarn workspace @dnb/eufemia add -D @playwright/test
yarn workspace @dnb/eufemia playwright install firefox

yarn workspace dnb-design-system-portal playwright uninstall --all
yarn workspace dnb-design-system-portal add -D @playwright/test
yarn workspace dnb-design-system-portal playwright install firefox
```

--------------------------------

### Install Agent Skills

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/README.md

Installs portable Agent Skills into a project that already depends on @dnb/eufemia.

```bash
yarn eufemia skills install
```

--------------------------------

### Basic Popover Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/popover/demos.mdx

A fundamental example of the Popover component.

```javascript
import * as Examples from './Examples'

<Examples.PopoverExampleBasic />
```

--------------------------------

### Automate Skill Installation in CI

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/tools.mdx

Commands for non-interactive environments to install skills to a specific target directory.

```bash
yarn eufemia skills install --target .agents/skills
```

```bash
npm exec eufemia -- skills install
pnpm exec eufemia skills install
```

--------------------------------

### MCP Configuration File

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/tools.mdx

Example configuration for VS Code MCP settings.

```json
{
  "servers": {
    "eufemia": {
      "command": "node",
      "args": [
        "${workspaceFolder}/node_modules/@dnb/eufemia/mcp/mcp-docs-server.js"
      ]
    }
  }
}
```

--------------------------------

### Install HTTP server dependencies

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/mcp/README.md

Install additional dependencies required for the HTTP server transport.

```bash
npm install --save-dev @modelcontextprotocol/node @modelcontextprotocol/server-legacy express
# or
yarn add --dev @modelcontextprotocol/node @modelcontextprotocol/server-legacy express
```

--------------------------------

### Install Eufemia Agent Skills

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/tools.mdx

Commands to install project skills in environments with or without an existing Eufemia dependency.

```bash
yarn eufemia skills install
```

```bash
npm exec --yes --package @dnb/eufemia@latest -- eufemia skills install
```

--------------------------------

### Drawer with Custom Content Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx

Demonstrates how to render custom content within the Drawer.

```javascript
import { FullDrawerExample } from 'Docs/uilib/components/drawer/Examples'
```

--------------------------------

### Street Address Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Address/demos.mdx

Renders the Address component for street address input. Ensure the Examples module is correctly imported.

```javascript
import * as Examples from './Examples'

<Examples.StreetAddress />
```

--------------------------------

### Default Popover Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/popover/demos.mdx

Demonstrates the default configuration of the Popover component.

```javascript
import * as Examples from './Examples'

<Examples.PopoverExampleDefault />
```

--------------------------------

### Install @dnb/eufemia v9 with NPM or Yarn

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v9-info.mdx

Use NPM or Yarn to install the specified version of the @dnb/eufemia package.

```bash
$ npm i @dnb/eufemia@9
# or
$ yarn add @dnb/eufemia@9
```

--------------------------------

### Upload Width Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Upload/demos.mdx

Demonstrates controlling the width of the Upload component.

```jsx
import * as Examples from './Examples'

<Examples.Width />
```

--------------------------------

### Form Medium Size Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Appearance/demos.mdx

Renders a form with medium-sized elements. Ensure the Examples component is correctly imported.

```javascript
import * as Examples from './Examples'

<Examples.Size />
```

--------------------------------

### Configuring with data and UI options

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/MultiSelection/info.mdx

Example showing how to provide data and enable search and tag display features.

```jsx
import { Field } from '@dnb/eufemia/extensions/forms'

const data = [
  {
    value: 'option1',
    title: 'Option 1',
    text: 'Text',
    description: 'Description',
  },
  { value: 'option2', title: 'Option 2', text: 'Text' },
  { value: 'option3', title: 'Option 3', description: 'Description' },
]

render(
  <Field.MultiSelection
    label="Select items"
    data={data}
    showSearchField
    showSelectedTags
  />
)
```

--------------------------------

### Postal Address Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Address/demos.mdx

Renders the Address component for postal address input. Ensure the Examples module is correctly imported.

```javascript
import * as Examples from './Examples'

<Examples.PostalAddress />
```

--------------------------------

### Custom Component Example with useValueProps

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/useValueProps/demos.mdx

Demonstrates how to integrate the useValueProps hook within a custom component. This example assumes the existence of an Examples.CustomComponentExample component.

```javascript
import * as Examples from './Examples'

## Demos

<Examples.CustomComponentExample />
```

--------------------------------

### Example URL structure

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/location-hooks/info.mdx

The format used for storing the current wizard step in the browser location.

```bash
https://www.dnb.no/path/?unique-id-step=1
```

--------------------------------

### Linked DatePickers Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.mdx

Shows how two DatePicker components can be linked, potentially for start and end date selection.

```jsx
import { DatePickerLinked } from './Examples'

<DatePickerLinked />
```

--------------------------------

### Accordion Menu Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/menu/demos.mdx

Shows how to implement the Menu component in an accordion layout.

```javascript
import * as Examples from './Examples'

<Examples.MenuExampleAccordion />
```

--------------------------------

### Default Blockquote Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/elements/blockquote/demos.mdx

Renders a standard blockquote element. No specific setup is required beyond importing the component.

```jsx
import {
  BlockquoteDefaultExample,
} from 'Docs/uilib/elements/blockquote/Examples'

<BlockquoteDefaultExample />
```

--------------------------------

### Quick Start Commands

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/vite/README.md

Common commands for running the Vite dev server, building for production, pushing to Algolia, previewing the production build, and running end-to-end tests.

```bash
yarn start              # Vite dev server
yarn build              # Production prerender build
yarn build:algolia      # Push search index to Algolia
yarn serve              # Preview the production build locally
yarn test:e2e:portal    # Run e2e tests against a preview server
```

--------------------------------

### Linked Tooltip to Vanilla Button Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/demos.mdx

Shows a tooltip linked to a standard HTML button. This example highlights integration with non-custom components.

```jsx
import {
  TooltipExampleLinked,
} from 'Docs/uilib/components/tooltip/Examples'

<VisibleWhenNotVisualTest>
  <TooltipExampleLinked />
</VisibleWhenNotVisualTest>
```

--------------------------------

### String Field: Multiline Placeholder Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx

Shows a multiline String field utilizing a placeholder to guide user input.

```javascript
import * as Examples from './Examples'

<Examples.MultiplePlaceholder />
```

--------------------------------

### Checked Switch Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/switch/demos.mdx

Demonstrates the Switch component in its checked state.

```javascript
import {
  SwitchExampleChecked,
} from 'Docs/uilib/components/switch/Examples'

<SwitchExampleChecked />
```

--------------------------------

### Space Provider Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/layout/space/properties.mdx

Demonstrates the usage of the Space Provider component with the collapse property.

```jsx
<ProviderExample />
```

--------------------------------

### Build and serve the portal locally

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/first-contribution/before-started.mdx

Commands to generate a static build of the portal and serve it from the public directory.

```bash
$ yarn workspace dnb-design-system-portal build
```

```bash
$ yarn workspace dnb-design-system-portal serve
```

--------------------------------

### Standard Modal Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/modal/demos.mdx

This is a standard implementation of the Modal component.

```javascript
import {
  ModalExampleStandard,
} from 'Docs/uilib/components/modal/Examples'

<ModalExampleStandard />
```

--------------------------------

### Default Input Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/input/demos.mdx

Standard implementation of the Input component.

```jsx
<InputExampleDefault />
```

--------------------------------

### Extend BankAccountNumber Validation

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/info.mdx

Extend the default bank account number validation by adding a custom rule. This example adds a check to ensure the account number starts with '1'.

```tsx
import { Field } from '@dnb/eufemia/extensions/forms'
import type { BankAccountNumberValidator } from '@dnb/eufemia/extensions/forms/Field/BankAccountNumber'

const myValidator: BankAccountNumberValidator = (
  value,
  { validators }
) => {
  const { bankAccountNumberValidator } = validators ?? {}
  const prefixChecker = (value: string) => {
    if (value && value[0] !== '1') {
      return new Error('Account number must start with 1')
    }
  }

  // Keep the built-in validator and add a custom prefix rule.
  return [bankAccountNumberValidator, prefixChecker]
}

render(<Field.BankAccountNumber onBlurValidator={myValidator} />)
```

--------------------------------

### Selection CSS Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.mdx

Customize the `::selection` pseudo-element for improved contrast and readability. This SCSS snippet defines the background, text color, and text shadow for selected text. It's automatically applied to elements with classes starting with `dnb-` or can be manually applied.

```scss
background-color: var(--token-color-decorative-first-subtle);
color: var(--token-color-text-neutral);
text-shadow: none;
```

--------------------------------

### Extended Component Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/component-properties.mdx

Showcases an extended example of component customization, illustrating more complex property configurations. This example is also interactive.

```jsx
import {
  ExtendedExample,
} from 'Docs/uilib/usage/customisation/Examples'

<ExtendedExample />
```

--------------------------------

### Customized Dropdown

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/demos.mdx

An example demonstrating how to customize the visual appearance of the dropdown.

```jsx
<DropdownCustomizedLook />
```

--------------------------------

### Left Placement Drawer Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.mdx

Shows how to configure the Drawer to appear on the left side of the screen.

```javascript
import { LeftPlacementDrawerExample } from 'Docs/uilib/components/drawer/Examples'
```

--------------------------------

### Custom button content

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx

Example demonstrating how to inject custom content into a button.

```jsx
<ButtonCustomContent />
```

--------------------------------

### Import Form.InfoOverlay

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/InfoOverlay/info.mdx

Import the Form component and render the InfoOverlay. This is the basic setup.

```tsx
import { Form } from '@dnb/eufemia/extensions/forms'
render(<Form.InfoOverlay />)
```

--------------------------------

### Run MCP server locally

Source: https://github.com/dnbexperience/eufemia/blob/main/tools/mcp-lambda/README.md

Commands to build documentation and start the MCP server using stdio transport.

```bash
# Build docs first (if not already built)
yarn workspace @dnb/eufemia build:docs

# Run with stdio transport
yarn dev
```

```bash
EUFEMIA_DOCS_ROOT=/path/to/docs yarn dev
```

--------------------------------

### Serve Local Build of DNB Eufemia Portal

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/README.md

After creating a local build, use this command to serve the generated 'public' folder. This allows you to preview the production build locally.

```bash
yarn workspace dnb-design-system-portal serve
```

--------------------------------

### InferData Visibility Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Visibility/demos.mdx

An example showcasing the `InferData` functionality in relation to visibility control.

```jsx
<Examples.InferData />
```

--------------------------------

### Anchor Modifier Examples

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx

Examples of using modifier classes for specific anchor behaviors.

```html
<a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-animation">No Animation</a>
<a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-style">No Style</a>
<a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-hover">No Hover</a>
<a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-underline">No Underline</a>
```

--------------------------------

### Install MCP Dependencies

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/tools.mdx

Required packages for running the local MCP server.

```bash
npm install @dnb/eufemia @modelcontextprotocol/sdk
# or
yarn add @dnb/eufemia @modelcontextprotocol/sdk
# or
pnpm add @dnb/eufemia @modelcontextprotocol/sdk
```

--------------------------------

### Installing PurgeCSS Dependency

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/consume-styles.mdx

Install PurgeCSS as a development dependency to enable CSS optimization.

```bash
npm install --save-dev purgecss
# or
yarn add --dev purgecss
# or
pnpm add --dev purgecss
```

--------------------------------

### Prepare Eufemia package for development

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/style-guides/theming.mdx

Run these commands in the @dnb/eufemia package directory to install dependencies, build, and link the package.

```bash
$ yarn install && yarn build && yarn link
```

--------------------------------

### Render Layout Example component

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/intro/10-layout.mdx

Displays a demonstration of the layout system using the LayoutExample component.

```jsx
<LayoutExample />
```

--------------------------------

### Range DatePicker Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.mdx

A basic example of the DatePicker component configured for selecting a date range.

```jsx
import { DatePickerRange } from './Examples'

<DatePickerRange />
```

--------------------------------

### Create a local build

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/getting-started/making-changes.mdx

Run the build command to generate valid bundles in the local environment.

```bash
$ yarn build
```

--------------------------------

### Manage Installed Skills

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/tools.mdx

Commands to list, verify, update, or remove installed Eufemia skills.

```bash
# Show the skills included in the installed Eufemia package
yarn eufemia skills list

# Verify installed files and package version
yarn eufemia skills check

# Update project skills after upgrading @dnb/eufemia
yarn eufemia skills update

# Remove files managed by the Eufemia installer
yarn eufemia skills uninstall
```

--------------------------------

### Basic Wizard Usage

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/demos.mdx

Renders a standard Wizard component. Ensure the 'Examples' module is correctly imported.

```jsx
import * as Examples from './Container/Examples'

<Examples.Default />
```

--------------------------------

### Preview the dashboard locally

Source: https://github.com/dnbexperience/eufemia/blob/main/tools/analytics/dashboard/README.md

Use a static file server to host the dashboard locally for development and testing.

```bash
cd tools/analytics/dashboard
python3 -m http.server 4173
# open http://localhost:4173
```

--------------------------------

### Boolean Visibility Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Visibility/demos.mdx

A basic example demonstrating the use of a boolean prop or state to control visibility.

```jsx
<Examples.BooleanExample />
```

--------------------------------

### Create a local package

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/deploy.mdx

Command to build the package locally for testing purposes.

```bash
yarn workspace @dnb/eufemia build:pack
```

--------------------------------

### Install Eufemia package

Source: https://github.com/dnbexperience/eufemia/blob/main/README.md

Use this command to add the Eufemia package to your project dependencies.

```bash
yarn add @dnb/eufemia
```

--------------------------------

### Using Wizard

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/intro-examples.mdx

Shows how to implement a multi-step wizard flow using the Wizard component.

```jsx
<Examples.UsingWizard />
```

--------------------------------

### Running Production Build

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/consume-styles.mdx

Execute the standard production build command after configuring the optimizer.

```bash
yarn build
```

--------------------------------

### Create Local Build for DNB Eufemia Portal

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/README.md

Execute this command to generate a production build of the DNB Eufemia Design System Portal. The build output will be placed in the './packages/dnb-design-system-portal/public' directory.

```bash
yarn workspace dnb-design-system-portal build
```

--------------------------------

### Default Help Button Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/demos.mdx

Renders the default Help Button component. No specific configuration is shown here, implying standard usage.

```javascript
import {
  HelpButtonDefaultExample,
} from 'Docs/uilib/components/help-button/Examples'

<HelpButtonDefaultExample />
```

--------------------------------

### Render Quick Intro button

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/first-contribution.mdx

Displays a navigation button to the Eufemia library introduction page.

```jsx
<Section variant="information" innerSpace={{ block: 'large' }}>
  <Button
    href="/uilib/intro"
    size="large"
    text="Quick Intro"
    icon="chevron_right"
    variant="secondary"
  />
</Section>
```

--------------------------------

### Install Eufemia Package

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage.mdx

Install and save the @dnb/eufemia package in your package.json dependencies. React and React DOM are also required.

```bash
# React version 16 is currently used
# You may want to specify react@16 and react-dom@16
$ npm i @dnb/eufemia react react-dom
```

--------------------------------

### Import and Basic Usage of Wizard.Step

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Step/info.mdx

Demonstrates how to import and use the Wizard.Step component. It is typically rendered within a Wizard.Container and displays child components when active.

```tsx
import { Wizard } from '@dnb/eufemia/extensions/forms'
render(<Wizard.Step />)
```

--------------------------------

### ICU Syntax Examples

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/localization.mdx

Examples of various ICU Message Format patterns including literals, placeholders, types, and nested structures.

```text
Hello everyone
```

```text
Hello {name}
```

```text
{key, type}
```

```text
{key, type, format}
```

```text
{count, plural, one {# item} other {# items}}
```

```text
{gender, select,
  male {He has {count, plural, one {# item} other {# items}}}
  female {She has {count, plural, one {# item} other {# items}}}
  other {They have {count, plural, one {# item} other {# items}}}
}
```

```text
This is not a placeholder: '{value}'
```

--------------------------------

### Render ListWizardComponents

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/components.mdx

Demonstrates how to import and render the ListWizardComponents with a 'small' size prop. Ensure ListWizardComponents is imported from its source path.

```javascript
import ListWizardComponents from './ListWizardComponents'

<ListWizardComponents size="small" />
```

--------------------------------

### Run bundle size checks locally

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/getting-started/make-and-run-tests.mdx

Execute these commands to build library outputs and verify bundle sizes against configured limits.

```bash
# Build the library outputs that BundleWatch measures
yarn workspace @dnb/eufemia build:ci

# Check the watched bundle sizes locally
yarn workspace @dnb/eufemia build:size
```

--------------------------------

### Menu with Headers Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/menu/demos.mdx

Shows how to include headers within the Menu component for better organization.

```javascript
import * as Examples from './Examples'

<Examples.MenuExampleWithHeader />
```

--------------------------------

### Install Eufemia dependencies

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/getting-started.mdx

Install the required Eufemia library along with React and React DOM using your preferred package manager.

```bash
npm i @dnb/eufemia react react-dom
# or
yarn add @dnb/eufemia react react-dom
# or
pnpm add @dnb/eufemia react react-dom
```

--------------------------------

### Basic component configurations

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/demos.mdx

Examples showing basic component states including empty, masked, placeholder, label, and disabled states.

```jsx
<Examples.Empty />
```

```jsx
<Examples.OmitMask />
```

```jsx
<Examples.Placeholder />
```

```jsx
<Examples.Label />
```

```jsx
<Examples.LabelAndValue />
```

```jsx
<Examples.WithHelp />
```

```jsx
<Examples.Disabled />
```

--------------------------------

### Large Buttons & Icons Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/component-properties.mdx

Demonstrates the usage of large buttons and icons within the component library. This example is interactive and can be modified directly in the browser.

```jsx
import {
  LargeButtonsAndIconsExample,
} from 'Docs/uilib/usage/customisation/Examples'

<LargeButtonsAndIconsExample />
```

--------------------------------

### Date Field: Width Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/demos.mdx

Shows how the Date field component renders with different width configurations. This example is intended for visual testing purposes.

```javascript
import * as Examples from './Examples'

<VisibleWhenVisualTest>
  <Examples.Width />
</VisibleWhenVisualTest>
```

--------------------------------

### AriaLive Playground Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/demos.mdx

Demonstrates the interactive playground for the AriaLive component. Use this to test various configurations and observe live updates.

```javascript
<Examples.AriaLivePlayground />
```

--------------------------------

### Install browser with disabled TLS verification

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/faq.mdx

Use this command if the standard installation fails due to local issuer certificate errors behind a corporate proxy.

```bash
NODE_TLS_REJECT_UNAUTHORIZED=0 yarn workspace @dnb/eufemia playwright install firefox
```

--------------------------------

### ButtonRow with Layout Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/ButtonRow/demos.mdx

Shows how to integrate the ButtonRow component within a larger layout structure.

```javascript
import * as Examples from './Examples'

<Examples.WithLayout />
```

--------------------------------

### Check Eufemia CLI version and help

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/tools.mdx

Use these commands to verify the installed version of the Eufemia CLI and access help documentation for skill-related commands.

```bash
yarn eufemia --version
yarn eufemia skills --help
```

--------------------------------

### CLI usage

Source: https://github.com/dnbexperience/eufemia/blob/main/tools/eufemia-css-optimizer/README.md

Commands to generate the manifest via the command line.

```bash
# Print the manifest for the workspace Eufemia source
yarn generate

# Or target a specific source root and write to a file
yarn generate --source node_modules/@dnb/eufemia/src --out style-manifest.json
```

--------------------------------

### Mocked Postal Code Verification Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Connectors/Bring/info.mdx

A component demonstrating postal code verification. Note that this example uses a mocked API and only validates '1391' for Norway and '11432' for Sweden.

```tsx
<Examples.PostalCode />
```

--------------------------------

### Radio Component Examples for Visual Tests

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/radio/demos.mdx

Includes examples for error states, visual tests, and bounding areas of the radio component. These are typically used for automated testing and ensuring visual consistency.

```jsx
import {
  RadioExampleError,
  RadioVisibleWhenVisualTests,
  RadioBoundingArea,
} from 'Docs/uilib/components/radio/Examples'

<RadioExampleError />
```

```jsx
import {
  RadioVisibleWhenVisualTests,
} from 'Docs/uilib/components/radio/Examples'

<RadioVisibleWhenVisualTests />
```

```jsx
import {
  RadioBoundingArea,
} from 'Docs/uilib/components/radio/Examples'

<RadioBoundingArea />
```

--------------------------------

### Date Styles Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/date-format/demos.mdx

Demonstrates different date formatting styles available for the DateFormat component.

```javascript
import * as Examples from './Examples'

<Examples.DateStyles />
```

--------------------------------

### Dynamic list

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/list/demos.mdx

Example of a dynamic list.

```jsx
<Examples.SimpleRows />
```

--------------------------------

### Async Wizard Container Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Container/demos.mdx

Illustrates how to implement an asynchronous wizard flow using the Wizard Container.

```tsx
import * as Examples from './Examples'

<Examples.AsyncWizardContainer />
```

--------------------------------

### Form Handler: Complex Async Autosave Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/demos.mdx

A comprehensive example featuring async validation, async `onSubmit`, and async `onChange` for both the `Form.Handler` and individual fields. It simulates async validation, handles input validity, and demonstrates status messages.

```typescript
- While you write, an async validation request is simulated to check if the input is valid. If it's not, an error message will be shown.

- During validation, only the relevant value will be evaluated. This means, when the delayed validation is done, and the value has changed, the validation result will be omitted.

- You can press enter to submit the form while you write. But only a string of `valid` will be accepted to emit the form `onSubmit` and `onChange`.

- You can start writing, wait a second or two and remove the whole text again and blur the field. The async validation return will be omitted and the "required" error message will be shown.

- It also shows some status messages after the validation and submit requests are done.

- This example does not include an async `onBlurValidator` – but it's possible to add one into the mix as well.

- To access the `date` "in sync" – you can use the [Form.useData](/uilib/extensions/forms/Form/useData/) hook.
```

```typescript
<Examples.AsyncChangeAndValidation />
```

--------------------------------

### Basic Grid Layout Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/layout/grid/info.mdx

Demonstrates the basic usage of Grid.Container and Grid.Item to create a two-column layout. Each Grid.Item can span a specified range of columns.

```jsx
import { Grid } from '@dnb/eufemia'

render(
  <Grid.Container>
    <Grid.Item span={[1, 6]}>Item A</Grid.Item>
    <Grid.Item span={[7, 12]}>Item B</Grid.Item>
  </Grid.Container>
)
```

--------------------------------

### Basic Wizard Structure

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Container/info.mdx

Set up a Wizard.Container with at least one Wizard.Step within a Form.Handler.

```tsx
import { Form, Wizard } from '@dnb/eufemia/extensions/forms'

const MyForm = () => {
  return (
    <Form.Handler>
      <Wizard.Container>
        <Wizard.Step title="Step 1">...</Wizard.Step>
      </Wizard.Container>
    </Form.Handler>
  )
}
```

--------------------------------

### GET /records

Source: https://github.com/dnbexperience/eufemia/blob/main/tools/analytics/README.md

Retrieves stored analytics records.

```APIDOC
## GET /records

### Description
Retrieves analytics records. Requires a bearer token and edge authentication.

### Method
GET

### Endpoint
/records

### Parameters
#### Query Parameters
- **id** (string) - Optional - Filter by record ID
- **limit** (integer) - Optional - Limit the number of records returned
```

--------------------------------

### GET /healthz

Source: https://github.com/dnbexperience/eufemia/blob/main/tools/analytics/README.md

Performs a liveness check on the service.

```APIDOC
## GET /healthz

### Description
Liveness probe to check if the service is operational.

### Method
GET

### Endpoint
/healthz
```

--------------------------------

### Component theme file structure

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/style-guides/theming.mdx

Example file paths showing the separation between layout styles and theme-specific skinning styles.

```js
/button/style/dnb-button.scss // layout styles
/button/style/themes/dnb-button-theme-ui.scss // main theme styles
/button/style/themes/dnb-button-theme-eiendom.scss// additional theme styles
```

--------------------------------

### Unordered List Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/demos.mdx

Standard unordered list implementation.

```jsx
<UnorderedListExample />
```

--------------------------------

### Run HTTP server locally

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/mcp/README.md

Commands to start the HTTP MCP server for local development.

```bash
yarn workspace @dnb/eufemia exec bash src/mcp/run-mcp-http-server.sh
# or
PORT=8787 EUFEMIA_DOCS_ROOT=./packages/dnb-eufemia/build/docs \
  yarn workspace @dnb/eufemia babel-node \
  --extensions .js,.ts,.tsx \
  src/mcp/mcp-http-server.ts
```

--------------------------------

### Use MediaQuery component

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/layout/media-queries.mdx

Examples of using the MediaQuery component with various configuration objects and custom queries.

```jsx
<MediaQuery when={{ min: 'medium' }}>
  matches all above medium screens
</MediaQuery>

<MediaQuery when={{ screen: true, orientation: 'landscape' }}>
  matches orientation landscape screens
</MediaQuery>

<MediaQuery not when={{ min: 'large' }}>
  matches all, but beneath large screens
</MediaQuery>

<MediaQuery matchOnSSR when={{ min: 'small', max: 'medium' }}>
  matches small and medium screens and during SSR
</MediaQuery>

<MediaQuery when={[{ min: 'small', max: 'large' }, { print: true }]}>
  matches all between small and large screens or all print media
</MediaQuery>

<MediaQuery when={{ max: '60em' }}>
  matches screens to a max of 60em
</MediaQuery>

<MediaQuery query="(min-width: 40em) and (max-width: 72em)">
  matches screens between 40em and 72em
</MediaQuery>
```

--------------------------------

### GET /sse

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/mcp/README.md

Legacy endpoint for establishing an SSE stream.

```APIDOC
## GET /sse

### Description
Initiates a legacy Server-Sent Events (SSE) stream. Emits an 'endpoint' event containing the URL for message exchange.

### Method
GET

### Endpoint
/sse
```

--------------------------------

### Basic Payment Card Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx

Demonstrates the basic usage of the PaymentCard component with a product code.

```javascript
import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
import { PaymentCardBasicExample } from './Examples'

<ChangeLocale label="Locale used in the demos:" />

### Basic example

Basic card using productCode.

<PaymentCardBasicExample />
```

--------------------------------

### Surface Dark Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming/theme/demos.mdx

Applies dark surface styling to components.

```jsx
<ThemeSurfaceDark />
```

--------------------------------

### Open Tooltip Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip/demos.mdx

Demonstrates a tooltip that is programmatically opened. Use this when the tooltip needs to be visible without user interaction.

```jsx
import {
  TooltipExampleOpen,
} from 'Docs/uilib/components/tooltip/Examples'

<VisibleWhenNotVisualTest>
  <TooltipExampleOpen />
</VisibleWhenNotVisualTest>
```

--------------------------------

### Checked ToggleButton Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/demos.mdx

Shows a single ToggleButton in its checked state.

```javascript
import {
  ToggleButtonUnchecked,
  ToggleButtonChecked,
  ToggleButtonDefault,
  ToggleButtonMultiselect,
  ToggleButtonVertical,
  ToggleButtonStatus,
  ToggleButtonStatusMessages,
  ToggleButtonDisabledGroup,
  ToggleButtonSuffix,
  ToggleButtonIconOnly,
} from 'Docs/uilib/components/toggle-button/Examples'

<ToggleButtonChecked />
```

--------------------------------

### Install v5 via NPM

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v5-info.mdx

Command to upgrade the library to version 5 using NPM.

```bash
$ npm i dnb-ui-lib@5
```

--------------------------------

### Switch with Suffix Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/switch/demos.mdx

Illustrates the Switch component with an appended suffix.

```javascript
import {
  SwitchExampleSuffix,
} from 'Docs/uilib/components/switch/Examples'

<SwitchExampleSuffix />
```

--------------------------------

### Release the first beta version

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/contribute/deploy.mdx

Steps to synchronize the beta branch with the latest release tags and merge feature changes.

```bash
git fetch
git switch origin/beta
git reset --hard origin/release
```

```bash
git merge {your-feature-branch}
git push --force-with-lease
```

--------------------------------

### Help Button Sizes Example

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/help-button/demos.mdx

Illustrates the different size variants available for the Help Button component. This allows for flexible UI design based on space constraints or visual hierarchy.

```javascript
import {
  HelpButtonSizesExample,
} from 'Docs/uilib/components/help-button/Examples'

<HelpButtonSizesExample />
```

--------------------------------

### List with custom background color

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/list/demos.mdx

Example of custom background styling.

```jsx
<Examples.BackgroundColor />
```

--------------------------------

### Form with Wizard Demo

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/InfoOverlay/demos.mdx

Demonstrates the integration of InfoOverlay within a form that follows a wizard-like progression.

```javascript
import * as Examples from './Examples'

<Examples.WithAWizard />
```

--------------------------------

### Scrollable Content Dialogs

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/demos.mdx

Examples of dialogs with scrollable content areas.

```jsx
<DialogConfirmScrollableContent />
<DialogInformationScrollableContent />
```

--------------------------------

### Focus Helper Usage

Source: https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/focus.mdx

Demonstrates basic and asynchronous usage of the applyPageFocus helper from @dnb/eufemia.

```js
import { applyPageFocus } from '@dnb/eufemia/shared/helpers'

applyPageFocus('.my-selector')
applyPageFocus('#my-id')
```

```js
import {
  setPageFocusElement,
  applyPageFocus,
} from '@dnb/eufemia/shared/helpers'

// 1. Somewhere in your app, set either an element, or a CSS Selector
setPageFocusElement('.css-selector', 'MyCustomName')

// 2. Later you can call this action, once it's time to activate the new focus state
applyPageFocus('MyCustomName', (element) => {
  /* optional callback */
})
```