### Running the Example Nuxt Application

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md

This command starts the development server for the example Nuxt application (examples/nuxt-app). It's used for developing and testing Tide integration packages (Nuxt layers) and requires a populated .env file.

```bash
pnpm run dev:nuxt
```

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

### Installing Node dependencies for Ripple site

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/framework/3.guides/2.new-sites.md

After initializing the site, this command navigates into the newly created site directory and installs all required Node.js dependencies as specified in the `package.json` file using NPM.

```Shell
cd ~/path/to/site && npm install
```

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

### Installing Ripple UI Core - Bash

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/README.md

Provides the command to install the @dpc-sdp/ripple-ui-core package using npm. This is the first step for using the library outside of a Tide environment.

```Bash
npm install @dpc-sdp/ripple-ui-core
```

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

### Starting Built Nuxt App - pnpm - Bash

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/examples/nuxt-app/README.md

This command starts the Nuxt 3 application from the previously built `.output` directory. It runs the application in a production-like environment, serving the optimized build for testing its behavior before actual deployment.

```bash
pnpm -F nuxt-app start
```

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

### Installing Ripple UI Core via npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/3.develop/4.usage/5.css-only.md

This command installs the `@dpc-sdp/ripple-ui-core` package into your project, saving it as a dependency. It is a prerequisite for accessing the design system's CSS stylesheets directly and integrating them into your application.

```Shell
npm install @dpc-sdp/ripple-ui-core --save
```

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

### Installing Ripple UI Core with npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/3.develop/4.usage/3.nuxt.md

This command installs the `@dpc-sdp/ripple-ui-core` package, which provides Ripple UI components and styles, into your project using npm. The `--save` flag adds it to your `dependencies` in `package.json`.

```bash
npm install @dpc-sdp/ripple-ui-core --save
```

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

### Installing Ripple Tide Search Package with npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-search/README.md

This snippet demonstrates the command-line instruction to install the `@dpc-sdp/ripple-tide-search` package using npm, which is the first step to integrate it into a Nuxt project.

```bash
npm install @dpc-sdp/ripple-tide-search
```

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

### Installing Ripple Tide Webform Package - Bash

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-webform/README.md

This command installs the `@dpc-sdp/ripple-tide-webform` package using npm, making it available for use in a Nuxt.js project. It is a prerequisite for integrating Tide webforms.

```bash
npm install @dpc-sdp/ripple-tide-webform
```

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

### Starting Ripple Mock Server - CLI

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/nuxt-ripple-cli/README.md

This command starts a mock server for local development and testing of Ripple sites, eliminating the need for a live Tide backend. It requires a path to the fixture (mocked data) and can optionally take a path to a JSON routes file and a relative path to mocked global site data.

```bash
nuxt-ripple mock [FIXTURE_PATH] --routes {ROUTE_PATH} --site {SITE_PATH}
```

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

### Previewing Built Nuxt App with .env - pnpm - Bash

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/examples/nuxt-app/README.md

This command starts the Nuxt 3 application from its built `.output` directory, similar to `start`, but explicitly loads runtime environment variables from the `.env` file. This is useful for testing production builds with specific environment configurations before deployment.

```bash
pnpm -F nuxt-app preview
```

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

### Installing Ripple Tide API Package (npm)

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-api/README.md

This command installs the `@dpc-sdp/ripple-tide-api` package using npm, making it available for use in a Nuxt.js project. It is a prerequisite for utilizing the Tide services provided by the package.

```bash
npm install @dpc-sdp/ripple-tide-api
```

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

### Installing Ripple UI Core Web Components

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/3.develop/4.usage/4.webcomponents.md

This command installs the Ripple UI Core package, which contains the web component exports, into your project. The `--save` flag adds the package as a dependency in your `package.json` file, making it available for use.

```Shell
npm install @dpc-sdp/ripple-ui-core --save
```

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

### Running the development server for Ripple site

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/framework/3.guides/2.new-sites.md

This command starts the local development server for the Ripple site. It enables developers to preview changes, test functionality, and work on the application in a development environment.

```Shell
npm run dev
```

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

### Installing Ripple Tide Landing Page Package - Bash

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-landing-page/README.md

This command installs the `@dpc-sdp/ripple-tide-landing-page` package using npm. It is a prerequisite for integrating the Tide Landing Page content type support into a Nuxt project, making its components and functionalities available.

```bash
npm install @dpc-sdp/ripple-tide-landing-page
```

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

### Installing Ripple Test Utils with npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-test-utils/README.md

This command installs the `@dpc-sdp/ripple-test-utils` package using npm, making it available for use in your Nuxt project. It's the first step to integrate the testing utilities into your development environment.

```bash
npm install @dpc-sdp/ripple-test-utils
```

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

### Installing Ripple SDP Core Package - npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-sdp-core/README.md

This command installs the `@dpc-sdp/ripple-sdp-core` package using npm, making it available for use in a Nuxt project. It is the first step required to integrate the SDP core content types and their front-end support.

