🐛 Fixed display issue in SampleConfigurator

packages/components/src/SampleConfigurator/index.js

@@ -1,48 +1,48 @@
-import React, { useState } from "react";
-import { FormattedMessage } from "react-intl";
-import PatternOptions from "./PatternOptions";
-import { withoutBreasts } from "@freesewing/models";
+import React, { useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+import PatternOptions from './PatternOptions'
+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",
-      "sample"
-    );
-  };
+      'settings',
+      'sample'
+    )
+  }
 
   const sampleMeasurement = measurement => {
     props.updateGist(
       {
-        type: "measurement",
+        type: 'measurement',
         measurement
       },
-      "settings",
-      "sample"
-    );
-  };
+      'settings',
+      'sample'
+    )
+  }
 
   const sampleModels = models => {
     props.updateGist(
       {
-        type: "models",
+        type: 'models',
         models
       },
-      "settings",
-      "sample"
-    );
-  };
+      'settings',
+      '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
-          config={props.config}
-          gist={props.gist}
-          sampleOption={sampleOption}
-        />
+        <PatternOptions 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