import { TitleBar } from "./TitleBar";
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";

<Meta title="Modules/TitleBar" component={TitleBar} />

The `TitleBar` component is used to create context around its functionality and is particularly useful for Add-ons located within inside of existing views.

For more information on the `TitleBar` component and its use, please check out our [design system](https://build.localbyflywheel.com/project/designing-your-add-on/creating-your-layout#the-title-bar).

<Canvas>
	<Story name="TitleBar">
        <TitleBar title="Add-on Title" />
	</Story>
</Canvas>

<Canvas>
	<Story name="With right-aligned content">
        <TitleBar title="Add-on with title">
          optional right content
        </TitleBar>
	</Story>
</Canvas>

<Canvas>
	<Story name="With right-aligned CTA">
        <TitleBar title="Add-on with title">
            <span>optional right content</span>
            <a href="#">Action link</a>
        </TitleBar>
	</Story>
</Canvas>