From ff6e5045a323b520660c91a3b92cd1fad2341295 Mon Sep 17 00:00:00 2001 From: efp Date: Mon, 2 Dec 2024 09:49:44 +0100 Subject: [PATCH] pfe-107-added-brand-checks-to-index.js-cards --- .../components/Card/index.js | 417 ++++++++++-------- 1 file changed, 240 insertions(+), 177 deletions(-) diff --git a/src/App/ComponentsDocumentation/components/Card/index.js b/src/App/ComponentsDocumentation/components/Card/index.js index 7cd51b315e..5009282d1d 100644 --- a/src/App/ComponentsDocumentation/components/Card/index.js +++ b/src/App/ComponentsDocumentation/components/Card/index.js @@ -11,39 +11,69 @@ import CodeTags from "@components/CodeTags"; import { overviewCards } from "./constants"; const textArr = [ - "This is a lot of text", - "With some more text", - "And then even some more", - "Is it really possible to have this much text in one card?", - "Yes!", + "This is a lot of text", + "With some more text", + "And then even some more", + "Is it really possible to have this much text in one card?", + "Yes!", ]; const basename = process.env.basename; +const brand = process.env.brand; -const Overview = () => ( - <> -

Overview

-

- The card component should be used to direct to pages on our site and not - to external sites, in that case use{" "} - Links instead. -

- +const Overview = () => { + console.log("Brand:", brand); // Log the brand variable -

{"Dos and dont's"}

-
+ return ( + <> +

Overview

+

+ The card component should be used to direct to pages on our site and not + to external sites, in that case use{" "} + Links instead. +

+ + +

{"Dos and dont's"}

+ {brand === "swedbankpay" && ( +
+
+
+

Do

+ When presenting a group of cards, make sure their color match and have + the same size and text length + Three cards in a horizontal line that all have the same icon color and text length. +
+
+
+
+

{"Don't"}

+ Avoid miss-match colors, different sizes and length on text in order + to present a clean view + Three cards in a horizontal line that have different icon colors and text lengths. +
+
+

Do

- When presenting a group of cards, make sure their color match and have - the same size and text length + When presenting a group of cards, make sure they match visually. Try + keeping it the same text length and to one row when possible. Three cards in a horizontal line that all have the same icon color and text length.
@@ -52,16 +82,46 @@ const Overview = () => (

{"Don't"}

Avoid miss-match colors, different sizes and length on text in order - to present a clean view + to present a clean view. When using numbers make sure the numbering is + sequenced and follows the correct order. Three cards in a horizontal line that have different icon colors and text lengths.
-
+
+ + )} + {brand === "payex" && ( +
+
+
+

Do

+ When presenting a group of cards, make sure their color match and have + the same size and text length + Three cards in a horizontal line that all have the same icon color and text length. +
+
+
+
+

{"Don't"}

+ Avoid miss-match colors, different sizes and length on text in order + to present a clean view + Three cards in a horizontal line that have different icon colors and text lengths. +
+
+

Do

@@ -69,7 +129,7 @@ const Overview = () => ( keeping it the same text length and to one row when possible. Three wide cards in a vertical line that have the same icon color and text length.
@@ -82,168 +142,171 @@ const Overview = () => ( sequenced and follows the correct order. Three wide cards in a vertical line that have inconsistent iconography, different colors and varied text lengths.
- -); +
+ )} + + ); +}; // TODO: remove during next major release, not offered for a long time now const OldCard = () => ( - <> -

Old card

- -

- Cards support a wide variety of content, including images, text, list - groups, links, and more. Make sure to restrain the width of your card - unless you wish for it to fill the wrapping component. -

- - - -

Card with grid

-

- Use our grid along with cards to control their size and how they are - displayed on different screen resolutions. Make sure to add{" "} - to the wrapper if you want - the cards to be of equal height when next to each other. -

- -
-
- - - -
+ <> +

Old card

+ +

+ Cards support a wide variety of content, including images, text, list + groups, links, and more. Make sure to restrain the width of your card + unless you wish for it to fill the wrapping component. +

+ + + +

Card with grid

+

+ Use our grid along with cards to control their size and how they are + displayed on different screen resolutions. Make sure to add{" "} + to the wrapper if you want + the cards to be of equal height when next to each other. +

+ +
+
+ + + +
-
- -
+
+ +
-
- -
-
- -

Card Types

-

- We offer three different card types;{" "} - ,{" "} - and{" "} - . -

- -
-
- -
    -
  • - Card number: 4563 5648 - 5642 -
    • -
  • - Balance: 2500,-{" "} -
    • -
- -
-
- - - -
-
- - - -
-
- - +
+ +
+
+ +

Card Types

+

+ We offer three different card types;{" "} + ,{" "} + and{" "} + . +

+ +
+
+ +
    +
  • + Card number: 4563 5648 + 5642 +
    • +
  • + Balance: 2500,-{" "} +
    • +
+ +
+
+ + + +
+
+ + + +
+
+ + ); const Card = () => ( - -

- The card component is a flexible container that groups and informs about - the content and action. The information presented should be concise, to - the point and easy to understand. -

- - + +

+ The card component is a flexible container that groups and informs about + the content and action. The information presented should be concise, to + the point and easy to understand. +

+ + ); export default Card; /* For testing */ -export { Overview, OldCard }; +export { Overview, OldCard }; \ No newline at end of file