.cspell-project-words.txt

+Accompagner
+accompagner
+ajouter
+alendar
+alignement
+analitycs
+Archipel
+archipel
+Attirer
+attractivité
+auprès
+Avaliable
+bienvenues
+btns
+catégorie
+clases
+communs
+comptes
+concevoir
+connaître
+correctif
+crect
+csvg
+ctext
+Dailymotion
+dailymotion
+dans
+desactivated
+desciption
+diplayed
+dont
+dépôt
+dépôts
+Développer
+développer
+Ecume
+ecume
+Emeraude
+emeraude
+employeur
+envoyez
+eoperator
+Equisized
+equisized
+erros
+filtre
+Française
+Galet
+galet
+gouv
+gouvernement
+gouvernementfr
+gouvfr
+Grey
+grey
+Inscrivez
+jointe
+l'Etat
+legifrance
+leur
+leurs
+libres
+libération
+logiciel
+logiciels
+l’attractivité
+l’État
+Macaron
+macaron
+Mieux
+Moutarde
+moutarde
+npmjs
+numériques
+oomphinc
+Opéra
+organisation
+ouverture
+overriden
+pantone
+personnels
+pièce
+profil
+Publier
+recours
+Remixicon
+remixicon
+renforcer
+référencer
+référençons
+République
+s'appuyant
+searchform
+secteur
+Sidemenu
+sidemenu
+sitebranding
+Skiplinks
+skiplinks
+sont
+souhaitez
+soutenir
+S’appuyer
+texte
+Tiktok
+tiktok
+Tilleul
+tilleul
+Tilte
+Tournesol
+tournesol
+treetable
+Tuile
+tuile
+unclicable
+utilisation
+Utiliser
+utiliser
+utilisé
+Verveine
+verveine
+votre
+Vous
+vous
+vuejs
+Écrivez
+Écume
+Émeraude
+écrivez
+êtes

.gitlab-ci.yml

-stages:
-  - composer_package_master
-  - composer_package_1_2
-  - composer_package_1_5
-  - composer_package_1_7
+# https://git.drupalcode.org/project/gitlab_templates/
 
-composer_package_master:
-  stage: composer_package_master
-  script:
-    - 'curl --header "Job-Token: $CI_JOB_TOKEN" --data branch=master "https://__token__:5FJ1wBrKM4Qs-NVNYsS6@git.smile.fr/api/v4/projects/14517/packages/composer"'
-  only:
-    - master
-  tags:
-    - tandem-shell
-
-composer_package_1_2:
-  stage: composer_package_1_2
-  script:
-    - 'curl --header "Job-Token: $CI_JOB_TOKEN" --data branch=v1.2 "https://__token__:5FJ1wBrKM4Qs-NVNYsS6@git.smile.fr/api/v4/projects/14517/packages/composer"'
-  only:
-    - v1.2
-  tags:
-    - tandem-shell
+include:
+  - project: $_GITLAB_TEMPLATES_REPO
+    ref: $_GITLAB_TEMPLATES_REF
+    file:
+      - '/includes/include.drupalci.main.yml'
+      - '/includes/include.drupalci.variables.yml'
+      - '/includes/include.drupalci.workflows.yml'
 
-composer_package_1_5:
-  stage: composer_package_1_5
+.twig-lint-base:
+  stage: validate
+  before_script:
+    - composer require --dev vincentlanglet/twig-cs-fixer
   script:
-    - 'curl --header "Job-Token: $CI_JOB_TOKEN" --data branch=v1.5 "https://__token__:5FJ1wBrKM4Qs-NVNYsS6@git.smile.fr/api/v4/projects/14517/packages/composer"'
-  only:
-    - v1.5
-  tags:
-    - tandem-shell
+    - vendor/bin/twig-cs-fixer lint --config=$_WEB_ROOT/themes/custom/$CI_PROJECT_NAME/.twig-cs-fixer.php $_WEB_ROOT/themes/custom/$CI_PROJECT_NAME/templates $_WEB_ROOT/themes/custom/$CI_PROJECT_NAME/components
+  rules:
+    - changes:
+        - "**/*.twig"
+    - if: '$CI_PIPELINE_SOURCE == "push"'
+  artifacts:
+    expose_as: twig-lint
+    when: always
+    expire_in: 6 mos
+    reports:
+      codequality: twig-lint-quality-report.xml
+    name: artifacts-$CI_PIPELINE_ID-$CI_JOB_NAME_SLUG
+    paths:
+      - twig-lint-quality-report.xml
 
