Merge 6f10647 into 1b908f7

heyjul3s · Dec 28, 2020 · 5242614 · 5242614
2 parents 1b908f7 + 6f10647
commit 5242614
Show file tree

Hide file tree

Showing 58 changed files with 769 additions and 228 deletions.
diff --git a/docs/assets/ArtifakTypeLogo.tsx b/docs/assets/ArtifakTypeLogo.tsx
@@ -0,0 +1,134 @@
+export function ArtifakTypeLogo() {
+  return (
+    <svg
+      id="Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100.1 23.8"
+      style={{
+        position: 'relative',
+        width: '100px',
+        zIndex: 1,
+        padding: '0 1.5em',
+        top: '-2px'
+      }}
+    >
+      <path
+        d="M27.3,7.7A5.92,5.92,0,0,1,30.2,7v5.3H28.8a4.25,4.25,0,0,0-2.8.8,3.62,3.62,0,0,0-.9,2.8v7.6h-5V7.1h5V9.8A8.83,8.83,0,0,1,27.3,7.7Z"
+        style={{
+          fill: '#ffffff'
+        }}
+      />
+      <path
+        d="M41.8,19.3v4.3H39.2a6.49,6.49,0,0,1-4.3-1.3c-1-.9-1.5-2.3-1.5-4.4V11.4h-2V7.1h2v-4h5v4h3.3v4.2H38.4v6.6a1.37,1.37,0,0,0,.4,1.1,1.74,1.74,0,0,0,1.2.3Z"
+        style={{
+          fill: '#ffffff'
+        }}
+      />
+      <path
+        d="M44.9,4.7a2.36,2.36,0,0,1-.8-1.9,3,3,0,0,1,.8-2A3.29,3.29,0,0,1,47.1,0a2.86,2.86,0,0,1,2.1.8,2.44,2.44,0,0,1,.8,2,2.56,2.56,0,0,1-.8,1.9,3.23,3.23,0,0,1-2.1.8A3.9,3.9,0,0,1,44.9,4.7Zm4.7,2.4V23.5h-5V7.1Z"
+        style={{
+          fill: '#ffffff'
+        }}
+      />
+      <path
+        d="M61.5,11.3H58.8V23.5h-5V11.3H52V7.1h1.8V6.7a6.19,6.19,0,0,1,1.7-4.6A7.58,7.58,0,0,1,60.6.5h.8V4.8a2.73,2.73,0,0,0-2,.4A2.16,2.16,0,0,0,58.8,7v.1h2.7Z"
+        style={{
+          fill: '#ffffff'
+        }}
+      />
+      <path
+        d="M63.8,10.9A6.17,6.17,0,0,1,66.4,8a6.63,6.63,0,0,1,3.7-1,5.56,5.56,0,0,1,3,.7,5.24,5.24,0,0,1,2,1.9V7.1h5V23.5h-5V21.2a5.57,5.57,0,0,1-5,2.6,6.53,6.53,0,0,1-3.6-1,7,7,0,0,1-2.6-3,10.64,10.64,0,0,1-1-4.5A8.67,8.67,0,0,1,63.8,10.9ZM74,12.4a3.39,3.39,0,0,0-5,0,4,4,0,0,0-1,3,4.19,4.19,0,0,0,1,3,3.39,3.39,0,0,0,5,0,4,4,0,0,0,1-3A3.67,3.67,0,0,0,74,12.4Z"
+        style={{
+          fill: '#ffffff'
+        }}
+      />
+      <path
+        d="M93.8,23.5l-5-6.9v6.9h-5V1.8h5v12l5-6.7H100l-6.8,8.2,6.9,8.2Z"
+        style={{
+          fill: '#ffffff'
+        }}
+      />
+      <path
+        d="M16.6,19.3a8,8,0,0,1-4,4.1h4.2V19.1Z"
+        style={{
+          fill: '#ffffff'
+        }}
+      />
+      <path
+        d="M16.6,15.2h0V6.9H8.3a8.3,8.3,0,1,0,8.3,8.3ZM8.3,17.1a1.8,1.8,0,1,1,1.8-1.8A1.79,1.79,0,0,1,8.3,17.1Z"
+        style={{
+          fill: '#ffffff'
+        }}
+      />
+    </svg>
+    //   <svg
+    //     version="1.1"
+    //     id="Layer_1"
+    //     xmlns="http://www.w3.org/2000/svg"
+    //     x="0px"
+    //     y="0px"
+    //     viewBox="0 0 100 23.8"
+    //     style={{
+    //       position: 'relative',
+    //       width: '100px',
+    //       zIndex: 1,
+    //       enableBackground: 'new 0 0 100 23.8'
+    //     }}
+    //   >
+    //     <style type="text/css">
+    //       {`
+    //   .st0{fill:#F15E22;}
+    // `}
+    //     </style>
+    //     <g>
+    //       <g>
+    //         <path
+    //           className="st0"
+    //           d="M27.3,7.7C28.2,7.2,29.2,7,30.2,7v5.3h-1.4c-1.3,0-2.2,0.3-2.8,0.8c-0.6,0.5-0.9,1.5-0.9,2.8v7.6h-5V7.1h5
+    // 		v2.7C25.7,9,26.4,8.3,27.3,7.7z"
+    //         />
+    //         <path
+    //           className="st0"
+    //           d="M41.8,19.3v4.3h-2.6c-1.8,0-3.2-0.4-4.3-1.3c-1-0.9-1.5-2.3-1.5-4.4v-6.5h-2V7.1h2v-4h5v4h3.3v4.2h-3.3v6.6
+    // 		c0,0.5,0.1,0.8,0.4,1.1c0.2,0.2,0.6,0.3,1.2,0.3H41.8z"
+    //         />
+    //         <path
+    //           className="st0"
+    //           d="M44.9,4.7c-0.6-0.5-0.8-1.2-0.8-1.9c0-0.8,0.3-1.4,0.8-2C45.5,0.3,46.2,0,47.1,0c0.9,0,1.6,0.3,2.1,0.8
+    // 		c0.6,0.5,0.8,1.2,0.8,2c0,0.8-0.3,1.4-0.8,1.9c-0.6,0.5-1.3,0.8-2.1,0.8C46.2,5.4,45.5,5.2,44.9,4.7z M49.6,7.1v16.4h-5V7.1H49.6z
+    // 		"
+    //         />
+    //         <path
+    //           className="st0"
+    //           d="M61.5,11.3h-2.7v12.2h-5V11.3h-1.8V7.1h1.8V6.7c0-2,0.6-3.5,1.7-4.6c1.2-1,2.8-1.6,5.1-1.6c0.4,0,0.6,0,0.8,0
+    // 		v4.3c-1-0.1-1.6,0.1-2,0.4C59,5.5,58.8,6.1,58.8,7v0.1h2.7V11.3z"
+    //         />
+    //         <path
+    //           className="st0"
+    //           d="M63.8,10.9c0.6-1.3,1.5-2.3,2.6-2.9c1.1-0.7,2.3-1,3.7-1c1.2,0,2.2,0.2,3,0.7c0.9,0.5,1.5,1.1,2,1.9V7.1h5
+    // 		v16.4h-5v-2.3c-0.5,0.8-1.2,1.4-2,1.9c-0.9,0.5-1.9,0.7-3,0.7c-1.3,0-2.5-0.3-3.6-1c-1.1-0.7-2-1.7-2.6-3c-0.6-1.3-1-2.8-1-4.5
+    // 		S63.1,12.1,63.8,10.9z M74,12.4c-0.7-0.7-1.5-1.1-2.5-1.1c-1,0-1.8,0.4-2.5,1.1c-0.7,0.7-1,1.7-1,3s0.3,2.2,1,3
+    // 		c0.7,0.7,1.5,1.1,2.5,1.1c1,0,1.8-0.4,2.5-1.1c0.7-0.7,1-1.7,1-3C75.1,14.1,74.7,13.1,74,12.4z"
+    //         />
+    //         <path
+    //           className="st0"
+    //           d="M93.8,23.5l-5-6.9v6.9h-5V1.8h5v12l5-6.7h6.2l-6.8,8.2l6.9,8.2H93.8z"
+    //         />
+    //       </g>
+    //       <g>
+    //         <path
+    //           className="st0"
+    //           d="M16.6,19.3c-0.8,1.8-2.2,3.3-4,4.1h4.2l0-4.3L16.6,19.3z"
+    //         />
+    //         <path
+    //           className="st0"
+    //           d="M16.6,15.2L16.6,15.2l0-8.3H8.9c-0.2,0-0.4,0-0.6,0C3.7,6.9,0,10.6,0,15.2c0,4.6,3.7,8.3,8.3,8.3
+    // 		C12.9,23.5,16.6,19.8,16.6,15.2z M8.3,17.1c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8
+    // 		C10.2,16.2,9.3,17.1,8.3,17.1z"
+    //         />
+    //       </g>
+    //     </g>
+    //   </svg>
+  );
+}
diff --git a/docs/components/Global/NavTop/NavTop.tsx b/docs/components/Global/NavTop/NavTop.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
+import { ArtifakTypeLogo } from '../../../assets/ArtifakTypeLogo';
 import { NavTopContainer, NavTopMenu, NavTopLink } from './styles';
 
 export function NavTop() {
   return (
     <NavTopContainer>
+      <ArtifakTypeLogo />
       <NavTopMenu>
         <NavTopLink href="https//github.com/heyjul3s/artifak">
           Github

diff --git a/docs/components/Global/NavTop/styles.ts b/docs/components/Global/NavTop/styles.ts
@@ -4,22 +4,24 @@ import { AnchorLink } from '../../AnchorLink';
 export const NavTopMenu = styled.nav`
   display: flex;
   align-items: center;
-  justify-content: flex-end;
   height: 100%;
-  padding: 0 1.5rem;
+  padding: 0 1.5em;
 `;
 
 export const NavTopLink = styled(AnchorLink)`
   position: relative;
   z-index: 1;
   color: white;
   margin-right: 15px;
+  top: 2px;
 `;
 
 export const NavTopContainer = styled.div`
   position: relative;
   width: 100%;
   height: 60px;
+  display: flex;
+  justify-content: space-between;
 
   ${({ theme }) => `
     background-color: ${theme.colors.primary};

diff --git a/docs/components/Nav/Mobile/icons/HooksIcon.tsx b/docs/components/Nav/Mobile/icons/HooksIcon.tsx
@@ -0,0 +1,74 @@
+import { SVGwrapper } from '../styles';
+
+export function HooksIcon() {
+  return (
+    <SVGwrapper
+      id="Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 52.46 99.17"
+    >
+      <path
+        d="M58.73,49.68V39H40.64s0,11.17,0,11.17l17.11,17.1a10.1,10.1,0,0,1,0,14.23h0a10.1,10.1,0,0,1-14.23,0L26.63,64.58a25.29,25.29,0,1,0,32.1-14.9Z"
+        transform="translate(-24.04 -0.56)"
+        style={{
+          fill: '#fff',
+          stroke: '#f15f24',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          strokeWidth: '1.8px'
+        }}
+      />
+      <rect
+        x="16.43"
+        y="31.37"
+        width="18.38"
+        height="3.84"
+        style={{
+          fill: '#fff',
+          stroke: '#f15f24',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          strokeWidth: '1.8px'
+        }}
+      />
+      <rect
+        x="16.43"
+        y="0.93"
+        width="18.38"
+        height="10.61"
+        style={{
+          fill: '#fff',
+          stroke: '#f15f24',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          strokeWidth: '1.8px'
+        }}
+      />
+      <circle
+        cx="25.54"
+        cy="19.24"
+        r="11.25"
+        style={{
+          fill: '#fff',
+          stroke: '#f15f24',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          strokeWidth: '1.8px'
+        }}
+      />
+      <circle
+        cx="25.54"
+        cy="19.24"
+        r="2.92"
+        style={{
+          fill: '#fff',
+          stroke: '#f15f24',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          strokeWidth: '1.8px'
+        }}
+      />
+    </SVGwrapper>
+  );
+}
diff --git a/docs/components/Nav/Mobile/icons/index.tsx b/docs/components/Nav/Mobile/icons/index.tsx
@@ -3,3 +3,4 @@ export { UsageIcon } from './UsageIcon';
 export { ComponentsIcon } from './ComponentsIcon';
 export { UtilitiesIcon } from './UtilitiesIcon';
 export { CloseIcon } from './CloseIcon';
+export { HooksIcon } from './HooksIcon';
diff --git a/docs/components/Nav/constants.ts b/docs/components/Nav/constants.ts
@@ -74,6 +74,28 @@ export const links: LinkItems = {
         route: '/docs?content=generator',
         component: 'Generator',
         name: 'Generator'
+      },
+      {
+        route: '/docs?content=fluidsizing',
+        component: 'FluidSizing',
+        name: 'Fluid Sizing'
+      }
+    ]
+  },
+  Hooks: {
+    component: 'Hooks',
+    name: 'Hooks',
+    mobileNavIndex: 3,
+    children: [
+      {
+        route: '/docs?content=usematchmedia',
+        component: 'UseMatchMedia',
+        name: 'useMatchMedia'
+      },
+      {
+        route: '/docs?content=usewindowsize',
+        component: 'Usewindowsize',
+        name: 'useWindowSize'
       }
     ]
   }

