Skip to content

Commit

Permalink
fix(bal-carousel): fix card sliding issue (#1100)
Browse files Browse the repository at this point in the history 
* fix(bal-carousel): fix card sliding issue

* chore(): add visual test

* chore(): format

* chore(): fix the mobile version

* chore(): improve visual tests

* chore(): update base images

---------

Co-authored-by: mladenplaninicic <[email protected]>
  • Loading branch information
@mladenplaninicic
mladenplaninicic and mladenplaninicic authored Nov 2, 2023
1 parent c0b3eac commit 669c63f
Show file tree
Hide file tree
Showing 23 changed files with 244 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/rare-walls-watch.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@baloise/design-system-components': patch
---

Correct sliding width issue in card carousel for consistent display
205 changes: 205 additions & 0 deletions packages/components/src/components/bal-carousel/test/bal-carousel.visual.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<link rel="stylesheet" href="/assets/baloise-design-system.css" />
<script type="module" src="/build/design-system-components.esm.js"></script>
<script nomodule src="/build/design-system-components.js"></script>
</head>

<body>
<bal-app class="bal-body">
<main class="container is-compact py-medium">
<section>
<bal-carousel data-testid="basic" border>
<bal-carousel-item>
<div class="has-background-green-1 p-normal is-fullwidth">AAA</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="has-background-green-2 p-normal is-fullwidth">BBB</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="has-background-green-3 p-normal is-fullwidth">CCC</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="has-background-green-4 p-normal is-fullwidth">DDD</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="has-background-green-5 p-normal has-text-white is-fullwidth">EEE</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="has-background-green-6 p-normal has-text-white is-fullwidth">FFF</div>
</bal-carousel-item>
</bal-carousel>
</section>

<section class="my-normal">
<bal-carousel data-testid="image" interface="image" controls="dots" border>
<bal-carousel-item
src="https://fastly.picsum.photos/id/626/1280/720.jpg?hmac=pHWhzQeCr1Zq8_NquZJ51qZ0xXa4psCZpoeJbaUbkWM"
>
</bal-carousel-item>
<bal-carousel-item
src="https://fastly.picsum.photos/id/921/1280/720.jpg?hmac=_kfenyYI38K4FYrzavn01cZUPqpu1pbn2OYNhrGqwvg"
>
</bal-carousel-item>
<bal-carousel-item
src="https://fastly.picsum.photos/id/235/1280/720.jpg?hmac=MBlYf-BNbNbdxmF-qCtt9eNsT1SKJy_1JCHeLDRHYEw"
>
</bal-carousel-item>
</bal-carousel>
</section>

<section class="my-normal">
<bal-carousel
data-testid="product"
interface="product"
steps="2"
items-per-view="auto"
controls="large"
border
>
<bal-carousel-item color="green" label="0 Auto" src="/assets/images/brand/car.svg"></bal-carousel-item>
<bal-carousel-item
color="yellow"
label="1 Haushalt"
src="/assets/images/brand/lamp.svg"
></bal-carousel-item>
<bal-carousel-item
color="purple"
label="2 Hypothek"
src="/assets/images/brand/home.svg"
></bal-carousel-item>
<bal-carousel-item color="red" label="3 Pensionsplanung" src="/assets/images/brand/bars.svg">
</bal-carousel-item>
<bal-carousel-item color="green" label="4 Anlegen" src="/assets/images/brand/plant.svg"></bal-carousel-item>
<bal-carousel-item
color="yellow"
label="5 Finanzplanung Finanzplanung Finanzplanung Finanzplanung Finanzplanung"
src="/assets/images/brand/pie.svg"
></bal-carousel-item>
<bal-carousel-item color="purple" label="6 E-Banking" src="/assets/images/brand/notebook.svg">
</bal-carousel-item>
<bal-carousel-item color="red" label="7 Sparen" src="/assets/images/brand/pig.svg"></bal-carousel-item>
<bal-carousel-item color="green" label="8 YouGo" src="/assets/images/brand/diamond.svg"></bal-carousel-item>
<bal-carousel-item color="yellow" label="9 Alle Gegenstände" src="/assets/images/brand/items.svg">
</bal-carousel-item>
<bal-carousel-item color="purple" label="10 Motorrad & Roller" src="/assets/images/brand/roller.svg">
</bal-carousel-item>
</bal-carousel>
</section>

<section class="my-normal">
<bal-carousel data-testid="card" interface="card" controls="tabs" controls-sticky border>
<bal-carousel-item label="ECO">
<bal-card style="width: 100%">
<bal-card-title>Title ECO</bal-card-title>
<bal-card-content>Content Content Content</bal-card-content>
</bal-card>
</bal-carousel-item>
<bal-carousel-item label="SMART">
<bal-card style="width: 100%">
<bal-card-title>Title SMART</bal-card-title>
<bal-card-content>Content</bal-card-content>
</bal-card>
</bal-carousel-item>
<bal-carousel-item label="TOP">
<bal-card style="width: 100%">
<bal-card-title>Title TOP</bal-card-title>
<bal-card-content>Content</bal-card-content>
</bal-card>
</bal-carousel-item>
</bal-carousel>
</section>

<section class="my-normal">
<bal-carousel data-testid="card-with-value" interface="card" controls="tabs" controls-sticky border value="1">
<bal-carousel-item label="ECO">
<bal-card style="width: 100%">
<bal-card-title>Title ECO</bal-card-title>
<bal-card-content>Content Content Content</bal-card-content>
</bal-card>
</bal-carousel-item>
<bal-carousel-item label="SMART">
<bal-card style="width: 100%">
<bal-card-title>Title SMART</bal-card-title>
<bal-card-content>Content</bal-card-content>
</bal-card>
</bal-carousel-item>
<bal-carousel-item label="TOP">
<bal-card style="width: 100%">
<bal-card-title>Title TOP</bal-card-title>
<bal-card-content>Content</bal-card-content>
</bal-card>
</bal-carousel-item>
</bal-carousel>
</section>

<section class="my-normal">
<bal-carousel data-testid="responsive" items-per-view="auto" steps="3" controls="small" border>
<bal-carousel-item>
<div class="px-x-small has-background-green-1">First Liverpool</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-2">Valencia</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-1">Madrid</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-2">Barcelona</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-1">München</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-2">Manchester</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-1">London</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-2">Basel</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-1">Brüssel</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-2">Paris</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-1">Berlin</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-2">Hamburg</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-1">Stuttgart</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-2">Bern</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-1">Zürich</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-2">Dornach</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-1">Reinach</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-2">Olten</div>
</bal-carousel-item>
<bal-carousel-item>
<div class="px-x-small has-background-green-1">Solothurn Last</div>
</bal-carousel-item>
</bal-carousel>
</section>
</main>
</bal-app>
</body>
</html>
1 change: 0 additions & 1 deletion packages/components/src/components/form/bal-date/utils/calendar.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,6 @@ describe('generateMonths Function', () => {
expect(months[8].disabled).toBe(true)
expect(months[9].disabled).toBe(false)
expect(months[9].selected).toBe(true)
expect(months[9].today).toBe(true)
expect(months[10].disabled).toBe(false)
expect(months[11].disabled).toBe(false)
})
Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/utils/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,9 @@ export const getComputedWidth = (element: HTMLElement): number => {

const computedStyle = window.getComputedStyle(element)

return convert(computedStyle.getPropertyValue('width'))
const width = convert(computedStyle.getPropertyValue('width'))
const paddingLeft = convert(computedStyle.getPropertyValue('padding-left'))
const paddingRight = convert(computedStyle.getPropertyValue('padding-left'))

return width + paddingLeft + paddingRight
}
29 changes: 29 additions & 0 deletions test/cypress/e2e/visual/bal-carousel.visual.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
describe('bal-carousel', () => {
beforeEach(() => cy.visit('/components/bal-carousel/test/bal-carousel.visual.html').waitForDesignSystem())

it('basic component', () => {
cy.platform('desktop')
cy.getByTestId('basic').compareSnapshot('carousel-basic-desktop')
cy.getByTestId('image').compareSnapshot('carousel-image-desktop')
cy.getByTestId('product').compareSnapshot('carousel-product-desktop')
cy.getByTestId('card').compareSnapshot('carousel-card-desktop')
cy.getByTestId('card-with-value').compareSnapshot('carousel-card-with-value-desktop')
cy.getByTestId('responsive').compareSnapshot('carousel-responsive-desktop')

cy.platform('tablet')
cy.getByTestId('basic').compareSnapshot('carousel-basic-tablet')
cy.getByTestId('image').compareSnapshot('carousel-image-tablet')
cy.getByTestId('product').compareSnapshot('carousel-product-tablet')
cy.getByTestId('card').compareSnapshot('carousel-card-tablet')
cy.getByTestId('card-with-value').compareSnapshot('carousel-card-with-value-tablet')
cy.getByTestId('responsive').compareSnapshot('carousel-responsive-tablet')

cy.platform('mobile')
cy.getByTestId('basic').compareSnapshot('carousel-basic-mobile')
cy.getByTestId('image').compareSnapshot('carousel-image-mobile')
cy.getByTestId('product').compareSnapshot('carousel-product-mobile')
cy.getByTestId('card').compareSnapshot('carousel-card-mobile')
cy.getByTestId('card-with-value').compareSnapshot('carousel-card-with-value-mobile')
cy.getByTestId('responsive').compareSnapshot('carousel-responsive-mobile')
})
})
Binary file added ...ress/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-basic-desktop.png
View file
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 ...press/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-basic-mobile.png
View file
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 ...press/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-basic-tablet.png
View file
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 ...press/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-card-desktop.png
View file
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 ...ypress/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-card-mobile.png
View file
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 ...ypress/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-card-tablet.png
View file
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 ...hots/base/visual/bal-carousel.visual.cy.ts/carousel-card-with-value-desktop.png
View file
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 ...shots/base/visual/bal-carousel.visual.cy.ts/carousel-card-with-value-mobile.png
View file
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 ...shots/base/visual/bal-carousel.visual.cy.ts/carousel-card-with-value-tablet.png
View file
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 ...ress/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-image-desktop.png
View file
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 ...press/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-image-mobile.png
View file
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 ...press/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-image-tablet.png
View file
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 ...ss/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-product-desktop.png
View file
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 ...ess/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-product-mobile.png
View file
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 ...ess/snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-product-tablet.png
View file
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 ...snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-responsive-desktop.png
View file
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 .../snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-responsive-mobile.png
View file
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 .../snapshots/base/visual/bal-carousel.visual.cy.ts/carousel-responsive-tablet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 669c63f

Please sign in to comment.