Styleguide site improvements

CHANGELOG.md

@@ -6,6 +6,11 @@
 
 - Can supply `brandColors` or `surfaceColors` from `theme` to apply background color and relevent text color
 
+### Styleguide site improvements ([#66](https://github.com/emortlock/tailwind-react-ui/pull/66))
+
+- Attached examples to component rather than top level module so they live alongside prop definitions
+- Added 'transparent effect' background to preview windows so background colours provided are more clear
+
 ## v0.8.0
 
 ### Added support for `prefix` as part of theme ([#60](https://github.com/emortlock/tailwind-react-ui/pull/60))

site/components/Wrapper.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Wrapper = ({ children }) => (
+  <div className="bg-checkerboard border overflow-auto">
+    <div className="p-4">{children}</div>
+  </div>
+)
+
+Wrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+Wrapper.displayName = 'Wrapper'
+
+export default Wrapper

site/index.js

@@ -1,11 +1,11 @@
 const fs = require('fs')
 const path = require('path')
-const glob = require('glob-all')
-const PurgecssPlugin = require('purgecss-webpack-plugin')
+// const glob = require('glob-all')
+// const PurgecssPlugin = require('purgecss-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const { version } = require('../package.json')
-const { getWhitelist, TailwindReactExtractor } = require('../tools')
+// const { getWhitelist, TailwindReactExtractor } = require('../tools')
 
 const isDev = process.env.NODE_ENV === 'development'
 const components = fs.readdirSync(
@@ -52,21 +52,21 @@ module.exports = {
             'readme.md',
           )
 
-          return (
-            fs.existsSync(readme) && {
-              name: `${component.charAt(0).toUpperCase()}${component.substring(
-                1,
-              )}`,
-              content: path.resolve(
-                __dirname,
-                '../src/components',
-                component,
-                'readme.md',
-              ),
-              components: [`./src/components/${component}/[A-Z]*.jsx`],
-              usageMode: 'expand',
-            }
-          )
+          return {
+            name: `${component.charAt(0).toUpperCase()}${component.substring(
+              1,
+            )}`,
+            content: fs.existsSync(readme)
+              ? path.resolve(
+                  __dirname,
+                  '../src/components',
+                  component,
+                  'readme.md',
+                )
+              : undefined,
+            components: [`./src/components/${component}/[A-Z]*.jsx`],
+            usageMode: 'expand',
+          }
         })
         .filter(section => !!section),
     },
@@ -98,6 +98,18 @@ module.exports = {
         overflow: 'scroll',
       },
     },
