import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Star } from '@useblu/ocean-icons-react';
import SubHeader from '../SubHeader';

<Meta
  title="Components/SubHeader"
  component={SubHeader}
  parameters={{ layout: 'padded' }}
/>

# Sub Header API

The API documentation of the SubHeader React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { SubHeader } from '@useblu/ocean-react';
```

## Usage with title

<Canvas withSource="open" withToolbar>
  <Story name="usage-with-title">
    <SubHeader>Hoje</SubHeader>
  </Story>
</Canvas>

## Usage with subtitle

<Canvas withSource="open" withToolbar>
  <Story name="usage-with-subtitle">
    <SubHeader
      subtitle={
        <>
          Saldo do dia <strong>R$ 5.000,00</strong>
        </>
      }
    >
      Hoje
    </SubHeader>
  </Story>
</Canvas>

## Props

<ArgsTable of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class                | Description                                                |
| --------------------------- | ---------------------------------------------------------- |
| .ods-sub-header             | Styles applied to the sub-header element.                  |
| .ods-sub-header\_\_title    | Styles applied to the title element.                       |
| .ods-sub-header\_\_subtitle | Styles applied to the subtitle element when it is present. |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Input/Input.tsx) for more detail.

## Inheritance

The props of the [FormControl](?path=/docs/components-formcontrol--page) component are also available.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      children: 'Lorem ipsum',
    }}
  >
    {(props) => <SubHeader {...props} />}
  </Story>
</Canvas>
