✨ Added LineDrawing component

config/exceptions.yaml

@@ -20,6 +20,7 @@ packageJson:
       - "Example/*"
       - "Footer/*"
       - "Icon/*"
+      - "LineDrawing/*"
       - "Logo/*"
       - "Navbar/*"
       - "Ogol/*"

packages/components/LineDrawing/index.js

@@ -1,69 +0,0 @@
-/**
- * @freesewing/components/LineDrawing | v2.0.0-beta.42
- * A collection of React components for FreeSewing web UIs
- * (c) 2019 Joost De Cock <joost@decock.org> (https://github.com/joostdecock)
- * @license MIT
- */ 'use strict'
-function _interopDefault(a) {
-  return a && 'object' == typeof a && 'default' in a ? a['default'] : a
-}
-var React = _interopDefault(require('react')),
-  PropTypes = _interopDefault(require('prop-types')),
-  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',
-  patterns = {
-    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
-  },
-  LineDrawing = function(a) {
-    return React.createElement(
-      'svg',
-      {
-        style: a.style,
-        className: a.className,
-        xmlns: 'http://www.w3.org/2000/svg',
-        width: a.size,
-        height: a.size,
-        viewBox: a.viewBox
-      },
-      React.createElement('path', {
-        stroke: 'none',
-        fill: a.color ? a.color : 'currentColor',
-        d: patterns[a.pattern]
-      })
-    )
-  }
-;(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: !1,
-    style: {}
-  }),
-  (module.exports = LineDrawing)
-//# sourceMappingURL=index.js.map

packages/components/LineDrawing/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../src/LineDrawing/patterns.js","../src/LineDrawing/index.js"],"sourcesContent":["// FIXME: We need to actually draw these (as a single pathstring?)\n\nconst github =\n  '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'\n\nexport default {\n  aaron: github,\n  benjamin: github,\n  bent: github,\n  brian: github,\n  bruce: github,\n  carlita: github,\n  carlton: github,\n  cathrin: github,\n  florent: github,\n  huey: github,\n  hugo: github,\n  jaeger: github,\n  sandy: github,\n  shin: github,\n  simon: github,\n  sven: github,\n  tamiko: github,\n  theo: github,\n  trayvon: github,\n  wahid: github\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport patterns from './patterns'\n\nconst LineDrawing = props => {\n  return (\n    <svg\n      style={props.style}\n      className={props.className}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={props.size}\n      height={props.size}\n      viewBox={props.viewBox}\n    >\n      <path\n        stroke=\"none\"\n        fill={props.color ? props.color : 'currentColor'}\n        d={patterns[props.pattern]}\n      />\n    </svg>\n  )\n}\n\nLineDrawing.propTypes = {\n  size: PropTypes.number,\n  viewBox: PropTypes.string,\n  pattern: PropTypes.string,\n  style: PropTypes.object\n}\n\nLineDrawing.defaultProps = {\n  size: 24,\n  viewBox: '0 0 24 24',\n  className: '',\n  pattern: 'github',\n  color: false,\n  style: {}\n}\n\nexport default LineDrawing\n"],"names":["github","aaron","benjamin","bent","brian","bruce","carlita","carlton","cathrin","florent","huey","hugo","jaeger","sandy","shin","simon","sven","tamiko","theo","trayvon","wahid","LineDrawing","props","React","style","className","xmlns","width","size","height","viewBox","stroke","fill","color","d","patterns","pattern","propTypes","PropTypes","number","string","object","defaultProps"],"mappings":";;;;;oMAEMA,MAAM,CACV,otBAEa,CACbC,KAAK,CAAED,MADM,CAEbE,QAAQ,CAAEF,MAFG,CAGbG,IAAI,CAAEH,MAHO,CAIbI,KAAK,CAAEJ,MAJM,CAKbK,KAAK,CAAEL,MALM,CAMbM,OAAO,CAAEN,MANI,CAObO,OAAO,CAAEP,MAPI,CAQbQ,OAAO,CAAER,MARI,CASbS,OAAO,CAAET,MATI,CAUbU,IAAI,CAAEV,MAVO,CAWbW,IAAI,CAAEX,MAXO,CAYbY,MAAM,CAAEZ,MAZK,CAaba,KAAK,CAAEb,MAbM,CAcbc,IAAI,CAAEd,MAdO,CAebe,KAAK,CAAEf,MAfM,CAgBbgB,IAAI,CAAEhB,MAhBO,CAiBbiB,MAAM,CAAEjB,MAjBK,CAkBbkB,IAAI,CAAElB,MAlBO,CAmBbmB,OAAO,CAAEnB,MAnBI,CAoBboB,KAAK,CAAEpB,MApBM,ECDTqB,WAAW,CAAG,SAAAC,CAAA,CAAS,OAEzBC,CAAAA,mBAAA,MAAA,EACEC,KAAK,CAAEF,CAAK,CAACE,MACbC,SAAS,CAAEH,CAAK,CAACG,UACjBC,KAAK,CAAC,6BACNC,KAAK,CAAEL,CAAK,CAACM,KACbC,MAAM,CAAEP,CAAK,CAACM,KACdE,OAAO,CAAER,CAAK,CAACQ,QANjB,CAQEP,mBAAA,OAAA,EACEQ,MAAM,CAAC,OACPC,IAAI,CAAEV,CAAK,CAACW,KAANX,CAAcA,CAAK,CAACW,KAApBX,CAA4B,eAClCY,CAAC,CAAEC,QAAQ,CAACb,CAAK,CAACc,OAAP,EAHb,CARF,CAFJ,EAmBAf,WAAW,CAACgB,SAAZhB,CAAwB,CACtBO,IAAI,CAAEU,SAAS,CAACC,MADM,CAEtBT,OAAO,CAAEQ,SAAS,CAACE,MAFG,CAGtBJ,OAAO,CAAEE,SAAS,CAACE,MAHG,CAItBhB,KAAK,CAAEc,SAAS,CAACG,MAJK,EAOxBpB,WAAW,CAACqB,YAAZrB,CAA2B,CACzBO,IAAI,CAAE,EADmB,CAEzBE,OAAO,CAAE,WAFgB,CAGzBL,SAAS,CAAE,EAHc,CAIzBW,OAAO,CAAE,QAJgB,CAKzBH,KAAK,GALoB,CAMzBT,KAAK,CAAE,EANkB"}

