✨ Hiding advanced options by default in DraftConfigurator

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

@@ -0,0 +1,4 @@
+import React from 'react'
+import PatternOptionBool from '../PatternOptionBool'
+
+export default props => <PatternOptionBool {...props} name="advanced" />

packages/components/src/DraftConfigurator/DraftSettingAdvanced/stories.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Sa from '.'
+
+const props = {
+  raiseEvent: (type, data) => console.log(`Action of type ${type} triggered, data passed is`, data),
+  updateValue: (name, value) => console.log(`Updated setting ${name}, value is now: ${value}`),
+  name: 'sa',
+  dflt: 'dflt',
+  title: 'Seam allowance',
+  desc:
+    "This is the seam allowance description. I'm wrapped in a p tag. This component only sets the CSS class on a non-default value. It's up to you to supply the CSS to style it.",
+  labels: {
+    none: 'No seam allowance',
+    dflt: 'Standard seam allowance',
+    custom: 'Custom seam allowance'
+  }
+}
+
+storiesOf('Low level/DraftSettingSa', module)
+  .add('Metric', () => <Sa {...props} units="metric" />)
+  .add('Imperial', () => <Sa {...props} units="imperial" />)

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

@@ -1,51 +1,50 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types'
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage } from 'react-intl'
-import DraftSettingSa from "../DraftSettingSa";
+import DraftSettingSa from '../DraftSettingSa'
-import DraftSettingMargin from "../DraftSettingMargin";
+import DraftSettingMargin from '../DraftSettingMargin'
-import DraftSettingComplete from "../DraftSettingComplete";
+import DraftSettingComplete from '../DraftSettingComplete'
-import DraftSettingPaperless from "../DraftSettingPaperless";
+import DraftSettingPaperless from '../DraftSettingPaperless'
-import DraftSettingUnits from "../DraftSettingUnits";
+import DraftSettingAdvanced from '../DraftSettingAdvanced'
-import DraftSettingLanguage from "../DraftSettingLanguage";
+import DraftSettingUnits from '../DraftSettingUnits'
-import DraftSettingOnly from "../DraftSettingOnly";
+import DraftSettingLanguage from '../DraftSettingLanguage'
-import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import DraftSettingOnly from '../DraftSettingOnly'
+import RightIcon from '@material-ui/icons/KeyboardArrowRight'
 
 const DraftSettings = props => {
-  const [expanded, setExpanded] = useState([]);
+  const [expanded, setExpanded] = useState([])
   const toggleGroup = group => {
-    let shown = expanded.slice(0);
+    let shown = expanded.slice(0)
-    let index = shown.indexOf(group);
+    let index = shown.indexOf(group)
-    if (index === -1) shown.push(group);
+    if (index === -1) shown.push(group)
-    else shown.splice(index, 1);
+    else shown.splice(index, 1)
-    setExpanded(shown);
+    setExpanded(shown)
-  };
+  }
   const getDefault = setting => {
-    if (props.recipe && typeof props.recipe.settings[setting] !== "undefined")
+    if (props.recipe && typeof props.recipe.settings[setting] !== 'undefined')
-      return props.recipe.settings[setting];
+      return props.recipe.settings[setting]
     switch (setting) {
-      case "sa":
+      case 'sa':
-        return 10;
+        return 10
-      case "only":
+      case 'only':
-        return "dflt";
+        return 'dflt'
-      case "complete":
+      case 'complete':
-        return true;
+        return true
-      case "margin":
+      case 'margin':
-        return 2;
+        return 2
-      case "units":
+      case 'units':
-        return props.units;
+        return props.units
       default:
-        return false;
+        return false
     }
-  };
+  }
 
