From 7ba7584fd3b162b74b0fe7c01b4b321ed0be126b Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 5 Mar 2020 11:28:19 -0800
Subject: [PATCH] feat(clay-css): Adds Clay Reorder component. A
 `select[multiple]` element with buttons that rearrange `option`s inside
 `select[multiple]`

feat(clay-css): Clay Reorder adds Sass maps `$clay-reorder`, `$clay-reorder-input-inset`, `$clay-reorder-underlay`, `$clay-reorder-underlay-focus`, `$clay-reorder-footer`, `$clay-reorder-footer-invisible`, `$clay-reorder-footer-center`, `$clay-reorder-footer-end`

issue #2896
---
 packages/clay-css/src/scss/_components.scss   |  1 +
 packages/clay-css/src/scss/_variables.scss    |  1 +
 .../clay-css/src/scss/atlas/_variables.scss   |  1 +
 .../src/scss/atlas/variables/_reorder.scss    |  4 ++
 .../src/scss/components/_reorder.scss         | 45 +++++++++++++++
 .../clay-css/src/scss/variables/_reorder.scss | 56 +++++++++++++++++++
 6 files changed, 108 insertions(+)
 create mode 100644 packages/clay-css/src/scss/atlas/variables/_reorder.scss
 create mode 100644 packages/clay-css/src/scss/components/_reorder.scss
 create mode 100644 packages/clay-css/src/scss/variables/_reorder.scss

diff --git a/packages/clay-css/src/scss/_components.scss b/packages/clay-css/src/scss/_components.scss
index 48b7c58690..61d461220d 100644
--- a/packages/clay-css/src/scss/_components.scss
+++ b/packages/clay-css/src/scss/_components.scss
@@ -21,6 +21,7 @@
 @import "components/_links";
 
 @import "components/_range";
+@import "components/_reorder";
 
 @import "components/_clay-color";
 @import "components/_custom-forms";
diff --git a/packages/clay-css/src/scss/_variables.scss b/packages/clay-css/src/scss/_variables.scss
index 7adeb12e2d..5ab55abe2c 100644
--- a/packages/clay-css/src/scss/_variables.scss
+++ b/packages/clay-css/src/scss/_variables.scss
@@ -16,6 +16,7 @@
 @import "variables/_links";
 
 @import "variables/_range";
+@import "variables/_reorder";
 
 @import "variables/_clay-color";
 @import "variables/_custom-forms";
diff --git a/packages/clay-css/src/scss/atlas/_variables.scss b/packages/clay-css/src/scss/atlas/_variables.scss
index 609d022261..af45329b73 100644
--- a/packages/clay-css/src/scss/atlas/_variables.scss
+++ b/packages/clay-css/src/scss/atlas/_variables.scss
@@ -15,6 +15,7 @@
 @import "variables/_links";
 
 @import "variables/_range";
+@import "variables/_reorder";
 
 @import "variables/_clay-color";
 @import "variables/_custom-forms";
diff --git a/packages/clay-css/src/scss/atlas/variables/_reorder.scss b/packages/clay-css/src/scss/atlas/variables/_reorder.scss
new file mode 100644
index 0000000000..aef3f48750
--- /dev/null
+++ b/packages/clay-css/src/scss/atlas/variables/_reorder.scss
@@ -0,0 +1,4 @@
+$clay-reorder-underlay-focus: () !default;
+$clay-reorder-underlay-focus: map-deep-merge((
+	box-shadow: null,
+), $clay-reorder-underlay-focus);
\ No newline at end of file
diff --git a/packages/clay-css/src/scss/components/_reorder.scss b/packages/clay-css/src/scss/components/_reorder.scss
new file mode 100644
index 0000000000..0ef75103c6
--- /dev/null
+++ b/packages/clay-css/src/scss/components/_reorder.scss
@@ -0,0 +1,45 @@
+.clay-reorder {
+	@include clay-css($clay-reorder);
+
+	.form-control-inset {
+		@include clay-form-control-variant($clay-reorder-input-inset);
+
+		&:focus,
+		&.focus {
+			+ .clay-reorder-underlay {
+				@include clay-css($clay-reorder-underlay-focus);
+			}
+		}
+
+		+ .clay-reorder-underlay {
+			@include clay-css($clay-reorder-underlay);
+		}
+	}
+}
+
+.clay-reorder-footer {
+	@include clay-css($clay-reorder-footer);
+}
+
+.clay-reorder-footer-invisible {
+	&.clay-reorder-footer,
+	.clay-reorder-footer {
+		* {
+			@include clay-css($clay-reorder-footer-invisible);
+		}
+	}
+}
+
+.clay-reorder-footer-center {
+	&.clay-reorder-footer,
+	.clay-reorder-footer {
+		@include clay-css($clay-reorder-footer-center);
+	}
+}
+
+.clay-reorder-footer-end {
+	&.clay-reorder-footer,
+	.clay-reorder-footer {
+		@include clay-css($clay-reorder-footer-end);
+	}
+}
diff --git a/packages/clay-css/src/scss/variables/_reorder.scss b/packages/clay-css/src/scss/variables/_reorder.scss
new file mode 100644
index 0000000000..5f40321ea6
--- /dev/null
+++ b/packages/clay-css/src/scss/variables/_reorder.scss
@@ -0,0 +1,56 @@
+$clay-reorder: () !default;
+$clay-reorder: map-deep-merge((
+	padding: 2px,
+	position: relative,
+	z-index: 0,
+), $clay-reorder);
+
+$clay-reorder-input-inset: () !default;
+$clay-reorder-input-inset: map-deep-merge((
+	margin-bottom: 0,
+	margin-top: 0,
+	overflow: auto,
+	padding-bottom: $input-padding-y,
+	padding-top: $input-padding-y,
+	focus: (
+		background-color: transparent,
+		box-shadow: none,
+	),
+), $clay-reorder-input-inset);
+
+$clay-reorder-underlay: () !default;
+$clay-reorder-underlay: map-deep-merge((
+	bottom: 0,
+	left: 0,
+	position: absolute,
+	right: 0,
+	top: 0,
+	z-index: -1,
+), $clay-reorder-underlay);
+
+$clay-reorder-underlay-focus: () !default;
+$clay-reorder-underlay-focus: map-deep-merge((
+	background-color: $input-focus-bg,
+	border-color: $input-focus-border-color,
+	box-shadow: $input-focus-box-shadow,
+), $clay-reorder-underlay-focus);
+
+$clay-reorder-footer: () !default;
+$clay-reorder-footer: map-deep-merge((
+	padding: 0.5rem,
+), $clay-reorder-footer);
+
+$clay-reorder-footer-invisible: () !default;
+$clay-reorder-footer-invisible: map-deep-merge((
+	visibility: hidden,
+), $clay-reorder-footer-invisible);
+
+$clay-reorder-footer-center: () !default;
+$clay-reorder-footer-center: map-deep-merge((
+	text-align: center,
+), $clay-reorder-footer-center);
+
+$clay-reorder-footer-end: () !default;
+$clay-reorder-footer-end: map-deep-merge((
+	text-align: right,
+), $clay-reorder-footer-end);