Skip to content

Commit

Permalink
Merge branch 'develop' into feat/header
Browse files Browse the repository at this point in the history
  • Loading branch information
Neox63 authored Jul 12, 2024
2 parents 3e1d43c + cfe855e commit 087c6c6
Show file tree
Hide file tree
Showing 27 changed files with 1,036 additions and 0 deletions.
15 changes: 15 additions & 0 deletions components/Molecules/Fields/FieldInput/FieldInput.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const fieldInputFunction = () => {
const input = document.querySelector('input');

if (input) {
input.addEventListener('input', function () {
if (input.value.trim() !== '') {
input.classList.add('FieldInput-input--filled');
} else {
input.classList.remove('FieldInput-input--filled');
}
});
}
};

export default fieldInputFunction;
41 changes: 41 additions & 0 deletions components/Molecules/Fields/FieldInput/FieldInput.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import FieldInput from './FieldInput.twig';
import fieldInputFunction from './FieldInput.js';

export default {
title: 'Design System/Molecules/Fields/FieldInput'
};

export const Base = {
render: (args) => FieldInput(args),
play: () => {
fieldInputFunction();
},
args: {
name: 'indication',
type: '',
label: 'Indication',
placeholder: 'Ex. Nom',
iconButtonLeft: false,
min: '',
max: '',
error: '',
unit: '',
tooltip: '',
iconButton: ''
},
argTypes: {
disabled: {
control: { type: 'boolean' }
},
required: {
control: { type: 'boolean' }
},
success: {
control: { type: 'boolean' }
},
size: {
options: ['large', 'small'],
control: { type: 'select' }
}
}
};
42 changes: 42 additions & 0 deletions components/Molecules/Fields/FieldInput/FieldInput.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
{% set classes = '' %}
{% if error %}
{% set classes = classes ~ ' FieldInput--error' %}
{% endif %}
{% if success %}
{% set classes = classes ~ ' FieldInput--success' %}
{% endif %}
{% if size %}
{% set classes = classes ~ ' FieldInput--' ~ size %}
{% endif %}
{% if button %}
{% set classes = classes ~ ' FieldInput--withButton' %}
{% endif %}


