HEX

File: /home/s/t/u/studionolh/www/wp-includes/Requests/Cookie/reusable-blocks/stories.tar
controls/range.stories.js000064400000002353152335526200011536 0ustar00import React from 'react';
import ETCoreRange from '../../controls/range/range';


export default {
  title: 'Controls/ETCoreRange',
  component: ETCoreRange,
  render: (args) => {
    const { range_min: min, range_max: max, range_step: step } = args;
    return (
      <ETCoreRange
        {...args}
        value={min}
        _onChange={(e) => {
          console.log(e);
        }}
        range_settings={{
          min,
          max,
          step,
        }}
      />
    );
  },
  argTypes: {
    range_settings: {
      control: false,
    },
    range_min: {
      control: {
        type: 'number',
      },
    },
    range_max: {
      control: {
        type: 'number',
      },
    },
    range_step: {
      control: {
        type: 'number',
      },
    },
  },
};


export const Default = {
  args: {
    name: 'default-range',
    range_min: 0,
    range_max: 100,
    range_step: 1,
  },
};

export const WithCustomUnit = {
  args: {
    ...Default.args,
    name: 'custom-unit-range',
    default_unit: '%',
  },
};

export const WithCustomRange = {
  args: {
    ...Default.args,
    name: 'custom-range',
  },
};

export const WithPrecision = {
  args: {
    ...Default.args,
    name: 'precision-range',
    precision: 2,
  },
};
controls/button.stories.js000064400000002310152335526200011746 0ustar00import Button from '../../controls/button/button';


export default {
  title: 'Controls/Button',
  component: Button,
  argTypes: { onClick: { action: 'clicked' } },
};

export const Primary = {
  args: {
    children: 'Primary Button',
    ripple: true,
    className: 'et-common-button--primary',
    tip: '',
  },
};

export const Secondary = {
  args: {
    ...Primary.args,
    children: 'Secondary Button',
    className: 'et-common-button--secondary',
  },
};

export const Tertiary = {
  args: {
    ...Primary.args,
    children: 'Tertiary Button',
    className: 'et-common-button--tertiary',
  },
};

// Compact Button
export const Compact = {
  args: {
    ...Primary.args,
    children: 'Compact Button',
    className: 'et-common-button--primary et-common-button--compact',
  },
};

// Meta Button

export const Meta = {
  args: {
    ...Primary.args,
    children: 'Meta Button',
    className: 'et-common-button--meta',
  },
};

// Button with Tip
export const WithTip = {
  args: {
    ...Primary.args,
    children: 'Button With Tip',
    tip: 'Tooltip Text',
  },
};

// Button without Ripple
export const NoRipple = {
  args: {
    ...Primary.args,
    children: 'No Ripple',
    ripple: false,
  },
};
controls/toggle.stories.js000064400000001550152335526200011721 0ustar00// External dependencies.
import React from 'react';
import { useArgs } from '@storybook/preview-api';

// Internal dependencies.
import Toggle from '../../controls/toggle/toggle';


export default {
  title: 'Controls/Toggle',
  component: Toggle,
  render: (args) => {
    const [{ value }, updateArgs] = useArgs();

    const handleChange = (name, newValue) => {
      updateArgs({ value: newValue });
    };

    return (
      <Toggle
        {...args}
        onChange={handleChange}
      />
    );
  },
  argTypes:{
    onChange:{
      table: {
        disable: true,
      },
    },
    options:{
      table: {
        disable: true,
      },
    },
  }  
};

export const Default = {
  args: {
    value: 'off',
    options: { on: 'on', off: 'off', type: 'default' },
  },
};

export const ToggledOn = {
  args: {
    ...Default.args,
    value: 'on',
  },
};
controls/input/checkbox.stories.js000064400000001735152335526200013372 0ustar00// Internal dependencies.
import Checkbox from '@common-ui/controls/input/checkbox';


export default {
  title: 'Controls/Input/Checkbox',
  component: Checkbox,
  argTypes: {
    onChange: {
      action: 'changed',
      table: {
        disable: true,
      },
    },
  },
  parameters: {
    backgrounds: {
      default: 'dark',
    },
  },
};

export const Default = {
  args: {
    checked: false,
    className: 'storybook-checkbox-unckecked',
  },
};

