adds nav_item pattern for tabs for breaking change to parent theme (#61)

Co-authored-by: “Kerry <“kmurphychi@gmail.com”>

templates/patterns/nav_item/nav_item.ui_patterns.yml

@@ -0,0 +1,30 @@
+nav_item:
+  label: "(Nav item)"
+  description: "Internal: to be used in the 'nav' components (nav, navbar-nav, etc)."
+  links:
+    - 'https://getbootstrap.com/docs/5.3/components/navs-tabs/'
+  category: "Navs and tabs"
+  settings:
+    active:
+      type: "boolean"
+      label: "Active link"
+      description: "Css class for whether the link corresponds to the current url."
+    disabled:
+      type: "boolean"
+      label: "Disabled link"
+      description: "Html attribute to render the link unclickable."
+    toggle:
+      type: "machine_name"
+      label: "Toggle"
+      description: "The HTML ID of the pane to activate."
+  fields:
+    link:
+      type: "render"
+      label: "Link"
+      description: "The link item."
+      preview:
+        type: 'html_tag'
+        tag: 'a'
+        value: 'Link'
+        attributes:
+          href: 'https://example.com'

templates/patterns/nav_item/pattern-nav-item--preview.html.twig

@@ -0,0 +1,3 @@
+<ul class="nav">
+  {{ include('pattern-nav-item.html.twig') }}
+</ul>

templates/patterns/nav_item/pattern-nav-item.html.twig

@@ -0,0 +1,7 @@
+<li{{ attributes.addClass('nav-item') }}>
+  {% set link = active ? link|add_class('active') : link %}
+  {% set link = disabled ? link|add_class('disabled') : link %}
+  {% set link = toggle ? link|set_attribute('role', 'tab')|set_attribute('data-bs-toggle', 'tab') : link %}
+  {% set link = toggle ? link|set_attribute('aria-controls', toggle)|set_attribute('data-bs-target', '#' ~ toggle) : link %}
+  {{ link|add_class('nav-link') }}
+</li>