import { Meta } from "@storybook/addon-docs";
import { Table } from "@stories/components";
import { Preview } from "@stories/components";

<Meta
    title="Features/Responsive styles"
    id="responsive-styles"
/>

# Responsive styles

Orbit [style props](?path=/docs/style-props--page) accepts a specialized syntax to support responsive breakpoints.

## Usage

By passing an object to any style props, you can specify which style will be applied at different breakpoints. These rules are on a [`min-width` basis](https://nikitahl.com/difference-between-min-width-vs-max-width) meaning that a `sm` value will apply from `768px` and up until another higher breakpoint matches.

<Preview>
    <Div backgroundColor={{ base: "green-2", xs: "purple-2", sm: "green-2", md: "accent-2", lg: "neutral-2", xl: "warning-2" }} width={18} maxWidth="100%" padding={4}>
        <Paragraph fontSize={4}>Lost in space.</Paragraph>
    </Div>
</Preview>

## Mobile first

Not all breakpoints must be explicitly defined. In the following example, `base` and `lg` breakpoints are explicitly declared. When match, the `xl` breakpoint will implicitly take the value set by the `lg` breakpoint since it is wider than `lg`. Everything below `lg` inherits the `base` color.

<Preview>
    <Div backgroundColor={{ base: "alias-success", lg: "alias-warning" }} width={18} maxWidth="100%" padding={4}>
        <Paragraph fontSize={4}>Lost in space.</Paragraph>
    </Div>
</Preview>

## useResponsiveValue

To resolve a responsive value within a React component, Orbit provides the `useResponsiveValue` hook.

```jsx
import { useResponsiveValue } from "@sharegate/orbit-ui";

const fluidValue = useResponsiveValue({ base: true, lg: false });
```

## Breakpoints

The following responsive breakpoints are supported by Orbit [style props](?path=/docs/style-props--page) and acts as their [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) counterparts:

<Table
    columns={[
        { title: "Size", headerStyle: { width: "75px" }, rowClassName: "code" },
        { title: "Media query", headerStyle: { width: "200px" }, rowClassName: "code" }
    ]}
    rows={[
        ["xs", "min-width: 640px"],
        ["sm", "min-width: 768px"],
        ["md", "min-width: 1024px"],
        ["lg", "min-width: 1280px"],
        ["xl", "min-width: 1440px"]
    ]}
    style={{
        marginTop: "24px",
        marginBottom: "24px"
    }}
/>