export const Checked = {
  args: {
    checked: true,
    className: 'storybook-checkbox-checked',
  },
};

export const Disabled = {
  args: {
    checked: false,
    disabled: true,
    className: 'storybook-checkbox-unchecked-disabled',
  },
};

export const Danger = {
  args: {
    checked: true,
    positive: false,
    className: 'storybook-checkbox-checked-danger',
  },
};

export const Children = {
  args: {
    checked: false,
    children: 'Label',
    className: 'storybook-checkbox-unchecked-children',
  },
};
controls/input/textarea.stories.js000064400000000612152335526200013412 0ustar00import Textarea from '../../../controls/input/textarea';


export default {
  title: 'Controls/Input/Textarea',
  component: Textarea, // The actual component
  argTypes: {
    onChange: {
      action: 'changed',
      table: {
        disable: true,
      },
    },
  },
};

export const WithPlaceholder = {
  args: {
    placeholder: 'Enter text here...',
    className: 'textarea',
  },
};
controls/input/text-input.stories.js000064400000001706152335526200013723 0ustar00import TextInput from '../../../controls/input/text-input';


export default {
  title: 'Controls/Input/TextInput',
  component: TextInput,
  argTypes: {
    onChange: {
      action: 'changed',
      table: {
        disable: true,
      },
    },
    type: {
      options: ['text', 'password', 'email', 'number', 'date', 'month', 'url', 'week', 'time', 'search', 'datetime-local'],
      control: 'select',
      description: 'Type of the input.',
    },
  },
};


export const Default = {
  args: {
    className: 'et-common-input--text',
    type: 'text',
  },
};

export const EmailInput = {
  args: {
    ...Default.args,
    type: 'email',
    className: 'et-common-input--email',
  },
};

export const PasswordInput = {
  args: {
    ...Default.args,
    type: 'password',
    className: 'et-common-input--password',
  },
};


export const NumberInput = {
  args: {
    ...Default.args,
    type: 'number',
    className: 'et-common-input--number',
  },
};
controls/categories.stories.js000064400000003012152335526200012560 0ustar00// External dependencies.
import React, { useState } from 'react';

// Internal dependencies.
import CommonCategories from '@common-ui/controls/categories/categories';


export default {
  title: 'Controls/Categories',
  component: CommonCategories,
  argTypes: { onCategoriesChange: { action: 'changed' } },
};

const Template = args => {
  const [selectedCategories, setSelectedCategories] = useState(args.selectedCategories);

  const onCategoriesChange = (value, updateType) => {
    args.onCategoriesChange(value, updateType);

    if (updateType === 'add') {
      setSelectedCategories([...selectedCategories, value]);
    } else {
      setSelectedCategories(selectedCategories.filter(category => category !== value));
    }
  };

  return <CommonCategories {...args} selectedCategories={selectedCategories} onCategoriesChange={onCategoriesChange} />;
};

export const Default = args => <Template {...args} />;
Default.args = {
  selectedCategories: [],
  allCategories: {1: 'Category 1', 2: 'Category 2', 3: 'Category 3'},
  disabled: false,
  markedCategories: [],
  categoryMark: '',
};

export const WithSelectedCategories = args => <Template {...args} />;
WithSelectedCategories.args = {
  ...Default.args,
  selectedCategories: [1, 3],
};

export const WithMarkedCategories = args => <Template {...args} />;
WithMarkedCategories.args = {
  ...Default.args,
  markedCategories: ['Category 1'],
  categoryMark: '*',
};

export const Disabled = args => <Template {...args} />;
Disabled.args = {
  ...Default.args,
  disabled: true,
};
controls/color.stories.js000064400000003253152335526200011560 0ustar00// External dependencies.
import React from 'react';

// Internal dependencies.
import { useArgs } from '@storybook/preview-api';
import ETBuilderControlColor from '../../controls/color/color';
import { action } from '@storybook/addon-actions';

export default {
  title: 'Controls/ColorPicker',
  component: ETBuilderControlColor,
  render: (args) => {
    const [, updateArgs] = useArgs();

    const handleChange = (name, color) => {
      updateArgs({ value: color });
      action('color changed')(name, color);
    };

    return (
      <div style={{ width: '30vw' }}>
        <ETBuilderControlColor
          {...args}
          _onChange={handleChange}
        />
      </div>
    );
  },
  argTypes: {
    _onChange: {
      table: {
        disable: true,
      },
    },
    value: {
      control: 'color',
    }
  },
};


