feat(popin-toast): wip

components/Molecules/Button/Button.stories.js

@@ -13,7 +13,8 @@ export const classic = {
     customText: 'Button',
     variant: 'primary',
     icon_left: 'none',
-    icon_right: 'none'
+    icon_right: 'none',
+    data: {}
   },
   argTypes: {
     variant: {
@@ -30,6 +31,9 @@ export const classic = {
     },
     href: {
       control: { type: 'text' }
+    },
+    data: {
+      control: { type: 'object' }
     }
   }
 };

components/Molecules/Button/Button.twig

@@ -1,16 +1,21 @@
 {% set classes = classes|default('') %}
-{% if variant %}{% set classes = classes ~ ' Button--' ~ variant %}{% endif %}
-{% set tag = 'button' %}
-{% if href %}{% set tag = 'a' %}{% endif %}
+{% if variant %}
+	{% set classes = classes ~ ' Button--' ~ variant %}
+{% endif %}
+{% set tag = href ? 'a' : 'button' %}
+{% set typeAttr = href ? '' : 'type=' ~ (type|default('button')) %}
 
-<{{ tag }} class='Button {{ classes }}' {% if disabled %}disabled{% endif %} {% if href %}href='{{ href }}'{% else %}type='{{ type|default('button') }}'{% endif %}>
-  {% if icon_left %}
-    <span class='icon icon-left'>{{ source("/icons/"~ icon_left ~".svg") }}</span>
-  {% endif %}
-  {% if text %}
-    <span>{{ text }}</span>
-  {% endif %}
-  {% if icon_right %}
-    <span class='icon icon-right'>{{ source("/icons/"~ icon_right ~".svg") }}</span>
-  {% endif %}
-</{{ tag }}>
+<{{tag}} class="Button {{ classes }}" {% if disabled %} disabled {% endif %} {% if href %} href="{{ href }}" {% endif %} {{ typeAttr }} {% if data is defined and data.key is defined and data.value is defined %} data-{{ data.key }}="{{ data.value }}" {% endif %}>
+	{% if icon %}
+		<span class="icon">{{ source('/icons/' ~ icon ~ '.svg') }}</span>
+	{% endif %}
+	{% if icon_left %}
+		<span class="icon icon-left">{{ source('/icons/' ~ icon_left ~ '.svg') }}</span>
+	{% endif %}
+	{% if text %}
+		<span>{{ text }}</span>
+	{% endif %}
+	{% if icon_right %}
+		<span class="icon icon-right">{{ source('/icons/' ~ icon_right ~ '.svg') }}</span>
+	{% endif %}
+</{{tag}}>

components/Organisms/Popin/Popin.stories.js

@@ -0,0 +1,48 @@
+import Popin from './Popin.twig';
+import PopinWithTrigger from './PopinWithTrigger.twig';
+import { popin } from './popin';
+
+export default {
+  title: 'Design System/Organisms/Popin'
+};
+
+export const base = {
+  render: (args) => Popin(args),
+  play: () => popin(),
+  args: {
+    title: 'Ici un titre',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+    img: '/illustrations/sécurité.png',
+    checkbox: {
+      label: "Ici une optin que l'utilisateur peut checker",
+      name: 'popin-checkbox'
+    },
+    link: {
+      label: 'Ici un lien',
+      href: '#'
+    },
+    action: 'Bouton',
+    secondaryAction: 'Bouton',
+    open: true,
+    id: 'popin-base'
+  },
+  argTypes: {
+    checkbox: {
+      control: { type: 'object' }
+    },
+    action: {
+      control: { type: 'text' }
+    },
+    secondaryAction: {
+      control: { type: 'text' }
+    },
+    link: {
+      control: { type: 'object' }
+    }
+  }
+};
+
+export const withTrigger = {
+  render: (args) => PopinWithTrigger(args),
+  play: () => popin()
+};

components/Organisms/Popin/Popin.twig

@@ -0,0 +1,49 @@
+<div class='Popin{% if open %} Popin--open{% endif %}' id="{{id}}">
+	<button class='Popin-close'>
+		{{ source('/icons/close.svg') }}
+	</button>
+
+	<div class='Popin-dragbar'></div>
+
+	{% if img %}
+		<div class='Popin-img'>
+			<img src='{{ img }}' alt='{{ alt }}'>
+		</div>
+	{% endif %}
+
+	<div class='Popin-content'>
+		{% if title %}
+			<h2 class='Popin-title h2'>
+				{{ title }}
+			</h2>
+		{% endif %}
+
+		{% if text %}
+			<div class='Popin-text paragraph-2'>
+				{{ text }}
+			</div>
+		{% endif %}
+
+		{% if checkbox.label %}
+			<div class='Popin-checkbox'>
+				{% include '../../Molecules/Form/Checkbox.twig' with { label: checkbox.label, name: checkbox.name } %}
+			</div>
+		{% endif %}
+	</div>
+
+	{% if action or secondaryAction or link %}
+		<div class='Popin-actions'>
+			{% if secondaryAction %}
+				{% include '../../Molecules/Button/Button.twig' with { text: secondaryAction, variant: 'secondary', classes: "Button--large"  } %}
+			{% endif %}
+			{% if link %}
+				{% include '../../Molecules/Links/Link.twig' with { label: link.label, classes: '', href: link.href, target: '', iconLeft: link.iconLeft, iconRight: link.iconRight, iconSize: 'h-5 w-5' } %}
+			{% endif %}
+			{% if action %}
+				{% include '../../Molecules/Button/Button.twig' with { text: action, variant: 'primary', classes: "Button--large"  } %}
+			{% endif %}
+		</div>
+	{% endif %}
+
+</div>
+<div class='Popin-overlay'></div>

