🎉 Documentation Section Examples Redesign

README.md

@@ -65,7 +65,7 @@ directly in the code. And unit test coverage for the UI components allows us to
 ### Consumption
 
 * [Consuming EUI][consuming]
-* [Using EUI with react-router](wiki/react-router.md)
+* [Using EUI with react-router](react-router)
 
 ### Maintenance / Contributing
 
@@ -88,5 +88,6 @@ directly in the code. And unit test coverage for the UI components allows us to
 
 [license]: LICENSE
 [faq]: FAQ.md
-[consuming]: wiki/consuming.md
+[consuming]: src-docs/src/views/getting_started/consuming.md
+[react-router]: wiki/react-router.md
 [docs]: https://elastic.github.io/eui/

src-docs/src/components/guide_components.scss

@@ -153,16 +153,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 
 .guideDemo__ghostBackground {
   @if (lightness($euiTextColor) < 50) {
-    background: $euiColorDarkestShade;
-  }
-}
-
-.guideDemo__icon {
-  text-align: center;
-
-  svg,
-  img {
-    margin-bottom: $euiSizeS;
+    background: $euiColorDarkestShade !important; // Override EuiPanel specificity
   }
 }
 
@@ -285,3 +276,124 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
     flex-basis: 22% !important; // sass-lint:disable-line no-important
   }
 }
