Skip to content

Commit

Permalink
pfe-107 Changed src do card
Browse files Browse the repository at this point in the history
  • Loading branch information
@PriJoh
PriJoh committed Dec 2, 2024
1 parent ff6e504 commit e48024f
Showing 1 changed file with 125 additions and 125 deletions.
250 changes: 125 additions & 125 deletions src/App/ComponentsDocumentation/components/Card/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,137 +21,137 @@ const basename = process.env.basename;
const brand = process.env.brand;

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

return (
<>
<h2 id="overview">Overview</h2>
<p>
The card component should be used to direct to pages on our site and not
to external sites, in that case use{" "}
<Link to="/components/links">Links</Link> instead.
</p>
<ComponentPreview
language="html"
showCasePanel
showCasePanelAdvanced={overviewCards}
codeFigure
/>
return (
<>
<h2 id="overview">Overview</h2>
<p>
The card component should be used to direct to pages on our site and not
to external sites, in that case use{" "}
<Link to="/components/links">Links</Link> instead.
</p>
<ComponentPreview
language="html"
showCasePanel
showCasePanelAdvanced={overviewCards}
codeFigure
/>

<h3>{"Dos and dont's"}</h3>
{brand === "swedbankpay" && (
<div className="row">
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-success h-100">
<h4>Do</h4>
When presenting a group of cards, make sure their color match and have
the same size and text length
<img
alt="Three cards in a horizontal line that all have the same icon color and text length."
src={`${basename}img/documentation/cards/do-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-error h-100">
<h4>{"Don't"}</h4>
Avoid miss-match colors, different sizes and length on text in order
to present a clean view
<img
alt="Three cards in a horizontal line that have different icon colors and text lengths."
src={`${basename}img/documentation/cards/dont-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<h3>{"Dos and dont's"}</h3>
{brand === "swedbankpay" && (
<div className="row">
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-success h-100">
<h4>Do</h4>
When presenting a group of cards, make sure their color match and have
the same size and text length
<img
alt="Three cards in a horizontal line that all have the same icon color and text length."
src={`${basename}img/documentation/cards/do-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-error h-100">
<h4>{"Don't"}</h4>
Avoid miss-match colors, different sizes and length on text in order
to present a clean view
<img
alt="Three cards in a horizontal line that have different icon colors and text lengths."
src={`${basename}img/documentation/cards/dont-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<div className="row">
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-success h-100">
<h4>Do</h4>
When presenting a group of cards, make sure they match visually. Try
keeping it the same text length and to one row when possible.
<img
alt="Three wide cards in a vertical line that have the same icon color and text length."
src={`${basename}img/documentation/cards/do-wide-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-error h-100">
<h4>{"Don't"}</h4>
Avoid miss-match colors, different sizes and length on text in order
to present a clean view. When using numbers make sure the numbering is
sequenced and follows the correct order.
<img
alt="Three wide cards in a vertical line that have inconsistent iconography, different colors and varied text lengths."
src={`${basename}img/documentation/cards/dont-wide-cards.png`}
className="w-100 mt-4 mb-4"
/>
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-success h-100">
<h4>Do</h4>
When presenting a group of cards, make sure they match visually. Try
keeping it the same text length and to one row when possible.
<img
alt="Three wide cards in a vertical line that have the same icon color and text length."
src={`${basename}img/documentation/cards/do-wide-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-error h-100">
<h4>{"Don't"}</h4>
Avoid miss-match colors, different sizes and length on text in order
to present a clean view. When using numbers make sure the numbering is
sequenced and follows the correct order.
<img
alt="Three wide cards in a vertical line that have inconsistent iconography, different colors and varied text lengths."
src={`${basename}img/documentation/cards/dont-wide-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

)}
{brand === "payex" && (
<div className="row">
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-success h-100">
<h4>Do</h4>
When presenting a group of cards, make sure their color match and have
the same size and text length
<img
alt="Three cards in a horizontal line that all have the same icon color and text length."
src={`${basename}img/payex/documentation/cards/do-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-error h-100">
<h4>{"Don't"}</h4>
Avoid miss-match colors, different sizes and length on text in order
to present a clean view
<img
alt="Three cards in a horizontal line that have different icon colors and text lengths."
src={`${basename}img/payex/documentation/cards/dont-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>

)}
{brand === "payex" && (
<div className="row">
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-success h-100">
<h4>Do</h4>
When presenting a group of cards, make sure their color match and have
the same size and text length
<img
alt="Three cards in a horizontal line that all have the same icon color and text length."
src={`${basename}img/documentation/cards/Do-Cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-error h-100">
<h4>{"Don't"}</h4>
Avoid miss-match colors, different sizes and length on text in order
to present a clean view
<img
alt="Three cards in a horizontal line that have different icon colors and text lengths."
src={`${basename}img/payex/documentation/cards/dont-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<div className="row">
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-success h-100">
<h4>Do</h4>
When presenting a group of cards, make sure they match visually. Try
keeping it the same text length and to one row when possible.
<img
alt="Three wide cards in a vertical line that have the same icon color and text length."
src={`${basename}img/payex/documentation/cards/do-wide-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-error h-100">
<h4>{"Don't"}</h4>
Avoid miss-match colors, different sizes and length on text in order
to present a clean view. When using numbers make sure the numbering is
sequenced and follows the correct order.
<img
alt="Three wide cards in a vertical line that have inconsistent iconography, different colors and varied text lengths."
src={`${basename}img/payex/documentation/cards/dont-wide-cards.png`}
className="w-100 mt-4 mb-4"
/>
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-success h-100">
<h4>Do</h4>
When presenting a group of cards, make sure they match visually. Try
keeping it the same text length and to one row when possible.
<img
alt="Three wide cards in a vertical line that have the same icon color and text length."
src={`${basename}img/payex/documentation/cards/do-wide-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
<div className="col-xl-6 mb-4">
<div className="slab slab-plain slab-border-error h-100">
<h4>{"Don't"}</h4>
Avoid miss-match colors, different sizes and length on text in order
to present a clean view. When using numbers make sure the numbering is
sequenced and follows the correct order.
<img
alt="Three wide cards in a vertical line that have inconsistent iconography, different colors and varied text lengths."
src={`${basename}img/payex/documentation/cards/dont-wide-cards.png`}
className="w-100 mt-4 mb-4"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)}
</>
);
)}
</>
);
};

// TODO: remove during next major release, not offered for a long time now
Expand Down

0 comments on commit e48024f

Please sign in to comment.