Pierre proposal

components/grid_row/grid_row.component.yml

-name: "Grid row"
-description: "The grid system uses a series of containers, rows, and columns to layout and align content https://getbootstrap.com/docs/4.3/layout/grid/ For simple use cases only. For more powerful needs, please use bootstrap_grid_row_* layouts."
+name: "Dynamic grid row"
+description: "Content is dynamically cycling in the configured grid."
 links:
   - "https://www.systeme-de-design.gouv.fr/fondamentaux/grille-et-points-de-rupture"
 slots:
@@ -9,163 +9,19 @@ slots:
 props:
   type: object
   properties:
-    with_container:
-      title: "With container?"
-      description: "Is the row wrapped in a container? Containers provide a means to center and horizontally pad your site’s contents."
-      type: boolean
-    fluid_container:
-      title: "Fluid Container?"
-      description: "Is the row wrapped in a fluid container?"
-      type: boolean
-    with_gutters:
-      title: "With gutters?"
-      description: "The gutters between columns in our predefined grid classes can be added with .fr-grid-row--gutters."
-      type: boolean
-    fr_col:
-      title: All
-      type: string
-      enum:
-        - fr-col-1
-        - fr-col-2
-        - fr-col-3
-        - fr-col-4
-        - fr-col-5
-        - fr-col-6
-        - fr-col-7
-        - fr-col-8
-        - fr-col-9
-        - fr-col-10
-        - fr-col-11
-        - fr-col-12
-      "meta:enum":
-        fr-col-1: 1
-        fr-col-2: 2
-        fr-col-3: "3 (default)"
-        fr-col-4: 4
-        fr-col-5: 5
-        fr-col-6: 6
-        fr-col-7: 7
-        fr-col-8: 8
-        fr-col-9: 9
-        fr-col-10: 10
-        fr-col-11: 11
-        fr-col-12: 12
-    fr_col_sm:
-      title: Small
-      type: string
-      enum:
-        - fr-col-sm-1
-        - fr-col-sm-2
-        - fr-col-sm-3
-        - fr-col-sm-4
-        - fr-col-sm-5
-        - fr-col-sm-6
-        - fr-col-sm-7
-        - fr-col-sm-8
-        - fr-col-sm-9
-        - fr-col-sm-10
-        - fr-col-sm-11
-        - fr-col-sm-12
-      "meta:enum":
-        fr-col-sm-1: 1
-        fr-col-sm-2: 2
-        fr-col-sm-3: 3
-        fr-col-sm-4: 4
-        fr-col-sm-5: 5
-        fr-col-sm-6: 6
-        fr-col-sm-7: 7
-        fr-col-sm-8: 8
-        fr-col-sm-9: 9
-        fr-col-sm-10: 10
-        fr-col-sm-11: 11
-        fr-col-sm-12: 12
-    fr_col_md:
-      title: Medium
-      type: string
-      enum:
-        - fr-col-md-1
-        - fr-col-md-2
-        - fr-col-md-3
-        - fr-col-md-4
-        - fr-col-md-5
-        - fr-col-md-6
-        - fr-col-md-7
-        - fr-col-md-8
-        - fr-col-md-9
-        - fr-col-md-10
-        - fr-col-md-11
-        - fr-col-md-12
-      "meta:enum":
-        fr-col-md-1: 1
-        fr-col-md-2: 2
-        fr-col-md-3: 3
-        fr-col-md-4: 4
-        fr-col-md-5: 5
-        fr-col-md-6: 6
-        fr-col-md-7: 7
-        fr-col-md-8: 8
-        fr-col-md-9: 9
-        fr-col-md-10: 10
-        fr-col-md-11: 11
-        fr-col-md-12: 12
-    fr_col_lg:
-      title: Large
-      type: string
-      enum:
-        - fr-col-lg-1
-        - fr-col-lg-2
-        - fr-col-lg-3
-        - fr-col-lg-4
-        - fr-col-lg-5
-        - fr-col-lg-6
-        - fr-col-lg-7
-        - fr-col-lg-8
-        - fr-col-lg-9
-        - fr-col-lg-10
-        - fr-col-lg-11
-        - fr-col-lg-12
-      "meta:enum":
-        fr-col-lg-1: 1
-        fr-col-lg-2: 2
-        fr-col-lg-3: 3
-        fr-col-lg-4: 4
-        fr-col-lg-5: 5
-        fr-col-lg-6: 6
-        fr-col-lg-7: 7
-        fr-col-lg-8: 8
-        fr-col-lg-9: 9
-        fr-col-lg-10: 10
-        fr-col-lg-11: 11
-        fr-col-lg-12: 12
-    fr_col_xl:
-      title: "Extra large"
+    container_type:
+      title: "Container type"
       type: string
       enum:
-        - fr-col-xl-1
-        - fr-col-xl-2
-        - fr-col-xl-3
-        - fr-col-xl-4
-        - fr-col-xl-5
-        - fr-col-xl-6
-        - fr-col-xl-7
-        - fr-col-xl-8
-        - fr-col-xl-9
-        - fr-col-xl-10
-        - fr-col-xl-11
-        - fr-col-xl-12
+        - container
+        - fluid
       "meta:enum":
-        fr-col-xl-1: 1
-        fr-col-xl-2: 2
-        fr-col-xl-3: 3
-        fr-col-xl-4: 4
-        fr-col-xl-5: 5
-        fr-col-xl-6: 6
-        fr-col-xl-7: 7
-        fr-col-xl-8: 8
-        fr-col-xl-9: 9
-        fr-col-xl-10: 10
-        fr-col-xl-11: 11
-        fr-col-xl-12: 12
+        container: "Container"
+        fluid: "Fluid container (no external margin)"
+    with_gutters:
+      title: "With gutters?"
+      description: "The gutters between columns"
+      type: boolean
     horizontal_align:
       title: "Horizontal alignement"
       type: string
@@ -188,3 +44,43 @@ props:
         top: Top
         bottom: Bottom
         middle: Middle
+    col:
+      title: "Column span"
+      type: integer
+      enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    col_sm:
+      title: "Column span (small)"
+      type: integer
+      enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    col_md:
+      title: "Column span (medium)"
+      type: integer
+      enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    col_lg:
+      title: "Column span (large)"
+      type: integer
+      enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    col_xl:
+      title: "Column span (extra large)"
+      type: integer
+      enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    offset:
+      title: "Column offset"
+      type: integer
+      enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    offset_sm:
+      title: "Column offset (small)"
+      type: integer
+      enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    offset_md:
+      title: "Column offset (medium)"
+      type: integer
+      enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    offset_lg:
+      title: "Column offset (large)"
+      type: integer
+      enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    offset_xl:
+      title: "Column offset (extra large)"
+      type: integer
+      enum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]