### React example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/docs/stories/Installation.mdx

An example of how to use Spirit components in React, demonstrating a more declarative approach.

```jsx
// React
import { Container, Stack, TextField, CheckboxField, Button } from '@alma-oss/spirit-web-react';
...
<Container>
  <Stack>
    <TextField type="text" id="name" label="Name" isFluid />
    <TextField type="password" id="password" label="Password" isFluid />
    <CheckboxField label="Stay Logged In" />
    <Button>Login</Button>
  </Stack>
</Container>
```

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

### HTML example (for comparison)

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/docs/stories/Installation.mdx

An example of how UI elements might be structured using plain HTML and Spirit CSS classes.

```html
<!-- HTML -->
<div class="Container">
  <div class="Stack">
    <div class="TextField TextField--fluid">
      <label for="name" class="TextField__label">Name</label>
      <input type="text" id="name" class="TextField__input" value="" />
    </div>
    <div class="PasswordField PasswordField--fluid">
      <label for="password" class="PasswordField__label">Password</label>
      <input type="password" id="password" class="PasswordField__input" value="" />
    </div>
    <label class="CheckboxField"
      ><input type="checkbox" class="CheckboxField__input" value="" />
      <span class="CheckboxField__text">
        <span class="CheckboxField__label">Stay Logged In</span>
      </span>
    </label>
    <button type="button" class="Button Button--primary Button--medium">Login</button>
  </div>
</div>
```

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

### Import and use components

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/docs/stories/Installation.mdx

Example of importing and using a Button component from spirit-web-react.

```jsx
import React from 'react';
import { Button } from '@alma-oss/spirit-web-react';

export default (props) => {
  return <Button color="danger">Danger!</Button>;
};
```

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

### Input on Start

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Toggle/README.md

Example of a Toggle component with the input positioned at the start.

```html
<div class="Toggle Toggle--inputPositionStart">
  <div class="Toggle__text">
    <label class="Toggle__label" for="toggle-position-start">Toggle Label</label>
  </div>
  <input type="checkbox" id="toggle-position-start" class="Toggle__input" name="position" />
</div>
```

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

### Run the development server

Source: https://github.com/alma-oss/spirit-design-system/blob/main/examples/next-with-pages-router/README.md

Command to start the Next.js development server.

```bash
yarn dev
```

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

### Get or Create Instance and Event Listener Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Collapse/README.md

Shows how to get or create a collapse instance and attach an event listener for the 'hidden.collapse' event.

```javascript
const myCollapseEl = document.getElementById('my-collapse');
const collapse = Collapse.getOrCreateInstance(myCollapseEl);

myCollapseEl.addEventListener('hidden.collapse', () => {
  // do something...
});

collapse.hide();
```

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

### Dropdown JavaScript Instance Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Dropdown/README.md

Shows how to get an instance of the Dropdown component using its static `getInstance` method and then call the `show` method on it.

```javascript
const dropdown = Dropdown.getInstance('#example'); // Returns a dropdown instance

dropdown.show();
```

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

### Usage Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/scripts/lts-schedule/README.md

Example of how to use the lts-schedule command line utility.

```bash
node bin/lts.js -s 2021-07-01 -e 2027-06-01 -h output.html -g output.svg -p output.png
```

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

### Full Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Heading/README.md

Demonstration of a full example of the Heading component.

```tsx
<Heading
  elementType="h1"
  size="large"
  emphasis="semibold"
  isTextBalanced
  textAlignment="center"
  textColor="secondary"
  textHyphens="auto"
  textWordBreak="long-words"
>
  Demonstration of a full example of the Heading component.
</Heading>
```

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

### UncontrolledToast Setup

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Toast/README.md

Example showing how to set up and use the `UncontrolledToast` component with `ToastProvider` and the `useToast` hook.

```tsx
import React from 'react';
import { Button, ToastProvider, UncontrolledToast, useToast } from '@alma-oss/spirit-web-react';

export const Example = () => {
  const { show } = useToast(); // must be inside ToastProvider

  /* … */
  return (
    <ToastProvider>
      <Button onClick={() => show(ToastTextWithLink, 'toast-id')}>Show Toast</Button>

      <UncontrolledToast />
    </ToastProvider>
  );
};

```

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

### Example with the Current Item in the First Place

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Pagination/README.md

Demonstrates a pagination setup where the current page is the first item.

```tsx
<Pagination>
  <PaginationItem>
    <PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 1" pageNumber={1} />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#" accessibilityLabel="Go to Page 2" pageNumber={2} />
  </PaginationItem>
  {'...'}
  <PaginationItem>
    <PaginationLinkNext href="#" />
  </PaginationItem>
</Pagination>
```

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

