creates a docs-only <ColorComponent> to allow display of separate colors

artsy · Apr 16, 2019 · 5a864f4 · 5a864f4
1 parent c87246a
commit 5a864f4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/packages/palette-docs/content/docs/tokens/Color.mdx b/packages/palette-docs/content/docs/tokens/Color.mdx
@@ -6,15 +6,6 @@ See [Notion](https://www.notion.so/artsy/Color-a0c24896daf8433d9409aee2146ac267)
 for more detailed spec.
 
 <Box>
- {Object.entries(themeProps.colors).map(([colorCode, hex], index) => {
- return (
- <Box mb={3} key={index}>
- <Sans size="3" weight="medium">
- {colorCode}
- </Sans>
- <Sans size="3">{hex}</Sans>
- <Box width="100%" height={5} bg={colorCode} />
- </Box>
- )
- })}
+ <ColorComponent color="black100" hex="#000" />
+ <ColorComponent color="black80" hex="#333" />
 </Box>
diff --git a/packages/palette-docs/gatsby-config.js b/packages/palette-docs/gatsby-config.js
@@ -33,10 +33,12 @@ module.exports = {
  // gatsby-mdx. See https:/ChristopherBiscardi/gatsby-mdx/issues/243
  globalScope: `
  import * as Elements from "@artsy/palette"
+ import { ColorComponent } from "components/ColorComponent"
  import { CodeEditor, Playground } from "components/Playground"
  import { Toggle as Toggler } from 'react-powerplug'
  export default {
  CodeEditor,
+ ColorComponent,
  Playground,
  Toggler,
  ...Elements

diff --git a/packages/palette-docs/src/components/ColorComponent.jsx b/packages/palette-docs/src/components/ColorComponent.jsx
@@ -0,0 +1,14 @@
+import React from "react"
+import { Box, Sans } from "@artsy/palette"
+
+export const ColorComponent = props => {
+ return (
+ <Box mb={3}>
+ <Sans size="3" weight="medium">
+ {props.color}
+ </Sans>
+ <Sans size="3">{props.hex}</Sans>
+ <Box width="100%" height={5} bg={props.color} />
+ </Box>
+ )
+}