Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix ratio calculation bug #1123

Merged
merged 13 commits into from
Mar 22, 2019
Merged

Fix ratio calculation bug #1123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e249317
feat: add 'gcd' twig function
Mar 19, 2019
47a8d40
fix: use gcd instead of conditionally dividing each by 100
Mar 19, 2019
fa6d8c9
feat: update gcd twig function with type check
Mar 20, 2019
6ddebce
test: add jest test for logo
Mar 20, 2019
0f98359
fix: return intval from gcd function, edit comment
Mar 20, 2019
a5620a6
test: update ratio snapshot
Mar 20, 2019
1f1bc88
test: add logo snapshots
Mar 20, 2019
73eab27
test: update card, figure, and image snapshots to reflect changes to …
Mar 20, 2019
35d54da
docs: add logo testing steps
Mar 20, 2019
5ae3e8b
Merge branch 'master' of https://github.com/bolt-design-system/bolt i…
Mar 20, 2019
bf081e9
chore: composer lock files
Mar 20, 2019
c751f4e
refactor: add two additional ratio tests to check that ratio fraction…
sghoweri Mar 22, 2019
bcb22c4
Merge branch 'master' into fix/logo-ratio-bug
sghoweri Mar 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs-site/composer.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

64 changes: 32 additions & 32 deletions packages/components/bolt-card/__tests__/__snapshots__/card.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ exports[`<bolt-card> Component add clickable functionality 1`] = `
<div class="c-bolt-card__media">
<a href="#!">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -82,9 +82,9 @@ exports[`<bolt-card> Component basic usage 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -152,9 +152,9 @@ exports[`<bolt-card> Component content tag variations: article 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -222,9 +222,9 @@ exports[`<bolt-card> Component content tag variations: div 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -292,9 +292,9 @@ exports[`<bolt-card> Component content tag variations: figcaption 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -362,9 +362,9 @@ exports[`<bolt-card> Component content tag variations: section 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -453,9 +453,9 @@ exports[`<bolt-card> Component tag variations: article 1`] = `
<article class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -523,9 +523,9 @@ exports[`<bolt-card> Component tag variations: div 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -593,9 +593,9 @@ exports[`<bolt-card> Component tag variations: figure 1`] = `
<figure class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -663,9 +663,9 @@ exports[`<bolt-card> Component tag variations: section 1`] = `
<section class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -735,9 +735,9 @@ exports[`<bolt-card> Component theme variations: dark 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -807,9 +807,9 @@ exports[`<bolt-card> Component theme variations: light 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -879,9 +879,9 @@ exports[`<bolt-card> Component theme variations: xdark 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -951,9 +951,9 @@ exports[`<bolt-card> Component theme variations: xlight 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -1021,9 +1021,9 @@ exports[`<bolt-card> Component with two buttons in footer 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down Expand Up @@ -1185,9 +1185,9 @@ exports[`<bolt-card> Component without footer 1`] = `
<div class="c-bolt-card">
<div class="c-bolt-card__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
alt="Anthem Video"
Expand Down
4 changes: 2 additions & 2 deletions packages/components/bolt-figure/__tests__/__snapshots__/figure.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ exports[`figure figure with image 1`] = `
<figure class="c-bolt-figure">
<div class="c-bolt-figure__media">
<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="11.51/6.38">
<bolt-ratio ratio="1151/638">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.38 / 11.51) * 100%); --aspect-ratio: 1.8040752351097;"
style="padding-bottom: calc((638 / 1151) * 100%); --aspect-ratio: 1.8040752351097;"
>
<img class="c-bolt-image__image-placeholder"
sizes="auto"
Expand Down
8 changes: 4 additions & 4 deletions packages/components/bolt-image/__tests__/__snapshots__/image.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
exports[`<bolt-image> Component <bolt-image> with ratio object and lazyloading disabled compiles 1`] = `

<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="12/6.6">
<bolt-ratio ratio="20/11">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.6 / 12) * 100%); --aspect-ratio: 1.8181818181818;"
style="padding-bottom: calc((11 / 20) * 100%); --aspect-ratio: 1.8181818181818;"
>
<img class="c-bolt-image__image-placeholder"
alt="A Rock Climber"
Expand All @@ -27,9 +27,9 @@ exports[`<bolt-image> Component <bolt-image> with ratio object and lazyloading d
exports[`<bolt-image> Component <bolt-image> with ratio object compiles 1`] = `

<bolt-image style="background-color: hsl(233, 33%, 97%);">
<bolt-ratio ratio="12/6.6">
<bolt-ratio ratio="20/11">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((6.6 / 12) * 100%); --aspect-ratio: 1.8181818181818;"
style="padding-bottom: calc((11 / 20) * 100%); --aspect-ratio: 1.8181818181818;"
>
<img class="c-bolt-image__image-placeholder"
alt="A Rock Climber"
Expand Down
32 changes: 32 additions & 0 deletions packages/components/bolt-logo/TESTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# Logo component developer testing steps

## Logo renders as expected (functionally and visually)

View the [Lazyload Variations page](https://master.boltdesignsystem.com/pattern-lab/patterns/02-components-logo/index.html) and verify the following assertions:

- Logos have the proper aspect ratio. They are not distorted or taking up more space than necessary.
- Inverted logos have the class `c-bolt-logo--inverted` and their colors are inverted, i.e. a light logo on a dark background.

---

# Logo component functional testing steps

Functional testing should be performed manually by the QA team across the standard compliment of browsers. In each scenario, browser-type is specified when necessary. If browser type is not specified, the test applies to both "desktop" and "mobile" browsers.

## Feature: Logo

In order to display responsive, performant logos on a Pega web property
As a UX designer, developer or content administrator
I need to ensure the "bolt-logo" component renders and functions as expected

## Scenario: Basic Logo

[Basic Logo page](https://master.boltdesignsystem.com/pattern-lab/patterns/02-components-logo-05-logo/02-components-logo-05-logo.html)

`// This is a purely visual test, use VRT`

## Scenario: Invert Variation

[Logo Size Variation page](https://master.boltdesignsystem.com/pattern-lab/patterns/02-components-logo-10-logo-invert-variation/02-components-logo-10-logo-invert-variation.html)

`// This is a purely visual test, use VRT`
Binary file added ...__tests__/__image_snapshots__/logo-js-logo-default-bolt-logo-renders-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...mage_snapshots__/logo-js-logo-inverted-bolt-logo-renders-as-inverted-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 41 additions & 0 deletions packages/components/bolt-logo/__tests__/__snapshots__/logo.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`logo Basic usage 1`] = `

<bolt-logo>
<bolt-image>
<bolt-ratio ratio="124/33">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((33 / 124) * 100%); --aspect-ratio: 3.7575757575758;"
>
<img class="c-bolt-image__image"
srcset="/fixtures/logo-paypal.svg"
sizes="auto"
src="/fixtures/logo-paypal.svg"
>
</replace-with-children>
</bolt-ratio>
</bolt-image>
</bolt-logo>

`;

exports[`logo Logo with invert set to "true" renders properly 1`] = `

<bolt-logo class="c-bolt-logo--invert">
<bolt-image>
<bolt-ratio ratio="124/33">
<replace-with-children class="c-bolt-ratio"
style="padding-bottom: calc((33 / 124) * 100%); --aspect-ratio: 3.7575757575758;"
>
<img class="c-bolt-image__image"
srcset="/fixtures/logo-paypal.svg"
sizes="auto"
src="/fixtures/logo-paypal.svg"
>
</replace-with-children>
</bolt-ratio>
</bolt-image>
</bolt-logo>

`;
1 change: 1 addition & 0 deletions packages/components/bolt-logo/__tests__/fixtures/logo-paypal.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading