feat(lib): Add Footer as a draft component (#3389)

Co-authored-by: Maxime Lardenois <maxime.lardenois@orange.com>
Co-authored-by: Vincent Prothais <vincent.prothais@orange.com>

Author: 3 people

scss/_footer.scss

@@ -5,10 +5,6 @@
   --#{$prefix}footer-padding-bottom: 0;
   --#{$prefix}footer-color: #{$footer-color};
   --#{$prefix}footer-title-margin-bottom: 0;
-  --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
-  --#{$prefix}footer-title-font-weight: #{$footer-title-font-weight};
-  --#{$prefix}footer-title-line-height: #{$footer-line-height-md};
-  --#{$prefix}footer-title-letter-spacing: #{$footer-letter-spacing};
   // scss-docs-end footer-css-vars
   --#{$prefix}navbar-padding-y: 0;
   --#{$prefix}navbar-nav-link-padding-y: 0;
@@ -47,11 +43,9 @@
     }
 
     .footer-heading {
+      @include get-font-size("body-large");
+      max-width: unset;
       margin-bottom: var(--#{$prefix}footer-title-margin-bottom);
-      font-size: var(--#{$prefix}footer-title-font-size);
-      font-weight: var(--#{$prefix}footer-title-font-weight);
-      line-height: var(--#{$prefix}footer-title-line-height);
-      letter-spacing: var(--#{$prefix}footer-title-letter-spacing);
       white-space: nowrap;
     }
   }
@@ -69,8 +63,6 @@
     --#{$prefix}footer-padding-top: #{$footer-social-padding-top};
     --#{$prefix}footer-padding-bottom: #{$footer-social-padding-bottom};
     --#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom};
-    --#{$prefix}footer-title-font-size: #{$footer-font-size-sm};
-    --#{$prefix}footer-title-line-height: #{$footer-line-height-sm};
     // scss-docs-end footer-social-css-vars
 
     display: flex;
@@ -138,8 +130,6 @@
       // scss-docs-start footer-social-md-css-vars
       --#{$prefix}footer-padding-top: #{$footer-social-padding-top-md};
       --#{$prefix}footer-title-margin-bottom: #{$footer-social-title-margin-bottom-md};
-      --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
-      --#{$prefix}footer-title-line-height: #{$footer-line-height-md};
       // scss-docs-end footer-social-md-css-vars
 
       flex-direction: row;

site/data/components-details.ts

@@ -99,11 +99,43 @@ export const componentsDetails: ComponentCardData[] = [
         </li>
       </ul>`
   },
+  {
+    name: 'Footer',
+    category: 'Navigation',
+    snippet: `
+      <footer class="footer navbar w-75" data-bs-theme="dark">
+        <h2 class="visually-hidden">Sitemap &amp; information</h2>
+        <div class="container-fluid container-max-width footer-nav px-small py-2xl-small d-lg-none d-sm-none d-md-block">
+          <nav class="accordion">
+            <div class="row">
+              <div class="footer-column">
+                <h3 class="accordion-header footer-heading">
+                  <button class="accordion-button collapsed container-fluid container-max-width px-none d-md-none" type="button">Label</button>
+                  <span class="d-none d-md-flex">Label</span>
+                </h3>
+                <div class="container-fluid container-max-width accordion-collapse collapse">
+                  <ul class="navbar-nav ps-large ps-md-none">
+                    <li><a class="nav-link" href="#">Label</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </nav>
+        </div>
+        <div class="border-bottom border-thin border-default d-lg-none d-sm-none d-md-block"></div>
+        <div class="container-fluid container-max-width footer-terms px-small">
+          <ul class="navbar-nav gap-md-large">
+            <li>© Label</li>
+            <li><a class="nav-link" href="#">Label</a></li>
+          </ul>
+        </div>
+      </footer>`
+  },
   {
     name: 'Header',
     category: 'Navigation',
     snippet: `
-      <header class="header-minimized">
+      <header class="header-minimized w-75">
         <nav class="navbar navbar-expand-lg">
           <div class="container-fluid container-max-width px-small">
             <div class="navbar-brand me-auto me-lg-xlarge">

site/data/sidebar-components.yml

@@ -10,6 +10,8 @@
     - title: Checkbox
     - title: Chips
     - title: Divider
+    - title: Footer
+      draft: true
     - title: Header
       draft: true
     - title: Icon
@@ -41,8 +43,6 @@
       coming_soon: true
     - title: Dropdown
       coming_soon: true
-    - title: Footer
-      coming_soon: true
     - title: List group
       coming_soon: true
     - title: Local navigation

site/src/components/footer/Footer.astro

@@ -20,7 +20,7 @@ const { title } = Astro.props
         <div class="footer-column col-md-6 col-lg-2">
           <h3 class="accordion-header footer-heading" id="headingGuides">
             <button
-              class="accordion-button collapsed container-fluid container-max-width px-2xsmall d-md-none"
+              class="accordion-button collapsed container-fluid container-max-width px-gridmargin d-md-none"
               type="button"
               data-bs-toggle="collapse"
               data-bs-target="#collapseGuides"
@@ -36,7 +36,7 @@ const { title } = Astro.props
             class="container-fluid container-max-width accordion-collapse collapse"
             data-bs-parent="#sitemapAccordion"
           >
-            <ul class="navbar-nav">
+            <ul class="navbar-nav ps-large ps-md-none">
               <li>
                 <a
                   class:list={['nav-link', { active: Astro.url.pathname.includes('getting-started') }]}
@@ -60,7 +60,7 @@ const { title } = Astro.props
               <li>
                 <a
                   class:list={['nav-link', { active: Astro.url.pathname.includes('dual-mode') }]}
-                  {...Astro.url.pathname.includes('customize') && { 'aria-current': 'true' }}
+                  {...Astro.url.pathname.includes('dual-mode') && { 'aria-current': 'true' }}
                   href={getVersionedDocsPath('dual-mode')}
                   aria-describedby="headingGuides"
                 >
@@ -73,7 +73,7 @@ const { title } = Astro.props
         <div class="footer-column col-md-6 col-lg-2">
           <h3 class="accordion-header footer-heading" id="headingProjects">
             <button
-              class="accordion-button collapsed container-fluid container-max-width px-2xsmall d-md-none"
+              class="accordion-button collapsed container-fluid container-max-width px-gridmargin d-md-none"
               type="button"
               data-bs-toggle="collapse"
               data-bs-target="#collapseProjects"
@@ -89,7 +89,7 @@ const { title } = Astro.props
             class="container-fluid container-max-width accordion-collapse collapse"
             data-bs-parent="#sitemapAccordion"
           >
-            <ul class="navbar-nav">
+            <ul class="navbar-nav ps-large ps-md-none">
               <li>
                 <a
                   class="nav-link"
@@ -126,10 +126,10 @@ const { title } = Astro.props
             </ul>
           </div>
         </div>
-        <div class="footer-column col-md-6 col-lg-2">
+        <div class="footer-column col-md-6 col-lg-2 mt-md-xlarge mt-lg-none">
           <h3 class="accordion-header footer-heading" id="headingCommunity">
             <button
-              class="accordion-button collapsed container-fluid container-max-width px-2xsmall d-md-none"
+              class="accordion-button collapsed container-fluid container-max-width px-gridmargin d-md-none"
               type="button"
               data-bs-toggle="collapse"
               data-bs-target="#collapseCommunity"
@@ -145,7 +145,7 @@ const { title } = Astro.props
             class="container-fluid container-max-width accordion-collapse collapse"
             data-bs-parent="#sitemapAccordion"
           >
-            <ul class="navbar-nav">
+            <ul class="navbar-nav ps-large ps-md-none">
               <li>
                 <a
                   class="nav-link"
@@ -182,10 +182,10 @@ const { title } = Astro.props
             </ul>
           </div>
         </div>
-        <div class="footer-column col-md-6 col-lg-2">
+        <div class="footer-column col-md-6 col-lg-2 mt-md-xlarge mt-lg-none">
           <h3 class="accordion-header footer-heading" id="headingAbout">
             <button
-              class="accordion-button collapsed container-fluid container-max-width px-2xsmall d-md-none"
+              class="accordion-button collapsed container-fluid container-max-width px-gridmargin d-md-none"
               type="button"
               data-bs-toggle="collapse"
               data-bs-target="#collapseAbout"
@@ -201,7 +201,7 @@ const { title } = Astro.props
             class="container-fluid container-max-width accordion-collapse collapse"
             data-bs-parent="#sitemapAccordion"
           >
-            <ul class="navbar-nav">
+            <ul class="navbar-nav ps-large ps-md-none">
               <li>
                 <a
                   class:list={['nav-link', { active: Astro.url.pathname.includes('resources') }]}
@@ -267,9 +267,9 @@ const { title } = Astro.props
         </div>
         <!-- OUDS mod: footer specific adaptations -->
         <div
-          class="footer-column accordion-header col-md-12 col-lg-4 mb-large pt-large pt-lg-2xlarge px-2xsmall px-lg-none fw-bold small"
+          class="footer-column accordion-header col-md-12 col-lg-4 mb-large fw-normal small pt-medium pt-md-2xlarge pt-lg-none"
         >
-          <p class="mb-lg-2xsmall">
+          <p class="px-gridmargin px-md-none">
             This documentation is an adaptation made by Orange. Original version designed and built with all the love in
             the world by the <a href="https://github.com/orgs/twbs/people" target="_blank" rel="noopener"
               >Bootstrap core team</a
@@ -279,7 +279,7 @@ const { title } = Astro.props
               rel="noopener">their contributors</a
             >.
           </p>
-          <p class="mb-lg-2xsmall">
+          <p class="px-gridmargin px-md-none">
             Orange modified code licensed <a
               href={`${getConfig().repo}/blob/main/LICENSE`}
               target="_blank"
@@ -294,8 +294,8 @@ const { title } = Astro.props
               >CC BY 3.0</a
             >.
           </p>
-          <p class="mb-lg-2xsmall">Currently v{getConfig().current_version}.</p>
-          <p class="mb-lg-2xsmall">
+          <p class="px-gridmargin px-md-none">Currently v{getConfig().current_version}.</p>
+          <p class="px-gridmargin px-md-none">
             <a href="https://www.netlify.com" target="_blank" rel="noopener">
               <img
                 src="https://www.netlify.com/img/global/badges/netlify-dark.svg"

site/src/content/docs/components/footer.mdx

@@ -1,9 +1,111 @@
 ---
 title: Footer
-description: Documentation and examples for a powerful and responsive OUDS Web’s footer. It includes support for branding, navigation and more.
+description: Documentation and examples for a responsive OUDS Web’s footer. It includes support for branding, navigation and more.
 aliases:
   - "/docs/components/footer/"
 toc: true
 ---
 
-<CalloutSoon />
+import { getVersionedDocsPath } from '@libs/path'
+
+<Callout type="negative" title="Draft component">
+  The footer component is not yet designed, and this component is only a draft for the moment. It will be updated in the future with the final design and will certainly need adjustments regarding the DOM. Use it as a temporary component to speed up your development.
+
+  Please refer to the [Footer in the Boosted documentation](https://boosted.orange.com/docs/components/footer/) to have a full view of the footer component and its variations. You’ll only need to adapt the utilities and the components inside the DOM.
+</Callout>
+
+<Callout type="warning" title="Missing sections">
+  The social button and the title content sections are not available yet since we don’t have these in our developed components.
+</Callout>
+
+<Callout type="warning">
+  Mandatory changes from Boosted:
+  - `.accordion-button` should have `.px-gridmargin` to align with the rest of the content, read [our documentation about it]([[docsref:/utilities/spacing#grid-measures]]).
+  - `.navbar-nav` inside the `.footer-nav` should have `.ps-large.ps-md-none` to better convey information.
+  - Already existing components should be replaced inside the footer, such as the text input and the buttons.
+</Callout>
+
+## Footer
+
+Here is a simple footer example, which is responsive and will wrap on smaller screens. Take a look at the [Boosted footer](https://boosted.orange.com/docs/components/footer/#example).
+
+<Example buttonLabel="footer" class="p-none" code={`<footer class="footer navbar" data-bs-theme="dark">
+    <h2 class="visually-hidden">Sitemap &amp; information</h2>
+    <div class="container-fluid container-max-width footer-nav">
+      <nav class="accordion" id="accordion1" aria-label="Sitemap footer 1">
+        <div class="row">
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingOne1">
+              <button class="accordion-button collapsed container-fluid container-max-width px-gridmargin d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne1" aria-expanded="false" aria-controls="collapseOne1">Category</button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseOne1" class="container-fluid container-max-width accordion-collapse collapse" data-bs-parent="#accordion1">
+              <ul class="navbar-nav ps-large ps-md-none">
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingOne1">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingTwo1">
+              <button class="accordion-button collapsed container-fluid container-max-width px-gridmargin d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">Category</button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseTwo1" class="container-fluid container-max-width accordion-collapse collapse" data-bs-parent="#accordion1">
+              <ul class="navbar-nav ps-large ps-md-none">
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingTwo1">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingThree1">
+              <button class="accordion-button collapsed container-fluid container-max-width px-gridmargin d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree1" aria-expanded="false" aria-controls="collapseThree1">Category</button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseThree1" class="container-fluid container-max-width accordion-collapse collapse" data-bs-parent="#accordion1">
+              <ul class="navbar-nav ps-large ps-md-none">
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingThree1">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="footer-column col-md-3">
+            <h3 class="accordion-header footer-heading" id="headingFour1">
+              <button class="accordion-button collapsed container-fluid container-max-width px-gridmargin d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour1" aria-expanded="false" aria-controls="collapseFour1">Category</button>
+              <span class="d-none d-md-flex">Category</span>
+            </h3>
+            <div id="collapseFour1" class="container-fluid container-max-width accordion-collapse collapse" data-bs-parent="#accordion1">
+              <ul class="navbar-nav ps-large ps-md-none">
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+                <li><a class="nav-link" href="#" aria-describedby="headingFour1">Subcategory</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+    <div class="border-bottom border-thin border-default"></div>
+    <div class="container-fluid container-max-width footer-service">
+      <ul class="navbar-nav gap-large gap-md-2xlarge">
+        <li><a class="nav-link gap-2xsmall" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="${getVersionedDocsPath('assets/img/ouds-web-sprite.svg#location-pin-compass')}"></use></svg><span>Store locator</span></a></li>
+        <li><a class="nav-link gap-2xsmall" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="${getVersionedDocsPath('assets/img/ouds-web-sprite.svg#mobile-network-coverage')}"></use></svg><span>Coverage checker</span></a></li>
+        <li><a class="nav-link gap-2xsmall" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="${getVersionedDocsPath('assets/img/ouds-web-sprite.svg#live-chat')}"></use></svg><span>Contact us</span></a></li>
+        <li><a class="nav-link gap-2xsmall" href="#"><svg width="1.875rem" height="1.875rem" aria-hidden="true"><use xlink:href="${getVersionedDocsPath('assets/img/ouds-web-sprite.svg#child-protection')}"></use></svg><span>Child protection</span></a></li>
+      </ul>
+    </div>
+    <div class="border-bottom border-thin border-default"></div>
+    <div class="container-fluid container-max-width footer-terms">
+      <ul class="navbar-nav gap-md-large">
+        <li>© Orange 2026</li>
+        <li><a class="nav-link" href="#">Terms and conditions</a></li>
+        <li><a class="nav-link" href="#">Privacy</a></li>
+        <li><a class="nav-link active" href="#" aria-current="true">Accessibility statement</a></li>
+        <li><a class="nav-link" href="#">Cookie policy</a></li>
+      </ul>
+    </div>
+  </footer>`} />

site/src/content/docs/dual-mode.mdx

@@ -339,7 +339,6 @@ In this scenario, you will have access to all the components available in OUDS W
 
       // Boosted specific imports
       @import "boosted/scss/back-to-top";
-      @import "boosted/scss/footer";
       @import "boosted/scss/local-navigation";
       @import "boosted/scss/stepped-process";
       @import "boosted/scss/sticker";

site/src/content/docs/getting-started/migration.mdx

@@ -15,6 +15,10 @@ toc: true
 
 ### Components
 
+#### Footer
+
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> OUDS Web now supports a draft footer component. It comes from Boosted directly with small tweaks. It is intended as a placeholder for projects that need it urgently but be aware that it will change in the future. Read more in our [footer page]([[docsref:/components/footer]]).
+
 #### Header
 
 - <span class="tag tag-small rounded-none tag-warning">Warning</span> OUDS Web now supports a draft header component. It comes from Boosted directly with small tweaks. It is intended as a placeholder for projects that need it urgently but be aware that it will change in the future. Read more in our [header page]([[docsref:/components/header]]).
@@ -30,7 +34,7 @@ toc: true
 ### Dual mode
 
 1. Update `@ouds/web-common` and `@ouds/web-[theme]` to v1.2.0.
-2. Remove `@import "boosted/scss/nav";`, `@import "boosted/scss/navbar";`, and `@import "boosted/scss/orange-navbar";` from the Boosted custom import stack.
+2. Remove `@import "boosted/scss/nav";`, `@import "boosted/scss/navbar";`, `@import "boosted/scss/footer";`, and `@import "boosted/scss/orange-navbar";` from the Boosted custom import stack.
 
 
 ## v1.1.0