Payment card

components/Organisms/Card/Payment/Payment.stories.js

@@ -0,0 +1,17 @@
+import PaymentCard from './PaymentCard.twig';
+
+export default {
+  title: 'Design System/Organisms/Card/PaymentCard'
+};
+
+export const Base = {
+  render: (args) => `<div class='w-[340px]''>${PaymentCard(args)}</div>`,
+  args: {
+    title: 'Prénom NOM',
+    number: '**** **** **** 0000',
+    expired: false,
+    cardType: 'VISA',
+    date: '05/25',
+    withoutButton: false
+  }
+};

components/Organisms/Card/Payment/PaymentCard.twig

@@ -0,0 +1,23 @@
+<div class='PaymentCard'>
+  <div class='PaymentCard-icon'><span>{{ source("/icons/calendar.svg") }}</span></div>
+  <div class='PaymentCard-title'>{{ title }}</div>
+ <div class='{% if not expired %}flex flex-cols items-end justify-between {% endif %}'>
+   <div class='PaymentCard-content'>
+     <div class='font-semibold'>{{ cardType }}</div>
+     <div>N° {{ number }}</div>
+     {% if expired %}
+       <div class='font-bold text-error-dark'>Expirée</div>
+     {% else %}
+       <div>Expire le {{ date }}</div>
+     {% endif %}
+   </div>
+   {% if not withoutButton %}
+     <div class='{% if expired %}mt-2 flex gap-2{% endif %}'>
+       {% include '../../../Molecules/Button/Button.twig' with {classes: 'Button--small',text:'Supprimer', icon_left: 'delete'} %}
+       {% if expired %}
+         {% include '../../../Molecules/Button/Button.twig' with {classes: 'Button--small', variant:'secondary', text:'Mettre à jour'} %}
+       {% endif %}
+     </div>
+   {% endif %}
+ </div>
+</div>

components/Organisms/Card/Payment/payment.css

@@ -0,0 +1,27 @@
+.PaymentCard {
+  position: relative;
+  border-radius: rem-convert(8px);
+  border: 1px solid var(--theme-medium);
+  background: var(--theme-lightest);
+  padding: rem-convert(24px);
+  &-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: rem-convert(20px);
+    span {
+      display: block;
+      width: rem-convert(38px);
+      height: rem-convert(38px);
+      color: var(--theme-light);
+    }
+  }
+  &-title {
+    @apply paragraph-2;
+    font-weight: 600;
+    color: var(--black);
+  }
+  &-content {
+    @apply paragraph-4;
+  }
+}