-composer_package_1_7:
-  stage: composer_package_1_7
-  script:
-    - 'curl --header "Job-Token: $CI_JOB_TOKEN" --data branch=v1.7 "https://__token__:5FJ1wBrKM4Qs-NVNYsS6@git.smile.fr/api/v4/projects/14517/packages/composer"'
-  only:
-    - v1.7
-  tags:
-    - tandem-shell
+twig-lint:
+  extends: .twig-lint-base
+  allow_failure: false
+stylelint:
+  allow_failure: false
+composer-lint:
+  allow_failure: false
+cspell:
+  allow_failure: true
+eslint:
+  allow_failure: false
+phpcs:
+  allow_failure: false
+phpstan:
+  allow_failure: false
+phpunit:
+  allow_failure: false

.twig-cs-fixer.php

+<?php
+
+$ruleset = new TwigCsFixer\Ruleset\Ruleset();
+
+// Add a default standard.
+$ruleset->addStandard(new TwigCsFixer\Standard\TwigCsFixer());
+
+// Add some specific rules.
+$ruleset->addRule(new TwigCsFixer\Rules\File\FileExtensionRule());
+
+$config = new TwigCsFixer\Config\Config();
+$config->setRuleset($ruleset);
+
+return $config;

README.md

@@ -2,7 +2,7 @@ Theme that represents all DSFR components as ui patterns plugins or alters.
 
 # Installation
 
-No matter the solution you choose, you need to install the DSFR library such that at the end, 
+No matter the solution you choose, you need to install the DSFR library such that at the end,
 the following file '/libraries/dsfr/dist/dsfr.module.js' should exist in your project,
 relative to the drupal root directory.
 
@@ -12,12 +12,52 @@ You need to place the DSFR library in the `libraries/dsfr` folder.
 
 ## With Composer
 
-### Asset Packagist
+You can use composer to automatically download and place the DSFR library in the correct
+location. You have multiple options to do so. We show here two possibilities, you are free to
+choose any methods that suits you.
 
