Skip to content

Commit e924f8f

Browse files
author
cubic Bot
committed
Keep dt and dd as direct siblings in customer reviews markup (merges into #2681)
1 parent 5cfe829 commit e924f8f

File tree

2 files changed

+113
-122
lines changed

2 files changed

+113
-122
lines changed

‎apps/web/components/customer-reviews/inline-styles.tsx‎

Lines changed: 70 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -57,91 +57,87 @@ export const component = (
5757
{ rating: 2, count: 199 },
5858
{ rating: 1, count: 147 },
5959
].map(({ count, rating }) => (
60-
<Row
61-
align="center"
62-
key={rating}
63-
style={{
64-
fontSize: '14px',
65-
lineHeight: '20px',
66-
}}
67-
>
68-
<Column align="center" valign="middle">
69-
<dt>
70-
<Row>
71-
<Column width={undefined}>
72-
<Text
73-
style={{
74-
color: 'rgb(107,114,128)',
75-
fontWeight: '500',
76-
width: '12px',
77-
}}
78-
>
79-
{rating}
80-
<span style={{ display: 'none' }}>
81-
{' '}
82-
star reviews
83-
</span>
84-
</Text>
85-
</Column>
86-
<Column
60+
<>
61+
<dt
62+
key={`${rating}-dt`}
63+
style={{
64+
fontSize: '14px',
65+
lineHeight: '20px',
66+
}}
67+
>
68+
<Row align="center">
69+
<Column width={undefined}>
70+
<Text
71+
style={{
72+
color: 'rgb(107,114,128)',
73+
fontWeight: '500',
74+
width: '12px',
75+
}}
76+
>
77+
{rating}
78+
<span style={{ display: 'none' }}>
79+
{' '}
80+
star reviews
81+
</span>
82+
</Text>
83+
</Column>
84+
<Column
85+
width="264"
86+
height="12"
87+
style={{
88+
width: 264,
89+
height: 12,
90+
paddingLeft: 12,
91+
}}
92+
aria-hidden="true"
93+
valign="middle"
94+
>
95+
<Row
96+
aria-hidden="true"
8797
width="264"
88-
height="12"
8998
style={{
9099
width: 264,
91100
height: 12,
92-
paddingLeft: 12,
101+
backgroundColor: 'rgb(243,244,246)',
102+
border: '1px solid rgb(229,231,235)',
103+
borderRadius: 6,
93104
}}
94-
aria-hidden="true"
95-
valign="middle"
96105
>
97-
<Row
98-
aria-hidden="true"
99-
width="264"
106+
<Column
107+
height="12"
100108
style={{
101-
width: 264,
102-
height: 12,
103-
backgroundColor: 'rgb(243,244,246)',
104-
border: '1px solid rgb(229,231,235)',
109+
backgroundColor: 'rgb(79,70,229)',
105110
borderRadius: 6,
111+
height: 12,
112+
width: `${(count / 1624) * 264}px`,
106113
}}
107-
>
108-
<Column
109-
height="12"
110-
style={{
111-
backgroundColor: 'rgb(79,70,229)',
112-
borderRadius: 6,
113-
height: 12,
114-
width: `${(count / 1624) * 264}px`,
115-
}}
116-
width={(count / 1624) * 264}
117-
/>
118-
<Column
119-
width={(1 - count / 1624) * 264}
120-
style={{
121-
width: `${(1 - count / 1624) * 264}px`,
122-
}}
123-
/>
124-
</Row>
125-
</Column>
126-
<Column width="100%" style={{ width: '100%' }}>
127-
<dd
114+
width={(count / 1624) * 264}
115+
/>
116+
<Column
117+
width={(1 - count / 1624) * 264}
128118
style={{
129-
color: 'rgb(107,114,128)',
130-
fontSize: '12px',
131-
fontVariantNumeric: 'tabular-nums',
132-
fontWeight: '500',
133-
lineHeight: '1',
134-
marginLeft: 12,
135-
textAlign: 'right',
119+
width: `${(1 - count / 1624) * 264}px`,
136120
}}
137-
>
138-
{Math.round((count / 1624) * 100)}%
139-
</dd>
140-
</Column>
141-
</Row>
142-
</dt>
143-
</Column>
144-
</Row>
121+
/>
122+
</Row>
123+
</Column>
124+
</Row>
125+
</dt>
126+
<dd
127+
key={`${rating}-dd`}
128+
style={{
129+
color: 'rgb(107,114,128)',
130+
fontSize: '12px',
131+
fontVariantNumeric: 'tabular-nums',
132+
fontWeight: '500',
133+
lineHeight: '1',
134+
marginLeft: 12,
135+
textAlign: 'right',
136+
}}
137+
>
138+
{Math.round((count / 1624) * 100)}%
139+
</dd>
140+
</>
145141
))}
146142
</dl>
147143
<Text

