add Modal

Barry127 · Nov 23, 2020 · 00795eb · 00795eb
1 parent 1102202
commit 00795eb
Show file tree

Hide file tree

Showing 16 changed files with 1,129 additions and 4 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -17,6 +17,7 @@
     "focusring",
     "lcov",
     "maeven",
+    "maximizable",
     "mixins",
     "monokai",
     "octicons",

diff --git a/package.json b/package.json
@@ -82,6 +82,7 @@
     "react-dom": "^16.13.1",
     "react-live": "^2.2.2",
     "react-test-renderer": "^16.14.0",
+    "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.32.0",
     "rollup-plugin-postcss-modules": "^2.0.2",
@@ -143,7 +144,7 @@
       }
     },
     "transformIgnorePatterns": [
-      "/node_modules/react-spring/"
+      "node_modules/react-spring"
     ],
     "setupFilesAfterEnv": [
       "./src/setupTests.ts"

diff --git a/pages/docs/components/Modal.mdx b/pages/docs/components/Modal.mdx
@@ -0,0 +1,58 @@
+import { Description, Meta, Props } from 'docsComponents';
+import { Alert } from 'maeven';
+
+<Meta title="Modal" />
+
+# Modal
+
+<Description of="Modal" />
+
+<Alert type="warning" title="Warning!" closable={false}>
+  Modal relies on resize-observers. Older browsers need a polyfill.
+</Alert>
+
+## Props
+
+<Props of="Modal" />
+
+## Examples
+
+### Basic
+
+A basic usage of Modal.
+
+```js live withRender
+const ModalComp = () => {
+  [isOpen, setOpen] = useState(false);
+
+  return (
+    <>
+      <Modal
+        icon={userCircleSolid}
+        title="Hello World"
+        isOpen={isOpen}
+        maximizable
+        onClose={() => setOpen(false)}
+        color="primary"
+      >
+        <P>
+          Don't be too proud of this technological terror you've constructed.
+          The ability to destroy a planet is insignificant next to the power of
+          the Force. But with the blast shield down, I can't even see! How am I
+          supposed to fight?
+        </P>
+        <Ol>
+          <Li>
+            You are a part of the Rebel Alliance and a traitor! Take her away!
+          </Li>
+          <Li>The Force is strong with this one. I have you now.</Li>
+          <Li>He is here.</Li>
+        </Ol>
+      </Modal>
+      <Button onClick={() => setOpen(true)}>Open</Button>
+    </>
+  );
+};
+
+render(<ModalComp />);
+```
diff --git a/pages/docs/nav.json b/pages/docs/nav.json
@@ -73,6 +73,7 @@
       },
       "Icon": "/docs/components/Icon",
       "Link": "/docs/components/Link",
+      "Modal": "/docs/components/Modal",
       "Spinner": "/docs/components/Spinner",
       "ThemeProvider": "/docs/components/ThemeProvider"
     }

diff --git a/src/common/defaultIcons.ts b/src/common/defaultIcons.ts
@@ -4,9 +4,10 @@ import { MaevenIcon } from '../types';
  * Default Icons used for components.
  *
  * check, chevronDown, ChevronLeft, ChevronRight chevronUp,
- * close, danger, info,minus, passwordShow, passwordHide,
- * success, warning icons are licensed under the MIT
- * License by Feather Icons: https://feathericons.com
+ * close, danger, info, maximize, minimize, minus,
+ * passwordShow, passwordHide, success, warning icons are
+ * licensed under the MIT License by Feather Icons:
+ * https://feathericons.com
  */
 
 export const check: MaevenIcon = {
@@ -245,6 +246,100 @@ export const info: MaevenIcon = {
   ]
 };
 
+export const maximize: MaevenIcon = {
+  tag: 'svg',
+  attrs: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  },
+  children: [
+    {
+      tag: 'polyline',
+      attrs: {
+        points: '15 3 21 3 21 9'
+      }
+    },
+    {
+      tag: 'polyline',
+      attrs: {
+        points: '9 21 3 21 3 15'
+      }
+    },
+    {
+      tag: 'line',
+      attrs: {
+        x1: '21',
+        y1: '3',
+        x2: '14',
+        y2: '10'
+      }
+    },
+    {
+      tag: 'line',
+      attrs: {
+        x1: '3',
+        y1: '21',
+        x2: '10',
+        y2: '14'
+      }
+    }
+  ]
+};
+
+export const minimize: MaevenIcon = {
+  tag: 'svg',
+  attrs: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  },
+  children: [
+    {
+      tag: 'polyline',
+      attrs: {
+        points: '4 14 10 14 10 20'
+      }
+    },
+    {
+      tag: 'polyline',
+      attrs: {
+        points: '20 10 14 10 14 4'
+      }
+    },
+    {
+      tag: 'line',
+      attrs: {
+        x1: '14',
+        y1: '10',
+        x2: '21',
+        y2: '3'
+      }
+    },
+    {
+      tag: 'line',
+      attrs: {
+        x1: '3',
+        y1: '21',
+        x2: '10',
+        y2: '14'
+      }
+    }
+  ]
+};
+
 export const minus: MaevenIcon = {
   tag: 'svg',
   attrs: {