packages/components/src/LineDrawing/index.js

@@ -6,17 +6,13 @@ const LineDrawing = props => {
   return (
     <svg
       style={props.style}
-      className={props.className}
+      className={'fs linedrawing ' + props.className}
       xmlns="http://www.w3.org/2000/svg"
       width={props.size}
       height={props.size}
-      viewBox={props.viewBox}
+      viewBox="0 0 270 270"
     >
-      <path
+      {patterns[props.pattern].map(el => el)}
-        stroke="none"
-        fill={props.color ? props.color : 'currentColor'}
-        d={patterns[props.pattern]}
-      />
     </svg>
   )
 }
@@ -29,10 +25,9 @@ LineDrawing.propTypes = {
 }
 
 LineDrawing.defaultProps = {
-  size: 24,
+  size: 64,
-  viewBox: '0 0 24 24',
   className: '',
-  pattern: 'github',
+  pattern: 'aaron',
   color: false,
   style: {}
 }

packages/css-theme/src/_components.scss

@@ -9,3 +9,4 @@
 @import "components/fab";
 @import "components/spinner";
 @import "components/box";
+@import "components/linedrawing";

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

@@ -0,0 +1,40 @@
+svg.fs.linedrawing {
+  path.primary {
+    stroke-width: 2;
+  }
+  path.secondary {
+    stroke-width: 1;
+  }
+  path.inside {
+    stroke-width: 2;
+  }
+}
+
+.theme-wrapper.light svg.fs.linedrawing {
+  path.primary {
+    stroke: $oc-gray-8;
+    fill: $oc-gray-3;
+  }
+  path.secondary {
+    stroke: $oc-gray-8;
+    fill: none;
+  }
+  path.inside, rect.inside {
+    stroke: $oc-gray-8;
+    fill: $oc-gray-5;
+  }
+}
+.theme-wrapper.dark svg.fs.linedrawing {
+  path.primary {
+    stroke: $oc-gray-5;
+    fill: $oc-gray-9;
+  }
+  path.secondary {
+    stroke: $oc-gray-5;
+    fill: none;
+  }
+  path.inside, rect.inside {
+    stroke: $oc-gray-5;
+    fill: $oc-gray-7;
+  }
+}