From 7c8e55b1ab1a78fba6b89cf17939c0a9e9c46966 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Wed, 9 Oct 2019 17:44:24 +0200 Subject: [PATCH 1/8] wip() --- src/_includes/sidebar/destinations-menu.html | 2 +- src/_sass/components/_destination-menu-mobile.scss | 1 + src/_sass/components/_destination-menu.scss | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/_includes/sidebar/destinations-menu.html b/src/_includes/sidebar/destinations-menu.html index f1720b6d1e..4b5f16e473 100644 --- a/src/_includes/sidebar/destinations-menu.html +++ b/src/_includes/sidebar/destinations-menu.html @@ -6,7 +6,7 @@ {% assign category_name_size = category.name | size %} {% if category_name_size != 0 %} {% assign category_icon = category.name | slugify %} -
  • +
  • {% include icons/destinations-catalog/{{ category_icon }}.svg %} {{ category.name }} diff --git a/src/_sass/components/_destination-menu-mobile.scss b/src/_sass/components/_destination-menu-mobile.scss index 2636bc2ab5..86c5e4c75c 100644 --- a/src/_sass/components/_destination-menu-mobile.scss +++ b/src/_sass/components/_destination-menu-mobile.scss @@ -4,6 +4,7 @@ position: relative; padding: 20px 0 25px 0; position: sticky; + position: -webkit-sticky; top: 0; z-index: 1; diff --git a/src/_sass/components/_destination-menu.scss b/src/_sass/components/_destination-menu.scss index ffb44e3023..950343e9ab 100644 --- a/src/_sass/components/_destination-menu.scss +++ b/src/_sass/components/_destination-menu.scss @@ -13,11 +13,11 @@ width: 14px; max-height: 14px; margin-right: 8px; + margin-top: 2px; } } &__link { - display: flex; width: 100%; color: color(gray); font-size: 14px; From fe9bd543a3609d10f37f115fc760bce6d9502386 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Thu, 10 Oct 2019 14:33:53 +0200 Subject: [PATCH 2/8] fix(): Suport for mobile Safari, add anchor indicator, centering icons --- js/anchors-indicator/index.js | 19 +++++++++++++ js/dropdown-menu/index.js | 14 +++++++++- js/index.js | 2 ++ package.json | 3 ++ .../sidebar/destinations-menu-mobile.html | 4 +-- src/_includes/sidebar/destinations-menu.html | 6 ++-- src/_layouts/destinations.html | 28 +------------------ src/_sass/components/_destination-menu.scss | 8 +++++- yarn.lock | 5 ++++ 9 files changed, 55 insertions(+), 34 deletions(-) create mode 100644 js/anchors-indicator/index.js diff --git a/js/anchors-indicator/index.js b/js/anchors-indicator/index.js new file mode 100644 index 0000000000..35671aa088 --- /dev/null +++ b/js/anchors-indicator/index.js @@ -0,0 +1,19 @@ +const MenuSpy = require('menuspy'); +const COMPONENT_SELECTOR = '[data-anchors-indicator]' +const ACTIVE_CLASS = 'data-active-class' + +const OPTIONS = { + enableLocationHash: false +} + +export default function () { + const components = document.querySelectorAll(COMPONENT_SELECTOR) + + components.forEach(component => { + const activeClass = component.getAttribute(ACTIVE_CLASS) + + new MenuSpy(component, Object.assign({ + activeClass: activeClass + }, OPTIONS)) + }) +} diff --git a/js/dropdown-menu/index.js b/js/dropdown-menu/index.js index f01d38f07f..cf57f2a185 100644 --- a/js/dropdown-menu/index.js +++ b/js/dropdown-menu/index.js @@ -4,12 +4,14 @@ const DROPDOWN_HEAD_INNER = '[data-ref="dropdown-menu[head-inner]"]' const DROPDOWN_BODY = '[data-ref="dropdown-menu[body]"]' const DROPDOWN_LINK = '[data-ref="dropdown-menu[link]"]' const ACTIVE_CLASS_ATTR = 'data-active-class' +const ANCHOR = '[data-ref="dropdown-menu[item]"]' export default function () { const components = document.querySelectorAll(COMPONENT_SELECTOR) components.forEach(component => { const dropdownHeadInner = component.querySelector(DROPDOWN_HEAD_INNER) + const itemActiveClass = component.getAttribute(ACTIVE_CLASS_ATTR) const dropdownHead = component.querySelector(DROPDOWN_HEAD) const dropdownHeadActive = dropdownHead.getAttribute(ACTIVE_CLASS_ATTR) @@ -24,13 +26,23 @@ export default function () { dropdownBody.classList.toggle(dropdownBodyActive) }) + const updateValue = (dest) => { + dropdownHeadInner.innerHTML = dest.innerHTML + } + links.forEach(link => { link.addEventListener('click', () => { - dropdownHeadInner.innerHTML = link.innerHTML + updateValue(link) dropdownHead.classList.remove(dropdownHeadActive) dropdownBody.classList.remove(dropdownBodyActive) }) }) + + window.addEventListener('scroll', () => { + const currentActiveIndicator = document.querySelector(`${ANCHOR}.${itemActiveClass} a`) + + updateValue(currentActiveIndicator) + }) }) } diff --git a/js/index.js b/js/index.js index b62fbc7d85..fede0e5dbc 100644 --- a/js/index.js +++ b/js/index.js @@ -6,6 +6,7 @@ import searchNavbar from './search-navbar' import menuMobile from './menu-mobile' import headingsAnchors from './headings-anchors' import dropdownMenu from './dropdown-menu' +import anchorsIndicator from './anchors-indicator' feedback() accordion() @@ -13,3 +14,4 @@ searchNavbar() menuMobile() headingsAnchors() dropdownMenu() +anchorsIndicator() diff --git a/package.json b/package.json index ba7be55dd1..d3e972e417 100644 --- a/package.json +++ b/package.json @@ -16,5 +16,8 @@ "concurrently": "4.1.2", "webpack": "4.40.2", "webpack-cli": "3.3.9" + }, + "dependencies": { + "menuspy": "1.3.0" } } diff --git a/src/_includes/sidebar/destinations-menu-mobile.html b/src/_includes/sidebar/destinations-menu-mobile.html index 0a317a3122..f773e6edcd 100644 --- a/src/_includes/sidebar/destinations-menu-mobile.html +++ b/src/_includes/sidebar/destinations-menu-mobile.html @@ -1,6 +1,6 @@ {% assign destination_categories = site.data.catalog.destinations.destinations | group_by:"categories.primary" | sort: "name" %} -
    +
    @@ -18,7 +18,7 @@ {% assign category_name_size = category.name | size %} {% if category_name_size != 0 %} {% assign category_icon = category.name | slugify %} -
  • +
  • {% include icons/destinations-catalog/{{ category_icon }}.svg %} diff --git a/src/_includes/sidebar/destinations-menu.html b/src/_includes/sidebar/destinations-menu.html index 4b5f16e473..690785426b 100644 --- a/src/_includes/sidebar/destinations-menu.html +++ b/src/_includes/sidebar/destinations-menu.html @@ -1,13 +1,13 @@ {% assign destination_categories = site.data.catalog.destinations.destinations | group_by:"categories.primary" | sort: "name" %} -
    +
    - + {% include navbar/navbar-mobile.html %}
    diff --git a/src/_sass/components/_destination-menu.scss b/src/_sass/components/_destination-menu.scss index 950343e9ab..5a8908347f 100644 --- a/src/_sass/components/_destination-menu.scss +++ b/src/_sass/components/_destination-menu.scss @@ -5,6 +5,8 @@ } &__item { + color: color(gray); + & + & { margin-top: 13px; } @@ -15,11 +17,15 @@ margin-right: 8px; margin-top: 2px; } + + &--active { + color: color(primary); + } } &__link { width: 100%; - color: color(gray); + color: inherit; font-size: 14px; line-height: 20px; transition: 0.3s color, 0.3s font-weight; diff --git a/yarn.lock b/yarn.lock index d4dc2ea4a0..c4099de253 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2479,6 +2479,11 @@ memory-fs@^0.4.0, memory-fs@^0.4.1: errno "^0.1.3" readable-stream "^2.0.1" +menuspy@1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/menuspy/-/menuspy-1.3.0.tgz#2afe5e751f1c4540cdba4af7cd96be24fcf5b3f1" + integrity sha512-cZD8Ik4gfWzOADiCiGP0l08DQerQfeli82u7NKSP+Br3C6YmpYeZmGlTqmLwQvOIeJVoDnlEdkkz9m133L5CIQ== + micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4: version "3.1.10" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23" From 2424953fc8692a78fcf56330233bc7c5f8f264a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Thu, 10 Oct 2019 17:14:49 +0200 Subject: [PATCH 3/8] fix(): add slugify filter --- src/_includes/sidebar/destinations-menu-mobile.html | 2 +- src/_includes/sidebar/destinations-menu.html | 2 +- src/_sass/components/_destination-menu.scss | 2 +- src/connections/destinations/catalog/index.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/_includes/sidebar/destinations-menu-mobile.html b/src/_includes/sidebar/destinations-menu-mobile.html index f773e6edcd..a716ad7a40 100644 --- a/src/_includes/sidebar/destinations-menu-mobile.html +++ b/src/_includes/sidebar/destinations-menu-mobile.html @@ -19,7 +19,7 @@ {% if category_name_size != 0 %} {% assign category_icon = category.name | slugify %}
  • - + {% include icons/destinations-catalog/{{ category_icon }}.svg %} diff --git a/src/_includes/sidebar/destinations-menu.html b/src/_includes/sidebar/destinations-menu.html index 690785426b..525a4669dc 100644 --- a/src/_includes/sidebar/destinations-menu.html +++ b/src/_includes/sidebar/destinations-menu.html @@ -7,7 +7,7 @@ {% if category_name_size != 0 %} {% assign category_icon = category.name | slugify %}
  • - + {% include icons/destinations-catalog/{{ category_icon }}.svg %} {{ category.name }} diff --git a/src/_sass/components/_destination-menu.scss b/src/_sass/components/_destination-menu.scss index 5a8908347f..3af637003a 100644 --- a/src/_sass/components/_destination-menu.scss +++ b/src/_sass/components/_destination-menu.scss @@ -19,7 +19,7 @@ } &--active { - color: color(primary); + color: color(secondary-dark); } } diff --git a/src/connections/destinations/catalog/index.md b/src/connections/destinations/catalog/index.md index 2d553e0188..99191b86f7 100644 --- a/src/connections/destinations/catalog/index.md +++ b/src/connections/destinations/catalog/index.md @@ -8,7 +8,7 @@ layout: destinations
    {% for category in destination_categories %} -
    +
    {% assign category_name_size = category.name | size %} {% if category_name_size != 0 %} {% assign category_icon = category.name | slugify %} From 82d5f55cb4273b91b34caa5cfc2915fc330d6c6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Thu, 10 Oct 2019 17:33:51 +0200 Subject: [PATCH 4/8] fix(): Change require to import JS --- js/anchors-indicator/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/anchors-indicator/index.js b/js/anchors-indicator/index.js index 35671aa088..d36ca2a72e 100644 --- a/js/anchors-indicator/index.js +++ b/js/anchors-indicator/index.js @@ -1,4 +1,4 @@ -const MenuSpy = require('menuspy'); +import MenuSpy from 'menuspy' const COMPONENT_SELECTOR = '[data-anchors-indicator]' const ACTIVE_CLASS = 'data-active-class' From da36eb276ed4e55f9780b6c63cbf7d818a41cf91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Fri, 11 Oct 2019 08:29:27 +0200 Subject: [PATCH 5/8] feat(): Introduce new design --- js/feedback/index.js | 24 ++++++++++++++++++------ src/_includes/sidebar/feedback.html | 7 +++++-- src/_sass/components/_button-fill.scss | 11 +++++++++++ src/_sass/components/_button.scss | 4 ++++ src/_sass/components/_widget.scss | 6 ++++++ 5 files changed, 44 insertions(+), 8 deletions(-) diff --git a/js/feedback/index.js b/js/feedback/index.js index 43255531c5..46f20ca1f6 100644 --- a/js/feedback/index.js +++ b/js/feedback/index.js @@ -2,10 +2,12 @@ const COMPONENT_NAME = 'data-feedback' const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]` const HELPFUL_BUTTON_SELECTOR = `[data-ref="feedback[helpful]"]` const UNHELPFUL_BUTTON_SELECTOR = `[data-ref="feedback[unhelpful]"]` +const CONTENT_SELECTOR = `[data-ref="feedback[content]"]` +const ACTIVE_CLASS = 'data-active-class' const DEFAULTS = { message: { - success: 'Thanks for your feedback!' + success: 'If you need help or have any questions, please consider contacting Support.' } } @@ -13,16 +15,23 @@ export default function () { const components = document.querySelectorAll(COMPONENT_SELECTOR) for (let i = 0; i < components.length; i++) { - const options = JSON.parse(components[i].getAttribute(COMPONENT_NAME) || '{}') - const settings = Object.assign({}, DEFAULTS, options) - const helpfulButton = components[i].querySelector(HELPFUL_BUTTON_SELECTOR) const unhelpfulButton = components[i].querySelector(UNHELPFUL_BUTTON_SELECTOR) + const content = components[i].querySelector(CONTENT_SELECTOR) + + const clickHandler = () => { + content.hidden = false + helpfulButton.disabled = true + unhelpfulButton.disabled = true + } helpfulButton.addEventListener('click', (event) => { event.preventDefault() - components[i].innerText = settings.message.success + const activeClass = helpfulButton.getAttribute(ACTIVE_CLASS) + helpfulButton.classList.add(activeClass) + + clickHandler() window.analytics.track('Docs Rated', { title: '{{title}}', @@ -34,7 +43,10 @@ export default function () { unhelpfulButton.addEventListener('click', (event) => { event.preventDefault() - components[i].innerText = settings.message.success + const activeClass = unhelpfulButton.getAttribute(ACTIVE_CLASS) + unhelpfulButton.classList.add(activeClass) + + clickHandler() window.analytics.track('Docs Rated', { title: '{{title}}', diff --git a/src/_includes/sidebar/feedback.html b/src/_includes/sidebar/feedback.html index f58121c259..90af5578c8 100644 --- a/src/_includes/sidebar/feedback.html +++ b/src/_includes/sidebar/feedback.html @@ -3,7 +3,7 @@
    -
    -
    +
    diff --git a/src/_sass/components/_button-fill.scss b/src/_sass/components/_button-fill.scss index 377538f2ff..609f8b964e 100644 --- a/src/_sass/components/_button-fill.scss +++ b/src/_sass/components/_button-fill.scss @@ -25,4 +25,15 @@ border: none; } } + + &--primary { + background-color: color(primary); + color: color(white); + } + + &--error-light { + background-color: rgba(color(error), 0.78); + color: color(white); + } + } diff --git a/src/_sass/components/_button.scss b/src/_sass/components/_button.scss index 4b7f76e902..a63d9abf5a 100644 --- a/src/_sass/components/_button.scss +++ b/src/_sass/components/_button.scss @@ -8,6 +8,10 @@ text-decoration: none; cursor: pointer; + &:disabled { + pointer-events: none; + } + &:hover { text-decoration: none; } diff --git a/src/_sass/components/_widget.scss b/src/_sass/components/_widget.scss index fbdda497c3..1cbb9b9443 100644 --- a/src/_sass/components/_widget.scss +++ b/src/_sass/components/_widget.scss @@ -5,6 +5,12 @@ line-height: 1.5; } + &__content { + font-size: 14px; + line-height: 1.71; + color: color(gray); + } + & > * + * { margin-top: 6px; } From d383422873eb31888c09aeb028e8cbb808594880 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Fri, 11 Oct 2019 08:31:43 +0200 Subject: [PATCH 6/8] style(): Remove redundant code --- js/feedback/index.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/js/feedback/index.js b/js/feedback/index.js index 46f20ca1f6..b3225ea941 100644 --- a/js/feedback/index.js +++ b/js/feedback/index.js @@ -5,12 +5,6 @@ const UNHELPFUL_BUTTON_SELECTOR = `[data-ref="feedback[unhelpful]"]` const CONTENT_SELECTOR = `[data-ref="feedback[content]"]` const ACTIVE_CLASS = 'data-active-class' -const DEFAULTS = { - message: { - success: 'If you need help or have any questions, please consider contacting Support.' - } -} - export default function () { const components = document.querySelectorAll(COMPONENT_SELECTOR) From 3fabd8ba61370a0b38d611f643bfea4b1bd7c3b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Fri, 11 Oct 2019 12:08:11 +0200 Subject: [PATCH 7/8] fix(): Add hover state, remove underline --- js/feedback/index.js | 5 ++++- src/_includes/components/feedback.html | 6 +++--- src/_includes/sidebar/feedback.html | 2 +- src/_sass/components/_button-fill.scss | 11 ++++++++++- src/_sass/components/_widget.scss | 5 +++++ 5 files changed, 23 insertions(+), 6 deletions(-) diff --git a/js/feedback/index.js b/js/feedback/index.js index b3225ea941..bbcd606fb4 100644 --- a/js/feedback/index.js +++ b/js/feedback/index.js @@ -14,7 +14,10 @@ export default function () { const content = components[i].querySelector(CONTENT_SELECTOR) const clickHandler = () => { - content.hidden = false + if (content) { + content.hidden = false + } + helpfulButton.disabled = true unhelpfulButton.disabled = true } diff --git a/src/_includes/components/feedback.html b/src/_includes/components/feedback.html index ce4739fc24..80de41570f 100644 --- a/src/_includes/components/feedback.html +++ b/src/_includes/components/feedback.html @@ -21,9 +21,9 @@

    Need support?