-If you are using the website [Asset Packagist](https://asset-packagist.org), the package 'npm-asset/gouvfr--dsfr' can be 
+### With a composer package repository
+
+Example:
+
+```json
+{
+  "require": {
+    "gouvernementfr/dsfr": "1.14.0",
+    "composer/installers": "^2"
+  },
+  "repositories": {
+    "dsfr": {
+      "type": "package",
+      "package": {
+        "name": "gouvernementfr/dsfr",
+        "type": "drupal-library",
+        "version": "1.14.0",
+        "dist": {
+          "type": "zip",
+          "url": "https://github.com/GouvernementFR/dsfr/releases/download/v1.14.0/dsfr-v1.14.0.zip"
+        }
+      }
+    }
+  },
+  "extra": {
+    "installer-paths": {
+      "web/core": [
+        "type:drupal-core"
+      ],
+      "web/libraries/{$name}": [
+        "type:drupal-library"
+      ]
+    }
+  }
+}
+```
+### Using the composer repository 'Asset Packagist'
+
+If you are using the website [Asset Packagist](https://asset-packagist.org), the package 'npm-asset/gouvfr--dsfr' can be
 downloaded from this repository. The composer.json of your Drupal project can be like below.
 In the example, "web" is the drupal root directory (see the rule on package "type:drupal-core").
-the project 'oomphinc/composer-installers-extender' is used to relocate the package 'npm-asset/gouvfr--dsfr'. 
+the project 'oomphinc/composer-installers-extender' is used to relocate the package 'npm-asset/gouvfr--dsfr'.
 The relocation requires that :
  - composer plugin 'oomphinc/composer-installers-extender' is allowed in section 'extra.config.allow-plugins',
  - the package type 'npm-asset' is declared in the "extra.installer-types" section,
@@ -26,9 +66,9 @@ The relocation requires that :
 ```json
 {
   "require": {
-    "npm-asset/gouvfr--dsfr": "1.10.2",
+    "npm-asset/gouvfr--dsfr": "1.14.0",
     "composer/installers": "^2",
-    "oomphinc/composer-installers-extender": "2.*"
+    "oomphinc/composer-installers-extender": "^2"
   },
   "repositories": {
     "asset-packagist": {
@@ -58,40 +98,3 @@ The relocation requires that :
 }
 ```
 
-### With a composer package repository
-
-Example:
-
-```json
-{
-  "require": {
-    "gouvernementfr/dsfr": "1.10.2",
-    "composer/installers": "2.*"
-  },
-  "repositories": {
-    "dsfr": {
-      "type": "package",
-      "package": {
-        "name": "gouvernementfr/dsfr",
-        "type": "drupal-library",
-        "version": "1.10.2",
-        "dist": {
-          "type": "zip",
-          "url": "https://github.com/GouvernementFR/dsfr/releases/download/v1.10.2/dsfr-v1.10.2.zip"
-        }
-      }
-    }
-  },
-  "extra": {
-    "installer-paths": {
-      "web/core": [
-        "type:drupal-core"
-      ],
-      "web/libraries/{$name}": [
-        "type:drupal-library"
-      ]
-    }
-  }
-}
-```
-

components/accordion/accordion.component.yml

+name: Accordion
+description: "Used to condense space by hiding content and revealing it as needed."
+group: Accordion
+links:
+  - "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon"
+slots:
+  title:
+    title: Title
+  content:
+    title: Content
+    description: "The accordion renderable content."
+props:
+  type: object
+  properties:
+    id:
+      title: ID
+      description: "Must start with a letter. Randomly generated if empty."
+      $ref: "ui-patterns://identifier"
+    title_tag:
+      title: "HTML tag for title"
+      type: string
+      enum:
+        - h2
+        - h3
+        - h4
+        - h5
+        - h6
+    expanded:
+      title: "Expanded?"
+      description: "Accordion will be expanded on page load"
+      type: boolean
+      default: false

components/accordion/accordion.preview.story.yml

+name: Preview
+slots:
+  title: "Accordion title"
+  content:
+    type: html_tag
+    tag: p
+    value: "Accordion content"
+props:
+  title_tag: h4
+  expanded: false

templates/patterns/accordion/pattern-accordion.html.twig → components/accordion/accordion.twig

@@ -2,7 +2,7 @@
 
 {% if title %}
   <section{{ attributes.addClass('fr-accordion') }}>
-    {% set accordion_id = accordion_id|default('accordion-' ~ random()) %}
+    {% set accordion_id = id|default('accordion-' ~ random()) %}
     {% set title_tag = title_tag|default('h3') %}
     <{{ title_tag }} class="fr-accordion__title">
       <button class="fr-accordion__btn"

components/accordion_group/accordion_group.component.yml

+name: "Accordion group"
+description: "A grouping of accordions."
+group: Accordion
+links:
+  - "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon"
+slots:
+  accordions:
+    title: Accordions
+    description: "A list of 'accordion' components."
+props:
+  type: object
+  properties:
+    grouped:
+      title: "Group accordions?"
+      type: boolean
+      default: true

components/accordion_group/accordion_group.preview.story.yml

+name: Preview
+slots:
+  accordions:
+    - type: component
+      component: "ui_suite_dsfr:accordion"
+      slots:
+        title: "Accordion 1"
+        content:
+          type: html_tag
+          tag: p
+          value: "Accordion 1 content"
+    - type: component
+      component: "ui_suite_dsfr:accordion"
+      slots:
+        title: "Accordion 2"
+        content:
+          type: html_tag
+          tag: p
+          value: "Accordion 2 content"
+    - type: component
+      component: "ui_suite_dsfr:accordion"
+      slots:
+        title: "Accordion 3"
+        content:
+          type: html_tag
+          tag: p
+          value: "Accordion 3 content"
+props:
+  grouped: true

templates/patterns/accordion_group/pattern-accordion-group.html.twig → components/accordion_group/accordion_group.twig

 {% if accordions %}
+  {% if not grouped %}
+    {% set attributes = attributes.setAttribute('data-fr-group', 'false') %}
+  {% endif %}
+
   <div{{ attributes.addClass('fr-accordions-group') }}>
+    {% set accordions = accordions and accordions is not sequence ? [accordions] : accordions %}
     {% for accordion in accordions %}
       {{ accordion }}
     {% endfor %}

components/alert/alert.component.yml

+name: Alert
+description: "Draws the user's attention to information without interrupting his current task."
+links:
+  - "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte"
+variants:
+  error:
+    title: Error
+  success:
+    title: Success
+  info:
+    title: Information
+  warning:
+    title: Warning
+  error__sm:
+    title: "Error small"
+  success__sm:
+    title: "Success small"
+  info__sm:
+    title: "Information small"
+  warning__sm:
+    title: "Warning small"
+slots:
+  title:
+    title: Title
+  message:
+    title: Message
+props:
+  type: object
+  properties:
+    dismissible:
+      title: "Dismissible?"
+      description: "It’s possible to dismiss any alert inline."
+      type: string
+      enum:
+        - ""
+        - core
+        - custom
+      "meta:enum":
+        "": "No"
+        core: "Using dsfr"
+        custom: Custom
+    close_title:
+      title: "Close button text"
+      description: "Optional. Will be used only if alert is dismissible."
+      type: string
+    title_tag:
+      title: "HTML tag for title"
+      type: string
+      enum:
+        - p
+        - h2
+        - h3
+        - h4
+        - h5
+        - h6
+      "meta:enum":
+        p: p
+        h2: h2
+        h3: "h3 (default)"
+        h4: h4
+        h5: h5
+        h6: h6

components/alert/alert.preview.story.yml

+name: Preview
+slots:
+  title: "Alert: Title of an alert"
+  message:
+    type: html_tag
+    tag: p
+    value: "Detailed description of the message."
+props:
+  dismissible: core
+  close_title: "Hide message"

templates/patterns/alert/pattern-alert.html.twig → components/alert/alert.twig

-{% if variant and variant|lower != 'default' %}
-  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-alert--' ~ v})|replace({_: '-'})) %}
+{% if variant and variant != 'default' %}
+  {% set variants = variant|split('__')|map(v => v|replace({(v): 'fr-alert--' ~ v})) %}
   {% set attributes = attributes.addClass(variants) %}
 {% endif %}
 
@@ -12,6 +12,6 @@
     {{ message }}
   {% if dismissible %}
     {% set close_title = close_title|default('Close'|t) %}
-    <button{% if dismissible == 'core' %} onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert);"{% endif %} class="fr-btn fr-btn--close" title="{{ close_title }}">{{ close_title }}</button>
+    <button{% if dismissible == 'core' %} onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert);"{% endif %} class="fr-btn fr-btn--close" title="{{ close_title }}" type="button">{{ close_title }}</button>
   {% endif %}
 </div>