export const Default = {
  args: {
    animate: true,
    hideHarmoniusColors: false,
    name: 'Default color',
  },
};

export const WithPreview = {
  ...Default.args,
  title: 'With Preview',
  args: {
    ...Default.args,
    hasPreview: true,
    name: 'With Preview',
  },
};

export const ReadonlyColorPicker = {
  ...Default.args,
  title: 'Readonly Color Picker',
  args: {
    ...Default.args,
    readonly: true,
    name: 'Readonly Color Picker',
  },
};

export const WithAlphaChannel = {
  ...Default.args,
  title: 'With Alpha Channel',
  args: {
    ...Default.args,
    isAlpha: true,
    name: 'With Alpha Channel',
  },
};

export const CustomPalette = {
  ...Default.args,
  title: 'Custom Palette',
  args: {
    ...Default.args,
    showPickerPalettes: true,
    hideHarmoniusColors: false,
    name: 'Custom Palette',
    value: '#ff69b4',
  },
};
controls/button-group.stories.js000064400000003172152335526200013107 0ustar00// External dependencies.
import React from 'react';

// Internal dependencies.
import Button from '@common-ui/controls/button/button';
import ETCommonButtonGroup from '@common-ui/controls/button-group/button-group';


const Buttons = (
  <>
    <Button className='et-common-button et-common-button--primary'>Button 1</Button>
    <Button className='et-common-button et-common-button--danger'>Button 2</Button>
    <Button className='et-common-button et-common-button--success'>Button 3</Button>
    <Button className='et-common-button et-common-button--tertiary'>Button 4</Button>
  </>
);

export default {
  title: 'Controls/Button Group',
  component: ETCommonButtonGroup,
  argTypes: {
    onClick: {
      action: 'clicked',
      table: {
        disable: true,
      },
    },
  },
  args: {
    children: Buttons,
    style: {
      padding: '10px',
    },
  },
};

export const Horizontal = {};

export const Vertical = {
  args: {
    vertical: true,
  },
};

export const Block = {
  args: {
    block: true,
  },
};

export const Danger = {
  args: {
    danger: true,
  },
};

export const Elevate = {
  args: {
    elevate: true,
  },
};

export const Info = {
  args: {
    info: true,
  },
};

export const Inverse = {
  args: {
    inverse: true,
  },
};

export const Primary = {
  args: {
    primary: true,
  },
};

export const Success = {
  args: {
    success: true,
  },
};

export const Warning = {
  args: {
    warning: true,
  },
};

export const WithCustomStyle = {
  args: {
    style: { backgroundColor: 'lightblue' },
  },
};

export const WithOnClick = {
  args: {
    onClick: () => alert('Button group clicked!'),
  },
};
controls/codemirror.stories.js000064400000003061152335526200012604 0ustar00// External dependencies.
import React from 'react';

// Internal dependencies.
import ETBuilderControlCodeMirror from '../../controls/codemirror/codemirror.jsx';
import '../../node_modules/codemirror/lib/codemirror.css';
import '../../node_modules/codemirror/addon/hint/show-hint.css';
import '../../node_modules/codemirror/addon/search/matchesonscrollbar.css';
import '../../node_modules/codemirror/addon/dialog/dialog.css';
import '../../node_modules/codemirror/addon/display/fullscreen.css';
import '../../node_modules/codemirror-colorpicker/addon/colorpicker/colorpicker.css';
import '../../node_modules/codemirror-colorpicker/dist/codemirror-colorpicker.css';
import 'codemirror-colorpicker';


export default {
  title: 'Controls/Codemirror',
  component: ETBuilderControlCodeMirror,
  render: (args) => {
    return (
      <div style={{ width:'80vw' }}>
        <ETBuilderControlCodeMirror
          {...args}
        />
      </div>
    );
  },
  argTypes: {
    _onChange: { action: 'changed', table: { disable: true } },
    search: { table: { disable: true } },
    value: { table: { disable: true } },
    mode: {
      options: ['html', 'css'],
      control: { type: 'select' },
    },
  },
};