### Install spirit-web-react

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/docs/stories/Installation.mdx

Install the spirit-web-react package along with its React dependencies using npm.

```sh
npm install @alma-oss/spirit-web-react react react-dom
```

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

### Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md

Example of using the Icon component.

```tsx
import { Icon, IconsProvider } from '@alma-oss/spirit-web-react';
import icons from '@alma-oss/spirit-icons/icons';

<IconsProvider value={icons}>
  <Icon name="warning" />
  Hey! Pay attention!
</IconsProvider>;
```

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

### Installation

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/vite-plugin-spirit-icons/README.md

Install the plugin and vite as development dependencies.

```bash
npm install --save-dev @alma-oss/vite-plugin-spirit-icons vite
```

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

### Responsive Avatar Examples

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Avatar/preview.html

Examples of responsive avatars.

```html
<a>JB</a>
<img src="https://picsum.photos/id/823/162/162" alt="Jiří Bárta">
<a>JB</a>
<img src="https://picsum.photos/id/823/162/162" alt="Jiří Bárta">
```

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

### Install using npm

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/README.md

Install the spirit-web and spirit-web-react packages using npm.

```shell
npm install --save @alma-oss/spirit-web @alma-oss/spirit-web-react
```

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

### Full Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md

A comprehensive example demonstrating various attributes of the Icon component.

```tsx
import { Icon, IconsProvider } from '@alma-oss/spirit-web-react';
import icons from '@alma-oss/spirit-icons/icons';

<IconsProvider value={icons}>
  <Icon name="warning" color="warning" boxSize={{ mobile: 20, tablet: 30, desktop: 40 }} title="Icon Title" />
  Hey! Pay attention!
</IconsProvider>;
```

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

### Install using Yarn

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/README.md

Install the spirit-web and spirit-web-react packages using Yarn.

```shell
yarn add @alma-oss/spirit-web @alma-oss/spirit-web-react
```

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

### Basic example usage

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Select/README.md

Basic example usage of the Select component.

```tsx
<Select id="select-default" label="Label" name="selectDefault">
  <option value="" selected>
    Placeholder
  </option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>
```

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

### Get Instance Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Collapse/README.md

Demonstrates how to get an existing collapse instance associated with a DOM element.

```javascript
const collapse = Collapse.getInstance('#example'); // Returns a collapse instance

collapse.show();
```

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

### ProductLogo Full Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/ProductLogo/README.md

A comprehensive example demonstrating both image and SVG usage within the ProductLogo component.

```html
<div class="ProductLogo">
  <img src="path-to-logo" alt="Product Logo" width="120" height="60" />
</div>

<div class="ProductLogo">
  <svg width="300" height="130">
    <title>Product Logo</title>
    <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
  </svg>
</div>
```

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

### Item with Icon Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Item/README.md

An example of the Item component with an icon positioned at the start.

```html
<button type="button" class="Item">
  <span class="Item__icon Item__icon--start">
    <svg width="24" height="24" aria-hidden="true">
      <use xlink:href="/icons/svg/sprite.svg#search" />
    </svg>
  </span>
  <span class="Item__label">Item</span>
</button>
```

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

### Toast Instance Creation and Display

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Toast/README.md

Example of how to import the Toast plugin, create a new Toast instance with various configuration options, and display it using the `show` method.

```javascript
import Toast from '@alma-oss/spirit-web/dist/js/Toast';

const toast = new Toast(null, {
  autoCloseInterval: 3000, // Set interval after ToastBar will be closed in ms, default: 3000
  color: 'informative', // One of ['neutral' (default), 'success', 'warning, 'danger', 'informative']
  containerId: 'toast-example', // Must match the ID of the Toast container in HTML
  enableAutoClose: true, // If true, ToastBar will close after `autoCloseInterval`, default: true
  message: 'Hello, this is my toast message!', // Can be plain text or HTML
  linkContent: 'Action', // Link text
  linkProps: {
    href: 'https://example.com', // Link URL
    target: '_blank', // Optional link target attribute
    underlined: false, // Optional link underlining, one of ['always' (default), 'hover', 'never']
    isDisabled: false, // Optional link disabling, default: false
    elementType: 'a', // Optional link element type, default: 'a'
  },
  hasIcon: true,
  iconName: 'info', // Optional icon name used as the #fragment in the SVG sprite URL
  id: 'my-toast', // An ID is required for dismissible ToastBar
  isDismissible: true,
});

tOast.show();
```

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

### Run Development Server

Source: https://github.com/alma-oss/spirit-design-system/blob/main/examples/next-with-app-router/README.md

Commands to start the Next.js development server.