-  let noyes = [
+  let noyes = [<FormattedMessage id="app.no" />, <FormattedMessage id="app.yes" />]
-    <FormattedMessage id="app.no" />,
+  let hideshow = [<FormattedMessage id="app.hide" />, <FormattedMessage id="app.show" />]
-    <FormattedMessage id="app.yes" />
-  ];
   let units = {
     metric: <FormattedMessage id="app.metricUnits" />,
     imperial: <FormattedMessage id="app.imperialUnits" />
-  };
+  }
   const addProps = setting => {
     const labels = {
       sa: {
@@ -58,8 +57,9 @@ const DraftSettings = props => {
         custom: <FormattedMessage id="app.custom" />
       },
       paperless: noyes,
-      complete: noyes
+      advanced: hideshow,
-    };
+      complete: hideshow
+    }
     let childProps = {
       raiseEvent: props.raiseEvent,
       updateValue: props.updateValue,
@@ -69,80 +69,74 @@ const DraftSettings = props => {
       labels: labels[setting],
       noDocs: props.noDocs,
       dflt: getDefault(setting)
-    };
+    }
-    childProps.title = (
+    childProps.title = <FormattedMessage id={'settings.' + setting + '.title'} />
-      <FormattedMessage id={"settings." + setting + ".title"} />
+    childProps.desc = <FormattedMessage id={'settings.' + setting + '.description'} />
-    );
+    if (setting === 'only') {
-    childProps.desc = (
+      childProps.customDflt = []
-      <FormattedMessage id={"settings." + setting + ".description"} />
+      childProps.parts = {}
-    );
-    if (setting === "only") {
-      childProps.customDflt = [];
-      childProps.parts = {};
       if (props.config.draftOrder) {
         for (let part of props.config.draftOrder)
-          childProps.parts[part] = <FormattedMessage id={"parts." + part} />;
+          childProps.parts[part] = <FormattedMessage id={'parts.' + part} />
       }
     }
     if (
-      typeof props.gist !== "undefined" &&
+      typeof props.gist !== 'undefined' &&
-      typeof props.gist.settings !== "undefined" &&
+      typeof props.gist.settings !== 'undefined' &&
-      typeof props.gist.settings[setting] !== "undefined"
+      typeof props.gist.settings[setting] !== 'undefined'
     )
-      childProps.value = props.gist.settings[setting];
+      childProps.value = props.gist.settings[setting]
-    else childProps.value = null;
+    else childProps.value = null
 
-    return childProps;
+    return childProps
-  };
+  }
 
   let groups = {
-    preferences: [
-      <DraftSettingSa {...addProps("sa")} />,
-      <DraftSettingPaperless {...addProps("paperless")} />,
-      <DraftSettingComplete {...addProps("complete")} />
-    ],
     advanced: [
-      <DraftSettingOnly {...addProps("only")} />,
+      <DraftSettingLanguage {...addProps('locale')} />,
-      <DraftSettingMargin {...addProps("margin")} />,
+      <DraftSettingUnits {...addProps('units')} list={units} />,
-      <DraftSettingUnits {...addProps("units")} list={units} />,
+      <DraftSettingComplete {...addProps('complete')} />,
-      <DraftSettingLanguage {...addProps("locale")} />
+      <DraftSettingMargin {...addProps('margin')} />,
+      <DraftSettingOnly {...addProps('only')} />
     ]
-  };
+  }
 
   return (
-    <ul className="config l2">
+    <React.Fragment>
-      {Object.keys(groups).map(group => {
+      <ul className="config l2 nogroups">
-        let open = true;
+        <DraftSettingSa {...addProps('sa')} />
-        if (expanded.indexOf(group) === -1) open = false;
+        <DraftSettingPaperless {...addProps('paperless')} />
-        let children = null;
+        <DraftSettingAdvanced {...addProps('advanced')} />
-        if (open) children = groups[group].map(component => component);
+      </ul>
-        return (
+      {props.gist.settings.advanced ? (
-          <React.Fragment key={group}>
+        <ul className="config l2">
-            <li
+          {Object.keys(groups).map(group => {
-              className={open ? "expanded" : "collapsed"}
+            let open = true
-              key={group + "-ghead"}
+            if (expanded.indexOf(group) === -1) open = false
-            >
+            let children = null
-              <span onClick={() => toggleGroup(group)}>
+            if (open) children = groups[group].map(component => component)
-                <RightIcon
+            return (
-                  className={
+              <React.Fragment key={group}>
-                    "icon-col-exp " + (open ? "expanded" : "collapsed")
+                <li className={open ? 'expanded' : 'collapsed'} key={group + '-ghead'}>
-                  }
+                  <span onClick={() => toggleGroup(group)}>
-                />
+                    <RightIcon className={'icon-col-exp ' + (open ? 'expanded' : 'collapsed')} />
-                <FormattedMessage id={"optiongroups." + group} />
+                    <FormattedMessage id={'optiongroups.' + group} />
-              </span>
+                  </span>
-            </li>
+                </li>
-            {children}
+                {children}
-          </React.Fragment>
+              </React.Fragment>
-        );
+            )
-      })}
+          })}
-    </ul>
+        </ul>
-  );
+      ) : null}
-};
+    </React.Fragment>
+  )
+}
 
 DraftSettings.propTypes = {
   config: PropTypes.object.isRequired
-};
+}
 