```bash
npm install @dpc-sdp/ripple-sdp-core
```

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

### Installing Ripple UI Forms (npm)

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-forms/README.md

This command installs the @dpc-sdp/ripple-ui-forms package using npm. This is a prerequisite for using the library outside of a Tide environment, where it's typically included as a dependency of @dpc-sdp/nuxt-ripple.

```bash
npm install @dpc-sdp/ripple-ui-forms
```

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

### Installing Nuxt Ripple Preview Package with npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/nuxt-ripple-preview/README.md

This command installs the `@dpc-sdp/nuxt-ripple-preview` package using npm, making it available for use in your Nuxt project. It's the first step to integrate Drupal preview functionality.

```bash
npm install @dpc-sdp/nuxt-ripple-preview
```

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

### Installing Monorepo Dependencies - pnpm - Bash

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/examples/nuxt-app/README.md

This command installs all necessary dependencies for the monorepo using pnpm. It should be run once after cloning the repository or when dependencies change to ensure all project components are correctly linked and available.

```bash
pnpm i
```

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

### Using DocsThemeChooser Component

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Explains how to wrap multiple `DocsExample` components with `DocsThemeChooser`, enabling users to dynamically select a theme that applies to all contained examples.

```md
::DocsThemeChooser
  ::DocsExample
  ---
  id: core-navigation-button--default-filled
  ---
  ::
  ::DocsExample
  ---
  id: core-navigation-button--default-outlined
  ---
  ::
::
```

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

### Using DocsExample Component (Default)

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Illustrates the basic usage of the custom `DocsExample` component to display a Storybook component example by referencing its unique ID.

```md
::DocsExample
---
id: core-navigation-button--default-filled
---
```

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

### Installing Ripple Tide Event Package - Bash

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-event/README.md

This command installs the `@dpc-sdp/ripple-tide-event` package using npm, making it available for use in a Nuxt project. It is a prerequisite for integrating event content type support.

```bash
npm install @dpc-sdp/ripple-tide-event
```

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

### Installing Nuxt Ripple Analytics Module - Bash

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/nuxt-ripple-analytics/README.md

This command installs the `@dpc-sdp/nuxt-ripple-analytics` package using npm, making it available for use in a Nuxt project. It is a prerequisite for integrating the analytics module into your application.

```bash
npm install @dpc-sdp/nuxt-ripple-analytics
```

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

### Installing Ripple Tide Media Package with npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-media/README.md

This command installs the `@dpc-sdp/ripple-tide-media` package using npm, making it available for use in a Nuxt.js project. It is the first step required to integrate the package's media content type support.

```bash
npm install @dpc-sdp/ripple-tide-media
```

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

### Starting Nuxt App in Development Mode - pnpm - Bash

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/examples/nuxt-app/README.md

This command starts the Nuxt 3 application in development mode, focusing specifically on the 'nuxt-app' package within the monorepo. It enables hot module reloading and provides a development server, typically accessible at http://localhost:3000, for rapid iteration and testing.

```bash
pnpm -F nuxt-app dev
```

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

### Installing Ripple Tide News Package with npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-news/README.md

This command installs the `@dpc-sdp/ripple-tide-news` package using npm, making it available for use in a Nuxt.js project. It is a prerequisite for integrating the news content type and should be run in the project's root directory.

```bash
npm install @dpc-sdp/ripple-tide-news
```

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

### Running Storybook for Ripple UI Components

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md

This command starts the Storybook instance, allowing developers to work on and visualize isolated Ripple UI components (@dpc-sdp/ripple-ui-core and @dpc-sdp/ripple-ui-forms). It opens a browser window with the running Storybook.

```bash
pnpm run storybook
```

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

### Installing Ripple Tide Publication Package with npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-publication/README.md

This command installs the `@dpc-sdp/ripple-tide-publication` package using npm, making it available for use in your Nuxt project. It's a prerequisite for integrating the publication content types.

```bash
npm install @dpc-sdp/ripple-tide-publication
```

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

### Setting Custom Start Numbers for Ordered Lists in Markdown

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Demonstrates how to initiate an ordered list with a specific starting number in Markdown. Subsequent list items will continue numbering from that point, even if `1.` is used for them.

```md
64. foo
1. bar
1. blah
```

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

### Markdown Image Syntax Example

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Demonstrates the standard Markdown syntax for embedding an image, specifying both the alt text for accessibility and the image file path.

```md
![Nils Olav  - This is the alt text](/assets/img/temp/Nils_Olav_wide.jpg)
```

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

### Installing Ripple Tide Grant Package with npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-grant/README.md

This command installs the `@dpc-sdp/ripple-tide-grant` package using npm, making it available for use in a Nuxt.js project. It is the first step required to integrate the grant content type support.

```bash
npm install @dpc-sdp/ripple-tide-grant
```

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

### Example Ripple CSS Custom Properties

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/framework/3.guides/3.brand-application.md