```bash
npm run dev
```

```bash
yarn dev
```

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

### Navigation Example with Links

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Header/README.md

Shows how to implement single-level navigation using HeaderNav, HeaderNavItem, and HeaderLink.

```tsx
<HeaderNav>
  <HeaderNavItem>
    <HeaderLink href="/" isCurrent>
      Job offers
    </HeaderLink>
  </HeaderNavItem>
  <HeaderNavItem>
    <HeaderLink href="/">Part-time jobs</HeaderLink>
  </HeaderNavItem>
  <HeaderNavItem>
    <HeaderLink href="/">Inspiration</HeaderLink>
  </HeaderNavItem>
  <HeaderNavItem>
    <HeaderLink href="/">Replies</HeaderLink>
  </HeaderNavItem>
  <HeaderNavItem>
    <HeaderLink href="/">Employers</HeaderLink>
  </HeaderNavItem>
</HeaderNav>
```

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

### Default Button Examples

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Button/index.html

Examples of default buttons with different sizes and colors.

```html
<a href="#" class="button button--primary">Button primary</a>
<a href="#" class="button button--secondary">Button secondary</a>
<a href="#" class="button button--tertiary">Button tertiary</a>
<a href="#" class="button button--plain">Button plain</a>
<a href="#" class="button button--success">Button success</a>
<a href="#" class="button button--informative">Button informative</a>
<a href="#" class="button button--warning">Button warning</a>
<a href="#" class="button button--danger">Button danger</a>
```

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

### Basic Grid Item Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Grid/README.md

A basic example of a Grid with two Grid Items, one for content and one for a sidebar, defined by column start and end.

```html
<div class="Grid Grid--alignmentXStretch Grid--alignmentYStretch">
  <div
    class="GridItem"
    style="
      --grid-item-column-start: 1;
      --grid-item-column-end: 10;
    "
  >
    <div class="docs-Box docs-Box--small">Content</div>
  </div>
  <div
    class="GridItem"
    style="
      --grid-item-column-start: 11;
      --grid-item-column-end: span 2;
    "
  >
    <div class="docs-Box docs-Box--small">Sidebar</div>
  </div>
</div>
```

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

### Icon Avatar Examples

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Avatar/preview.html

Examples of icon avatars in different sizes.

```html
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
```

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

### Grid Placement Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Grid/README.md

Example demonstrating how to place a Grid Item using CSS variables for column and row start/end.

```html
<div
  class="GridItem"
  style="
      --grid-item-column-start: 2;
      --grid-item-column-end: 5; 
      --grid-item-row-start: 1;
      --grid-item-row-end: 3; 
    "
>
  …
</div>
```

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

### Uncontrolled Pagination

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Pagination/README.md

Example of an uncontrolled pagination component with total pages and a default starting page.

```tsx
<UncontrolledPagination
  totalPages={10}
  defaultPage={5}
  onChange={(pageNumber) => {
    console.log(pageNumber);
  }}
/>
```

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

### Full Example with Image and SVG

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/PartnerLogo/README.md

Demonstrates the usage of PartnerLogo with both image and SVG content.

```html
<div class="PartnerLogo PartnerLogo--medium">
  <img src="path-to-logo" alt="Partner Logo" />
</div>

<div class="PartnerLogo PartnerLogo--large">
  <svg width="300" height="130">
    <title>Partner Logo</title>
    <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
  </svg>
</div>
```

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

### Custom Spacing from Tablet Up

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Flex/README.md

Example of setting custom horizontal spacing starting from the tablet breakpoint.

