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.

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

feat(popin-toast): wip #61

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 5 additions & 1 deletion components/Molecules/Button/Button.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export const classic = {
customText: 'Button',
variant: 'primary',
icon_left: 'none',
icon_right: 'none'
icon_right: 'none',
data: {}
},
argTypes: {
variant: {
Expand All @@ -30,6 +31,9 @@ export const classic = {
},
href: {
control: { type: 'text' }
},
data: {
control: { type: 'object' }
}
}
};
33 changes: 19 additions & 14 deletions components/Molecules/Button/Button.twig
Original file line number Diff line number Diff line change
@@ -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}}>
48 changes: 48 additions & 0 deletions components/Organisms/Popin/Popin.stories.js
Original file line number Diff line number Diff line change
@@ -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()
};
49 changes: 49 additions & 0 deletions components/Organisms/Popin/Popin.twig
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 10 additions & 0 deletions components/Organisms/Popin/PopinWithTrigger.twig
Original file line number Diff line number Diff line change
@@ -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",
} %}
103 changes: 103 additions & 0 deletions components/Organisms/Popin/popin.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
76 changes: 76 additions & 0 deletions components/Organisms/Popin/popin.js
Original file line number Diff line number Diff line change
@@ -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');
});
});
};