Refactor/docs

docs/components/APIheading.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { H3 } from './Typography';
-import { Params } from './Syntax';
+import { Params } from './Code/Params';
 import { theme } from '../theme';
 
 type Props = {
@@ -17,13 +17,7 @@ export function APIheading({ name, params }: Props) {
         {name}
       </H3>
 
-      {hasParams && (
-        <Params
-          params={{
-            styles: 'CSSObject'
-          }}
-        />
-      )}
+      {hasParams && <Params params={params} />}
     </>
   );
 }

docs/components/ArticleSubSectionTitle.tsx → docs/components/Article/ArticleSubSectionTitle.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { H2 } from './Typography';
+import { H2 } from '../Typography';
 
 export const ArticleSubSectionTitle = styled(H2)`
   ${({ theme }) => `

docs/components/BlockedSectionTitle.tsx → docs/components/Article/BlockedSectionTitle.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { H1 } from './Typography';
+import { H1 } from '../Typography';
 
 export function ArticleTitle({ title }) {
   return (

docs/components/Article/Content/Content.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { H3 } from '../../Typography';
+import { ContentProps } from './typings';
+
+export function Content({ sectionTitle, content }: ContentProps) {
+  return (
+    <section>
+      <H3>{sectionTitle}</H3>
+      {content}
+    </section>
+  );
+}

docs/components/Article/Content/index.tsx

@@ -0,0 +1,2 @@
+export { Content } from './Content';
+export type { ContentProps } from './typings';

docs/components/Article/Content/typings.ts

@@ -0,0 +1,4 @@
+export type ContentProps = {
+  sectionTitle: string;
+  content: React.ReactNodeArray;
+};

docs/components/Article/Doc/Doc.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ArticleTitle } from '../BlockedSectionTitle';
+import { DocProps } from './typings';
+
+export function Doc({ title, children }: DocProps) {
+  return (
+    <article>
+      <ArticleTitle title={title} />
+      {children}
+    </article>
+  );
+}

docs/components/Article/Doc/index.tsx

@@ -0,0 +1,2 @@
+export { Doc } from './Doc';
+export type { DocProps } from './typings';

docs/components/Article/Doc/typings.ts

@@ -0,0 +1,4 @@
+export type DocProps = {
+  title: string;
+  children: React.ReactChild;
+};

docs/components/Article/Title/Title.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {
+  BlockedSectionTitleContainer,
+  BlockedSectionTitleText
+} from './styles';
+import { TitleProps } from './typings';
+
+export function Title({ title }: TitleProps) {
+  return (
+    <BlockedSectionTitleContainer>
+      <BlockedSectionTitleText>{title}</BlockedSectionTitleText>
+    </BlockedSectionTitleContainer>
+  );
+}

docs/components/Article/Title/index.tsx

@@ -0,0 +1,2 @@
+export { Title } from './Title';
+export type { TitleProps } from './typings';

docs/components/Article/Title/styles.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { H1, H2 } from '../../Typography';
+
+export const BlockedSectionTitleContainer = styled.div`
+  ${({ theme }) => `
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 1.5em;
+
+    &::after {
+      flex: 1;
+      background: ${theme.colors.primary};
+      height: 1px;
+      margin-bottom: 1em;
+    }
+
+    &::after {
+      margin-left: 1em;
+    }
+
+    @media(min-width: ${theme.breakpoints[1]}) {
+      &::after {
+        content: '';
+      }
+    }
+  `}
+`;
+
+export const BlockedSectionTitleText = styled(H1)`
+  ${({ theme }) => `
+    background: ${theme.colors.primary};
+    color: ${theme.colors.white};
+    padding: 0.1em 0.25em;
+    width: 100%;
+
+    @media(min-width: ${theme.breakpoints[1]}) {
+      width: auto;
+    }
+  `}
+`;

docs/components/Article/Title/typings.ts

@@ -0,0 +1,3 @@
+export type TitleProps = {
+  title: string;
+};

docs/components/Article/index.tsx

@@ -0,0 +1,8 @@
+export { Content } from './Content';
+export { Doc } from './Doc';
+export { Title } from './Title';
+export { ArticleSubSectionTitle } from './styles';
+
+export type { ContentProps } from './Content';
+export type { DocProps } from './Doc';
+export type { TitleProps } from './Title';

docs/components/Article/styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { H2 } from '../Typography';
+
+export const ArticleSubSectionTitle = styled(H2)`
+  ${({ theme }) => `
+    color: ${theme.colors.primary};
+  `}
+`;

docs/components/Code/Params.tsx

@@ -0,0 +1,24 @@
+import { Paragraph, Strong } from '../Typography';
+
+export const Params = ({ params }: any) => {
+  const propertyKeys = Object.keys(params);
+
+  return (
+    <>
+      <Paragraph display="inline-block">
+        (
+        {propertyKeys.map((key, i) => {
+          const comma = i !== propertyKeys.length - 1 ? ', ' : '';
+
+          return (
+            <span>
+              <Strong>{key}</Strong>
+              {`: ${params[key]}${comma}`}
+            </span>
+          );
+        })}
+        )
+      </Paragraph>
+    </>
+  );
+};

docs/components/Code/ParamsDescription.tsx

@@ -0,0 +1,16 @@
+import { Paragraph, Strong } from '../components/Typography';
+import { Params } from './Params';
+
+export const ParamsDescription = ({ label = '<props>', params }) => {
+  return (
+    <>
+      <Paragraph display="inline-block">
+        <Strong>
+          <em>{label}</em>
+        </Strong>
+        &nbsp;
+      </Paragraph>
+      <Params params={params} />
+    </>
+  );
+};

docs/components/Code/ParamsTable.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { FlexRow, FlexCol } from 'artifak';
+import {
+  H4,
+  Paragraph,
+  Strong,
+  SmallParagraph,
+  SmallLead
+} from '../Typography';
+import { paddingBottom } from 'styled-system';
+
+export function ParamsTable({ APIname, APItypes, cells }) {
+  return (
+    <div
+      style={{
+        marginBottom: '1rem',
+        padding: '30px 30px 10px',
+        border: '1px solid black'
+      }}
+    >
+      <H4 display="inline-block" verticalAlign="middle">
+        {APIname} &nbsp;
+      </H4>
+      <SmallParagraph
+        display="inline-block"
+        verticalAlign="middle"
+        mt={'0.5rem'}
+      >
+        {APItypes}
+      </SmallParagraph>
+
+      <hr style={{ marginBottom: '1.5rem' }} />
+
+      <FlexRow>
+        <FlexCol columnSize={[12, 2]} gutterWidth={0}>
+          <SmallLead>Name</SmallLead>
+        </FlexCol>
+        <FlexCol columnSize={[12, 3]} gutterWidth={0}>
+          <SmallLead>Type</SmallLead>
+        </FlexCol>
+        <FlexCol columnSize={[12, 2]} gutterWidth={0}>
+          <SmallLead>Default</SmallLead>
+        </FlexCol>
+        <FlexCol columnSize={[12, 5]} gutterWidth={0}>
+          <SmallLead>Description</SmallLead>
+        </FlexCol>
+      </FlexRow>
+
+      {cells.map(cell => {
+        const { name, type, defaultValue, content } = cell;
+
+        return (
+          <FlexRow>
+            <FlexCol columnSize={[12, 2]} gutterWidth={0} pb={'1em'}>
+              <Paragraph mb={'0.15rem'}>
+                <Strong>{name}</Strong>
+              </Paragraph>
+            </FlexCol>
+
+            <FlexCol columnSize={[12, 3]} gutterWidth={0} pb={'1em'}>
+              <SmallParagraph mb={'0.15rem'}>{type}</SmallParagraph>
+            </FlexCol>
+
+            <FlexCol columnSize={[12, 2]} gutterWidth={0} pb={'1em'}>
+              <Paragraph mb={'0.15rem'}>{defaultValue}</Paragraph>
+            </FlexCol>
+
+            <FlexCol columnSize={[12, 5]} gutterWidth={0} pb={'1em'}>
+              <Paragraph mb={'0.15rem'}>{content}</Paragraph>
+            </FlexCol>
+          </FlexRow>
+        );
+      })}
+    </div>
+  );
+}

docs/components/Syntax.tsx → docs/components/Code/Syntax.tsx

@@ -45,40 +45,3 @@ export function Syntax({
     </SyntaxHighlighter>
   );
 }
-
-export const ParamsDescription = ({ label = '<props>', params }) => {
-  return (
-    <>
-      <Paragraph display="inline-block">
-        <Strong>
-          <em>{label}</em>
-        </Strong>
-        &nbsp;
-      </Paragraph>
-      <Params params={params} />
-    </>
-  );
-};
-
-export const Params = ({ params }: any) => {
-  const propertyKeys = Object.keys(params);
-
-  return (
-    <>
-      <Paragraph display="inline-block">
-        (
-        {propertyKeys.map((key, i) => {
-          const comma = i !== propertyKeys.length - 1 ? ', ' : '';
-
-          return (
-            <span>
-              <Strong>{key}</Strong>
-              {`: ${params[key]}${comma}`}
-            </span>
-          );
-        })}
-        )
-      </Paragraph>
-    </>
-  );
-};