export const Default = {
  args: {
    className: 'code-snippet',
    inline: true,
    lint: true,
    search: '',
    value: '',
    name: 'defaultCodeMirror',
    mode: 'css',
  },
};

export const HTMLMode = {
  args: {
    className: 'code-snippet',
    inline: true,
    lint: true,
    search: '',
    value: '',
    name: 'htmlCodeMirror',
    mode: 'html',
  },
};
controls/select-menu.stories.js000064400000006007152335526200012663 0ustar00// External dependencies.
import React from 'react';

// Internal dependencies.
import ETBuilderControlSelectMenu from '@common-ui/controls/select-menu/select-menu';


export default {
  title: 'Controls/Select Menu',
  component: ETBuilderControlSelectMenu,
  argTypes: {
    onSelect: {
      action: 'selected',
      table: {
        disable: true,
      },
    },
  },
  args: {
    target: document.body,
  },
};

export const Default = {
  args: {
    options: {
      option1: 'Option 1',
      option2: 'Option 2',
      option3: 'Option 3',
    },
    button: 'Select an option',
  },
};

export const WithSearchField = {
  args: {
    ...Default.args,
    menuStyle: {
      minWidth: '260px',
    },
    showSearchField: true,
  },
};

export const WithSubmenu = {
  args: {
    options: {
      option1: {
        name: 'Option 1',
        items: {
          subOption1: 'Sub Option 1',
          subOption2: 'Sub Option 2',
        },
      },
      option2: 'Option 2',
      option3: 'Option 3',
    },
    button: 'Select an option',
  },
};

export const ScrollableParentMenu = {
  args: {
    options: {
      option1: {
        name: 'Option 1',
        items: {
          subOption1: 'Sub Option 1',
          subOption2: 'Sub Option 2',
        },
      },
      option2: 'Option 2',
      option3: 'Option 3',
    },
    button: 'Select an option',
    scrollableParentMenu: true,
  },
};

