🐛 Fixed display issue in SampleConfigurator

config/changelog.yaml

@@ -2,7 +2,9 @@ Unreleased:
   date:
   Added:
     i18n:
-      - Added translations for Penelope and Waralee
+      - Added translations for Penelope, Waralee, and Simone
+    simone:
+      - Added the Simone shirt pattern
     penelope:
       - Added the Penelope Pencil Skirt pattern by @woutervdub
     utils:
@@ -29,6 +31,8 @@ Unreleased:
         package has been deprecated. Please import our patterns individually.
   Removed:
   Fixed:
+    components:
+      - Fixed display of nested option in SampleConfigurator
     simon:
       - Fixed an issue where the store wasn't properly initialized causing hips and waist ease
         to be set incorrectly

packages/components/CHANGELOG.md

@@ -3,9 +3,9 @@
 
 ## Unreleased
 
-**Note:** Version bump only for package components
+### Changed
-
 
+ - Added Penelope and Waralee linedrawings
 ## 2.0.4 (2019-09-27)
 
 ### Added

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

@@ -1,47 +1,54 @@
-import React from "react";
+import React from 'react'
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types'
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage } from 'react-intl'
-import { injectIntl } from "react-intl";
+import { injectIntl } from 'react-intl'
 
 const OptionGroup = props => {
   return (
     <React.Fragment>
       {props.options.map(name => {
-        let output = [];
+        let output = []
-        if (typeof name === "object") {
+        if (typeof name === 'object') {
           // Subgroup
           for (let subGroup of Object.keys(name)) {
             output.push(
-              <h5 key={subGroup + "-title"} className="subheading">
+              <h5 key={subGroup + '-title'} className="subheading">
-                <FormattedMessage id={"optiongroups." + subGroup} />
+                <FormattedMessage id={'optiongroups.' + subGroup} />
               </h5>
-            );
+            )
-            let children = [];
+            let children = []
-            for (let option of name[subGroup]) children.push(<p>{option}</p>);
+            for (let option of name[subGroup])
-            output.push(<ul style={{ paddingLeft: "1rem" }}>{children}</ul>);
+              children.push(
+                <li>
+                  <a href="#logo" onClick={() => props.sampleOption(option)}>
+                    <FormattedMessage
+                      id={'options.' + props.config.name + '.' + option + '.title'}
+                    />
+                  </a>
+                </li>
+              )
+            output.push(<ul style={{ paddingLeft: '1rem' }}>{children}</ul>)
           }
         } else
           output.push(
             <li>
               <a href="#logo" onClick={() => props.sampleOption(name)}>
-                <FormattedMessage
+                <FormattedMessage id={'options.' + props.config.name + '.' + name + '.title'} />
-                  id={"options." + props.config.name + "." + name + ".title"}
-                />
               </a>
             </li>
-          );
+          )
 
-        return output;
+        return output
       })}
     </React.Fragment>
-  );
+  )
-};
+}
 
 OptionGroup.propTypes = {
   config: PropTypes.object.isRequired,
   options: PropTypes.array.isRequired
-};
+}
 
-OptionGroup.defaultProps = {};
+OptionGroup.defaultProps = {}
 
-export default injectIntl(OptionGroup);
+export default injectIntl(OptionGroup)

packages/components/src/SampleConfigurator/index.js

@@ -1,48 +1,48 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage } from 'react-intl'
-import PatternOptions from "./PatternOptions";
+import PatternOptions from './PatternOptions'
-import { withoutBreasts } from "@freesewing/models";
+import { withBreasts, withoutBreasts } from '@freesewing/models'
 
 const SampleConfigurator = props => {
-  const [expanded, setExpanded] = useState([]);
+  const [expanded, setExpanded] = useState([])
 
   const sampleOption = option => {
     props.updateGist(
       {
-        type: "option",
+        type: 'option',
         option
       },
-      "settings",
+      'settings',
-      "sample"
+      'sample'
-    );
+    )
-  };
+  }
 
   const sampleMeasurement = measurement => {
     props.updateGist(
       {
-        type: "measurement",
+        type: 'measurement',
         measurement
       },
-      "settings",
+      'settings',
-      "sample"
+      'sample'
-    );
+    )
-  };
+  }
 
   const sampleModels = models => {
     props.updateGist(
       {
-        type: "models",
+        type: 'models',
         models
       },
-      "settings",
+      'settings',
-      "sample"
+      'sample'
-    );
+    )
-  };
+  }
   let antMan = {
     ant: {},
     man: withoutBreasts.manSize42
-  };
+  }
-  for (let m in withoutBreasts.manSize42) antMan.ant[m] = antMan.man[m] / 10;
+  for (let m in withoutBreasts.manSize42) antMan.ant[m] = antMan.man[m] / 10
 
   return (
     <ul className="links">
@@ -50,21 +50,17 @@ const SampleConfigurator = props => {
         <h4>
           <FormattedMessage id="app.patternOptions" />
         </h4>
-        <PatternOptions
+        <PatternOptions config={props.config} gist={props.gist} sampleOption={sampleOption} />
-          config={props.config}
-          gist={props.gist}
-          sampleOption={sampleOption}
-        />
       </li>
       <li className="nodot">
         <h4>
           <FormattedMessage id="app.measurements" />
         </h4>
-        <ul style={{ paddingLeft: "1rem" }}>
+        <ul style={{ paddingLeft: '1rem' }}>
           {props.config.measurements.map(m => (
             <li key={m}>
               <a href="#logo" onClick={() => sampleMeasurement(m)}>
-                <FormattedMessage id={"measurements." + m} />
+                <FormattedMessage id={'measurements.' + m} />
               </a>
             </li>
           ))}
@@ -74,7 +70,12 @@ const SampleConfigurator = props => {
         <h4>
           <FormattedMessage id="app.models" />
         </h4>
-        <ul style={{ paddingLeft: "1rem" }}>
+        <ul style={{ paddingLeft: '1rem' }}>
+          <li>
+            <a href="#logo" onClick={() => sampleModels(withBreasts)}>
+              <FormattedMessage id="app.withBreasts" />
+            </a>
+          </li>
           <li>
             <a href="#logo" onClick={() => sampleModels(withoutBreasts)}>
               <FormattedMessage id="app.withoutBreasts" />
@@ -88,7 +89,7 @@ const SampleConfigurator = props => {
         </ul>
       </li>
     </ul>
-  );
+  )
-};
+}
 
-export default SampleConfigurator;
+export default SampleConfigurator