Docs/new api doc

docs/components/Code/ParamsTable.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { FlexRow, FlexCol } from 'artifak';
-import { H4, Paragraph, SmallParagraph, SmallLead } from '../Typography';
+import { FlexRow, FlexCol, useMatchMedia } from 'artifak';
+import { Paragraph, SmallParagraph, SmallLead } from '../Typography';
 import { theme } from '../../theme';
-import { useMatchMedia } from '../../hooks';
 
 type Props = {
   APIname: string;

docs/components/Nav/constants.ts

@@ -79,6 +79,26 @@ export const links: LinkItems = {
         route: '/docs?content=fluidsizing',
         component: 'FluidSizing',
         name: 'Fluid Sizing'
+      },
+      {
+        route: '/docs?content=hextorgb',
+        component: 'HexToRGB',
+        name: 'Hex To RGB'
+      },
+      {
+        route: '/docs?content=hextorgba',
+        component: 'HexToRGBA',
+        name: 'Hex To RGBA'
+      },
+      {
+        route: '/docs?content=pxtoem',
+        component: 'PxToEm',
+        name: 'Px To Em'
+      },
+      {
+        route: '/docs?content=pxtorem',
+        component: 'PxToRem',
+        name: 'Px To Rem'
       }
     ]
   },

docs/components/Typography.tsx

@@ -51,6 +51,7 @@ const headings = {
 const text = {
   base: {
     styles: {
+      marginTop: 0,
       lineHeight: 1.45
     }
   },

docs/package.json

@@ -32,7 +32,7 @@
     "@types/styled-components": "^5.1.7",
     "@types/styled-system": "^5.1.10",
     "babel-plugin-styled-components": "^1.12.0",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.5"
   },
   "license": "ISC"
 }

docs/page-content/HexToRGB/HexToRGB.tsx

@@ -0,0 +1,60 @@
+import {
+  Paragraph,
+  Strong,
+  HR,
+  H4,
+  Doc,
+  APIheading,
+  ParamsTable
+} from '@components';
+import { Syntax } from '../../components/Code/Syntax';
+import { hexToRGB } from './example/hexToRGB';
+
+export function HexToRGB() {
+  return (
+    <Doc title="hexToRGB">
+      <HexToRGBContent />
+    </Doc>
+  );
+}
+
+export function HexToRGBContent() {
+  return (
+    <>
+      <Paragraph>
+        hexToRGB is simply a utility function that allows you to convert
+        hexadecimal colour values to RGB.
+      </Paragraph>
+
+      <HR />
+
+      <APIheading name="hexToRGB" />
+      <Paragraph>
+        Usage is straightforward, simply input the hexadecimal colour value you
+        wish to convert.
+      </Paragraph>
+
+      <Syntax>{hexToRGB}</Syntax>
+
+      <HR />
+
+      <H4>Parameters</H4>
+
+      <Paragraph>
+        The <Strong>hexToRGB</Strong> function only accepts a single argument.
+      </Paragraph>
+
+      <ParamsTable
+        APIname={'base'}
+        cells={[
+          {
+            name: 'hex',
+            type: 'string',
+            defaultValue: 'N/A',
+            content: 'A string type hexidecimal colour value eg. #fdfdfd.'
+          }
+        ]}
+      />
+    </>
+  );
+}

docs/page-content/HexToRGB/example/hexToRGB.tsx

@@ -0,0 +1,15 @@
+export const hexToRGB = `
+  import { hexToRGB } from 'artifak';
+  import styled from 'styled-components';
+
+  // The function returns a string
+  // const RGBvalue = hexToRGB('#FFF');
+  // console.log(RGBvalue) // logs string 'rgb(255, 255, 255)'
+
+  const Badge = styled.div\`
+    display: none;
+    margin: 0 auto;
+    width: 100%;
+    color: \${hexToRGB('#FFF')};
+  \`;
+`;

docs/page-content/HexToRGBA/HexToRGBA.tsx