+
+.guideHomePage__illustrationLightShade {
+  fill: $euiColorLightShade;
+}
+
+.guideHomePage__illustrationEmptyShade {
+  fill: $euiColorEmptyShade;
+}
+
+.guideHomePage__illustrationDots,
+.guideHomePage__illustrationComponents {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.guideHomePage__illustrationEffect {
+  display: block;
+  height: auto;
+  position: relative;
+  width: auto;
+
+  .guideHomePage__illustrationEffectParts {
+    height: auto;
+    transform: perspective(1600px);
+    transform-style: preserve-3d;
+    transition: all .3s ease-in-out;
+    width: 100%;
+
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .guideHomePage__illustrationEffectPartsDots,
+  .guideHomePage__illustrationEffectPartsComps {
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform: translateZ(16px) scale(.9);
+    transition: all .4s ease;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+
+  .guideHomePage__illustrationTopLeftCorner {
+    height: 50%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 50%;
+    z-index: 300;
+
+    &:hover ~ .guideHomePage__illustrationEffectParts {
+      transform: perspective(1600px) rotateX(-5deg) rotateY(5deg);
+
+      .guideHomePage__illustrationEffectPartsDots {
+        transform: translate3d(-.1px, -.1px, 16px) scale(.9);
+      }
+    }
+  }
+
+  .guideHomePage__illustrationTopRightCorner {
+    height: 50%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 50%;
+    z-index: 300;
+
+    &:hover ~ .guideHomePage__illustrationEffectParts  {
+      transform: perspective(1600px) rotateX(-5deg) rotateY(-5deg);
+
+      .guideHomePage__illustrationEffectPartsDots {
+        transform: translate3d(.1px, -.1px, 16px) scale(.9);
+      }
+    }
+  }
+
+  .guideHomePage__illustrationBottomLeftCorner {
+    bottom: 0;
+    height: 50%;
+    left: 0;
+    position: absolute;
+    width: 50%;
+    z-index: 300;
+
+    &:hover ~ .guideHomePage__illustrationEffectParts {
+      transform: perspective(1600px) rotateX(5deg) rotateY(5deg);
+
+      .guideHomePage__illustrationEffectPartsDots {
+        transform: translate3d(-.1px, .1px, 1px) scale(.9);
+      }
+    }
+  }
+
+  .guideHomePage__illustrationBottomRightCorner {
+    bottom: 0;
+    height: 50%;
+    position: absolute;
+    right: 0;
+    width: 50%;
+    z-index: 300;
+
+    &:hover ~ .guideHomePage__illustrationEffectParts  {
+      transform: perspective(1600px) rotateX(5deg) rotateY(-5deg);
+
+
+      .guideHomePage__illustrationEffectPartsDots {
+        transform: translate3d(.1px, .1px, 1px) scale(.9);
+      }
+    }
+	}
+}

src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx

@@ -0,0 +1,39 @@
+import React, { FunctionComponent } from 'react';
+import {
+  EuiMarkdownFormat,
+  getDefaultEuiMarkdownProcessingPlugins,
+} from '../../../../src/components/markdown_editor';
+import { EuiText } from '../../../../src/components/text';
+import { EuiTitle } from '../../../../src/components/title';
+import { slugify } from '../../../../src/services';
+
+export type GuideMarkdownFormatProps = {
+  children: any;
+};
+
+export const GuideMarkdownFormat: FunctionComponent<GuideMarkdownFormatProps> = ({
+  children,
+}) => {
+  const processingPlugins = getDefaultEuiMarkdownProcessingPlugins();
+  const rehype2reactConfig = processingPlugins[1][1];
+
+  rehype2reactConfig.components.h2 = ({ children }) => {
+    const id = slugify(children[0]);
+
+    return (
+      <EuiTitle>
+        <h2 id={id}>{children}</h2>
+      </EuiTitle>
+    );
+  };
+
+  rehype2reactConfig.components.p = ({ children }) => (
+    <EuiText grow={false}>{children}</EuiText>
+  );
+
+  return (
+    <EuiMarkdownFormat processingPluginList={processingPlugins}>
+      {children}
+    </EuiMarkdownFormat>
+  );
+};

src-docs/src/components/guide_markdown_format/index.ts

@@ -0,0 +1 @@
+export { GuideMarkdownFormat } from './guide_markdown_format';

src-docs/src/components/guide_page/guide_page_header.tsx

@@ -41,6 +41,19 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
     );
   }
 
+  function renderVersion() {
+    const isLocalDev = window.location.host.includes('803');
+
+    return (
+      <EuiBadge
+        href="#/package/changelog"
+        aria-label={`Version ${pkg.version}, View changelog`}
+        color={isLocalDev ? 'accent' : 'default'}>
+        {isLocalDev ? 'Local' : `v.${pkg.version}`}
+      </EuiBadge>
+    );
+  }
+
   function renderGithub() {
     const href = 'https://github.com/elastic/eui';
     const label = 'EUI GitHub repo';
@@ -131,15 +144,7 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
       theme="dark"
       sections={[
         {
-          items: [
-            renderLogo(),
-            <EuiBadge
-              href="#/package/changelog"
-              aria-label={`Version ${pkg.version}, View changelog`}
-              color="default">
-              v.{pkg.version}
-            </EuiBadge>,
-          ],
+          items: [renderLogo(), renderVersion()],
           borders: 'none',
         },
         {

src-docs/src/components/guide_rule/_guide_rule_example.scss

@@ -1,58 +1,24 @@
-/**
-  * 1. Ensure that the borders of the captions line up across the whole example row
-  *    1b. even if the caption spans multiple lines
-  */
-
 .guideRule__example {
   .guideRule__example__panel {
     border-bottom: 2px solid;
-    margin-bottom: $euiSizeS;
-    flex-grow: 1; /* 1 */
-
-    &:not(.euiPanel) {
-      padding-bottom: $euiSize; // only change the bottom padding if it's not an euiPanel
-    }
-  }
 
-  pre {
-    margin-bottom: 0;
-    padding: 0;
-  }
-
-  .guideRule__caption {
-    @include euiFontSizeS;
-    max-height: $euiFontSizeS * $euiLineHeight; /* 1 */
-    overflow-y: visible; /* 1 */
-  }
-
-  // Coloring
-  &.guideRule__example--do {
-    .guideRule__example__panel {
-      border-bottom-color: $euiColorSuccess;
-    }
-
-    .guideRule__caption {
-      color: $euiColorSuccessText;
+    &--flex {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
     }
   }
+}
 
-  &.guideRule__example--dont {
-    .guideRule__example__panel {
-      border-bottom-color: $euiColorDanger;
-    }
-
-    .guideRule__caption {
-      color: $euiColorDanger;
-    }
+.guideRule__example--do {
+  .guideRule__example__panel {
+    border-bottom-color: $euiColorSuccess;
   }
+}
 
-  &.guideRule__example--frame {
-    .guideRule__example__panel {
-      padding: $euiSizeL;
-      background-color: $euiColorLightestShade;
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-    }
+.guideRule__example--dont {
+  .guideRule__example__panel {
+    border-bottom-color: $euiColorDanger;
   }
 }
+