cratebind · iqra-javed · May 26, 2021 · May 27, 2021 · May 28, 2021 · May 28, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,12 +8,7 @@ module.exports = {
   ],
   rules: {
     'import/no-unresolved': [2, { ignore: ['minerva-ui', '@docusaurus', '@theme'] }],
-    "import/no-unused-modules": [
-      1,
-      {
-        "unusedExports": true,
-      }
-    ],
+    "import/no-unused-modules": 0,
     'react/display-name': 1,
     'react/react-in-jsx-scope': 0,
   },

diff --git a/docs/pages/components/Icon.mdx b/docs/pages/components/Icon.mdx
@@ -31,8 +31,8 @@ const customTheme = {
   icons: {
     // declare the key and component in your theme, then you can use the key as name in the <Icon /> component
     warning: Warning,
-  }
-}
+  },
+};
 
 const App = () => (
   <ThemeProvider>

diff --git a/docs/pages/components/Menu.mdx b/docs/pages/components/Menu.mdx
@@ -8,7 +8,9 @@ Built on top of the [Reach UI Menu Button](https://reacttraining.com/reach-ui/me
 
 When you need to trigger actions from a dropdown (such as when clicking in the menu of a desktop application).
 
-<Callout emoji="⚠️">Do _not_ use this if you need to store a value. Use a `<select />` component instead.
+<Callout emoji="⚠️">
+  Do _not_ use this if you need to store a value. Use a `<select />` component
+  instead.
 </Callout>
 
 ```js

diff --git a/docs/pages/components/Modal.mdx b/docs/pages/components/Modal.mdx
@@ -14,6 +14,8 @@ import {
 } from 'minerva-ui';
 ```
 
+## Basic Modal
+
 ```jsx live
 () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -22,14 +24,12 @@ import {
     <>
       <Button onClick={onOpen}>Open Modal</Button>
       <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
-        <ModalHeader onClose={onClose}>Hello World!</ModalHeader>
+        <ModalHeader onClose={onClose}>Modal Title</ModalHeader>
         <ModalBody>
-          Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
-          deserunt aute id consequat veniam incididunt duis in sint irure nisi.
-          Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor
-          esse quis. Sunt ad dolore quis aute consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
+          ante vitae eros suscipit pulvinar.
         </ModalBody>
-        <ModalFooter bg="gray.50">
+        <ModalFooter>
           <Flex
             px={6}
             py={3}
@@ -47,6 +47,118 @@ import {
 };
 ```
 
+## Modal with gray footer
+
+```jsx live
+() => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open Modal</Button>
+      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
+        <ModalHeader onClose={onClose}>Modal Title</ModalHeader>
+        <ModalBody>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
+          ante vitae eros suscipit pulvinar.
+        </ModalBody>
+        <ModalFooter bg="#F5F5F5">
+          <Flex
+            px={6}
+            py={3}
+            flexDirection={['column', 'row-reverse']}
+            radiusBottom="5px"
+          >
+            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
+              Submit
+            </Button>
+          </Flex>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+};
+```
+
+## Modal with centered content
+
+```jsx live
+() => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open Modal</Button>
+      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
+        <ModalHeader justifyContent="center" width="100%" onClose={onClose}>
+          Modal Title
+        </ModalHeader>
+        <ModalBody textAlign="center">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
+          ante vitae eros suscipit pulvinar.
+        </ModalBody>
+        <ModalFooter>
+          <Flex
+            px={6}
+            py={3}
+            flexDirection={['column', 'row']}
+            radiusBottom="5px"
+          >
+            <Button
+              onClick={onClose}
+              variant="primary"
+              width="100%"
+              flex={1}
+              mr="6px"
+            >
+              Submit
+            </Button>
+            <Button onClick={() => setOpen(false)} width="100%" flex={1}>
+              Cancel
+            </Button>
+          </Flex>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+};
+```
+
+## Modal with full width button
+
+```jsx live
+() => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open Modal</Button>
+      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
+        <ModalHeader justifyContent="center" width="100%" onClose={onClose}>
+          Modal Title
+        </ModalHeader>
+        <ModalBody textAlign="center">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
+          ante vitae eros suscipit pulvinar.
+        </ModalBody>
+        <ModalFooter>
+          <Flex
+            px={6}
+            py={3}
+            flexDirection={['column', 'row']}
+            radiusBottom="5px"
+          >
+            <Button onClick={onClose} variant="primary" width="100%">
+              Submit
+            </Button>
+          </Flex>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+};
+```
+
 ## Customize `ModalOverlay` or `ModalContent`
 
 ```js
@@ -77,12 +189,10 @@ import {
           maxWidth="80vw"
           overflow="hidden"
         >
-          <ModalHeader onClose={onClose}>Hello World!</ModalHeader>
+          <ModalHeader onClose={onClose}>Modal Title</ModalHeader>
           <ModalBody>
-            Sit nulla est ex deserunt exercitation anim occaecat. Nostrud
-            ullamco deserunt aute id consequat veniam incididunt duis in sint
-            irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit
-            officia tempor esse quis. Sunt ad dolore quis aute consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            id ante vitae eros suscipit pulvinar.
           </ModalBody>
           <ModalFooter bg="gray.50">
             <Flex

diff --git a/docs/pages/examples/Buttons.mdx b/docs/pages/examples/Buttons.mdx
@@ -23,7 +23,7 @@ render(
 <Stack horizontal>
   <Button>
     <Icon name="mail" mr={2} size="16px" /> Inbox
-    </Button>
+  </Button>
   <Button>
     Save <Icon name="save" ml={2} size="16px" />
   </Button>

diff --git a/docs/pages/examples/Forms.mdx b/docs/pages/examples/Forms.mdx
@@ -181,64 +181,66 @@ Recreated from [Tailwind CSS example](https://tailwindcss.com/components/forms)
   return (
     <Stack>
       {items.map(plan => (
-      <Button
-        flexDirection="row"
-        width="100%"
-        borderWidth={0}
-        borderBottomWidth={1}
-        borderBottomStyle="solid"
-        borderBottomColor="gray.300"
-        pr={3}
-        pl={3}
-        overflow="hidden"
-        alignItems="center"
-        onClick={() => setSelected(plan)}
-      >
-        <Flex
-          width={4}
-          height={4}
-          backgroundColor={selected.id === plan.id ? '#5850ec' : 'transparent'}
-          mr={4}
-          borderRadius={100}
-          borderColor="#5850ec"
-          borderWidth={1}
-          borderStyle="solid"
-          justifyContent="center"
+        <Button
+          flexDirection="row"
+          width="100%"
+          borderWidth={0}
+          borderBottomWidth={1}
+          borderBottomStyle="solid"
+          borderBottomColor="gray.300"
+          pr={3}
+          pl={3}
+          overflow="hidden"
           alignItems="center"
+          onClick={() => setSelected(plan)}
         >
-          <Box
-            width={1}
-            height={1}
-            backgroundColor={selected.id === plan.id ? '#fff' : 'transparent'}
-            borderRadius={50}
-            borderColor="#fff"
+          <Flex
+            width={4}
+            height={4}
+            backgroundColor={
+              selected.id === plan.id ? '#5850ec' : 'transparent'
+            }
+            mr={4}
+            borderRadius={100}
+            borderColor="#5850ec"
             borderWidth={1}
             borderStyle="solid"
-          />
-        </Flex>
-        <Flex
-          width="100%"
-          flexDirection="row"
-          justifyContent="space-between"
-          px={1}
-          py={4}
-        >
-          <Flex flexDirection="column" alignItems="flex-start">
-            <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700">
-              {plan.title}
-            </Text>
-            <Text color="gray.400">{plan.description}</Text>
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Box
+              width={1}
+              height={1}
+              backgroundColor={selected.id === plan.id ? '#fff' : 'transparent'}
+              borderRadius={50}
+              borderColor="#fff"
+              borderWidth={1}
+              borderStyle="solid"
+            />
           </Flex>
-          <Flex>
-            <Text fontSize="2xl" py={2}>
-              {plan.cost}/mo
-            </Text>
+          <Flex
+            width="100%"
+            flexDirection="row"
+            justifyContent="space-between"
+            px={1}
+            py={4}
+          >
+            <Flex flexDirection="column" alignItems="flex-start">
+              <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700">
+                {plan.title}
+              </Text>
+              <Text color="gray.400">{plan.description}</Text>
+            </Flex>
+            <Flex>
+              <Text fontSize="2xl" py={2}>
+                {plan.cost}/mo
+              </Text>
+            </Flex>
           </Flex>
-        </Flex>
-      </Button>
-    ))}
-  </Stack>
-  )
+        </Button>
+      ))}
+    </Stack>
+  );
 };
 ```
 

diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -69,8 +69,8 @@ const customTheme = {
   icons: {
     // declare the key and component in your theme, then you can use the key as name in the <Icon /> component
     warning: Warning,
-  }
-}
+  },
+};
 
 const App = () => (
   <ThemeProvider>

diff --git a/docs/theme/index.js b/docs/theme/index.js
@@ -232,6 +232,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
               className="text-current p-2 -mr-2"
               href={config.github}
               target="_blank"
+              rel="noreferrer"
             >
               <GitHubIcon height={28} />
             </a>
@@ -304,6 +305,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
                           filepathWithName
                         }
                         target="_blank"
+                        rel="noreferrer"
                       >
                         Edit this page on GitHub
                       </a>