From 93921103579ba14dd8f154d9d4fb3730558f26c9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 12 Dec 2024 18:10:38 +0000
Subject: [PATCH] Homepage layout fix (#1472)

* simplify homepage card list by replacing OuiFlex component with CSS grid

Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com>

* simplify layout on homepage

Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com>

* clean up class properties

Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com>

* fix lint errors

Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com>

* update changelog

Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com>

---------

Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com>
(cherry picked from commit 147fd1cae67a0e31c4892f8c3be057b2fe85edbb)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 src-docs/src/components/guide_components.scss |  26 +--
 src-docs/src/views/home/home_view.js          | 215 ++++++++----------
 2 files changed, 106 insertions(+), 135 deletions(-)

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
index 79b7c46aeb..5782b15355 100644
--- a/src-docs/src/components/guide_components.scss
+++ b/src-docs/src/components/guide_components.scss
@@ -344,22 +344,20 @@ body {
   }
 }
 
-.guideHomePage__blockformCard {
-  min-width: 200px;
-  flex-basis: 100% !important;
-
-  // sass-lint:disable-block mixins-before-declarations
-  @include ouiBreakpoint('s', 'm') {
-    flex-basis: 45% !important; // sass-lint:disable-line no-important
-  }
+.guideHomePage__benefitsContainer,
+.guideHomePage__featuredComponents {
+  display: grid;
+  gap: $ouiSizeL; // sass-lint:disable-line no-misspelled-properties
+  padding-left: $ouiSizeL;
+  padding-right: $ouiSizeL;
+}
 
-  @include ouiBreakpoint('l') {
-    flex-basis: 30% !important; // sass-lint:disable-line no-important
-  }
+.guideHomePage__benefitsContainer {
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
 
-  @include ouiBreakpoint('xl') {
-    flex-basis: 22% !important; // sass-lint:disable-line no-important
-  }
+.guideHomePage__featuredComponents {
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
 .guideHomePage__illustration {
diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js
index fa86cfe2d0..9735647dbb 100644
--- a/src-docs/src/views/home/home_view.js
+++ b/src-docs/src/views/home/home_view.js
@@ -29,7 +29,6 @@ import {
   OuiTitle,
   OuiPanel,
   OuiIcon,
-  OuiFlexGrid,
   OuiPageContent,
   OuiPageContentBody,
 } from '../../../../src/components';
@@ -85,127 +84,101 @@ export const HomeView = () => (
           </OuiFlexItem>
         </OuiFlexGroup>
       </OuiPanel>
-      <OuiSpacer size="xxl" />
-      <OuiFlexGrid columns={3}>
-        <OuiFlexItem>
-          <OuiCard
-            icon={<OuiIcon size="l" type="accessibility" />}
-            layout="horizontal"
-            display="plain"
-            titleSize="xs"
-            title="Accessible to everyone"
-            description="Uses high contrast, color-blind safe palettes and tested with most
+      <OuiSpacer size="xl" />
+      <div className="guideHomePage__benefitsContainer">
+        <OuiCard
+          icon={<OuiIcon size="l" type="accessibility" />}
+          layout="horizontal"
+          display="plain"
+          titleSize="xs"
+          title="Accessible to everyone"
+          description="Uses high contrast, color-blind safe palettes and tested with most
         assistive technology."
-          />
-        </OuiFlexItem>
-        <OuiFlexItem>
-          <OuiCard
-            icon={<OuiIcon size="l" type="controlsHorizontal" />}
-            layout="horizontal"
-            display="plain"
-            titleSize="xs"
-            title="Flexible and composable"
-            description="Configurable enough to meet the needs of a wide array of contexts while maintaining brand and low-level consistency."
-          />
-        </OuiFlexItem>
-        <OuiFlexItem>
-          <OuiCard
-            icon={<OuiIcon size="l" type="documentEdit" />}
-            layout="horizontal"
-            display="plain"
-            titleSize="xs"
-            title="Well documented and tested"
-            description="Code is friendly to the novice and expert alike."
-          />
-        </OuiFlexItem>
-      </OuiFlexGrid>
-      <OuiSpacer size="xxl" />
-      <OuiFlexGroup
-        gutterSize="l"
-        wrap
-        responsive={false}
-        justifyContent="spaceBetween">
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/navigation/button"
-            textAlign="left"
-            image={imageButtons}
-            title="Buttons"
-            description="Buttons for every usage you might need"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/display/card"
-            textAlign="left"
-            image={imageCards}
-            title="Cards"
-            description="Cards like these help you make repeatable content more presentable"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/layout/flex"
-            textAlign="left"
-            image={imageFlexgrid}
-            title="Flexible layouts"
-            description="Create layouts by using flex groups, grids, and items"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/forms/form-layouts"
-            textAlign="left"
-            image={imageForms}
-            title="Forms"
-            description="Input tags, layouts, and validation for your forms"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/display/icons"
-            textAlign="left"
-            image={imageIcons}
-            title="Icons"
-            description="Our SVG icon library gives you full control over size and color"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/layout/page"
-            textAlign="left"
-            image={imagePages}
-            title="Pages"
-            description="Layout your whole application page with this component and its series of child components"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/tabular-content/tables"
-            textAlign="left"
-            image={imageTables}
-            title="Tables"
-            description="Build tables from individual components or high level wrappers"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/display/text"
-            textAlign="left"
-            image={imageText}
-            title="Text"
-            description="Simple HTML text like paragraphs and lists are wrapped in a single text component for styling"
-          />
-        </OuiFlexItem>
-      </OuiFlexGroup>
+        />
+        <OuiCard
+          icon={<OuiIcon size="l" type="controlsHorizontal" />}
+          layout="horizontal"
+          display="plain"
+          titleSize="xs"
+          title="Flexible and composable"
+          description="Configurable enough to meet the needs of a wide array of contexts while maintaining brand and low-level consistency."
+        />
+        <OuiCard
+          icon={<OuiIcon size="l" type="documentEdit" />}
+          layout="horizontal"
+          display="plain"
+          titleSize="xs"
+          title="Well documented and tested"
+          description="Code is friendly to the novice and expert alike."
+        />
+      </div>
+      <OuiSpacer size="xl" />
+      <div className="guideHomePage__featuredComponents">
+        <OuiCard
+          hasBorder
+          href="#/navigation/button"
+          textAlign="left"
+          image={imageButtons}
+          title="Buttons"
+          description="Buttons for every usage you might need"
+        />
+        <OuiCard
+          hasBorder
+          href="#/display/card"
+          textAlign="left"
+          image={imageCards}
+          title="Cards"
+          description="Cards like these help you make repeatable content more presentable"
+        />
+        <OuiCard
+          hasBorder
+          href="#/layout/flex"
+          textAlign="left"
+          image={imageFlexgrid}
+          title="Flexible layouts"
+          description="Create layouts by using flex groups, grids, and items"
+        />
+        <OuiCard
+          hasBorder
+          href="#/forms/form-layouts"
+          textAlign="left"
+          image={imageForms}
+          title="Forms"
+          description="Input tags, layouts, and validation for your forms"
+        />
+        <OuiCard
+          hasBorder
+          href="#/display/icons"
+          textAlign="left"
+          image={imageIcons}
+          title="Icons"
+          description="Our SVG icon library gives you full control over size and color"
+        />
+        <OuiCard
+          hasBorder
+          href="#/layout/page"
+          textAlign="left"
+          image={imagePages}
+          title="Pages"
+          description="Layout your whole application page with this component and its series of child components"
+        />
+        <OuiCard
+          hasBorder
+          href="#/tabular-content/tables"
+          textAlign="left"
+          image={imageTables}
+          title="Tables"
+          description="Build tables from individual components or high level wrappers"
+        />
+        <OuiCard
+          hasBorder
+          href="#/display/text"
+          textAlign="left"
+          image={imageText}
+          title="Text"
+          description="Simple HTML text like paragraphs and lists are wrapped in a single text component for styling"
+        />
+      </div>
 
       <OuiSpacer size="xl" />
       <div>