From 3fd0e71f19c9f6cd298c935ca52402c8a60fafd9 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Sun, 6 Jun 2021 18:46:38 +0200
Subject: [PATCH] feat(components): Caption should now be passed as children to
 Legend/Example

Closes #1043

Note that backwards compatibility is ensured.
---
 config/changelog.yaml                    | 5 +++++
 packages/components/src/Example/index.js | 5 ++++-
 packages/components/src/Legend/index.js  | 6 ++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/config/changelog.yaml b/config/changelog.yaml
index b4bf1bbe189..1f379bd6465 100644
--- a/config/changelog.yaml
+++ b/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
diff --git a/packages/components/src/Example/index.js b/packages/components/src/Example/index.js
index d1251e7663f..7c0e849cac0 100644
--- a/packages/components/src/Example/index.js
+++ b/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
diff --git a/packages/components/src/Legend/index.js b/packages/components/src/Legend/index.js
index 3324760ece6..0e3603a3b38 100644
--- a/packages/components/src/Legend/index.js
+++ b/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>
   )
 }