Feat(web): Introduce ActionLayout component #DS-1311

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.

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;
+    }
+}

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;

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 }}

packages/web/src/scss/components/UNSTABLE_ActionLayout/index.scss

@@ -0,0 +1 @@
+@forward 'UNSTABLE_ActionLayout';

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';