diff --git a/src/components/utility-list/_guidance.hbs b/src/components/utility-list/_guidance.hbs new file mode 100644 index 00000000..7f3cbd2b --- /dev/null +++ b/src/components/utility-list/_guidance.hbs @@ -0,0 +1,4 @@ +--- +title: Utility list +layout: blank-layout.hbs +--- \ No newline at end of file diff --git a/src/components/utility-list/_utility-list.hbs b/src/components/utility-list/_utility-list.hbs new file mode 100644 index 00000000..955eeb2b --- /dev/null +++ b/src/components/utility-list/_utility-list.hbs @@ -0,0 +1,28 @@ +
{{#if title}} +
{{title}}
{{/if}} + +
\ No newline at end of file diff --git a/src/components/utility-list/_utility-list.scss b/src/components/utility-list/_utility-list.scss new file mode 100644 index 00000000..d284affb --- /dev/null +++ b/src/components/utility-list/_utility-list.scss @@ -0,0 +1,163 @@ +.nsw-utility-list { + @include component-spacing(); + + &__title { + @include font-size('lg'); + font-weight: var(--nsw-font-bold); + padding-bottom: rem(16px); + + @include breakpoint('md') { + padding-bottom: rem(24px); + } + } + + ul { + margin: 0; + padding: 0; + list-style-type: none; + } + + &__item { + margin: 0; + padding: rem(16px); + display: flex; + gap: $grid-gutters; + align-items: center; + text-decoration: none; + cursor: pointer; + font-weight: var(--nsw-font-bold); + border-bottom: 1px solid var(--nsw-grey-04); + color: var(--nsw-brand-dark); + + @include font-size('sm'); + + &:hover { + @include nsw-hover; + outline-width: 0; + } + + &:focus { + @include nsw-focus; + } + + &:last-child { + border-bottom: unset; + } + + .nsw-section--invert & { + color: var(--nsw-text-light); + } + + svg { + width: rem(24px); + height: rem(24px); + + path { + fill: var(--nsw-white); + } + } + } + + .nsw-toggletip { + border-bottom: unset; + + &__header { + display: none; + } + + &__content { + display: flex; + gap: $grid-gutters; + padding: rem(16px); + + a { + display: flex; + padding: rem(8px); + border-radius: var(--nsw-border-radius); + text-decoration: none; + } + + span:not(.nsw-toggletip__element .nsw-material-icons) { + color: var(--nsw-brand-dark); + } + } + } + + &--dark { + .nsw-utility-list__item { + background-color: rgba(var(--nsw-palette-blue-01-rgb), 1); + color: var(--nsw-text-light); + + span:not(.nsw-toggletip__element .nsw-material-icons) { + color: var(--nsw-text-light); + } + + svg { + path { + fill: var(--nsw-brand-dark); + } + } + + &:hover { + background-color: rgba(var(--nsw-palette-blue-01-rgb), 0.8); + } + + &:focus { + outline: solid 3px var(--nsw-focus); + outline-offset: 0; + } + + &:visited { + color: var(--nsw-text-visited); + } + } + } + + &--light { + background-color: var(--nsw-brand-light); + color: var(--nsw-text-dark); + + .nsw-utility-list__item { + border-color: var(--nsw-off-white); + + svg { + path { + fill: var(--nsw-brand-dark); + } + } + } + } + + &--off-white { + background-color: var(--nsw-off-white); + + .nsw-utility-list__item { + svg { + path { + fill: var(--nsw-brand-dark); + } + } + + span { + color: var(--nsw-brand-dark); + } + } + } + + &--horizontal { + @include breakpoint('md') { + display: flex; + + ul { + display: flex; + width: 100%; + justify-content: space-between; + } + + li { + flex: 1 1 auto; + border-bottom: unset; + } + } + } +} diff --git a/src/components/utility-list/blank.hbs b/src/components/utility-list/blank.hbs new file mode 100644 index 00000000..1ed7d730 --- /dev/null +++ b/src/components/utility-list/blank.hbs @@ -0,0 +1,18 @@ +--- +title: Utility list +width: narrow +page: true +model: ../../components/utility-list/json/utility-list.json +--- + +{{#>_layout-container}} + +{{#each model}} + {{#each this}} + {{#each this}} + {{>_utility-list}} + {{/each}} + {{/each}} +{{/each}} + +{{/_layout-container}} \ No newline at end of file diff --git a/src/components/utility-list/index.hbs b/src/components/utility-list/index.hbs new file mode 100644 index 00000000..2a2cd3d9 --- /dev/null +++ b/src/components/utility-list/index.hbs @@ -0,0 +1,33 @@ +--- +title: Utility list +width: narrow +tabs: true +directory: utility-list +intro: +model: ../../components/utility-list/json/utility-list.json +meta-description: +meta-index: true +--- + +
+ + +{{#each model}} +
+ {{#each this}} +

{{@key}}

+ {{#each this}} +{{#>_docs-example separated=true}} +{{>_utility-list}} +{{/_docs-example}} + {{/each}} + {{/each}} +
+{{/each}} + +
\ No newline at end of file diff --git a/src/components/utility-list/json/utility-list.json b/src/components/utility-list/json/utility-list.json new file mode 100644 index 00000000..ff6b1170 --- /dev/null +++ b/src/components/utility-list/json/utility-list.json @@ -0,0 +1,590 @@ +{ + "off-white": { + "Vertical": { + "all": { + "id": "off-white-1", + "align": "vertical", + "theme": "off-white", + "copy": true, + "print": true, + "download": true, + "share": true, + "social": { + "facebook": { + "icon": "<\/svg>", + "data": { + "href": "http://www.facebook.com/sharer.php" + }, + "aria-label": "Share on Facebook" + }, + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "twitter": { + "icon": "<\/svg>", + "data": { + "data-text": "Hi there!", + "data-hashtags": "#design, #system", + "data-username": "@digital_nsw", + "href": "https://twitter.com/intent/tweet", + "aria-label": "Share on Twitter" + } + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + }, + "limited": { + "id": "off-white-2", + "align": "vertical", + "theme": "off-white", + "copy": true, + "share": true, + "social": { + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + } + }, + "Horizontal": { + "all": { + "id": "off-white-3", + "align": "horizontal", + "theme": "off-white", + "copy": true, + "print": true, + "download": true, + "share": true, + "social": { + "facebook": { + "icon": "<\/svg>", + "data": { + "href": "http://www.facebook.com/sharer.php" + }, + "aria-label": "Share on Facebook" + }, + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "twitter": { + "icon": "<\/svg>", + "data": { + "data-text": "Hi there!", + "data-hashtags": "#design, #system", + "data-username": "@digital_nsw", + "href": "https://twitter.com/intent/tweet", + "aria-label": "Share on Twitter" + } + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + }, + "limited": { + "id": "off-white-4", + "align": "horizontal", + "theme": "off-white", + "copy": true, + "share": true, + "social": { + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + } + } + }, + "white": { + "Vertical": { + "all": { + "id": "1", + "align": "vertical", + "copy": true, + "print": true, + "download": true, + "share": true, + "social": { + "facebook": { + "icon": "<\/svg>", + "data": { + "href": "http://www.facebook.com/sharer.php" + }, + "aria-label": "Share on Facebook" + }, + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "twitter": { + "icon": "<\/svg>", + "data": { + "data-text": "Hi there!", + "data-hashtags": "#design, #system", + "data-username": "@digital_nsw", + "href": "https://twitter.com/intent/tweet", + "aria-label": "Share on Twitter" + } + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + }, + "limited": { + "id": "2", + "align": "vertical", + "copy": true, + "share": true, + "social": { + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + } + }, + "Horizontal": { + "all": { + "id": "3", + "align": "horizontal", + "copy": true, + "print": true, + "download": true, + "share": true, + "social": { + "facebook": { + "icon": "<\/svg>", + "data": { + "href": "http://www.facebook.com/sharer.php" + }, + "aria-label": "Share on Facebook" + }, + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "twitter": { + "icon": "<\/svg>", + "data": { + "data-text": "Hi there!", + "data-hashtags": "#design, #system", + "data-username": "@digital_nsw", + "href": "https://twitter.com/intent/tweet", + "aria-label": "Share on Twitter" + } + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + }, + "limited": { + "id": "4", + "align": "horizontal", + "copy": true, + "share": true, + "social": { + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + } + } + }, + "dark": { + "Vertical": { + "all": { + "id": "dark-1", + "align": "vertical", + "theme": "dark", + "copy": true, + "print": true, + "download": true, + "share": true, + "social": { + "facebook": { + "icon": "<\/svg>", + "data": { + "href": "http://www.facebook.com/sharer.php" + }, + "aria-label": "Share on Facebook" + }, + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "twitter": { + "icon": "<\/svg>", + "data": { + "data-text": "Hi there!", + "data-hashtags": "#design, #system", + "data-username": "@digital_nsw", + "href": "https://twitter.com/intent/tweet", + "aria-label": "Share on Twitter" + } + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + }, + "limited": { + "id": "dark-2", + "align": "vertical", + "theme": "dark", + "copy": true, + "share": true, + "social": { + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + } + }, + "Horizontal": { + "all": { + "id": "dark-3", + "align": "horizontal", + "theme": "dark", + "copy": true, + "print": true, + "download": true, + "share": true, + "social": { + "facebook": { + "icon": "<\/svg>", + "data": { + "href": "http://www.facebook.com/sharer.php" + }, + "aria-label": "Share on Facebook" + }, + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "twitter": { + "icon": "<\/svg>", + "data": { + "data-text": "Hi there!", + "data-hashtags": "#design, #system", + "data-username": "@digital_nsw", + "href": "https://twitter.com/intent/tweet", + "aria-label": "Share on Twitter" + } + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + }, + "limited": { + "id": "dark-4", + "align": "horizontal", + "theme": "dark", + "copy": true, + "share": true, + "social": { + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + } + } + }, + "light": { + "Vertical": { + "all": { + "id": "light-1", + "align": "vertical", + "theme": "light", + "copy": true, + "print": true, + "download": true, + "share": true, + "social": { + "facebook": { + "icon": "<\/svg>", + "data": { + "href": "http://www.facebook.com/sharer.php" + }, + "aria-label": "Share on Facebook" + }, + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "twitter": { + "icon": "<\/svg>", + "data": { + "data-text": "Hi there!", + "data-hashtags": "#design, #system", + "data-username": "@digital_nsw", + "href": "https://twitter.com/intent/tweet", + "aria-label": "Share on Twitter" + } + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + }, + "limited": { + "id": "light-2", + "align": "vertical", + "theme": "light", + "copy": true, + "share": true, + "social": { + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + } + }, + "Horizontal": { + "all": { + "id": "light-3", + "align": "horizontal", + "theme": "light", + "copy": true, + "print": true, + "download": true, + "share": true, + "social": { + "facebook": { + "icon": "<\/svg>", + "data": { + "href": "http://www.facebook.com/sharer.php" + }, + "aria-label": "Share on Facebook" + }, + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "twitter": { + "icon": "<\/svg>", + "data": { + "data-text": "Hi there!", + "data-hashtags": "#design, #system", + "data-username": "@digital_nsw", + "href": "https://twitter.com/intent/tweet", + "aria-label": "Share on Twitter" + } + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + }, + "limited": { + "id": "light-4", + "align": "horizontal", + "theme": "light", + "copy": true, + "share": true, + "social": { + "linkedin": { + "icon": "<\/svg>", + "data": { + "data-url": "https://www.digital.nsw.gov.au", + "href": "https://www.linkedin.com/shareArticle" + }, + "aria-label": "Share on LinkedIn" + }, + "mail": { + "icon": "email<\/span>", + "data": { + "data-subject": "Email Subject", + "data-body": "Content of my email.", + "href": "mailto:", + "aria-label": "Share via Email" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/components/utility-list/utility-list.js b/src/components/utility-list/utility-list.js new file mode 100644 index 00000000..540d939d --- /dev/null +++ b/src/components/utility-list/utility-list.js @@ -0,0 +1,134 @@ +import Toggletip from '../tooltip/toggletip' + +class UtilityList extends Toggletip { + constructor(element, toggletip) { + super(toggletip) + this.utility = element + this.share = toggletip + this.print = this.utility.querySelectorAll('.js-print-page') + this.copy = this.utility.querySelectorAll('.js-copy-clipboard') + this.shareItems = this.share.querySelectorAll('a') + this.urlLocation = window.location.href + this.copyElement = false + } + + init() { + super.init() + this.shareItems.forEach((share) => { + const shareLocation = share.getAttribute('data-url') + if (!shareLocation) { + share.setAttribute('data-url', window.location.href) + } + }) + + this.share.addEventListener('click', (event) => { + event.preventDefault() + const button = event.target.closest('a') + const social = button.getAttribute('data-social') + const url = this.getSocialUrl(button, social) + if (social === 'mail') { + window.location.href = url + } else { + window.open(url, `${social}-share-dialog`, 'width=626,height=436') + } + }) + + this.print.forEach((element) => { + element.setAttribute('tabindex', '0') + element.addEventListener('click', () => { + window.print() + }) + }) + this.copy.forEach((element) => { + element.setAttribute('tabindex', '0') + element.addEventListener('click', () => { + this.copyToClipboard(element) + }) + }) + } + + getSocialUrl(button, social) { + const params = this.getSocialParams(social) + let newUrl = '' + + if (social === 'twitter') { + this.getTwitterText(button) + } + + params.forEach((param) => { + let paramValue = button.getAttribute(`data-${param}`) + if (param === 'hashtags') paramValue = encodeURI(paramValue.replace(/#| /g, '')) + if (paramValue) { + if (social === 'facebook') { + newUrl = `${newUrl}u=${encodeURIComponent(paramValue)}&` + } else { + newUrl = `${newUrl + param}=${encodeURIComponent(paramValue)}&` + } + } + }) + if (social === 'linkedin') newUrl = `mini=true&${newUrl}` + return `${button.getAttribute('href')}?${newUrl}` + } + + getSocialParams(social) { + switch (social) { + case 'twitter': + this.socialParams = ['text', 'hashtags'] + break + case 'facebook': + case 'linkedin': + this.socialParams = ['url'] + break + case 'mail': + this.socialParams = ['subject', 'body'] + break + default: + console.log('No social links found') + break + } + return this.socialParams + } + + getTwitterText(button) { + let twitText = button.getAttribute('data-text') + const twitUrl = button.getAttribute('data-url') || this.urlLocation + const twitUsername = button.getAttribute('data-username') + if (twitUsername) { + twitText = `${twitText} ${twitUrl} via ${twitUsername}` + } else { + twitText = `${twitText} ${twitUrl}` + } + button.setAttribute('data-text', twitText) + button.removeAttribute('data-url') + button.removeAttribute('data-username') + } + + copyToClipboard(element) { + if (!navigator.clipboard) { + const input = document.createElement('input') + input.setAttribute('value', this.urlLocation) + document.body.appendChild(input) + input.select() + document.execCommand('copy') + document.body.removeChild(input) + this.copiedMessage(element) + } else { + navigator.clipboard.writeText(this.urlLocation).then(() => { + this.copiedMessage(element) + }) + } + } + + copiedMessage(element) { + this.copyElement = element + const icon = '' + this.copyElement.classList.add('copied') + this.copyElement.innerHTML = `${icon} Copied` + setTimeout(() => { + this.copyElement.classList.remove('copied') + this.copyElement.innerHTML = `${icon} Copy link` + }, 3000) + } +} + +export default UtilityList diff --git a/src/main.js b/src/main.js index 0c3df0a9..ef32ec41 100644 --- a/src/main.js +++ b/src/main.js @@ -1,18 +1,19 @@ /* eslint-disable max-len */ -import SiteSearch from './components/header/header' -import Navigation from './components/main-nav/main-nav' import Accordion from './components/accordion/accordion' +import BackTop from './components/back-to-top/back-to-top' import Dialog from './components/dialog/dialog' -import Filters from './components/filters/filters' +import ExternalLink from './components/link/link' import FileUpload from './components/file-upload/file-upload' -import Tabs from './components/tabs/tabs' +import Filters from './components/filters/filters' import GlobalAlert from './components/global-alert/global-alert' +import Navigation from './components/main-nav/main-nav' +import Popover from './components/popover/popover' import Select from './components/select/select' -import Tooltip from './components/tooltip/tooltip' +import SiteSearch from './components/header/header' +import Tabs from './components/tabs/tabs' import Toggletip from './components/tooltip/toggletip' -import ExternalLink from './components/link/link' -import Popover from './components/popover/popover' -import BackTop from './components/back-to-top/back-to-top' +import Tooltip from './components/tooltip/tooltip' +import UtilityList from './components/utility-list/utility-list' if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach @@ -35,26 +36,32 @@ if (!Element.prototype.closest) { } function initSite() { - // Header Search - const openSearchButton = document.querySelectorAll('.js-open-search') - const closeSearchButton = document.querySelectorAll('.js-close-search') - const navigation = document.getElementById('main-nav') const accordions = document.querySelectorAll('.js-accordion') + const backTop = document.querySelectorAll('.js-back-to-top') + const closeSearchButton = document.querySelectorAll('.js-close-search') const dialogs = document.querySelectorAll('.js-dialog') const fileUpload = document.querySelectorAll('.js-file-upload') const filters = document.querySelectorAll('.js-filters') - const tabs = document.querySelectorAll('.js-tabs') const globalAlert = document.querySelectorAll('.js-global-alert') - const multiSelect = document.querySelectorAll('.js-multi-select') - const tooltip = document.querySelectorAll('.js-tooltip') - const toggletip = document.querySelectorAll('.js-toggletip') const link = document.querySelectorAll('.js-link') + const multiSelect = document.querySelectorAll('.js-multi-select') + const navigation = document.getElementById('main-nav') + const openSearchButton = document.querySelectorAll('.js-open-search') const popover = document.querySelectorAll('.js-popover') - const backTop = document.querySelectorAll('.js-back-to-top') + const tabs = document.querySelectorAll('.js-tabs') + const toggletip = document.querySelectorAll('.js-toggletip') + const tooltip = document.querySelectorAll('.js-tooltip') + const utilityList = document.querySelectorAll('.js-utility-list') - if (openSearchButton) { - openSearchButton.forEach((element) => { - new SiteSearch(element).init() + if (accordions) { + accordions.forEach((element) => { + new Accordion(element).init() + }) + } + + if (backTop) { + backTop.forEach((element) => { + new BackTop(element).init() }) } @@ -64,18 +71,12 @@ function initSite() { }) } - if (navigation) { - new Navigation(navigation).init() + if (dialogs) { + dialogs.forEach((element) => { + new Dialog(element).init() + }) } - accordions.forEach((element) => { - new Accordion(element).init() - }) - - dialogs.forEach((element) => { - new Dialog(element).init() - }) - if (fileUpload) { fileUpload.forEach((element) => { new FileUpload(element).init() @@ -88,55 +89,66 @@ function initSite() { }) } - if (tabs) { - tabs.forEach((element) => { - new Tabs(element).init() - }) - } - if (globalAlert) { globalAlert.forEach((element) => { new GlobalAlert(element).init() }) } + if (link) { + link.forEach((element) => { + new ExternalLink(element).init() + }) + } + if (multiSelect) { multiSelect.forEach((element) => { new Select(element).init() }) } - if (tooltip) { - tooltip.forEach((element) => { - new Tooltip(element).init() + if (navigation) { + new Navigation(navigation).init() + } + + if (openSearchButton) { + openSearchButton.forEach((element) => { + new SiteSearch(element).init() }) } - if (toggletip) { - toggletip.forEach((element) => { - new Toggletip(element).init() + if (popover) { + popover.forEach((element) => { + new Popover(element).init() }) } - if (link) { - link.forEach((element) => { - new ExternalLink(element).init() + if (tabs) { + tabs.forEach((element) => { + new Tabs(element).init() }) } - if (popover) { - popover.forEach((element) => { - new Popover(element).init() + if (toggletip) { + toggletip.forEach((element) => { + new Toggletip(element).init() }) } - if (backTop) { - backTop.forEach((element) => { - new BackTop(element).init() + if (tooltip) { + tooltip.forEach((element) => { + new Tooltip(element).init() + }) + } + + if (utilityList) { + utilityList.forEach((element) => { + const shareItem = element.querySelector('.js-share') + new UtilityList(element, shareItem).init() }) } } export { - initSite, SiteSearch, Navigation, Accordion, Tabs, GlobalAlert, Dialog, Filters, FileUpload, Select, Tooltip, Toggletip, ExternalLink, Popover, BackTop, + initSite, Accordion, BackTop, Dialog, ExternalLink, FileUpload, Filters, GlobalAlert, Navigation, Popover, Select, SiteSearch, Tabs, Toggletip, Tooltip, UtilityList, } diff --git a/src/main.scss b/src/main.scss index 230fbe1d..af5b0182 100644 --- a/src/main.scss +++ b/src/main.scss @@ -44,3 +44,4 @@ @import 'components/tabs/tabs'; @import 'components/tag/tag'; @import 'components/tooltip/tooltip'; +@import 'components/utility-list/utility-list';