Added documentation for htmlIdGenerator

src-docs/src/routes.js

@@ -122,6 +122,8 @@ import { HighlightAndMarkExample } from './views/highlight_and_mark/highlight_an
 
 import { HorizontalRuleExample } from './views/horizontal_rule/horizontal_rule_example';
 
+import { HtmlIdGeneratorExample } from './views/html_id_generator/html_id_generator_example';
+
 import { I18nExample } from './views/i18n/i18n_example';
 
 import { IconExample } from './views/icon/icon_example';
@@ -414,6 +416,7 @@ const navigation = [
       ErrorBoundaryExample,
       FocusTrapExample,
       HighlightAndMarkExample,
+      HtmlIdGeneratorExample,
       InnerTextExample,
       I18nExample,
       IsColorDarkExample,

src-docs/src/views/html_id_generator/bothPrefixSuffix.js

@@ -0,0 +1,77 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiCode,
+  EuiFormRow,
+} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
+export class PrefixSufix extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      prefix: 'Some',
+      suffix: 'Id',
+      id1: htmlIdGenerator('Some')('Id'),
+    };
+  }
+
+  onPrefixChange = e => {
+    const prefix = e.target.value;
+    const { suffix } = this.state;
+
+    this.setState({
+      prefix,
+      id1: htmlIdGenerator(prefix)(suffix),
+    });
+  };
+
+  onSuffixChange = e => {
+    const suffix = e.target.value;
+    const { prefix } = this.state;
+
+    this.setState({
+      suffix,
+      id1: htmlIdGenerator(prefix)(suffix),
+    });
+  };
+
+  render() {
+    const { prefix, suffix, id1 } = this.state;
+    return (
+      <Fragment>
+        <EuiFlexGroup
+          justifyContent="flexStart"
+          gutterSize="m"
+          alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiFormRow label="Prefix">
+              <EuiFieldText
+                value={prefix}
+                onChange={this.onPrefixChange}
+                placeholder="Enter prefix"
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFormRow label="Suffix">
+              <EuiFieldText
+                value={suffix}
+                onChange={this.onSuffixChange}
+                placeholder="Enter suffix"
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+        <EuiSpacer size="m" />
+        <EuiCode>{id1} </EuiCode>
+      </Fragment>
+    );
+  }
+}

src-docs/src/views/html_id_generator/htmlIdGenerator.js

@@ -0,0 +1,43 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiCode,
+} from '../../../../src/components';
+
+import { htmlIdGenerator } from '../../../../src/services';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: htmlIdGenerator()(),
+    };
+  }
+
+  reGenerate = () => {
+    this.setState({ value: htmlIdGenerator()() });
+  };
+
+  render() {
+    const { value } = this.state;
+    return (
+      <Fragment>
+        <EuiFlexGroup
+          justifyContent="flexStart"
+          gutterSize="m"
+          alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiCode>{value}</EuiCode>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={this.reGenerate}>Regenerate</EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </Fragment>
+    );
+  }
+}

src-docs/src/views/html_id_generator/htmlIdGeneratorPrefix.js

@@ -0,0 +1,55 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiCode,
+  EuiFormRow,
+} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
+export class HtmlIdGeneratorPrefix extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      prefix: 'Id',
+      id1: htmlIdGenerator('Id')(),
+    };
+  }
+
+  onSearchChange = e => {
+    const prefix = e.target.value;
+    this.setState({
+      prefix,
+      id1: htmlIdGenerator(prefix)(),
+    });
+  };
+
+  render() {
+    const { prefix, id1 } = this.state;
+    return (
+      <Fragment>
+        <EuiFlexGroup
+          justifyContent="flexStart"
+          gutterSize="m"
+          alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiFormRow label="Prefix">
+              <EuiFieldText
+                value={prefix}
+                onChange={this.onSearchChange}
+                placeholder="Enter prefix"
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+        <EuiSpacer size="m" />
+        <EuiCode>{id1} </EuiCode>
+      </Fragment>
+    );
+  }
+}

