HEX

File: /home/s/t/u/studionolh/www/wp-includes/Requests/Cookie/reusable-blocks/branded-modal.tar
modal.stories.js000064400000001231152336040230007660 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,
  },
};
fullmodal.stories.js000064400000001770152336040230010553 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,
};
header.stories.js000064400000002530152336040230010017 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',
  },
};