🚧 Added LineDrawing components. Needs linedrawings

packages/components/src/LineDrawing/index.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import patterns from './patterns'
+
+const LineDrawing = props => {
+  return (
+    <svg
+      style={props.style}
+      className={props.className}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size}
+      height={props.size}
+      viewBox={props.viewBox}
+    >
+      <path
+        stroke="none"
+        fill={props.color ? props.color : 'currentColor'}
+        d={patterns[props.pattern]}
+      />
+    </svg>
+  )
+}
+
+LineDrawing.propTypes = {
+  size: PropTypes.number,
+  viewBox: PropTypes.string,
+  pattern: PropTypes.string,
+  style: PropTypes.object
+}
+
+LineDrawing.defaultProps = {
+  size: 24,
+  viewBox: '0 0 24 24',
+  className: '',
+  pattern: 'github',
+  color: false,
+  style: {}
+}
+
+export default LineDrawing

packages/components/src/LineDrawing/patterns.js

@@ -0,0 +1,27 @@
+// FIXME: We need to actually draw these (as a single pathstring?)
+
+const github =
+  'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'
+
+export default {
+  aaron: github,
+  benjamin: github,
+  bent: github,
+  brian: github,
+  bruce: github,
+  carlita: github,
+  carlton: github,
+  cathrin: github,
+  florent: github,
+  huey: github,
+  hugo: github,
+  jaeger: github,
+  sandy: github,
+  shin: github,
+  simon: github,
+  sven: github,
+  tamiko: github,
+  theo: github,
+  trayvon: github,
+  wahid: github
+}

packages/components/src/index.js

@@ -6,6 +6,7 @@ export default [
   'Example',
   'Footer',
   'Icon',
+  'LineDrawing',
   'Logo',
   'Navbar',
   'Ogol',

packages/css-theme/src/_components.scss

@@ -8,3 +8,4 @@
 @import "components/example";
 @import "components/fab";
 @import "components/spinner";
+@import "components/box";

packages/css-theme/src/components/_box.scss

@@ -0,0 +1,21 @@
+.box {
+  padding: 0.5rem;
+  margin: 0 0 1rem 0;
+  border-radius: 4px;
+}
+.theme-wrapper.light .box {
+  border: 1px solid #0003;
+  background: #fff6;
+}
+.theme-wrapper.light .box:hover {
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
+}
+
+.theme-wrapper.dark .box {
+  border: 1px solid #fff3;
+  background: #fff1;
+}
+.theme-wrapper.dark .box:hover {
+  border: 1px solid #fff4;
+  background: #fff2;
+}

packages/i18n/src/locales/en/filter.yml

@@ -6,3 +6,9 @@ code: Code
 design: Design
 difficulty: Difficulty
 resetFilter: Reset filter
+menswear: Menswear
+womenswear: Womenswear
+accessories: Accessories
+block: Block
+pattern: Pattern
+