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

SWED-2334 update playbook design vision #1025

Merged
merged 4 commits into from
Dec 10, 2024
Merged

SWED-2334 update playbook design vision #1025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
25887dc
SWED-2334 update playbook design vision
goldenraphti Dec 9, 2024
fa31542
SWED-2334 update profiles + remove showroom + update routes & links
goldenraphti Dec 9, 2024
cb0b6f7
SWED-2334 switch dialog warnings from error to warn
goldenraphti Dec 10, 2024
1526d7f
SWED-2334 ✍️ release-notes
goldenraphti Dec 10, 2024
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
24 changes: 2 additions & 22 deletions RELEASE_NOTES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,9 @@

## \[10.13.0\] - 11.11.2024

## Identity
## Playbook

- Colors

- updated primary color from current value `#FDC129` to actual Brand guideline's `#FDC92A`

- Logotypes
- updated logotype to the new fixed version
- update Documentation to enforce recommended pathname use

## Component changes

- Toggle
- updated colors
- added new theme colors (white and gray)
- Expandable PayEx (contribution from Simon Wahlstrom 💫)
- font family change for PayEx expandables
- Button PayEx (contribution from Johanna Prinz 💫)
- font family change
- colors updated
- Table PayEx (contribution from Johanna Prinz 💫)
- colors updated
- hover color fixed
- Updates to the playbook:

## Technical changes

Expand Down
189 changes: 22 additions & 167 deletions src/App/Playbook/content/DesignVision/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,32 +41,17 @@ const VisionStatement = () => (
</section>
);

const VisionBoard = () => (
const Snapshot = () => (
<section>
<h2 id="vision-board">Vision board</h2>
<h2 id="snapshot">Snapshot</h2>
<p>Scalable Growing the product portfolio of Swedbank Pay.</p>

<div className="d-flex">
<video
playsInline
autoPlay
muted
loop
style={{ aspectRatio: "710 / 437" }}
width={710}
height={437}
poster={`${basename}img/documentation/playbook/playbook-design-vision-vision-board.avif`}
className="w-100 h-auto"
>
<source
src={`${basename}img/documentation/playbook/playbook-design-vision-vision-board-av1.mp4`}
type="video/mp4; codecs=av01.0.05M.08,opus"
/>
<source
src={`${basename}img/documentation/playbook/playbook-design-vision-vision-board.mp4`}
type="video/mp4"
/>
</video>
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-vision-board.png`}
alt="illustration swedbankpay playbook principles"
/>
</div>
</section>
);
Expand All @@ -85,7 +70,7 @@ const ChunkyFriendly = () => (
className="container px-sm-0 playbook playbook-mozaic"
style={{ radius: "2px" }}
>
<div className="row d-none d-sm-flex">
<div className="row d-flex px-3">
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-1.png`}
Expand All @@ -108,22 +93,6 @@ const ChunkyFriendly = () => (
/>
</div>
</div>
<div className="row d-sm-none">
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.png`}
alt="Playbook illustration"
loading="lazy"
/>
</div>
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.png`}
alt="Playbook illustration"
loading="lazy"
/>
</div>
</div>
</div>
</section>
);
Expand All @@ -140,89 +109,27 @@ const BoldTypography = () => (
and highly contrasting title.
</p>

<div className="container px-sm-0 playbook">
<div
className="row ratio-responsive-row justify-content-between mx-0"
style={{ "--row-height": 163, "--row-width": 702 }}
>
<div className="col-sm px-0">
<div
className="container px-sm-0 playbook playbook-mozaic"
style={{ radius: "2px" }}
>
<div className="row d-flex px-3">
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-1.png`}
className="w-100"
alt="Playbook illustration"
loading="lazy"
/>
</div>
<div className="col-sm px-0">
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-2.png`}
className="w-100"
alt="Playbook illustration"
loading="lazy"
/>
</div>
<div className="col-sm px-0">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-3.png`}
className="w-100"
alt="Playbook illustration"
loading="lazy"
/>
</div>
<div className="col-sm px-0">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-4.png`}
className="w-100"
alt="Playbook illustration"
loading="lazy"
/>
</div>
</div>
</div>
</section>
);

const DelicateLines = () => (
<section>
<h2 id="delicate-lines">Delicate lines</h2>
<p>
Together with the bold typography and solid colors, we use thin lines for
illustrations. When we want the illustration to blend into the background
and not be in focus, we only use the thin lines. When we want it to stand
out, we combine it with larger solid shapes or type.
</p>
<div className="container px-sm-0 playbook">
<div className="grid-row delicate-lines">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-1.png`}
alt="Playbook illustration"
loading="lazy"
/>
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-2.png`}
alt="Playbook illustration"
loading="lazy"
/>
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-3.png`}
alt="Playbook illustration"
loading="lazy"
/>
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-4.png`}
alt="Playbook illustration"
loading="lazy"
/>
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-5.png`}
alt="Playbook illustration"
loading="lazy"
/>
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-6.png`}
alt="Playbook illustration"
loading="lazy"
/>
</div>
</div>
</section>
Expand All @@ -236,11 +143,12 @@ const Rounded = () => (
information and serving you what you need. The UI should reflect this
friendliness, and does so with rounded corners and soft shapes.
</p>
<div className="container px-sm-0 playbook d-none d-sm-flex">
<div
className="row ratio-responsive-row d-flex justify-content-between mx-0"
style={{ "--row-height": 174, "--row-width": 710 }}
>

<div
className="container px-sm-0 playbook playbook-mozaic"
style={{ radius: "2px" }}
>
<div className="row d-flex px-3">
<div className="col-sm">
<img
className="w-100"
Expand All @@ -257,58 +165,6 @@ const Rounded = () => (
loading="lazy"
/>
</div>
<div className="col-sm">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-3.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-sm">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-4.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
</div>
</div>
<div className="container px-0 playbook d-sm-none">
<div className="row ratio-responsive-row d-flex justify-content-between mx-0">
<div className="col-12 px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-1.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-5 object-fit-cover px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-2.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-5 object-fit-cover px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-3.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-12 px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-4.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
</div>
</div>
</section>
Expand Down Expand Up @@ -431,10 +287,9 @@ const DesignVision = () => (
contribute to a unified and standout product journey.
</p>
<VisionStatement />
<VisionBoard />
<Snapshot />
<ChunkyFriendly />
<BoldTypography />
<DelicateLines />
<Rounded />
<Colors />
</DocContainer>
Expand Down
Loading
Loading