```html
<div
  class="Flex Flex--horizontal Flex--noWrap Flex--alignmentXStretch Flex--alignmentYStretch"
  style="--flex-spacing-x-tablet: var(--spirit-space-1200)"
>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

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

### Full Example: Header with Responsive Navigation

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Header/README.md

A comprehensive example demonstrating the Header component with responsive navigation, including mobile actions and desktop navigation, along with its associated dialog.

```html
<!-- Header: start -->
<header class="Header">
  <a href="#" aria-label="Spirit homepage">
    <img src="…" width="65" height="24" alt="Spirit" />
  </a>

  <!-- HeaderMobileActions: start -->
  <div class="HeaderMobileActions">
    <button
      type="button"
      class="Button Button--secondary Button--medium Button--symmetrical"
      data-spirit-toggle="offcanvas"
      data-spirit-target="#header-dialog-example-1"
      aria-controls="header-dialog-example-1"
      aria-expanded="false"
    >
      <svg width="24" height="24" aria-hidden="true">
        <use xlink:href="/icons/svg/sprite.svg#hamburger" />
      </svg>
      <span class="accessibility-hidden">Menu</span>
    </button>
  </div>
  <!-- HeaderMobileActions: end -->

  <!-- HeaderDesktopActions: start -->
  <nav class="HeaderDesktopActions" aria-label="Main navigation">
    <!-- HeaderNav: start -->
    <ul class="HeaderNav">
      <li class="HeaderNavItem">
        <a href="#" class="HeaderLink HeaderLink--current" aria-current="page">Job offers</a>
      </li>
      <li class="HeaderNavItem">
        <a href="#" class="HeaderLink">Part-time jobs</a>
      </li>
      <li class="HeaderNavItem">
        <a href="#" class="HeaderLink">Inspiration</a>
      </li>
      <li class="HeaderNavItem">
        <a href="#" class="HeaderLink">Replies</a>
      </li>
      <li class="HeaderNavItem">
        <a href="#" class="HeaderLink">Employers</a>
      </li>
    </ul>
    <!-- HeaderNav: end -->
  </nav>
  <!-- HeaderDesktopActions: end -->

  <!-- HeaderDesktopActions: start -->
  <nav class="HeaderDesktopActions HeaderDesktopActions--end">
    <a href="#" class="Button Button--primary Button--medium">Sign in</a>
    <a href="#" class="Button Button--secondary Button--medium">Enterprise</a>
  </nav>
  <!-- HeaderDesktopActions: end -->
</header>
<!-- Header: end -->

<!-- HeaderDialog: start -->
<dialog id="header-dialog-example-1" class="HeaderDialog" aria-label="Menu">
  <div class="HeaderDialog__panel">
    <div class="HeaderDialog__content">
      <!-- HeaderDialogCloseButton: start -->
      <button
        type="button"
        class="HeaderDialogCloseButton"
        data-spirit-dismiss="offcanvas"
        data-spirit-target="#header-dialog-example-1"
        aria-controls="header-dialog-example-1"
        aria-expanded="false"
      >
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/icons/svg/sprite.svg#close" />
        </svg>
        <span class="accessibility-hidden">Close</span>
      </button>
      <!-- HeaderDialogCloseButton: end -->

      <!-- HeaderDialogActions: start -->
      <nav class="HeaderDialogActions HeaderDialogActions--primary" aria-label="Main navigation">
        <!-- HeaderDialogNav: start -->
        <ul class="HeaderDialogNav">
          <li class="HeaderDialogNavItem">
            <a href="#" class="HeaderDialogLink HeaderDialogLink--current" aria-current="page">Job offers</a>
          </li>
          <li class="HeaderDialogNavItem">
            <a href="#" class="HeaderDialogLink">Part-time jobs</a>
          </li>
          <li class="HeaderDialogNavItem">
            <a href="#" class="HeaderDialogLink">Inspiration</a>
          </li>
          <li class="HeaderDialogNavItem">
            <a href="#" class="HeaderDialogLink">Replies</a>
          </li>
          <li class="HeaderDialogNavItem">
            <a href="#" class="HeaderDialogLink">Employers</a>
          </li>
        </ul>
        <!-- HeaderDialogNav: end -->
      </nav>
      <!-- HeaderDialogActions: end -->

      <!-- HeaderDialogActions: start -->
      <nav class="HeaderDialogActions HeaderDialogActions--secondary">
        <a href="#" class="Button Button--primary Button--medium">Sign in</a>
        <a href="#" class="Button Button--secondary Button--medium">Enterprise</a>
      </nav>
      <!-- HeaderDialogActions: end -->
    </div>
  </div>
</dialog>
<!-- HeaderDialog: end -->
```

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

### Grid Item Rows Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Grid/README.md

Example showing how to set rows for a Grid Item using `--grid-item-row-start` and `--grid-item-row-end` variables, including a desktop-specific row setting.

```html
<div class="Grid Grid--alignmentXStretch Grid--alignmentYStretch">
  <div
    class="GridItem"
    style="
      --grid-item-column-start: 1;
      --grid-item-column-end: 8;
    "
  >
    <div class="docs-Box docs-Box--small">Content</div>
  </div>
  <div
    class="GridItem"
    style="
      --grid-item-column-start: 9;
      --grid-item-column-end: span 4;
      --grid-item-row-start-desktop: 2;
    "
  >
    <div class="docs-Box docs-Box--small">Sidebar</div>
  </div>
</div>
```

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

### Example with the Current Item in the Last Place

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Pagination/README.md

Illustrates a pagination setup where the current page is the last item displayed.

```tsx
<Pagination>
  <PaginationItem>
    <PaginationLinkPrevious href="#" />
  </PaginationItem>
  {'...'}
  <PaginationItem>
    <PaginationLink href="#" accessibilityLabel="Go to Page 112" pageNumber={112} />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 113" pageNumber={113} />
  </PaginationItem>
