Feat(web): Introduce Flex layout component #DS-1415

packages/web/src/scss/components/Flex/_Flex.scss

@@ -0,0 +1,56 @@
+// 1. Use `display: grid` so the orientation of alignmentX and alignmentY does not change as it would with `flex-direction: column`.
+
+.Flex {
+    gap: var(--spirit-space-600);
+}
+
+.Flex--row {
+    display: flex;
+}
+
+.Flex--column {
+    display: grid; // 1.
+}
+
+// TODO generate + responsive
+.Flex--alignmentXStretch,
+:where(.Flex:not([class*="Flex--alignmentX"])) {
+    justify-content: stretch; /* Or normal? */
+}
+
+.Flex--alignmentXLeft {
+    justify-content: start;
+}
+
+.Flex--alignmentXCenter {
+    justify-content: center;
+}
+
+.Flex--alignmentXRight {
+    justify-content: end;
+}
+
+.Flex--alignmentXSpaceBetween {
+    justify-content: space-between;
+}
+
+.Flex--alignmentYStretch,
+:where(.Flex:not([class*="Flex--alignmentY"])) {
+    align-items: stretch;
+}
+
+.Flex--alignmentYTop {
+    align-items: start;
+}
+
+.Flex--alignmentYCenter {
+    align-items: center;
+}
+
+.Flex--alignmentYBottom {
+    align-items: end;
+}
+
+.Flex--alignmentYBaseline {
+    align-items: baseline;
+}

packages/web/src/scss/components/Flex/index.html

@@ -0,0 +1,104 @@
+{{#> web/layout/plain }}
+
+<section class="UNSTABLE_Section">
+  <h2 class="docs-Heading">Row Layout</h2>
+  <div class="docs-Stack docs-Stack--start">
+
+    <div class="Flex Flex--row">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2</div>
+      <div class="docs-Box docs-Box--small">Item 3</div>
+    </div>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+  <h2 class="docs-Heading">Column Layout</h2>
+  <div class="docs-Stack docs-Stack--start">
+
+    <div class="Flex Flex--column">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2</div>
+      <div class="docs-Box docs-Box--small">Item 3</div>
+    </div>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+  <h2 class="docs-Heading">Responsive Layout</h2>
+  <div class="docs-Stack docs-Stack--start">
+
+    <div class="Flex Flex--column Flex--tablet--row">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2</div>
+      <div class="docs-Box docs-Box--small">Item 3</div>
+    </div>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+  <h2 class="docs-Heading">Horizontal Alignment</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <div class="Flex Flex--row Flex--alignmentXLeft">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2</div>
+      <div class="docs-Box docs-Box--small">Item 3</div>
+    </div>
+
+    <div class="Flex Flex--row Flex--alignmentXCenter">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2</div>
+      <div class="docs-Box docs-Box--small">Item 3</div>
+    </div>
+
+    <div class="Flex Flex--row Flex--alignmentXRight">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2</div>
+      <div class="docs-Box docs-Box--small">Item 3</div>
+    </div>
+
+    <div class="Flex Flex--row Flex--alignmentXSpaceBetween">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2</div>
+      <div class="docs-Box docs-Box--small">Item 3</div>
+    </div>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+  <h2 class="docs-Heading">Vertical Alignment</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <div class="Flex Flex--row Flex--alignmentYTop">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2<br />is taller</div>
+      <div class="docs-Box docs-Box--small">Item 3</div>
+    </div>
+
+    <div class="Flex Flex--row Flex--alignmentYCenter">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2<br />is taller</div>
+      <div class="docs-Box docs-Box--small">Item 3</div>
+    </div>
+
+    <div class="Flex Flex--row Flex--alignmentYBottom">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2<br />is taller</div>
+      <div class="docs-Box docs-Box--small">Item 3</div>
+    </div>
+
+    <div class="Flex Flex--row Flex--alignmentYBaseline">
+      <div class="docs-Box docs-Box--small">Item 1</div>
+      <div class="docs-Box docs-Box--small">Item 2<br />is taller</div>
+      <div class="docs-Box typography-heading-small-text">Item 3 has bigger font size</div>
+    </div>
+
+  </div>
+</section>
+
+{{/web/layout/plain }}

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

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

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

@@ -9,6 +9,7 @@
 @forward 'Dropdown';
 @forward 'FieldGroup';
 @forward 'FileUploader';
+@forward 'Flex';
 @forward 'Grid';
 @forward 'Header';
 @forward 'Item';