import { Meta } from '@storybook/addon-docs/blocks';

<Meta
    title="Utilities/Breakpoints"
    summary="Media-query helpers matching the Design System's breakpoints."
/>

# Breakpoints

Media-query helpers matching the Design System's breakpoints, so custom CSS switches layout at the
same widths as [responsive component props](/docs/conventions-responsive-and-shorthand-values--docs).

Use only `min-width` queries (mobile-first): the base style targets the smallest screens and each
breakpoint overrides it from that width upwards. Don't use `max-width` queries, and don't use
legacy `@preply/ui` breakpoint variables (`@responsive-mobile-normal`, …) in new code.

**Note:** Storybook renders docs pages inside an `iframe`, so a media query here responds to the
iframe width, not the browser window.

## styled-components

Import `minWidth` from `@preply/ds-web-core` and use it as a mixin:

```ts
import styled from 'styled-components';
import { minWidth } from '@preply/ds-web-core';

export const MyComponent = styled.div`
    display: flex;
    flex-direction: column;

    ${minWidth('medium-l')} {
        flex-direction: row;
    }
`;
```

To access the pixel values directly, import the `BREAKPOINT` record from `@preply/ds-core`:

```ts
import { BREAKPOINT } from '@preply/ds-core';

const query = `@media (min-width: ${BREAKPOINT['medium-l']}px)`;
```

## Less

Import `breakpoints.less` from `@preply/ds-web-core` and use the breakpoint name as a media
variable:

```css
@import '@preply/ds-web-core/dist/generated/breakpoints.less';

.container {
    display: flex;
    flex-direction: column;

    @media @medium-l {
        flex-direction: row;
    }
}
```

The `@breakpoints` map exposes the pixel values directly:

```css
@media (min-width: @breakpoints[medium-l]) {
    /* ... */
}
```

## SCSS (experimental)

SCSS support exists for the Next.js App Router, where Less is not supported. The API may change:

```css
@use '@preply/ds-web-core/dist/generated/breakpoints' as *;

.container {
    display: flex;
    flex-direction: column;

    @include medium-l {
        flex-direction: row;
    }
}
```

The `$breakpoints` map exposes the pixel values directly:

```css
@media (min-width: map-get($breakpoints, medium-l)) {
    /* ... */
}
```