Skip to content

Commit

Permalink
SWED-2249 test playbook video & avif
Browse files Browse the repository at this point in the history
  • Loading branch information
@goldenraphti
goldenraphti committed Oct 4, 2023
1 parent ab8cf3e commit dc56bb6
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 11 deletions.
57 changes: 46 additions & 11 deletions src/App/Playbook/content/Showroom/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,25 @@ const Showroom = () => (
<div className="container px-0 playbook-mozaic">
<div className="row">
<div className="col-sm">
<img
className=""
src={`${basename}img/documentation/playbook/playbook-showroom-1.png`}
alt="illustration swedbankpay playbook showroom"
/>
<video
playsInline
autoPlay
muted
loop
style={{ aspectRatio: "16 / 9" }}
height={399}
width={710}
poster={`${basename}designguide/assets/playbook/playbook-showroom-1.avif`}
>
<source
src={`${basename}designguide/assets/playbook/playbook-showroom-1.av1`}
type="video/webm"
/>
<source
src={`${basename}designguide/assets/playbook/playbook-showroom-1.mp4`}
type="video/mp4"
/>
</video>
</div>
</div>
<div className="row mt-4">
Expand All @@ -21,20 +35,23 @@ const Showroom = () => (
className=""
src={`${basename}img/documentation/playbook/playbook-showroom-2.png`}
alt="illustration swedbankpay playbook showroom"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
<div className="col-sm">
<img
className=""
src={`${basename}img/documentation/playbook/playbook-showroom-3.png`}
alt="illustration swedbankpay playbook showroom"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
<div className="col-sm">
<img
className=""
src={`${basename}img/documentation/playbook/playbook-showroom-4.png`}
alt="illustration swedbankpay playbook showroom"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
</div>
Expand All @@ -44,6 +61,7 @@ const Showroom = () => (
className=""
src={`${basename}img/documentation/playbook/playbook-showroom-5.png`}
alt="illustration swedbankpay playbook showroom"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
</div>
Expand All @@ -53,6 +71,7 @@ const Showroom = () => (
className=""
src={`${basename}img/documentation/playbook/playbook-showroom-6.png`}
alt="illustration swedbankpay playbook showroom"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
</div>
Expand All @@ -71,6 +90,7 @@ const Showroom = () => (
src={`${basename}img/documentation/playbook/playbook-showroom-8.png`}
alt="illustration swedbankpay playbook showroom"
loading="lazy"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
</div>
Expand Down Expand Up @@ -115,6 +135,7 @@ const Showroom = () => (
src={`${basename}img/documentation/playbook/playbook-showroom-13.png`}
alt="illustration swedbankpay playbook showroom"
loading="lazy"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
<div className="col-sm">
Expand All @@ -123,6 +144,7 @@ const Showroom = () => (
src={`${basename}img/documentation/playbook/playbook-showroom-14.png`}
alt="illustration swedbankpay playbook showroom"
loading="lazy"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
<div className="col-sm">
Expand All @@ -131,6 +153,7 @@ const Showroom = () => (
src={`${basename}img/documentation/playbook/playbook-showroom-15.png`}
alt="illustration swedbankpay playbook showroom"
loading="lazy"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
</div>
Expand All @@ -141,6 +164,7 @@ const Showroom = () => (
src={`${basename}img/documentation/playbook/playbook-showroom-16.png`}
alt="illustration swedbankpay playbook showroom"
loading="lazy"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
</div>
Expand All @@ -154,12 +178,18 @@ const Showroom = () => (
/>
</div>
<div className="col-sm-8">
<img
className=""
src={`${basename}img/documentation/playbook/playbook-showroom-18.png`}
alt="illustration swedbankpay playbook showroom"
loading="lazy"
/>
<picture>
<source
type="image/avif"
srcSet={`${basename}img/documentation/playbook/playbook-showroom-18.avif`}
/>
<img
src={`${basename}img/documentation/playbook/playbook-showroom-18.png`}
alt="illustration swedbankpay playbook showroom"
style={{ "aspect-ratio": "16 / 9" }}
loading="lazy"
/>
</picture>
</div>
</div>
<div className="row mt-4">
Expand All @@ -168,6 +198,7 @@ const Showroom = () => (
className=""
src={`${basename}img/documentation/playbook/playbook-showroom-19.png`}
alt="illustration swedbankpay playbook showroom"
style={{ "aspect-ratio": "16 / 9" }}
loading="lazy"
/>
</div>
Expand All @@ -178,6 +209,7 @@ const Showroom = () => (
className=""
src={`${basename}img/documentation/playbook/playbook-showroom-20.png`}
alt="illustration swedbankpay playbook showroom"
style={{ "aspect-ratio": "16 / 9" }}
loading="lazy"
/>
</div>
Expand All @@ -186,6 +218,7 @@ const Showroom = () => (
className=""
src={`${basename}img/documentation/playbook/playbook-showroom-21.png`}
alt="illustration swedbankpay playbook showroom"
style={{ "aspect-ratio": "16 / 9" }}
loading="lazy"
/>
</div>
Expand All @@ -197,6 +230,7 @@ const Showroom = () => (
src={`${basename}img/documentation/playbook/playbook-showroom-22.png`}
alt="illustration swedbankpay playbook showroom"
loading="lazy"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
<div className="col-sm">
Expand All @@ -205,6 +239,7 @@ const Showroom = () => (
src={`${basename}img/documentation/playbook/playbook-showroom-23.png`}
alt="illustration swedbankpay playbook showroom"
loading="lazy"
style={{ "aspect-ratio": "16 / 9" }}
/>
</div>
</div>
Expand Down
Binary file added src/img/swedbankpay/documentation/playbook/playbook-showroom-1.av1
View file
Binary file not shown.
Binary file added src/img/swedbankpay/documentation/playbook/playbook-showroom-1.avif
View file
Binary file not shown.
Binary file added src/img/swedbankpay/documentation/playbook/playbook-showroom-1.mp4
View file
Binary file not shown.
Binary file added src/img/swedbankpay/documentation/playbook/playbook-showroom-18.avif
View file
Binary file not shown.

0 comments on commit dc56bb6

Please sign in to comment.