Update Docs

- update Variants copy
- add initial Customisation doc draft
- move systemExtensionUsage to customisation
- add types to FlexTable
- update Media copy

docs/codeExamples/customisation/index.tsx

@@ -0,0 +1 @@
+export { systemExtensionUsage } from '../customisation/systemExtensionUsage';

docs/codeExamples/generator/systemExtensionUsage.ts → docs/codeExamples/customisation/systemExtensionUsage.ts

@@ -1,5 +1,6 @@
 export const systemExtensionUsage = `
   import { system } from 'styled-system';
+  import { Property } from 'csstype';
   import { createStyledComponent, createBaseComponents } from 'artifak';
   import { Theme, RequiredTheme, ResponsiveValue } from 'styled-system';
 
@@ -8,7 +9,7 @@ export const systemExtensionUsage = `
   // You will find most of what you need via @types/styled-system but if you don't
   // well... here's an example of making your own.
   export interface TextDecorationProps<ThemeType extends Theme = RequiredTheme> {
-    textDecoration?: ResponsiveValue<CSS.Property.TextDecoration, ThemeType>;
+    textDecoration?: ResponsiveValue<Property.TextDecoration, ThemeType>;
   }
 
   // add your prop via "system"
@@ -19,7 +20,9 @@ export const systemExtensionUsage = `
 
   // Create the styled component.
   // In this example, we're assuming we want to generate a bunch of components from this base.
-  const MyBaseComponent = createStyledComponent<TextDecorationProps>([myStylesConfig]);
+  const MyBaseComponent = createStyledComponent<TextDecorationProps>(
+    {}, {}, [myStylesConfig]
+  );
 
   const myStyles = {
     Component1: {

docs/codeExamples/generator/createBaseComponentsUsage.ts

@@ -4,9 +4,7 @@ export const createBaseComponentsUsage = `
 
   // Create your base component
   const BaseComponent = createStyledComponent<PositionProps>(
-    [position],
-    { position: 'relative' },
-    'article'
+    { position: 'relative' }, {}, [position], 'article'
   );
 
   // Define your styles

docs/codeExamples/generator/createStyledComponentUsage.ts

@@ -2,8 +2,6 @@ export const createStyledComponentUsage = `
   import { position, PositionProps } from 'styled-system';
 
   const StyledArticle = createStyledComponent<PositionProps>(
-    [position],
-    { position: 'relative' },
-    'article'
+    { position: 'relative' }, {}, [position], 'article'
   );
 `;

docs/codeExamples/generator/index.tsx

@@ -1,3 +1,2 @@
 export { createStyledComponentUsage } from './createStyledComponentUsage';
 export { createBaseComponentsUsage } from './createBaseComponentsUsage';
-export { systemExtensionUsage } from './systemExtensionUsage';

docs/components/FlexTable.tsx

@@ -8,7 +8,12 @@ import {
   SmallParagraph
 } from '../components/Typography';
 
