@zohodesk/components 1.0.0-alpha-242 → 1.0.0-alpha-245

package/docs/src/index.js

@@ -1,1311 +1,1311 @@
-var Component = window.Component;
-var ReactDOM = Component.ReactDOM;
-var React = Component.React;
-import PropTypes from "prop-types";
-
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selected:
-        window.location.hash != ""
-          ? window.location.hash.split("/")[0].split("#")[1]
-          : "gettingStarted",
-      theme: "theme1",
-      selectedCom:
-        window.location.hash != "" ? window.location.hash.split("/")[1] : "",
-
-      selectedIconComponent:
-        window.location.hash != "" ? window.location.hash.split("/")[1] : ""
-    };
-    this.selectTab = this.selectTab.bind(this);
-    this.themeChoosing = this.themeChoosing.bind(this);
-    this.selectComponent = this.selectComponent.bind(this);
-    this.onSelectIconComponent = this.onSelectIconComponent.bind(this);
-    this.setTooltipRef = this.setTooltipRef.bind(this);
-  }
-  selectComponent(comp, isScroll) {
-    if (isScroll) {
-      history.replaceState("", "", "#components/" + comp);
-    } else {
-      window.location.hash = "components/" + comp;
-    }
-    this.setState({ selectedCom: comp });
-  }
-  selectTab(tab) {
-    window.location.hash = tab;
-    this.setState({ selected: tab });
-  }
-
-  themeChoosing(theme) {
-    this.selectTab("designTokens");
-    this.setState({ theme: theme });
-  }
-
-  onSelectIconComponent(selectedIconComponent) {
-    this.setState({ selectedIconComponent: selectedIconComponent });
-  }
-
-  setTooltipRef(ref) {
-    this.tooltipRef = ref;
-  }
-  render() {
-    let { selected, theme, selectedCom, selectedIconComponent } = this.state;
-
-    let renderComp = {};
-    Object.keys(Component).forEach(val => {
-      let out =
-        val.indexOf("__") != -1 ||
-        val == "React" ||
-        val == "ReactDOM" ||
-        val == "renderToStaticMarkup"
-          ? false
-          : true;
-      if (
-        val.indexOf("__") != -1 &&
-        Component[val.split("__")[0]].docs.external
-      ) {
-        if (renderComp[val.split("__")[0]] == undefined) {
-          renderComp[val.split("__")[0]] = [];
-        }
-        renderComp[val.split("__")[0]].push(val);
-      }
-    });
-
-    selectedCom = selectedCom ? selectedCom : Object.keys(renderComp)[0];
-
-    let fonticonlist = [];
-    Component &&
-      Object.keys(Component).map(name => {
-        if (name.indexOf("FontIcon__") != -1 && name != "FontIcon__All") {
-          fonticonlist.push(name.split("__")[1]);
-        }
-      });
-
-    selectedIconComponent = selectedIconComponent
-      ? selectedIconComponent
-      : fonticonlist[0];
-    let renderCompIcon =
-      Component[selectedIconComponent + "FontIcon__" + selectedIconComponent];
-    let Tooltip = Component.Tooltip ? Component.Tooltip : null;
-    return (
-      <div onMouseOver={e => this.tooltipRef && this.tooltipRef.handleOver(e)}>
-        <div>
-          <div className="main dflexCol">
-            {Component.Tooltip && (
-              <Component.Tooltip ref={this.setTooltipRef} />
-            )}
-
-            <Header
-              onSelect={this.selectTab}
-              selected={selected}
-              themeChoosing={this.themeChoosing}
-              theme={theme}
-            />
-
-            {selected == "components" ? (
-              <div className="container dflexRow flex1">
-                <LeftPanel
-                  module="components"
-                  dummy={true}
-                  list={Object.keys(renderComp)}
-                  selectComponent={this.selectComponent}
-                  selectedCom={selectedCom}
-                />
-                <RightPanel
-                  module="components"
-                  selectedCom={selectedCom}
-                  renderComp={renderComp}
-                  selectComponent={this.selectComponent}
-                />
-              </div>
-            ) : null}
-
-            {selected == "gettingStarted" ? (
-              <div className="container dflexRow flex1">
-                <GettingStarted />
-              </div>
-            ) : null}
-
-            {selected == "accessibility" ? (
-              <div className="container dflexRow flex1">
-                <Accessibility />
-              </div>
-            ) : null}
-
-            {selected == "designTokens" ? (
-              <div className="container dflexRow flex1">
-                <DesignTokens theme={theme} />
-              </div>
-            ) : null}
-
-            {selected == "utilities" ? (
-              <div className="container dflexRow flex1">
-                <Utilities theme={theme} />
-              </div>
-            ) : null}
-
-            {selected == "icons" ? (
-              <div className="container dflexRow flex1">
-                <LeftPanel
-                  module="icons"
-                  list={fonticonlist}
-                  selectComponent={this.onSelectIconComponent}
-                  selectedCom={selectedIconComponent}
-                />
-
-                <IconComponentRender
-                  component={renderCompIcon}
-                  heading={selectedIconComponent}
-                />
-              </div>
-            ) : null}
-
-            {selected == "faq" ? (
-              <div className="container dflexRow flex1">
-                <div className="faqs">FAQS Coming soon..</div>
-              </div>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-class IconComponentRender extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { component, heading } = this.props;
-    let RenderComponent = component ? component : null;
-    return (
-      <div className="rightPanel flex1">
-        <div className="iconCont">
-          <h1 className="compName">
-            {heading.replace(/([A-Z])/g, "  $1").trim()}
-          </h1>
-          <div className="codeHint">
-            <div>
-              {" "}
-              {"import " +
-                heading +
-                "FontIcon from @zohodesk/components/lib/FontIcon/" +
-                heading +
-                "FontIcon"}{" "}
-            </div>
-            <div>
-              {" "}
-              {"<" + heading + 'FontIcon name="iconName" size="small"/> '}{" "}
-            </div>
-          </div>
-          <div className="wicon">
-            {RenderComponent ? (
-              <RenderComponent CopyComp={CopyTextComp} />
-            ) : null}
-          </div>{" "}
-        </div>
-      </div>
-    );
-  }
-}
-
-class Header extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      popup: false,
-      toggleMenuTop: false,
-      rtlView: false
-    };
-    this.popupToggle = this.popupToggle.bind(this);
-    this.popupHide = this.popupHide.bind(this);
-    this.toggleMenu = this.toggleMenu.bind(this);
-    this.removeClose = this.removeClose.bind(this);
-  }
-  componentWillMount() {
-    document.addEventListener("click", this.popupHide);
-  }
-  componentWillUnmount() {
-    document.removeEventListener("click", this.popupHide);
-  }
-  popupToggle(e) {
-    this.setState({ popup: !this.state.popup });
-    this.removeClose(e);
-  }
-  popupHide() {
-    this.setState({ popup: false });
-    this.setState({ toggleMenuTop: false });
-  }
-  removeClose(e) {
-    e.stopPropagation && e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation &&
-      e.nativeEvent.stopImmediatePropagation();
-  }
-  toggleMenu() {
-    this.setState({ toggleMenuTop: !this.state.toggleMenuTop });
-  }
-  onClickRtl() {
-    this.setState({ rtlView: !this.state.rtlView });
-    if (!this.state.rtlView) {
-      document.querySelector("html").setAttribute("dir", "rtl");
-    } else {
-      document.querySelector("html").setAttribute("dir", "ltr");
-    }
-  }
-  render() {
-    let { onSelect, selected, themeChoosing, theme } = this.props;
-    let { popup, toggleMenuTop, rtlView } = this.state;
-    return (
-      <div className="header dflex">
-        <div className="headerLeftimg" />
-        <div className="hdrTabs">
-          <button
-            tabIndex="1"
-            className={selected == "gettingStarted" ? "activeTab" : ""}
-            onClick={onSelect.bind(this, "gettingStarted")}
-          >
-            Getting Started
-          </button>
-          <button
-            tabIndex="3"
-            className={selected == "designTokens" ? "activeTab" : ""}
-            onClick={onSelect.bind(this, "designTokens")}
-          >
-            Design Tokens
-          </button>
-
-          <button
-            tabIndex="4"
-            className={selected == "components" ? "activeTab" : ""}
-            onClick={onSelect.bind(this, "components")}
-          >
-            Components
-          </button>
-          <button
-            tabIndex="6"
-            className={selected == "icons" ? "activeTab" : ""}
-            onClick={onSelect.bind(this, "icons")}
-          >
-            Icons
-          </button>
-        </div>
-        <svg
-          className={rtlView ? "rtlIcnActv rtlIcn" : "rtlIcn"}
-          onClick={this.onClickRtl.bind(this, "rtl")}
-        >
-          <use xlinkHref="#icon-rtl" />
-        </svg>
-      </div>
-    );
-  }
-}
-
-class GettingStarted extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className="getting">
-        <div>
-          <div className="centerIcon">
-            <svg className="deskIcon">
-              <use xlinkHref="#icon-desk" />
-            </svg>
-          </div>
-          <div className="gettingHd">Zoho Desk Style Guide</div>
-          <div className="gtngDescrpt">
-            {
-              "You can use any Frontend framework to design your app. We have provided UI library to get ZohoDesk's UI in your app. Since you are using our UI library you can feel the ZohoDesk's UI experience in your app. We were using the components from our library to develop our product. So we hope you are happy with these components library. To get the UI similar to ZohoDesk we are providing CSS and React components and you can use that to develop your app."
-            }
-          </div>
-          <div className="mainObjSec">
-            <div>
-              The Main Objective of Zoho Desk help Component will be Provide{" "}
-            </div>
-            <ul>
-              <li>Semantic and Accessible component markup</li>
-              <li>Cross browser compatible CSS</li>
-              <li>Icons & Fonts</li>
-            </ul>
-          </div>
-          <div className="package">
-            We are exposing our components library based on{" "}
-            <span className="cssURLtext">
-              CDN URL
-              <div className="cdnUrl">
-                <span>
-                  https://localjs.zohostatic.com/support/zohodeskcomponent@0.0.0-alpha-0/dist/styles.css
-                </span>
-                <span id="cssURL" className="copyTxtHiden">
-                  https://localjs.zohostatic.com/support/zohodeskcomponent@0.0.0-alpha-0/dist/styles.css
-                </span>
-                <svg
-                  className="cpyIcnCmn cpyCdn"
-                  onClick={selectText.bind(this, "cssURL")}
-                >
-                  <use xlinkHref="#icon-copy" />
-                </svg>
-              </div>
-            </span>{" "}
-            and{" "}
-            <span>
-              <span>
-                NPM Package( npm install @zohodesk/components
-                <span id="npminstall" className="copyTxtHiden">
-                  npm install @zohodesk/components
-                </span>
-                <svg
-                  className="cpyNpm"
-                  onClick={selectText.bind(this, "npminstall")}
-                >
-                  <use xlinkHref="#icon-copy" />
-                </svg>{" "}
-                )
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-class Accessibility extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className="accessBG">
-        <div className="accessibility">
-          <div className="accessR">
-            <div className="accessHead">Overview</div>
-            <div className="accessCon">
-              To address the people with disabilities,We are compliance with
-              accessible Rich Indent applicatiopns (ARIA)
-            </div>
-          </div>
-
-          <div className="accessR">
-            <div className="accessHead">KeyBoard Navigations</div>
-            <div className="accessCon">
-              While we do not provide the JavaScript that is necessary to make
-              our components interactive, in the Accessibility Patterns, we
-              provide working examples of basic patterns with documentation on
-              what interactions are required. There is also advice in the
-              individual component’s documentation on how to create
-              keyboard-accessible components.
-            </div>
-          </div>
-
-          <div className="accessR">
-            <div className="accessHead">Accessible Forms</div>
-            <div className="accessCon">
-              Our forms offer proper use of "fieldset" and "legend" tags as well
-              as appropriate labeling for input controls. Our radio button and
-              checkbox controls provide a balanced solution that offers
-              accessibility as well as design flexibility.
-            </div>
-          </div>
-
-          <div className="accessR">
-            <div className="accessHead">Appropriate use of color</div>
-            <div className="accessCon">
-              Our components follow the two main rules of accessibility as it
-              relates to color:
-              <p>
-                We never use color as the only means of providing information or
-                requesting an action.
-              </p>
-              <p>
-                The combinations of text and their background colors do not fall
-                below the WCAG recommended threshold ratio of 4.5:1 for
-                standard.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-class DesignTokens extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedCom:
-        window.location.hash != "" ? window.location.hash.split("/")[1] : ""
-    };
-    this.selectComponent = this.selectComponent.bind(this);
-  }
-  selectComponent(comp) {
-    window.location.hash = "designTokens/" + comp;
-    this.setState({ selectedCom: comp });
-  }
-  render() {
-    let { theme } = this.props;
-    let { selectedCom } = this.state;
-    let menuList = ["Background Color", "Text Color", "Border Color", "Shadow"];
-
-    // 'Opacity',
-    // 'Line Height',
-    // 'Spacing',
-    // 'Radius',
-    // 'Sizing',
-    // 'Time',
-    // 'Media Query',
-    // 'Z-Index'
-    //'Font',
-    //'Font Size'
-
-    selectedCom = selectedCom ? selectedCom : menuList[0];
-
-    selectedCom = decodeURI(selectedCom);
-    return (
-      <React.Fragment>
-        <LeftPanel
-          module="designTokens"
-          list={menuList}
-          selectedCom={selectedCom}
-          selectComponent={this.selectComponent}
-        />
-        <DesignTokenView theme={theme} selectedCom={selectedCom} />
-      </React.Fragment>
-    );
-  }
-}
-
-class Search extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      input: false
-    };
-    this.focusInput = this.focusInput.bind(this);
-    this.blurInput = this.blurInput.bind(this);
-  }
-  focusInput() {
-    this.setState({ input: true });
-  }
-  blurInput() {
-    this.setState({ input: false });
-  }
-
-  render() {
-    let { theme } = this.props;
-    let { input } = this.state;
-    return (
-      <div className={input ? "inputBox inputBoxFocus" : "inputBox"}>
-        <svg
-          className={input ? "icon icon-search inSearch" : "icon icon-search"}
-        >
-          <use xlinkHref="#icon-search" />
-        </svg>
-        <input type="text" onFocus={this.focusInput} onBlur={this.blurInput} />
-      </div>
-    );
-  }
-}
-
-class CopyTextComp extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isCopied: false
-    };
-    this.onCopy = this.onCopy.bind(this);
-    this.onCopied = this.onCopied.bind(this);
-  }
-  onCopy(copyTxt) {
-    this.setState({
-      isCopied: true
-    });
-    selectText(copyTxt);
-  }
-
-  onCopied() {
-    let element = this.element;
-    this.setState({
-      isCopied: false
-    });
-    element.removeEventListener("webkitAnimationEnd", this.onCopied);
-    element.removeEventListener("animationend", this.onCopied);
-  }
-
-  componentDidUpdate() {
-    let element = this.element;
-    element && element.addEventListener("webkitAnimationEnd", this.onCopied);
-    element && element.addEventListener("animationend", this.onCopied);
-  }
-
-  render() {
-    let { isCopy, copyTxt } = this.props;
-    let { isCopied } = this.state;
-    return (
-      <div
-        className={isCopied ? "copyDv isCopied" : "copyDv"}
-        onClick={this.onCopy.bind(this, copyTxt)}
-      >
-        <div id={copyTxt} className="copyTxtHiden">
-          {copyTxt}
-        </div>
-        <div className="cpyBtn">Copy</div>
-        {isCopied && (
-          <div
-            ref={ele => {
-              this.element = ele;
-            }}
-            className="copiedTxt"
-          >
-            Copied!
-          </div>
-        )}
-      </div>
-    );
-  }
-}
-CopyTextComp.propTypes = {
-  isCopy: PropTypes.bool,
-  copyTxt: PropTypes.string
-};
-
-class DesignTokenView extends React.Component {
-  constructor(props) {
-    super(props);
-    this.setTooltipRef = this.setTooltipRef.bind(this);
-  }
-  componentDidMount() {
-    let fontsizecom = Component["FontSize"];
-    fontsizecom &&
-      ReactDOM.render(
-        React.createElement(fontsizecom),
-        document.getElementById("fontsize")
-      );
-  }
-
-  setTooltipRef(ref) {
-    this.tooltipRef = ref;
-  }
-
-  render() {
-    let { theme, module, selectedCom } = this.props;
-    var backgroundColor = designTokens[theme]["backgroundColor"] || {};
-    var textColor = designTokens[theme]["textColor"] || {};
-    var borderColor = designTokens[theme]["borderColor"] || {};
-    var shadowColor = designTokens[theme]["shadowColor"] || {};
-    let Tooltip = Component.Tooltip ? Component.Tooltip : null;
-
-    return (
-      <div
-        className="rightPanel flex1"
-        onMouseOver={e => this.tooltipRef && this.tooltipRef.handleOver(e)}
-      >
-        <Tooltip ref={this.setTooltipRef} />
-
-        <div className="designTokenDet">
-          {selectedCom == "Background Color" ? (
-            <React.Fragment>
-              {
-                // <h2 className="compName" id="designTokens/Background Color">
-                //   Background Colors
-                // </h2>
-              }
-              <div className="renderContent">
-                Use these CSS variables for Background colors.
-              </div>
-              {Object.keys(backgroundColor).map((color, i) => {
-                return (
-                  <div key={i} className="colorShow clipBoard">
-                    <div
-                      style={{ background: backgroundColor[color] }}
-                      className="colorDv"
-                    />
-                    <div className="colorName">
-                      <div data-title={color}> {color} </div>
-                      <div data-title={backgroundColor[color]}>
-                        {" "}
-                        {backgroundColor[color]}{" "}
-                      </div>
-                    </div>
-                    <CopyTextComp copyTxt={`var(${color})`} />
-                  </div>
-                );
-              })}
-            </React.Fragment>
-          ) : null}
-
-          {selectedCom == "Text Color" ? (
-            <React.Fragment>
-              {
-                // <h2 className="compName" id="designTokens/Text Color">
-                //   Text Colors
-                // </h2>
-              }
-              <div className="renderContent">
-                <p>Use these CSS variables for Text colors.</p>
-              </div>
-              {Object.keys(textColor).map((color, i) => {
-                return (
-                  <div key={i} className="colorShow clipBoard">
-                    <div id={color} className="copyTxtHiden">
-                      {" "}
-                      {color}
-                    </div>
-                    <div
-                      style={{ background: textColor[color] }}
-                      className="colorDv"
-                    />
-                    <div className="colorName">
-                      <div data-title={color}> {color} </div>
-                      <div data-title={textColor[color]}>
-                        {" "}
-                        {textColor[color]}{" "}
-                      </div>
-                    </div>
-                    <CopyTextComp copyTxt={`color:var(${color})`} />
-                  </div>
-                );
-              })}
-            </React.Fragment>
-          ) : null}
-
-          {selectedCom == "Border Color" ? (
-            <React.Fragment>
-              {
-                // <h2 className="compName" id="designTokens/Border Color">
-                //   Border Colors
-                // </h2>
-              }
-              <div className="renderContent">
-                <p>Use these CSS variables for Border colors.</p>
-              </div>
-              {Object.keys(borderColor).map((color, i) => {
-                return (
-                  <div key={i} className="colorShow clipBoard">
-                    <div id={color} className="copyTxtHiden">
-                      {" "}
-                      {color}
-                    </div>
-                    <div
-                      style={{ background: borderColor[color] }}
-                      className="colorDv"
-                    />
-                    <div className="colorName">
-                      <div data-title={color}> {color} </div>
-                      <div data-title={borderColor[color]}>
-                        {" "}
-                        {borderColor[color]}{" "}
-                      </div>
-                    </div>
-                    <CopyTextComp copyTxt={`var(${color})`} />
-                  </div>
-                );
-              })}
-            </React.Fragment>
-          ) : null}
-
-          {selectedCom == "Shadow" ? (
-            <React.Fragment>
-              {
-                // <h2 className="compName" id="designTokens/Shadow">
-                //   Shadow Colors
-                // </h2>
-              }
-              <div className="renderContent">
-                <p>Use these CSS variables for Shadow colors.</p>
-              </div>
-              {Object.keys(shadowColor).map((color, i) => {
-                return (
-                  <div key={i} className="colorShow clipBoard">
-                    <div id={color} className="copyTxtHiden">
-                      {" "}
-                      {color}
-                    </div>
-                    <div
-                      style={{ background: shadowColor[color] }}
-                      className="colorDv"
-                    />
-                    <div className="colorName">
-                      <div data-title={color}> {color} </div>
-                      <div data-title={shadowColor[color]}>
-                        {" "}
-                        {shadowColor[color]}{" "}
-                      </div>
-                    </div>
-                    <CopyTextComp copyTxt={`var(${color})`} />
-                  </div>
-                );
-              })}
-            </React.Fragment>
-          ) : null}
-
-          {selectedCom == "Font Size" ? (
-            <div>
-              <h2 className="compName" id="designTokens/Font Size">
-                Font Size
-              </h2>
-              <div className="renderContent">
-                <p>Use these tokens for Font Size only.</p>
-              </div>
-              <div className="bgColors">
-                <div id="fontsize" />
-              </div>
-            </div>
-          ) : null}
-        </div>
-      </div>
-    );
-  }
-}
-
-class Utilities extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedCom:
-        window.location.hash != "" ? window.location.hash.split("/")[1] : ""
-    };
-    this.selectComponent = this.selectComponent.bind(this);
-  }
-  selectComponent(comp) {
-    window.location.hash = "utilities/" + comp;
-    this.setState({ selectedCom: comp });
-  }
-
-  render() {
-    let { list } = this.props;
-    let { selectedCom } = this.state;
-    var utilitiesList = [
-      "Alignment",
-      "Borders",
-      "Box",
-      "Margin",
-      "Padding",
-      "Floats",
-      "Grid",
-      "Horizontal List",
-      "Interactions",
-      "Layout",
-      "Position"
-    ];
-    return (
-      <LeftPanel
-        module="utilities"
-        selectedCom={selectedCom}
-        list={utilitiesList}
-        selectComponent={this.selectComponent}
-      />
-    );
-  }
-}
-
-class LeftPanel extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      toggleLeft: false
-    };
-    this.toggleLeftBar = this.toggleLeftBar.bind(this);
-    this.mobLeftHide = this.mobLeftHide.bind(this);
-  }
-  toggleLeftBar() {
-    this.setState({ toggleLeft: !this.state.toggleLeft });
-  }
-  mobLeftHide(name) {
-    this.setState({ toggleLeft: false });
-    this.props.selectComponent(name);
-  }
-  componentDidUpdate() {
-    let ele = this.leftPanel.getElementsByClassName("compAct")[0];
-
-    if (ele) {
-      let top = ele.getBoundingClientRect().top;
-      if (top < 56) {
-        this.leftPanel.scrollTop = ele.offsetTop - this.leftPanel.offsetTop;
-      } else if (top > window.innerHeight - 100) {
-        this.leftPanel.scrollTop = ele.offsetTop + window.innerHeight - 100;
-      }
-    }
-  }
-  render() {
-    let { list, selectComponent, selectedCom, dummy, module } = this.props;
-    let { toggleLeft } = this.state;
-
-    return (
-      <div
-        className={toggleLeft ? "leftPanel leftPanelShow" : "leftPanel"}
-        ref={leftPanel => {
-          this.leftPanel = leftPanel;
-        }}
-      >
-        {list.map((name, i) => {
-          return (
-            <a
-              className={selectedCom == name ? "compAct" : "comp"}
-              key={i}
-              href={"#" + module + "/" + name}
-              onClick={this.mobLeftHide.bind(this, name)}
-            >
-              {name}
-            </a>
-          );
-        })}
-      </div>
-    );
-  }
-}
-
-class RightPanel extends React.Component {
-  constructor(props) {
-    super(props);
-    // this.htmlCode = this.htmlCode.bind(this);
-    this.stopEvent = this.stopEvent.bind(this);
-    this.scrollCom = this.scrollCom.bind(this);
-  }
-
-  stopEvent(e) {
-    e.preventDefault();
-  }
-
-  // htmlCode(name) {
-  //   var code = Component.renderToStaticMarkup(
-  //     React.createElement(Component[name])
-  //   );
-
-  //   document.getElementById('html' + name).value = global.process(code);
-
-  //   if (
-  //     typeof CodeMirror !== 'undefined' &&
-  //     document.getElementById('html' + name)
-  //   ) {
-  //     CodeMirror.fromTextArea(document.getElementById('html' + name), {
-  //       lineNumbers: false,
-  //       styleActiveLine: false,
-  //       matchBrackets: false,
-  //       theme: 'blackboard',
-  //       readOnly: true
-  //     });
-  //   }
-
-  //   let stopAHref = document.querySelectorAll('.renderCom a');
-  //   stopAHref.forEach(ele => {
-  //     ele.addEventListener('click', this.stopEvent);
-  //   });
-  // }
-
-  scrollCom(e) {
-    let child = e.target.childNodes || {};
-    let { selectedCom, selectComponent } = this.props;
-
-    Object.keys(child).forEach(val => {
-      if (
-        child[val].getBoundingClientRect().top < 54 &&
-        child[val].getBoundingClientRect().top > 0
-      ) {
-        let comp = child[val].getAttribute("id").split("/")[1];
-        selectedCom !== comp ? selectComponent(comp, true) : null;
-      }
-    });
-  }
-
-  render() {
-    let { selectedCom, renderComp, module } = this.props;
-    return (
-      <div className="rightPanel flex1">
-        {Object.keys(renderComp).map((comName, i) => {
-          let description =
-            Component[comName].docs && Component[comName].docs.description
-              ? Component[comName].docs.description
-              : "No description for " + comName;
-
-          let rendering = false;
-          renderComp[comName].forEach((sub, k) => {
-            let a = sub.split("__")[0];
-            rendering = a == selectedCom ? true : false;
-          });
-
-          if (rendering) {
-            let propsObj =
-              (Component &&
-                Component[selectedCom] &&
-                // eslint-disable-next-line react/forbid-foreign-prop-types
-                Component[selectedCom].propTypes) ||
-              {};
-            let propsObjDesc =
-              (Component &&
-                Component[selectedCom] &&
-                Component[selectedCom].propTypesDescription) ||
-              {};
-            let currentCompProps = Object.keys(propsObjDesc) || [];
-            let currentCompDefault =
-              (Component[selectedCom] && Component[selectedCom].defaultProps) ||
-              {};
-
-            let additinonalDesc =
-              (Component[selectedCom].docs.additionalDescription &&
-                Component[selectedCom].docs.additionalDescription) ||
-              null;
-
-            return (
-              <div key={i} className="renderCom" id={module + "/" + comName}>
-                <h1 className="compName">{comName}</h1>
-                <p className="compDesc">{description}</p>
-
-                <div dangerouslySetInnerHTML={{ __html: additinonalDesc }} />
-
-                {
-                  // {PlayGround ? (
-                  //   <div className="playGround">
-                  //     <PlayGround propsObj={propsObj} RenderCode={Component[comName] } currentCompDefault={currentCompDefault}/>
-                  //   </div>
-                  // ) : null}
-                }
-                {
-                  // let PlayGround =
-                  //   renderComp[comName].indexOf(comName + '__PlayGround') == -1
-                  //     ? null
-                  //     : Component[comName + '__PlayGround'];
-                }
-
-                {renderComp[comName].map((states, j) => {
-                  let srcReact =
-                    Component[states].docs && Component[states].docs.source
-                      ? Component[states].docs.source
-                      : "no Code";
-                  let descr =
-                    Component[states].docs && Component[states].docs.description
-                      ? Component[states].docs.description
-                      : "No description for " + states.split("__")[1];
-
-                  if (states.split("__")[1] != "PlayGround") {
-                    return (
-                      <StateComponent
-                        key={j}
-                        states={states}
-                        descr={descr}
-                        srcReact={srcReact}
-                        renCode={Component[states]}
-                      />
-                    );
-                  } else {
-                    return null;
-                  }
-                })}
-                {Object.keys(currentCompProps).length ? (
-                  <div>
-                    <div className="proprti">Properties</div>
-                    <div className="propTable">
-                      <div className="tableHeader dflexRow">
-                        <span className="brR">PropsName</span>
-                        <span className="brR">Type</span>
-                        <span className="brR">isRequired</span>
-                        <span className="brR bn">Default Props</span>
-                        <span className="brR bn">Description</span>
-                      </div>
-
-                      {currentCompProps.length &&
-                        currentCompProps.map((value, i) => {
-                          let hookArray = [];
-                          if (
-                            propsObj[value] &&
-                            propsObj[value].hookType &&
-                            (propsObj[value].hookType.indexOf("enum") != -1 ||
-                              propsObj[value].hookType.indexOf("union") != -1)
-                          ) {
-                            let uni = "";
-                            if (
-                              propsObj[value].hookType.indexOf("union") != -1
-                            ) {
-                              let val = propsObj[value].hookType;
-                              let a = val.replace("union", "");
-                              a = a.replace("]", "");
-                              a = a.replace("[", "");
-                              uni = a.split(",");
-                            }
-
-                            hookArray =
-                              propsObj[value].hookType.indexOf("enum") != -1
-                                ? JSON.parse(
-                                    propsObj[value].hookType.replace("enum", "")
-                                  )
-                                : uni;
-                          }
-
-                          return (
-                            <div
-                              className={
-                                currentCompProps.length - 1 == i
-                                  ? "tableHeaderNB dflexRow"
-                                  : "tableHeader dflexRow"
-                              }
-                              key={i}
-                            >
-                              <span>
-                                <div>{value}</div>
-                              </span>
-                              <span>
-                                <div>
-                                  {hookArray.length
-                                    ? hookArray.map((value, i) => {
-                                        return (
-                                          <div className="hookOneof" key={i}>
-                                            {value}
-                                          </div>
-                                        );
-                                      })
-                                    : propsObj[value] &&
-                                      propsObj[value].hookType}
-                                </div>
-                              </span>
-                              <span>
-                                <div>
-                                  {propsObj[value] && propsObj[value].isRequired
-                                    ? "false"
-                                    : "true"}
-                                </div>
-                              </span>
-                              <span>
-                                <div className="bn">
-                                  {JSON.stringify(currentCompDefault[value])
-                                    ? JSON.stringify(currentCompDefault[value])
-                                    : "-"}
-                                </div>
-                              </span>
-                              <span>
-                                <div className="bn">
-                                  {propsObjDesc[value] && propsObjDesc[value]}
-                                </div>
-                              </span>
-                            </div>
-                          );
-                        })}
-                    </div>
-                  </div>
-                ) : null}
-              </div>
-            );
-          } else {
-            return null;
-          }
-        })}
-      </div>
-    );
-  }
-}
-// class PlayGround  extends React.Component {
-//   constructor(props) {
-//     super(props);
-//     this.state = { propsObject : props.currentCompDefault }
-//   }
-//   onChangeInput(name,e)
-//   {
-//     let propsObject = this.state.propsObject
-//     propsObject[name] = e.target.value
-//     this.setState({propsObject : propsObject })
-//   }
-//   render()
-//   {
-//     let {RenderCode,propsObj } = this.props
-//     let {propsObject} = this.state;
-//      return (
-//
-//       <div>
-//         <RenderCode {...propsObject}/>
-//
-//         {
-//           Object.keys(propsObj).map((name)=>{
-//             if( propsObj[name].hookType == "string")
-//             {
-//               return (<span>
-//                             <label>{name}</label>
-//                             <input onChange={this.onChangeInput.bind(this,name)}></input>
-//                       </span>)
-//             }
-//             else {
-//               return null
-//             }
-//
-//           })
-//         }
-//       </div>
-//     )
-//   }
-// }
-//
-
-class StateComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      codeView: false,
-      codeTabView: "react"
-    };
-    this.codePreview = this.codePreview.bind(this);
-  }
-  codePreview() {
-    this.setState({ codeView: !this.state.codeView });
-  }
-
-  componentDidMount() {
-    let { states, htmlCode, renCode: RenderCode } = this.props;
-    // if (typeof CodeMirror !== 'undefined' && document.getElementById(states)) {
-    //   CodeMirror.fromTextArea(document.getElementById(states), {
-    //     lineNumbers: false,
-    //     styleActiveLine: false,
-    //     matchBrackets: false,
-    //     theme: 'blackboard',
-    //     readOnly: true
-    //   });
-    // }
-
-    RenderCode &&
-      ReactDOM.render(
-        <CodeExtractContext.Provider value={{ isCodeExtract: true }}>
-          <RenderCode />
-        </CodeExtractContext.Provider>,
-        document.getElementById(states + "view")
-        // htmlCode(states)
-      );
-  }
-
-  onTabChange(text) {
-    this.setState({ codeTabView: text });
-  }
-
-  render() {
-    let { states, descr, renCode, htmlCode, srcReact } = this.props;
-    let { codeView, codeTabView } = this.state;
-    return (
-      <div className="renderPart">
-        <div>
-          <span className="stateName">{states.split("__")[1]}</span>
-          <label className="codeToggle">
-            <input type="checkbox" onClick={this.codePreview} />
-            <div>
-              <div>&lt;/&gt;</div>
-            </div>
-          </label>
-        </div>
-        <div className="renDes">{descr}</div>
-        <div className="renderArea" id={states + "view"}>
-          states
-        </div>
-        <div className={codeView ? "codeView" : "codeArea"}>
-          <div className="borderTab">
-            <div className="codeTabWrap">
-              <span
-                className={codeTabView == "react" ? "activeTabCode" : ""}
-                onClick={this.onTabChange.bind(this, "react")}
-              >
-                React Code
-              </span>
-              <span
-                className={codeTabView == "html" ? "activeTabCode" : ""}
-                onClick={this.onTabChange.bind(this, "html")}
-              >
-                HTML Code
-              </span>
-            </div>
-
-            <div
-              className={
-                codeTabView == "react"
-                  ? "reactCode viewsubcode"
-                  : "reactCode hidecode"
-              }
-            >
-              {/* <textarea id={states} defaultValue={srcReact} name={states} /> */}
-            </div>
-
-            <div
-              className={
-                codeTabView == "html"
-                  ? "htmlCode viewsubcode"
-                  : "htmlCode hidecode"
-              }
-            >
-              {/* <textarea id={'html' + states} name={'html' + states} /> */}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-class KeyBoardShortcut extends React.Component {
-  constructor(props) {
-    super(props);
-    this.keyVal = "";
-    this.pressKey = this.pressKey.bind(this);
-    this.toggle = this.toggle.bind(this);
-    this.state = {
-      keyPress: false
-    };
-  }
-  componentDidMount() {
-    // document.addEventListener('keydown', this.pressKey);
-  }
-  toggle() {
-    var clr;
-    clr && clearTimeout(clr);
-    this.setState({ keyPress: true }, () => {
-      clr = setTimeout(() => {
-        this.setState({ keyPress: false });
-      }, 600);
-    });
-  }
-
-  pressKey(e) {
-    var key = e.keyCode;
-    this.keyVal = String.fromCharCode(key);
-    if (e.target.nodeName == "BODY") {
-      switch (key) {
-        case 65:
-          this.toggle();
-          this.props.onSelect("accessibility");
-          break;
-        case 67:
-          this.toggle();
-          this.props.onSelect("components");
-          break;
-        case 68:
-          this.toggle();
-          this.props.onSelect("designTokens");
-          break;
-        case 70:
-          this.toggle();
-          this.props.onSelect("faq");
-          break;
-        case 71:
-          this.toggle();
-          this.props.onSelect("gettingStarted");
-          break;
-        case 73:
-          this.toggle();
-          this.props.onSelect("icons");
-          break;
-        case 85:
-          this.toggle();
-          this.props.onSelect("utilities");
-          break;
-      }
-    }
-  }
-  render() {
-    return (
-      <div className={this.state.keyPress ? "keyBoard" : "hide"}>
-        <span>{this.keyVal}</span>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<App />, react);
+var Component = window.Component;
+var ReactDOM = Component.ReactDOM;
+var React = Component.React;
+import PropTypes from "prop-types";
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected:
+        window.location.hash != ""
+          ? window.location.hash.split("/")[0].split("#")[1]
+          : "gettingStarted",
+      theme: "theme1",
+      selectedCom:
+        window.location.hash != "" ? window.location.hash.split("/")[1] : "",
+
+      selectedIconComponent:
+        window.location.hash != "" ? window.location.hash.split("/")[1] : ""
+    };
+    this.selectTab = this.selectTab.bind(this);
+    this.themeChoosing = this.themeChoosing.bind(this);
+    this.selectComponent = this.selectComponent.bind(this);
+    this.onSelectIconComponent = this.onSelectIconComponent.bind(this);
+    this.setTooltipRef = this.setTooltipRef.bind(this);
+  }
+  selectComponent(comp, isScroll) {
+    if (isScroll) {
+      history.replaceState("", "", "#components/" + comp);
+    } else {
+      window.location.hash = "components/" + comp;
+    }
+    this.setState({ selectedCom: comp });
+  }
+  selectTab(tab) {
+    window.location.hash = tab;
+    this.setState({ selected: tab });
+  }
+
+  themeChoosing(theme) {
+    this.selectTab("designTokens");
+    this.setState({ theme: theme });
+  }
+
+  onSelectIconComponent(selectedIconComponent) {
+    this.setState({ selectedIconComponent: selectedIconComponent });
+  }
+
+  setTooltipRef(ref) {
+    this.tooltipRef = ref;
+  }
+  render() {
+    let { selected, theme, selectedCom, selectedIconComponent } = this.state;
+
+    let renderComp = {};
+    Object.keys(Component).forEach(val => {
+      let out =
+        val.indexOf("__") != -1 ||
+        val == "React" ||
+        val == "ReactDOM" ||
+        val == "renderToStaticMarkup"
+          ? false
+          : true;
+      if (
+        val.indexOf("__") != -1 &&
+        Component[val.split("__")[0]].docs.external
+      ) {
+        if (renderComp[val.split("__")[0]] == undefined) {
+          renderComp[val.split("__")[0]] = [];
+        }
+        renderComp[val.split("__")[0]].push(val);
+      }
+    });
+
+    selectedCom = selectedCom ? selectedCom : Object.keys(renderComp)[0];
+
+    let fonticonlist = [];
+    Component &&
+      Object.keys(Component).map(name => {
+        if (name.indexOf("FontIcon__") != -1 && name != "FontIcon__All") {
+          fonticonlist.push(name.split("__")[1]);
+        }
+      });
+
+    selectedIconComponent = selectedIconComponent
+      ? selectedIconComponent
+      : fonticonlist[0];
+    let renderCompIcon =
+      Component[selectedIconComponent + "FontIcon__" + selectedIconComponent];
+    let Tooltip = Component.Tooltip ? Component.Tooltip : null;
+    return (
+      <div onMouseOver={e => this.tooltipRef && this.tooltipRef.handleOver(e)}>
+        <div>
+          <div className="main dflexCol">
+            {Component.Tooltip && (
+              <Component.Tooltip ref={this.setTooltipRef} />
+            )}
+
+            <Header
+              onSelect={this.selectTab}
+              selected={selected}
+              themeChoosing={this.themeChoosing}
+              theme={theme}
+            />
+
+            {selected == "components" ? (
+              <div className="container dflexRow flex1">
+                <LeftPanel
+                  module="components"
+                  dummy={true}
+                  list={Object.keys(renderComp)}
+                  selectComponent={this.selectComponent}
+                  selectedCom={selectedCom}
+                />
+                <RightPanel
+                  module="components"
+                  selectedCom={selectedCom}
+                  renderComp={renderComp}
+                  selectComponent={this.selectComponent}
+                />
+              </div>
+            ) : null}
+
+            {selected == "gettingStarted" ? (
+              <div className="container dflexRow flex1">
+                <GettingStarted />
+              </div>
+            ) : null}
+
+            {selected == "accessibility" ? (
+              <div className="container dflexRow flex1">
+                <Accessibility />
+              </div>
+            ) : null}
+
+            {selected == "designTokens" ? (
+              <div className="container dflexRow flex1">
+                <DesignTokens theme={theme} />
+              </div>
+            ) : null}
+
+            {selected == "utilities" ? (
+              <div className="container dflexRow flex1">
+                <Utilities theme={theme} />
+              </div>
+            ) : null}
+
+            {selected == "icons" ? (
+              <div className="container dflexRow flex1">
+                <LeftPanel
+                  module="icons"
+                  list={fonticonlist}
+                  selectComponent={this.onSelectIconComponent}
+                  selectedCom={selectedIconComponent}
+                />
+
+                <IconComponentRender
+                  component={renderCompIcon}
+                  heading={selectedIconComponent}
+                />
+              </div>
+            ) : null}
+
+            {selected == "faq" ? (
+              <div className="container dflexRow flex1">
+                <div className="faqs">FAQS Coming soon..</div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+class IconComponentRender extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { component, heading } = this.props;
+    let RenderComponent = component ? component : null;
+    return (
+      <div className="rightPanel flex1">
+        <div className="iconCont">
+          <h1 className="compName">
+            {heading.replace(/([A-Z])/g, "  $1").trim()}
+          </h1>
+          <div className="codeHint">
+            <div>
+              {" "}
+              {"import " +
+                heading +
+                "FontIcon from @zohodesk/components/lib/FontIcon/" +
+                heading +
+                "FontIcon"}{" "}
+            </div>
+            <div>
+              {" "}
+              {"<" + heading + 'FontIcon name="iconName" size="small"/> '}{" "}
+            </div>
+          </div>
+          <div className="wicon">
+            {RenderComponent ? (
+              <RenderComponent CopyComp={CopyTextComp} />
+            ) : null}
+          </div>{" "}
+        </div>
+      </div>
+    );
+  }
+}
+
+class Header extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      popup: false,
+      toggleMenuTop: false,
+      rtlView: false
+    };
+    this.popupToggle = this.popupToggle.bind(this);
+    this.popupHide = this.popupHide.bind(this);
+    this.toggleMenu = this.toggleMenu.bind(this);
+    this.removeClose = this.removeClose.bind(this);
+  }
+  componentWillMount() {
+    document.addEventListener("click", this.popupHide);
+  }
+  componentWillUnmount() {
+    document.removeEventListener("click", this.popupHide);
+  }
+  popupToggle(e) {
+    this.setState({ popup: !this.state.popup });
+    this.removeClose(e);
+  }
+  popupHide() {
+    this.setState({ popup: false });
+    this.setState({ toggleMenuTop: false });
+  }
+  removeClose(e) {
+    e.stopPropagation && e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation &&
+      e.nativeEvent.stopImmediatePropagation();
+  }
+  toggleMenu() {
+    this.setState({ toggleMenuTop: !this.state.toggleMenuTop });
+  }
+  onClickRtl() {
+    this.setState({ rtlView: !this.state.rtlView });
+    if (!this.state.rtlView) {
+      document.querySelector("html").setAttribute("dir", "rtl");
+    } else {
+      document.querySelector("html").setAttribute("dir", "ltr");
+    }
+  }
+  render() {
+    let { onSelect, selected, themeChoosing, theme } = this.props;
+    let { popup, toggleMenuTop, rtlView } = this.state;
+    return (
+      <div className="header dflex">
+        <div className="headerLeftimg" />
+        <div className="hdrTabs">
+          <button
+            tabIndex="1"
+            className={selected == "gettingStarted" ? "activeTab" : ""}
+            onClick={onSelect.bind(this, "gettingStarted")}
+          >
+            Getting Started
+          </button>
+          <button
+            tabIndex="3"
+            className={selected == "designTokens" ? "activeTab" : ""}
+            onClick={onSelect.bind(this, "designTokens")}
+          >
+            Design Tokens
+          </button>
+
+          <button
+            tabIndex="4"
+            className={selected == "components" ? "activeTab" : ""}
+            onClick={onSelect.bind(this, "components")}
+          >
+            Components
+          </button>
+          <button
+            tabIndex="6"
+            className={selected == "icons" ? "activeTab" : ""}
+            onClick={onSelect.bind(this, "icons")}
+          >
+            Icons
+          </button>
+        </div>
+        <svg
+          className={rtlView ? "rtlIcnActv rtlIcn" : "rtlIcn"}
+          onClick={this.onClickRtl.bind(this, "rtl")}
+        >
+          <use xlinkHref="#icon-rtl" />
+        </svg>
+      </div>
+    );
+  }
+}
+
+class GettingStarted extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="getting">
+        <div>
+          <div className="centerIcon">
+            <svg className="deskIcon">
+              <use xlinkHref="#icon-desk" />
+            </svg>
+          </div>
+          <div className="gettingHd">Zoho Desk Style Guide</div>
+          <div className="gtngDescrpt">
+            {
+              "You can use any Frontend framework to design your app. We have provided UI library to get ZohoDesk's UI in your app. Since you are using our UI library you can feel the ZohoDesk's UI experience in your app. We were using the components from our library to develop our product. So we hope you are happy with these components library. To get the UI similar to ZohoDesk we are providing CSS and React components and you can use that to develop your app."
+            }
+          </div>
+          <div className="mainObjSec">
+            <div>
+              The Main Objective of Zoho Desk help Component will be Provide{" "}
+            </div>
+            <ul>
+              <li>Semantic and Accessible component markup</li>
+              <li>Cross browser compatible CSS</li>
+              <li>Icons & Fonts</li>
+            </ul>
+          </div>
+          <div className="package">
+            We are exposing our components library based on{" "}
+            <span className="cssURLtext">
+              CDN URL
+              <div className="cdnUrl">
+                <span>
+                  https://localjs.zohostatic.com/support/zohodeskcomponent@0.0.0-alpha-0/dist/styles.css
+                </span>
+                <span id="cssURL" className="copyTxtHiden">
+                  https://localjs.zohostatic.com/support/zohodeskcomponent@0.0.0-alpha-0/dist/styles.css
+                </span>
+                <svg
+                  className="cpyIcnCmn cpyCdn"
+                  onClick={selectText.bind(this, "cssURL")}
+                >
+                  <use xlinkHref="#icon-copy" />
+                </svg>
+              </div>
+            </span>{" "}
+            and{" "}
+            <span>
+              <span>
+                NPM Package( npm install @zohodesk/components
+                <span id="npminstall" className="copyTxtHiden">
+                  npm install @zohodesk/components
+                </span>
+                <svg
+                  className="cpyNpm"
+                  onClick={selectText.bind(this, "npminstall")}
+                >
+                  <use xlinkHref="#icon-copy" />
+                </svg>{" "}
+                )
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+class Accessibility extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="accessBG">
+        <div className="accessibility">
+          <div className="accessR">
+            <div className="accessHead">Overview</div>
+            <div className="accessCon">
+              To address the people with disabilities,We are compliance with
+              accessible Rich Indent applicatiopns (ARIA)
+            </div>
+          </div>
+
+          <div className="accessR">
+            <div className="accessHead">KeyBoard Navigations</div>
+            <div className="accessCon">
+              While we do not provide the JavaScript that is necessary to make
+              our components interactive, in the Accessibility Patterns, we
+              provide working examples of basic patterns with documentation on
+              what interactions are required. There is also advice in the
+              individual component’s documentation on how to create
+              keyboard-accessible components.
+            </div>
+          </div>
+
+          <div className="accessR">
+            <div className="accessHead">Accessible Forms</div>
+            <div className="accessCon">
+              Our forms offer proper use of "fieldset" and "legend" tags as well
+              as appropriate labeling for input controls. Our radio button and
+              checkbox controls provide a balanced solution that offers
+              accessibility as well as design flexibility.
+            </div>
+          </div>
+
+          <div className="accessR">
+            <div className="accessHead">Appropriate use of color</div>
+            <div className="accessCon">
+              Our components follow the two main rules of accessibility as it
+              relates to color:
+              <p>
+                We never use color as the only means of providing information or
+                requesting an action.
+              </p>
+              <p>
+                The combinations of text and their background colors do not fall
+                below the WCAG recommended threshold ratio of 4.5:1 for
+                standard.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+class DesignTokens extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedCom:
+        window.location.hash != "" ? window.location.hash.split("/")[1] : ""
+    };
+    this.selectComponent = this.selectComponent.bind(this);
+  }
+  selectComponent(comp) {
+    window.location.hash = "designTokens/" + comp;
+    this.setState({ selectedCom: comp });
+  }
+  render() {
+    let { theme } = this.props;
+    let { selectedCom } = this.state;
+    let menuList = ["Background Color", "Text Color", "Border Color", "Shadow"];
+
+    // 'Opacity',
+    // 'Line Height',
+    // 'Spacing',
+    // 'Radius',
+    // 'Sizing',
+    // 'Time',
+    // 'Media Query',
+    // 'Z-Index'
+    //'Font',
+    //'Font Size'
+
+    selectedCom = selectedCom ? selectedCom : menuList[0];
+
+    selectedCom = decodeURI(selectedCom);
+    return (
+      <React.Fragment>
+        <LeftPanel
+          module="designTokens"
+          list={menuList}
+          selectedCom={selectedCom}
+          selectComponent={this.selectComponent}
+        />
+        <DesignTokenView theme={theme} selectedCom={selectedCom} />
+      </React.Fragment>
+    );
+  }
+}
+
+class Search extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: false
+    };
+    this.focusInput = this.focusInput.bind(this);
+    this.blurInput = this.blurInput.bind(this);
+  }
+  focusInput() {
+    this.setState({ input: true });
+  }
+  blurInput() {
+    this.setState({ input: false });
+  }
+
+  render() {
+    let { theme } = this.props;
+    let { input } = this.state;
+    return (
+      <div className={input ? "inputBox inputBoxFocus" : "inputBox"}>
+        <svg
+          className={input ? "icon icon-search inSearch" : "icon icon-search"}
+        >
+          <use xlinkHref="#icon-search" />
+        </svg>
+        <input type="text" onFocus={this.focusInput} onBlur={this.blurInput} />
+      </div>
+    );
+  }
+}
+
+class CopyTextComp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isCopied: false
+    };
+    this.onCopy = this.onCopy.bind(this);
+    this.onCopied = this.onCopied.bind(this);
+  }
+  onCopy(copyTxt) {
+    this.setState({
+      isCopied: true
+    });
+    selectText(copyTxt);
+  }
+
+  onCopied() {
+    let element = this.element;
+    this.setState({
+      isCopied: false
+    });
+    element.removeEventListener("webkitAnimationEnd", this.onCopied);
+    element.removeEventListener("animationend", this.onCopied);
+  }
+
+  componentDidUpdate() {
+    let element = this.element;
+    element && element.addEventListener("webkitAnimationEnd", this.onCopied);
+    element && element.addEventListener("animationend", this.onCopied);
+  }
+
+  render() {
+    let { isCopy, copyTxt } = this.props;
+    let { isCopied } = this.state;
+    return (
+      <div
+        className={isCopied ? "copyDv isCopied" : "copyDv"}
+        onClick={this.onCopy.bind(this, copyTxt)}
+      >
+        <div id={copyTxt} className="copyTxtHiden">
+          {copyTxt}
+        </div>
+        <div className="cpyBtn">Copy</div>
+        {isCopied && (
+          <div
+            ref={ele => {
+              this.element = ele;
+            }}
+            className="copiedTxt"
+          >
+            Copied!
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+CopyTextComp.propTypes = {
+  isCopy: PropTypes.bool,
+  copyTxt: PropTypes.string
+};
+
+class DesignTokenView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.setTooltipRef = this.setTooltipRef.bind(this);
+  }
+  componentDidMount() {
+    let fontsizecom = Component["FontSize"];
+    fontsizecom &&
+      ReactDOM.render(
+        React.createElement(fontsizecom),
+        document.getElementById("fontsize")
+      );
+  }
+
+  setTooltipRef(ref) {
+    this.tooltipRef = ref;
+  }
+
+  render() {
+    let { theme, module, selectedCom } = this.props;
+    var backgroundColor = designTokens[theme]["backgroundColor"] || {};
+    var textColor = designTokens[theme]["textColor"] || {};
+    var borderColor = designTokens[theme]["borderColor"] || {};
+    var shadowColor = designTokens[theme]["shadowColor"] || {};
+    let Tooltip = Component.Tooltip ? Component.Tooltip : null;
+
+    return (
+      <div
+        className="rightPanel flex1"
+        onMouseOver={e => this.tooltipRef && this.tooltipRef.handleOver(e)}
+      >
+        <Tooltip ref={this.setTooltipRef} />
+
+        <div className="designTokenDet">
+          {selectedCom == "Background Color" ? (
+            <React.Fragment>
+              {
+                // <h2 className="compName" id="designTokens/Background Color">
+                //   Background Colors
+                // </h2>
+              }
+              <div className="renderContent">
+                Use these CSS variables for Background colors.
+              </div>
+              {Object.keys(backgroundColor).map((color, i) => {
+                return (
+                  <div key={i} className="colorShow clipBoard">
+                    <div
+                      style={{ background: backgroundColor[color] }}
+                      className="colorDv"
+                    />
+                    <div className="colorName">
+                      <div data-title={color}> {color} </div>
+                      <div data-title={backgroundColor[color]}>
+                        {" "}
+                        {backgroundColor[color]}{" "}
+                      </div>
+                    </div>
+                    <CopyTextComp copyTxt={`var(${color})`} />
+                  </div>
+                );
+              })}
+            </React.Fragment>
+          ) : null}
+
+          {selectedCom == "Text Color" ? (
+            <React.Fragment>
+              {
+                // <h2 className="compName" id="designTokens/Text Color">
+                //   Text Colors
+                // </h2>
+              }
+              <div className="renderContent">
+                <p>Use these CSS variables for Text colors.</p>
+              </div>
+              {Object.keys(textColor).map((color, i) => {
+                return (
+                  <div key={i} className="colorShow clipBoard">
+                    <div id={color} className="copyTxtHiden">
+                      {" "}
+                      {color}
+                    </div>
+                    <div
+                      style={{ background: textColor[color] }}
+                      className="colorDv"
+                    />
+                    <div className="colorName">
+                      <div data-title={color}> {color} </div>
+                      <div data-title={textColor[color]}>
+                        {" "}
+                        {textColor[color]}{" "}
+                      </div>
+                    </div>
+                    <CopyTextComp copyTxt={`color:var(${color})`} />
+                  </div>
+                );
+              })}
+            </React.Fragment>
+          ) : null}
+
+          {selectedCom == "Border Color" ? (
+            <React.Fragment>
+              {
+                // <h2 className="compName" id="designTokens/Border Color">
+                //   Border Colors
+                // </h2>
+              }
+              <div className="renderContent">
+                <p>Use these CSS variables for Border colors.</p>
+              </div>
+              {Object.keys(borderColor).map((color, i) => {
+                return (
+                  <div key={i} className="colorShow clipBoard">
+                    <div id={color} className="copyTxtHiden">
+                      {" "}
+                      {color}
+                    </div>
+                    <div
+                      style={{ background: borderColor[color] }}
+                      className="colorDv"
+                    />
+                    <div className="colorName">
+                      <div data-title={color}> {color} </div>
+                      <div data-title={borderColor[color]}>
+                        {" "}
+                        {borderColor[color]}{" "}
+                      </div>
+                    </div>
+                    <CopyTextComp copyTxt={`var(${color})`} />
+                  </div>
+                );
+              })}
+            </React.Fragment>
+          ) : null}
+
+          {selectedCom == "Shadow" ? (
+            <React.Fragment>
+              {
+                // <h2 className="compName" id="designTokens/Shadow">
+                //   Shadow Colors
+                // </h2>
+              }
+              <div className="renderContent">
+                <p>Use these CSS variables for Shadow colors.</p>
+              </div>
+              {Object.keys(shadowColor).map((color, i) => {
+                return (
+                  <div key={i} className="colorShow clipBoard">
+                    <div id={color} className="copyTxtHiden">
+                      {" "}
+                      {color}
+                    </div>
+                    <div
+                      style={{ background: shadowColor[color] }}
+                      className="colorDv"
+                    />
+                    <div className="colorName">
+                      <div data-title={color}> {color} </div>
+                      <div data-title={shadowColor[color]}>
+                        {" "}
+                        {shadowColor[color]}{" "}
+                      </div>
+                    </div>
+                    <CopyTextComp copyTxt={`var(${color})`} />
+                  </div>
+                );
+              })}
+            </React.Fragment>
+          ) : null}
+
+          {selectedCom == "Font Size" ? (
+            <div>
+              <h2 className="compName" id="designTokens/Font Size">
+                Font Size
+              </h2>
+              <div className="renderContent">
+                <p>Use these tokens for Font Size only.</p>
+              </div>
+              <div className="bgColors">
+                <div id="fontsize" />
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+class Utilities extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedCom:
+        window.location.hash != "" ? window.location.hash.split("/")[1] : ""
+    };
+    this.selectComponent = this.selectComponent.bind(this);
+  }
+  selectComponent(comp) {
+    window.location.hash = "utilities/" + comp;
+    this.setState({ selectedCom: comp });
+  }
+
+  render() {
+    let { list } = this.props;
+    let { selectedCom } = this.state;
+    var utilitiesList = [
+      "Alignment",
+      "Borders",
+      "Box",
+      "Margin",
+      "Padding",
+      "Floats",
+      "Grid",
+      "Horizontal List",
+      "Interactions",
+      "Layout",
+      "Position"
+    ];
+    return (
+      <LeftPanel
+        module="utilities"
+        selectedCom={selectedCom}
+        list={utilitiesList}
+        selectComponent={this.selectComponent}
+      />
+    );
+  }
+}
+
+class LeftPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      toggleLeft: false
+    };
+    this.toggleLeftBar = this.toggleLeftBar.bind(this);
+    this.mobLeftHide = this.mobLeftHide.bind(this);
+  }
+  toggleLeftBar() {
+    this.setState({ toggleLeft: !this.state.toggleLeft });
+  }
+  mobLeftHide(name) {
+    this.setState({ toggleLeft: false });
+    this.props.selectComponent(name);
+  }
+  componentDidUpdate() {
+    let ele = this.leftPanel.getElementsByClassName("compAct")[0];
+
+    if (ele) {
+      let top = ele.getBoundingClientRect().top;
+      if (top < 56) {
+        this.leftPanel.scrollTop = ele.offsetTop - this.leftPanel.offsetTop;
+      } else if (top > window.innerHeight - 100) {
+        this.leftPanel.scrollTop = ele.offsetTop + window.innerHeight - 100;
+      }
+    }
+  }
+  render() {
+    let { list, selectComponent, selectedCom, dummy, module } = this.props;
+    let { toggleLeft } = this.state;
+
+    return (
+      <div
+        className={toggleLeft ? "leftPanel leftPanelShow" : "leftPanel"}
+        ref={leftPanel => {
+          this.leftPanel = leftPanel;
+        }}
+      >
+        {list.map((name, i) => {
+          return (
+            <a
+              className={selectedCom == name ? "compAct" : "comp"}
+              key={i}
+              href={"#" + module + "/" + name}
+              onClick={this.mobLeftHide.bind(this, name)}
+            >
+              {name}
+            </a>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+class RightPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    // this.htmlCode = this.htmlCode.bind(this);
+    this.stopEvent = this.stopEvent.bind(this);
+    this.scrollCom = this.scrollCom.bind(this);
+  }
+
+  stopEvent(e) {
+    e.preventDefault();
+  }
+
+  // htmlCode(name) {
+  //   var code = Component.renderToStaticMarkup(
+  //     React.createElement(Component[name])
+  //   );
+
+  //   document.getElementById('html' + name).value = global.process(code);
+
+  //   if (
+  //     typeof CodeMirror !== 'undefined' &&
+  //     document.getElementById('html' + name)
+  //   ) {
+  //     CodeMirror.fromTextArea(document.getElementById('html' + name), {
+  //       lineNumbers: false,
+  //       styleActiveLine: false,
+  //       matchBrackets: false,
+  //       theme: 'blackboard',
+  //       readOnly: true
+  //     });
+  //   }
+
+  //   let stopAHref = document.querySelectorAll('.renderCom a');
+  //   stopAHref.forEach(ele => {
+  //     ele.addEventListener('click', this.stopEvent);
+  //   });
+  // }
+
+  scrollCom(e) {
+    let child = e.target.childNodes || {};
+    let { selectedCom, selectComponent } = this.props;
+
+    Object.keys(child).forEach(val => {
+      if (
+        child[val].getBoundingClientRect().top < 54 &&
+        child[val].getBoundingClientRect().top > 0
+      ) {
+        let comp = child[val].getAttribute("id").split("/")[1];
+        selectedCom !== comp ? selectComponent(comp, true) : null;
+      }
+    });
+  }
+
+  render() {
+    let { selectedCom, renderComp, module } = this.props;
+    return (
+      <div className="rightPanel flex1">
+        {Object.keys(renderComp).map((comName, i) => {
+          let description =
+            Component[comName].docs && Component[comName].docs.description
+              ? Component[comName].docs.description
+              : "No description for " + comName;
+
+          let rendering = false;
+          renderComp[comName].forEach((sub, k) => {
+            let a = sub.split("__")[0];
+            rendering = a == selectedCom ? true : false;
+          });
+
+          if (rendering) {
+            let propsObj =
+              (Component &&
+                Component[selectedCom] &&
+                // eslint-disable-next-line react/forbid-foreign-prop-types
+                Component[selectedCom].propTypes) ||
+              {};
+            let propsObjDesc =
+              (Component &&
+                Component[selectedCom] &&
+                Component[selectedCom].propTypesDescription) ||
+              {};
+            let currentCompProps = Object.keys(propsObjDesc) || [];
+            let currentCompDefault =
+              (Component[selectedCom] && Component[selectedCom].defaultProps) ||
+              {};
+
+            let additinonalDesc =
+              (Component[selectedCom].docs.additionalDescription &&
+                Component[selectedCom].docs.additionalDescription) ||
+              null;
+
+            return (
+              <div key={i} className="renderCom" id={module + "/" + comName}>
+                <h1 className="compName">{comName}</h1>
+                <p className="compDesc">{description}</p>
+
+                <div dangerouslySetInnerHTML={{ __html: additinonalDesc }} />
+
+                {
+                  // {PlayGround ? (
+                  //   <div className="playGround">
+                  //     <PlayGround propsObj={propsObj} RenderCode={Component[comName] } currentCompDefault={currentCompDefault}/>
+                  //   </div>
+                  // ) : null}
+                }
+                {
+                  // let PlayGround =
+                  //   renderComp[comName].indexOf(comName + '__PlayGround') == -1
+                  //     ? null
+                  //     : Component[comName + '__PlayGround'];
+                }
+
+                {renderComp[comName].map((states, j) => {
+                  let srcReact =
+                    Component[states].docs && Component[states].docs.source
+                      ? Component[states].docs.source
+                      : "no Code";
+                  let descr =
+                    Component[states].docs && Component[states].docs.description
+                      ? Component[states].docs.description
+                      : "No description for " + states.split("__")[1];
+
+                  if (states.split("__")[1] != "PlayGround") {
+                    return (
+                      <StateComponent
+                        key={j}
+                        states={states}
+                        descr={descr}
+                        srcReact={srcReact}
+                        renCode={Component[states]}
+                      />
+                    );
+                  } else {
+                    return null;
+                  }
+                })}
+                {Object.keys(currentCompProps).length ? (
+                  <div>
+                    <div className="proprti">Properties</div>
+                    <div className="propTable">
+                      <div className="tableHeader dflexRow">
+                        <span className="brR">PropsName</span>
+                        <span className="brR">Type</span>
+                        <span className="brR">isRequired</span>
+                        <span className="brR bn">Default Props</span>
+                        <span className="brR bn">Description</span>
+                      </div>
+
+                      {currentCompProps.length &&
+                        currentCompProps.map((value, i) => {
+                          let hookArray = [];
+                          if (
+                            propsObj[value] &&
+                            propsObj[value].hookType &&
+                            (propsObj[value].hookType.indexOf("enum") != -1 ||
+                              propsObj[value].hookType.indexOf("union") != -1)
+                          ) {
+                            let uni = "";
+                            if (
+                              propsObj[value].hookType.indexOf("union") != -1
+                            ) {
+                              let val = propsObj[value].hookType;
+                              let a = val.replace("union", "");
+                              a = a.replace("]", "");
+                              a = a.replace("[", "");
+                              uni = a.split(",");
+                            }
+
+                            hookArray =
+                              propsObj[value].hookType.indexOf("enum") != -1
+                                ? JSON.parse(
+                                    propsObj[value].hookType.replace("enum", "")
+                                  )
+                                : uni;
+                          }
+
+                          return (
+                            <div
+                              className={
+                                currentCompProps.length - 1 == i
+                                  ? "tableHeaderNB dflexRow"
+                                  : "tableHeader dflexRow"
+                              }
+                              key={i}
+                            >
+                              <span>
+                                <div>{value}</div>
+                              </span>
+                              <span>
+                                <div>
+                                  {hookArray.length
+                                    ? hookArray.map((value, i) => {
+                                        return (
+                                          <div className="hookOneof" key={i}>
+                                            {value}
+                                          </div>
+                                        );
+                                      })
+                                    : propsObj[value] &&
+                                      propsObj[value].hookType}
+                                </div>
+                              </span>
+                              <span>
+                                <div>
+                                  {propsObj[value] && propsObj[value].isRequired
+                                    ? "false"
+                                    : "true"}
+                                </div>
+                              </span>
+                              <span>
+                                <div className="bn">
+                                  {JSON.stringify(currentCompDefault[value])
+                                    ? JSON.stringify(currentCompDefault[value])
+                                    : "-"}
+                                </div>
+                              </span>
+                              <span>
+                                <div className="bn">
+                                  {propsObjDesc[value] && propsObjDesc[value]}
+                                </div>
+                              </span>
+                            </div>
+                          );
+                        })}
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+            );
+          } else {
+            return null;
+          }
+        })}
+      </div>
+    );
+  }
+}
+// class PlayGround  extends React.Component {
+//   constructor(props) {
+//     super(props);
+//     this.state = { propsObject : props.currentCompDefault }
+//   }
+//   onChangeInput(name,e)
+//   {
+//     let propsObject = this.state.propsObject
+//     propsObject[name] = e.target.value
+//     this.setState({propsObject : propsObject })
+//   }
+//   render()
+//   {
+//     let {RenderCode,propsObj } = this.props
+//     let {propsObject} = this.state;
+//      return (
+//
+//       <div>
+//         <RenderCode {...propsObject}/>
+//
+//         {
+//           Object.keys(propsObj).map((name)=>{
+//             if( propsObj[name].hookType == "string")
+//             {
+//               return (<span>
+//                             <label>{name}</label>
+//                             <input onChange={this.onChangeInput.bind(this,name)}></input>
+//                       </span>)
+//             }
+//             else {
+//               return null
+//             }
+//
+//           })
+//         }
+//       </div>
+//     )
+//   }
+// }
+//
+
+class StateComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      codeView: false,
+      codeTabView: "react"
+    };
+    this.codePreview = this.codePreview.bind(this);
+  }
+  codePreview() {
+    this.setState({ codeView: !this.state.codeView });
+  }
+
+  componentDidMount() {
+    let { states, htmlCode, renCode: RenderCode } = this.props;
+    // if (typeof CodeMirror !== 'undefined' && document.getElementById(states)) {
+    //   CodeMirror.fromTextArea(document.getElementById(states), {
+    //     lineNumbers: false,
+    //     styleActiveLine: false,
+    //     matchBrackets: false,
+    //     theme: 'blackboard',
+    //     readOnly: true
+    //   });
+    // }
+
+    RenderCode &&
+      ReactDOM.render(
+        <CodeExtractContext.Provider value={{ isCodeExtract: true }}>
+          <RenderCode />
+        </CodeExtractContext.Provider>,
+        document.getElementById(states + "view")
+        // htmlCode(states)
+      );
+  }
+
+  onTabChange(text) {
+    this.setState({ codeTabView: text });
+  }
+
+  render() {
+    let { states, descr, renCode, htmlCode, srcReact } = this.props;
+    let { codeView, codeTabView } = this.state;
+    return (
+      <div className="renderPart">
+        <div>
+          <span className="stateName">{states.split("__")[1]}</span>
+          <label className="codeToggle">
+            <input type="checkbox" onClick={this.codePreview} />
+            <div>
+              <div>&lt;/&gt;</div>
+            </div>
+          </label>
+        </div>
+        <div className="renDes">{descr}</div>
+        <div className="renderArea" id={states + "view"}>
+          states
+        </div>
+        <div className={codeView ? "codeView" : "codeArea"}>
+          <div className="borderTab">
+            <div className="codeTabWrap">
+              <span
+                className={codeTabView == "react" ? "activeTabCode" : ""}
+                onClick={this.onTabChange.bind(this, "react")}
+              >
+                React Code
+              </span>
+              <span
+                className={codeTabView == "html" ? "activeTabCode" : ""}
+                onClick={this.onTabChange.bind(this, "html")}
+              >
+                HTML Code
+              </span>
+            </div>
+
+            <div
+              className={
+                codeTabView == "react"
+                  ? "reactCode viewsubcode"
+                  : "reactCode hidecode"
+              }
+            >
+              {/* <textarea id={states} defaultValue={srcReact} name={states} /> */}
+            </div>
+
+            <div
+              className={
+                codeTabView == "html"
+                  ? "htmlCode viewsubcode"
+                  : "htmlCode hidecode"
+              }
+            >
+              {/* <textarea id={'html' + states} name={'html' + states} /> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+class KeyBoardShortcut extends React.Component {
+  constructor(props) {
+    super(props);
+    this.keyVal = "";
+    this.pressKey = this.pressKey.bind(this);
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      keyPress: false
+    };
+  }
+  componentDidMount() {
+    // document.addEventListener('keydown', this.pressKey);
+  }
+  toggle() {
+    var clr;
+    clr && clearTimeout(clr);
+    this.setState({ keyPress: true }, () => {
+      clr = setTimeout(() => {
+        this.setState({ keyPress: false });
+      }, 600);
+    });
+  }
+
+  pressKey(e) {
+    var key = e.keyCode;
+    this.keyVal = String.fromCharCode(key);
+    if (e.target.nodeName == "BODY") {
+      switch (key) {
+        case 65:
+          this.toggle();
+          this.props.onSelect("accessibility");
+          break;
+        case 67:
+          this.toggle();
+          this.props.onSelect("components");
+          break;
+        case 68:
+          this.toggle();
+          this.props.onSelect("designTokens");
+          break;
+        case 70:
+          this.toggle();
+          this.props.onSelect("faq");
+          break;
+        case 71:
+          this.toggle();
+          this.props.onSelect("gettingStarted");
+          break;
+        case 73:
+          this.toggle();
+          this.props.onSelect("icons");
+          break;
+        case 85:
+          this.toggle();
+          this.props.onSelect("utilities");
+          break;
+      }
+    }
+  }
+  render() {
+    return (
+      <div className={this.state.keyPress ? "keyBoard" : "hide"}>
+        <span>{this.keyVal}</span>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, react);