Add initial research for Flex component (#264)

* Add initial research for Flex component

* Remove FAST's Data Grid alias for Flex

* Add images for Ant Design Space

* Add images for Atlaskit Page

* Add images for Cosmos Stack Layout

* Add images for Bootstrap Flex

* Add images for Evergreen Pane

* Add images for Fluent UI Fabric Stack

* Add images for Primer Flex

* Add images for Fluent UI Stardust Flex

* Remove connection of Grid components with Flex

* Remove W3 Layout Grid

research/src/pages/flex.research.mdx

@@ -0,0 +1,19 @@
+---
+menu: Analysis
+name: Flex
+path: /components/flex.research
+---
+
+import Anatomy from '../components/anatomy'
+import Concepts from '../components/concepts'
+import ComponentCoverage from '../components/component-coverage'
+
+<ComponentCoverage component="Flex" />
+
+## Anatomy
+
+<Anatomy component="Flex" />
+
+## Concepts
+
+<Concepts component="Flex" />

research/src/sources/antd.json5

@@ -835,7 +835,7 @@
           "name": "color",
           "description": "Avatar can have custom colors and background colors",
           "image": "antd-avatar-letter.png"
-        },
+        }
       ]
     },
     {
@@ -1209,6 +1209,20 @@
       "name": "Divider",
       "url": "https://ant.design/components/divider"
     },
+    {
+      "name": "Space",
+      "openUIName": "Flex",
+      "definition": "Set components spacing.",
+      "url": "https://ant.design/components/space/",
+      "concepts": [
+        { "name": "basic", "category": "type", "image": "antd-space-basic.png" },
+        { "name": "direction", "category": "type", "image": "antd-space-direction-horizontal.png" },
+        { "name": "direction", "category": "type", "image": "antd-space-direction-vertical.png" },
+        { "name": "spacing", "category": "type", "image": "antd-space-spacing.gif" },
+        { "name": "spacing", "category": "type", "image": "antd-space-custom-spacing.gif" },
+        { "name": "wrapping", "category": "type", "image": "antd-space-wrapping.png" }
+      ]
+    },
     {
       "name": "LocaleProvider (Deprecated)",
       "url": "https://ant.design/components/locale-provider"

research/src/sources/atlassian.json5

@@ -48,7 +48,7 @@
           "openUIName": "badge",
           "description": "An icon that displays the avatar's status.",
           "image": "atlaskit-avatar-status.png"
-        },
+        }
       ]
     },
     {
@@ -658,6 +658,27 @@
     {
       "name": "Width detector",
       "url": "https://atlaskit.atlassian.com/packages/core/width-detector"
+    },
+    {
+      "name": "Page",
+      "openUIName": "Flex",
+      "definition": "A component for building page layouts.",
+      "url": "https://atlaskit.atlassian.com/packages/design-system/page",
+      "concepts": [
+        { "name": "basic", "category": "type", "image": "atlaskit-page-basic.png" },
+        { "name": "layout", "category": "type", "image": "atlaskit-page-layout.png" },
+        { "name": "spacing", "category": "type", "image": "atlaskit-page-spacing.png" }
+      ]
+    },
+    {
+      "name": "Grid",
+      "openUIName": "Flex",
+      "url": "https://atlaskit.atlassian.com/packages/design-system/page"
+    },
+    {
+      "name": "GridColumn",
+      "openUIName": "Flex",
+      "url": "https://atlaskit.atlassian.com/packages/design-system/page"
     }
   ]
 }

research/src/sources/auth0.json5

@@ -113,6 +113,13 @@
     {
       "name": "Phone Mockup",
       "url": "https://styleguide.auth0.com/components/phone-mockup"
+    },
+    {
+      "name": "Stack Layout",
+      "openUIName": "Flex",
+      "definition": "The StackLayout organizes it's children into flexible horizontal row. It gives control over the way they spread, space, and align.",
+      "url": "https://auth0-cosmos.now.sh/#/component/stack-layout",
+      "concepts": [{ "name": "basic", "category": "type", "image": "auth0-stack-layout-basic.png" }]
     }
   ]
 }

