fix(components): Include snippets provided by theme plugin in Example component

Whereas most snippets are provided by build-time plugins that are
part of the plugin bundle, some of them are provided by the theme
plugin, which is a run-time plugin, and so we depend on the frontend
integration to make these available.

In the long(er) run, it might make more sense to move these to
another build-time plugin, but for the time being I've included
them into the Example component until we've clearly idendified
the ripple effects that moving them would have.

See #757 for follow-up of this.

config/changelog.yaml

@@ -2,6 +2,11 @@ Unreleased:
   date:
   Added:
   Changed:
+  Fixed:
+    components:
+      - Include basic themeing in Example component
+    shin:
+      - Removed unused lengthBonus option
 
 2.10.7:
   date: 2020-11-18

packages/components/src/Example/index.js

@@ -7,6 +7,7 @@ import Design from '../Workbench/Design'
 import IconButton from '@material-ui/core/IconButton'
 import ResetIcon from '@material-ui/icons/SettingsBackupRestore'
 import Switch from '@material-ui/core/Switch'
+import theme from './theme'
 
 const Example = ({
   pattern = 'examples',
@@ -56,7 +57,7 @@ const Example = ({
     ...settings
   }
   if (part !== '') settings.only = [part]
-  const patternInstance = new patterns[pattern](settings)
+  const patternInstance = new patterns[pattern](settings).use(theme)
 
   if (sample) patternInstance.sample()
   else patternInstance.draft()

packages/components/src/Example/theme.js

@@ -0,0 +1,53 @@
+const notch = `
+<g id="notch">
+  <circle cy="0" cx="0" r="1.4" class="inner" />
+  <circle cy="0" cx="0" r="2.8" class="outer" />
+</g>
+<g id="bnotch">
+  <path d="M -1.1 -1.1 L 1.1 1.1 M 1.1 -1.1 L -1.1 1.1" class="cross" />
+  <circle cy="0" cx="0" r="2.8" class="outer" />
+</g>`
+const button = `
+<g id="button">
+  <circle cx="0" cy="0" r="3.4" class="btn" />
+  <circle cx="-1" cy="-1" r="0.5" class="hole" />
+  <circle cx="1" cy="-1" r="0.5" class="hole" />
+  <circle cx="1" cy="1" r="0.5" class="hole" />
+  <circle cx="-1" cy="1" r="0.5" class="hole" />
+</g>`
+const buttonhole = `
+<g id="buttonhole">
+  <path class="end" d="M -1,-5 L 1,-5 L 1,5 L -1,5 z" />
+  <path class="side" d="M -1,-5 L 1,-5 L 1,-4 L -1,-4 z M -1,5 L 1,5 L 1,4 L -1,4 z" />
+</g>`
+const snaps = `
+<radialGradient id="snap-stud-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+  <stop offset="30%" style="stop-color:rgb(235,235,235); stop-opacity:1"/>
+  <stop offset="80%" style="stop-color:rgb(100,100,100);stop-opacity:1" />
+</radialGradient>
+<g id="snap-stud">
+  <circle id="snap-stud-circle-edge" cx="0" cy="0" r="3.4" style="stroke:#666;fill:#dddddd;stroke-width:0.3;" />
+  <circle id="snap-stud-circle-middle" cx="0" cy="0" r="1.8" style="stroke:none;fill:url(#snap-stud-grad);"/>
+  <path style="fill:none;stroke:#666; stroke-width:0.2;" d="M -2,0 L -3,0 M 2,0 L 3,0 M 0,2 L 0,3 M 0,-2 L 0,-3 M 1.5,1.5 L 2.1,2.1 M -1.5,1.5 L -2.1,2.1 M -1.5,-1.5 L -2.1,-2.1 M 1.5,-1.5 L 2.1,-2.1" id="snap-stud-lines"/>
+</g>
+<g id="snap-socket">
+  <circle id="snap-socket-circle-edge" cx="0" cy="0" r="3.4" style="stroke:#666;fill:#bbbbbb;stroke-width:0.3;"/>
+  <circle id="snap-socket-circle-middle" cx="0" cy="0" r="2" style="stroke:#666;fill:#dddddd; stroke-width:0.4;"/>
+  <path style="fill:none;stroke:#666; stroke-width:0.5;" d="M -1.7,-1 L -1.7,1 M 1.7,-1 L 1.7,1" id="snap-socket-lines" />
+</g>`
+
+const version = '0.0.1'
+
+export default {
+  name: 'example-theme',
+  version,
+  hooks: {
+    preRender: function (svg) {
+      if (svg.attributes.get('freesewing:example-theme') === false) {
+        svg.attributes.set('class', 'freesewing example')
+        svg.defs += notch + button + buttonhole + snaps
+        svg.attributes.add('freesewing:example-theme', version)
+      }
+    }
+  }
+}