igloo-d2c-components 1.1.8 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +32 -19
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +32 -19
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -6
package/dist/cjs/index.js
CHANGED
|
@@ -5255,12 +5255,15 @@ const ChecklistTitle = styles.styled(material.Typography)({
|
|
|
5255
5255
|
wordSpacing: '0px',
|
|
5256
5256
|
fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
|
|
5257
5257
|
});
|
|
5258
|
-
const ChecklistGrid = styles.styled(material.Box)({
|
|
5258
|
+
const ChecklistGrid = styles.styled(material.Box)(({ theme }) => ({
|
|
5259
5259
|
display: 'grid',
|
|
5260
5260
|
gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
|
|
5261
5261
|
columnGap: '8px',
|
|
5262
5262
|
rowGap: '0px',
|
|
5263
|
-
|
|
5263
|
+
[theme.breakpoints.up('md')]: {
|
|
5264
|
+
gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
|
|
5265
|
+
},
|
|
5266
|
+
}));
|
|
5264
5267
|
const ChecklistOptionLabel = styles.styled(material.Typography)({
|
|
5265
5268
|
fontSize: '12px',
|
|
5266
5269
|
fontWeight: 400,
|
|
@@ -5343,6 +5346,11 @@ styles.styled(material.Typography)(({ selected }) => ({
|
|
|
5343
5346
|
const HealthQuestionGroup = ({ description, bullets, question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, OptionButtonComponent, followUp, }) => {
|
|
5344
5347
|
const yesLabel = labels.yes || 'Yes';
|
|
5345
5348
|
const noLabel = labels.no || 'No';
|
|
5349
|
+
const bulletSplitIndex = Math.ceil((bullets?.length || 0) / 2);
|
|
5350
|
+
const bulletColumns = [
|
|
5351
|
+
bullets?.slice(0, bulletSplitIndex) || [],
|
|
5352
|
+
bullets?.slice(bulletSplitIndex) || [],
|
|
5353
|
+
];
|
|
5346
5354
|
return (jsxRuntime.jsxs(QuestionContainer, { sx: sx, children: [description && (jsxRuntime.jsx(material.Typography, { sx: {
|
|
5347
5355
|
fontSize: '14px',
|
|
5348
5356
|
fontWeight: 400,
|
|
@@ -5350,21 +5358,26 @@ const HealthQuestionGroup = ({ description, bullets, question, questionNumber, v
|
|
|
5350
5358
|
lineHeight: '20px',
|
|
5351
5359
|
wordSpacing: '0px',
|
|
5352
5360
|
fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
|
|
5353
|
-
}, children: description })), jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), Boolean(bullets?.length) && (jsxRuntime.jsx(
|
|
5354
|
-
|
|
5355
|
-
|
|
5356
|
-
|
|
5357
|
-
|
|
5358
|
-
}, children:
|
|
5359
|
-
|
|
5360
|
-
|
|
5361
|
-
|
|
5362
|
-
|
|
5363
|
-
|
|
5364
|
-
|
|
5365
|
-
|
|
5366
|
-
|
|
5367
|
-
|
|
5361
|
+
}, children: description })), jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), Boolean(bullets?.length) && (jsxRuntime.jsx(material.Box, { sx: {
|
|
5362
|
+
display: 'flex',
|
|
5363
|
+
flexDirection: { xs: 'column', md: 'row' },
|
|
5364
|
+
gap: '16px',
|
|
5365
|
+
width: '100%',
|
|
5366
|
+
}, children: bulletColumns.map((columnBullets, columnIndex) => (jsxRuntime.jsx(material.Box, { sx: { flex: '1 0 0', minWidth: 0 }, children: jsxRuntime.jsx("ul", { style: {
|
|
5367
|
+
margin: '0',
|
|
5368
|
+
paddingInlineStart: '20px',
|
|
5369
|
+
listStyleType: 'disc',
|
|
5370
|
+
listStylePosition: 'outside',
|
|
5371
|
+
}, children: columnBullets.map((bullet, bulletIndex) => (jsxRuntime.jsx("li", { style: {
|
|
5372
|
+
marginBottom: '2px',
|
|
5373
|
+
}, children: jsxRuntime.jsx(material.Typography, { component: "span", sx: {
|
|
5374
|
+
fontSize: '14px',
|
|
5375
|
+
fontWeight: 400,
|
|
5376
|
+
color: '#13131B',
|
|
5377
|
+
lineHeight: '20px',
|
|
5378
|
+
wordSpacing: '0px',
|
|
5379
|
+
fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
|
|
5380
|
+
}, children: bullet }) }, `${bullet}-${bulletIndex}`))) }) }, `column-${columnIndex}`))) })), jsxRuntime.jsx(OptionsContainer, { children: OptionButtonComponent ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'yes', onClick: () => onChange('yes'), fullWidth: true, children: yesLabel }), jsxRuntime.jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'no', onClick: () => onChange('no'), fullWidth: true, children: noLabel })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OptionButton, { value: "yes", label: yesLabel, selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsxRuntime.jsx(OptionButton, { value: "no", label: noLabel, selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] })) }), followUp && value === 'yes' && (jsxRuntime.jsx(HealthConditionChecklist, { title: followUp.title, options: followUp.options, selected: followUp.selected, onToggle: followUp.onToggle, error: followUp.error })), error && (jsxRuntime.jsx(material.Typography, { sx: {
|
|
5368
5381
|
color: 'error.main',
|
|
5369
5382
|
fontSize: '12px',
|
|
5370
5383
|
mt: 0.5,
|
|
@@ -5638,9 +5651,9 @@ const MeasurementFieldsGrid = styles.styled(material.Box)({
|
|
|
5638
5651
|
},
|
|
5639
5652
|
});
|
|
5640
5653
|
|
|
5641
|
-
const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, OptionButtonComponent, }) => {
|
|
5654
|
+
const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, OptionButtonComponent, children, }) => {
|
|
5642
5655
|
const Container = desktopGridLayout ? DesktopFormContainer$1 : FormContainer$1;
|
|
5643
|
-
return (jsxRuntime.jsx(material.Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsxRuntime.jsx(Container, { sx: sx, children: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [desktopGridLayout ? (jsxRuntime.jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsxRuntime.jsx(HealthQuestionGroup, { description: question.description, bullets: question.bullets, question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels, followUp: question.followUp, OptionButtonComponent: OptionButtonComponent }, question.name || index)))] }) }) }));
|
|
5656
|
+
return (jsxRuntime.jsx(material.Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsxRuntime.jsx(Container, { sx: sx, children: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [desktopGridLayout ? (jsxRuntime.jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsxRuntime.jsx(HealthQuestionGroup, { description: question.description, bullets: question.bullets, question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels, followUp: question.followUp, OptionButtonComponent: OptionButtonComponent }, question.name || index))), children] }) }) }));
|
|
5644
5657
|
};
|
|
5645
5658
|
|
|
5646
5659
|
const FormContainer = styles.styled(material.Box)({
|