Skip to content

Commit bc37d37

Browse files
Oscar MartinezooHmartY
Oscar Martinez
authored and
ooHmartY
committed
fix(RatingBadge): Include incon in button
1 parent b0436f0 commit bc37d37

File tree

5 files changed

+152
-17
lines changed

5 files changed

+152
-17
lines changed

‎catalog/pages/buttons/index.md

-6
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,6 @@ rows:
177177

178178
```react
179179
<RatingBadge variant="standard" ratingValue="4.8" bestRating="5" ratingCount="20">
180-
<StarIcon size={12} color={colors.white.base} style={starIconStyles} />
181180
4.8
182181
</RatingBadge>
183182
```
@@ -186,7 +185,6 @@ rows:
186185

187186
```react
188187
<RatingBadge variant="standard" disabled ratingValue="4.8" bestRating="5" ratingCount="20">
189-
<StarIcon size={12} color={colors.white.base} style={starIconStyles} />
190188
4.8
191189
</RatingBadge>
192190
```
@@ -195,7 +193,6 @@ rows:
195193

196194
```react
197195
<RatingBadge variant="outline" ratingValue="4.8" bestRating="5" ratingCount="20">
198-
<StarIcon size={12} color={colors.azure.base} style={starIconStyles} />
199196
4.8
200197
</RatingBadge>
201198
```
@@ -204,7 +201,6 @@ rows:
204201

205202
```react
206203
<RatingBadge variant="outline" disabled ratingValue="4.8" bestRating="5" ratingCount="20">
207-
<StarIcon size={12} color={colors.azure.light} style={starIconStyles} />
208204
4.8
209205
</RatingBadge>
210206
```
@@ -213,7 +209,6 @@ rows:
213209

214210
```react
215211
<RatingBadge variant="transparent" ratingValue="4.8" bestRating="5" ratingCount="20">
216-
<StarIcon size={12} color={colors.white.base} style={starIconStyles} />
217212
4.8
218213
</RatingBadge>
219214
```
@@ -222,7 +217,6 @@ rows:
222217

223218
```react
224219
<RatingBadge variant="transparent" disabled ratingValue="4.8" bestRating="5" ratingCount="20">
225-
<StarIcon size={12} color={colors.white.light} style={starIconStyles} />
226220
4.8
227221
</RatingBadge>
228222
```

‎src/components/Button/RatingBadge.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3+
import styled from "styled-components";
34

45
import StyledBadge from "./Badge.styles";
6+
import StarIcon from "../Icons/Star";
57
import BUTTON_VARIANTS from "./constants";
68