components/Organisms/Popin/PopinWithTrigger.twig

@@ -0,0 +1,10 @@
+{% include '../../Molecules/Button/Button.twig' with { text: "open popin", variant: 'primary', classes: "Button--large popin-trigger", data: { 'key': "popin-id", 'value': "popin-with-trigger" }  } %}
+
+{% include '../../Organisms/Popin/Popin.twig' with { 
+  title: "Popin title", 
+  text: "Popin text", 
+  action: "Primary action", 
+  secondaryAction: "Secondary action", 
+  img: '/illustrations/sécurité.png',
+  id: "popin-with-trigger",
+} %}

components/Organisms/Popin/popin.css

@@ -0,0 +1,103 @@
+.Popin {
+  position: fixed;
+  height: max-content;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: var(--white);
+  width: 500px;
+  border-radius: 16px;
+  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.2);
+  padding: 32px;
+  z-index: 1000;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition:
+    transform 0.3s ease-in-out,
+    opacity 0.3s ease-in-out;
+
+  &--open {
+    display: flex;
+
+    + .Popin-overlay {
+      display: block;
+    }
+  }
+
+  &-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &-dragbar {
+    display: none;
+    width: 83px;
+    height: 3px;
+    background-color: var(--black);
+    border-radius: 3px;
+    margin-bottom: 43px;
+    cursor: move;
+  }
+
+  &-actions {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-img {
+    width: 228px;
+    height: auto;
+    margin-bottom: 48px;
+  }
+
+  &-title {
+    margin-bottom: 8px;
+  }
+
+  &-text {
+    margin-bottom: 24px;
+  }
+
+  &-checkbox {
+    margin-bottom: 24px;
+  }
+
+  &-close {
+    align-self: flex-end;
+    width: 24px;
+    height: 24px;
+  }
+
+  @media (max-width: 768px) {
+    width: 100%;
+    border-radius: 16px 16px 0 0;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    transform: none;
+
+    &-dragbar {
+      display: block;
+    }
+
+    &-close {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .dragging {
+    user-select: none;
+    opacity: 0.8;
+  }
+}

components/Organisms/Popin/popin.js

@@ -0,0 +1,76 @@
+export const popin = () => {
+  const popins = document.querySelectorAll('.Popin');
+  const popinOverlay = document.querySelector('.Popin-overlay');
+
+  let startY = 0;
+  let currentY = 0;
+  let dragging = false;
+
+  popinOverlay.addEventListener('click', () => {
+    popins.forEach((popin) => {
+      popin.classList.remove('Popin--open');
+    });
+  });
+
+  document.querySelectorAll('.popin-trigger').forEach((trigger) => {
+    trigger.addEventListener('click', () => {
+      const popin = document.querySelector(`#${trigger.dataset.popinId}`);
+
+      popin.classList.add('Popin--open');
+    });
+  });
+
+  popins.forEach((popin) => {
+    popin.querySelector('.Popin-close').addEventListener('click', () => {
+      popin.classList.remove('Popin--open');
+    });
+
+    popin.addEventListener('touchstart', function (event) {
+      startY = event.touches[0].clientY;
+      dragging = true;
+      popin.classList.add('dragging');
+    });
+
+    popin.addEventListener('touchmove', function (event) {
+      if (dragging && window.innerWidth <= 768) {
+        currentY = event.touches[0].clientY;
+        if (currentY - startY > 100) {
+          // Threshold for closing
+          popin.classList.remove('Popin--open');
+        }
+      }
+    });
+
+    popin.addEventListener('touchend', function () {
+      dragging = false;
+      popin.classList.remove('dragging');
+    });
+
+    // Mouse events for desktop devices
+    popin.addEventListener('mousedown', function (event) {
+      startY = event.clientY;
+      dragging = true;
+      popin.classList.add('dragging');
+    });
+
+    popin.addEventListener('mousemove', function (event) {
+      if (dragging && window.innerWidth <= 768) {
+        currentY = event.clientY;
+        if (currentY - startY > 100) {
+          // Threshold for closing
+          popin.classList.remove('Popin--open');
+        }
+      }
+    });
+
+    popin.addEventListener('mouseup', function () {
+      dragging = false;
+      popin.classList.remove('dragging');
+    });
+
+    popin.addEventListener('mouseleave', function () {
+      dragging = false;
+      popin.classList.remove('dragging');
+    });
+  });
+};