nsw-design-system 3.2.4 → 3.3.0

package/src/components/filters/filters.js

@@ -1,38 +1,107 @@
+import { uniqueId } from '../../global/scripts/helpers/utilities'
+
 class Filters {
   constructor(element) {
     this.filters = element
+    this.filtersWrapper = element.querySelector('.nsw-filters__wrapper')
     this.openButton = element.querySelector('.nsw-filters__controls button')
-    this.closeButtons = element.querySelectorAll('.nsw-filters__back button')
-    this.all = element.querySelectorAll('.nsw-filters__all')
-    this.allBlocks = Array.prototype.slice.call(this.all)
+    this.openButtonIcons = this.openButton ? this.openButton.querySelectorAll('span') : null
+    this.selectedCount = element.querySelector('.js-filters--count')
+    this.openButtonText = this.selectedCount ? this.selectedCount.querySelector('span:not(.nsw-material-icons)') : null
+    this.buttonLabel = this.openButtonText ? this.openButtonText.innerText : null
+    this.closeButton = element.querySelector('.nsw-filters__back button')
+    this.acceptButton = element.querySelector('.nsw-filters__accept button')
+    this.clearButton = element.querySelector('.nsw-filters__cancel button')
     this.showMoreButtons = Array.prototype.slice.call(element.querySelectorAll('.nsw-filters__more'))
+    this.accordionButtons = element.querySelectorAll('.nsw-filters__item-button')
+    this.showAll = element.querySelectorAll('.nsw-filters__all')
+    this.showAllBlocks = Array.prototype.slice.call(this.showAll)
+    this.filtersItems = element.querySelectorAll('.nsw-filters__item')
+    /* eslint-disable max-len */
+    this.focusableEls = this.filtersWrapper.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])')
+    this.checkIcon = '<span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">check_circle</span>'
+    this.arrowIcon = '<span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_right</span>'
+    /* eslint-ensable max-len */
     this.showEvent = (e) => this.showFilters(e)
     this.hideEvent = (e) => this.hideFilters(e)
     this.showMoreEvent = (e) => this.showMore(e)
+    this.toggleEvent = (e) => this.toggleAccordion(e)
+    this.resetEvent = (e) => this.clearAllFilters(e)
     this.body = document.body
+    this.buttons = []
+    this.content = []
+    this.selected = []
   }
 
   init() {
+    this.setUpDom()
     this.controls()
+    this.selectedItems()
   }
 