9+
const Container = styled.span`
10+
padding-left: 2px;
11+
`;
12+
713
const RatingBadge = ({
814
variant,
915
children,
@@ -19,7 +25,8 @@ const RatingBadge = ({
1925
variant={variant}
2026
{...props}
2127
>
22-
{children}
28+
<StarIcon size={12} />
29+
<Container>{children}</Container>
2330
{ratingValue && <meta itemProp="ratingValue" content={ratingValue} />}
2431
{bestRating && <meta itemProp="bestRating" content={bestRating} />}
2532
{ratingCount && <meta itemProp="ratingCount" content={ratingCount} />}

‎src/components/Button/__tests__/__snapshots__/RatingBadge.spec.js.snap

+140-7
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,33 @@ exports[`RatingBadge /> renders link RatingBadge correctly 1`] = `
4242
cursor: not-allowed;
4343
}
4444
45+
.c1 {
46+
padding-left: 2px;
47+
}
48+
4549
<button
4650
className="c0"
4751
href="/"
4852
itemProp="aggregateRating"
4953
itemScope={true}
5054
itemType="https://schema.org/AggregateRating"
5155
>
52-
RatingBadge
56+
<svg
57+
fill="currentColor"
58+
height={12}
59+
viewBox="0 0 11 10"
60+
width={12}
61+
>
62+
<path
63+
d="M5.5 7.7L2.267 9.95l1.14-3.77L.27 3.8l3.938-.08L5.5 0l1.293 3.72 3.938.08-3.139 2.38 1.14 3.77z"
64+
fillRule="evenodd"
65+
/>
66+
</svg>
67+
<span
68+
className="c1"
69+
>
70+
RatingBadge
71+
</span>
5372
<meta
5473
content="4.8"
5574
itemProp="ratingValue"
@@ -107,13 +126,32 @@ exports[`RatingBadge /> renders outline RatingBadge correctly 1`] = `
107126
cursor: not-allowed;
108127
}
109128
129+
.c1 {
130+
padding-left: 2px;
131+
}
132+
110133
<button
111134
className="c0"
112135
itemProp="aggregateRating"
113136
itemScope={true}
114137
itemType="https://schema.org/AggregateRating"
115138
>
116-
RatingBadge
139+
<svg
140+
fill="currentColor"
141+
height={12}
142+
viewBox="0 0 11 10"
143+
width={12}
144+
>
145+
<path
146+
d="M5.5 7.7L2.267 9.95l1.14-3.77L.27 3.8l3.938-.08L5.5 0l1.293 3.72 3.938.08-3.139 2.38 1.14 3.77z"
147+
fillRule="evenodd"
148+
/>
149+
</svg>
150+
<span
151+
className="c1"
152+
>
153+
RatingBadge
154+
</span>
117155
<meta
118156
content="4.8"
119157
itemProp="ratingValue"
@@ -171,14 +209,33 @@ exports[`RatingBadge /> renders outline disabled RatingBadge correctly 1`] = `
171209
cursor: not-allowed;
172210
}
173211
212+
.c1 {
213+
padding-left: 2px;
214+
}
215+
174216
<button
175217
className="c0"
176218
disabled={true}
177219
itemProp="aggregateRating"
178220
itemScope={true}
179221
itemType="https://schema.org/AggregateRating"
180222
>
181-
RatingBadge
223+
<svg
224+
fill="currentColor"
225+
height={12}
226+
viewBox="0 0 11 10"
227+
width={12}
228+
>
229+
<path
230+
d="M5.5 7.7L2.267 9.95l1.14-3.77L.27 3.8l3.938-.08L5.5 0l1.293 3.72 3.938.08-3.139 2.38 1.14 3.77z"
231+
fillRule="evenodd"
232+
/>
233+
</svg>
234+
<span
235+
className="c1"
236+
>
237+
RatingBadge
238+
</span>
182239
<meta
183240
content="4.8"
184241
itemProp="ratingValue"
@@ -236,13 +293,32 @@ exports[`RatingBadge /> renders standard RatingBadge correctly 1`] = `
236293
cursor: not-allowed;
237294
}
238295
296+
.c1 {
297+
padding-left: 2px;
298+
}
299+
239300
<button
240301
className="c0"
241302
itemProp="aggregateRating"
242303
itemScope={true}
243304
itemType="https://schema.org/AggregateRating"
244305
>
245-
RatingBadge
306+
<svg
307+
fill="currentColor"
308+
height={12}
309+
viewBox="0 0 11 10"
310+
width={12}
311+
>
312+
<path
313+
d="M5.5 7.7L2.267 9.95l1.14-3.77L.27 3.8l3.938-.08L5.5 0l1.293 3.72 3.938.08-3.139 2.38 1.14 3.77z"
314+
fillRule="evenodd"
315+
/>
316+
</svg>
317+
<span
318+
className="c1"
319+
>
320+
RatingBadge
321+
</span>
246322
<meta
247323
content="4.8"
248324
itemProp="ratingValue"
@@ -300,14 +376,33 @@ exports[`RatingBadge /> renders standard disabled RatingBadge correctly 1`] = `
300376
cursor: not-allowed;
301377
}
302378
379+
.c1 {
380+
padding-left: 2px;
381+
}
382+
303383
<button
304384
className="c0"
305385
disabled={true}
306386
itemProp="aggregateRating"
307387
itemScope={true}
308388
itemType="https://schema.org/AggregateRating"
309389
>
310-
RatingBadge
390+
<svg
391+
fill="currentColor"
392+
height={12}
393+
viewBox="0 0 11 10"
394+
width={12}
395+
>
396+
<path
397+
d="M5.5 7.7L2.267 9.95l1.14-3.77L.27 3.8l3.938-.08L5.5 0l1.293 3.72 3.938.08-3.139 2.38 1.14 3.77z"
398+
fillRule="evenodd"
399+
/>
400+
</svg>
401+
<span
402+
className="c1"
403+
>
404+
RatingBadge
405+
</span>
311406
<meta
312407
content="4.8"
313408
itemProp="ratingValue"
@@ -365,13 +460,32 @@ exports[`RatingBadge /> renders transparent RatingBadge correctly 1`] = `
365460
cursor: not-allowed;
366461
}
367462
463+
.c1 {
464+
padding-left: 2px;
465+
}
466+
368467
<button
369468
className="c0"
370469
itemProp="aggregateRating"
371470
itemScope={true}
372471
itemType="https://schema.org/AggregateRating"
373472
>
374-
RatingBadge
473+
<svg
474+
fill="currentColor"
475+
height={12}
476+
viewBox="0 0 11 10"
477+
width={12}
478+
>
479+
<path
480+
d="M5.5 7.7L2.267 9.95l1.14-3.77L.27 3.8l3.938-.08L5.5 0l1.293 3.72 3.938.08-3.139 2.38 1.14 3.77z"
481+
fillRule="evenodd"
482+
/>
483+
</svg>
484+
<span
485+
className="c1"
486+
>
487+
RatingBadge
488+
</span>
375489
<meta
376490
content="4.8"
377491
itemProp="ratingValue"
@@ -429,14 +543,33 @@ exports[`RatingBadge /> renders transparent disabled RatingBadge correctly 1`] =
429543
cursor: not-allowed;
430544
}
431545
546+
.c1 {
547+
padding-left: 2px;
548+
}
549+
432550
<button
433551
className="c0"
434552
disabled={true}
435553
itemProp="aggregateRating"
436554
itemScope={true}
437555
itemType="https://schema.org/AggregateRating"
438556
>
439-
RatingBadge
557+
<svg
558+
fill="currentColor"
559+
height={12}
560+
viewBox="0 0 11 10"
561+
width={12}
562+
>
563+
<path
564+
d="M5.5 7.7L2.267 9.95l1.14-3.77L.27 3.8l3.938-.08L5.5 0l1.293 3.72 3.938.08-3.139 2.38 1.14 3.77z"
565+
fillRule="evenodd"
566+
/>
567+
</svg>
568+
<span
569+
className="c1"
570+
>
571+
RatingBadge
572+
</span>
440573
<meta
441574
content="4.8"
442575
itemProp="ratingValue"

‎src/components/Icons/Star.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@ StarIcon.displayName = "StarIcon";
1515

1616
StarIcon.propTypes = {
1717
size: PropTypes.number.isRequired,
18-
color: PropTypes.string.isRequired,
18+
color: PropTypes.string,
1919
children: PropTypes.node
2020
};
2121

2222
StarIcon.defaultProps = {
23-
children: null
23+
children: null,
24+
color: "currentColor"
2425
};
2526

2627
export default StarIcon;

‎src/components/Text/StyledText.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from "styled-components";
33
import { typography } from "../../theme";
44

55
const StyledText = styled.div`
6-
font-size: ${typography.size.hecto};
6+
font-size: ${props => props.fontSize || typography.size.hecto};
77
flex: 1;
88
overflow: hidden;
99
text-overflow: ellipsis;

0 commit comments

Comments
 (0)