</Pagination>
```

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

### Responsive Columns Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Grid/README.md

Example showing responsive grid item placement using breakpoint-specific CSS variables for columns.

```html
<div class="Grid Grid--alignmentXStretch Grid--alignmentYStretch">
  <div
    class="GridItem"
    style="
      --grid-item-column-start: 1;
      --grid-item-column-end: 5;
      --grid-item-column-end-tablet: 9;
    "
  >
    <div class="docs-Box docs-Box--small">Content</div>
  </div>
  <div
    class="GridItem"
    style="
      --grid-item-column-start: 10;
      --grid-item-column-end: span 3;
      --grid-item-column-start-tablet: 11;
      --grid-item-column-end-tablet: span 2;
    "
  >
    <div class="docs-Box docs-Box--small">Sidebar</div>
  </div>
</div>
```

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

### Environment Variable Setup in .env File

Source: https://github.com/alma-oss/spirit-design-system/blob/main/CONTRIBUTING.md

Example of setting the FIGMA_ACCESS_TOKEN in a .env file.

```bash
FIGMA_ACCESS_TOKEN=your-token-here
```

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

### JavaScript Plugin API Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/FileUploader/README.md

Demonstrates how to get a FileUploader instance and interact with its methods like getFileQueue and access its inputElement.

```javascript
const myUploaderInstance = FileUploader.getInstance('#myUploader'); // Returns a file uploader instance

const fileList: File[] = myUploaderInstance.getFileQueue();
const input = myUploaderInstance.inputElement; // Returns an input element, for further use
```

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

### Opening the ToastBar

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Toast/README.md

Example of how to open a ToastBar by setting the `isOpen` prop to `true`. The ToastBar must be present in the DOM.

```tsx
<ToastBar id="my-toast" isOpen>
  <ToastBarMessage>Opened ToastBar</ToastBarMessage>
</ToastBar>

```

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

### Parent Element Setup

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/helpers/dynamic-color/README.md

Example of setting the background and text color on a parent element.

```html
<div class="bg-emotion-informative-basic text-emotion-informative-subtle">
  <!-- Dynamic color helpers will be applied inside this element. -->
</div>
```

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

### Configuring Playwright Options Locally

Source: https://github.com/alma-oss/spirit-design-system/blob/main/docs/contribution/e2e-testing.md

Command to copy the example Playwright configuration file for local customization.

```bash
cp .env.local.playwright.example .env.local.playwright
```

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

### Environment Variable Setup for Figma Access Token

Source: https://github.com/alma-oss/spirit-design-system/blob/main/CONTRIBUTING.md

Example of setting the FIGMA_ACCESS_TOKEN environment variable.

```bash
export FIGMA_ACCESS_TOKEN=your-token-here
```

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

### SKILL.md Frontmatter

Source: https://github.com/alma-oss/spirit-design-system/blob/main/docs/contribution/style.md

Example of the minimum required YAML frontmatter for a SKILL.md file, including 'name' and 'description'.

```yaml
---
name: spirit:{skill-name}
description: One sentence describing when to use this skill.
---
```

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

### Open on load example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Collapse/README.md

Illustrates how to have the Collapse component open by default.

```html
<button ... aria-expanded="true">trigger</button>
<div id="collapse-example" class="Collapse is-open">
  <div class="Collapse__content">content</div>
</div>
```

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

### Skill Frontmatter Name

Source: https://github.com/alma-oss/spirit-design-system/blob/main/docs/contribution/style.md

Example of how to define the 'name' field in the frontmatter of a skill, including the 'spirit:' namespace prefix.

```yaml
name: spirit:release-notes
```

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

### Full Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Toast/README.md

A comprehensive example demonstrating the usage of ToastBar within a Toast container, including state management for opening and closing.

```tsx
import React, { useState } from 'react';
import { Button, Toast, ToastBar, ToastBarMessage, ToastBarLink } from '@alma-oss/spirit-web-react';

export const Example = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)} aria-expanded={isOpen} aria-controls="my-toast">
        {buttonLabel}
      </Button>
      <Toast>
        <ToastBar id="my-toast" isOpen={isOpen} onClose={() => setIsOpen(false)} isDismissible>
          <ToastBarMessage>Toast message</ToastBarMessage>
          <ToastBarLink href="#">Action</ToastBarLink>
        </ToastBar>
      </Toast>
    </>
  );
};