‎apps/web/components/customer-reviews/tailwind.tsx‎

Lines changed: 43 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -39,56 +39,51 @@ export const component = (
3939
{ rating: 2, count: 199 },
4040
{ rating: 1, count: 147 },
4141
].map(({ count, rating }) => (
42-
<Row
43-
key={rating}
44-
className="text-[14px] leading-[20px]"
45-
align="center"
46-
>
47-
<Column align="center" valign="middle">
48-
<dt>
49-
<Row>
50-
<Column width={undefined}>
51-
<Text className="w-[12px] font-medium text-gray-500">
52-
{rating}
53-
<span className="hidden"> star reviews</span>
54-
</Text>
55-
</Column>
56-
<Column
42+
<>
43+
<dt key={`${rating}-dt`}>
44+
<Row className="text-[14px] leading-[20px]" align="center">
45+
<Column width={undefined}>
46+
<Text className="w-[12px] font-medium text-gray-500">
47+
{rating}
48+
<span className="hidden"> star reviews</span>
49+
</Text>
50+
</Column>
51+
<Column
52+
width="264"
53+
height="12"
54+
className="w-[264px] h-[12px] pl-[12px]"
55+
aria-hidden="true"
56+
valign="middle"
57+
>
58+
<Row
5759
width="264"
58-
height="12"
59-
className="w-[264px] h-[12px] pl-[12px]"
60-
aria-hidden="true"
61-
valign="middle"
60+
className="w-[264px] h-[12px] bg-gray-100 border-gray-200 border border-solid rounded-[6px]"
6261
>
63-
<Row
64-
width="264"
65-
className="w-[264px] h-[12px] bg-gray-100 border-gray-200 border border-solid rounded-[6px]"
66-
>
67-
<Column
68-
height="12"
69-
className="h-[12px] bg-indigo-600 rounded-[6px]"
70-
width={(count / 1624) * 264}
71-
style={{
72-
width: `${(count / 1624) * 264}px`,
73-
}}
74-
/>
75-
<Column
76-
width={(1 - count / 1624) * 264}
77-
style={{
78-
width: `${(1 - count / 1624) * 264}px`,
79-
}}
80-
/>
81-
</Row>
82-
</Column>
83-
<Column width="100%" className="w-full">
84-
<dd className="ml-[12px] text-right font-medium text-gray-500 text-[12px] [font-variant-numeric:tabular-nums] leading-none">
85-
{Math.round((count / 1624) * 100)}%
86-
</dd>
87-
</Column>
88-
</Row>
89-
</dt>
90-
</Column>
91-
</Row>
62+
<Column
63+
height="12"
64+
className="h-[12px] bg-indigo-600 rounded-[6px]"
65+
width={(count / 1624) * 264}
66+
style={{
67+
width: `${(count / 1624) * 264}px`,
68+
}}
69+
/>
70+
<Column
71+
width={(1 - count / 1624) * 264}
72+
style={{
73+
width: `${(1 - count / 1624) * 264}px`,
74+
}}
75+
/>
76+
</Row>
77+
</Column>
78+
</Row>
79+
</dt>
80+
<dd
81+
key={`${rating}-dd`}
82+
className="ml-[12px] text-right font-medium text-gray-500 text-[12px] [font-variant-numeric:tabular-nums] leading-none"
83+
>
84+
{Math.round((count / 1624) * 100)}%
85+
</dd>
86+
</>
9287
))}
9388
</dl>
9489
<Text className="mt-[14px] text-center text-gray-500 text-[12px] leading-[24px]">

0 commit comments

Comments
 (0)