-DraftSettings.defaultProps = {};
+DraftSettings.defaultProps = {}
 
-export default DraftSettings;
+export default DraftSettings

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

@@ -1,30 +1,30 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types'
-import OptionGroup from "../OptionGroup";
+import OptionGroup from '../OptionGroup'
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage } from 'react-intl'
-import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import RightIcon from '@material-ui/icons/KeyboardArrowRight'
 
 const PatternOptions = props => {
-  const [expanded, setExpanded] = useState([]);
+  const [expanded, setExpanded] = useState([])
   const toggleGroup = group => {
-    let shown = expanded.slice(0);
+    let shown = expanded.slice(0)
-    let index = shown.indexOf(group);
+    let index = shown.indexOf(group)
-    if (index === -1) shown.push(group);
+    if (index === -1) shown.push(group)
-    else shown.splice(index, 1);
+    else shown.splice(index, 1)
-    setExpanded(shown);
+    setExpanded(shown)
-  };
+  }
 
   const renderGroup = group => {
-    let open = true;
+    let open = true
-    if (expanded.indexOf(group) === -1) open = false;
+    if (expanded.indexOf(group) === -1) open = false
-    let output = [];
+    let output = []
-    let children = null;
+    let children = null
     if (expanded.indexOf(group) !== -1)
       children = (
         <ul className="config l3">
           <OptionGroup
             noDocs={props.noDocs}
-            key={group + "-group"}
+            key={group + '-group'}
             units={props.units}
             config={props.config}
             gist={props.gist}
@@ -34,34 +34,35 @@ const PatternOptions = props => {
             raiseEvent={props.raiseEvent}
           />
         </ul>
-      );
+      )
     output.push(
-      <li className={open ? "expanded" : "collapsed"} key={group + "-ghead"}>
+      <li className={open ? 'expanded' : 'collapsed'} key={group + '-ghead'}>
         <span onClick={() => toggleGroup(group)}>
-          <RightIcon
+          <RightIcon className={'icon-col-exp ' + (open ? 'expanded' : 'collapsed')} />
-            className={"icon-col-exp " + (open ? "expanded" : "collapsed")}
+          <FormattedMessage id={'optiongroups.' + group} />
-          />
-          <FormattedMessage id={"optiongroups." + group} />
         </span>
         {children}
       </li>
-    );
+    )
 
-    return output;
+    return output
-  };
+  }
 
-  return (
+  const children = []
-    <ul className="config l2">
+  for (let group in props.config.optionGroups) {
-      {Object.keys(props.config.optionGroups).map(group => renderGroup(group))}
+    if (props.gist.settings.advanced || group !== 'advanced') {
-    </ul>
+      children.push(renderGroup(group))
-  );
+    }
-};
+  }
+
+  return <ul className="config l2">{children}</ul>
+}
 
 PatternOptions.propTypes = {
   config: PropTypes.object.isRequired,
   raiseEvent: PropTypes.func
-};
+}
 
-PatternOptions.defaultProps = {};
+PatternOptions.defaultProps = {}
 
-export default PatternOptions;
+export default PatternOptions

packages/components/src/DraftConfigurator/index.js

@@ -25,7 +25,7 @@ const DraftConfigurator = props => {
       </li>
       <li>
         <span>
-          <FormattedMessage id="app.draftSettings" />
+          <FormattedMessage id="app.settings" />
         </span>
         <DraftSettings
           noDocs={props.noDocs}

packages/i18n/src/locales/en/app.yaml

@@ -262,3 +262,5 @@ whatYouNeed: What you need
 fabricOptions: Fabric options
 cutting: Cutting
 instructions: Instructions
+hide: Hide
+show: Show

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

@@ -1,3 +1,7 @@
+advanced:
+  title: Advanced
+  description: Controls whether or not to display advanced settings and pattern options
+
 paperless:
   title: Paperless
   description: Drafts a pattern with all dimensions included so you can transfer it on fabric or another medium without the need to print