-  controls() {
-    this.openButton.addEventListener('click', this.showEvent, false)
+  setUpDom() {
+    this.filters.classList.add('ready')
+
+    if (this.openButton) {
+      if (this.openButtonIcons.length < 3) {
+        this.openButton.insertAdjacentHTML('beforeend', this.arrowIcon)
+      }
+    }
+
+    this.accordionButtons.forEach((button) => {
+      const buttonElem = button
+      const uID = uniqueId('collapsed')
+      buttonElem.setAttribute('type', 'button')
+      buttonElem.setAttribute('aria-expanded', 'false')
+      buttonElem.setAttribute('aria-controls', uID)
 
-    this.closeButtons.forEach((element) => {
-      element.addEventListener('click', this.hideEvent, false)
+      const contentElem = buttonElem.nextElementSibling
+      contentElem.id = buttonElem.getAttribute('aria-controls')
+      contentElem.hidden = true
+
+      this.content.push(contentElem)
+      this.buttons.push(buttonElem)
     })
+  }
+
+  controls() {
+    if (this.openButton) {
+      this.openButton.addEventListener('click', this.showEvent, false)
+    }
 
-    this.all.forEach((element) => {
+    if (this.acceptButton) {
+      this.acceptButton.disabled = true
+    }
+
+    if (this.closeButton) {
+      this.closeButton.addEventListener('click', this.hideEvent, false)
+    }
+
+    this.showAll.forEach((element) => {
       const showMoreButton = element.nextElementSibling
       showMoreButton.addEventListener('click', this.showMoreEvent, false)
     })
+
+    if (this.buttons) {
+      this.buttons.forEach((element) => {
+        element.addEventListener('click', this.toggleEvent, false)
+      })
+    }
+
+    if (this.clearButton) {
+      this.clearButton.addEventListener('click', this.resetEvent, false)
+    }
   }
 
   showFilters(e) {
     e.preventDefault()
-    this.filters.classList.add('active')
-    this.body.classList.add('filters-open')
+    if (this.filters.classList.contains('nsw-filters--down')) {
+      this.filters.classList.toggle('active')
+    } else {
+      this.trapFocus(this.filtersWrapper)
+      this.filters.classList.add('active')
+      this.body.classList.add('filters-open')
+    }
   }
 
   hideFilters(e) {
@@ -45,10 +114,249 @@ class Filters {
     e.preventDefault()
     const currentShowMore = e.target
     const currentIndex = this.showMoreButtons.indexOf(currentShowMore)
-    const currentAll = this.allBlocks[currentIndex]
+    const currentAll = this.showAllBlocks[currentIndex]
     currentAll.classList.remove('hidden')
     currentShowMore.classList.add('hidden')
   }
+
+  getTargetContent(element) {
+    const currentIndex = this.buttons.indexOf(element)
+    return this.content[currentIndex]
+  }
+
+  setAccordionState(element, state) {
+    const targetContent = this.getTargetContent(element)
+
+    if (state === 'open') {
+      element.classList.add('active')
+      element.setAttribute('aria-expanded', 'true')
+      targetContent.hidden = false
+    } else if (state === 'close') {
+      element.classList.remove('active')
+      element.setAttribute('aria-expanded', 'false')
+      targetContent.hidden = true
+    }
+  }
+
+  toggleAccordion(e) {
+    const { currentTarget } = e
+    const targetContent = this.getTargetContent(currentTarget)
+    const isHidden = targetContent.hidden
+
+    if ((isHidden)) {
+      this.setAccordionState(currentTarget, 'open')
+    } else {
+      this.setAccordionState(currentTarget, 'close')
+    }
+  }
+
+  trapFocus(element) {
+    const firstFocusableEl = this.focusableEls[0]
+    const lastFocusableEl = this.focusableEls[this.focusableEls.length - 1]
+    const KEYCODE_TAB = 9
+
+    element.addEventListener('keydown', (e) => {
+      const isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB)
+
+      if (!isTabPressed) { return }
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusableEl) {
+          e.preventDefault()
+          lastFocusableEl.focus()
+        }
+      } else if (document.activeElement === lastFocusableEl) {
+        e.preventDefault()
+        firstFocusableEl.focus()
+      }
+    })
+  }
+
+  toggleAccept(array) {
+    if (this.acceptButton) {
+      if (array.length > 0) {
+        this.acceptButton.disabled = false
+      } else {
+        this.acceptButton.disabled = true
+      }
+    }
+  }
+
+  toggleSelectedState(array) {
+    if (array.length > 0) {
+      this.openButton.parentElement.classList.add('active')
+    } else {
+      this.openButton.parentElement.classList.remove('active')
+    }
+  }
+
+  resultsCount(array, buttonText) {
+    if (this.openButtonText) {
+      if (array.length > 0) {
+        this.openButtonText.innerText = `${buttonText} (${array.length})`
+      } else {
+        this.openButtonText.innerText = `${buttonText}`
+      }
+    }
+  }
+
+  updateDom() {
+    this.resultsCount(this.selected, this.buttonLabel)
+    this.toggleAccept(this.selected)
+    this.toggleSelectedState(this.selected)
+  }
+
+  static getEventType(type) {
+    if (type === 'text') {
+      return 'input'
+    }
+    return 'change'
+  }
+
+  static getCondition(element) {
+    if (element.type === 'text' || element.type === 'select-one') {
+      return element.value !== ''
+    }
+    return element.checked
+  }
+
+  static singleCount(element, index, id) {
+    const isSingleCount = element.closest('.js-filters--single-count')
+    if (!isSingleCount) {
+      return { uniqueID: `${id}-${index}`, singleID: `${id}-${index}`, isSingleCount }
+    }
+    return { uniqueID: `${id}`, singleID: `${id}-${index}`, isSingleCount }
+  }
+
+  updateCount(options) {
+    const id = uniqueId()
+    const GroupArray = []
+    if (options.array.length > 0) {
+      options.array.forEach((element, index) => {
+        const getEventType = this.constructor.getEventType(element.type)
+        const { uniqueID, singleID, isSingleCount } = this.constructor.singleCount(element, index, id)
+
+        if (this.constructor.getCondition(element)) {
+          this.selected.push(uniqueID)
+          if (isSingleCount) {
+            GroupArray.push(singleID)
+          }
+          this.updateDom()
+        }
+        element.addEventListener(getEventType, () => {
+          const selectedIndex = this.selected.indexOf(uniqueID)
+          const singleSelectedIndex = GroupArray.indexOf(singleID)
+          if (this.constructor.getCondition(element)) {
+            if (!this.selected.includes(uniqueID)) {
+              this.selected.push(uniqueID)
+            }
+            if (isSingleCount && !GroupArray.includes(singleID)) {
+              GroupArray.push(singleID)
+            }
+            this.updateDom()
+          } else {
+            if (isSingleCount && singleSelectedIndex !== -1) {
+              GroupArray.splice(singleSelectedIndex, 1)
+            }
+            if (!isSingleCount && selectedIndex !== -1) {
+              this.selected.splice(selectedIndex, 1)
+            } else if (GroupArray.length <= 0) {
+              this.selected.splice(selectedIndex, 1)
+            }
+            this.updateDom()
+          }
+        })
+      })
+    }
+  }
+
+  updateStatus(options) {
+    const id = uniqueId()
+    const text = options.title
+    const GroupArray = []
+    if (options.array.length > 0) {
+      const labelText = (text) ? text.textContent : null
+      options.array.forEach((element, index) => {
+        const getEventType = this.constructor.getEventType(element.type)
+        const { singleID } = this.constructor.singleCount(element, index, id)
+        if (this.constructor.getCondition(element)) {
+          if (text) {
+            text.textContent = labelText
+            text.innerHTML = `${text.textContent} ${this.checkIcon}`
+          }
+        }
+        element.addEventListener(getEventType, () => {
+          if (this.constructor.getCondition(element)) {
+            if (!GroupArray.includes(singleID)) {
+              GroupArray.push(singleID)
+            }
+          } else if (GroupArray.indexOf(singleID) !== -1) {
+            GroupArray.splice(GroupArray.indexOf(singleID), 1)
+          }
+          if (text) {
+            if (GroupArray.length > 0) {
+              text.textContent = labelText
+              text.innerHTML = `${text.textContent} ${this.checkIcon}`
+            } else {
+              text.textContent = labelText
+            }
+          }
+        })
+      })
+    }
+  }
+
+  selectedItems() {
+    this.filtersItems.forEach((filter) => {
+      const button = filter.querySelector('.nsw-filters__item-name')
+      const content = filter.querySelector('.nsw-filters__item-content')
+      const text = content ? content.querySelectorAll('input[type="text"]') : null
+      const selects = content ? content.querySelectorAll('select') : null
+      const checkboxes = content ? content.querySelectorAll('input[type="checkbox"]') : null
+
+      if (!content) return
+
+      this.updateCount({ array: text, title: button })
+      this.updateCount({ array: selects, title: button })
+      this.updateCount({ array: checkboxes, title: button })
+      this.updateStatus({ array: text, title: button })
+      this.updateStatus({ array: selects, title: button })
+      this.updateStatus({ array: checkboxes, title: button })
+    })
+  }
+
+  clearAllFilters(e) {
+    e.preventDefault()
+    this.filtersItems.forEach((filter) => {
+      const button = filter.querySelector('.nsw-filters__item-name')
+      const buttonCheck = button ? button.querySelector('span.nsw-material-icons') : null
+      const content = filter.querySelector('.nsw-filters__item-content')
+      const text = content.querySelectorAll('input[type="text"]')
+      const selects = content.querySelectorAll('select')
+      const checkboxes = content.querySelectorAll('input[type="checkbox"]')
+      const allFields = [...text, ...selects, ...checkboxes]
+
+      if (!content) return
+
+      if (allFields.length > 0) {
+        allFields.forEach((input) => {
+          const field = input
+          if (this.constructor.getCondition(field) && (field.type === 'text' || field.type === 'select-one')) {
+            field.value = ''
+          } else {
+            field.checked = false
+          }
+        })
+      }
+
+      if (buttonCheck) {
+        buttonCheck.remove()
+      }
+
+      this.selected = []
+      this.updateDom()
+    })
+  }
 }
 
 export default Filters

package/src/components/form/_form.scss

@@ -250,6 +250,7 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
       font-weight: var(--nsw-font-normal);
 
       &:hover {
+        @include nsw-hover;
         outline-width: 0;
       }
 

package/src/components/link-list/_link-list.scss

@@ -36,6 +36,7 @@
     text-decoration: none;
 
     &:hover {
+      @include nsw-hover;
       outline-width: 0;
     }
 

package/src/components/list-item/_list-item.scss

@@ -64,7 +64,7 @@
 
     &:hover {
       .nsw-list-item__title a {
-        @include nsw-hover;
+        @include nsw-link-hover;
       }
     }
 

package/src/components/main-nav/_main-nav.scss

@@ -123,6 +123,10 @@
       justify-content: space-between;
       flex-wrap: nowrap;
 
+      &:hover {
+        @include nsw-hover;
+      }
+
       .nsw-material-icons {
         color: var(--nsw-brand-dark);
         margin-right: rem(-8px);

package/src/components/pagination/_pagination.scss

@@ -25,8 +25,10 @@
     padding: rem(4px);
     min-width: rem(30px);
     border-radius: var(--nsw-border-radius);
+    color: var(--nsw-brand-dark);
 
     &:hover {
+      @include nsw-hover;
       outline-width: 0;
     }
 

package/src/components/side-nav/_side-nav.scss

@@ -44,6 +44,7 @@
     padding: rem(16px);
 
     &:hover {
+      @include nsw-hover;
       outline-width: 0;
     }
 

package/src/components/tabs/_tabs.scss

@@ -34,6 +34,7 @@
       height: 100%;
 
       &:hover {
+        @include nsw-hover;
         outline-width: 0;
       }
 

package/src/components/tabs/tabs.js

@@ -95,7 +95,11 @@ class Tabs {
       this.tabPanel[selectedTabIndex].hidden = true
       this.selectedTab = clickedTab
       if (!clickedTab.classList.contains('js-tabs-fixed')) {
-        this.selectedTab.scrollIntoView()
+        clickedTab.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        })
       }
     }
   }

