Skip to content

Commit 49beefc

Browse files
tammy-a11ytammy-a11y
committed
SDK-R Fixed text alignment in selectable card component
1 parent f60b361 commit 49beefc

File tree

1 file changed

+134
-120
lines changed

1 file changed

+134
-120
lines changed

‎packages/react-sdk-components/src/components/field/SelectableCard/SelectableCard.tsx‎

Lines changed: 134 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -37,137 +37,151 @@ export default function SelectableCard(props) {
3737

3838
return (
3939
<>
40-
{(cardDataSource || []).map(item => {
41-
const resolvedFields = resolveReferenceFields(item, hideFieldLabels, recordKey, pConn);
40+
{(() => {
41+
const items = cardDataSource || [];
42+
const colCount = items.length >= 3 ? 3 : items.length;
43+
return (
44+
<div style={{ display: 'grid', gridTemplateColumns: `repeat(${colCount}, 1fr)`, gap: '16px' }}>
45+
{items.map(item => {
46+
const resolvedFields = resolveReferenceFields(item, hideFieldLabels, recordKey, pConn);
4247

43-
const commonProps = {
44-
id: item[recordKey],
45-
key: item[recordKey],
46-
fields: resolvedFields,
47-
label: item[cardLabel]
48-
};
48+
const commonProps = {
49+
id: item[recordKey],
50+
key: item[recordKey],
51+
fields: resolvedFields,
52+
label: item[cardLabel]
53+
};
4954

50-
const image = item[imageField]
51-
? {
52-
src: item[imageField],
53-
alt: showImageDescription && imageDescriptionKey ? item[imageDescriptionKey] : '',
54-
style: { width: imageSize, objectPosition: imagePosition }
55-
}
56-
: undefined;
55+
const image = item[imageField]
56+
? {
57+
src: item[imageField],
58+
alt: showImageDescription && imageDescriptionKey ? item[imageDescriptionKey] : '',
59+
style: { width: imageSize, objectPosition: imagePosition }
60+
}
61+
: undefined;
5762

58-
const cardContent = (
59-
<Card className={className} style={{ display: 'flex' }} data-testid={testId}>
60-
{image && <img src={image.src} alt={image.alt} style={{ width: '100px' }} />}
61-
<CardContent>
62-
<Typography variant='body1'>{item[cardLabel]}</Typography>
63-
{commonProps.fields.map((field, index) => (
64-
<Typography key={index} variant='body2'>
65-
{field.value}
66-
</Typography>
67-
))}
68-
</CardContent>
69-
</Card>
70-
);
71-
72-
if (displayMode === 'DISPLAY_ONLY') {
73-
return cardContent;
74-
}
63+
const cardContent = (
64+
<Card className={className} style={{ display: 'flex', width: '100%' }} data-testid={testId}>
65+
{image && <img src={image.src} alt={image.alt} style={{ width: '100px' }} />}
66+
<CardContent>
67+
<Typography variant='body1'>{item[cardLabel]}</Typography>
68+
{commonProps.fields.map((field, index) => (
69+
<Typography key={index} variant='body2'>
70+
{field.value}
71+
</Typography>
72+
))}
73+
</CardContent>
74+
</Card>
75+
);
7576

76-
const component = (
77-
<div key={item[recordKey]} style={{ paddingTop: '15px' }}>
78-
<Card className={className} style={{ display: 'flex', flexDirection: 'column', height: '100%' }} data-testid={testId}>
79-
<CardContent
80-
style={{
81-
...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { display: 'flex', height: '100%' }),
82-
...(imagePosition === 'inline-end' && { flexDirection: 'row-reverse' })
83-
}}
84-
>
85-
<div
86-
style={{
87-
...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '40%' })
88-
}}
89-
>
90-
{image && (
91-
<img
92-
src={image.src}
93-
alt={image.alt}
94-
style={{
95-
width: '100%',
96-
backgroundColor: 'rgb(233, 238, 243)',
97-
aspectRatio: '16 / 9',
98-
maxHeight: '100%',
99-
height: '100%',
100-
objectFit: 'contain',
101-
maxWidth: '100%'
102-
}}
103-
/>
104-
)}
105-
</div>
106-
<div
107-
style={{
108-
...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '60%' })
109-
}}
110-
>
111-
{type === 'radio' ? (
112-
<FormControlLabel
113-
control={
114-
<Radio
115-
value={item[recordKey]}
116-
checked={radioBtnValue === item[recordKey]}
117-
onChange={onChange}
118-
onBlur={onBlur}
119-
onClick={onClick}
120-
onKeyDown={onKeyDown}
121-
disabled={disabled}
122-
{...additionalProps}
123-
/>
124-
}
125-
label={<Typography variant='body1'>{item[cardLabel]}</Typography>}
126-
/>
127-
) : (
128-
<FormControlLabel
129-
control={
130-
<Checkbox
131-
id={item[recordKey]}
132-
getPConnect={getPConnect}
133-
checked={readOnlyList.some(data => data[recordKey] === item[recordKey])}
134-
onChange={onChange}
135-
onBlur={onBlur}
136-
onClick={onClick}
137-
onKeyDown={onKeyDown}
138-
disabled={disabled}
139-
{...additionalProps}
140-
/>
141-
}
142-
label={<Typography variant='body1'>{item[cardLabel]}</Typography>}
143-
/>
144-
)}
77+
if (displayMode === 'DISPLAY_ONLY') {
78+
return cardContent;
79+
}
14580

146-
{commonProps.fields.map((field, index) => (
147-
<div
148-
key={index}
81+
const component = (
82+
<div style={{ width: '100%' }}>
83+
<Card className={className} style={{ display: 'flex', flexDirection: 'column', height: '100%' }} data-testid={testId}>
84+
<CardContent
14985
style={{
150-
fontSize: '0.875rem',
151-
...(field.type !== 'TextArea' && { display: 'grid', gridTemplateColumns: '1fr 1fr' }),
152-
margin: '5px'
86+
...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && {
87+
display: 'flex',
88+
height: '100%'
89+
}),
90+
...(imagePosition === 'inline-end' && { flexDirection: 'row-reverse' })
15391
}}
15492
>
155-
<div style={{ color: 'rgba(0, 0, 0, 0.6)' }}>{field.name}</div>
156-
<div>{field?.value?.props.value}</div>
157-
</div>
158-
))}
93+
<div
94+
style={{
95+
...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '40%', marginRight: '10px' })
96+
}}
97+
>
98+
{image && (
99+
<img
100+
src={image.src}
101+
alt={image.alt}
102+
style={{
103+
width: '100%',
104+
backgroundColor: 'rgb(233, 238, 243)',
105+
aspectRatio: '16 / 9',
106+
maxHeight: '100%',
107+
height: '100%',
108+
objectFit: 'contain',
109+
maxWidth: '100%'
110+
}}
111+
/>
112+
)}
113+
</div>
114+
<div
115+
style={{
116+
...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '60%' })
117+
}}
118+
>
119+
{type === 'radio' ? (
120+
<FormControlLabel
121+
control={
122+
<Radio
123+
value={item[recordKey]}
124+
checked={radioBtnValue === item[recordKey]}
125+
onChange={onChange}
126+
onBlur={onBlur}
127+
onClick={onClick}
128+
onKeyDown={onKeyDown}
129+
disabled={disabled}
130+
{...additionalProps}
131+
/>
132+
}
133+
label={<Typography variant='body1'>{item[cardLabel]}</Typography>}
134+
/>
135+
) : (
136+
<FormControlLabel
137+
control={
138+
<Checkbox
139+
id={item[recordKey]}
140+
getPConnect={getPConnect}
141+
checked={readOnlyList.some(data => data[recordKey] === item[recordKey])}
142+
onChange={onChange}
143+
onBlur={onBlur}
144+
onClick={onClick}
145+
onKeyDown={onKeyDown}
146+
disabled={disabled}
147+
{...additionalProps}
148+
/>
149+
}
150+
label={<Typography variant='body1'>{item[cardLabel]}</Typography>}
151+
/>
152+
)}
153+
154+
{commonProps.fields.map((field, index) => (
155+
<div
156+
key={index}
157+
style={{
158+
fontSize: '0.875rem',
159+
...(field.type !== 'TextArea' && {
160+
display: 'grid',
161+
gridTemplateColumns: '1fr 1fr'
162+
}),
163+
margin: '5px'
164+
}}
165+
>
166+
{field.name && <div style={{ color: 'rgba(0, 0, 0, 0.6)' }}>{field.name}</div>}
167+
<div>{field?.value?.props.value}</div>
168+
</div>
169+
))}
170+
</div>
171+
</CardContent>
172+
</Card>
159173
</div>
160-
</CardContent>
161-
</Card>
162-
</div>
163-
);
174+
);
164175

165-
if (type === 'radio' && radioBtnValue === item[recordKey]) {
166-
radioItemSelected = true;
167-
}
176+
if (type === 'radio' && radioBtnValue === item[recordKey]) {
177+
radioItemSelected = true;
178+
}
168179

169-
return component;
170-
})}
180+
return component;
181+
})}
182+
</div>
183+
);
184+
})()}
171185

172186
{type === 'radio' && setIsRadioCardSelected && setIsRadioCardSelected(radioItemSelected)}
173187
</>

0 commit comments

Comments
 (0)