Add Services section to doc site. Add page for isColorDark.

CHANGELOG.md

@@ -9,6 +9,7 @@
 # [`0.0.14`](https://github.com/elastic/eui/tree/v0.0.14)
 
 - Added `isColorDark` color util [(#311)](https://github.com/elastic/eui/pull/311)
+- Exported `VISUALIZATION_COLORS` from services (()[])
 - EuiButton, EuiButtonEmpty and EuiButtonIcon can now take an `href` [(#316)](https://github.com/elastic/eui/pull/316)
 - In `EuiSideNav`, allow a callback to be passed that renders the individual items in the navigation. This makes interoperability with e.g. `react-router` easier. [#310](https://github.com/elastic/eui/pull/310)
 

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -116,6 +116,32 @@ export class GuidePageChrome extends Component {
     };
   }
 
+  renderServiceNavItems() {
+    const matchingItems = this.props.services.filter(item => (
+      item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
+    ));
+
+    return {
+      name: 'Services',
+      id: 'services',
+      items: matchingItems.map(item => {
+        const {
+          name,
+          path,
+          sections,
+        } = item;
+
+        return {
+          id: `service-${path}`,
+          name,
+          href: `#/${path}`,
+          items: this.renderSubSections(sections),
+          isSelected: name === this.props.currentRouteName,
+        };
+      }),
+    };
+  }
+
   renderComponentNavItems() {
     const matchingItems = this.props.components.filter(item => (
       item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
@@ -195,6 +221,7 @@ export class GuidePageChrome extends Component {
   render() {
     const sideNav = [
       this.renderGuidelineNavItems(),
+      this.renderServiceNavItems(),
       this.renderComponentNavItems(),
       this.rendePatternNavItems(),
       this.renderSandboxNavItems(),
@@ -230,6 +257,7 @@ GuidePageChrome.propTypes = {
   onToggleTheme: PropTypes.func.isRequired,
   selectedTheme: PropTypes.string.isRequired,
   guidelines: PropTypes.array.isRequired,
+  services: PropTypes.array.isRequired,
   components: PropTypes.array.isRequired,
   patterns: PropTypes.array.isRequired,
   sandboxes: PropTypes.array.isRequired,

src-docs/src/routes.js

@@ -21,6 +21,11 @@ import { Slugify } from './services';
 import WritingGuidelines
   from './views/guidelines/writing';
 
+// Services
+
+import { IsColorDarkExample }
+  from './views/is_color_dark/is_color_dark_example';
+
 // Component examples
 
 import { AccessibilityExample }
@@ -187,6 +192,11 @@ const createExample = ({ title, intro, sections }) => {
   };
 };
 
+// Component route names should match the component name exactly.
+const services = [
+  IsColorDarkExample,
+].map(example => createExample(example));
+
 // Component route names should match the component name exactly.
 const components = [
   AccessibilityExample,
@@ -249,6 +259,7 @@ sandboxes.forEach(sandbox => { sandbox.isSandbox = true; });
 
 const allRoutes = [
   ...guidelines,
+  ...services,
   ...components,
   ...sandboxes,
   ...patterns,
@@ -257,6 +268,7 @@ const allRoutes = [
 export default {
   history: useRouterHistory(createHashHistory)(),
   guidelines: Slugify.each(guidelines, 'name', 'path'),
+  services: Slugify.each(services, 'name', 'path'),
   components: Slugify.each(components, 'name', 'path'),
   patterns: Slugify.each(patterns, 'name', 'path'),
   sandboxes: Slugify.each(sandboxes, 'name', 'path'),

src-docs/src/views/app_view.js

@@ -77,6 +77,14 @@ export class AppView extends Component {
         </div>
       );
     } else {
+      const {
+        guidelines,
+        services,
+        components,
+        patterns,
+        sandboxes,
+      } = routes;
+
       return (
         <EuiPage>
           <EuiPageBody>
@@ -86,10 +94,11 @@ export class AppView extends Component {
                   currentRouteName={currentRoute.name}
                   onToggleTheme={toggleTheme}
                   selectedTheme={theme}
-                  guidelines={routes.guidelines}
-                  components={routes.components}
-                  patterns={routes.patterns}
-                  sandboxes={routes.sandboxes}
+                  guidelines={guidelines}
+                  services={services}
+                  components={components}
+                  patterns={patterns}
+                  sandboxes={sandboxes}
                 />
               </EuiPageSideBar>
             </EuiErrorBoundary>

src-docs/src/views/is_color_dark/is_color_dark.js

@@ -0,0 +1,72 @@
+import React, {
+  Fragment,
+} from 'react';
+
+import {
+  EuiFlexGrid,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+import {
+  isColorDark,
+} from '../../../../src/services';
+
+const SWATCH_STYLE = {
+  width: 100,
+  height: 100,
+  padding: 16,
+};
+
+const rgb = (r, g, b) => {
+  return `rgb(${r}, ${g}, ${b})`;
+};
+
+export default () => {
+  const DARK_COLORS = [
+    [0, 104, 55],
+    [165, 0, 38],
+    [0, 0, 0],
+    [219, 19, 116],
+    [73, 0, 146],
+    [70, 26, 10],
+    [146, 0, 0]
+  ];
+
+  const LIGHT_COLORS = [
+    [191, 161, 128],
+    [249, 133, 16],
+    [0, 179, 164],
+    [212, 157, 170],
+    [255, 255, 255],
+    [254, 182, 219],
+    [230, 194, 32]
+  ];
+
+  return (
+    <Fragment>
+      <EuiFlexGrid>
+        {DARK_COLORS.map(color => (
+          <EuiFlexItem style={{ backgroundColor: rgb(...color), ...SWATCH_STYLE }} key={color.join('')}>
+            {
+              isColorDark(...color)
+                ? <div style={{ color: 'white' }}>Dark</div>
+                : <div style={{ color: 'black' }}>Light</div>
+            }
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGrid>
+
+      <EuiFlexGrid>
+        {LIGHT_COLORS.map(color => (
+          <EuiFlexItem style={{ backgroundColor: rgb(...color), ...SWATCH_STYLE }} key={color.join('')}>
+            {
+              isColorDark(...color)
+                ? <div style={{ color: 'white' }}>Dark</div>
+                : <div style={{ color: 'black' }}>Light</div>
+            }
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGrid>
+    </Fragment>
+  );
+};

src-docs/src/views/is_color_dark/is_color_dark_example.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+} from '../../../../src/components';
+
+import IsColorDark from './is_color_dark';
+const isColorDarkSource = require('!!raw-loader!./is_color_dark');
+const isColorDarkHtml = renderToHtml(IsColorDark);
+
+export const IsColorDarkExample = {
+  title: 'IsColorDark',
+  sections: [{
+    title: 'IsColorDark',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: isColorDarkSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: isColorDarkHtml,
+    }],
+    text: (
+      <p>
+        Use <EuiCode>isColorDark</EuiCode> to determine whether or not to use light or dark text
+        against a background of a given color.
+      </p>
+    ),
+    demo: <IsColorDark />,
+  }],
+};

src/components/avatar/avatar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { VISUALIZATION_COLORS } from '../../services/colors/visualization_colors';
+import { VISUALIZATION_COLORS } from '../../services';
 
 const sizeToClassNameMap = {
   'none': null,

src/services/colors/is_color_dark.test.js → src/services/color/is_color_dark.test.js

@@ -1,7 +1,6 @@
 import { isColorDark } from './is_color_dark';
 
 describe('isColorDark', () => {
-
   const DARK_COLORS = [
     [0, 104, 55],
     [165, 0, 38],
@@ -33,5 +32,4 @@ describe('isColorDark', () => {
       expect(isColorDark(...color)).toBe(false);
     });
   });
-
 });

src/services/index.js

@@ -15,8 +15,9 @@ export {
 } from './alignment';
 
 export {
-  isColorDark
-} from './colors';
+  isColorDark,
+  VISUALIZATION_COLORS,
+} from './color';
 
 export {
   Pager,