Merge branch 'develop' into feat/header

components/Molecules/Fields/FieldInput/FieldInput.js

@@ -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;

components/Molecules/Fields/FieldInput/FieldInput.stories.js

@@ -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' }
+    }
+  }
+};

components/Molecules/Fields/FieldInput/FieldInput.twig

@@ -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>

components/Molecules/Fields/FieldInput/fieldInput.css

@@ -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);
+    }
+  }
+}

components/Molecules/Fields/FieldNumber/FieldNumber.js

@@ -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;

components/Molecules/Fields/FieldNumber/FieldNumber.stories.js

@@ -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' }
+    }
+  }
+};

components/Molecules/Fields/FieldNumber/FieldNumber.twig

@@ -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>