import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import * as StickyOnMobileStories from "./StickyOnMobile.stories";
import { StickyOnMobile } from "./StickyOnMobile";

<Meta of={StickyOnMobileStories} />

# StickyOnMobile

`StickyOnMobile` is a thin layout wrapper that pins a single child to the bottom of the viewport on mobile (`max-width: 768px`) and renders in document flow on desktop. Use it for primary CTAs such as the Combined Payments checkout button.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { StickyOnMobile } from "@simplybusiness/mobius";
```

### Default

<Canvas of={StickyOnMobileStories.Default} />

### As a `footer` element

<Canvas of={StickyOnMobileStories.AsFooterElement} />

## Behaviour

- **≥ 769px** — renders as a plain block element with no margin or padding. The wrapper has no material impact on layout.
- **≤ 768px** — clamped to the bottom of the viewport with `position: fixed; bottom: 0; left: 0; right: 0;`. White background (`var(--color-background)`) and a soft upward shadow visually layer the bar above the scrolling content. Padding of `var(--size-sm)` is applied, with `env(safe-area-inset-bottom)` honoured for iOS home-indicator safe area.

## Composition

`StickyOnMobile` accepts a single child. For complex content, compose it into its own component first.

The breakpoint is fixed at 768px and is **not** dynamic. To override it, pass a `className` and rely on consumer-side CSS — `StickyOnMobile`'s rules sit inside `@layer atoms`, so any unlayered consumer rule wins.

## Props

<ArgTypes of={StickyOnMobile} />

## Component HTML Structure and Class names

The following HTML is rendered for a StickyOnMobile:

```html
<div class="mobius mobius-sticky-on-mobile">{children}</div>
```