```

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

### Full PricingPlan Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/PricingPlan/README.md

A comprehensive example demonstrating the usage of the PricingPlan component along with its header, body, and footer. It showcases how to configure various props like `isHighlighted`, `action`, `badge`, `title`, `subtitle`, `price`, `note`, `id`, `description`, and `features`.

```tsx
import { PricingPlan, PricingPlanHeader, PricingPlanBody, PricingPlanFooter } from '@alma-oss/spirit-web-react';

<PricingPlan isHighlighted>
  <PricingPlanHeader
    action={
      <ButtonLink href="#" size="large" id="plan-action" aria-labelledby="plan-action plan-title">
        Call to Action
      </ButtonLink>
    }
    badge="Recommended"
    title={<span id="plan-title">Plan</span>}
    subtitle="Supporting text"
    price="Price Amount"
    note="Additional information"
  />
  <PricingPlanBody
    id="tier-1"
    description="Brand new features"
    features={[
      {
        title: 'Compatibility',
        description: 'Compatible across multiple platforms',
      },
    ]}
  />
  <PricingPlanFooter>Footer content</PricingPlanFooter>
</PricingPlan>;
```

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

### Item with Icon and Helper Text in Selected State

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Item/README.md

A complex example of an Item component with start icon, helper text, and selected state.

```html
<button type="button" class="Item Item--selected">
  <span class="Item__icon Item__icon--start">
    <svg width="24" height="24" aria-hidden="true">
      <use xlink:href="/icons/svg/sprite.svg#search" />
    </svg>
  </span>
  <span class="Item__label">Item</span>
  <span class="Item__helperText">Helper text</span>
  <span class="Item__icon Item__icon--end">
    <svg width="24" height="24" aria-hidden="true">
      <use xlink:href="/icons/svg/sprite.svg#check-plain" />
    </svg>
  </span>
</button>
```

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

### Theming Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/README.md

Apply themes by including theme CSS files before foundation CSS.

```html
<body class="text-primary bg-primary">
  <p>This paragraph uses the default light theme.</p>
  <section class="theme-light-on-brand bg-primary">
    <p class="text-primary">This paragraph uses the light theme on brand background.</p>
  </section>
</body>
```

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

### Toast Plugin API - Get Instance Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Toast/README.md

Demonstrates how to use the static `getInstance` method of the Toast plugin to retrieve an existing Toast instance associated with a DOM element.

```javascript
const toast = Toast.getInstance('#example'); // Returns a toast instance

tOast.show();
```

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

### Install Spirit Design System Packages

Source: https://github.com/alma-oss/spirit-design-system/blob/main/examples/next-with-app-router/README.md

Commands to install the necessary Spirit Design System packages.

```bash
npm install @alma-oss/spirit-design-tokens @alma-oss/spirit-icons @alma-oss/spirit-web @alma-oss/spirit-web-react
```

```bash
yarn add @alma-oss/spirit-design-tokens @alma-oss/spirit-icons @alma-oss/spirit-web @alma-oss/spirit-web-react
```

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

### Full Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/EmptyState/README.md

A full example demonstrating the usage of the EmptyState component with various sections and actions.

```tsx
<EmptyState spacing="space-900">
  <EmptyStateSection>
    <Icon name="search" isSymbol />
  </EmptyStateSection>
  <EmptyStateSection>
    <Heading elementType="h2">Heading</Heading>
    <Text>Description</Text>
  </EmptyStateSection>
  <EmptyStateSection>
    <ActionGroup alignmentX={{ mobile: 'stretch', tablet: 'center' }}>
      <ButtonLink href="#">Primary Action</ButtonLink>
      <ButtonLink href="#" color="secondary">
        Secondary Action
      </ButtonLink>
    </ActionGroup>
  </EmptyStateSection>
  <EmptyStateSection>
    <Link href="#">Link to something</Link>
  </EmptyStateSection>
