diff --git a/components/grid_row/grid_row.component.yml b/components/grid_row/grid_row.component.yml
index e16b92191ef3e80c30d2c0e5e2ee7dcb6c089d5a..8bef17badd36eedad591814a9c1b59ed47c67717 100644
--- a/components/grid_row/grid_row.component.yml
+++ b/components/grid_row/grid_row.component.yml
@@ -84,3 +84,11 @@ props:
title: "Column offset (extra large)"
type: integer
enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+ container_attributes:
+ title: "Container attributes"
+ description: "The attributes to customize the tag with the container class if present."
+ $ref: "ui-patterns://attributes"
+ col_attributes:
+ title: "Column attributes"
+ description: "The attributes to customize the tag with the col class."
+ $ref: "ui-patterns://attributes"
diff --git a/components/grid_row/grid_row.twig b/components/grid_row/grid_row.twig
index e01dd93b3068400e375f339f396c6d12aa0c9d6e..cfbf137dc9b1683a2fd3ce96610c43334df10910 100644
--- a/components/grid_row/grid_row.twig
+++ b/components/grid_row/grid_row.twig
@@ -1,10 +1,12 @@
{% set attributes = attributes.addClass([
+ 'fr-grid-row',
with_gutters ? 'fr-grid-row--gutters',
horizontal_align ? 'fr-grid-row--' ~ horizontal_align,
vertical_align ? 'fr-grid-row--' ~ vertical_align,
]) %}
-{% set col_attributes = create_attribute().addClass([
+{% set col_attributes = create_attribute(col_attributes|default({})).addClass([
+ 'fr-col',
col ? 'fr-col-' ~ col,
col_sm ? 'fr-col-sm-' ~ col_sm,
col_md ? 'fr-col-md-' ~ col_md,
@@ -17,16 +19,16 @@
offset_xl ? 'fr-col-offset-xl-' ~ offset_xl,
]) %}
{% if container_type %}
-{% set container_attributes = create_attribute().addClass([
+{% set container_attributes = create_attribute(container_attributes|default({})).addClass([
'fr-container',
(container_type == 'fluid') ? 'fr-container--fluid',
]) %}
<div{{ container_attributes }}>
{% endif %}
- <div{{ attributes.addClass('fr-grid-row') }}>
+ <div{{ attributes }}>
{% set content = content is sequence ? content : [content] %}
{% for item in content %}
- <div{{ col_attributes.addClass('fr-col') }}>
+ <div{{ col_attributes }}>
{{ item }}
</div>
{% endfor %}
diff --git a/components/grid_row_1/grid_row_1.component.yml b/components/grid_row_1/grid_row_1.component.yml
index 224e5ba6bc9c672e4adf5ef7645dfe160eaab1de..592c62dd92c643fbba93cd62d5458435f872fc81 100644
--- a/components/grid_row_1/grid_row_1.component.yml
+++ b/components/grid_row_1/grid_row_1.component.yml
@@ -84,3 +84,11 @@ props:
title: "Column offset (extra large)"
type: integer
enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+ container_attributes:
+ title: "Container attributes"
+ description: "The attributes to customize the tag with the container class if present."
+ $ref: "ui-patterns://attributes"
+ col_attributes:
+ title: "Column attributes"
+ description: "The attributes to customize the tag with the col class."
+ $ref: "ui-patterns://attributes"
diff --git a/components/grid_row_1/grid_row_1.twig b/components/grid_row_1/grid_row_1.twig
index 521d9556ad4777f964a4f835d8732964d6be9a46..55498674e8d46cc967ab8a77c3f9bbf9644ee9f8 100644
--- a/components/grid_row_1/grid_row_1.twig
+++ b/components/grid_row_1/grid_row_1.twig
@@ -1,10 +1,12 @@
{% set attributes = attributes.addClass([
+ 'fr-grid-row',
with_gutters ? 'fr-grid-row--gutters',
horizontal_align ? 'fr-grid-row--' ~ horizontal_align,
vertical_align ? 'fr-grid-row--' ~ vertical_align,
]) %}
-{% set col_attributes = create_attribute().addClass([
+{% set col_attributes = create_attribute(col_attributes|default({})).addClass([
+ 'fr-col',
col ? 'fr-col-' ~ col,
col_sm ? 'fr-col-sm-' ~ col_sm,
col_md ? 'fr-col-md-' ~ col_md,
@@ -17,14 +19,14 @@
offset_xl ? 'fr-col-offset-xl-' ~ offset_xl,
]) %}
{% if container_type %}
-{% set container_attributes = create_attribute().addClass([
+{% set container_attributes = create_attribute(container_attributes|default({})).addClass([
'fr-container',
(container_type == 'fluid') ? 'fr-container--fluid',
]) %}
<div{{ container_attributes }}>
{% endif %}
- <div{{ attributes.addClass('fr-grid-row') }}>
- <div{{ col_attributes.addClass('fr-col') }}>
+ <div{{ attributes }}>
+ <div{{ col_attributes }}>
{{ content }}
</div>
</div>
diff --git a/components/grid_row_2/grid_row_2.component.yml b/components/grid_row_2/grid_row_2.component.yml
index 20687dc2bdcbef44c113af5be4caca0a5cb063d9..31abd7ebe2c0f46511c16f904cead3929a7925e5 100644
--- a/components/grid_row_2/grid_row_2.component.yml
+++ b/components/grid_row_2/grid_row_2.component.yml
@@ -118,3 +118,19 @@ props:
items:
type: integer
enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+ container_attributes:
+ title: "Container attributes"
+ description: "The attributes to customize the tag with the container class if present."
+ $ref: "ui-patterns://attributes"
+ col_attributes:
+ title: "Column attributes"
+ description: "The attributes to customize the tag with the col class."
+ $ref: "ui-patterns://attributes"
+ first_attributes:
+ title: "First column attributes"
+ description: "The attributes to customize the tag the first column."
+ $ref: "ui-patterns://attributes"
+ second_attributes:
+ title: "Second column attributes"
+ description: "The attributes to customize the tag the second column."
+ $ref: "ui-patterns://attributes"
diff --git a/components/grid_row_2/grid_row_2.twig b/components/grid_row_2/grid_row_2.twig
index 5406ff7c3440650e42f3b6b5ae9190f31b797515..d361349f4cf2b5cc5f5802542de760d5d75e370c 100644
--- a/components/grid_row_2/grid_row_2.twig
+++ b/components/grid_row_2/grid_row_2.twig
@@ -1,18 +1,24 @@
{% set attributes = attributes.addClass([
+ 'fr-grid-row',
with_gutters ? 'fr-grid-row--gutters',
horizontal_align ? 'fr-grid-row--' ~ horizontal_align,
vertical_align ? 'fr-grid-row--' ~ vertical_align,
]) %}
{% if container_type %}
-{% set container_attributes = create_attribute().addClass([
+{% set container_attributes = create_attribute(container_attributes|default({})).addClass([
'fr-container',
(container_type == 'fluid') ? 'fr-container--fluid',
]) %}
<div{{ container_attributes }}>
{% endif %}
- <div{{ attributes.addClass('fr-grid-row') }}>
+ <div{{ attributes }}>
+ {% set region_attributes = [
+ first_attributes|default({}),
+ second_attributes|default({}),
+ ] %}
{% for region in [first, second] %}
- {% set col_attributes = create_attribute().addClass([
+ {% set this_col_attributes = create_attribute(col_attributes|default({})|merge(region_attributes[loop.index0])).addClass([
+ 'fr-col',
cols[loop.index0] ? 'fr-col-' ~ cols[loop.index0],
cols_sm[loop.index0] ? 'fr-col-sm-' ~ cols_sm[loop.index0],
cols_md[loop.index0] ? 'fr-col-md-' ~ cols_md[loop.index0],
@@ -24,7 +30,7 @@
offset_lg[loop.index0] ? 'fr-col-offset-lg-' ~ offset_lg[loop.index0],
offset_xl[loop.index0] ? 'fr-col-offset-xl-' ~ offset_xl[loop.index0],
]) %}
- <div{{ col_attributes.addClass('fr-col') }}>
+ <div{{ this_col_attributes }}>
{{ region }}
</div>
{% endfor %}
diff --git a/components/grid_row_3/grid_row_3.component.yml b/components/grid_row_3/grid_row_3.component.yml
index 0f99dd30a6a777f85e2c9506231099074e955121..0f1ebfe5667f261999ab70fd4c3b392f844e903d 100644
--- a/components/grid_row_3/grid_row_3.component.yml
+++ b/components/grid_row_3/grid_row_3.component.yml
@@ -121,3 +121,23 @@ props:
items:
type: integer
enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+ container_attributes:
+ title: "Container attributes"
+ description: "The attributes to customize the tag with the container class if present."
+ $ref: "ui-patterns://attributes"
+ col_attributes:
+ title: "Column attributes"
+ description: "The attributes to customize the tag with the col class."
+ $ref: "ui-patterns://attributes"
+ first_attributes:
+ title: "First column attributes"
+ description: "The attributes to customize the tag the first column."
+ $ref: "ui-patterns://attributes"
+ second_attributes:
+ title: "Second column attributes"
+ description: "The attributes to customize the tag the second column."
+ $ref: "ui-patterns://attributes"
+ third_attributes:
+ title: "Third column attributes"
+ description: "The attributes to customize the tag the third column."
+ $ref: "ui-patterns://attributes"
diff --git a/components/grid_row_3/grid_row_3.twig b/components/grid_row_3/grid_row_3.twig
index 9189e1e42eabdef956ba009284a8bc8f3d8b46e4..b8eecd68e71827b70dec7d172c4f157f94a78baf 100644
--- a/components/grid_row_3/grid_row_3.twig
+++ b/components/grid_row_3/grid_row_3.twig
@@ -1,18 +1,25 @@
{% set attributes = attributes.addClass([
+ 'fr-grid-row',
with_gutters ? 'fr-grid-row--gutters',
horizontal_align ? 'fr-grid-row--' ~ horizontal_align,
vertical_align ? 'fr-grid-row--' ~ vertical_align,
]) %}
{% if container_type %}
-{% set container_attributes = create_attribute().addClass([
+{% set container_attributes = create_attribute(container_attributes|default({})).addClass([
'fr-container',
(container_type == 'fluid') ? 'fr-container--fluid',
]) %}
<div{{ container_attributes }}>
{% endif %}
- <div{{ attributes.addClass('fr-grid-row') }}>
+ <div{{ attributes }}>
+ {% set region_attributes = [
+ first_attributes|default({}),
+ second_attributes|default({}),
+ third_attributes|default({}),
+ ] %}
{% for region in [first, second, third] %}
- {% set col_attributes = create_attribute().addClass([
+ {% set this_col_attributes = create_attribute(col_attributes|default({})|merge(region_attributes[loop.index0])).addClass([
+ 'fr-col',
cols[loop.index0] ? 'fr-col-' ~ cols[loop.index0],
cols_sm[loop.index0] ? 'fr-col-sm-' ~ cols_sm[loop.index0],
cols_md[loop.index0] ? 'fr-col-md-' ~ cols_md[loop.index0],
@@ -24,7 +31,7 @@
offset_lg[loop.index0] ? 'fr-col-offset-lg-' ~ offset_lg[loop.index0],
offset_xl[loop.index0] ? 'fr-col-offset-xl-' ~ offset_xl[loop.index0],
]) %}
- <div{{ col_attributes.addClass('fr-col') }}>
+ <div{{ this_col_attributes }}>
{{ region }}
</div>
{% endfor %}
diff --git a/components/grid_row_4/grid_row_4.component.yml b/components/grid_row_4/grid_row_4.component.yml
index a76e25b743136acc2e9948f58819030e6ff64ae0..9d2e7478ddda8ab0c6730de9a7d05223f53508be 100644
--- a/components/grid_row_4/grid_row_4.component.yml
+++ b/components/grid_row_4/grid_row_4.component.yml
@@ -124,3 +124,27 @@ props:
items:
type: integer
enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+ container_attributes:
+ title: "Container attributes"
+ description: "The attributes to customize the tag with the container class if present."
+ $ref: "ui-patterns://attributes"
+ col_attributes:
+ title: "Column attributes"
+ description: "The attributes to customize the tag with the col class."
+ $ref: "ui-patterns://attributes"
+ first_attributes:
+ title: "First column attributes"
+ description: "The attributes to customize the tag the first column."
+ $ref: "ui-patterns://attributes"
+ second_attributes:
+ title: "Second column attributes"
+ description: "The attributes to customize the tag the second column."
+ $ref: "ui-patterns://attributes"
+ third_attributes:
+ title: "Third column attributes"
+ description: "The attributes to customize the tag the third column."
+ $ref: "ui-patterns://attributes"
+ fourth_attributes:
+ title: "Fourth column attributes"
+ description: "The attributes to customize the tag the fourth column."
+ $ref: "ui-patterns://attributes"
diff --git a/components/grid_row_4/grid_row_4.twig b/components/grid_row_4/grid_row_4.twig
index 4332ba47005f2be2387d094e5dd88ed8e37141b0..68d3d5c62e7ba5f771a059c1e6e3d93018399811 100644
--- a/components/grid_row_4/grid_row_4.twig
+++ b/components/grid_row_4/grid_row_4.twig
@@ -1,18 +1,26 @@
{% set attributes = attributes.addClass([
+ 'fr-grid-row',
with_gutters ? 'fr-grid-row--gutters',
horizontal_align ? 'fr-grid-row--' ~ horizontal_align,
vertical_align ? 'fr-grid-row--' ~ vertical_align,
]) %}
{% if container_type %}
-{% set container_attributes = create_attribute().addClass([
+{% set container_attributes = create_attribute(container_attributes|default({})).addClass([
'fr-container',
(container_type == 'fluid') ? 'fr-container--fluid',
]) %}
<div{{ container_attributes }}>
{% endif %}
- <div{{ attributes.addClass('fr-grid-row') }}>
+ {% set region_attributes = [
+ first_attributes|default({}),
+ second_attributes|default({}),
+ third_attributes|default({}),
+ fourth_attributes|default({}),
+ ] %}
+ <div{{ attributes }}>
{% for region in [first, second, third, fourth] %}
- {% set col_attributes = create_attribute().addClass([
+ {% set this_col_attributes = create_attribute(col_attributes|default({})|merge(region_attributes[loop.index0])).addClass([
+ 'fr-col',
cols[loop.index0] ? 'fr-col-' ~ cols[loop.index0],
cols_sm[loop.index0] ? 'fr-col-sm-' ~ cols_sm[loop.index0],
cols_md[loop.index0] ? 'fr-col-md-' ~ cols_md[loop.index0],
@@ -24,7 +32,7 @@
offset_lg[loop.index0] ? 'fr-col-offset-lg-' ~ offset_lg[loop.index0],
offset_xl[loop.index0] ? 'fr-col-offset-xl-' ~ offset_xl[loop.index0],
]) %}
- <div{{ col_attributes.addClass('fr-col') }}>
+ <div{{ this_col_attributes }}>
{{ region }}
</div>
{% endfor %}
diff --git a/templates/system/page.html.twig b/templates/system/page.html.twig
index cb32cd55f76ba2d902ab5f5a6a8041ae42acdbe5..96675155cf9aa4711adc956b4fcc5cf1983c9055 100644
--- a/templates/system/page.html.twig
+++ b/templates/system/page.html.twig
@@ -70,24 +70,66 @@
{{ page.top }}
<main role="main" class="{{ container }} fr-mb-4w fr-mt-4w">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
- <div class="fr-grid-row fr-grid-row--gutters">
- <div class="fr-col" style="order: 2">
- {{ page.content }}
- </div>
-
- {% if page.sidebar_first %}
- <aside class="fr-col" role="complementary" style="order: 1">
- {{ page.sidebar_first }}
- </aside>
- {% endif %}
-
- {% if page.sidebar_second %}
- <aside class="fr-col" role="complementary" style="order: 3">
- {{ page.sidebar_second }}
- </aside>
- {% endif %}
- </div>
-
+ {% if page.sidebar_first and page.sidebar_second %}
+ {{ include('ui_suite_dsfr:grid_row_3', {
+ cols: [6, 3, 3],
+ cols_sm: [12, 12, 12],
+ cols_md: [12, 6, 6],
+ cols_lg: [6, 3, 3],
+ first: page.content,
+ second: page.sidebar_first,
+ third: page.sidebar_second,
+ with_gutters: true,
+ first_attributes: {
+ style: 'order: 2',
+ },
+ second_attributes: {
+ style: 'order: 1',
+ role: 'complementary',
+ },
+ third_attributes: {
+ style: 'order: 3',
+ role: 'complementary',
+ },
+ }, with_context: false) }}
+ {% elseif page.sidebar_first and not page.sidebar_second %}
+ {{ include('ui_suite_dsfr:grid_row_2', {
+ cols: [9, 3],
+ cols_sm: [12, 12],
+ cols_lg: [9, 3],
+ first: page.content,
+ second: page.sidebar_first,
+ with_gutters: true,
+ first_attributes: {
+ style: 'order: 2',
+ },
+ second_attributes: {
+ style: 'order: 1',
+ role: 'complementary',
+ },
+ }, with_context: false) }}
+ {% elseif not page.sidebar_first and page.sidebar_second %}
+ {{ include('ui_suite_dsfr:grid_row_2', {
+ cols: [9, 3],
+ cols_sm: [12, 12],
+ cols_lg: [9, 3],
+ first: page.content,
+ second: page.sidebar_second,
+ with_gutters: true,
+ first_attributes: {
+ style: 'order: 1',
+ },
+ second_attributes: {
+ style: 'order: 2',
+ role: 'complementary',
+ },
+ }, with_context: false) }}
+ {% else %}
+ {{ include('ui_suite_dsfr:grid_row_1', {
+ content: page.content,
+ with_gutters: true,
+ }, with_context: false) }}
+ {% endif %}
</main>
{{ page.bottom }}
{{ include('ui_suite_dsfr:footer', {