✨ Updates to components

packages/components/src/Draft/Svg/index.js

@@ -8,12 +8,13 @@ const Svg = props => {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     xmlLang: props.language,
     viewBox: `0 0 ${props.width} ${props.height}`,
-    className: props.className
+    className: props.className,
+    style: props.style
   };
 
   if (!props.embed) {
-    attributes.width = props.width;
+    attributes.width = props.width + "mm";
-    attributes.height = props.height;
+    attributes.height = props.height + "mm";
   }
   if (props.design) attributes.className += " design";
 
@@ -31,7 +32,8 @@ Svg.defaultProps = {
   embed: true,
   design: false,
   language: "en",
-  className: "freesewing draft"
+  className: "freesewing draft",
+  style: {}
 };
 
 export default Svg;

packages/components/src/Draft/index.js

@@ -12,6 +12,7 @@ const Draft = props => (
     language={props.settings.locale}
     id={props.settings.idPrefix + "svg"}
     design={props.design}
+    style={props.style}
   >
     <Defs
       units={props.settings.units}
@@ -45,7 +46,8 @@ Draft.propTypes = {
 
 Draft.defaultProps = {
   design: false,
-  focus: false
+  focus: false,
+  style: {}
 };
 
 export default Draft;

packages/components/src/DraftConfigurator/DraftSettings/index.js

@@ -8,7 +8,7 @@ import DraftSettingPaperless from "../DraftSettingPaperless";
 import DraftSettingUnits from "../DraftSettingUnits";
 import DraftSettingLanguage from "../DraftSettingLanguage";
 import DraftSettingOnly from "../DraftSettingOnly";
-import DownIcon from "@material-ui/icons/KeyboardArrowDown";
+import RightIcon from "@material-ui/icons/KeyboardArrowRight";
 
 const DraftSettings = props => {
   const [expanded, setExpanded] = useState([]);
@@ -90,7 +90,7 @@ const DraftSettings = props => {
   };
 
   return (
-    <ul className="nav l2">
+    <ul className="config l2">
       {Object.keys(groups).map(group => {
         let open = true;
         if (expanded.indexOf(group) === -1) open = false;
@@ -102,14 +102,14 @@ const DraftSettings = props => {
               className={open ? "expanded" : "collapsed"}
               key={group + "-ghead"}
             >
-              <h5 onClick={() => toggleGroup(group)}>
+              <span onClick={() => toggleGroup(group)}>
-                <DownIcon
+                <RightIcon
                   className={
                     "icon-col-exp " + (open ? "expanded" : "collapsed")
                   }
                 />
                 <FormattedMessage id={"optiongroups." + group} />
-              </h5>
+              </span>
             </li>
             {children}
           </React.Fragment>

packages/components/src/DraftConfigurator/OptionGroup/index.js

@@ -66,14 +66,14 @@ const OptionGroup = props => {
           // Subgroup
           for (let subGroup of Object.keys(name)) {
             output.push(
-              <h5 key={subGroup + "-title"} className="subheading">
+              <span key={subGroup + "-title"} className="subheading">
                 <FormattedMessage id={"optiongroups." + subGroup} />
-              </h5>
+              </span>
             );
             let children = [];
             for (let option of name[subGroup])
               children.push(renderOption(option, true));
-            output.push(<ul className="nav l4">{children}</ul>);
+            output.push(<ul className="config l4">{children}</ul>);
           }
         } else output.push(renderOption(name));
 

packages/components/src/DraftConfigurator/OptionPreamble/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import IconButton from "@material-ui/core/IconButton";
-import DownIcon from "@material-ui/icons/KeyboardArrowDown";
+import RightIcon from "@material-ui/icons/KeyboardArrowRight";
 import ResetIcon from "@material-ui/icons/SettingsBackupRestore";
 import HelpIcon from "@material-ui/icons/Help";
 import { injectIntl } from "react-intl";
@@ -43,9 +43,9 @@ const OptionPreamble = props => {
     );
   return (
     <React.Fragment>
-      <h4 onClick={props.toggleExpanded} style={styles.container}>
+      <div onClick={props.toggleExpanded} style={styles.container}>
         <div style={styles.left}>
-          <DownIcon
+          <RightIcon
             className={
               "icon-col-exp " + (props.expanded ? "expanded" : "collapsed")
             }
@@ -53,7 +53,7 @@ const OptionPreamble = props => {
           {props.title}
         </div>
         <div style={styles.right}>{displayValue}</div>
-      </h4>
+      </div>
       <div
         className={props.expanded ? "col-exp expanded" : "col-exp collapsed"}
       >

packages/components/src/DraftConfigurator/PatternOptions/index.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import OptionGroup from "../OptionGroup";
 import { FormattedMessage } from "react-intl";
-import DownIcon from "@material-ui/icons/KeyboardArrowDown";
+import RightIcon from "@material-ui/icons/KeyboardArrowRight";
 
 const PatternOptions = props => {
   const [expanded, setExpanded] = useState([]);
@@ -21,7 +21,7 @@ const PatternOptions = props => {
     let children = null;
     if (expanded.indexOf(group) !== -1)
       children = (
-        <ul className="nav l3">
+        <ul className="config l3">
           <OptionGroup
             noDocs={props.noDocs}
             key={group + "-group"}
@@ -35,12 +35,12 @@ const PatternOptions = props => {
       );
     output.push(
       <li className={open ? "expanded" : "collapsed"} key={group + "-ghead"}>
-        <h5 onClick={() => toggleGroup(group)}>
+        <span onClick={() => toggleGroup(group)}>
-          <DownIcon
+          <RightIcon
             className={"icon-col-exp " + (open ? "expanded" : "collapsed")}
           />
           <FormattedMessage id={"optiongroups." + group} />
-        </h5>
+        </span>
         {children}
       </li>
     );
@@ -49,7 +49,7 @@ const PatternOptions = props => {
   };
 
   return (
-    <ul className="nav l2">
+    <ul className="config l2">
       {Object.keys(props.config.optionGroups).map(group => renderGroup(group))}
     </ul>
   );

packages/components/src/DraftConfigurator/index.js

@@ -8,11 +8,9 @@ const DraftConfigurator = props => {
   const [expanded, setExpanded] = useState([]);
 
   return (
-    <ul className="nav l1">
+    <ul className="config l1">
       <li>
-        <h4>
+        <FormattedMessage id="app.patternOptions" />
-          <FormattedMessage id="app.patternOptions" />
-        </h4>
         <PatternOptions
           noDocs={props.noDocs}
           config={props.config}
@@ -25,9 +23,7 @@ const DraftConfigurator = props => {
         />
       </li>
       <li>
-        <h4>
+        <FormattedMessage id="app.draftSettings" />
-          <FormattedMessage id="app.draftSettings" />
-        </h4>
         <DraftSettings
           noDocs={props.noDocs}
           config={props.config}