This snippet provides concrete examples of Ripple's CSS custom properties, demonstrating how the naming convention translates into actual property names for colors, typography sizes, spacing, and borders.

```CSS
--rpl-clr-primary
--rpl-clr-success-light
--rpl-type-size-5
--rpl-sp-3
--rpl-border-4
```

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

### Markdown Table Syntax Example

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Provides the Markdown syntax for creating a simple table, including headers and two rows of data, illustrating the pipe and hyphen structure for column separation.

```md
| Name   | Description                  |
| ------ | ---------------------------- |
| Banana | Yellow, elongated, edible.   |
| Apple  | 84% water, 15% carbohydrates |
```

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

### Demonstrating Inline Focus Styles - HTML/Vue Template

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/stories/utilities.focus.stories.mdx

This HTML snippet, part of a Vue component template, showcases inline focus styles using the `.rpl-u-focusable-inline` utility class. It includes examples of multiline links with default and alternative focus colors, and demonstrates the effect of the `--force-on` modifier to always display the focus state. These examples are presented within a token table row for visual comparison.

```HTML
<sbTokenTableRow lined>
        <sbTokenTableCol>
          <div class="sb-demo-container">
            <p class="rpl-type-p rpl-u-margin-b-4">
              <a href="#" class="rpl-u-focusable-inline">A multiline link to test the inline focus style</a>
            </p>
            <p class="rpl-type-p">
              <a href="#" class="rpl-u-focusable-inline rpl-u-focusable--force-on">A multiline link to test the inline focus style</a>
            </p>
          </div>
        </sbTokenTableCol>
        <sbTokenTableCol>
          <div class="sb-demo-container sb-demo-container--dark">
            <p class="rpl-type-p rpl-u-margin-b-4">
              <a href="#" class="rpl-u-focusable-inline rpl-u-focusable--alt-colour">A multiline link to test the inline focus style</a>
            </p>
            <p class="rpl-type-p">
              <a href="#" class="rpl-u-focusable-inline rpl-u-focusable--alt-colour rpl-u-focusable--force-on">A multiline link to test the inline focus style</a>
            </p>
          </div>
        </sbTokenTableCol>
        <sbTokenTableCol>.rpl-u-focusable-inline</sbTokenTableCol>
      </sbTokenTableRow>
```

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

### Example Front Matter in Markdown

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Demonstrates the structure and content of front matter in a Markdown file, used for page metadata like title, description, layout, and external links.

```md
---
title: Kitchen sink
description: Here's everything
layout: page
links:
  - text: Vic gov
    url: https://www.vic.gov.au/
  - text: Single Digital Presence
    url: https://www.vic.gov.au/single-digital-presence
---
```

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

### JavaScript Function Example with Syntax Highlighting

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Presents a JavaScript function definition and its invocation within a fenced code block, demonstrating how syntax highlighting is applied for better readability.