research/src/sources/bootstrap.json5

@@ -287,7 +287,27 @@
     },
     {
       "name": "Flex",
-      "url": "https://getbootstrap.com/docs/4.3/utilities/flex/"
+      "definition": "Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.",
+      "url": "https://getbootstrap.com/docs/4.3/utilities/flex/",
+      "concepts": [
+        { "name": "basic", "category": "type", "image": "bootstrap-flex-basic.png" },
+        {
+          "name": "direction",
+          "category": "type",
+          "image": "bootstrap-flex-direction-horizontal.png"
+        },
+        {
+          "name": "direction",
+          "category": "type",
+          "image": "bootstrap-flex-direction-vertical.png"
+        },
+        { "name": "wrapping", "category": "type", "image": "bootstrap-flex-wrap.png" },
+        { "name": "alignment", "category": "type", "image": "bootstrap-flex-align.png" },
+        { "name": "justifying", "category": "type", "image": "bootstrap-flex-justify.png" },
+        { "name": "order", "category": "type", "image": "bootstrap-flex-order.png" },
+        { "name": "growing", "category": "type", "image": "bootstrap-flex-grow.png" },
+        { "name": "shrinking", "category": "type", "image": "bootstrap-flex-shrink.png" }
+      ]
     },
     {
       "name": "Forms",

research/src/sources/evergreen.json5

@@ -58,7 +58,7 @@
           "name": "color",
           "description": "The color of an avatar is automatically generated based on the name provided.",
           "image": "evergreen-avatar-color.png"
-        },
+        }
       ]
     },
     {
@@ -332,6 +332,24 @@
       "name": "Form Field",
       "definition": "",
       "url": "https://evergreen.segment.com/components/form-field/"
+    },
+    {
+      "name": "Pane",
+      "openUIName": "Flex",
+      "definition": "The Pane and Card components are one of the most important components in Evergreen. They are used as primitives to construct layouts and compose components. In most cases you can use a Pane instead of a div element.",
+      "url": "https://evergreen.segment.com/components/layout-primitives/",
+      "concepts": [
+        { "name": "basic", "category": "type", "image": "evergreen-pane-basic.png" },
+        { "name": "alignment", "category": "type", "image": "evergreen-pane-align.png" },
+        { "name": "colors", "category": "type", "image": "evergreen-pane-colors.png" },
+        { "name": "borders", "category": "type", "image": "evergreen-pane-borders.png" },
+        {
+          "name": "border colors",
+          "category": "type",
+          "image": "evergreen-pane-border-colors.png"
+        },
+        { "name": "elevation", "category": "type", "image": "evergreen-pane-elevation.png" }
+      ]
     }
   ]
 }

research/src/sources/fabric.json5

@@ -357,7 +357,7 @@
           "name": "details",
           "description": "Shows full name and details",
           "image": "fabric-persona-details.png"
-        },
+        }
       ]
     },
     {
@@ -522,7 +522,20 @@
     },
     {
       "name": "Stack",
-      "url": "https://developer.microsoft.com/en-us/fabric#/controls/web/stack"
+      "openUIName": "Flex",
+      "definition": "A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.",
+      "url": "https://developer.microsoft.com/en-us/fabric#/controls/web/stack",
+      "concepts": [
+        { "name": "basic", "category": "type", "image": "fabric-stack-basic.png" },
+        { "name": "direction", "category": "type", "image": "fabric-stack-basic.png" },
+        { "name": "direction", "category": "type", "image": "fabric-stack-horizontal.png" },
+        { "name": "alignment", "category": "type", "image": "fabric-stack-align.png" },
+        { "name": "growing", "category": "type", "image": "fabric-stack-grow.png" },
+        { "name": "shrinking", "category": "type", "image": "fabric-stack-shrink.gif" },
+        { "name": "order", "category": "type", "image": "fabric-stack-order.png" },
+        { "name": "spacing", "category": "type", "image": "fabric-stack-space.png" },
+        { "name": "wrapping", "category": "type", "image": "fabric-stack-wrap.png" }
+      ]
     },
     {
       "name": "Text",

research/src/sources/fast.json5

@@ -105,6 +105,11 @@
     {
       "name": "Tree view",
       "url": "https://explore.fast.design/components/fast-tree-view"
+    },
+    {
+      "name": "Data Grid",
+      "definition": "The data grid component enables authors to display an array of data in a tabular layout. The layout can include a header region where a title can be displayed for each column.",
+      "url": "https://explore.fast.design/components/fast-data-grid"
     }
   ]
 }