+    Playground: {
+      preview: {
+        position: 'relative',
+        display: 'block',
+        padding: '0',
+        border: 'none',
+        borderRadius: '0',
+      },
+    },
+  },
+  styleguideComponents: {
+    Wrapper: path.resolve(__dirname, './components/Wrapper.jsx'),
   },
   require: [
     '@babel/polyfill',

site/style/main.css

@@ -3,4 +3,27 @@
 /*! purgecss end ignore */
 
 @tailwind components;
+
 @tailwind utilities;
+
+.bg-checkerboard {
+  background-color: #fff;
+  background-image: linear-gradient(
+      45deg,
+      #f6f6f6 25%,
+      transparent 25%,
+      transparent 75%,
+      #f6f6f6 75%,
+      #f6f6f6
+    ),
+    linear-gradient(
+      45deg,
+      #f6f6f6 25%,
+      transparent 25%,
+      transparent 75%,
+      #f6f6f6 75%,
+      #f6f6f6
+    );
+  background-position: 0 0, 1rem 1rem;
+  background-size: 2rem 2rem;
+}

src/components/button/FillButton.md

@@ -0,0 +1,17 @@
+```jsx
+<List inline padding>
+  <FillButton brand="primary">Primary</FillButton>
+
+  <FillButton brand="secondary">Secondary</FillButton>
+
+  <FillButton brand="danger">Danger</FillButton>
+
+  <FillButton brand="warning">Warning</FillButton>
+
+  <FillButton brand="info">Info</FillButton>
+
+  <FillButton bg="purple" text="white">
+    Custom
+  </FillButton>
+</List>
+```

src/components/button/LinkButton.md

@@ -0,0 +1,15 @@
+```jsx
+<List inline padding>
+  <LinkButton brand="primary">Primary</LinkButton>
+
+  <LinkButton brand="secondary">Secondary</LinkButton>
+
+  <LinkButton brand="danger">Danger</LinkButton>
+
+  <LinkButton brand="warning">Warning</LinkButton>
+
+  <LinkButton brand="info">Info</LinkButton>
+
+  <LinkButton text="purple">Custom</LinkButton>
+</List>
+```

src/components/button/OutlineButton.md

@@ -0,0 +1,17 @@
+```jsx
+<List inline padding>
+  <OutlineButton brand="primary">Primary</OutlineButton>
+
+  <OutlineButton brand="secondary">Secondary</OutlineButton>
+
+  <OutlineButton brand="danger">Danger</OutlineButton>
+
+  <OutlineButton brand="warning">Warning</OutlineButton>
+
+  <OutlineButton brand="info">Info</OutlineButton>
+
+  <OutlineButton border="purple" text="white">
+    Custom
+  </OutlineButton>
+</List>
+```

src/components/button/TextButton.md

@@ -0,0 +1,15 @@
+```jsx
+<List inline padding>
+  <TextButton brand="primary">Primary</TextButton>
+
+  <TextButton brand="secondary">Secondary</TextButton>
+
+  <TextButton brand="danger">Danger</TextButton>
+
+  <TextButton brand="warning">Warning</TextButton>
+
+  <TextButton brand="info">Info</TextButton>
+
+  <TextButton text="purple">Custom</TextButton>
+</List>
+```

src/components/content/Article.md

@@ -0,0 +1,13 @@
+```jsx
+<Article>
+  <ContentTitle size={5}>Article Title</ContentTitle>
+  <Text is="p">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </Text>
+</Article>
+```

src/components/content/Aside.md

@@ -0,0 +1,13 @@
+```jsx
+<Aside>
+  <ContentTitle size={3}>Aside Title</ContentTitle>
+  <Text is="p">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </Text>
+</Aside>
+```

src/components/content/Section.md

@@ -0,0 +1,13 @@
+```jsx
+<Section>
+  <ContentTitle size={4}>Section Title</ContentTitle>
+  <Text is="p">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </Text>
+</Section>
+```

src/components/content/readme.md

@@ -1,51 +1,3 @@
 Selection of pretty simplistic wrappers around their related HTML5 elements, but provides `aria-labelledby` functionality if combined with the `ContentTitle` component (which is a proxy for [`<Title />`](#typography)).
 
 The sections will also remove any bottom margin from the final element (so long as it supports tailwind-react-ui props), to avoid increased spacing at the bottom of that section.
-
-### Article
-
-```jsx
-<Article>
-  <ContentTitle size={5}>Article Title</ContentTitle>
-  <Text is="p">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </Text>
-</Article>
-```
-
-### Section
-
-```jsx
-<Section>
-  <ContentTitle size={4}>Section Title</ContentTitle>
-  <Text is="p">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </Text>
-</Section>
-```
-
-### Aside
-
-```jsx
-<Aside>
-  <ContentTitle size={3}>Aside Title</ContentTitle>
-  <Text is="p">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </Text>
-</Aside>
-```

src/components/form/Checkbox.md

@@ -0,0 +1,6 @@
+```jsx
+<Checkbox checkbox name="option-input-3" value="unselected" label="Unselected" />
+<Checkbox checkbox name="option-input-3" value="selected" label="Selected" defaultChecked />
+<Checkbox checkbox name="option-input-4" value="unselected" label="Unselected disabled" disabled />
+<Checkbox checkbox name="option-input-4" value="selected" label="Selected disabled" disabled defaultChecked />
+```

src/components/form/CheckboxList.md

@@ -0,0 +1,23 @@
+```jsx
+<OptionField>
+  <OptionLabel>How should we contact you?</OptionLabel>
+  <CheckboxList name="contact">
+    <Checkbox value="email" label="Email" />
+    <Checkbox value="tel" label="Telephone" />
+    <Checkbox value="post" label="Post" />
+  </CheckboxList>
+</OptionField>
+```
+
+### Inline
+
+```jsx
+<OptionField>
+  <OptionLabel>Do you agree to us contacting you?</OptionLabel>
+  <CheckboxList inline name="agree">
+    <Checkbox value="yes" label="Yes" />
+    <Checkbox value="no" label="No" />
+    <Checkbox value="maybe" label="Maybe" />
+  </CheckboxList>
+</OptionField>
+```