@@ -0,0 +1,68 @@
+import {
+  Paragraph,
+  Strong,
+  H4,
+  ParamsTable,
+  HR,
+  Doc,
+  APIheading
+} from '@components';
+import { Syntax } from '../../components/Code/Syntax';
+import { hexToRGBAusage } from './example/hexToRGBAusage';
+
+export function HexToRGBA() {
+  return (
+    <Doc title="hexToRGBA">
+      <HexToRGBAContent />
+    </Doc>
+  );
+}
+
+export function HexToRGBAContent() {
+  return (
+    <>
+      <Paragraph>
+        hexToRGBA is simply a utility function that allows you to convert
+        hexadecimal colour values to RGBA.
+      </Paragraph>
+
+      <HR />
+
+      <APIheading name="hexToRGBA" />
+      <Paragraph>
+        Usage is straightforward, simply input the hexadecimal colour value you
+        wish to convert and provide an alpha value as well if you wish.
+      </Paragraph>
+
+      <Syntax>{hexToRGBAusage}</Syntax>
+
+      <HR />
+
+      <H4>Parameters</H4>
+
+      <Paragraph>
+        The <Strong>hexToRGBA</Strong> function only accepts 2 arguments,{' '}
+        <Strong>hex</Strong>, which is the hexadecimal colour value and{' '}
+        <Strong>alpha</Strong>, which is the alpha value.
+      </Paragraph>
+
+      <ParamsTable
+        APIname={'base'}
+        cells={[
+          {
+            name: 'hex',
+            type: 'string',
+            defaultValue: 'N/A',
+            content: 'A string type hexidecimal colour value eg. #fdfdfd.'
+          },
+          {
+            name: 'alpha',
+            type: 'number',
+            defaultValue: '1',
+            content: 'A numeric value between 0 and 1 eg. 0.75.'
+          }
+        ]}
+      />
+    </>
+  );
+}

docs/page-content/HexToRGBA/example/hexToRGBAusage.tsx

@@ -0,0 +1,19 @@
+export const hexToRGBAusage = `
+  import { hexToRGBA } from 'artifak';
+  import styled from 'styled-components';
+
+  // The function returns a string
+  // const RGBvalue = hexToRGBA('#FFF', 0.5);
+  // console.log(RGBvalue) // logs string 'rgba(255, 255, 255, 0.5)'
+
+  // The 2nd parameter for alpha value is optional
+  // const RGBvalue = hexToRGBA('#FFF');
+  // console.log(RGBvalue) // logs string 'rgba(255, 255, 255, 1)'
+
+  const Badge = styled.div\`
+    display: none;
+    margin: 0 auto;
+    width: 100%;
+    color: \${hexToRGB('#FFF', 0.5)};
+  \`;
+`;

docs/page-content/PxToEm/PxToEm.tsx

@@ -0,0 +1,66 @@
+import {
+  Paragraph,
+  Strong,
+  H4,
+  ParamsTable,
+  HR,
+  Doc,
+  APIheading
+} from '@components';
+import { Syntax } from '../../components/Code/Syntax';
+import { pxToEmUsage } from './example/pxToEmUsage';
+
+export function PxToEm() {
+  return (
+    <Doc title="pxToEm">
+      <PxToEmContent />
+    </Doc>
+  );
+}
+
+export function PxToEmContent() {
+  return (
+    <>
+      <Paragraph>
+        This utility function converts <Strong>PX</Strong> values to{' '}
+        <Strong>EM</Strong> values.
+      </Paragraph>
+
+      <HR />
+
+      <APIheading name="pxToEm" />
+      <Paragraph>
+        Simply include your desired px value to convert and a size to base it
+        off of for the 2nd paramater.
+      </Paragraph>
+
+      <Syntax>{pxToEmUsage}</Syntax>
+
+      <HR />
+
+      <H4>Parameters</H4>
+
+      <Paragraph>
+        The <Strong>pxToEm</Strong> function accepts 2 arguments.
+      </Paragraph>
+
+      <ParamsTable
+        APIname={'base'}
+        cells={[
+          {
+            name: 'size',
+            type: 'string | number',
+            defaultValue: 'N/A',
+            content: 'A numeric or string type value eg. 16 or 16px.'
+          },
+          {
+            name: 'baseSize',
+            type: 'number',
+            defaultValue: '16',
+            content: 'The base or parent size you wish the sizing to adhere to.'
+          }
+        ]}
+      />
+    </>
+  );
+}