research/src/sources/lightning.json5

@@ -47,7 +47,7 @@
         {
           "name": "square",
           "image": "lightning-avatar-square.png"
-        },
+        }
       ]
     },
     {
@@ -665,6 +665,11 @@
       "name": "Tooltips",
       "url": "https://www.lightningdesignsystem.com/components/tooltips"
     },
+    {
+      "name": "Grid",
+      "definition": "The SLDS grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, order, flow, and gutters.",
+      "url": "https://www.lightningdesignsystem.com/utilities/grid/"
+    },
     {
       "name": "Tree Grid",
       "openUIName": "Table",

research/src/sources/materialComponentsWeb.json5

@@ -305,6 +305,7 @@
     },
     {
       "name": "Layout Grid",
+      "definition": "Material design’s responsive UI is based on a column-variate grid layout.",
       "url": "https://material.io/components/web/catalog/layout-grid"
     },
     {

research/src/sources/primer.json5

@@ -101,7 +101,8 @@
     {
       "name": "Flex",
       "description": "Flex provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic",
-      "url": "https://primer.style/components/Flex"
+      "url": "https://primer.style/components/Flex",
+      "concepts": [{ "name": "basic", "category": "type", "image": "primer-flex-basic.png" }]
     },
     {
       "name": "Avatar",
@@ -120,8 +121,8 @@
           "name": "AvatarPair",
           "openUIName": "badge",
           "image": "primer-avatar-pair.png"
-        },
+        }
       ]
-    },
+    }
   ]
 }

research/src/sources/semantic.json5

@@ -345,6 +345,7 @@
     },
     {
       "name": "Grid",
+      "definition": "A grid is a structure with a long history used to align negative space in designs.",
       "url": "https://semantic-ui.com/collections/grid.html"
     },
     {

research/src/sources/spectrum.json5

@@ -4,5 +4,11 @@
   "description": "Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.",
   "url": "http://spectrum.adobe.com",
   "by": "Adobe",
-  "components": []
+  "components": [
+    {
+      "name": "Responsive Grid",
+      "definition": "A responsive grid allows a layout to change dynamically based on the size of the screen. This also guarantees consistent layouts across Adobe’s products.",
+      "url": "https://spectrum.adobe.com/page/responsive-grid/"
+    }
+  ]
 }

research/src/sources/stardust.json5

@@ -52,7 +52,7 @@
           "name": "square",
           "description": "An Avatar can have a square shape",
           "image": "stardust-avatar-square.png"
-        },
+        }
       ]
     },
     {
@@ -249,7 +249,12 @@
     },
     {
       "name": "Flex",
-      "url": "https://stardust-ui.github.io/react/components/flex"
+      "url": "https://stardust-ui.github.io/react/components/flex",
+      "concepts": [
+        { "name": "basic", "category": "type", "image": "stardust-flex-basic.png" },
+        { "name": "alignment", "category": "type", "image": "stardust-flex-align.png" },
+        { "name": "alignment", "category": "type", "image": "stardust-flex-mixed-align.png" }
+      ]
     },
     {
       "name": "Form",