package/src/components/tag/_tag.scss

@@ -13,6 +13,7 @@
   }
   
   &:hover {
+    @include nsw-hover;
     outline-width: 0;
   }
 

package/src/global/scss/base/_mixins.scss

@@ -34,6 +34,11 @@
   background-color: var(--nsw-text-hover);
 }
 
+// Default text link hover state
+@mixin nsw-link-hover {
+  background-color: var(--nsw-text-link-hover);
+}
+
 // A block to click around the link
 @mixin pseudo-clickable-block {
   &::after {
@@ -98,12 +103,12 @@
 //Links
 @mixin link() {
   font-weight: var(--nsw-font-bold);
-  color: var(--nsw-brand-dark);
+  color: var(--nsw-text-link);
   text-decoration: underline;
 
   &:hover {
-    @include nsw-hover;
-    outline: 2px solid var(--nsw-text-hover);
+    @include nsw-link-hover;
+    outline: 2px solid var(--nsw-text-link-hover);
   }
 
   &:focus {
@@ -116,11 +121,11 @@
 }
 
 @mixin link-dark() {
-  color: var(--nsw-brand-dark);
+  color: var(--nsw-text-link);
 
   &:hover {
-    background-color: var(--nsw-text-hover);
-    outline-color: var(--nsw-text-hover);
+    background-color: var(--nsw-text-link-hover);
+    outline-color: var(--nsw-text-link-hover);
   }
 
   &:focus {

package/src/global/scss/settings/_palette.scss

@@ -4,60 +4,118 @@
   --nsw-palette-grey-03: #cdd3d6;
   --nsw-palette-grey-04: #ebebeb;
 
+  --nsw-palette-grey-01-rgb: 34, 39, 43;
+  --nsw-palette-grey-02-rgb: 73, 80, 84;
+  --nsw-palette-grey-03-rgb: 205, 211, 214;
+  --nsw-palette-grey-04-rgb: 235, 235, 235;
+
   --nsw-palette-green-01: #004000;
   --nsw-palette-green-02: #00aa45;
   --nsw-palette-green-03: #a8edb3;
   --nsw-palette-green-04: #dbfadf;
 
+  --nsw-palette-green-01-rgb: 0, 64, 0;
+  --nsw-palette-green-02-rgb: 0, 170, 69;
+  --nsw-palette-green-03-rgb: 168, 237, 179;
+  --nsw-palette-green-04-rgb: 219, 250, 223;
+
   --nsw-palette-teal-01: #0b3f47;
   --nsw-palette-teal-02: #2e808e;
   --nsw-palette-teal-03: #8cdbe5;
   --nsw-palette-teal-04: #d1eeea;
 
+  --nsw-palette-teal-01-rgb: 11, 63, 71;
+  --nsw-palette-teal-02-rgb: 46, 128, 142;
+  --nsw-palette-teal-03-rgb: 140, 219, 229;
+  --nsw-palette-teal-04-rgb: 209, 238, 234;
+
   --nsw-palette-blue-01: #002664;
   --nsw-palette-blue-02: #146cfd;
   --nsw-palette-blue-03: #8ce0ff;
   --nsw-palette-blue-04: #cbedfd;
 
+  --nsw-palette-blue-01-rgb: 0, 38, 100;
+  --nsw-palette-blue-02-rgb: 20, 108, 253;
+  --nsw-palette-blue-03-rgb: 140, 224, 255;
+  --nsw-palette-blue-04-rgb: 203, 237, 253;
+
   --nsw-palette-purple-01: #441170;
   --nsw-palette-purple-02: #8055f1;
   --nsw-palette-purple-03: #cebfff;
   --nsw-palette-purple-04: #e6e1fd;
 
+  --nsw-palette-purple-01-rgb: 68, 17, 112;
+  --nsw-palette-purple-02-rgb: 128, 85, 241;
+  --nsw-palette-purple-03-rgb: 206, 191, 255;
+  --nsw-palette-purple-04-rgb: 230, 225, 253;
+
   --nsw-palette-pink-01: #65004d;
   --nsw-palette-pink-02: #d912ae;
   --nsw-palette-pink-03: #f4b5e6;
   --nsw-palette-pink-04: #fddef2;
 
+  --nsw-palette-pink-01-rgb: 101, 0, 77;
+  --nsw-palette-pink-02-rgb: 217, 18, 174;
+  --nsw-palette-pink-03-rgb: 244, 181, 230;
+  --nsw-palette-pink-04-rgb: 253, 222, 242;
+
   --nsw-palette-red-01: #630019;
   --nsw-palette-red-02: #d7153a;
   --nsw-palette-red-03: #ffb8c1;
   --nsw-palette-red-04: #ffe6ea;
 
+  --nsw-palette-red-01-rgb: 99, 0, 25;
+  --nsw-palette-red-02-rgb: 215, 21, 58;
+  --nsw-palette-red-03-rgb: 255, 184, 193;
+  --nsw-palette-red-04-rgb: 255, 230, 234;
+
   --nsw-palette-orange-01: #941b00;
   --nsw-palette-orange-02: #f3631b;
   --nsw-palette-orange-03: #ffce99;
   --nsw-palette-orange-04: #fdeddf;
 
+  --nsw-palette-orange-01-rgb: 148, 27, 0;
+  --nsw-palette-orange-02-rgb: 243, 99, 27;
+  --nsw-palette-orange-03-rgb: 255, 206, 153;
+  --nsw-palette-orange-04-rgb: 253, 237, 223;
+
   --nsw-palette-yellow-01: #694800;
   --nsw-palette-yellow-02: #faaf05;
   --nsw-palette-yellow-03: #fde79a;
   --nsw-palette-yellow-04: #fff4cf;
 
+  --nsw-palette-yellow-01-rgb: 105, 72, 0;
+  --nsw-palette-yellow-02-rgb: 250, 175, 5;
+  --nsw-palette-yellow-03-rgb: 253, 231, 154;
+  --nsw-palette-yellow-04-rgb: 255, 244, 207;
+
   --nsw-palette-brown-01: #523719;
   --nsw-palette-brown-02: #b68d5d;
   --nsw-palette-brown-03: #e8d0b5;
   --nsw-palette-brown-04: #ede3d7;
 
+  --nsw-palette-brown-01-rgb: 82, 55, 25;
+  --nsw-palette-brown-02-rgb: 182, 141, 93;
+  --nsw-palette-brown-03-rgb: 232, 208, 181;
+  --nsw-palette-brown-04-rgb: 237, 227, 215;
+
   --nsw-palette-black: #000000;
   --nsw-palette-white: #ffffff;
   --nsw-palette-off-white: #f2f2f2;
 
+  --nsw-palette-black-rgb: 0, 0, 0;
+  --nsw-palette-white-rgb: 255, 255, 255;
+  --nsw-palette-off-white-rgb: 242, 242, 242;
+
   --nsw-palette-focus: #0085b3;
-  --nsw-palette-hover: #{rgba(#0085b3, 0.2)};
-  --nsw-palette-hover-light: #{rgba(#ffffff, 0.2)};
   --nsw-palette-visited: #551a8b;
 
+  --nsw-palette-focus-rgb: 0, 133, 179;
+  --nsw-palette-visited-rgb: 85, 26, 139;
+
+  --nsw-palette-hover: rgba(var(--nsw-palette-focus-rgb), 0.2);
+  --nsw-palette-hover-light: rgba(var(--nsw-palette-white-rgb), 0.2);
+
   --nsw-palette-info-blue: #2e5299;
   --nsw-palette-info-blue-bg: #eaedf4;
   --nsw-palette-success-green: #00a908;
@@ -66,4 +124,13 @@
   --nsw-palette-warning-orange-bg: #fbeee5;
   --nsw-palette-error-red: #b81237;
   --nsw-palette-error-red-bg: #f7e7eb;
+
+  --nsw-palette-info-blue-rgb: 46, 82, 153;
+  --nsw-palette-info-blue-bg-rgb: 234, 237, 244;
+  --nsw-palette-success-green-rgb: 0, 169, 8;
+  --nsw-palette-success-green-bg-rgb: 229, 246, 230;
+  --nsw-palette-warning-orange-rgb: 220, 88, 0;
+  --nsw-palette-warning-orange-bg-rgb: 251, 238, 229;
+  --nsw-palette-error-red-rgb: 184, 18, 55;
+  --nsw-palette-error-red-bg-rgb: 247, 231, 235;
 }

package/src/global/scss/settings/_theme.scss

@@ -7,10 +7,15 @@
 
   --nsw-text-dark: var(--nsw-palette-grey-01);
   --nsw-text-light: var(--nsw-palette-white);
-  --nsw-focus: var(--nsw-palette-focus);
-  --nsw-text-hover: var(--nsw-palette-hover);
-  --nsw-text-hover-light: var(--nsw-palette-hover-light);
+
+  --nsw-text-hover: rgba(var(--nsw-palette-blue-01-rgb), 0.1);
+  --nsw-text-hover-light: rgba(var(--nsw-palette-white-rgb), 0.1);
+
+  --nsw-text-link: var(--nsw-palette-blue-01);
+  --nsw-text-link-hover: rgba(var(--nsw-palette-blue-01-rgb), 0.1);
+
   --nsw-text-visited: var(--nsw-palette-visited);
+  --nsw-focus: var(--nsw-palette-focus);
 
   --nsw-black: var(--nsw-palette-black);
   --nsw-white: var(--nsw-palette-white);
@@ -29,8 +34,8 @@
   --nsw-status-error: var(--nsw-palette-error-red);
   --nsw-status-error-bg: var(--nsw-palette-error-red-bg);
 
-  --nsw-black-rgb: 0, 0, 0;
-  --nsw-white-rgb: 255, 255, 255;
+  --nsw-black-rgb: var(--nsw-palette-black-rgb);
+  --nsw-white-rgb: var(--nsw-palette-white-rgb);
 
   /* Font */
   --nsw-font-family: 'Public Sans', sans-serif;