diff --git a/packages/react/components/Account/Set.mjs b/packages/react/components/Account/Set.mjs
index fad22c1e21b..843c6f7117e 100644
--- a/packages/react/components/Account/Set.mjs
+++ b/packages/react/components/Account/Set.mjs
@@ -76,8 +76,9 @@ const t = (input) => {
* @param {number} id - The ID of the measurements set to load
* @param {bool} publicOnly - FIXME
* @param {function} Link - An optional framework-specific Link component to use for client-side routing
+ * @param {object} measurementHelpProvider - A function that returns a url or action to show help for a specific measurement
*/
-export const Set = ({ id, publicOnly = false, Link = false }) => {
+export const Set = ({ id, publicOnly = false, Link = false, measurementHelpProvider = false }) => {
if (!Link) Link = WebLink
// Hooks
@@ -459,7 +460,7 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
title={}
key={m}
>
- {m}
+ {measurementTranslations[m]}
) : null
)}
@@ -491,6 +492,7 @@ export const Set = ({ id, publicOnly = false, Link = false }) => {
current={mset.measies[m]}
original={mset.measies[m]}
update={updateMeasies}
+ helpProvider={measurementHelpProvider}
/>
))}
diff --git a/packages/react/components/Account/shared.mjs b/packages/react/components/Account/shared.mjs
index d47fc7ca782..1f33c0be248 100644
--- a/packages/react/components/Account/shared.mjs
+++ b/packages/react/components/Account/shared.mjs
@@ -17,7 +17,7 @@ import {
/*
* A component to display a row of data
*/
-export const DisplayRow = ({ title, children, keyWidth = 'w-24' }) => (
+export const DisplayRow = ({ title, children, keyWidth = 'tw-w-24' }) => (
{
+export const MeasurementsEditor = ({ Design, update, state, helpProvider = false }) => {
/*
* Helper method to handle state updates for measurements
*/
@@ -34,6 +35,7 @@ export const MeasurementsEditor = ({ Design, update, state }) => {
original={state.settings.measurements?.[m]}
update={(m, newVal) => onUpdate(m, newVal)}
id={`edit-${m}`}
+ helpProvider={helpProvider}
/>
))}
diff --git a/packages/react/components/Editor/components/views/MeasurementsView.mjs b/packages/react/components/Editor/components/views/MeasurementsView.mjs
index f757f773bbb..9d0677bccd6 100644
--- a/packages/react/components/Editor/components/views/MeasurementsView.mjs
+++ b/packages/react/components/Editor/components/views/MeasurementsView.mjs
@@ -37,6 +37,7 @@ const iconClasses = {
* @param {Array} props.missingMeasurements - List of missing measurements for the current design
* @param {Object} props.state - The editor state object
* @param {Object} props.update - Helper object for updating the editor state
+ * @param {object} props.helpProvider - A function that takes a measurement and returns a url or action to show help for that measurement
* @return {Function} MeasurementsView - React component
*/
export const MeasurementsView = ({
@@ -46,6 +47,7 @@ export const MeasurementsView = ({
state,
update,
design,
+ measurementHelpProvider = false,
}) => {
/*
* If there is no view set, completing measurements will switch to the view picker
@@ -168,7 +170,10 @@ export const MeasurementsView = ({
You can manually set or override measurements below.
,
-
,
+
,
'edit',
])
diff --git a/packages/react/components/Editor/index.mjs b/packages/react/components/Editor/index.mjs
index d2f12079824..619eff996db 100644
--- a/packages/react/components/Editor/index.mjs
+++ b/packages/react/components/Editor/index.mjs
@@ -40,6 +40,7 @@ export const Editor = ({
preload = {},
setTitle = false,
localDesigns = {},
+ measurementHelpProvider = false,
}) => {
/*
* Bundle all designs
@@ -144,6 +145,7 @@ export const Editor = ({
{...extraProps}
{...{ view, update, designs, config: editorConfig }}
state={passDownState}
+ measurementHelpProvider={measurementHelpProvider}
/>
diff --git a/packages/react/components/Input/index.mjs b/packages/react/components/Input/index.mjs
index 0531300f974..eb9bf70357a 100644
--- a/packages/react/components/Input/index.mjs
+++ b/packages/react/components/Input/index.mjs
@@ -16,7 +16,7 @@ import { useDropzone } from 'react-dropzone'
import { useBackend } from '@freesewing/react/hooks/useBackend'
// Components
import { Link as WebLink } from '@freesewing/react/components/Link'
-import { TrashIcon, ResetIcon, UploadIcon } from '@freesewing/react/components/Icon'
+import { TrashIcon, ResetIcon, UploadIcon, HelpIcon } from '@freesewing/react/components/Icon'
import { ModalWrapper } from '@freesewing/react/components/Modal'
import { isDegreeMeasurement } from '@freesewing/config'
import { Tabs, Tab } from '@freesewing/react/components/Tab'
@@ -49,17 +49,17 @@ export const _Tab = ({
const HelpLink = ({ help, Link = false }) => {
if (!Link) Link = WebLink
- if (typeof helpLink === 'function')
+ if (typeof help === 'function')
return (
)
- if (typeof helpLink === 'string')
+ if (typeof help === 'string')
return (
-
+
)
@@ -77,14 +77,14 @@ export const FormControl = ({
labelBR = false, // Optional bottom-right label
forId = false, // ID of the for element we are wrapping
help = false, // An optional URL/method to link/show help/docs
- Link = false, // An optionan framework-specific link components
+ Link = false, // An optional framework-specific link components
}) => {
if (labelBR && !labelBL) labelBL =
const topLabelChildren = (
<>
{label ? (
-
+
{label}
) : (
@@ -541,6 +541,7 @@ export const MeasurementInput = ({
update, // The onChange handler
placeholder, // The placeholder content
id = '', // An id to tie the input to the label
+ helpProvider = false, // a function that provides a url or an action to display help for a measurement
}) => {
const isDegree = isDegreeMeasurement(m)
const units = imperial ? 'imperial' : 'metric'
@@ -604,6 +605,7 @@ export const MeasurementInput = ({