feat(react-components): add "Flex" and "FlexContainer" components

PeculiarVentures · Sep 5, 2024 · 80ce7f8 · 80ce7f8
1 parent c796518
commit 80ce7f8
Show file tree

Hide file tree

Showing 10 changed files with 666 additions and 0 deletions.
diff --git a/packages/react-components/src/Flex/__snapshots__/flex.test.tsx.snap b/packages/react-components/src/Flex/__snapshots__/flex.test.tsx.snap
@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Flex /> should pass className 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  min-width: 0px;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+<div
+    class="my-class-name emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<Flex /> should pass component 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  min-width: 0px;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+<p
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<Flex /> should render size auto 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  min-width: 0px;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  max-width: none;
+  width: auto;
+}
+
+<div
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<Flex /> should render size grow 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  min-width: 0px;
+  -webkit-flex-basis: 0px;
+  -ms-flex-preferred-size: 0px;
+  flex-basis: 0px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+<div
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<Flex /> should render with default styles 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  min-width: 0px;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+<div
+    class="emotion-0"
+  >
+    1
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-components/src/Flex/__snapshots__/flex_container.test.tsx.snap b/packages/react-components/src/Flex/__snapshots__/flex_container.test.tsx.snap
@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FlexContainer /> should pass align 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<FlexContainer /> should pass className 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+<div
+    class="test-classname emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<FlexContainer /> should pass component 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+<li
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<FlexContainer /> should pass direction 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+<div
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<FlexContainer /> should pass gap 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 10px;
+}
+
+<div
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<FlexContainer /> should pass justify 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+<div
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<FlexContainer /> should pass wrap 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+<div
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<FlexContainer /> should render with default styles 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+<div
+    class="emotion-0"
+  >
+    1
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-components/src/Flex/flex.mdx b/packages/react-components/src/Flex/flex.mdx
@@ -0,0 +1,33 @@
+import { Meta, ArgTypes, Canvas } from '@storybook/blocks';
+import * as Stories from './flex.stories';
+import { FlexContainer, Flex } from './index';
+
+<Meta of={Stories} />
+
+# Flex
+
+## Auto-layout
+
+The auto-layout feature gives equal space to all items present. When you set the width of one item, the others will automatically resize to match it.
+
+<Canvas of={Stories.AutoLayoutExample} />
+
+## Variable width content
+
+When a breakpoint's value is given as `auto`, then a column's size will automatically adjust to match the width of its content. The demo below shows how this works:
+
+<Canvas of={Stories.VariableWidthExample} />
+
+## Column
+
+<Canvas of={Stories.ColumnExample} />
+
+## Component API
+
+### FlexContainer
+
+<ArgTypes of={FlexContainer} />
+
+### Flex
+
+<ArgTypes of={Flex} />