From 99e3c8ba9ffba9acee8603cf0b3d91f22302e49d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Wed, 19 Jun 2024 12:16:53 +0200
Subject: [PATCH] Feat(web): Introduce ActionLayout component #DS-1311

---
 .../components/UNSTABLE_ActionLayout/README.md    |  4 ++++
 .../_UNSTABLE_ActionLayout.scss                   | 15 +++++++++++++++
 .../components/UNSTABLE_ActionLayout/_theme.scss  |  4 ++++
 .../components/UNSTABLE_ActionLayout/index.html   | 15 +++++++++++++++
 .../components/UNSTABLE_ActionLayout/index.scss   |  1 +
 packages/web/src/scss/components/index.scss       |  1 +
 6 files changed, 40 insertions(+)
 create mode 100644 packages/web/src/scss/components/UNSTABLE_ActionLayout/README.md
 create mode 100644 packages/web/src/scss/components/UNSTABLE_ActionLayout/_UNSTABLE_ActionLayout.scss
 create mode 100644 packages/web/src/scss/components/UNSTABLE_ActionLayout/_theme.scss
 create mode 100644 packages/web/src/scss/components/UNSTABLE_ActionLayout/index.html
 create mode 100644 packages/web/src/scss/components/UNSTABLE_ActionLayout/index.scss

diff --git a/packages/web/src/scss/components/UNSTABLE_ActionLayout/README.md b/packages/web/src/scss/components/UNSTABLE_ActionLayout/README.md
new file mode 100644
index 0000000000..2ce89438cd
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_ActionLayout/README.md
@@ -0,0 +1,4 @@
+# UNSTABLE ActionLayout
+
+⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
+Please use it with caution.
diff --git a/packages/web/src/scss/components/UNSTABLE_ActionLayout/_UNSTABLE_ActionLayout.scss b/packages/web/src/scss/components/UNSTABLE_ActionLayout/_UNSTABLE_ActionLayout.scss
new file mode 100644
index 0000000000..58e6a14a9b
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_ActionLayout/_UNSTABLE_ActionLayout.scss
@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use 'theme' as theme;
+@use '../../tools/breakpoint';
+
+.UNSTABLE_ActionLayout {
+    display: flex;
+    flex-direction: column;
+    gap: theme.$root-gap;
+    justify-content: center;
+    width: 100%;
+
+    @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
+        flex-direction: row-reverse;
+    }
+}
diff --git a/packages/web/src/scss/components/UNSTABLE_ActionLayout/_theme.scss b/packages/web/src/scss/components/UNSTABLE_ActionLayout/_theme.scss
new file mode 100644
index 0000000000..207541aafd
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_ActionLayout/_theme.scss
@@ -0,0 +1,4 @@
+@use '@tokens' as tokens;
+
+$breakpoints: tokens.$breakpoints;
+$root-gap: tokens.$space-600;
diff --git a/packages/web/src/scss/components/UNSTABLE_ActionLayout/index.html b/packages/web/src/scss/components/UNSTABLE_ActionLayout/index.html
new file mode 100644
index 0000000000..256645326b
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_ActionLayout/index.html
@@ -0,0 +1,15 @@
+{{#> web/layout/plain }}
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Default</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <div class="UNSTABLE_ActionLayout">
+      <a class="Button Button--primary Button--medium" href="#">Primary Button</a>
+      <a class="Button Button--secondary Button--medium" href="#">Secondary Button</a>
+    </div>
+
+  </div>
+</section>
+
+{{/web/layout/plain }}
diff --git a/packages/web/src/scss/components/UNSTABLE_ActionLayout/index.scss b/packages/web/src/scss/components/UNSTABLE_ActionLayout/index.scss
new file mode 100644
index 0000000000..8af6f29576
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_ActionLayout/index.scss
@@ -0,0 +1 @@
+@forward 'UNSTABLE_ActionLayout';
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index 2a5610f490..8268bbfc0c 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -24,6 +24,7 @@
 @forward 'TextField';
 @forward 'Toast';
 @forward 'Tooltip';
+@forward 'UNSTABLE_ActionLayout';
 @forward 'UNSTABLE_Divider';
 @forward 'UNSTABLE_EmptyState';
 @forward 'UNSTABLE_Slider';