src-docs/src/views/html_id_generator/htmlIdGeneratorSuffix.js

@@ -0,0 +1,55 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiCode,
+  EuiFormRow,
+} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
+export class HtmlIdGeneratorSuffix extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      suffix: 'Id',
+      id1: htmlIdGenerator()('Id'),
+    };
+  }
+
+  onSuffixChange = e => {
+    const suffix = e.target.value;
+    this.setState({
+      suffix,
+      id1: htmlIdGenerator()(suffix),
+    });
+  };
+
+  render() {
+    const { suffix, id1 } = this.state;
+    return (
+      <Fragment>
+        <EuiFlexGroup
+          justifyContent="flexStart"
+          gutterSize="m"
+          alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiFormRow label="Suffix">
+              <EuiFieldText
+                value={suffix}
+                onChange={this.onSuffixChange}
+                placeholder="Enter suffix"
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+        <EuiSpacer size="m" />
+        <EuiCode>{id1} </EuiCode>
+      </Fragment>
+    );
+  }
+}

src-docs/src/views/html_id_generator/html_id_generator_example.js

@@ -0,0 +1,109 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+import { EuiCode } from '../../../../src/components';
+
+import IdGenerator from './htmlIdGenerator';
+import { HtmlIdGeneratorPrefix } from './htmlIdGeneratorPrefix';
+import { HtmlIdGeneratorSuffix } from './htmlIdGeneratorSuffix';
+import { PrefixSufix } from './bothPrefixSuffix';
+
+const htmlIdGeneratorSource = require('!!raw-loader!./htmlIdGenerator');
+const htmlIdGeneratorHtml = renderToHtml(IdGenerator);
+
+const htmlIdGeneratorPrefixSource = require('!!raw-loader!./htmlIdGeneratorPrefix');
+const htmlIdGeneratorPrefixHtml = renderToHtml(HtmlIdGeneratorPrefix);
+
+const HtmlIdGeneratorSuffixSource = require('!!raw-loader!./htmlIdGeneratorSuffix');
+const HtmlIdGeneratorSuffixHtml = renderToHtml(HtmlIdGeneratorSuffix);
+
+const PrefixSufixSource = require('!!raw-loader!./bothPrefixSuffix');
+const PrefixSufixHtml = renderToHtml(PrefixSufix);
+
+export const HtmlIdGeneratorExample = {
+  title: 'Html Id Generator',
+  sections: [
+    {
+      title: 'Id Generator',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: htmlIdGeneratorSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: htmlIdGeneratorHtml,
+        },
+      ],
+      text: (
+        <p>
+          Use <EuiCode>HtmlIdGenerator</EuiCode> to generate unique ID and avoid
+          accessibility issues.
+        </p>
+      ),
+      demo: <IdGenerator />,
+    },
+    {
+      title: 'Id Generator with prefix',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: htmlIdGeneratorPrefixSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: htmlIdGeneratorPrefixHtml,
+        },
+      ],
+      text: (
+        <p>
+          Provide <EuiCode>prefix</EuiCode> to generator to get ID with a
+          specific prefix.
+        </p>
+      ),
+      demo: <HtmlIdGeneratorPrefix />,
+    },
+    {
+      title: 'Id Generator with suffix',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: HtmlIdGeneratorSuffixSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: HtmlIdGeneratorSuffixHtml,
+        },
+      ],
+      text: (
+        <p>
+          Provide <EuiCode>suffix</EuiCode> to generator to get ID with a
+          specific suffix.
+        </p>
+      ),
+      demo: <HtmlIdGeneratorSuffix />,
+    },
+    {
+      title: 'Id Generator with both prefix and sufix',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: PrefixSufixSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: PrefixSufixHtml,
+        },
+      ],
+      text: (
+        <p>
+          HtmlIdGenerator is caplable of generating ID with specific prefix and
+          suffix.
+        </p>
+      ),
+      demo: <PrefixSufix />,
+    },
+  ],
+};