feat: add Toggle Button component (resolves #336)

src/assets/scripts/Pinecone/ToggleButton/index.js

@@ -0,0 +1,49 @@
+/**
+ * Toggle Button class.
+ */
+class ToggleButton {
+	/**
+	 * Constructor.
+	 *
+	 * @param {Object} options
+	 */
+	constructor( options ) {
+		this.config = {
+			...{
+				selector: '.button--toggle'
+			},
+			...options
+		};
+
+		this.handleClick = this.handleClick.bind( this );
+		this.addEventListeners();
+	}
+
+	/**
+	 * Handle click.
+	 *
+	 * @param {Event} event
+	 */
+	handleClick( event ) {
+		if ( ! event.target.closest( this.config.selector ) ) return;
+
+		const btn = event.target.closest( this.config.selector );
+		const pressedSiblings = btn.parentNode.querySelectorAll( '[aria-pressed="true"]' );
+		const pressed = 'true' === btn.getAttribute( 'aria-pressed' ) || false;
+		if ( 0 < pressedSiblings.length && !pressed ) {
+			Array.prototype.forEach.call( pressedSiblings, pressedBtn => {
+				pressedBtn.setAttribute( 'aria-pressed', false );
+			} );
+		}
+		btn.setAttribute( 'aria-pressed', !pressed );
+	}
+
+	/**
+	 * Add event listeners.
+	 */
+	addEventListeners() {
+		document.addEventListener( 'click', this.handleClick );
+	}
+}
+
+export default ToggleButton;

src/assets/scripts/Pinecone/index.js

@@ -10,5 +10,7 @@ import MenuButton from './MenuButton/index.js';
 import NestedCheckbox from './NestedCheckbox/index.js';
 import Notification from './Notification/index.js';
 import SearchToggle from './SearchToggle/index.js';
+import ToggleButton from './ToggleButton/index.js';
+
+export default { Accordion, Card, DeselectAll, Dialog, DisclosureButton, FilterList, Icon, Menu, MenuButton, NestedCheckbox, Notification, SearchToggle, ToggleButton };
 
-export default { Accordion, Card, DeselectAll, Dialog, DisclosureButton, FilterList, Icon, Menu, MenuButton, NestedCheckbox, Notification, SearchToggle };

src/assets/scripts/pinecone.js

@@ -101,3 +101,5 @@ const searchToggle = document.querySelector( '.search-toggle' );
 if ( searchToggle ) {
 	new Pinecone.SearchToggle( searchToggle, searchToggle.nextElementSibling );
 }
+
+new Pinecone.ToggleButton();

src/assets/styles/components/_button.scss

@@ -121,6 +121,69 @@ button:-moz-focusring {
 	}
 }
 
+.button--toggle {
+	border-radius: rem(5);
+	font-weight: $font-weight-normal;
+	margin: rem(8) rem(9);
+	min-height: rem(32);
+	padding: 0 rem(10);
+	width: auto;
+}
+
+.button--toggle.button--inverse {
+	--color: var(--off-white);
+	--background-color: var(--blue-500);
+	--border-color: var(--off-white);
+
+	--active-background-color: var(--off-white);
+	--active-color: var(--blue-500);
+	--active-box-shadow: 0 0 0 calc(2 * var(--border-width)) var(--parent-background-color), 0 0 0 calc(4 * var(--border-width)) var(--focus-border-color);
+
+	--focus-background-color: var(--blue-500);
+	--focus-border-color: var(--color);
+	--focus-color: inherit;
+	--focus-box-shadow: 0 0 0 calc(1 * var(--border-width)) var(--focus-border-color) inset, 0 0 0 calc(2 * var(--border-width)) var(--parent-background-color), 0 0 0 calc(4 * var(--border-width)) var(--focus-border-color);
+
+	--hover-background-color: var(--blue-600);
+
+	&:active {
+		border-color: transparent;
+	}
+
+	&:focus {
+		border-color: var(--focus-border-color);
+	}
+
+	&[aria-pressed="true"] {
+		--color: var(--blue-700);
+		--background-color: var(--blue-50);
+		--border-color: var(--background-color);
+
+		--focus-background-color: var(--background-color);
+		--focus-border-color: var(--background-color);
+		--focus-color: inherit;
+		--focus-box-shadow: 0 0 0 calc(2 * var(--border-width)) var(--parent-background-color), 0 0 0 calc(4 * var(--border-width)) var(--focus-border-color);
+
+		--hover-background-color: var(--blue-150);
+		--hover-border-color: var(--blue-150);
+
+		&:hover {
+			border-color: var(--hover-border-color);
+		}
+
+		&:active {
+			border-color: transparent;
+		}
+	}
+}
+
+.toggle-group {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-left: rem(-9);
+}
+
 .button[disabled] {
 	background-color: var(--disabled-background-color);
 	color: var(--disabled-color);

src/assets/styles/mandelbrot.css

@@ -24,3 +24,7 @@ a:hover {
 .Pen-previewLink svg {
 	fill: var(--blue-400);
 }
+
+.Prose a:hover {
+	color: var(--blue-400);
+}

src/components/atoms/button/README.md

@@ -0,0 +1,7 @@
+# Toggle Button
+
+The Toggle Button is a button with an `aria-pressed` attribute representing a boolean (true or false) value. To use a toggle button, the following JavaScript must be executed on the page where the component is used:
+
+```javascript
+new PineCone.ToggleButton();
+```

src/components/atoms/button/button.config.js

@@ -102,6 +102,31 @@ module.exports = {
 				icon: 'close',
 				iconPosition: 'end',
 			}
+		},
+		{
+			name: 'Toggle Button',
+			label: 'Toggle Button',
+			context: {
+				id: false,
+				label: 'Toggle',
+				modifiers: ['toggle'],
+				ariaPressed: true,
+				pressed: false,
+				icon: false
+			}
+		},
+		{
+			name: 'Toggle Button Inverse',
+			label: 'Toggle Button (Inverse)',
+			context: {
+				id: false,
+				label: 'Toggle',
+				modifiers: ['toggle', 'inverse'],
+				ariaPressed: true,
+				pressed: false,
+				bodyClass: 'has-dark-mint-500-background-color',
+				icon: false
+			}
 		}
 	]
 };

