Skip to content

Commit

Permalink
[LOOM-1310][BpkRating]: correct letter-spacing in bpk rating (#3433)
Browse files Browse the repository at this point in the history 
* BpkRating to TS and remove className usage on BpkText

* fixup styling

* remove old snap

* fix bpk-rating
  • Loading branch information
@mungodewar
mungodewar committed May 13, 2024
1 parent b5d5601 commit 1861cc2
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 81 deletions.
20 changes: 9 additions & 11 deletions packages/bpk-component-rating/src/BpkRating.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,18 +120,16 @@ const BpkRating = (props: Props) => {
aria-hidden="true"
>
{adjustedValue}

{showScale && (
<BpkText
textStyle={scaleTextSize}
tagName="span"
aria-hidden="true"
>
<span className={scaleStyles}>/{maxValue}</span>
</BpkText>
)}
</BpkText>

{showScale && (
<BpkText
textStyle={scaleTextSize}
tagName="span"
aria-hidden="true"
>
<span className={scaleStyles}>/{maxValue}</span>
</BpkText>
)}
</div>

<div className={textWrapperStyles}>
Expand Down
140 changes: 70 additions & 70 deletions packages/bpk-component-rating/src/__snapshots__/BpkRating-test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ exports[`BpkRating should correctly handling values higher than 5 when rating sc
class="bpk-text bpk-text--label-1"
>
5
</span>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
class="bpk-rating__scale"
>
<span
class="bpk-rating__scale"
>
/5
</span>
/5
</span>
</span>
</div>
Expand Down Expand Up @@ -70,15 +70,15 @@ exports[`BpkRating should correctly handling values higher than 10 when rating s
class="bpk-text bpk-text--label-1"
>
10
</span>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
class="bpk-rating__scale"
>
<span
class="bpk-rating__scale"
>
/10
</span>
/10
</span>
</span>
</div>
Expand Down Expand Up @@ -125,15 +125,15 @@ exports[`BpkRating should correctly handling values lower than 0 1`] = `
class="bpk-text bpk-text--label-1"
>
0
</span>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
class="bpk-rating__scale"
>
<span
class="bpk-rating__scale"
>
/5
</span>
/5
</span>
</span>
</div>
Expand Down Expand Up @@ -180,15 +180,15 @@ exports[`BpkRating should correctly when value is string type 1`] = `
class="bpk-text bpk-text--label-1"
>
4,6
</span>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
class="bpk-rating__scale"
>
<span
class="bpk-rating__scale"
>
/5
</span>
/5
</span>
</span>
</div>
Expand Down Expand Up @@ -280,15 +280,15 @@ exports[`BpkRating should render correctly 1`] = `
class="bpk-text bpk-text--label-1"
>
4.6
</span>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
class="bpk-rating__scale"
>
<span
class="bpk-rating__scale"
>
/5
</span>
/5
</span>
</span>
</div>
Expand Down Expand Up @@ -335,15 +335,15 @@ exports[`BpkRating should render large size correctly 1`] = `
class="bpk-text bpk-text--hero-5"
>
4.6
</span>
<span
aria-hidden="true"
class="bpk-text bpk-text--body-default"
>
<span
aria-hidden="true"
class="bpk-text bpk-text--body-default"
class="bpk-rating__scale"
>
<span
class="bpk-rating__scale"
>
/5
</span>
/5
</span>
</span>
</div>
Expand Down Expand Up @@ -390,15 +390,15 @@ exports[`BpkRating should render large title only correctly 1`] = `
class="bpk-text bpk-text--hero-5"
>
5
</span>
<span
aria-hidden="true"
class="bpk-text bpk-text--body-default"
>
<span
aria-hidden="true"
class="bpk-text bpk-text--body-default"
class="bpk-rating__scale"
>
<span
class="bpk-rating__scale"
>
/5
</span>
/5
</span>
</span>
</div>
Expand Down Expand Up @@ -435,15 +435,15 @@ exports[`BpkRating should render showScale rating correctly 1`] = `
class="bpk-text bpk-text--label-1"
>
5
</span>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
class="bpk-rating__scale"
>
<span
class="bpk-rating__scale"
>
/5
</span>
/5
</span>
</span>
</div>
Expand Down Expand Up @@ -490,15 +490,15 @@ exports[`BpkRating should render title only correctly 1`] = `
class="bpk-text bpk-text--label-1"
>
5
</span>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
class="bpk-rating__scale"
>
<span
class="bpk-rating__scale"
>
/5
</span>
/5
</span>
</span>
</div>
Expand Down Expand Up @@ -535,15 +535,15 @@ exports[`BpkRating should render zero to ten scale rating correctly 1`] = `
class="bpk-text bpk-text--label-1"
>
8.2
</span>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
>
<span
aria-hidden="true"
class="bpk-text bpk-text--caption"
class="bpk-rating__scale"
>
<span
class="bpk-rating__scale"
>
/10
</span>
/10
</span>
</span>
</div>
Expand Down

0 comments on commit 1861cc2

Please sign in to comment.