@progressiveui/react 2.0.3 → 2.0.4

package/src/components/ModalWrapper/ModalWrapper-old.js

@@ -1,141 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import Modal from '../Modal';
-import Button from '../Button';
-import { ButtonTypes } from '../../prop-types/types';
-import useSettings from '../../hooks/useSettings';
-
-/** Modal Wrapper component to encapsulate your Modal within a button. */
-
-const ModalWrapper = ({
-  children,
-  customButton,
-  id,
-  onKeyDown,
-  buttonTriggerText,
-  buttonTriggerClassName,
-  triggerButtonKind,
-  disabled,
-  handleSubmit = () => {},
-  shouldCloseAfterSubmit = true,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-  const triggerButton = React.createRef();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleOpen = () => {
-    setIsOpen(true);
-  };
-
-  const handleClose = () => {
-    setIsOpen(false, () => {
-      triggerButton.current && triggerButton.current.focus();
-      if (handleClose) {
-        handleClose();
-      }
-    });
-  };
-
-  const handleOnRequestSubmit = () => {
-    if (handleSubmit) {
-      handleSubmit({ handleClose });
-      if (shouldCloseAfterSubmit) {
-        handleClose();
-      }
-    }
-  };
-
-  const props = {
-    ...other,
-    open: isOpen,
-    onRequestClose: handleClose,
-    onRequestSubmit: handleOnRequestSubmit,
-  };
-
-  const customButtonEl = customButton
-    ? React.cloneElement(customButton, {
-        disabled: disabled,
-        onClick: handleOpen,
-        inputref: triggerButton,
-      })
-    : undefined;
-
-  return (
-    <div
-      role="presentation"
-      className={`${prefix}--modal__wrapper`}
-      onKeyDown={(evt) => {
-        if (evt.which === 27) {
-          handleClose();
-          onKeyDown(evt);
-        }
-      }}>
-      {customButton ? (
-        <React.Fragment>{customButtonEl}</React.Fragment>
-      ) : (
-        <Button
-          id={id}
-          className={buttonTriggerClassName}
-          disabled={disabled}
-          kind={triggerButtonKind}
-          onClick={handleOpen}
-          inputref={triggerButton}>
-          {buttonTriggerText}
-        </Button>
-      )}
-      <Modal {...props}>{children}</Modal>
-    </div>
-  );
-};
-
-ModalWrapper.propTypes = {
-  status: PropTypes.string,
-  /**
-   * Specify a function to open the Modal.
-   */
-  handleOpen: PropTypes.func,
-  children: PropTypes.node,
-  /**
-   * Specify a custom trigger `Button`.
-   */
-  customButton: PropTypes.element,
-  id: PropTypes.string,
-  /**
-   * Specify the text for the trigger `Button`.
-   */
-  buttonTriggerText: PropTypes.node,
-  /**
-   * Specify a `class` for the trigger `Button`.
-   */
-  buttonTriggerClassName: PropTypes.string,
-  modalLabel: PropTypes.string,
-  modalHeading: PropTypes.string,
-  modalText: PropTypes.string,
-  passiveModal: PropTypes.bool,
-  withHeader: PropTypes.bool,
-  modalBeforeContent: PropTypes.bool,
-  primaryButtonText: PropTypes.string,
-  secondaryButtonText: PropTypes.string,
-  /**
-   * Specify a `function` which is triggered when submitting the `Modal`.
-   */
-  handleSubmit: PropTypes.func,
-  handleClose: PropTypes.func,
-  disabled: PropTypes.bool,
-  triggerButtonKind: ButtonTypes.buttonKind,
-  /**
-   * Specify if `Modal` should be closed after submitting.
-   */
-  shouldCloseAfterSubmit: PropTypes.bool,
-};
-
-ModalWrapper.defaultProps = {
-  primaryButtonText: 'Save',
-  secondaryButtonText: 'Cancel',
-  triggerButtonKind: 'primary',
-  disabled: false,
-  onKeyDown: () => {},
-};
-
-export default ModalWrapper;

package/src/components/ModalWrapper/ModalWrapper-test.js

@@ -1,108 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import React from 'react';
-import ModalWrapper from '../ModalWrapper';
-import { cleanup, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-
-
-describe('ModalWrapper', () => {
-  let mockProps = {};
-
-  beforeEach(() => {
-    mockProps = {
-      id: 'modal',
-      "data-testid": 'modal',
-      buttonTriggerText: 'Open Modal',
-      buttonTriggerClassName: 'btn-trigger',
-      modalHeading: 'Transactional Modal',
-      modalLabel: 'Test Modal Label',
-      primaryButtonText: 'Save',
-      secondaryButtonText: 'Cancel',
-      handleSubmit: jest.fn(() => true),
-      shouldCloseAfterSubmit: true,
-    };
-  });
-
-  // it('should render', () => {
-  //   const wrapper = mount(
-  //     <ModalWrapper {...mockProps}>
-  //       <p className="wfp--modal-content__text">Text</p>
-  //     </ModalWrapper>
-  //   );
-  //   expect(wrapper).toMatchSnapshot();
-  // });
-  afterEach(cleanup);
-  it('should render modal button', () => {
-    
-      render(<ModalWrapper {...mockProps}>
-        <p className="wfp--modal-content__text">Modal content</p>
-      </ModalWrapper>);
-
-      expect(screen.getByText('Open Modal')).toBeInTheDocument();
-
-      expect(screen.getByTestId('modal')).not.toHaveClass('is-visible');
-  })
-
-  it('should open modal on button click', () => {
-    render(<ModalWrapper {...mockProps}>
-      <p className="wfp--modal-content__text">Modal content</p>
-    </ModalWrapper>);
-
-    userEvent.click(screen.getByText('Open Modal'));
-    expect(screen.getByTestId('modal')).toHaveClass('is-visible');
-    
-  })
-
-
-  it('should close after a cancel button click', () => {
-    render(
-      <ModalWrapper {...mockProps}>
-        <p className="wfp--modal-content__text">Text</p>
-      </ModalWrapper>
-    );
-    userEvent.click(screen.getByText('Open Modal'));
-    userEvent.click(screen.getByText('Cancel'));
-    expect(screen.getByTestId('modal')).not.toHaveClass('is-visible');
-    
-  });
-
-  it('should close after a save button click with action', () => {
-    render(
-      <ModalWrapper {...mockProps}>
-        <p className="wfp--modal-content__text">Text</p>
-      </ModalWrapper>
-    );
-    userEvent.click(screen.getByText('Open Modal'));
-    userEvent.click(screen.getByText('Save'));
-    expect(screen.getByTestId('modal')).not.toHaveClass('is-visible');
-    
-  });
-
-  it('should not close after a save button click with no action', () => {
-    render(
-      <ModalWrapper {...mockProps} handleSubmit={() => false}>
-        <p className="wfp--modal-content__text">Text</p>
-      </ModalWrapper>
-    );
-    userEvent.click(screen.getByText('Open Modal'));
-    userEvent.click(screen.getByText('Save'));
-    expect(screen.getByTestId('modal')).toHaveClass('is-visible');
-    
-  });
-
-  
-
-  // it('should return focus to the trigger button after closing', () => {
-  //   render(
-  //     <ModalWrapper {...mockProps}>
-  //       <p className="wfp--modal-content__text">Text</p>
-  //     </ModalWrapper>
-  //   );
-  //   userEvent.click(screen.getByText('Open Modal'));
-  //   userEvent.click(screen.getByText('Cancel'));
-  //   expect(screen.getByTestId('modal')).not.toHaveClass('is-visible');
-  //   expect(screen.getByText('Open Modal')).toHaveFocus();
-  // });
-
-});

package/src/components/ModalWrapper/ModalWrapper.stories.tsx

@@ -1,109 +0,0 @@
-import React from "react";
-import ModalWrapper from ".";
-
-export default {
-  title: "Components/Content Related/ModalWrapper",
-  component: ModalWrapper,
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-  },
-};
-
-export const ModalWrapperDefault: Story = {
-  render: (args) => <ModalWrapper {...args} />,
-  args: {
-    buttonTriggerText: "Open modal",
-    children:
-      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.",
-    modalLabel: "Modal label",
-    modalHeading: "Modal heading",
-    modalText: "Modal text",
-  },
-};
-
-export const PassiveModal = (args) => (
-  <ModalWrapper {...args}>This section is the body</ModalWrapper>
-);
-
-PassiveModal.args = {
-  buttonTriggerText: "Open modal",
-  passiveModal: true,
-};
-
-const desc = `
- \`PassiveModal\` presents information the user needs to be aware of concerning their current workflow. Contains no actions for the user to take..
-`;
-
-PassiveModal.story = {
-  parameters: {
-    docs: {
-      storyDescription: desc,
-    },
-  },
-};
-
-export const ModalWithHeading = (args) => (
-  <ModalWrapper {...args}>This section is the body</ModalWrapper>
-);
-
-ModalWithHeading.args = {
-  buttonTriggerText: "Open modal",
-  modalHeading: "Header Text",
-  withHeader: true,
-};
-
-const description = `
- \`withHeader\` property when applied adds header text to modal.
-`;
-
-ModalWithHeading.story = {
-  parameters: {
-    docs: {
-      storyDescription: description,
-    },
-  },
-};
-
-export const ModalWithLabel = (args) => (
-  <ModalWrapper {...args}>This section is the body</ModalWrapper>
-);
-
-ModalWithLabel.args = {
-  buttonTriggerText: "Open modal",
-  modalLabel: "modal Label",
-  withHeader: true,
-};
-
-const describe = `
- \`withLabel\` property when applied adds a Label text to modal.
-`;
-
-ModalWithLabel.story = {
-  parameters: {
-    docs: {
-      storyDescription: describe,
-    },
-  },
-};
-
-export const Disabled = (args) => (
-  <ModalWrapper {...args}>This section is the body</ModalWrapper>
-);
-
-Disabled.args = {
-  buttonTriggerText: "Open modal",
-  disabled: true,
-};
-
-const disablemsg = `
- \`withLabel\` property set the modal trigger button to be disabled/non-interactive.
-`;
-
-Disabled.story = {
-  parameters: {
-    docs: {
-      storyDescription: disablemsg,
-    },
-  },
-};

package/src/components/ModalWrapper/ModalWrapper.tsx

@@ -1,149 +0,0 @@
-import * as React from "react";
-import Modal from "../Modal";
-import Button from "../Button";
-import useSettings from "../../hooks/useSettings";
-import { ButtonKind } from "../../utils";
-import { ModalProps } from "../Modal/Modal";
-
-/** Modal Wrapper component to encapsulate your Modal within a button. */
-interface ModalWrapperProps
-  extends ModalProps,
-    React.ComponentPropsWithRef<"div"> {
-  /**
-   * ID of the trigger button.
-   */
-  id?: string;
-  /*status?: string;
-   */
-  disabled?: boolean;
-  /**
-   * Specify a custom trigger `Button`.
-   */
-  customButton?: React.ReactElement;
-  /**
-   * Specify the text for the trigger `Button`.
-   */
-  buttonTriggerText?: React.ReactNode;
-  /**
-   * Specify a `class` for the trigger `Button`.
-   */
-  buttonTriggerClassName?: string;
-  /**
-   * @param handle - function to open the modal
-   */
-  handleOpen?: () => void;
-  /**
-   * @param handle - function to submit content in the modal
-   */
-  handleSubmit?: (handle: () => void) => void;
-  /**
-   * @param handle - function to close the modal
-   */
-  handleClose?: () => void;
-  /**
-   * Specify the kind of trigger `Button`.
-   */
-  triggerButtonKind?: ButtonKind;
-  /**
-   * Specify whether the Modal should be closed after submit
-   */
-  shouldCloseAfterSubmit?: boolean;
-  /**
-   * Specify whether the primary button should be disabled or not
-   */
-  primaryButtonDisabled?: boolean;
-  /**
-   * A function that is called when the user presses the `Esc` key to close the modal.
-   */
-  onKeyDown?: (evt: React.KeyboardEvent<HTMLDivElement>) => void;
-}
-
-const ModalWrapper: React.FC<ModalWrapperProps> = ({
-  children,
-  customButton,
-  id,
-  onKeyDown,
-  buttonTriggerText,
-  buttonTriggerClassName,
-  triggerButtonKind,
-  disabled,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  handleSubmit = () => {},
-  shouldCloseAfterSubmit = true,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-  const triggerButton = React.createRef<HTMLButtonElement>();
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const handleOpen = () => {
-    setIsOpen(true);
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-    if (!isOpen) {
-      triggerButton.current && triggerButton.current.focus();
-      if (handleClose) {
-        handleClose();
-      }
-    }
-  };
-
-  const handleOnRequestSubmit = () => {
-    if (handleSubmit) {
-      handleSubmit(handleClose);
-      if (shouldCloseAfterSubmit) {
-        handleClose();
-      }
-    }
-  };
-
-  const props = {
-    ...other,
-    open: isOpen,
-    onRequestClose: handleClose,
-    onRequestSubmit: handleOnRequestSubmit,
-  };
-
-  const customButtonEl = customButton
-    ? React.cloneElement(customButton, {
-        disabled: disabled,
-        onClick: handleOpen,
-        inputref: triggerButton,
-      })
-    : undefined;
-
-  return (
-    <div
-      role="presentation"
-      className={`${prefix}--modal__wrapper`}
-      onKeyDown={(evt) => {
-        if (evt.which === 27) {
-          handleClose();
-          onKeyDown && onKeyDown(evt);
-        }
-      }}
-    >
-      {customButton ? (
-        <React.Fragment>{customButtonEl}</React.Fragment>
-      ) : (
-        <Button
-          id={id}
-          className={buttonTriggerClassName}
-          disabled={disabled}
-          kind={triggerButtonKind}
-          onClick={handleOpen}
-          ref={triggerButton}
-        >
-          {buttonTriggerText}
-        </Button>
-      )}
-      <Modal {...props}>{children}</Modal>
-    </div>
-  );
-};
-
-ModalWrapper.displayName = "ModalWrapper";
-
-export default ModalWrapper;

package/src/components/ModalWrapper/README.mdx

@@ -1,16 +0,0 @@
-ModalWrapper combines a `Button` with a `Modal`. See `Modal` component for all `props`.
-
-```js
-import { ModalWrapper } from "@progressiveui/react";
-```
-
-```html
- <ModalWrapper
-  buttonTriggerText="Open Modal"
-  handleSubmit={() => {
-    return true;
-  }}
->
-  Modal Content
-</ModalWrapper>
-```

package/src/components/ModalWrapper/index.ts

@@ -1 +0,0 @@
-export { default } from './ModalWrapper';

package/src/components/Module/Module-old.js

@@ -1,74 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import useSettings from '../../hooks/useSettings';
-
-/** A Module is identifiable as a single, contained unit. */
-
-const Module = ({
-  dark,
-  light,
-  // centered,
-  children,
-  className,
-  margin,
-  fullHeight,
-  noMargin,
-  withHover,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-  const wrapperClasses = classNames(
-    {
-      [`${prefix}--module--dark`]: dark,
-      [`${prefix}--module--no-margin`]: noMargin,
-      [`${prefix}--module--full-height`]: fullHeight,
-      [`${prefix}--module--margin-x`]: margin === 'xs',
-      [`${prefix}--module--margin-md`]: margin === 'md',
-      [`${prefix}--module--margin-lg`]: margin === 'lg',
-      [`${prefix}--module--light`]: light,
-      [`${prefix}--module--with-hover`]: withHover,
-    },
-    className,
-    [`${prefix}--module`]
-  );
-
-  return (
-    <div className={wrapperClasses} {...other}>
-      <div className={`${prefix}--module__inner`}>{children}</div>
-    </div>
-  );
-};
-
-Module.propTypes = {
-  /**
-   * * Specify the content of the `Module`, usually a `ModuleHeader` `ModuleBody` and `ModuleFooter`component.
-   */
-  children: PropTypes.node,
-  /**
-   * The CSS class name for the slider.
-   */
-  className: PropTypes.string,
-  /**
-   * Disables the default margin
-   */
-  noMargin: PropTypes.bool,
-  /**
-   * Use 100% height of parent container
-   */
-  fullHeight: PropTypes.bool,
-  /**
-   * Light appearance (for white backgrounds)
-   */
-  light: PropTypes.bool,
-  /**
-   * Dark appearance
-   */
-  dark: PropTypes.bool,
-  /**
-   * Additional hover styling
-   */
-  withHover: PropTypes.bool,
-};
-
-export default Module;

package/src/components/Module/Module-test.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Module, ModuleBody } from '../Module';
-import { shallow } from 'enzyme';
-
-describe('Module', () => {
-  describe('Renders as expected', () => {
-    const testModule = shallow(
-      <Module className="extra-class">
-        <ModuleBody>Body</ModuleBody>
-      </Module>
-    );
-
-    it('renders a Module', () => {
-      expect(testModule.length).toEqual(1);
-    });
-
-    it('should render the appropriate classes', () => {
-      expect(testModule.hasClass('extra-class')).toEqual(true);
-    });
-
-    it('should render children as expected', () => {
-      expect(testModule.find(ModuleBody).length).toEqual(1);
-    });
-  });
-
-  describe('ModuleBody', () => {
-    describe('Renders as expected', () => {
-      const moduleBody = shallow(
-        <ModuleBody className="extra-class" centered>
-          Body
-        </ModuleBody>
-      );
-
-      it('renders a ModuleBody', () => {
-        expect(moduleBody.length).toEqual(1);
-      });
-
-      it('has the expected class', () => {
-        expect(moduleBody.hasClass('wfp--module__content')).toEqual(true);
-        expect(moduleBody.hasClass('extra-class')).toEqual(true);
-      });
-
-      it('has the centered class when centered prop is true', () => {
-        expect(moduleBody.hasClass('wfp--module__content--centered')).toEqual(
-          true
-        );
-      });
-
-      it('should render children as expected', () => {
-        expect(moduleBody.text()).toEqual('Body');
-      });
-    });
-  });
-});

package/src/components/Module/Module.hbs

@@ -1,3 +0,0 @@
-<div><div style="position: relative; z-index: 0;"><div class="some-class wfp--module"><div class="wfp--module__inner"><div class="wfp--module__header"><h1 class="wfp--module__title">Module Example</h1></div><div class="wfp--module__content"><p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p></div><div class="wfp--module__footer">Module Footer Example</div></div></div></div><button type="button" style="font-family: sans-serif; font-size: 12px; display: block; position: fixed; border: medium none; background: rgb(34, 136, 204) none repeat scroll 0% 0%; color: rgb(255, 255, 255); padding: 5px 15px; cursor: pointer; top: 0px; right: 0px; border-radius: 0px 0px 0px 5px;">Show Info</button><div style="position: fixed; background: white none repeat scroll 0% 0%; top: 0px; bottom: 0px; left: 0px; right: 0px; padding: 0px 40px; overflow: auto; z-index: 99999; display: none;"><button type="button" style="font-family: sans-serif; font-size: 12px; display: block; position: fixed; border: medium none; background: rgb(34, 136, 204) none repeat scroll 0% 0%; color: rgb(255, 255, 255); padding: 5px 15px; cursor: pointer; top: 0px; right: 0px; border-radius: 0px 0px 0px 5px;">×</button><div><div style="font-family: &quot;Open Sans&quot;, sans-serif; color: rgb(68, 68, 68); font-weight: 400; line-height: 1.45; font-size: 15px; border: 1px solid rgb(238, 238, 238); padding: 20px 40px 40px; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 3px; background-color: rgb(255, 255, 255); margin-top: 20px; margin-bottom: 20px;"><div style="border-bottom: 1px solid rgb(238, 238, 238); padding-top: 10px; margin-bottom: 10px;"><h1 style="margin: 0px; padding: 0px; font-size: 35px; font-family: &quot;Open Sans&quot;, sans-serif; font-weight: 700;">Module</h1><h2 style="margin: 0px 0px 10px; padding: 0px; font-weight: 600; font-size: 16px; color: rgb(136, 140, 143); font-family: &quot;Open Sans&quot;, sans-serif;">Single</h2></div><div style="margin-bottom: 0px;"><div style="font-family: -apple-system, &quot;.SFNSText-Regular&quot;, &quot;San Francisco&quot;, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, &quot;Arial&quot;, sans-serif; color: rgb(68, 68, 68); font-size: 15px;">Modules are used to organize content in a structural manner.</div><div style="font-family: -apple-system, &quot;.SFNSText-Regular&quot;, &quot;San Francisco&quot;, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, &quot;Arial&quot;, sans-serif; color: rgb(68, 68, 68); font-size: 15px;">Modules are separated into different components. Module components can be
-‘single’ or ‘double’ with the default as ‘double’.</div><div style="font-family: -apple-system, &quot;.SFNSText-Regular&quot;, &quot;San Francisco&quot;, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, &quot;Arial&quot;, sans-serif; color: rgb(68, 68, 68); font-size: 15px;">ModuleHeader and ModuleBody components hold the content of the
-Module</div></div><div><h1 style="margin: 20px 0px 0px; padding: 0px 0px 5px; font-size: 25px; border-bottom: 1px solid rgb(238, 238, 238);">Story Source</h1><pre class="css-glamorous-pre--10jsrye"><div><div><div style="padding-left: 18px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;Module</span><span><span> <span>className</span><span>=<span>"<span style="color: rgb(34, 34, 170);">some-class</span>"</span></span></span></span><span style="color: rgb(119, 119, 119);">&gt;</span></div><div><div style="padding-left: 33px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;ModuleHeader</span><span></span><span style="color: rgb(119, 119, 119);">&gt;</span></div><div style="padding-left: 48px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">Module Example</span></div><div style="padding-left: 33px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;/ModuleHeader&gt;</span></div></div><div><div style="padding-left: 33px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;ModuleBody</span><span></span><span style="color: rgb(119, 119, 119);">&gt;</span></div><div><div style="padding-left: 48px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;p</span><span></span><span style="color: rgb(119, 119, 119);">&gt;</span></div><div style="padding-left: 63px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></div><div style="padding-left: 48px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;/p&gt;</span></div></div><div><div style="padding-left: 48px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;p</span><span></span><span style="color: rgb(119, 119, 119);">&gt;</span></div><div style="padding-left: 63px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span></div><div style="padding-left: 48px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;/p&gt;</span></div></div><div style="padding-left: 33px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;/ModuleBody&gt;</span></div></div><div><div style="padding-left: 33px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;ModuleFooter</span><span></span><span style="color: rgb(119, 119, 119);">&gt;</span></div><div style="padding-left: 48px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">Module Footer Example</span></div><div style="padding-left: 33px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;/ModuleFooter&gt;</span></div></div><div style="padding-left: 18px; padding-right: 3px;"><span style="color: rgb(119, 119, 119);">&lt;/Module&gt;</span></div></div></div><button class="css-glamorous-button--jq496q"><div class="css-glamorous-div--ngxet1"><div style="margin-bottom: 6px;">Copied!</div><div>Copy</div></div></button></pre></div><div><h1 style="margin: 20px 0px 0px; padding: 0px 0px 5px; font-size: 25px; border-bottom: 1px solid rgb(238, 238, 238);">Prop Types</h1><div><h2 style="margin: 20px 0px 0px;">"Module" Component</h2><table class="css-glamorous-table--3qhq7f"><thead><tr><th class="css-glamorous-th--1gvy3it">property</th><th class="css-glamorous-th--1gvy3it">propType</th><th class="css-glamorous-th--1gvy3it">required</th><th class="css-glamorous-th--1gvy3it">default</th><th class="css-glamorous-th--1gvy3it">description</th></tr></thead><tbody><tr><td class="css-glamorous-td--58bwg8">children</td><td class="css-glamorous-td--58bwg8"><span></span></td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361"></td></tr><tr><td class="css-glamorous-td--58bwg8">className</td><td class="css-glamorous-td--58bwg8"><span></span></td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361"></td></tr><tr><td class="css-glamorous-td--58bwg8">size</td><td class="css-glamorous-td--58bwg8"><span></span></td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361"><span style="color: rgb(34, 34, 170);">double</span></td><td class="css-glamorous-td--42r361"></td></tr></tbody></table></div><div><h2 style="margin: 20px 0px 0px;">"ModuleBody" Component</h2><table class="css-glamorous-table--3qhq7f"><thead><tr><th class="css-glamorous-th--1gvy3it">property</th><th class="css-glamorous-th--1gvy3it">propType</th><th class="css-glamorous-th--1gvy3it">required</th><th class="css-glamorous-th--1gvy3it">default</th><th class="css-glamorous-th--1gvy3it">description</th></tr></thead><tbody><tr><td class="css-glamorous-td--58bwg8">children</td><td class="css-glamorous-td--58bwg8"><span></span></td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361"></td></tr><tr><td class="css-glamorous-td--58bwg8">centered</td><td class="css-glamorous-td--58bwg8"><span></span></td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361"><span style="color: rgb(170, 17, 17);">false</span></td><td class="css-glamorous-td--42r361"></td></tr><tr><td class="css-glamorous-td--58bwg8">className</td><td class="css-glamorous-td--58bwg8"><span></span></td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361"></td></tr></tbody></table></div><div><h2 style="margin: 20px 0px 0px;">"ModuleFooter" Component</h2><table class="css-glamorous-table--3qhq7f"><thead><tr><th class="css-glamorous-th--1gvy3it">property</th><th class="css-glamorous-th--1gvy3it">propType</th><th class="css-glamorous-th--1gvy3it">required</th><th class="css-glamorous-th--1gvy3it">default</th><th class="css-glamorous-th--1gvy3it">description</th></tr></thead><tbody><tr><td class="css-glamorous-td--58bwg8">centered</td><td class="css-glamorous-td--58bwg8"><span>unknown</span></td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361"><span style="color: rgb(170, 17, 17);">false</span></td><td class="css-glamorous-td--42r361"></td></tr></tbody></table></div><div><h2 style="margin: 20px 0px 0px;">"ModuleHeader" Component</h2><table class="css-glamorous-table--3qhq7f"><thead><tr><th class="css-glamorous-th--1gvy3it">property</th><th class="css-glamorous-th--1gvy3it">propType</th><th class="css-glamorous-th--1gvy3it">required</th><th class="css-glamorous-th--1gvy3it">default</th><th class="css-glamorous-th--1gvy3it">description</th></tr></thead><tbody><tr><td class="css-glamorous-td--58bwg8">children</td><td class="css-glamorous-td--58bwg8"><span></span></td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361"></td></tr><tr><td class="css-glamorous-td--58bwg8">className</td><td class="css-glamorous-td--58bwg8"><span></span></td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361">-</td><td class="css-glamorous-td--42r361"></td></tr></tbody></table></div></div></div></div></div></div>