[Docs] Consolidated GuidePage and GuideTabbedPage into just `GuideTab…

…bedPage` (#5887) * Fixed spacing * Consolidated `GuidePage` and `GuideTabbedPage` into just `GuideTabbedPage` * Cleanup some guideline pages layout * Fix mobile
elastic · May 10, 2022 · 5a75a75 · 5a75a75
1 parent c8fd291
commit 5a75a75
Show file tree

Hide file tree

Showing 27 changed files with 1,094 additions and 1,285 deletions.
diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js
diff --git a/src-docs/src/components/guide_page/index.js b/src-docs/src/components/guide_page/index.js
@@ -1,5 +1,3 @@
-export { GuidePage } from './guide_page';
-
 export { GuidePageChrome } from './guide_page_chrome';
 
 export { GuidePageHeader } from './guide_page_header';
diff --git a/src-docs/src/components/guide_section/guide_section.tsx b/src-docs/src/components/guide_section/guide_section.tsx
@@ -10,6 +10,8 @@ import {
   EuiPageContentBody,
   EuiPanel,
   EuiPanelProps,
+  CommonProps,
+  useIsWithinBreakpoints,
 } from '../../../../src';
 
 import { slugify } from '../../../../src/services/string/slugify';
@@ -23,8 +25,9 @@ import {
   GuideSectionExampleTabs,
   GuideSectionExampleTabsProps,
 } from './guide_section_parts/guide_section_tabs';
+import classNames from 'classnames';
 
-export interface GuideSection {
+export interface GuideSection extends CommonProps {
   id?: string;
   title?: string;
   text?: ReactNode;
@@ -86,8 +89,10 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
   snippet,
   color,
   children,
+  className,
 }) => {
   const { path } = useRouteMatch();
+  const isLargeBreakpoint = useIsWithinBreakpoints(['m', 'l', 'xl']);
   const [renderingPlayground, setRenderingPlayground] = useState(false);
 
   const renderTabs = () => {
@@ -184,13 +189,14 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
 
   return (
     <EuiPanel
-      color={color || 'transparent'}
+      id={id}
+      className={classNames('guideSection', className)}
+      color={!isLargeBreakpoint ? 'transparent' : color || 'transparent'}
       borderRadius="none"
-      className="guideSection"
       paddingSize="l"
-      id={id}
+      grow={false}
     >
-      {color && (children || text || title) && <EuiSpacer size="xxl" />}
+      <EuiSpacer size={(color || title) && isLargeBreakpoint ? 'xxl' : 'xs'} />
       <EuiPageContentBody restrictWidth>
         <GuideSectionExampleText title={title} wrapText={wrapText}>
           {text}
@@ -236,6 +242,7 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
         )}
 
         {children}
+        <EuiSpacer size={color && isLargeBreakpoint ? 'xxl' : 'xs'} />
       </EuiPageContentBody>
     </EuiPanel>
   );