import { Story, Canvas, ArgsTable, Meta } from '@storybook/addon-docs/blocks';

import HeroBanner from '../HeroBanner';
import { heroBannerSettings } from '../../../../mocks/components/hero-banner'
import { getKnobs } from '../../../tools/knobsHelper';

export const knobs = () => ({
    ...getKnobs(HeroBanner.schema().form)
})


<Meta title="Components/Hero Banner" component={HeroBanner} />

# HeroBanner
<br />

## `HeroBanner` can be used to showcase custom content, while also providing various options for customization.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div>
            <HeroBanner settings={heroBannerSettings} />
        </div>
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <div>
            <HeroBanner settings={knobs()} />
        </div>
    </Story>
</Canvas>

## Props
<ArgsTable of={HeroBanner} />
