Refactored Navigation component to use type instead of dropdown prop.

[joshua-salsadigital]

Regression fix: #94

Checklist before requesting a review

• I have formatted the subject to include the issue number
  as [#123] Verb in past tense with a period at the end.
• I have provided information in the Changed section about WHY something was
  done if this was a bespoke implementation.
• I have performed a self-review of my code.
• I have commented on my code, particularly in hard-to-understand areas.
• I have added tests that prove my fix is effective or that my feature works.
• I have run new and existing relevant tests locally with my changes,
  and they have passed.
• I have provided screenshots, where applicable.

dropdown prop was too limiting and only controlled the dropdown type. But there are cases when the Navigation component is used without dropdown and in another way (as inline horizontal list of links). In order to make the component more extendable, dropdown was changed to type and now allows to:

• Use generic navigation when none is selected. Footer component uses this to show links.
• Use inline horizontal list navigation when inline is selected.
• Use inline navigation with dropdowns when dropdown is selected.
• Use inline navigation with Mega-menu like drawer when drawer is selected.

Changed

1. Refactored Navigation component to use type instead of dropdown prop.

Screenshots

[github-actions]

🚀 Deployed on https://65f7fe68a4d5653ac76a2cee--civictheme-uikit.netlify.app

[AlexSkrypnyk]

@joshua-salsadigital
Can we somehow reverse this so that bey default the level 0 is always displayed, even if there are no classes.

And the grid display is added only for other variants.

[AlexSkrypnyk]

here is the problem space:

footer, for example, may have nav items displayed vertically stacked or inline
We have a prop on Navigation that controls the display of the dropdown, but we do not have anything that controls the display of the topmost (level 1) items - stacked or inline

Option 1
Adding a new prop show_items_inline would mean to have 3 x 2 = 6 variants, some of which won't make sense: show_items_inline=false && dropdown=drawer will show a stack of links, each of which would have a dropdown - this is not the behaviour we want to promote.

Option 2
Adding a new value to dropdown like inline would work nicely, except inline is not in the same "dimension" as other values - it is not a dropdown type.

Option 3
Do option 2, but rename dropdown prop to type. But this will require changes in many places, including consumers (Drupal).

Option 4
Do option 3, but only in UIKit.
Then add a filter for possible values in consumers with inline being the default value for Primary and Secondary navs when none is selected as Dropdown. Kinda a remap of none to inline for these 2 components in Drupal.

In consumer (Drupal): block--menu-block--civictheme-primary-navigation.html.twig

{% if in_sidebar %}
  {% include '@organisms/side-navigation/side-navigation.twig' with {
    theme: 'light',
    items,
    modifier_class: 'ct-primary-navigation',
  } only %}
{% else %}
  {% include '@organisms/navigation/navigation.twig' with {
    theme,
    items,
    type: dropdown == 'none' ? 'inline' : dropdown, <------- THIS
    dropdown_columns,
    dropdown_columns_fill,
    is_animated,
    menu_id,
    modifier_class: 'ct-primary-navigation ct-justify-content-end',
  } only %}
{% endif %}

After some considerations, we are going to proceed with Option 4: Update the prop in UIKit and re-map it in consumer site to force inline when none is selected on Primary navigation and Secondary navigation components.

Solution direction

1. Rename the dropdown prop to type in Navigation component and update twig variables and comments.
2. Update stories for the navigation component to use type prop and inline value
3. Update SCSS to include style for inline type and move the the display: flex out of styles for none type.
4. Replace all references to the dropdown in another components (Footer stories etc.) to use the new prop.

After the PR is merged, raise a PR in the Drupal implementation:

1. Update to the latest commit of UIKit
2. Add conditional check (as per description above) to enforce inline if none is selected in block--menu-block--civictheme-primary-navigation.html.twig and block--menu-block--civictheme-secondary-navigation.html.twig.

Do not update the possible values of the Drawer selection in the Component settings in Drupal - we want to preserve the options to only control whether dropdown is present or not. Later, thigh may be refactored.

[AlexSkrypnyk]

@joshua-salsadigital
Everything looks great from the point of the approach.
But the footer links does not look like in PROD (https://uikit.civictheme.io/?path=/story/organisms-footer--footer)

Could you please identify the reason for this change and update styles accordingly.

[AlexSkrypnyk]

• Update how links look like in inline type to use the styles from the Item List component. Create new variables for the column and row gap, but makes the default values to be $ct-item-list-horizontal-regular-column-gap and $ct-item-list-horizontal-regular-row-gap:

$ct-navigation-inline-column-gutter: $ct-item-list-horizontal-regular-column-gap !default;
$ct-navigation-inline-row-gutter: $ct-item-list-horizontal-regular-column-gap !default;

• Move styles for level 0 links of dropdown type from Navigation to the styles of content_top3 of Header component.
• Move styles for level 0 links of drawer type from Navigation to the styles of content_middle3 of Header component.
• Separate styles in navigation.scss for each navigation type (repetition is okay), so that a section for each type of the Navigation could be read as a standalone block.