</EmptyState>
```

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

### Wrapping Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Flex/preview.html

Demonstrates how items wrap when the container width is insufficient.

```html
{{setVar "items" 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 }}
{{#each @root.items}}

Item {{this}}

{{/each}}
```

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

### Install with npm

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/README.md

Install the @alma-oss/spirit-web package using npm.

```shell
npm install --save @alma-oss/spirit-web
```

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

### Quick Start with CSS

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/README.md

Link the pre-built Spirit CSS files in your HTML template.

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" />
<link rel="stylesheet" href="node_modules/@alma-oss/spirit-web/css/themes.min.css" />
<link rel="stylesheet" href="node_modules/@alma-oss/spirit-web/css/foundation.min.css" />
<link rel="stylesheet" href="node_modules/@alma-oss/spirit-web/css/components.min.css" />
<link rel="stylesheet" href="node_modules/@alma-oss/spirit-web/css/helpers.min.css" />
<link rel="stylesheet" href="node_modules/@alma-oss/spirit-web/css/utilities.min.css" />
```

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

### Install with Yarn

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/README.md

Install the @alma-oss/spirit-web package using Yarn.

```shell
yarn add @alma-oss/spirit-web
```

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

### Full Example - NavigationAction and NavigationAvatar

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Navigation/README.md

A complete navigation bar example using NavigationAction and NavigationAvatar components.

```html
<nav class="Navigation Navigation--horizontal" aria-label="Main Navigation">
  <ul>
    <li class="NavigationItem NavigationItem--alignmentYCenter">
      <a class="NavigationAction NavigationAction--box NavigationAction--selected" href="#" aria-current="page"        >Selected Link</a        >
    </li>
    <li class="NavigationItem NavigationItem--alignmentYCenter">
      <span class="NavigationAction NavigationAction--box NavigationAction--disabled">Disabled Link</span>
    </li>
    <li class="NavigationItem NavigationItem--alignmentYCenter">
      <a class="NavigationAction NavigationAction--box" href="#">Link</a>
    </li>
    <li class="NavigationItem NavigationItem--alignmentYCenter">
      <a href="#" class="NavigationAvatar">
        <span class="Avatar Avatar--small" aria-label="Profile of Jiří Bárta">
          <svg width="20" height="20" aria-hidden="true">
            <use xlink:href="/assets/icons/svg/sprite.svg#profile" />
          </svg>
        </span>
        <span class="typography-body-small-semibold">My Account</span>
      </a>
    </li>
  </ul>
</nav>
```

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

### Install with NPM

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/icons/README.md

Command to install the package using NPM.

```shell
npm install --save @alma-oss/spirit-icons
```

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

### Install

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/analytics/README.md

Install the spirit-analytics package using NPM or Yarn.

```shell
# NPM
npm install --save-dev @alma-oss/spirit-analytics

# Yarn
yarn add -D @alma-oss/spirit-analytics
```

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

### Accessibility Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/PricingPlan/README.md

Example demonstrating the use of aria-labelledby for better accessibility by linking the action button to the plan title.

```html
<article class="PricingPlan">
  <div class="PricingPlan__layout">
    <header class="PricingPlanHeader">
      <div class="PricingPlanHeader__content">
        <h3 class="PricingPlanHeader__title" id="plan-title">Plan Title</h3>
        <div class="PricingPlanHeader__subtitle">…</div>
        <div class="PricingPlanHeader__price">…</div>
        <div class="PricingPlanHeader__action">
          <a
            href="#"
            class="Button Button--primary Button--large"
            id="plan-action"
            aria-labelledby="plan-action plan-title"
          >
            Call to Action
          </a>
        </div>
        …
      </div>
    </header>
    …
  </div>
</article>
```

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

### Install with Yarn

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/icons/README.md

Command to install the package using Yarn.

```shell
yarn add @alma-oss/spirit-icons
```

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

### Install with npm

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md

To use this component in your project you need to run the following command using npm.

```bash
npm install -S @alma-oss/spirit-icons
```

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

### Basic Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/VisuallyHidden/README.md

Basic example usage of the VisuallyHidden component.

```tsx
<VisuallyHidden>Label</VisuallyHidden>
```

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

### CardLogo with PartnerLogo

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Card/README.md

Example of using CardLogo with the recommended PartnerLogo subcomponent.

```html
<div class="CardLogo">
  <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
    <img src="…" alt="Product Name" />
  </div>
</div>
```

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

### Basic example usage

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/TextArea/README.md

Basic example of TextArea usage.

```tsx
<TextArea id="text-area-default" label="Label" name="textAreaDefault" />
```

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

### Loading Button Examples

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Button/index.html

Examples of buttons in a loading state with different sizes and colors.

```html
<a href="#" class="button button--primary is-loading">Button primary</a>
<a href="#" class="button button--secondary is-loading">Button secondary</a>
<a href="#" class="button button--tertiary is-loading">Button tertiary</a>
<a href="#" class="button button--plain is-loading">Button plain</a>
<a href="#" class="button button--success is-loading">Button success</a>
<a href="#" class="button button--informative is-loading">Button informative</a>
<a href="#" class="button button--warning is-loading">Button warning</a>
<a href="#" class="button button--danger is-loading">Button danger</a>
```

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

### Default SplitButton Examples

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/SplitButton/index.html

Demonstrates various combinations of sizes and colors for the default SplitButton.

```html
<button class="button button--primary button--small" type="button">
  Button
  <span class="icon icon--arrow-down"></span>
</button>
<div class="split-button">
  <button class="button button--primary button--small" type="button">
    Button
  </button>
  <button class="button button--primary button--small split-button__dropdown" type="button" aria-label="More actions">
    <span class="icon icon--more"></span>
  </button>
</div>
<div class="split-button">
  <button class="button button--primary button--small" type="button">
    Button
  </button>
  <div class="split-button__dropdown">
    <button class="button button--primary button--small" type="button" aria-label="More actions">
      <span class="icon icon--more"></span>
    </button>
    <div class="dropdown">
      <a class="dropdown__item" href="#">
        <span class="icon icon--download"></span>
        Download
      </a>
      <a class="dropdown__item" href="#">
        <span class="icon icon--edit"></span>
        Edit
      </a>
      <a class="dropdown__item" href="#">
        <span class="icon icon--link"></span>
        Link
      </a>
    </div>
  </div>
</div>
```

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

### Item with icon example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Item/README.md

An example of the Item component with an icon.

```tsx
<Item label="Item" iconName="search" />
```

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

### Full Toast Integration Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Toast/README.md

This example demonstrates a full integration of a dismissible ToastBar within a Toast container, including a button to trigger its display.

```html
<button
  type="button"
  class="Button Button--primary Button--medium"
  data-spirit-toggle="toast"
  data-spirit-target="#my-dismissible-toast"
  aria-controls="my-dismissible-toast"
  aria-expanded="false"
>
  Show hidden toast
</button>

<!-- Toast: start -->
<div class="Toast Toast--bottom Toast--center" role="log">
  <div class="Toast__queue">
    <!-- ToastBar: start -->
    <div id="my-dismissible-toast" class="ToastBar ToastBar--neutral ToastBar--dismissible is-hidden">
      <div class="ToastBar__box">
        <div class="ToastBar__container">
          <svg width="20" height="20" aria-hidden="true">
            <use xlink:href="/icons/svg/sprite.svg#info" />
          </svg>
          <div class="ToastBar__content">
            <div class="text-truncate-multiline">Toast message</div>
            <a href="#" class="ToastBar__link link-underlined">Action</a>
          </div>
        </div>
        <button
          type="button"
          class="ToastBar__close"
          data-spirit-dismiss="toast"
          aria-controls="my-dismissible-toast"
          aria-expanded="true"
        >
          <svg width="24" height="24" aria-hidden="true">
            <use xlink:href="/icons/svg/sprite.svg#close" />
          </svg>
          <span class="accessibility-hidden">Close</span>
        </button>
      </div>
    </div>
    <!-- ToastBar: end -->
  </div>
</div>
<!-- Toast: end -->
```

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

### Simple Item example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Item/README.md

A basic example of the Item component.

```tsx
<Item label="Item" />
```

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

### Basic example usage

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Checkbox/README.md

Basic example of Checkbox usage.

```tsx
<Checkbox id="checkbox-default" label="Label" name="checkboxDefault" />
```

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

### Full Drawer Example

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Drawer/README.md

A complete example demonstrating the integration of Drawer, DrawerPanel, and DrawerCloseButton.

```html
<dialog id="drawer-example" class="Drawer Drawer--right">
  <div class="DrawerPanel">
    <div class="DrawerPanel__content">
      <button
        type="button"
        aria-expanded="false"
        class="Button Button--tertiary Button--medium Button--symmetrical DrawerCloseButton"
        data-spirit-dismiss="offcanvas"
        data-spirit-target="#drawer-example"
        aria-controls="drawer-example"
      >
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/icons/svg/sprite.svg#close" />
        </svg>
        <span class="accessibility-hidden">Close</span>
      </button>
      <!-- Drawer content goes here  -->
    </div>
  </div>
</dialog>
```

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

### Clone and Install

Source: https://github.com/alma-oss/spirit-design-system/blob/main/README.md

Steps to clone the repository and install dependencies using Make or Yarn.

```bash
git clone ssh://git@github.com:alma-oss/spirit-design-system.git
cd spirit-design-system
make install
make start
```

```bash
corepack enable
corepack install
yarn install
yarn start
```

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

### Install jest-config-spirit

Source: https://github.com/alma-oss/spirit-design-system/blob/main/configs/jest-config-spirit/README.md

Command to install the jest-config-spirit package using Yarn.

```bash
yarn add jest-config-spirit
```

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

### Sizes

Source: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/src/scss/components/Button/README.md

Examples of different sizes for buttons.

```html
<button type="button" class="Button Button--primary Button--small">Small Button</button>
<button type="button" class="Button Button--primary Button--medium">Medium Button</button>
<button type="button" class="Button Button--primary Button--large">Large Button</button>
```