This repository has been archived by the owner on Mar 15, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #60 from mozilla/invoke-tasks
Add invoke tasks
- Loading branch information
Showing
49 changed files
with
1,354 additions
and
1,142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| { | ||
| "extends": [ | ||
| "prettier" | ||
| ], | ||
| "plugins": [ | ||
| "prettier", | ||
| "react" | ||
| ], | ||
| "parserOptions": { | ||
| "sourceType": "module" | ||
| }, | ||
| "env": { | ||
| "es6": true | ||
| }, | ||
| "rules": { | ||
| "prettier/prettier": "error" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "plugins": ["stylelint-prettier"], | ||
| "rules": { | ||
| "prettier/prettier": true, | ||
| "color-hex-length": "long" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| var config = { | ||
| "plugins": ["stylelint-prettier"], | ||
| "rules": { | ||
| "color-named": "never", | ||
| "color-no-hex": true, | ||
| "declaration-property-value-blacklist": [ | ||
| { | ||
| "/.*/": [ | ||
| /rgba{0,1}\(/i, | ||
| /hsla{0,1}\(/i, | ||
| /hwb\(/i, | ||
| /gray\(/i | ||
| ] | ||
| }, | ||
| { | ||
| "message": "Custom colors are not allowed. Please use brand colors listed in _variables.scss." | ||
| } | ||
| ] | ||
| } | ||
| }; | ||
|
|
||
| module.exports = config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,45 @@ | ||
| class MenuToggle { | ||
| static selector() { | ||
| return '[data-menu-toggle]'; | ||
| } | ||
| static selector() { | ||
| return "[data-menu-toggle]"; | ||
| } | ||
|
|
||
| constructor(node, openCb = () => {}, closeCb = () => {}) { | ||
| this.node = node; | ||
| constructor(node, openCb = () => {}, closeCb = () => {}) { | ||
| this.node = node; | ||
|
|
||
| // Any callbacks to be called on open or close. | ||
| this.openCb = openCb; | ||
| this.closeCb = closeCb; | ||
| // Any callbacks to be called on open or close. | ||
| this.openCb = openCb; | ||
| this.closeCb = closeCb; | ||
|
|
||
| this.state = { | ||
| open: false, | ||
| }; | ||
| this.state = { | ||
| open: false | ||
| }; | ||
|
|
||
| this.bindEventListeners(); | ||
| } | ||
| this.bindEventListeners(); | ||
| } | ||
|
|
||
| bindEventListeners() { | ||
| this.node.addEventListener('click', () => { | ||
| this.toggle(); | ||
| }); | ||
| } | ||
| bindEventListeners() { | ||
| this.node.addEventListener("click", () => { | ||
| this.toggle(); | ||
| }); | ||
| } | ||
|
|
||
| toggle() { | ||
| this.state.open ? this.close() : this.open(); | ||
| } | ||
| toggle() { | ||
| this.state.open ? this.close() : this.open(); | ||
| } | ||
|
|
||
| open() { | ||
| this.node.classList.add('is-open'); | ||
| this.openCb(); | ||
| open() { | ||
| this.node.classList.add("is-open"); | ||
| this.openCb(); | ||
|
|
||
| this.state.open = true; | ||
| } | ||
| this.state.open = true; | ||
| } | ||
|
|
||
| close() { | ||
| this.node.classList.remove('is-open'); | ||
| this.closeCb(); | ||
| close() { | ||
| this.node.classList.remove("is-open"); | ||
| this.closeCb(); | ||
|
|
||
| this.state.open = false; | ||
| } | ||
| this.state.open = false; | ||
| } | ||
| } | ||
|
|
||
| export default MenuToggle; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,36 @@ | ||
| class Tabs { | ||
| static selector() { | ||
| return '.js-tab-item'; | ||
| } | ||
| static selector() { | ||
| return ".js-tab-item"; | ||
| } | ||
|
|
||
| constructor(node) { | ||
| this.tab = node; | ||
| this.tabset = this.tab.closest('.js-tabs'); | ||
| this.allTabs = this.tabset.querySelectorAll('.js-tab-item'); | ||
| let tabPanelId = this.tab.getAttribute('aria-controls'); | ||
| this.tabPanel = document.getElementById(tabPanelId); | ||
| this.allTabPanels = this.tabset.querySelectorAll('.js-tab-panel'); | ||
| this.bindEvents(); | ||
| } | ||
| constructor(node) { | ||
| this.tab = node; | ||
| this.tabset = this.tab.closest(".js-tabs"); | ||
| this.allTabs = this.tabset.querySelectorAll(".js-tab-item"); | ||
| let tabPanelId = this.tab.getAttribute("aria-controls"); | ||
| this.tabPanel = document.getElementById(tabPanelId); | ||
| this.allTabPanels = this.tabset.querySelectorAll(".js-tab-panel"); | ||
| this.bindEvents(); | ||
| } | ||
|
|
||
| bindEvents() { | ||
| this.tab.addEventListener('click', (e) => { | ||
| e.preventDefault(); | ||
| bindEvents() { | ||
| this.tab.addEventListener("click", e => { | ||
| e.preventDefault(); | ||
|
|
||
| for (let tab of this.allTabs) { | ||
| tab.classList.remove('tabs__item--selected'); | ||
| tab.setAttribute('aria-selected', 'false'); | ||
| } | ||
| for (let tab of this.allTabs) { | ||
| tab.classList.remove("tabs__item--selected"); | ||
| tab.setAttribute("aria-selected", "false"); | ||
| } | ||
|
|
||
| for (let tabPanel of this.allTabPanels) { | ||
| tabPanel.classList.add('tabs__panel--hidden'); | ||
| } | ||
| for (let tabPanel of this.allTabPanels) { | ||
| tabPanel.classList.add("tabs__panel--hidden"); | ||
| } | ||
|
|
||
| this.tab.classList.add('tabs__item--selected'); | ||
| this.tab.setAttribute('aria-selected', 'true'); | ||
| this.tabPanel.classList.remove('tabs__panel--hidden'); | ||
| }); | ||
| } | ||
| this.tab.classList.add("tabs__item--selected"); | ||
| this.tab.setAttribute("aria-selected", "true"); | ||
| this.tabPanel.classList.remove("tabs__panel--hidden"); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| export default Tabs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,37 @@ | ||
| import 'babel-polyfill'; | ||
| import "babel-polyfill"; | ||
|
|
||
| import Tabs from './components/tabs'; | ||
| import MenuToggle from './components/menu-toggle'; | ||
| import Tabs from "./components/tabs"; | ||
| import MenuToggle from "./components/menu-toggle"; | ||
|
|
||
| // Manage tab index for primary nav | ||
| function tabIndexer() { | ||
| document.querySelectorAll('[data-nav-tab-index]').forEach(navLink => { | ||
| navLink.tabIndex = "-1"; | ||
| }) | ||
| document.querySelectorAll("[data-nav-tab-index]").forEach(navLink => { | ||
| navLink.tabIndex = "-1"; | ||
| }); | ||
| } | ||
|
|
||
| // Open the mobile menu callback | ||
| function openMenu() { | ||
| document.querySelector('[data-primary-nav]').classList.add('is-visible'); | ||
| document.querySelectorAll('[data-nav-tab-index]').forEach(navLink => { | ||
| navLink.removeAttribute("tabindex"); | ||
| }) | ||
| document.querySelector("[data-primary-nav]").classList.add("is-visible"); | ||
| document.querySelectorAll("[data-nav-tab-index]").forEach(navLink => { | ||
| navLink.removeAttribute("tabindex"); | ||
| }); | ||
| } | ||
|
|
||
| // Close the mobile menu callback | ||
| function closeMenu() { | ||
| document.querySelector('[data-primary-nav]').classList.remove('is-visible'); | ||
| tabIndexer(); | ||
| document.querySelector("[data-primary-nav]").classList.remove("is-visible"); | ||
| tabIndexer(); | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function() { | ||
| document.addEventListener("DOMContentLoaded", function() { | ||
| for (const menutoggle of document.querySelectorAll(MenuToggle.selector())) { | ||
| new MenuToggle(menutoggle, openMenu, closeMenu); | ||
| } | ||
|
|
||
| for (const menutoggle of document.querySelectorAll(MenuToggle.selector())) { | ||
| new MenuToggle(menutoggle, openMenu, closeMenu); | ||
| } | ||
| for (const tabs of document.querySelectorAll(Tabs.selector())) { | ||
| new Tabs(tabs); | ||
| } | ||
|
|
||
| for (const tabs of document.querySelectorAll(Tabs.selector())) { | ||
| new Tabs(tabs); | ||
| } | ||
|
|
||
| tabIndexer(); | ||
| tabIndexer(); | ||
| }); |
Oops, something went wrong.