import React from 'react';

import HeaderRow from '@ichef/gypcrete/src/HeaderRow';
import Button from '@ichef/gypcrete/src/Button';
import TextLabel from '@ichef/gypcrete/src/TextLabel';
import TextEllipsis from '@ichef/gypcrete/src/TextEllipsis';

import DebugBox from 'utils/DebugBox';

export default {
    title: '@ichef/gypcrete|HeaderRow',
    component: HeaderRow,
};

export function BasicUsage() {
    const leftBtn = <Button icon="prev" basic="Back" />;
    const rightBtn = <Button align="reverse" icon="row-padding" basic="Save" />;
    const centerLabel = (
        <TextLabel
            align="center"
            basic={
                <TextEllipsis>Lorem ipsum a slightly longer title</TextEllipsis>
            } />
    );

    return (
        <DebugBox>
            <HeaderRow
                left={leftBtn}
                center={centerLabel}
                right={rightBtn} />
        </DebugBox>
    );
}

export function OptionalArea() {
    const rightBtn = <Button align="reverse" icon="row-padding" basic="Save" />;
    const centerLabel = <TextLabel basic="Header Title" />;

    return (
        <DebugBox>
            <HeaderRow
                left={false}
                center={centerLabel}
                right={rightBtn} />
        </DebugBox>
    );
}

OptionalArea.story = {
    parameters: {
        docs: {
            storyDescription: 'Remove an area from DOM by explictly setting it to false.',
        },
    },
};

@@ -37,16 +37,32 @@
 eaderRow
+, %7B HeaderArea %7D
  from '@
@@ -381,16 +381,64 @@
 derRow,%0A
+    subcomponents: %7B%0A        HeaderArea,%0A    %7D,%0A
 %7D;%0A%0Aexpo

Add HeaderArea into HeaderRow storybook subcomponents