+
+
diff --git a/src/components/blocks/quicklinks/_quicklinks.js b/src/components/blocks/quicklinks/_quicklinks.js
new file mode 100644
index 000000000..fd48140ad
--- /dev/null
+++ b/src/components/blocks/quicklinks/_quicklinks.js
@@ -0,0 +1,86 @@
+const container = document.querySelector('.b-quicklinks__list');
+
+if (container) {
+ const moreButtonWrapper = document.querySelector('.b-quicklinks__more');
+ const moreButton = document.querySelector('.b-quicklinks__more-btn');
+ const dropdownParent = document.querySelector('.b-quicklinks__more-list');
+ const menuItems = document.querySelectorAll('.b-quicklinks__link-item');
+ const menuItemsArray = Array.from(menuItems);
+ let moreButtonWidth;
+ let menuItemsWidths;
+
+ moreButton.addEventListener('click', () => {
+ if (moreButtonWrapper) {
+ moreButtonWrapper.classList.toggle('b-quicklinks__more--open');
+ }
+ });
+
+ // Get the container width
+ // Loop over each item width and add them together
+ // If adding the next item width to the total is greater than the container width
+ // Then move all remaining items into a dropdown
+ const positionMenuItems = () => {
+ if (!menuItems) return;
+
+ const containerWidth = container.offsetWidth;
+ let totalWidth = 0;
+ let mainItems = [];
+ let remainingItems = [];
+
+ menuItemsWidths.some((itemWidth, index) => {
+ // Calculate next total width including more button width and 40px padding
+ if ((totalWidth + itemWidth + moreButtonWidth + 40) > containerWidth) {
+ // If the totalwidth + last item is not wider than the container, display all items
+ if (index === menuItemsArray.length - 1 && totalWidth + itemWidth < containerWidth) {
+ mainItems = menuItemsArray;
+ } else {
+ // Select remaining items to be moved to dropdown
+ remainingItems = menuItemsArray.slice(index);
+
+ // Add items back to the main menu as container width increases
+ mainItems = menuItemsArray.slice(0, index);
+ }
+
+ return true;
+ }
+
+ totalWidth += itemWidth;
+
+ return false;
+ });
+
+ // Ensure all possible items are visible in main menu
+ mainItems.forEach((item) => {
+ container.appendChild(item);
+ });
+
+ // Move remaining items into dropdown
+ if (remainingItems.length) {
+ moreButtonWrapper.classList.remove('b-quicklinks__more--hidden');
+
+ remainingItems.forEach((item) => {
+ dropdownParent.appendChild(item);
+ });
+ } else if (mainItems.length) {
+ // Hide more button if all items are displayed
+ moreButtonWrapper.classList.add('b-quicklinks__more--hidden');
+ }
+ };
+
+ // Wait for the page to load before getitng width of menu items
+ window.addEventListener('load', () => {
+ menuItemsWidths = menuItemsArray.map((item) => item.offsetWidth);
+ moreButtonWidth = moreButton.offsetWidth;
+ moreButtonWrapper.classList.add('b-quicklinks__more--hidden');
+
+ positionMenuItems();
+ });
+
+ window.addEventListener('resize', () => {
+ positionMenuItems();
+ });
+
+ moreButton.addEventListener('click', () => {
+ moreButton.classList.toggle('u-btn--quicklink-more--active');
+ });
+}
diff --git a/src/components/blocks/quicklinks/_quicklinks.scss b/src/components/blocks/quicklinks/_quicklinks.scss
new file mode 100644
index 000000000..7c237b5c8
--- /dev/null
+++ b/src/components/blocks/quicklinks/_quicklinks.scss
@@ -0,0 +1,175 @@
+@use "../../mixins";
+@use "../../base";
+@use "sass:color";
+
+.b-quicklinks {
+ background: black;
+ position: sticky;
+ top: 0;
+
+ &__nav {
+ background-color: base.sitecolors-siteColor("vam-black");
+ }
+
+ &__list {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ &__item {
+ padding: 0 12px;
+ }
+
+ &__btn {
+ @include base.typography-typeSetting(3);
+
+ background-color: base.sitecolors-siteColor("vam-black");
+ border: none;
+ border-bottom: 3px solid transparent;
+ border-radius: 0;
+ margin: 0;
+ padding: 16px 0 13px;
+ transition: border-color .15s ease-in;
+ text-align: left;
+
+ &:hover,
+ &:active {
+ border-color: base.sitecolors-siteColor("vam-white");
+ background-color: base.sitecolors-siteColor("vam-black");
+ box-shadow: none;
+ outline: none;
+ }
+
+ &:focus {
+ @include mixins.focus-defaultFocus;
+ }
+ }
+
+ &__more-list-wrapper {
+ max-height: calc(100vh - 100px);
+ max-width: calc(100vw - 40px);
+ opacity: 0;
+ overflow: auto;
+ padding: 12px;
+ pointer-events: none;
+ position: absolute;
+ right: 0;
+ top: 100%;
+ transition: opacity .2s ease-out;
+ width: 200px;
+ }
+
+ &__more {
+ order: 1;
+ position: relative;
+ margin-left: auto;
+
+ &-btn {
+ @include base.typography-typeSetting(3);
+
+ background-color: base.sitecolors-siteColor("vam-black");
+ border: none;
+ border-bottom: 3px solid transparent;
+ border-radius: 0;
+ margin: 0;
+ padding: 16px 11px 13px;
+ position: relative;
+ transition: border-color .15s ease-in;
+
+ &::before {
+ content: '';
+ border: 3px solid transparent;
+ border-bottom: none;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+
+ &::after {
+ margin: 7px 0 0 7px;
+ transform: rotate(90deg);
+ }
+
+ &:hover {
+ border-color: transparent;
+ border-bottom-color: base.sitecolors-siteColor("vam-white");
+ background-color: base.sitecolors-siteColor("vam-black");
+ box-shadow: none;
+ outline: none;
+ }
+
+ &:focus {
+ @include mixins.focus-defaultFocus;
+ }
+
+ &--active {
+ &,
+ &:hover,
+ &:focus {
+ border-color: base.sitecolors-siteColor("vam-white");
+ }
+
+ &::before {
+ border-color: base.sitecolors-siteColor("vam-white");
+ }
+
+ &::after {
+ margin: -2px 0 0 7px;
+ transform: rotate(-90deg);
+ }
+ }
+
+ }
+
+ &--hidden {
+ display: none;
+ }
+
+ &--open {
+ .b-quicklinks__more-list-wrapper {
+ display: block;
+ opacity: 1;
+ pointer-events: all;
+ }
+ }
+ }
+
+
+ &__more-list {
+ background-color: base.sitecolors-siteColor("vam-black");
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ padding: 0;
+ }
+
+ a {
+ display: block;
+ padding: 8px;
+ transition:
+ border-color .15s ease-out,
+ box-shadow .15s ease-out;
+
+ &:hover {
+ border-color: base.sitecolors-siteColor("vam-white");
+ }
+
+ &:focus,
+ &:active {
+ @include mixins.focus-defaultFocus;
+
+ border-color: transparent;
+ position: relative;
+ }
+ }
+ }
+}
diff --git a/src/components/blocks/quicklinks/quicklinks.config.js b/src/components/blocks/quicklinks/quicklinks.config.js
new file mode 100644
index 000000000..56c5d6157
--- /dev/null
+++ b/src/components/blocks/quicklinks/quicklinks.config.js
@@ -0,0 +1,36 @@
+module.exports = {
+ default: 'default',
+ title: 'Quicklinks',
+ context: {
+ menuItems: [
+ {
+ label: 'Researching our Collection',
+ url: '#researching-our-collection'
+ },
+ {
+ label: 'The Research Handbook',
+ url: 'the-research-handbook'
+ },
+ {
+ label: 'V&A Online Journal',
+ url: 'v-a-online-journal'
+ },
+ {
+ label: 'Research Blog',
+ url: 'research-blog'
+ },
+ {
+ label: 'Our history',
+ url: 'our-history'
+ },
+ {
+ label: 'Our team',
+ url: 'our-team'
+ },
+ {
+ label: 'Opportunities',
+ url: 'opportunities'
+ },
+ ]
+ }
+};
diff --git a/src/components/blocks/quicklinks/quicklinks.html b/src/components/blocks/quicklinks/quicklinks.html
new file mode 100644
index 000000000..bec790431
--- /dev/null
+++ b/src/components/blocks/quicklinks/quicklinks.html
@@ -0,0 +1,22 @@
+
+
diff --git a/src/components/units/button/_button.scss b/src/components/units/button/_button.scss
index 0450d045c..3ae7d04df 100644
--- a/src/components/units/button/_button.scss
+++ b/src/components/units/button/_button.scss
@@ -121,4 +121,32 @@
width: 8px;
}
}
+
+ &--navigation {
+ align-items: center;
+ background-color: base.sitecolors-siteColor("vam-grey-6");
+ border: 1px solid base.sitecolors-siteColor("vam-grey-4");
+ border-radius: 50px;
+ display: flex;
+ font-size: 0;
+ height: 28px;
+ line-height: 0;
+ justify-content: center;
+ margin: 0;
+ padding: 6px;
+ position: static;
+ width: 28px;
+
+ svg {
+ color: base.sitecolors-siteColor("vam-black");
+ height: 12px;
+ width: 8px;
+ }
+
+ &--next {
+ svg {
+ transform: rotate(180deg);
+ }
+ }
+ }
}
diff --git a/src/components/units/button/button.config.js b/src/components/units/button/button.config.js
index c78290456..9118e4e7c 100644
--- a/src/components/units/button/button.config.js
+++ b/src/components/units/button/button.config.js
@@ -80,6 +80,18 @@ module.exports = {
text: 'Stop button',
modifiers: ['stop', 'outlined-inverse', 'micro']
}
- }
+ },
+ {
+ name: 'navigation',
+ label: 'Navigation',
+ context: {
+ button: true,
+ icon: 'point-left',
+ modifiers: ['navigation', 'navigation--prev'],
+ variants: [
+ ['navigation', 'navigation--next'],
+ ]
+ },
+ },
]
};
diff --git a/src/components/units/button/button.html b/src/components/units/button/button.html
index 5a3acbde1..12eac7843 100644
--- a/src/components/units/button/button.html
+++ b/src/components/units/button/button.html
@@ -1,11 +1,39 @@
+{% if button %}
+
+{% else %}
+{% endif %}
{% for v in variants %}
{% endfor %}
diff --git a/src/components/units/label-tag/_label-tag.scss b/src/components/units/label-tag/_label-tag.scss
index a06bd6c1e..f749aaaf6 100644
--- a/src/components/units/label-tag/_label-tag.scss
+++ b/src/components/units/label-tag/_label-tag.scss
@@ -64,4 +64,11 @@
@include base.typography-typeSetting(2, "bold");
}
}
+
+ &--project {
+ @include base.typography-typeSetting(1, "regular");
+
+ background: base.sitecolors-siteColor("vam-white");
+ margin-top: 18px;
+ }
}
diff --git a/src/components/units/label-tag/label-tag.config.js b/src/components/units/label-tag/label-tag.config.js
index 7b5e5e15d..3017fba0c 100644
--- a/src/components/units/label-tag/label-tag.config.js
+++ b/src/components/units/label-tag/label-tag.config.js
@@ -88,6 +88,13 @@ module.exports = {
text: 'Featured',
modifier: ['featured']
}
+ },
+ {
+ name: 'Project',
+ context: {
+ text: 'Current project',
+ modifier: ['project']
+ }
}
]
};
+