templates/patterns/badge/badge.ui_patterns.yml → components/badge/badge.component.yml

-badge:
-  label: Badge
-  description: "Highlight information of the “status” or “state” type on an element of the site."
-  links:
-    - "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/badge"
-  category: Badge
-  variants:
-    default:
-      label: Default
-    sm:
-      label: Small
-  settings:
+name: Badge
+description: "Highlight information of the “status” or “state” type on an element of the site."
+group: Badge
+links:
+  - "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/badge"
+variants:
+  default:
+    title: Default
+  sm:
+    title: Small
+slots:
+  label:
+    title: Label
+props:
+  type: object
+  properties:
     color_schema:
-      type: select
-      label: Color schema
+      title: "Color schema"
       description: "It is possible to use illustrative colors for not system badges only. Optional."
-      options:
-        green-tilleul-verveine: Tilleul Verveine
+      type: string
+      enum:
+        - green-tilleul-verveine
+        - green-bourgeon
+        - green-emeraude
+        - green-menthe
+        - green-archipel
+        - blue-ecume
+        - blue-cumulus
+        - purple-glycine
+        - pink-macaron
+        - pink-tuile
+        - yellow-tournesol
+        - yellow-moutarde
+        - orange-terre-battue
+        - brown-cafe-creme
+        - brown-caramel
+        - brown-opera
+        - beige-gris-galet
+      "meta:enum":
+        green-tilleul-verveine: "Tilleul Verveine"
         green-bourgeon: Bourgeon
         green-emeraude: Émeraude
         green-menthe: Menthe
@@ -27,30 +49,28 @@ badge:
         pink-tuile: Tuile
         yellow-tournesol: Tournesol
         yellow-moutarde: Moutarde
-        orange-terre-battue: Terre Battue
-        brown-cafe-creme: Café crème
+        orange-terre-battue: "Terre Battue"
+        brown-cafe-creme: "Café crème"
         brown-caramel: Caramel
         brown-opera: Opéra
-        beige-gris-galet: Gris Galet
-      preview: brown-caramel
+        beige-gris-galet: "Gris Galet"
     system_type:
-      type: select
-      label: System type
-      description: If selected 'Color schema' will be ignored. Optional.
-      options:
+      title: "System type"
+      description: "If selected 'Color schema' will be ignored. Optional."
+      type: string
+      enum:
+        - success
+        - error
+        - info
+        - warning
+        - new
+      "meta:enum":
         success: Success
         error: Error
         info: Info
         warning: Warning
         new: New
-      preview: new
     without_icon:
+      title: "Without an icon?"
+      description: "Will be used for system badges only. Optional."
       type: boolean
-      label: Without an icon?
-      description: Will be used for system badges only. Optional.
-      preview: false
-  fields:
-    label:
-      type: text
-      label: Label
-      preview: Badge label

components/badge/badge.preview.story.yml

+name: Preview
+slots:
+  label: "Badge label"
+props:
+  color_schema: brown-caramel
+  system_type: new
+  without_icon: false

templates/patterns/badge/pattern-badge.html.twig → components/badge/badge.twig

-{% if variant and variant|lower != 'default' %}
-  {% set attributes = attributes.addClass('fr-badge--' ~ variant|lower|replace({_: '-'})) %}
+{% if variant and variant != 'default' %}
+  {% set attributes = attributes.addClass('fr-badge--' ~ variant) %}
 {% endif %}
 
 {% if system_type %}