import Basic from './demo/basic';
import WithNavigation from './demo/with-navigation';
import WithNavigationAlignRight from './demo/with-navigation-align-right';
import ResponsiveHeader from './demo/responsive-header';

export default {
  title: 'Layout/Header',
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component:
          'A generic page header component that supports common design elements such as logo, brand title, brand description, etc., and provides content slots for displaying navigation and action buttons.',
      },
    },
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1504%3A4630',
    },
  },
};

const argTypes = {
  maxWidth: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', false] },
};

Basic.argTypes = argTypes;
ResponsiveHeader.argTypes = argTypes;

export { Basic, WithNavigation, WithNavigationAlignRight, ResponsiveHeader };
