FRONT-2480: BCL - Refactor navbar pattern.

templates/overrides/page/page.html.twig

@@ -49,7 +49,7 @@
     navbar_branding: page.navbar_branding ? page.navbar_branding : false,
     navbar_left: page.navbar_left ? page.navbar_left : false,
     navbar_right: page.navbar_right ? page.navbar_right : false,
-    style: 'light'
+    color_set: 'light'
   }) }}
 
   <main class="pt-5 pb-5">

templates/patterns/navbar/navbar.ui_patterns.yml

@@ -2,63 +2,98 @@ navbar:
   label: Navbar
   description: Powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. https://v5.getbootstrap.com/docs/5.0/components/navbar/
   settings:
-    style:
+    collapse_id:
+      type: textfield
+      label: Collapse identifier
+      preview: "navbar"
+    background:
       type: select
-      label: Navbar style
+      label: Background of navbar
       options:
+        primary: primary
+        secondary: secondary
+        success: success
+        danger: danger
+        warning: warning
+        info: info
         light: light
         dark: dark
       preview: light
-    container_fixed:
-      type: boolean
-      label: Fluid container
-      description: Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
-      preview: false
-    placement:
+    expand:
       type: select
       label: Placement
       options:
-        fixed_top: fixed top
-        fixed_bottom: fixed bottom
-        sticky_top: sticky top
-    attributes:
-      type: attributes
-      label: Attributes
+        sm: small
+        md: medium
+        lg: large
+      preview: lg
+    color_set:
+      type: select
+      label: Available set of color
+      options:
+        light: light
+        dark: dark
+      preview: light
   fields:
     navbar_branding:
-      type: text
-      label: Brand title
-      description: Your company, product, or project name.
+      type: render
+      label: Navigation bar branding
+      preview:
+        - type: html_tag
+          tag: a
+          value: "Navbar"
+          attributes:
+            href: '#navbar'
+            rel: home
+            class: "navbar-brand"
+    navbar_right:
+      type: render
+      label: Navigation bar right
       preview:
         - type: html_tag
-          tag: span
-          value: "Brand"
+          tag: form
+          attributes:
+            class: "d-flex"
+          children:
+            '<label for="inlineFormInputGroupSearch" class="form-label visually-hidden">Search</label><input class="form-control" type="text" id="inlineFormInputGroupSearch" required="true" placeholder="Search"/><div class="ms-2"><button class="btn btn-primary btn-md" type="Search">Search</button></div>'
     navbar_left:
       type: render
-      label: Left content of navbar (main menu)
-      description: Full-height and lightweight navigation (including support for dropdowns).
+      label: Navigation bar left
       preview:
         - type: pattern
-          id: nav
-          settings:
-            attributes: "class='navbar-nav'"
+          id: link
+          label: "I'm a link"
+          path: "#first"
+          attributes:
+            class: "nav-link"
+        - type: pattern
+          id: link
+          label: "I'm a link 2"
+          path: "#second"
+          attributes:
+            class: "nav-link"
+        - type: pattern
+          id: link
+          label: "I'm a link 3"
+          path: "#third"
+          attributes:
+            class: "nav-link"
+        - type: pattern
+          id: dropdown
+          variant: default
           fields:
-            items: 
-              - title: Home
-                url: "#"
-                in_active_trail: true
-              - title: Library
-                url: "#"
-                is_expanded: true
-                below:
-                  - title: Sub 1
-                    url: "#"
-                  - title: Sub 2
-                    url: "#"
-              - title: Data
-                url: "#"
-    navbar_right:
-      type: text
-      label: Text
-      description: Vertically centered strings of text.
-      preview: "Navbar text with an inline element"
+            trigger:
+              label: "Dropdown Toggle"
+              path: "#"
+            dropdown_items:
+              - path: "#navbar"
+                label: "I'm a link"
+              - path: "#navbar"
+                label: "I'm an active button"
+                button: true
+                active: true
+              - divider: true
+              - path: "#navbar"
+                button: true
+                disabled: true
+                label: "I'm a disabled button"

templates/patterns/navbar/pattern-navbar.html.twig

@@ -1,39 +1,72 @@
-{% set _placements = {
-'fixed_top': 'fixed-top',
-'fixed_bottom': 'fixed_bottom',
-'sticky_top': 'sticky-top',
-} %}
-{% set placement = placement ? _placements[placement] : '' %}
+{% spaceless %}
 
-{% set attributes = attributes.addClass([
-  'navbar',
-  'navbar-expand-lg',
-  style ? 'navbar-' ~ style,
-  style ? 'bg-' ~ style,
-  placement
-  ]) %}
+{# Parameters:
+  - collapse_id (string) (default: '')
+  - background (string) (default: '')
+  - brand (object) (default: {})
+    format: {
+      src: '',
+      alt: '',
+      class: '',
+      label: '', (optional: only for string label)
+      link: '',
+    }
+  - navigation (object Navigation) (default: {})
+  - form (object Form) (default: {})
+  - expand (string) (default: 'lg')
+    options: ['sm', 'md', 'lg']
+  - color_set (string) (default: 'light')
+    options ['light', 'dark']
+#}
+{% set _collapse_id = collapse_id|default('') %}
+{% set _background = background|default('') %}
+{% set _expand = expand|default('lg') %}
+{% set _color_set = color_set|default('light') %}
+{% set _classes = ['navbar', 'navbar-expand-' ~ _expand] %}
+{% if _background is not empty %}
+  {% set _classes = _classes|merge(['bg-' ~ _background]) %}
+{% endif %}
+{% if _color_set is not empty %}
+  {% set _classes = _classes|merge(['navbar-' ~ _color_set]) %}
+{% endif %}
 
-{% set id = 'navbar-' ~ random(1000) %}
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
 
-<nav{{ attributes.addClass() }}>
-  <div class="{{ container_fixed ? 'container' : 'container-fluid' }}">
-    {% if navbar_branding %}
-      <div class="navbar-brand">{{ navbar_branding }}</div>
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _collapse_id is empty %}
+  {% set _collapse_id = 'navbar-' ~ random(1000) %}
+{% endif %}
+
+<nav
+  {{ attributes }}
+>
+  <div class="container">
+    {% if navbar_branding is not empty %}
+      {{ navbar_branding }}
     {% endif %}
-
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#{{id}}"
-              aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="{{id}}">
-        <div class="me-auto mb-2 mb-lg-0">
-        {% if navbar_left %}
-          {{ navbar_left }}
-        {% endif %}
-        </div>
-        {% if navbar_right %}
-          {{ navbar_right }}
-        {% endif %}
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target='#{{ _collapse_id }}'
+      aria-controls='{{ _collapse_id }}'
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id='{{ _collapse_id }}'>
+      <div class="me-auto  navbar-nav">
+        {{ navbar_left }}
       </div>
+      <div>
+        {{ navbar_right }}
+      </div>
+    </div>
   </div>
 </nav>
+
+{% endspaceless %}