const printMenuButton = () => {
  return (
    <div className='et-fb-settings-custom-select-wrapper-outer et-fb-settings-context-select-wrapper-outer'>
      <div
        id='et-fb-context'
        className='et-fb-settings-custom-select-wrapper et-fb-settings-option-select-closed'
      >
        <ul
          className='et-fb-settings-option-select et-fb-settings-option-select-advanced et-fb-main-setting'
          style={{ maxHeight: 'none' }}
        >
          <li
            className='select-option-item et-fb-selected-item select-option-item-creative'
            data-value='creative'
          >
            <span className='select-option-item__name'>Select Menu</span>
            <span className='et-fb-select-marker'>
              <div
                className='et-common-icon et-common-icon--menu-expand'
                style={{
                  fill: 'rgb(190, 201, 213)',
                  width: '28px',
                  minWidth: '28px',
                  height: '28px',
                  margin: '-6px',
                }}
              >
                <svg
                  viewBox='0 0 28 28'
                  preserveAspectRatio='xMidYMid meet'
                  shapeRendering='geometricPrecision'
                >
                  <g fillRule='evenodd'>
                    <path d='M14 20l-3-5h6zM14 8l3 5h-6z' fillRule='evenodd'></path>
                  </g>
                </svg>
              </div>
            </span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export const WithOriginalButton = {
  args: {
    ...Default.args,
    useOriginalButton: true,
    button: printMenuButton(),
  },
};
controls/ripple/ripple.stories.js000064400000000264152335526200013227 0ustar00// Internal dependencies.
import Ripple from '../../../controls/ripple/ripple';


export default {
  title: 'Controls/Ripple',
  component: Ripple,
};

export const Default = {
};
controls/tags.stories.js000064400000003462152335526200011402 0ustar00// External dependencies.
import React from 'react';
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/preview-api';

// Internal dependencies.
import CommonTags from '../../controls/tags/tags';


// Initial data for tags
const initialAllTags = {
  1: 'React',
  2: 'JavaScript',
  3: 'CSS',
  4: 'HTML',
  5: 'PHP',
  6: 'WordPress',
};

const initialSelectedTags = [1, 2];

export default {
  title: 'Controls/CommonTags',
  component: CommonTags,
  render : (args) => {
    const [{ selectedTags, allTags }, updateArgs] = useArgs();
    const handleTagsChange = (tag, updateType, name) => {
      if ('add' === updateType) {
        const tagId = tag.id;
        if (tagId) {
          updateArgs({ selectedTags: [...selectedTags, tagId] });
        }
        if (!Object.values(allTags).includes(tag.text)) {
          allTags[tagId] = tag.text;
          updateArgs({ allTags });
        }
      } else if ('remove' === updateType) {
        selectedTags.splice(tag,1);
        updateArgs({ selectedTags: [...selectedTags] });
      }
      action('changed')(tag, updateType, name);
    };

    return (
      <CommonTags
        {...args}
        allTags={allTags}
        onTagsChange={handleTagsChange}
        selectedTags={selectedTags}
      />
    );
  },
  argTypes: {
    allTags: {
      table: {
        disable: true,
      },
    },
    selectedTags: {
      table: {
        disable: true,
      },
    },
    onTagsChange: {
      table: {
        disable: true,
      },
    },
    delimiters: {
      table: {
        disable: true,
      },
    },
  },
};

export const Default = {
  args: {
    autofocus: false,
    selectedTags: initialSelectedTags,
    allTags: initialAllTags,
  },
};

export const WithAutofocus = {
  args: {
    ...Default.args,
    autofocus: true,
  }
};

controls/select-advanced.stories.js000064400000007346152335526200013473 0ustar00// External dependencies.
import React from 'react';
import { useArgs } from '@storybook/preview-api';
import { action } from '@storybook/addon-actions';

// Internal dependencies.
import ETBuilderControlSelectAdvanced from '../../controls/select-advanced/select-advanced';

// Define the default metadata for the story
export default {
  title: 'Controls/Select Advanced',
  component: ETBuilderControlSelectAdvanced,
  render: args => {
    const [, updateArgs] = useArgs();

    const handleOnChange = (attrName, selectedValue) => {
      action('changed')(attrName, selectedValue);
      updateArgs({ value: selectedValue });
    }

    return (
      <div style={{ width: '300px' }}>
        <ETBuilderControlSelectAdvanced
          {...args}
          _onChange={handleOnChange}
        />
      </div>
    );
  },
  argTypes: {
    options: {
      table: {
        disable: true,
      }
    },
    onOpen: {
      table: {
        disable: true,
      }
    },
    onClose: {
      table: {
        disable: true,
      }
    },
    labelFilter: {
      table: {
        disable: true,
      }
    },
    onChange: {
      action: 'changed',
      table: {
        disable: true,
      },
    },
    beforeList: {
      table: {
        disable: true,
      }
    },
    afterList: {
      table: {
        disable: true,
      }
    },
    getSvgContent: {
      table: {
        disable: true,
      }
    },
    value: { control: 'text' },
  },
};

export const Default = {
  args: {
    label: 'Select Advanced',
    options: ['Apple', 'Banana', 'Orange'],
    name: 'default',
    value: '',
  },
};

export const OptionsObject = {
  args: {
    ...Default.args,
    label: 'Object Options',
    options:  {
      Apple: 'Apple',
      Banana: 'Banana',
      Orange: 'Orange',
    },
  },
};

export const OptionsWithSubOptions = {
  args: {
    ...Default.args,
    label: 'Sub Options',
    options:  {
      Vegetable: {
        Tomato: 'Tomato',
        Carrot: 'Carrot',
      },
      Fruits: {
        Apple: 'Apple',
        Banana: 'Banana',
      },
    },
  },
};

export const FirstNotSelected = {
  args: {
    ...Default.args,
    selectFirst: false,
    emptyLabel: 'Please select an option...',
    value: undefined
  }
}


export const Searchable = {
  args: {
    ...Default.args,
    searchable: true,
  }
}

export const ActiveOnLoad = {
  args: {
    ...Default.args,
    activeOnLoad: true,
  },
  parameters: {
    layout: 'fullscreen',
  },
}

export const BeforeAndAfterList = {
  args: {
    ...Default.args,
    beforeList: () => 'Before Fruits List',
    afterList: () => 'After Fruits List',
  }
}

export const AdditionalContentFirst = {
  args: {
    ...Default.args,
    additionalContentFirst: true,
    getSvgContent: () => {
      return (
        <svg height="18.516px" id="Capa_1" version="1.1" viewBox="0 0 80 88.516" width="30px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M63.254,36.822C51.852,12.287,45.926,2.97,27.295,3.355c-6.635,0.137-5.041-4.805-10.1-2.93   c-5.055,1.876-0.717,4.62-5.889,8.863C-3.207,21.2-1.869,32.221,4.861,58.487c2.838,11.062-6.836,11.605-3.008,22.33   c2.793,7.819,23.393,11.093,45.127,3.028c21.734-8.063,35.453-24.07,32.66-31.889C75.811,41.231,68.059,47.152,63.254,36.822z    M44.621,77.238c-19.41,7.202-35.363,2.965-36.037,1.083C7.422,75.073,14.85,64.24,37.041,56.005   c22.193-8.234,34.576-5.181,35.871-1.553C73.678,56.594,64.033,70.036,44.621,77.238z M38.383,59.764   c-10.148,3.766-17.201,8.073-21.764,11.951c3.211,2.918,9.23,3.63,15.23,1.404c7.637-2.833,12.326-9.337,10.471-14.526   c-0.021-0.063-0.055-0.119-0.078-0.181C40.99,58.826,39.705,59.274,38.383,59.764z"/></g><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
      );
    }
  }
}

branded-modal/modal.stories.js000064400000001231152335526200012356 0ustar00// External dependencies.
import React from 'react';

// Internal dependencies.
import Modal from '@common-ui/branded-modal/modal';


export default {
  title: 'Branded Modal/Modal',
  component: Modal,
  argTypes: {
    animation: {
      control: 'boolean',
    },
  },
  args: {
    children: (
      <div style={{ width: '450px', height: '350px', padding: '20px' }}>
        <h1>Modal Content</h1>
        <p>This is the default modal content. It can be replaced with any custom content.</p>
      </div>
    ),
  },
};

export const NoAnimation = {
  args: {
    animation: false,
  },
};

export const WithAnimation = {
  args: {
    animation: true,
  },
};
branded-modal/fullmodal.stories.js000064400000001770152335526200013251 0ustar00// External dependencies.
import React from 'react';

// Internal dependencies.
import CommonIcon from '@common-ui/common-icon/common-icon';
import Button from '@common-ui/controls/button/button';
import Header from '@common-ui/branded-modal/header';
import Modal from '@common-ui/branded-modal/modal';

export default {
  title: 'Branded Modal/Full Modal',
  component: Modal,
};

export const FullModal = (args) => (
  <Modal {...args}>
    <Header
      title='Default Header'
      showCloseButton={true}
      additionalButton={() => (
        <Button
          className='et-common-library__portability-button'
          onClick={() => {}}
        >
          <CommonIcon size='14' icon='portability' color='#fff' />
        </Button>
      )}
    />
    <div style={{ width: '450px', height: '350px', padding: '20px' }}>
      <h1>Modal Content</h1>
      <p>This is the default modal content. It can be replaced with any custom content.</p>
    </div>
  </Modal>
);

FullModal.args = {
  animation: true,
};
branded-modal/header.stories.js000064400000002530152335526200012515 0ustar00// External dependencies.
import React from 'react';

// Internal dependencies.
import CommonIcon from '@common-ui/common-icon/common-icon';
import Button from '@common-ui/controls/button/button';
import Header from '@common-ui/branded-modal/header';


export default {
  title: 'Branded Modal/Header',
  component: Header,
  argTypes: {
    onClose: {
      action: 'closed',
      table: {
        disable: true,
      },
    },
    additionalButton: {
      action: 'additionalButtonClicked',
      table: {
        disable: true,
      },
    },
  },
  args: {
    style: {
      width: '450px',
    },
  },
};

export const Default = {
  args: {
    title: 'Default Header',
    showCloseButton: true,
  },
};

export const WithoutCloseButton = {
  args: {
    title: 'Header without close button',
    showCloseButton: false,
  },
};

export const WithAdditionalButton = {
  args: {
    title: 'Header with additional button',
    showCloseButton: true,
    additionalButton: () => (
      <Button
        className='et-common-library__portability-button'
        onClick={() => {}}
      >
        <CommonIcon size='14' icon='portability' color='#fff' />
      </Button>
    ),
  },
};

export const WithCustomClassName = {
  args: {
    title: 'Header with custom class name',
    showCloseButton: true,
    className: 'storybook-header-custom-class',
  },
};