Add more docs

.storybook/main.ts

@@ -4,7 +4,6 @@ const config = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-styling',
     '@storybook/addon-interactions',
   ],
   framework: {

package.json

@@ -29,7 +29,6 @@
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
     "@storybook/addon-links": "^7.4.6",
-    "@storybook/addon-styling": "^1.3.7",
     "@storybook/blocks": "^7.4.6",
     "@storybook/react": "^7.4.6",
     "@storybook/react-webpack5": "^7.4.6",
@@ -45,7 +44,6 @@
     "@types/styled-system__css": "^5.0.17",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
-    "babel-loader": "^9.1.3",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-styled-components": "^2.1.4",
     "cheerio": "^1.0.0-rc.12",
@@ -86,7 +84,8 @@
   "resolutions": {
     "serialize-javascript": "^6.0.0",
     "node-fetch": "^2.6.7",
-    "kind-of": "^6.0.3"
+    "kind-of": "^6.0.3",
+    "jackspeak": "2.1.1"
   },
   "peerDependencies": {
     "react": ">= 17",

stories/Brand.mdx

@@ -0,0 +1,70 @@
+import LogoUses from './assets/ooni-logo-uses.svg'
+import MinimumSpacing from './assets/minimum-spacing.svg'
+import SubBrands from './assets/sub-brands.svg'
+import Donts from './assets/donts.svg'
+
+# Brand Styleguide
+
+The visual identity of software is an integral part of its user experience.
+Correctly using a consistent and attractive style is important to OONI
+because it helps users build trust in the work we do.
+
+We hope that this guide will help you create materials and answer
+potential questions you might have about the use of the OONI “brand”.
+
+## Logo
+
+
+### Logo uses
+
+The OONI logo consists of the Octopus icon and wordmark, as shown.
+
+<img src={LogoUses} alt="OONI Logo uses" />
+
+In situations that call for a monochrome logo, the canonical blue and pure
+black are acceptable. However, it is preferable to use the standard multi-color
+version of the logo when possible. Avoid using the logo in monochrome light
+blue or other colors apart the canonical blue.
+
+### Minimum spacing
+
+The logo should be surrounded by blank space at least as wide as the 'I'
+character. To measure this vertically, rotate the 'I' by 90 degrees.
+
+<img src={MinimumSpacing} alt="OONI Logo spacing" />
+
+### Sub brands
+
+For OONI projects we prefer to use sub-branding rather than have a logo on its
+own.
+
+The project name is written in Fira Sans Regular beneath the standard OONI
+logo, in the canonical blue.
+
+Depending on the length of the sub-brand, the font size might differ slightly.
+
+<img src={SubBrands} alt="OONI Sub-brands" />
+
+### Logo don'ts
+
+We love it when people show the OONI logo, however we kindly ask you to not use
+it in the following ways.
+
+<img src={SubBrands} alt="OONI Logo don'ts" />
+
+## Questions
+
+There is a reason we call this a style guide and not a set of style rules. We
+expect there to be situations that this guide does not cover, or where you find
+yourself needing needing to stretch the standards a bit.
+
+Please reach out to our Creative Lead when you encounter such cases. We
+will work with you to help you find a solution for your design problem that
+is consistent with the guide. Your feedback will also help us expand and
+refine the guide to help it better meet the OONI Community's needs.
+
+For any questions and inquiries you might have related to this styleguide,
+we encourage you to reach out to our [Creative
+Lead](mailto:[email protected]) or [join our slack
+channel](https://slack.openobservatory.org).
+We will try to help you find good answers!

stories/Colors.mdx

@@ -0,0 +1,243 @@
+import ColorPalette from './components/ColorPalette'
+import { theme, Flex, Box } from '../src'
+
+# Colors
+
+## Brand colors
+
+<Flex flexWrap="wrap">
+  <Box width={1/2}>
+  <ColorPalette
+    color={theme.colors.blue5}
+    name="OONI Blue (blue5)"
+  />
+  </Box>
+  <Box width={1/2}>
+  <ColorPalette
+    color={theme.colors.blue3}
+    name="Light Blue (blue3)"
+  />
+  </Box>
+</Flex>
+
+## Palette
+
+Our color palette is adapted from [Open Color](https://yeun.github.io/open-color/), an open-source color scheme. All hues apart from `blue` are taken as-is from Open Color. The blue shades are adapted to include OONI's primary (`#0588CB`) and secondary (`#5DB8FE`) color.
+
+Keep in mind when you are combining colors from different hues (for example for a data visualisation) be sure to pick ones that have some brightness variation (luminance).
+
+As a concrete example if you wanted to create a categorical data visualisation,
+you would want to pick `indigo5`, `yellow6`, `cyan7` (they have different number
+so different brightnesses too!) and should **not** pick `indigo5`, `yellow5`
+and `cyan5` (which all have the same brightness value and can appear very
+similar to color blind people). Keep it accessible.
+
+
+### Gray
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'gray'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Blue
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'blue'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+
+### Indigo
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'indigo'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Violet
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'violet'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Fuchsia
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'fuchsia'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Pink
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'pink'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Red
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'red'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Orange
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'orange'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Yellow
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'yellow'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Lime
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'lime'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Green
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'green'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Teal
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'teal'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>
+
+### Cyan
+
+<Flex flexWrap="wrap">
+  {Array.from(Array(10).keys()).map(n => {
+    const colorName = 'cyan'
+    return (
+      <Box width={1/2}>
+      <ColorPalette
+        color={theme.colors[`${colorName}${n}`]}
+        name={`${colorName} ${n}`}
+      />
+      </Box>
+    )
+  })}
+</Flex>

stories/GettingStarted.mdx

@@ -0,0 +1,37 @@
+# Getting Started
+
+## Developers
+
+The OONI design system is based on selection of carefully tuned [React.js](https://facebook.github.io/react/) components.
+
+If you want to start using the components inside of your design all you need to
+do is run:
+
+```
+npm install --save ooni-components
+```
+
+To use the ooni theme you will need to wrap the root of your application with
+the `<Provider />` by applying the OONI theme like this:
+
+```jsx
+import {
+  Provider,
+  Heading,
+  theme
+} from 'ooni-components'
+
+const App = props => (
+  <Provider theme={theme}>
+    <Heading>Hello world!</Heading>
+  </Provider>
+)
+```
+
+## Technological stack
+
+These are some of the awesome libraries we use:
+
+* [Styled Components](https://www.styled-components.com/)
+
+* [Styled System](http://jxnblk.com/styled-system/)