-export function FlexTable({ title, cells }) {
+type Props = {
+  title?: string;
+  cells: { prop: string; content: string }[];
+};
+
+export function FlexTable({ title, cells }: Props) {
   return (
     <FlexRow
       p={'30px 30px 10px'}
@@ -17,7 +22,7 @@ export function FlexTable({ title, cells }) {
         border: '1px solid black'
       }}
     >
-      <FlexTableTitle title={title} />
+      {!!title && <FlexTableTitle title={title} />}
 
       {!!cells &&
         cells.length &&

docs/components/Header/index.tsx

@@ -58,6 +58,12 @@ const links = [
     title: 'Variants',
     selected: false,
     key: 'modules'
+  },
+  {
+    id: 'customisation',
+    title: 'Customisation',
+    selected: false,
+    key: 'modules'
   }
 ];
 

docs/containers/Customisation.tsx

@@ -0,0 +1,33 @@
+import { Paragraph, Strong } from '../components/Typography';
+import { Syntax } from '../components/Syntax';
+
+import { systemExtensionUsage } from '../codeExamples/customisation';
+
+import { HR } from '../components/HR';
+import { ArticleDoc } from '../components/ArticleDoc';
+import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle';
+
+export function Customisation() {
+  return (
+    <ArticleDoc title="Customisation">
+      <CustomisationContent />
+    </ArticleDoc>
+  );
+}
+
+export function CustomisationContent() {
+  return (
+    <>
+      <ArticleSubSectionTitle>
+        Customising/Adding CSS properties
+      </ArticleSubSectionTitle>
+
+      <Paragraph>
+        To add to the previous createBaseComponents components example, let's
+        say you'd like to extend the system with some extra CSS properties.
+      </Paragraph>
+
+      <Syntax>{systemExtensionUsage}</Syntax>
+    </>
+  );
+}

docs/containers/Media.tsx

@@ -1,4 +1,4 @@
-import { Paragraph } from '../components/Typography';
+import { Paragraph, Strong } from '../components/Typography';
 import { Syntax } from '../components/Syntax';
 import { min, max, minMax, and, or, single } from '../codeExamples/media';
 import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle';
@@ -19,9 +19,12 @@ export function MediaContent() {
   return (
     <>
       <Paragraph>
-        A styled-component mixin, Media helps you write media queries for your
-        styled components. At its current incarnation, the mixin supports "and"
-        and "or" media query operators. The "not" operator is not supported yet.
+        Although most width related queries should be taken care of via Styled
+        System, sometimes our concern goes beyond that and what's more, there
+        are currently newer media queries that we can specify now. Therefore, a
+        media query mixin is included with Artifak to help in regards to this.
+        At its current incarnation, the mixin only supports "and" and "or" media
+        query operators. The "not" operator is not supported yet.
       </Paragraph>
 
       <HR />
@@ -35,7 +38,6 @@ export function MediaContent() {
       <APIheading name="Media Types" />
 
       <FlexTable
-        title="Queries"
         cells={[
           {
             prop: 'all',
@@ -76,7 +78,6 @@ export function MediaContent() {
       </Paragraph>
 
       <FlexTable
-        title="Queries"
         cells={[
           {
             prop: 'width',
@@ -101,7 +102,6 @@ export function MediaContent() {
 
       <APIheading name="Media Input" />
       <FlexTable
-        title="Queries"
         cells={[
           {
             prop: 'hover',
@@ -142,7 +142,6 @@ export function MediaContent() {
 
       <APIheading name="Media Display" />
       <FlexTable
-        title="Queries"
         cells={[
           {
             prop: 'fullScreen',
@@ -175,7 +174,6 @@ export function MediaContent() {
 
       <APIheading name="Media Accessibility" />
       <FlexTable
-        title="Queries"
         cells={[
           {
             prop: 'darkColorScheme',
@@ -209,31 +207,33 @@ export function MediaContent() {
       <HR />
 
       <APIheading name="Single Value Queries" />
-      <Paragraph>Returns an equivalent of "@media (width: 768px)"</Paragraph>
+      <Paragraph>
+        Returns an equivalent of <Strong>"@media (width: 768px)"</Strong>
+      </Paragraph>
       <Syntax>{single}</Syntax>
 
       <HR />
 
       <APIheading name="Min Queries" />
       <Paragraph>
-        Returns an equivalent of "@media (min-width: 768px)"
+        Returns an equivalent of <Strong>"@media (min-width: 768px)"</Strong>
       </Paragraph>
       <Syntax>{min}</Syntax>
 
       <HR />
 
       <APIheading name="Max Queries" />
       <Paragraph>
-        Returns an equivalent of "@media (max-width: 768px)"
+        Returns an equivalent of <Strong>"@media (max-width: 768px)"</Strong>
       </Paragraph>
       <Syntax>{max}</Syntax>
 
       <HR />
 
       <APIheading name="Min And Max Queries" />
       <Paragraph>
-        Returns an equivalent of "@media (min-width: 768px) and (max-width:
-        1200px)"
+        Returns an equivalent of{' '}
+        <Strong>"@media (min-width: 768px) and (max-width: 1200px)"</Strong>
       </Paragraph>
       <Syntax>{minMax}</Syntax>
 
@@ -243,7 +243,7 @@ export function MediaContent() {
       <Paragraph>
         To formulate queries with the "and" operator, simply add your query to
         the same query object. Below will formulate a query equivalent to:
-        "@media screen and (min-width: 768px)"
+        <Strong>"@media screen and (min-width: 768px)"</Strong>
       </Paragraph>
       <Syntax>{and}</Syntax>
 
@@ -252,8 +252,10 @@ export function MediaContent() {
       <APIheading name="Querying with the 'OR' operator" />
       <Paragraph>
         To formulate queries with the "or" operator, simply add another query
-        object as argument. Below will formulate a query equivalent to: "@media
-        screen and (min-width: 768px), (orientation: landscape)"
+        object as argument. Below will formulate a query equivalent to:{' '}
+        <Strong>
+          "@media screen and (min-width: 768px), (orientation: landscape)"
+        </Strong>
       </Paragraph>
       <Syntax>{or}</Syntax>
     </>

docs/containers/Variants.tsx

@@ -21,7 +21,9 @@ export function VariantsContent() {
 
       <Paragraph>
         For occasions that you want to create components and include variants
-        with them, you can turn to the Generator library to do so.
+        with them, you can use the createStyledComponent utility function to do
+        so and after you can use the createBaseComponents to generate off of
+        your newly created base Styled Component if you wish to.
       </Paragraph>
 
       <Syntax>{generateWithVariants}</Syntax>

docs/containers/index.tsx

@@ -7,6 +7,7 @@ import { Generator } from './Generator';
 import { Imagery } from './Imagery';
 import { Media } from './Media';
 import { Variants } from './Variants';
+import { Customisation } from './Customisation';
 
 export const content = {
   Introduction,
@@ -17,5 +18,6 @@ export const content = {
   Generator,
   Imagery,
   Media,
-  Variants
+  Variants,
+  Customisation
 };