```js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

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

### TypeScript Inline Code Example

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Demonstrates an inline TypeScript code snippet, highlighting its syntax within a sentence, indicating its type and value.

```ts
const codeInline: string = 'highlighted code inline'
```

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

### Displaying Simple RplPagination Story - JSX

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/pagination/RplPagination.stories.mdx

Renders a Storybook example of the RplPagination component in its 'simple' variant, configured for a total of 3 pages, and includes an accessibility check.

```JSX
<Canvas>
  <Story
    name='Simple'
    play={a11yStoryCheck}
    args={{ variant: 'simple', totalPages: 3 }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Basic RplIntroHeader Story

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/header/RplIntroHeader.stories.mdx

This Storybook story defines a basic 'Intro' example for the RplIntroHeader component. It utilizes the SingleTemplate and includes an accessibility check to ensure compliance.

```mdx
<Canvas>
  <Story
    name='Intro'
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Complex Responsive Grid Layout Example in Ripple Framework

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/stories/grid.stories.mdx

This snippet presents a more complex responsive grid layout using Ripple Framework, illustrating how to structure a page with header, menu items, main content, and a side menu. It combines various column spans and starting positions across different breakpoints (XS, M, L) to create a flexible and adaptive page structure.

```HTML
<div class="rpl-grid">
      <div class="rpl-col-12"><u>Header</u></div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-12  rpl-col-7-m  rpl-col-start-1-m">
        <p>
          Body content - Lorem ipsum dolor sit amet, consectetur adipiscing
          elit. Morbi rutrum id erat sed facilisis. Vestibulum sollicitudin nibh
          sit amet molestie consectetur. Proin rhoncus ultrices mauris, at
          egestas erat gravida quis. Curabitur laoreet, lectus non aliquet
          molestie, felis neque viverra magna, vitae cursus dui ante eu nisl.
        </p>
      </div>
      <div class="rpl-col-12  rpl-col-4-m  rpl-col-start-9-m">Side menu</div>
    </div>
```

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

### Initializing a new Ripple site using CLI

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/framework/3.guides/2.new-sites.md

This command utilizes the `@dpc-sdp/nuxt-ripple-cli` to initialize a new Ripple site. It copies the necessary boilerplate files to the specified target directory and sets the project's name.

```Shell
npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name "My Site"
```

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

### Defining Starting Columns in Ripple Grid (HTML)

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/stories/grid.stories.mdx

This snippet illustrates how to explicitly set the starting column for grid items using `rpl-col-start-*` classes. Each `div` element is assigned a specific starting column, demonstrating precise horizontal positioning within the 12-column grid.

```HTML
<div class="rpl-grid">
      <div class="rpl-col-2  rpl-col-start-1">Start at 1st</div>
      <div class="rpl-col-2  rpl-col-start-2">Start at 2nd</div>
      <div class="rpl-col-2  rpl-col-start-3">Start at 3rd</div>
      <div class="rpl-col-2  rpl-col-start-4">Start at 4th</div>
      <div class="rpl-col-2  rpl-col-start-5">Start at 5th</div>
      <div class="rpl-col-2  rpl-col-start-6">Start at 6th</div>
      <div class="rpl-col-2  rpl-col-start-7">Start at 7th</div>
      <div class="rpl-col-2  rpl-col-start-8">Start at 8th</div>
      <div class="rpl-col-2  rpl-col-start-9">Start at 9th</div>
      <div class="rpl-col-2  rpl-col-start-10">Start at 10th</div>
      <div class="rpl-col-2  rpl-col-start-11">Start at 11th</div>
      <div class="rpl-col-1  rpl-col-start-12">Start at 12th</div>
    </div>
```

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

### Storybook Example: Default RplDescriptionList (MDX)

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/description-list/RplDescriptionList.stories.mdx

Demonstrates the default `RplDescriptionList` component with basic author and date items, using `SingleTemplate` for rendering and including an accessibility check.

```MDX
<Story
    name='Default'
    play={a11yStoryCheck}
    args={{
      items: [
        { term: "Author:", description: "Department of Premier and Cabinet" },
        { term: "Date:", description: "November 2021" }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
```

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

### Storybook Default RplFormDateRange Example

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-forms/src/components/RplFormDateRange/RplFormDateRange.stories.mdx

This Storybook `Canvas` and `Story` block defines the default example for `RplFormDateRange`, showcasing its basic appearance and functionality with a 'default' variant.

```JSX
<Canvas>
  <Story
    name='Default'
    args={{
      id: 'date-range-default',
      variant: 'default',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Storybook Simple RplResultListing Example

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/result-listing/RplResultListing.stories.mdx

This `Story` demonstrates a simplified version of the result listing. It sets `content` and `updated` to `null` and includes basic meta information, showcasing a cleaner display of search results.

```javascript
<Canvas>
  <Story
    name='Simple'
    play={a11yStoryCheck}
    args={{
      number: 3,
      title: 'The page title',
      url: 'https://www.vic.gov.au/victorian-government-directory',
      content: null,
      updated: null,
      meta: '<span class="rpl-result-listing__topic">Topic</span><span class="rpl-result-listing__published">10 Aug 2022</span>'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Storybook Example: RplDescriptionList with Icons (MDX)

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/description-list/RplDescriptionList.stories.mdx

Showcases the `RplDescriptionList` component with items that include `iconName` properties, demonstrating how icons are rendered alongside the description using the `InlineTemplate`.

```MDX
<Story
    name='Default / With icons'
    play={a11yStoryCheck}
    args={{
      items: [
        { term: "Date:", description: "17th of November 2021", iconName: "icon-exclamation-circle-filled" },
        { term: "Author:", description: "Department of Premier and Cabinet", iconName: "icon-user-circle-filled" },
        { term: "Content:", description: "And here is some interesting content.", iconName: "icon-document" }
      ]
    }}
  >
    {InlineTemplate.bind()}
  </Story>
```

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

### Example Conventional Commit Message

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md

This is an example of a commit message adhering to the Conventional Commits specification. It indicates a 'fix' type, a scope (@dpc-sdp/ripple-ui-core), and a descriptive message about the change.

```text
fix(@dpc-sdp/ripple-ui-core): fixed table font size for paragraphs and lists
```

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

### Using DocsImageExample Component with Caption

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Shows how to use the `DocsImageExample` component to display an image, providing its source, alt text, and an optional rich text caption for additional context.

```md
::DocsImageExample
---
src: /assets/img/InlineLink-Focus.png
alt: An example of focus state colour contrast
---
Here's the **rich** text `caption`
::
```

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

### Initializing Nuxt Ripple Site/Layer - CLI

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/nuxt-ripple-cli/README.md

This command initializes a new Nuxt site or layer. It requires a template type (`site` or `layer`), a directory for output, a name for the site/layer, and an optional Ripple core dependencies version. It sets up the basic project structure.

```bash
nuxt-ripple init [TEMPLATE] [DIRECTORY] --name {NAME} --rplVersion {RPL_VERSION}
```

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

### Installing Ripple UI Core with npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/3.develop/4.usage/2.vue.md

This command installs the Ripple UI Core package into your project using npm, saving it as a dependency. It is a prerequisite for using Ripple components and styles in your application.

```Shell
npm install @dpc-sdp/ripple-ui-core --save
```

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

### Creating Single Template for RplDescriptionList (Vue)

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/description-list/RplDescriptionList.stories.mdx

Defines a Storybook template for `RplDescriptionList` that binds all arguments directly. This is used for simple, prop-driven examples where items are passed as an array.

```JavaScript
export const SingleTemplate = (args) => ({
  components: { RplDescriptionList },
  setup() {
    return { args }
  },
  template: '<RplDescriptionList v-bind="args" />'
})
```

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

### Example of Fenced Code Block (Plain Text)

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Shows a simple fenced code block without a specified language, suitable for plain text or generic samples where syntax highlighting is not required.

```text
Sample text here...
```

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

### Example of Indented Code Block

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Illustrates a basic multi-line code block using indentation, including comments, typically rendered as preformatted text without specific syntax highlighting.

```text
// Some comments
line 1 of code
line 2 of code
line 3 of code
```

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

### SDP Site Taxonomy Theme Key-Value Example

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/framework/3.guides/3.brand-application.md

This snippet illustrates how theme properties are configured in the SDP back-end system via the Site Taxonomy. It shows key-value pairs used to define site-specific settings, such as a primary color and footer theme, which are exposed to the front-end via the Site API.

```Configuration
Key
rpl-clr-primary
Value
#1c4f9c

Key
footerTheme
Value
neutral
```

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

### Installing Nuxt Ripple Module with npm

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/nuxt-ripple/README.md

This command installs the @dpc-sdp/nuxt-ripple package using npm, making it available for use in your Nuxt.js project. It's the first step to integrate the Ripple and Tide functionalities.

```Bash
npm install @dpc-sdp/nuxt-ripple
```

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

### Building Nuxt App for Production - pnpm - Bash

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/examples/nuxt-app/README.md

This command compiles and optimizes the Nuxt 3 application for production, outputting the build artifacts into the `.output` directory. This process prepares the application for deployment by generating static assets and server-side bundles.

```bash
pnpm -F nuxt-app build
```

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

### Using DocsImageExample Component Without Caption

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Demonstrates the `DocsImageExample` component for displaying an image with its source and alt text, specifically showing a scenario where no caption is provided.

```md
::DocsImageExample
---
src: /assets/img/InlineLink-Focus.png
alt: An example of focus state colour contrast
---
```

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

### Using DocsExample Component with argsString

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Demonstrates passing Storybook `args` parameters to the `DocsExample` component using the `argsString` option, allowing dynamic control over component properties.

```md
::DocsExample
---
id: core-navigation-pagination--complex
argsString: 'totalPages:50;currentPage:30;showTally:true'
---
```

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

### Example JSON Route Configuration for Mock Server

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/nuxt-ripple-cli/README.md

This JSON snippet demonstrates the structure for a route configuration file used with the `nuxt-ripple mock` command. Each object in the array defines a route, mapping a URL path to a specific fixture file containing mocked data.

```json
[{ "path": "/", "fixture": "home.json" }]
```

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

### Starting Development Server for Nuxt Layer

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/framework/3.guides/5.creating-new-layers.md

This command initiates a development server for the newly created Nuxt layer. Running it from the layer's directory allows developers to work on and test the layer in isolation using the provided 'playground' Nuxt application.

```bash
npm run dev
```

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

### Configuring Storybook Documentation Page

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/stories/introduction.stories.mdx

Defines the metadata for a Storybook documentation page, setting its title to 'Introduction' and configuring the view mode to 'docs' for documentation display.

```JSX
<Meta
  title='Introduction'
  parameters={{ viewMode: 'docs'}}
/>
```

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

### Importing Storybook Meta Component

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/stories/introduction.stories.mdx

Imports the `Meta` component from `@storybook/addon-docs`, which is essential for defining documentation pages within Storybook.

```JavaScript
import { Meta } from '@storybook/addon-docs'
```

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

### RplTabs Vertical Mode Story in Storybook

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/tabs/RplTabs.stories.mdx

This Storybook example showcases the RplTabs component configured for vertical display. It uses the same set of tabs as the default example ('Default', 'Extra', 'More') but changes the 'mode' prop to 'vertical'. An accessibility check is also performed.

```MDX
<Story
    name='Vertical'
    play={a11yStoryCheck}
    args={{
      tabs: [
        {
          title: 'Default',
          key: 'default'
        },
        {
          title: 'Extra',
          key: 'extra'
        },
        {
          title: 'More',
          key: 'more',
          icon: 'pin'
        }
      ],
      mode: 'vertical'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
```

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

### Configuring RplFooter Metadata and Args - Storybook

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/footer/RplFooter.stories.mdx

This `Meta` block sets up the Storybook documentation for the `RplFooter` component. It defines the title, component, available `variant` options, and a comprehensive set of default `args` including navigation links, utility links, credit, copyright, and logos.

```JavaScript
<Meta
  title='Core/Navigation/Footer'
  component={RplFooter}
  argTypes={{
    variant: {
      control: { type: 'select' },
      options: RplFooterVariants
    }
  }}
  args={{
  variant: 'default',
  nav: RplFooterLinks,
  links: [
    {
      text: 'Privacy',
      url: '#'
    },
    {
      text: 'Disclaimer',
      url: '#'
    },
    {
      text: 'Terms of use',
      url: '#'
    },
    {
      text: 'Sitemap',
      url: '#'
    },
    {
      text: 'Accessibility Statement',
      url: '#'
    },
    {
      text: 'Help',
      url: '#'
    }
  ],
  credit: 'Image credit: image metadata slash credit goes here.',
  copyright: '© Copyright State Government of Victoria',
  logos: [
    {
      src: svgPlaceholder({ width: 200, height: 80 }),
      alt: 'Landscape',
      url: '#'
    }
  ]
}}/>
```

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

### Storybook Canvas with RplMap Examples (MDX)

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-maps/src/components/map/RplMap.stories.mdx

This Canvas block contains multiple Storybook stories, each demonstrating a different configuration of the RplMap component. Examples include various map providers (Mapbox, Esri, Vicmap), vector layers, clustering options (nearer, disabled), and integration with a layer list.

```MDX
<Canvas>
  <Story
    name='Mapbox'
    args={{
      id: '123',
      features:featureData,
      provider: 'mapbox'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Esri'
    args={{
      id: '123',
      features: featureData,
      provider: 'esri'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Vicmap'
    args={{
      id: '123',
      provider: 'vicmap',
      projection: 'EPSG:3857',
      features:featureData
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Vector Layers'
    args={{
      id: '123',
      projection: 'EPSG:3857',
      features:featureData,
      provider: 'mapbox',
      popupType: 'popover',
      vectorLayers: true
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Clustering Nearer'
    args={{
      id: '123',
      features:featureData,
      provider: 'mapbox',
      clusteringDistance: 25
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Clustering Disabled'
    args={{
      id: '123',
      features:featureData,
      provider: 'mapbox',
      clusteringDistance: 0
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='With layer list'
    args={{
      id: '123',
      features:featureData,
      provider: 'mapbox',
      selectedLayers: ['red', 'green'],
      layerList: [
        {
          id: 'red',
          label: 'Red layer',
          image: svgPlaceholder({ width: 44, height: 44, fgColor: '#fff', bgColor: '#ffb2b2' })
        },
        {
          id: 'green',
          label: 'Green layer',
          image: svgPlaceholder({ width: 44, height: 44, fgColor: '#fff', bgColor: '#caffae' })
        },
        {
          id: 'blue',
          label: 'Blue layer',
          image: svgPlaceholder({ width: 44, height: 44, fgColor: '#fff', bgColor: '#aee9ff' })
        }
      ]
    }}
  >
    {Template.bind()}
  </Story>
</Canvas>
```

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

### Storybook Example: Basic Page Links with Previous/Next

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/page-links/RplPageLinks.stories.mdx

This Storybook Canvas block defines a basic example of the RplPageLinks component. It sets up a story named 'Page links' with prev and next arguments, providing simple descriptions and URLs. The a11yStoryCheck function is used for accessibility testing, and SingleTemplate renders the component.

```html
<Canvas>
  <Story
    name='Page links'
    play={a11yStoryCheck}
    args={{
      prev: { description: 'Check out this page', url: '#page' },
      next: { description: 'Another page to look at', url: '#another-page' },
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Storybook Example: Link List with Single Column Layout

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/link-list/RplLinkList.stories.mdx

Illustrates a Storybook story for the `RplLinkList` component configured to display its items in a single column, which is useful for sidebar or narrow layout contexts. This example includes a standard set of link items and explicitly sets the `numColumns` prop to 1.

```MDX
<Story
  name='With sidebar (1 column)'
  play={a11yStoryCheck}
  args={{
    items: [
      { text: "Link label 1", url: "#" },
      { text: "Link label 2", url: "#" },
      { text: "Link label 3", url: "#" },
      { text: "Link label 4", url: "#" },
      { text: "Link label 5", url: "#" },
      { text: "Link label 6", url: "#" }
    ],
    numColumns: 1
  }}
>
  {SlotTemplate.bind()}
</Story>
```

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

### Defining Border Example Styles in Vue.js

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/stories/layers.stories.mdx

This JavaScript function defines inline CSS styles for a border example element within a Vue component. It calculates width and height based on design tokens and applies a solid border using a dark color token. This function is used to visually represent the border style token.

```JavaScript
getExampleStyles: () => ({
  width: 'calc(var(--rpl-sp-4) * 4)',
  height: 'var(--rpl-sp-4)',
  border: `1px solid var(--rpl-clr-dark)`
})
```

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

### Using DocsExample Component with Custom Options

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Shows how to configure the `DocsExample` component with additional boolean options like `withPadding`, `hideNewTab`, and `hideCode` to customize its display behavior.

```md
::DocsExample
---
id: core-navigation-button--default-filled
withPadding: false
hideNewTab: false
hideCode: true
---
```

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

### Rendering RplNavCard Storybook Example

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/card/RplNavCard.stories.mdx

This Storybook `Canvas` and `Story` snippet renders an interactive example of the `RplNavCard` component. It names the story 'Nav' and integrates an accessibility check (`a11yStoryCheck`) to run after the story renders. The `SingleTemplate` function is bound and used to provide the component's structure and data, allowing users to interact with the defined `argTypes`.

```JavaScript
<Canvas>
  <Story
    name='Nav'
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Simple Responsive Grid Column Example in Ripple Framework

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/stories/grid.stories.mdx

This snippet provides a simple example of a responsive grid column in Ripple Framework, demonstrating how a single column can adapt its width across different breakpoints. The column spans 12 units on XS, 6 units on Medium (M), and 3 units on Large (L) screens, showcasing responsive design with multiple `rpl-col-X` classes.

```HTML
<div class="rpl-grid">
      <div class="rpl-col-12  rpl-col-6-m  rpl-col-3-l">Span 12 / 6 (M) / 3 (L)</div>
    </div>
```

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

### RplFile Story with Custom Caption

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/file/RplFile.stories.mdx

Illustrates the `RplFile` component with a custom `caption`. This example demonstrates how to provide a longer, descriptive text below the file name.

```mdx
<Story
    name='With Caption'
    play={a11yStoryCheck}
    args={{
      caption: 'And this is example of a longer description of the document, this one seems very descriptive.'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
```

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

### Importing Dependencies for RplFormInput Storybook - JavaScript

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.stories.mdx

This snippet imports necessary modules and components for setting up the `RplFormInput` component within Storybook, including core UI styles and a fixture component for input demonstration.

```JavaScript
import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplFormInput from './RplFormInput.vue'
import StorybookInputFixture from './../StorybookInputFixture/StorybookInputFixture.vue'
import '@dpc-sdp/ripple-ui-core/style/components'
import '../RplForm/RplForm.css'
```

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

### Importing Storybook and Component Dependencies

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.stories.mdx

Imports necessary modules from Storybook for documentation and component rendering, along with the `RplMediaGallery` Vue component and an accessibility check utility.

```JavaScript
import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplMediaGallery from './RplMediaGallery.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'
```

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

### Creating Ordered Lists in Markdown

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Illustrates how to create ordered lists using numbers followed by a period. Explains that Markdown automatically handles numbering, allowing the use of `1.` for all items, and shows how to create nested ordered lists with four spaces of indentation.

```md
This works:

1. Lorem ipsum dolor sit amet
    1. Lorem at massa
    2. Adipiscing
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

But just do this, it's the same thing:

1. Lorem ipsum dolor sit amet
    1. Lorem at massa
    1. Adipiscing
1. Consectetur adipiscing elit
1. Integer molestie lorem at massa
```

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

### RplFile Story with Date Caption

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/file/RplFile.stories.mdx

Showcases the `RplFile` component with an `updated` date displayed as a caption. This example demonstrates how to include temporal information below the file name.

```mdx
<Story
    name='With Date'
    play={a11yStoryCheck}
    args={{
      updated: 'July 17, 2022'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
```

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

### Using DocsExample Component with Theme and Neutral Buttons

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

Illustrates how to apply a specific `theme` or enable `useNeutralButtons` for a component displayed via `DocsExample`, affecting its visual style and button appearance.

```md
::DocsExample
---
id: core-navigation-button--default-filled
theme: 'light'
---
```

```md
::DocsExample
---
id: core-navigation-card--call-to-action
useNeutralButtons: true
---
```

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

### Storybook Inactive RplFormInput Example - Vue.js/MDX

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.stories.mdx

This Storybook `Story` illustrates the `RplFormInput` component in a disabled (inactive) state, pre-filled with a value and including both prefix and suffix icons.

```Vue.js/MDX
<Canvas>
  <Story
    name='Inactive'
    args={{
      disabled: true,
      prefixIcon: 'icon-arrow-left',
      suffixIcon: 'icon-arrow-right',
      value: 'Some value'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Displaying Cards with DocsCardGrid and DocsCard (Markdown Component Syntax)

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/docs/content/design-system/_markdown-reference-file.md

This snippet demonstrates how to arrange multiple `DocsCard` components within a `DocsCardGrid` to display promotional-style cards. Each `DocsCard` requires a `title` and `url` property, along with summary text. The `DocsCardGrid` ensures proper layout of the cards.

```Markdown Component Syntax
::DocsCardGrid
  ::DocsCard
  ---
  title: Button
  url: /design-system/components/button
  ---
  Here's the summary text
  ::

  ::DocsCard
  ---
  title: Vic gov
  url: https://www.vic.gov.au/
  ---
  Here's the summary text
  ::

  ::DocsCard
  ---
  title: Code standards
  url: /framework/code-standards
  ---
  Here's the summary text
  ::
::
```

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

### RplHeroHeader Story: Call to Action

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/header/RplHeroHeader.stories.mdx

This Storybook example illustrates the RplHeroHeader component configured with both a primary and a secondary call-to-action button. Each action is defined by its text and a target URL.

```MDX
<Canvas>
  <Story
    name='Default/Call to action'
    play={a11yStoryCheck}
    args={{
      primaryAction: { text: 'Primary action', url: '#primary' },
      secondaryAction: { title: 'Want to know more', text: 'Secondary action', url: '#secondary' }
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Importing Storybook and Ripple Components - JavaScript

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/stories/utilities.focus.stories.mdx

This snippet imports necessary modules for Storybook documentation, including core Storybook components (`Meta`, `Canvas`, `Story`), design tokens (`rplSpacing`, `rplLayerStyles`), custom token table components, and Ripple UI components (`RplIcon`, `RplButton`). These imports set up the environment for showcasing design system elements and their interactive states.

```JavaScript
import { Meta, Canvas, Story } from '@storybook/addon-docs'
import rplSpacing from '../src/tokens/settings/spacing.yaml'
import rplLayerStyles from '../src/tokens/settings/layers.yaml'
import sbTokenTable from './components/token-table.vue'
import sbTokenTableRow from './components/token-row.vue'
import sbTokenTableCol from './components/token-col.vue'
import sbTokenTableSwatch from './components/token-swatch.vue'
import RplIcon from './../src/components/icon/RplIcon.vue'
import RplButton from './../src/components/button/RplButton.vue'
```

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

### Storybook RplFormInput with Icons Example - Vue.js/MDX

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.stories.mdx

This Storybook `Story` showcases the `RplFormInput` component with both a prefix and a suffix icon, demonstrating how to integrate visual cues within the input field.

```Vue.js/MDX
<Canvas>
  <Story
    name='with Icons'
    args={{
      prefixIcon: 'icon-arrow-left',
      suffixIcon: 'icon-arrow-right'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Storybook Default RplFormInput Example - Vue.js/MDX

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.stories.mdx

This Storybook `Story` defines the default state of the `RplFormInput` component, setting its type to 'text' and providing a placeholder, rendered using the `SingleTemplate`.

```Vue.js/MDX
<Canvas>
  <Story
    name='Default'
    args={{
      type: 'text',
      placeholder: 'Enter some text'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Demonstrating Block Focus Styles - HTML/Vue Template

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/stories/utilities.focus.stories.mdx

This HTML snippet, embedded in a Vue component template, illustrates block focus styles using the `.rpl-u-focusable-block` utility class. It provides examples of block-level links with default and alternative focus colors, showcasing how the `--force-on` modifier can be used to maintain the focus state. These demonstrations are structured within a token table row for clear comparison.

```HTML
<sbTokenTableRow lined>
      <sbTokenTableCol>
          <div class="sb-demo-container">
            <a href="#" class="rpl-type-p rpl-u-margin-b-4 rpl-u-focusable-block">A multiline link to test the block focus style</a>
            <a href="#" class="rpl-type-p rpl-u-focusable-block rpl-u-focusable--force-on">A multiline link to test the block focus style</a>
          </div>
        </sbTokenTableCol>
        <sbTokenTableCol>
          <div class="sb-demo-container sb-demo-container--dark">
            <a href="#" class="rpl-type-p rpl-u-margin-b-4 rpl-u-focusable-block rpl-u-focusable--alt-colour">A multiline link to test the block focus style</a>
            <a href="#" class="rpl-type-p rpl-u-focusable-block rpl-u-focusable--alt-colour rpl-u-focusable--force-on">A multiline link to test the block focus style</a>
          </div>
        </sbTokenTableCol>
        <sbTokenTableCol>.rpl-u-focusable-block</sbTokenTableCol>
      </sbTokenTableRow>
```

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

### Storybook Block Display RplFormDateRange Example

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-forms/src/components/RplFormDateRange/RplFormDateRange.stories.mdx

This Storybook `Canvas` and `Story` block illustrates the `RplFormDateRange` component configured for 'block' display, affecting its layout behavior within the page.

```JSX
<Canvas>
  <Story
    name='Block display'
    args={{
      id: 'date-range-display-block',
      display: 'block'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
```

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

### Importing Dependencies for Storybook Documentation

Source: https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-forms/src/components/RplFormOptions/RplFormRadioGroup.stories.mdx

This snippet imports necessary modules from Storybook for documentation, the `RplFormRadioGroup` component itself, a `StorybookInputFixture` for consistent input styling, and global CSS styles for Ripple UI components and forms.

```JavaScript
import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplFormRadioGroup from './RplFormRadioGroup.vue'
import StorybookInputFixture from './../StorybookInputFixture/StorybookInputFixture.vue'
import '@dpc-sdp/ripple-ui-core/style/components'
import '../RplForm/RplForm.css'
```