Adds Accordion component and patterns

.changeset/smart-lions-sniff.md

@@ -0,0 +1,7 @@
+---
+'@microsoft/atlas-integration': minor
+'@microsoft/atlas-css': minor
+'@microsoft/atlas-site': minor
+---
+
+Adding Accordion component and relevant documentation.

css/src/components/accordion.scss

@@ -0,0 +1,133 @@
+$accordion-font-size-sm: $font-size-9 !default;
+$accordion-font-size-md: $font-size-8 !default;
+$accordion-font-size-lg: $font-size-7 !default;
+$accordion-font-size-xl: $font-size-6 !default;
+$accordion-font-size-xxl: $font-size-5 !default;
+
+$accordion-gap: $layout-2 !default;
+$accordion-spacing: $spacer-4 !default;
+$accordion-transition: transform 0.15s !default;
+
+// Spacing and font-size
+
+@mixin accordion-summary-sizes($font-size) {
+	$icon-before-offset-size: calc($font-size - 0.375rem);
+	$icon-after-offset-size: calc($font-size - 0.5rem);
+
+	summary {
+		font-size: $font-size;
+	}
+
+	&:not(.accordion-icon-end) summary {
+		&::before {
+			margin-block-start: $icon-before-offset-size;
+		}
+	}
+
+	&.accordion-icon-end summary {
+		&::after {
+			margin-block-start: $icon-after-offset-size;
+		}
+	}
+}
+
+.accordion {
+	@include accordion-summary-sizes($accordion-font-size-md);
+
+	summary {
+		display: flex;
+		line-height: 1.5;
+		cursor: pointer;
+		padding-block: $accordion-spacing;
+		gap: $accordion-gap;
+
+		&::before,
+		&::after {
+			// Prevents chevron from being clipped when accordion title is long
+			flex-shrink: 0;
+		}
+
+		> &:hover {
+			color: $primary-hover;
+
+			&::before,
+			&::after {
+				border-color: $primary-hover;
+			}
+		}
+
+		.accordion-header {
+			flex-grow: 1;
+		}
+	}
+
+	&:not(.accordion-icon-end) {
+		summary::before {
+			@include chevron-right;
+
+			transition: $accordion-transition;
+		}
+
+		&:dir(rtl) summary::before {
+			@include chevron-right-rtl;
+		}
+	}
+
+	&.accordion-icon-end {
+		summary::after {
+			@include chevron-down;
+
+			transition: $accordion-transition;
+		}
+
+		&:dir(rtl) summary::after {
+			@include chevron-down-rtl;
+		}
+	}
+
+	&[open] {
+		&:not(.accordion-icon-end) {
+			summary::before {
+				transform: $chevron-down-rotate translate(calc($chevron-arrow-size / 2), 0);
+			}
+
+			/* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
+			&:dir(rtl) summary::before {
+				transform: $chevron-down-rotate-rtl translate(calc($chevron-arrow-size / 2 * -1), 0);
+			}
+		}
+
+		&.accordion-icon-end {
+			summary::after {
+				transform: $chevron-up-rotate-scale-xy;
+			}
+
+			/* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
+			&:dir(rtl) summary::after {
+				transform: $chevron-up-rotate-scale-xy-rtl;
+			}
+		}
+	}
+
+	.accordion-content {
+		font-size: $accordion-font-size-md;
+	}
+
+	// Sizes
+
+	&.accordion-sm {
+		@include accordion-summary-sizes($accordion-font-size-sm);
+	}
+
+	&.accordion-lg {
+		@include accordion-summary-sizes($accordion-font-size-lg);
+	}
+
+	&.accordion-xl {
+		@include accordion-summary-sizes($accordion-font-size-xl);
+	}
+
+	&.accordion-xxl {
+		@include accordion-summary-sizes($accordion-font-size-xxl);
+	}
+}

css/src/components/form/select.scss

@@ -19,10 +19,6 @@ $select-success-border-color: $success !default;
 
 $select-focus-box-shadow-size: 0 0.0625rem 0 0 !default;
 
-$select-arrow-size: 0.525em !default;
-$select-arrow-border-width: 1px !default;
-$select-arrow-actual-width: 0.75em !default;
-
 .select {
 	position: relative;
 	font-size: $control-font-size;
@@ -72,24 +68,15 @@ $select-arrow-actual-width: 0.75em !default;
 
 	&:not(.select-multiple) {
 		select {
-			padding-inline-end: calc($control-padding-horizontal + $select-arrow-actual-width);
+			padding-inline-end: calc($control-padding-horizontal + $chevron-arrow-actual-width);
 		}
 
 		&::after {
+			@include chevron-down;
+
 			display: block;
 			position: absolute;
-			inset-block-start: calc(50% - $select-arrow-actual-width / 2);
-			width: $select-arrow-size;
-			height: $select-arrow-size;
-			transform: rotate(-45deg);
-			transform-origin: center;
-			border: $select-arrow-border-width solid $select-color;
-			border-block-start: 0;
-			border-inline-end: 0;
-			pointer-events: none;
-			content: ' ';
-			z-index: $zindex-active;
-			inset-inline-end: $control-padding-horizontal;
+			inset-block-start: calc(50% - $chevron-arrow-actual-width / 2);
 		}
 
 		&.select-disabled::after {

css/src/components/index.scss

@@ -1,3 +1,4 @@
+@import './accordion.scss';
 @import './badge.scss';
 @import './banner.scss';
 @import './breadcrumbs.scss';

css/src/mixins/chevron.scss

@@ -0,0 +1,48 @@
+$chevron-color: $text !default;
+$chevron-arrow-size: 0.525em !default;
+$chevron-arrow-border-width: 1px !default;
+$chevron-arrow-actual-width: 0.75em !default;
+$chevron-down-rotate: rotate(-45deg) !default;
+$chevron-down-rotate-rtl: rotate(-315deg) !default;
+$chevron-right-rotate-rtl: rotate(-225deg) !default;
+$chevron-right-rotate: rotate(-135deg) !default;
+$chevron-up-rotate: rotate(-225deg) !default;
+$chevron-up-rotate-scale-xy: $chevron-down-rotate scaleY(-1) scaleX(-1);
+$chevron-up-rotate-scale-xy-rtl: $chevron-down-rotate-rtl scaleY(-1) scaleX(-1);
+
+%chevron {
+	width: $chevron-arrow-size;
+	height: $chevron-arrow-size;
+	transform-origin: center;
+	border: $chevron-arrow-border-width solid $chevron-color;
+	border-block-start: 0;
+	border-inline-end: 0;
+	pointer-events: none;
+	content: ' ';
+	z-index: $zindex-active;
+	inset-inline-end: $control-padding-horizontal;
+}
+
+@mixin chevron-right {
+	@extend %chevron;
+
+	transform: $chevron-right-rotate;
+}
+
+@mixin chevron-right-rtl {
+	@extend %chevron;
+
+	transform: $chevron-right-rotate-rtl;
+}
+
+@mixin chevron-down {
+	@extend %chevron;
+
+	transform: $chevron-down-rotate;
+}
+
+@mixin chevron-down-rtl {
+	@extend %chevron;
+
+	transform: $chevron-down-rotate-rtl;
+}

css/src/mixins/index.scss

@@ -3,6 +3,7 @@
 @import './colors.scss';
 @import './control.scss';
 @import './center.scss';
+@import './chevron.scss';
 @import './focus.scss';
 @import './gradient.scss';
 @import './loader.scss';

integration/config/page.ts

@@ -32,6 +32,7 @@ export const pages: LocalPageConfig[] = [
 	{ pathname: '/components/breadcrumbs.html', name: 'Components/breadcrumbs', routes },
 	{ pathname: '/components/button.html', name: 'Components/button', routes },
 	{ pathname: '/components/checkbox.html', name: 'Components/checkbox', routes },
+	{ pathname: '/components/accordion.html', name: 'Components/accordion', routes },
 	{ pathname: '/components/dismiss.html', name: 'Components/dismiss', routes },
 	{ pathname: '/components/help.html', name: 'Components/help', routes },
 	{ pathname: '/components/icon.html', name: 'Components/icon', routes },

integration/tests/accessibility.spec.ts

@@ -17,6 +17,7 @@ const pathnames = [
 	'/atomics/spacing.html',
 	'/atomics/typography.html',
 	'/components/overview.html',
+	'/components/accordion.html',
 	'/components/badge.html',
 	'/components/banner.html',
 	'/components/breadcrumbs.html',