src/components/atoms/button/button.njk

@@ -1,4 +1,4 @@
 {% if not standAlone %}<div class="spacer"></div>{% endif %}
-<button {% if id %}id="{{ id }}" {% endif %}type="{{ type }}" class="button{% if modifiers %}{% for modifier in modifiers %} button--{{ modifier }}{% endfor %}{% endif %}{% if className %} {{ className }}{% endif %}">
+<button {% if id %}id="{{ id }}" {% endif %}type="{{ type }}" {% if ariaPressed %}aria-pressed="{{ pressed }}" {% endif %}class="button{% if modifiers %}{% for modifier in modifiers %} button--{{ modifier }}{% endfor %}{% endif %}{% if className %} {{ className }}{% endif %}">
 	{% if icon and iconPosition === 'start' %}{% render '@svg', {svg:icon}, true %}{% endif %}<span class="button__label{{ ' screen-reader-text' if labelVisuallyHidden }}">{{ label | safe }}</span>{% if icon and iconPosition === 'end' %}{% render '@svg', {svg:icon}, true %}{% endif %}
 </button>

src/components/molecules/toggle-button-group/README.md

@@ -0,0 +1,5 @@
+# Toggle Button Group
+
+The Toggle Button Group displays a group of related [Toggle Buttons](/components/detail/button--toggle-button/) using flexbox. The parent element must have a class of `.toggle-group` and the buttons must be the direct descendants of the parent element.
+
+When a group of related Toggle Buttons are siblings (children of the same parent element), toggling the `pressed` state of one Toggle Button to `true` will set the `pressed` state of all the other buttons to `false`.

src/components/molecules/toggle-button-group/toggle-button-group.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+	title: 'Toggle Button Group',
+	status: 'wip',
+	order: 16,
+	context: {
+		label: 'Niches',
+		buttons: [
+			'Collaboration',
+			'Communication',
+			'Customer or member relations',
+			'Decision making',
+			'Developer tools',
+			'Finance',
+			'Marketing',
+			'Time management'
+		],
+		buttonVariant: 'toggle-button'
+	},
+	variants: [
+		{
+			name: 'Inverse',
+			label: 'Inverse',
+			context: {
+				modifier: 'inverse',
+				bodyClass: 'has-blue-500-background-color',
+				buttonVariant: 'toggle-button-inverse'
+			}
+		}
+	]
+};

src/components/molecules/toggle-button-group/toggle-button-group.njk

@@ -0,0 +1,6 @@
+<div class="niches toggle-group">
+	{% render  '@button--' + buttonVariant, {standAlone: true, label: 'All', pressed: true}, true %}
+	{% for button in buttons %}
+		{% render  '@button--' + buttonVariant, {standAlone: true, label: button}, true %}
+	{% endfor %}
+</div>