@progressiveui/react 1.22.0

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

@@ -0,0 +1,141 @@
+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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,16 @@
+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

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

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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,3 @@
+<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>