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/esm/index.js
CHANGED
|
@@ -5220,12 +5220,15 @@ const ChecklistTitle = styled(Typography)({
|
|
|
5220
5220
|
wordSpacing: '0px',
|
|
5221
5221
|
fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
|
|
5222
5222
|
});
|
|
5223
|
-
const ChecklistGrid = styled(Box)({
|
|
5223
|
+
const ChecklistGrid = styled(Box)(({ theme }) => ({
|
|
5224
5224
|
display: 'grid',
|
|
5225
5225
|
gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
|
|
5226
5226
|
columnGap: '8px',
|
|
5227
5227
|
rowGap: '0px',
|
|
5228
|
-
|
|
5228
|
+
[theme.breakpoints.up('md')]: {
|
|
5229
|
+
gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
|
|
5230
|
+
},
|
|
5231
|
+
}));
|
|
5229
5232
|
const ChecklistOptionLabel = styled(Typography)({
|
|
5230
5233
|
fontSize: '12px',
|
|
5231
5234
|
fontWeight: 400,
|
|
@@ -5308,6 +5311,11 @@ styled(Typography)(({ selected }) => ({
|
|
|
5308
5311
|
const HealthQuestionGroup = ({ description, bullets, question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, OptionButtonComponent, followUp, }) => {
|
|
5309
5312
|
const yesLabel = labels.yes || 'Yes';
|
|
5310
5313
|
const noLabel = labels.no || 'No';
|
|
5314
|
+
const bulletSplitIndex = Math.ceil((bullets?.length || 0) / 2);
|
|
5315
|
+
const bulletColumns = [
|
|
5316
|
+
bullets?.slice(0, bulletSplitIndex) || [],
|
|
5317
|
+
bullets?.slice(bulletSplitIndex) || [],
|
|
5318
|
+
];
|
|
5311
5319
|
return (jsxs(QuestionContainer, { sx: sx, children: [description && (jsx(Typography, { sx: {
|
|
5312
5320
|
fontSize: '14px',
|
|
5313
5321
|
fontWeight: 400,
|
|
@@ -5315,21 +5323,26 @@ const HealthQuestionGroup = ({ description, bullets, question, questionNumber, v
|
|
|
5315
5323
|
lineHeight: '20px',
|
|
5316
5324
|
wordSpacing: '0px',
|
|
5317
5325
|
fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
|
|
5318
|
-
}, children: description })), jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), Boolean(bullets?.length) && (jsx(
|
|
5319
|
-
|
|
5320
|
-
|
|
5321
|
-
|
|
5322
|
-
|
|
5323
|
-
}, children:
|
|
5324
|
-
|
|
5325
|
-
|
|
5326
|
-
|
|
5327
|
-
|
|
5328
|
-
|
|
5329
|
-
|
|
5330
|
-
|
|
5331
|
-
|
|
5332
|
-
|
|
5326
|
+
}, children: description })), jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), Boolean(bullets?.length) && (jsx(Box, { sx: {
|
|
5327
|
+
display: 'flex',
|
|
5328
|
+
flexDirection: { xs: 'column', md: 'row' },
|
|
5329
|
+
gap: '16px',
|
|
5330
|
+
width: '100%',
|
|
5331
|
+
}, children: bulletColumns.map((columnBullets, columnIndex) => (jsx(Box, { sx: { flex: '1 0 0', minWidth: 0 }, children: jsx("ul", { style: {
|
|
5332
|
+
margin: '0',
|
|
5333
|
+
paddingInlineStart: '20px',
|
|
5334
|
+
listStyleType: 'disc',
|
|
5335
|
+
listStylePosition: 'outside',
|
|
5336
|
+
}, children: columnBullets.map((bullet, bulletIndex) => (jsx("li", { style: {
|
|
5337
|
+
marginBottom: '2px',
|
|
5338
|
+
}, children: jsx(Typography, { component: "span", sx: {
|
|
5339
|
+
fontSize: '14px',
|
|
5340
|
+
fontWeight: 400,
|
|
5341
|
+
color: '#13131B',
|
|
5342
|
+
lineHeight: '20px',
|
|
5343
|
+
wordSpacing: '0px',
|
|
5344
|
+
fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
|
|
5345
|
+
}, children: bullet }) }, `${bullet}-${bulletIndex}`))) }) }, `column-${columnIndex}`))) })), jsx(OptionsContainer, { children: OptionButtonComponent ? (jsxs(Fragment, { children: [jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'yes', onClick: () => onChange('yes'), fullWidth: true, children: yesLabel }), jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'no', onClick: () => onChange('no'), fullWidth: true, children: noLabel })] })) : (jsxs(Fragment, { children: [jsx(OptionButton, { value: "yes", label: yesLabel, selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsx(OptionButton, { value: "no", label: noLabel, selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] })) }), followUp && value === 'yes' && (jsx(HealthConditionChecklist, { title: followUp.title, options: followUp.options, selected: followUp.selected, onToggle: followUp.onToggle, error: followUp.error })), error && (jsx(Typography, { sx: {
|
|
5333
5346
|
color: 'error.main',
|
|
5334
5347
|
fontSize: '12px',
|
|
5335
5348
|
mt: 0.5,
|
|
@@ -5603,9 +5616,9 @@ const MeasurementFieldsGrid = styled(Box)({
|
|
|
5603
5616
|
},
|
|
5604
5617
|
});
|
|
5605
5618
|
|
|
5606
|
-
const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, OptionButtonComponent, }) => {
|
|
5619
|
+
const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, OptionButtonComponent, children, }) => {
|
|
5607
5620
|
const Container = desktopGridLayout ? DesktopFormContainer$1 : FormContainer$1;
|
|
5608
|
-
return (jsx(Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsx(Container, { sx: sx, children: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [desktopGridLayout ? (jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxs(Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (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)))] }) }) }));
|
|
5621
|
+
return (jsx(Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsx(Container, { sx: sx, children: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [desktopGridLayout ? (jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxs(Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (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] }) }) }));
|
|
5609
5622
|
};
|
|
5610
5623
|
|
|
5611
5624
|
const FormContainer = styled(Box)({
|