diff --git a/docs/components/Typography.tsx b/docs/components/Typography.tsx
@@ -4,7 +4,7 @@ import { theme } from '../theme';
 
 const styles = {
   H1: {
-    fontSize: [48, 56],
+    fontSize: [36, 48, 56],
     fontFamily: theme.fontFamily.poppins,
     margin: '0 0 0.5em',
     lineHeight: 1.5,

diff --git a/docs/containers/FluidSizing/FluidSizing.tsx b/docs/containers/FluidSizing/FluidSizing.tsx
@@ -0,0 +1,48 @@
+import { Paragraph, Strong } from '../../components/Typography';
+import { Syntax } from '../../components/Code/Syntax';
+import { HR } from '../../components/Global/HR';
+import { Doc } from '../../components/Article';
+import { APIheading } from '../../components/APIheading';
+import { fluidSizingExampleUsage } from './examples';
+
+export function FluidSizing() {
+  return (
+    <Doc title="useMatchMedia">
+      <FluidSizingContent />
+    </Doc>
+  );
+}
+
+export function FluidSizingContent() {
+  return (
+    <>
+      <Paragraph>
+        A fluid sizing utility function that creates a calc value based off of
+        the min and max values provided.
+      </Paragraph>
+
+      <HR />
+
+      <APIheading
+        name="fluidSizing"
+        params={{
+          minElementSize: 'number',
+          maxElementSize: 'number',
+          minViewportWidth: 'number',
+          maxViewportWidth: 'number'
+        }}
+      />
+      <Paragraph>
+        This function writes a CSS rule that allows for fluid sizing.
+        Essentially, this eliminates the need for media queries as the element
+        will resize in accordance to the viewport constraints that you provide.
+        To use this, specify the minimum size and maximum size of your element
+        and also the minimum and maximum size of the viewport width that you
+        intend to use as constraints. Below is an example of how you may use it.
+      </Paragraph>
+      <Syntax>{fluidSizingExampleUsage}</Syntax>
+
+      <br />
+    </>
+  );
+}
diff --git a/...ainers/Typography/examples/fluidSizing.ts → ...iners/FluidSizing/examples/fluidSizing.ts b/...ainers/Typography/examples/fluidSizing.ts → ...iners/FluidSizing/examples/fluidSizing.ts
diff --git a/docs/containers/FluidSizing/examples/index.ts b/docs/containers/FluidSizing/examples/index.ts
@@ -0,0 +1 @@
+export { fluidSizingExampleUsage } from './fluidSizing';
diff --git a/docs/containers/Typography/Typography.tsx b/docs/containers/Typography/Typography.tsx
@@ -4,7 +4,6 @@ import { List } from '../../components/List';
 import {
   createTypographComponentsExampleUsage,
   createTypographyComponentsDemo,
-  fluidSizingExampleUsage,
   fontWeightExampleUsage
 } from './examples';
 import { HR } from '../../components/Global/HR';
@@ -55,27 +54,6 @@ export function TypographyContent() {
 
       <HR />
 
-      <APIheading
-        name="fluidSizing"
-        params={{
-          minElementSize: 'number',
-          maxElementSize: 'number',
-          minViewportWidth: 'number',
-          maxViewportWidth: 'number'
-        }}
-      />
-      <Paragraph>
-        This function writes a CSS rule that allows for fluid sizing.
-        Essentially, this eliminates the need for media queries as the element
-        will resize in accordance to the viewport constraints that you provide.
-        To use this, specify the minimum size and maximum size of your element
-        and also the minimum and maximum size of the viewport width that you
-        intend to use as constraints. Below is an example of how you may use it.
-      </Paragraph>
-      <Syntax>{fluidSizingExampleUsage}</Syntax>
-
-      <HR />
-
       <APIheading name="fontWeight" />
       <Paragraph>
         fontWeight is essentially just a constant. Nothing special here. This is

diff --git a/docs/containers/Typography/examples/index.tsx b/docs/containers/Typography/examples/index.tsx
@@ -2,5 +2,4 @@ export {
   createTypographComponentsExampleUsage,
   createTypographyComponentsDemo
 } from './createTypographyComponents';
-export { fluidSizingExampleUsage } from './fluidSizing';
 export { fontWeightExampleUsage } from './fontWeight';