<div class='FieldInput {{ classes }}' {% if disabled %} disabled {% endif %}>
<div class='FieldInput-header'>
<label for='{{ name }}' class='FieldInput-label'>
{{ label }}
{% if required and label %}
*
{% endif %}
</label>
{% if tooltip %}
{% include '../../../Atoms/Tooltip/Tooltip-Icon.twig' with {text: tooltip, position: 'bottom'} %}
{% endif %}
</div>
<div class='FieldInput-blockInput {% if iconButton and iconButtonLeft %}FieldInput-blockInputIconLeft{% endif %}'>
<input class='FieldInput-input{% if unit %} FieldInput-input--unit{% endif %} paragraph-3' type='{{ type|default('text') }}' name='{{ name }}' id='{{ name }}' {% if value %} value='{{ value }}' {% endif %} {% if required %} required {% endif %} {% if placeholder %} placeholder='{{ placeholder }}{% if required and not label %} *{% endif %}' {% endif %} {% if min %} minlength='{{ min }}' {% endif %} {% if max %} maxlength='{{ max }}' {% endif %}/>
{% if unit %}
<span class="FieldInput-unit">{{ unit }}</span>
{% endif %}
{% if iconButton %}
<div class="FieldInput-button FieldInput-buttonIcon">
<button type='submit'>{{ source("/icons/"~ iconButton ~".svg") }}</button>
</div>
{% endif %}
</div>
{% if error %}
<span class='FieldInput-error'>{{ error }}</span>
{% endif %}
</div>
172 changes: 172 additions & 0 deletions components/Molecules/Fields/FieldInput/fieldInput.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
.FieldInput {
display: flex;
flex-direction: column;
gap: rem-convert(4px);

&-header {
display: flex;
justify-content: space-between;
}

&-label {
color: var(--black);
}

&-help {
width: rem-convert(18px);
width: rem-convert(18px);
height: rem-convert(18px);
color: var(--black);
}

&-blockInput {
position: relative;
}

&-input {
border: 1px solid var(--vermillon-medium);
border-radius: 8px;
color: var(--black);
width: 100%;
padding-top: rem-convert(16px);
padding-bottom: rem-convert(16px);
padding-left: rem-convert(14px);
padding-right: rem-convert(10px);
transition: 0.2s ease all;

&:hover {
background-color: var(--vermillon-lightest);
}

&:focus-visible {
outline-offset: 2px;
outline: 1px solid var(--vermillon);
}

&--filled {
border-color: var(--vermillon);
}

&--unit {
padding-right: rem-convert(50px);
}
}

&-unit {
position: absolute;
right: rem-convert(10px);
bottom: 0;
top: 0;
display: flex;
align-items: center;
pointer-events: none;
font-size: var(--font-size-paragraph-3);
font-family: var(--font-family-paragra3);
line-height: var(--line-height-paragraph-3);
}

&--small {
.FieldInput-input {
padding: rem-convert(10px);

&--unit {
padding-right: rem-convert(50px);
}
}
}

&--error {
.FieldInput-label {
color: var(--error-dark);
}

.FieldInput-input {
border: 1px solid var(--error-light);
color: var(--error);

&:hover {
background-color: var(--error-lightest);
}

&:focus-visible {
outline: 1px solid var(--error-dark);
}
}

::placeholder {
color: var(--error);
}
}

&-error {
color: var(--error-dark);
font-style: italic;
}

&--success {
.FieldInput-input {
border: 1px solid var(--success);
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" fill="none"><path d="m26.648 19.113-6.33 6.524a1.176 1.176 0 0 1-1.698 0l-3.268-3.368a1.265 1.265 0 0 1 0-1.75 1.176 1.176 0 0 1 1.698 0l2.419 2.493 5.481-5.65a1.176 1.176 0 0 1 1.698 0 1.265 1.265 0 0 1 0 1.751Z" fill="%2337E17B"></path></svg>');
background-repeat: no-repeat;
background-position: right 0 top 50%;
}
}

&[disabled] {
.FieldInput-label {
color: var(--grey);
}

.FieldInput-input {
border: 1px solid var(--grey);
color: var(--grey);
cursor: not-allowed;
background-color: var(--grey-lightest);
}

.FieldInput-help {
color: var(--grey);
}

::placeholder {
color: var(--grey);
}
}

&--withButton {
.FieldInput-input {
padding-right: 25%;
}
}

&-button {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
}

&-buttonIcon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: rem-convert(20px);
height: rem-convert(20px);
}

::placeholder {
color: var(--grey-dark);
font-style: italic;
}

&-blockInputIconLeft {
.FieldInput-buttonIcon {
right: 0;
left: 10px;
}
.FieldInput-input {
padding-left: rem-convert(40px);
}
}
}
15 changes: 15 additions & 0 deletions components/Molecules/Fields/FieldNumber/FieldNumber.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const fieldNumberFunction = () => {
const input = document.querySelector('input');

if (input) {
input.addEventListener('input', function () {
if (input.value.trim() !== '') {
input.classList.add('FieldNumber-input--filled');
} else {
input.classList.remove('FieldNumber-input--filled');
}
});
}
};

export default fieldNumberFunction;
27 changes: 27 additions & 0 deletions components/Molecules/Fields/FieldNumber/FieldNumber.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import FieldNumber from './FieldNumber.twig';
import fieldNumberFunction from './FieldNumber.js';

export default {
title: 'Design System/Molecules/Fields/FieldNumber'
};

export const Base = {
render: (args) => FieldNumber(args),
play: () => {
fieldNumberFunction();
},
args: {
name: 'Indication',
min: '',
max: '',
error: ''
},
argTypes: {
disabled: {
control: { type: 'boolean' }
},
required: {
control: { type: 'boolean' }
}
}
};
19 changes: 19 additions & 0 deletions components/Molecules/Fields/FieldNumber/FieldNumber.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{% set classes = '' %}
{% if error %}
{% set classes = classes ~ ' FieldNumber--error' %}
{% endif %}

<div class='FieldNumber{{ classes }}' {% if disabled %}disabled{% endif %}>
<input
class='FieldNumber-input'
type='number'
name='{{ name }}'
id='{{ name }}'
placeholder='_'
{% if value %}value='{{ value }}'{% endif %}
{% if required %}required{% endif %}
{% if min %}minlength='{{ min }}'{% endif %}
{% if max %}maxlength='{{ max }}'{% endif %}
/>
{% if error %}<span class='FieldNumber-error'>{{ error }}</span>{% endif %}
</div>
Loading

0 comments on commit 087c6c6

Please sign in to comment.