feat(components): Caption should now be passed as children to Legend/Example

Closes #1043

Note that backwards compatibility is ensured.

config/changelog.yaml

@@ -1,6 +1,11 @@
 2.16.3:
   date: Unreleased
 
+  Changed:
+    components:
+      - Caption should not be passed as children to Legend and Example components
+      See https://github.com/freesewing/freesewing/issues/1043
+
   Fixed:
     charlie:
       - Add `@freesewing/plugin-mirror` as peer dependency

packages/components/src/Example/index.js

@@ -29,6 +29,7 @@ const Example = ({
   pattern = 'examples',
   design = true,
   caption = '',
+  children=null,
   options = {},
   settings,
   part = '',
@@ -37,6 +38,8 @@ const Example = ({
   const [designMode, setDesignMode] = useState(false)
   const [focus, setFocus] = useState(null)
 
+  if (caption) console.log('Passing the caption prop to @freesewing/components/Legend is deprecated. See: https://github.com/freesewing/freesewing/issues/1043')
+
   const raiseEvent = (type, data) => {
     if (type === 'clearFocusAll') return setFocus(null)
     let f = {}
@@ -98,7 +101,7 @@ const Example = ({
         </div>
         <Draft {...patternProps} design={designMode} focus={focus} raiseEvent={raiseEvent} />
       </div>
-      <figcaption>{caption}</figcaption>
+      <figcaption>{caption || children}</figcaption>
       {designMode && (
         <div className="design">
           <Design

packages/components/src/Legend/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import LegendPattern from '@freesewing/legend'
 import Draft from '../Draft'
 
-const Legend = ({ caption = '', part = '' }) => {
+const Legend = ({ caption = false, part = '', children=null }) => {
   const patternProps = new LegendPattern({
     only: part,
     measurements: {
@@ -12,12 +12,14 @@ const Legend = ({ caption = '', part = '' }) => {
     .draft()
     .getRenderProps()
 
+  if (caption) console.log('Passing the caption prop to @freesewing/components/Legend is deprecated. See: https://github.com/freesewing/freesewing/issues/1043')
+
   return (
     <figure>
       <div className="shadow">
         <Draft {...patternProps} />
       </div>
-      <figcaption>{caption}</figcaption>
+      <figcaption>{caption || children}</figcaption>
     </figure>
   )
 }