feat: ddd Grid tokens, utilities, examples and documentation (#2744)

Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Louis-Maxime Piton <[email protected]>
Orange-OpenSource · Oct 24, 2024 · 147459f · 147459f
1 parent 88d10c2
commit 147459f
Show file tree

Hide file tree

Showing 68 changed files with 8,292 additions and 291 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -2,19 +2,19 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "45.25 kB"
+      "maxSize": "51.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "42.0 kB"
+      "maxSize": "47.75 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",
-      "maxSize": "7.0 kB"
+      "maxSize": "9.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.min.css",
-      "maxSize": "6.25 kB"
+      "maxSize": "8.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-reboot.css",
@@ -26,19 +26,19 @@
     },
     {
       "path": "./dist/css/ouds-web-utilities.css",
-      "maxSize": "13.0 kB"
+      "maxSize": "14.25 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.min.css",
-      "maxSize": "12.0 kB"
+      "maxSize": "13.5 kB"
     },
     {
       "path": "./dist/css/ouds-web.css",
-      "maxSize": "44.75 kB"
+      "maxSize": "49.0 kB"
     },
     {
       "path": "./dist/css/ouds-web.min.css",
-      "maxSize": "41.75 kB"
+      "maxSize": "45.5 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",

diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html
@@ -11,7 +11,7 @@
     <title>Hello, world!</title>
   </head>
   <body>
-    <div class="container py-4">
+    <div class="container-fluid py-4">
       <h1>Hello, world!</h1>
 
       <div class="mt-5">

diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
@@ -2408,7 +2408,7 @@ describe('Dropdown', () => {
   it('should open the dropdown when clicking the child element inside `data-bs-toggle="dropdown"`', () => {
     return new Promise(resolve => {
       fixtureEl.innerHTML = [
-        '<div class="container">',
+        '<div class="container-fluid">',
         '  <div class="dropdown">',
         '    <button class="btn dropdown-toggle" data-bs-toggle="dropdown"><span id="childElement">Dropdown</span></button>',
         '    <div class="dropdown-menu">',

diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
@@ -222,7 +222,7 @@ describe('ScrollSpy', () => {
           '<div id="root" class="active" style="display: block">',
           '  <div class="topbar">',
           '    <div class="topbar-inner">',
-          '      <div class="container" id="ss-target">',
+          '      <div class="container-fluid" id="ss-target">',
           '        <ul class="nav">',
           '          <li class="nav-item"><a href="#masthead">Overview</a></li>',
           '          <li class="nav-item"><a href="#detail">Detail</a></li>',
@@ -300,7 +300,7 @@ describe('ScrollSpy', () => {
           '<div id="root" class="active" style="display: block">',
           '  <div class="topbar">',
           '    <div class="topbar-inner">',
-          '      <div class="container" id="ss-target">',
+          '      <div class="container-fluid" id="ss-target">',
           '        <ul class="nav">',
           '          <li class="nav-item"><a href="#masthead">Overview</a></li>',
           '          <li class="nav-item"><a href="#detail">Detail</a></li>',

diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
@@ -7,7 +7,7 @@
     <title>Alert</title>
   </head>
   <body>
-    <div class="container">
+    <div class="container-fluid">
       <h1>Alert <small>Bootstrap Visual Test</small></h1>
 
       <div class="alert alert-warning alert-dismissible fade show" role="alert">

diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
@@ -7,7 +7,7 @@
     <title>Button</title>
   </head>
   <body>
-    <div class="container">
+    <div class="container-fluid">
       <h1>Button <small>Bootstrap Visual Test</small></h1>
 
       <button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">

diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
@@ -12,7 +12,7 @@
     </style>
   </head>
   <body>
-    <div class="container">
+    <div class="container-fluid">
       <h1>Carousel <small>Bootstrap Visual Test</small></h1>
 
       <p>The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p>

diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
@@ -7,7 +7,7 @@
     <title>Collapse</title>
   </head>
   <body>
-    <div class="container">
+    <div class="container-fluid">
       <h1>Collapse <small>Bootstrap Visual Test</small></h1>
 
       <div id="accordion" role="tablist">

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
@@ -7,7 +7,7 @@
     <title>Dropdown</title>
   </head>
   <body>
-    <div class="container">
+    <div class="container-fluid">
       <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
       <nav class="navbar navbar-expand-md bg-light">

diff --git a/js/tests/visual/input.html b/js/tests/visual/input.html
@@ -8,7 +8,7 @@
     <style></style>
   </head>
   <body>
-    <div class="container">
+    <div class="container-fluid">
       <h1>Input <small>Bootstrap Visual Test</small></h1>
 
       <h2>No layout</h2>

diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
@@ -35,7 +35,7 @@
       </div>
     </nav>
 
-    <div class="container mt-3">
+    <div class="container-fluid mt-3">
       <h1>Modal <small>Bootstrap Visual Test</small></h1>
 
       <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">

diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
@@ -7,7 +7,7 @@
     <title>Popover</title>
   </head>
   <body>
-    <div class="container">
+    <div class="container-fluid">
       <h1>Popover <small>Bootstrap Visual Test</small></h1>
 
       <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">

diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
@@ -38,7 +38,7 @@
         </ul>
       </div>
     </nav>
-    <div class="container">
+    <div class="container-fluid">
       <h2 id="fat">@fat</h2>
       <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
       <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>

diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
@@ -12,7 +12,7 @@
     </style>
   </head>
   <body>
-    <div class="container">
+    <div class="container-fluid">
       <h1>Tab <small>Bootstrap Visual Test</small></h1>
 
       <h4>Tabs without fade</h4>

diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
@@ -14,7 +14,7 @@
     </style>
   </head>
   <body>
-    <div class="container">
+    <div class="container-fluid">
       <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
       <div class="row mt-3">

diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
@@ -17,7 +17,7 @@
     </style>
   </head>
   <body>
-    <div class="container">
+    <div class="container-fluid">
       <h1>Tooltip <small>OUDS Web Visual Test</small></h1>
 
       <p class="text-body-secondary">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>

diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
     "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
     "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
-    "css-lint-vars": "fusv scss/ site/assets/scss/ --ignoreFiles '**/tokens/*.scss'",
+    "css-lint-vars": "fusv scss/ site/assets/scss/ --ignoreFiles **/tokens/_component.scss,**/tokens/_raw.scss,**/tokens/_semantic.scss",
     "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",

diff --git a/scss/_containers.scss b/scss/_containers.scss
@@ -3,45 +3,70 @@
 // Set the container width, and override it for fixed navbars in media queries.
 
 @if $enable-container-classes {
-  // Single container class with breakpoint max-widths
-  .container,
+  // OUDS mod: `.container` selector is conditionally handle whenever `$enable-bootstrap-compatibility` is true
   // 100% wide container at all breakpoints
   .container-fluid {
     @include make-container();
   }
 
-  // OUDS mod: `.container-fluid` is not full width in OUDS Web
-  .container-fluid {
-    @include make-container-fluid-margin();
-  }
-  // End mod
-
-  // Responsive containers that are 100% wide until a breakpoint
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    .container-#{$breakpoint} {
-      @extend .container-fluid;
+  @if $enable-bootstrap-compatibility { // OUDS mod
+    // OUDS mod
+    // Single container class with breakpoint max-widths
+    .container {
+      @include make-container();
     }
+    // End mod
 
-    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-      %responsive-container-#{$breakpoint} {
-        max-width: $container-max-width;
+    // Responsive containers that are 100% wide until a breakpoint
+    @each $breakpoint, $container-max-width in $container-max-widths {
+      // OUDS mod: link 2xl breakpoint to xxl
+      @if $breakpoint == 2xl {
+        .container-xxl {
+          @extend .container-fluid;
+        }
       }
+      // End mod
 
-      // Extend each breakpoint which is smaller or equal to the current breakpoint
-      $extend-breakpoint: true;
+      .container-#{$breakpoint} {
+        @extend .container-fluid;
+      }
 
-      @each $name, $width in $grid-breakpoints {
-        @if ($extend-breakpoint) {
-          .container#{breakpoint-infix($name, $grid-breakpoints)} {
-            @extend %responsive-container-#{$breakpoint};
-          }
+      @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+        %responsive-container-#{$breakpoint} {
+          max-width: $container-max-width;
+        }
 
-          // Once the current breakpoint is reached, stop extending
-          @if ($breakpoint == $name) {
-            $extend-breakpoint: false;
+        // Extend each breakpoint which is smaller or equal to the current breakpoint
+        $extend-breakpoint: true;
+
+        @each $name, $width in $grid-breakpoints {
+          @if ($extend-breakpoint) {
+            .container#{breakpoint-infix($name, $grid-breakpoints)} {
+              @extend %responsive-container-#{$breakpoint};
+            }
+
+            // Once the current breakpoint is reached, stop extending
+            @if ($breakpoint == $name) {
+              $extend-breakpoint: false;
+            }
           }
         }
       }
     }
   }
+
+  // OUDS mod
+  // scss-docs-start containers-max
+  .container-max-width {
+    @include media-breakpoint-up(get-breakpoint-from-width()) {
+      --#{$prefix}container-margin-x: #{map-get($container-fluid-margin, get-breakpoint-from-width())};
+      max-width: $ouds-size-max-width-grid-grid;
+
+      .row {
+        --#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width())};
+      }
+    }
+  }
+  // scss-docs-end containers-max
+  // End mod
 }
diff --git a/scss/_functions.scss b/scss/_functions.scss
@@ -12,7 +12,7 @@
       // Do nothing
     } @else if not comparable($prev-num, $num) {
       @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-    } @else if $prev-num >= $num {
+    } @else if $prev-num > $num { // OUDS mod: ascending order can be equal
       @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
     }
     $prev-key: $key;

diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -180,6 +180,41 @@ $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "l
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
-$gutters: $spacers !default;
+// OUDS mod
+// scss-docs-start grid-gutters
+$grid-gutter-widths: (
+  2xs: $ouds-grid-2xs-column-gap, // 8px
+  xs: $ouds-grid-xs-column-gap, // 16px
+  sm: $ouds-grid-sm-column-gap, // 16px
+  md: $ouds-grid-md-column-gap, // 24px
+  lg: $ouds-grid-lg-column-gap, // 24px
+  xl: $ouds-grid-xl-column-gap, // 32px
+  2xl: $ouds-grid-2xl-column-gap, // 32px
+  3xl: $ouds-grid-3xl-column-gap // 40px
+) !default;
+// scss-docs-end grid-gutters
+
+// scss-docs-start gutters
+$gutters: (
+  none: 0,
+  smash: 2px,
+  shortest: 4px,
+  shorter: 8px,
+  short: 12px,
+  medium: 16px,
+  tall: 24px,
+  taller: 32px,
+  tallest: 40px,
+  spacious: 48px,
+  huge: 56px,
+  jumbo: 64px
+) !default;
+// scss-docs-end gutters
+
+@if $enable-bootstrap-compatibility {
+  // Add Bootstrap gutters
+  $gutters: map-merge($gutters, $spacers);
+}
+// End mod
 
 $alert-colors: map-remove($theme-colors, "primary", "secondary", "light", "dark") !default; // OUDS mod