Skip to content

Commit

Permalink
Reconciled navigation into a single Navigation component and fixed lo…
Browse files Browse the repository at this point in the history 
…gos.
  • Loading branch information
Alex Skrypnyk authored Sep 20, 2022
1 parent d79488b commit ab3bc1b
Show file tree
Hide file tree
Showing 46 changed files with 1,206 additions and 1,163 deletions.
1 change: 1 addition & 0 deletions docroot/themes/contrib/civictheme/civictheme.theme
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,7 @@ function civictheme_preprocess_paragraph(&$variables) {
*/
function civictheme_preprocess_block(&$variables) {
_civictheme_preprocess_block__civictheme_banner($variables);
_civictheme_preprocess_block__navigation($variables);
_civictheme_preprocess_block__civictheme_footer_menu($variables);
_civictheme_preprocess_block__content($variables);
_civictheme_preprocess_block__civictheme_mobile_navigation($variables);
Expand Down
Binary file modified ...heme/civictheme_library/assets/logos/civictheme_logo_secondary_dark_desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...theme/civictheme_library/assets/logos/civictheme_logo_secondary_dark_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...eme/civictheme_library/assets/logos/civictheme_logo_secondary_light_desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...heme/civictheme_library/assets/logos/civictheme_logo_secondary_light_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
174 changes: 80 additions & 94 deletions ...hemes/contrib/civictheme/civictheme_library/components/00-base/_variables.components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
// [rule]=background-color
//
// Example 2:
// $ct-secondary-navigation-light-menu-item-active-background-color
// $ct-navigation-light-dropdown-menu-item-active-background-color
// [component]=secondary-navigation
// [theme]=light
// [subcomponent]=menu-item
Expand Down Expand Up @@ -735,10 +735,10 @@ $ct-group-filter-dark-selected-filters-title-color: ct-color-dark('background')
// Logo.
//
$ct-logo-breakpoint: 'm';
$ct-logo-image-height-mobile: ct-particle(25) !default;
$ct-logo-image-width-mobile: 100% !default;
$ct-logo-image-height-desktop: ct-particle(30) !default;
$ct-logo-image-width-desktop: 100% !default;
$ct-logo-image-width-min-mobile: ct-particle(25) !default;
$ct-logo-image-width-max-mobile: ct-particle(30) !default;
$ct-logo-image-width-min-desktop: ct-particle(25) !default;
$ct-logo-image-width-max-desktop: ct-particle(30) !default;
$ct-logo-light-stripe-color: ct-color-light('border-dark') !default;
$ct-logo-dark-stripe-color: ct-color-light('border-light') !default;

Expand Down Expand Up @@ -947,8 +947,6 @@ $ct-fieldset-required-color: ct-color-light('error') !default;
//
// Footer.
//
$ct-footer-logo-desktop-width: ct-particle(25) !default;
$ct-footer-logo-mobile-width: ct-particle(25) !default;
$ct-footer-light-background-color: ct-color-light('background') !default;
$ct-footer-light-border-color: ct-color-light('border-light') !default;
$ct-footer-light-color: ct-color-light('body') !default;
Expand All @@ -962,8 +960,6 @@ $ct-footer-dark-collapsible-border-color: ct-color-dark('border') !default;
// Header.
//
$ct-header-desktop-menu-breakpoint: 'm' !default;
$ct-header-logo-desktop-width: ct-particle(40) !default;
$ct-header-logo-mobile-width: ct-particle(16) !default;
$ct-header-light-middle-background-color: ct-color-light('background-light') !default;
$ct-header-light-middle-border-color: ct-color-light('border-light') !default;
$ct-header-light-top-background-color: ct-color-light('background') !default;
Expand Down Expand Up @@ -1021,75 +1017,81 @@ $ct-message-dark-warning-color: ct-color-dark('body') !default;
$ct-message-dark-warning-icon-color: $ct-message-dark-warning-color !default;

//
// Navigation/Primary navigation.
//
$ct-primary-navigation-breakpoint: $ct-header-desktop-menu-breakpoint !default;

// Maximum number of columns a dropdown may have.
$ct-primary-navigation-dropdown-cols: 4 !default;

// Top offset for the dropdown from the bottom of the trigger.
$ct-primary-navigation-dropdown-top-offset: ct-spacing(2) !default;

// Gutter size between columns.
$ct-primary-navigation-dropdown-column-gutter: ct-spacing(4) !default;
$ct-primary-navigation-dropdown-zindex: 10 !default;
$ct-primary-navigation-light-border-color: ct-color-light('interaction-background') !default;
$ct-primary-navigation-light-color: ct-color-light('interaction-background') !default;
$ct-primary-navigation-light-hover-color: ct-color-light('interaction-hover-background') !default;
$ct-primary-navigation-light-active-color: ct-color-light('interaction-hover-background') !default;
$ct-primary-navigation-light-menu-item-background-color: transparent !default;
$ct-primary-navigation-light-menu-item-border-color: transparent !default;
$ct-primary-navigation-light-menu-item-hover-background-color: transparent !default;
$ct-primary-navigation-light-menu-item-hover-border-color: ct-color-light('interaction-hover-background') !default;
$ct-primary-navigation-light-menu-item-active-background-color: transparent !default;
$ct-primary-navigation-light-menu-item-active-border-color: ct-color-light('highlight') !default;
$ct-primary-navigation-light-menu-item-active-trail-background-color: ct-color-light('interaction-background') !default;
$ct-primary-navigation-light-menu-item-active-trail-color: ct-color-light('background') !default;
$ct-primary-navigation-light-sub-menu-background-color: ct-color-light('background-light') !default;
$ct-primary-navigation-light-sub-menu-item-background-color: transparent !default;
$ct-primary-navigation-light-sub-menu-item-heading-color: ct-color-light('heading') !default;
$ct-primary-navigation-light-sub-menu-item-heading-hover-color: ct-color-light('heading') !default;
$ct-primary-navigation-light-sub-menu-item-heading-active-color: ct-color-light('heading') !default;
$ct-primary-navigation-light-sub-menu-item-color: ct-color-light('interaction-background') !default;
$ct-primary-navigation-light-sub-menu-item-hover-background-color: ct-color-light('interaction-hover-background') !default;
$ct-primary-navigation-light-sub-menu-item-hover-color: ct-color-light('interaction-hover-text') !default;
$ct-primary-navigation-light-sub-menu-item-active-background-color: ct-color-light('body') !default;
$ct-primary-navigation-light-sub-menu-item-active-color: ct-color-light('background') !default;
$ct-primary-navigation-dark-border-color: ct-color-dark('interaction-background') !default;
$ct-primary-navigation-dark-color: ct-color-dark('interaction-background') !default;
$ct-primary-navigation-dark-hover-color: ct-color-dark('interaction-hover-background') !default;
$ct-primary-navigation-dark-active-color: ct-color-dark('interaction-hover-background') !default;
$ct-primary-navigation-dark-menu-item-background-color: transparent !default;
$ct-primary-navigation-dark-menu-item-border-color: transparent !default;
$ct-primary-navigation-dark-menu-item-hover-background-color: transparent !default;
$ct-primary-navigation-dark-menu-item-hover-border-color: ct-color-dark('interaction-hover-background') !default;
$ct-primary-navigation-dark-menu-item-active-background-color: transparent !default;
$ct-primary-navigation-dark-menu-item-active-border-color: ct-color-dark('highlight') !default;
$ct-primary-navigation-dark-menu-item-active-trail-background-color: ct-color-dark('interaction-background') !default;
$ct-primary-navigation-dark-menu-item-active-trail-color: ct-color-dark('background') !default;
$ct-primary-navigation-dark-sub-menu-background-color: ct-color-dark('background-light') !default;
$ct-primary-navigation-dark-sub-menu-item-background-color: transparent !default;
$ct-primary-navigation-dark-sub-menu-item-heading-color: ct-color-dark('heading') !default;
$ct-primary-navigation-dark-sub-menu-item-heading-hover-color: ct-color-dark('heading') !default;
$ct-primary-navigation-dark-sub-menu-item-heading-active-color: ct-color-dark('heading') !default;
$ct-primary-navigation-dark-sub-menu-item-color: ct-color-dark('interaction-background') !default;
$ct-primary-navigation-dark-sub-menu-item-hover-background-color: ct-color-dark('interaction-hover-background') !default;
$ct-primary-navigation-dark-sub-menu-item-hover-color: ct-color-dark('interaction-hover-text') !default;
$ct-primary-navigation-dark-sub-menu-item-active-background-color: ct-color-dark('body') !default;
$ct-primary-navigation-dark-sub-menu-item-active-color: ct-color-dark('background') !default;

//
// Navigation/Secondary navigation.
//
// Top offset for the dropdown from the bottom of the trigger.
$ct-secondary-navigation-breakpoint: $ct-header-desktop-menu-breakpoint !default;
$ct-secondary-navigation-dropdown-border-radius: $ct-border-radius !default;
$ct-secondary-navigation-dropdown-top-offset: ct-spacing() !default;
$ct-secondary-navigation-dropdown-zindex: 11 !default;
$ct-secondary-navigation-light-menu-item-active-background-color: none !default;
$ct-secondary-navigation-light-sub-menu-background-color: ct-color-light('background-light') !default;
$ct-secondary-navigation-dark-sub-menu-background-color: ct-color-dark('background-light') !default;
// Navigation
//
// Navigation can be rendered in 3 ways: plain, with dropdown and with drawer.

// Dropdown.
$ct-navigation-dropdown-zindex: 11 !default;
$ct-navigation-dropdown-border-radius: $ct-border-radius !default;

// Top offset for the drawer from the bottom of the trigger.
$ct-navigation-dropdown-top-offset: ct-spacing() !default;

// Colors.
$ct-navigation-light-dropdown-sub-menu-background-color: ct-color-light('background-light') !default;
$ct-navigation-dark-dropdown-sub-menu-background-color: ct-color-dark('background-light') !default;

// Drawer.
$ct-navigation-drawer-zindex: 10 !default;

// Maximum number of columns a drawer may have.
$ct-navigation-drawer-cols: 4 !default;

// Top offset for the drawer from the bottom of the trigger.
$ct-navigation-drawer-top-offset: ct-spacing(2) !default;

// Gutter size between the drawer columns.
$ct-navigation-drawer-column-gutter: ct-spacing(4) !default;

// Colors.
$ct-navigation-light-drawer-border-color: ct-color-light('interaction-background') !default;
$ct-navigation-light-drawer-color: ct-color-light('interaction-background') !default;
$ct-navigation-light-drawer-hover-color: ct-color-light('interaction-hover-background') !default;
$ct-navigation-light-drawer-active-color: ct-color-light('interaction-hover-background') !default;
$ct-navigation-light-drawer-menu-item-background-color: transparent !default;
$ct-navigation-light-drawer-menu-item-border-color: transparent !default;
$ct-navigation-light-drawer-menu-item-hover-background-color: transparent !default;
$ct-navigation-light-drawer-menu-item-hover-border-color: ct-color-light('interaction-hover-background') !default;
$ct-navigation-light-drawer-menu-item-active-background-color: transparent !default;
$ct-navigation-light-drawer-menu-item-active-border-color: ct-color-light('highlight') !default;
$ct-navigation-light-drawer-menu-item-active-trail-background-color: ct-color-light('interaction-background') !default;
$ct-navigation-light-drawer-menu-item-active-trail-color: ct-color-light('background') !default;
$ct-navigation-light-drawer-sub-menu-background-color: ct-color-light('background-light') !default;
$ct-navigation-light-drawer-sub-menu-item-background-color: transparent !default;
$ct-navigation-light-drawer-sub-menu-item-heading-color: ct-color-light('heading') !default;
$ct-navigation-light-drawer-sub-menu-item-heading-hover-color: ct-color-light('heading') !default;
$ct-navigation-light-drawer-sub-menu-item-heading-active-color: ct-color-light('heading') !default;
$ct-navigation-light-drawer-sub-menu-item-color: ct-color-light('interaction-background') !default;
$ct-navigation-light-drawer-sub-menu-item-hover-background-color: ct-color-light('interaction-hover-background') !default;
$ct-navigation-light-drawer-sub-menu-item-hover-color: ct-color-light('interaction-hover-text') !default;
$ct-navigation-light-drawer-sub-menu-item-active-background-color: ct-color-light('body') !default;
$ct-navigation-light-drawer-sub-menu-item-active-color: ct-color-light('background') !default;
$ct-navigation-dark-drawer-border-color: ct-color-dark('interaction-background') !default;
$ct-navigation-dark-drawer-color: ct-color-dark('interaction-background') !default;
$ct-navigation-dark-drawer-hover-color: ct-color-dark('interaction-hover-background') !default;
$ct-navigation-dark-drawer-active-color: ct-color-dark('interaction-hover-background') !default;
$ct-navigation-dark-drawer-menu-item-background-color: transparent !default;
$ct-navigation-dark-drawer-menu-item-border-color: transparent !default;
$ct-navigation-dark-drawer-menu-item-hover-background-color: transparent !default;
$ct-navigation-dark-drawer-menu-item-hover-border-color: ct-color-dark('interaction-hover-background') !default;
$ct-navigation-dark-drawer-menu-item-active-background-color: transparent !default;
$ct-navigation-dark-drawer-menu-item-active-border-color: ct-color-dark('highlight') !default;
$ct-navigation-dark-drawer-menu-item-active-trail-background-color: ct-color-dark('interaction-background') !default;
$ct-navigation-dark-drawer-menu-item-active-trail-color: ct-color-dark('background') !default;
$ct-navigation-dark-drawer-sub-menu-background-color: ct-color-dark('background-light') !default;
$ct-navigation-dark-drawer-sub-menu-item-background-color: transparent !default;
$ct-navigation-dark-drawer-sub-menu-item-heading-color: ct-color-dark('heading') !default;
$ct-navigation-dark-drawer-sub-menu-item-heading-hover-color: ct-color-dark('heading') !default;
$ct-navigation-dark-drawer-sub-menu-item-heading-active-color: ct-color-dark('heading') !default;
$ct-navigation-dark-drawer-sub-menu-item-color: ct-color-dark('interaction-background') !default;
$ct-navigation-dark-drawer-sub-menu-item-hover-background-color: ct-color-dark('interaction-hover-background') !default;
$ct-navigation-dark-drawer-sub-menu-item-hover-color: ct-color-dark('interaction-hover-text') !default;
$ct-navigation-dark-drawer-sub-menu-item-active-background-color: ct-color-dark('body') !default;
$ct-navigation-dark-drawer-sub-menu-item-active-color: ct-color-dark('background') !default;

// @todo Remove this in favour of inline classes.
$ct-navigation-breakpoint: $ct-header-desktop-menu-breakpoint !default;

//
// Navigation/Side navigation.
Expand Down Expand Up @@ -1183,22 +1185,6 @@ $ct-promo-dark-background-color: ct-color-dark('background-dark') !default;
$ct-promo-dark-body-color: ct-color-dark('body') !default;
$ct-promo-dark-heading-color: ct-color-dark('heading') !default;

//
// Search.
//
$ct-search-light-color: $ct-primary-navigation-light-color !default;
$ct-search-light-hover-color: $ct-primary-navigation-light-hover-color !default;
$ct-search-light-active-color: $ct-primary-navigation-light-active-color !default;
$ct-search-light-menu-item-active-border-color: $ct-primary-navigation-light-menu-item-active-border-color !default;
$ct-search-light-menu-item-border-color: $ct-primary-navigation-light-menu-item-border-color !default;
$ct-search-light-menu-item-hover-border-color: $ct-primary-navigation-light-menu-item-hover-border-color !default;
$ct-search-dark-color: $ct-primary-navigation-dark-color !default;
$ct-search-dark-hover-color: $ct-primary-navigation-dark-hover-color !default;
$ct-search-dark-active-color: $ct-primary-navigation-dark-active-color !default;
$ct-search-dark-menu-item-active-border-color: $ct-primary-navigation-dark-menu-item-active-border-color !default;
$ct-search-dark-menu-item-border-color: $ct-primary-navigation-dark-menu-item-border-color !default;
$ct-search-dark-menu-item-hover-border-color: $ct-primary-navigation-dark-menu-item-hover-border-color !default;

//
// Skip link.
//
Expand Down
30 changes: 15 additions & 15 deletions docroot/themes/contrib/civictheme/civictheme_library/components/00-base/base.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,21 +52,21 @@ export const placeholder = (content = 'Content placeholder') => `<div class="sto

export const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1);

export const getRandomInt = (min, max) => {
export const randomInt = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min);
};

export const getRandomBool = (skew) => {
export const randomBool = (skew) => {
skew = skew || 0.5;
return Math.random() > skew;
};

export const randomString = (length) => randomText(length).substring(0, length).trim();

export const randomSentence = (words) => {
words = words || getRandomInt(5, 25);
words = words || randomInt(5, 25);
return capitalizeFirstLetter(randomText(words));
};

Expand All @@ -81,10 +81,10 @@ export const randomLinks = (count, length, domain) => {

for (let i = 0; i < count; i++) {
links.push({
text: `Link ${i + 1}${length ? ` ${randomString(getRandomInt(1, length))}` : ''}`,
text: `Link ${i + 1}${length ? ` ${randomString(randomInt(1, length))}` : ''}`,
url: randomUrl(domain),
is_new_window: getRandomBool(),
is_external: getRandomBool(0.8),
is_new_window: randomBool(),
is_external: randomBool(0.8),
});
}

Expand All @@ -96,7 +96,7 @@ export const randomTags = (count, rand) => {
rand = rand || false;

for (let i = 0; i < count; i++) {
tags.push(`Topic ${i + 1}${rand ? ` ${randomString(getRandomInt(2, 5))}` : ''}`);
tags.push(`Topic ${i + 1}${rand ? ` ${randomString(randomInt(2, 5))}` : ''}`);
}

return tags;
Expand Down Expand Up @@ -141,14 +141,14 @@ export const randomFormElement = (inputType, options, theme, rand, itr) => {
type: inputType,
label: CivicThemeLabel({
theme,
content: options.title ? options.title : `Input title ${itr + 1}${rand ? ` ${randomString(getRandomInt(2, 5))}` : ''}`,
content: options.title ? options.title : `Input title ${itr + 1}${rand ? ` ${randomString(randomInt(2, 5))}` : ''}`,
attributes: `for="form-element-${itr}"`,
required: options.required,
}),
label_display: isCheckboxOrRadio ? 'after' : 'before',
description_position: isCheckboxOrRadio ? 'after' : 'before',
description: {
content: options.description ? `Input description ${itr + 1}${rand ? ` ${randomText(getRandomInt(4, 10))}` : ''}` : '',
content: options.description ? `Input description ${itr + 1}${rand ? ` ${randomText(randomInt(4, 10))}` : ''}` : '',
},
children: [],
attributes: options.form_element_attributes,
Expand All @@ -163,7 +163,7 @@ export const randomFormElement = (inputType, options, theme, rand, itr) => {
type: inputType,
attributes,
required: options.required,
value: typeof options.value !== 'undefined' ? options.value : randomString(getRandomInt(3, 8)),
value: typeof options.value !== 'undefined' ? options.value : randomString(randomInt(3, 8)),
};

switch (inputType) {
Expand Down Expand Up @@ -222,7 +222,7 @@ export const randomFormElements = (count, theme, rand) => {

export const randomDropdownFilter = (filterType, numOfOptions, theme, rand, itr) => {
const filterOptions = {
filter_text: `Filter text ${itr + 1}${rand ? ` ${randomString(getRandomInt(2, 5))}` : ''}`,
filter_text: `Filter text ${itr + 1}${rand ? ` ${randomString(randomInt(2, 5))}` : ''}`,
filter_group: 'filter_group',
options_title: Math.round(Math.random()) ? 'Options title (optional)' : '',
};
Expand All @@ -233,9 +233,9 @@ export const randomDropdownFilter = (filterType, numOfOptions, theme, rand, itr)
required: false,
description: false,
attributes: '',
value: randomString(getRandomInt(1, 8)),
value: randomString(randomInt(1, 8)),
};
options.attributes += filterType === 'radio' ? ` name="test_${itr}"` : ` name="${randomString(getRandomInt(3, 8))}"`;
options.attributes += filterType === 'radio' ? ` name="test_${itr}"` : ` name="${randomString(randomInt(3, 8))}"`;
children.push(randomFormElement(filterType, options, theme, true, count++));
}

Expand All @@ -253,8 +253,8 @@ export const randomOptions = (numOfOptions, optionType = 'option') => {
const option = {
type: optionType,
selected: false,
label: optionType === 'optgroup' ? `Group ${i}` : randomString(getRandomInt(3, 8)),
value: randomString(getRandomInt(1, 8)),
label: optionType === 'optgroup' ? `Group ${i}` : randomString(randomInt(3, 8)),
value: randomString(randomInt(1, 8)),
options: optionType === 'optgroup' ? randomOptions(numOfOptions) : null,
};
options.push(option);
Expand Down
Loading

0 comments on commit ab3bc1b

Please sign in to comment.