@elastic/eui 12.2.0 → 12.4.0

package/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap

@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiSideNavItem is rendered 1`] = `
-<div
-  class="euiSideNavItem"
->
-  <div
-    aria-label="[object Object]"
-    class="euiSideNavItemButton"
-  >
-    <span
-      class="euiSideNavItemButton__content"
-    >
-      <span
-        class="euiSideNavItemButton__label"
-      >
-        <button
-          aria-label="aria-label"
-          class="testClass1 testClass2"
-          data-test-subj="test subject string"
-        />
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`EuiSideNavItem isSelected defaults to false 1`] = `
-<div
-  class="euiSideNavItem"
->
-  <div
-    aria-label="[object Object]"
-    class="euiSideNavItemButton"
-  >
-    <span
-      class="euiSideNavItemButton__content"
-    >
-      <span
-        class="euiSideNavItemButton__label"
-      >
-        <button />
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
-<div
-  class="euiSideNavItem"
->
-  <div
-    aria-label="[object Object]"
-    class="euiSideNavItemButton euiSideNavItemButton-isSelected"
-  >
-    <span
-      class="euiSideNavItemButton__content"
-    >
-      <span
-        class="euiSideNavItemButton__label"
-      >
-        <button />
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`EuiSideNavItem preserves child's classes 1`] = `
-<div
-  class="euiSideNavItem"
->
-  <div
-    aria-label="[object Object]"
-    class="euiSideNavItemButton"
-  >
-    <span
-      class="euiSideNavItemButton__content"
-    >
-      <span
-        class="euiSideNavItemButton__label"
-      >
-        <button
-          class="test"
-        />
-      </span>
-    </span>
-  </div>
-</div>
-`;

package/src/components/side_nav/index.js

@@ -1 +0,0 @@
-export { EuiSideNav } from './side_nav';

package/src/components/side_nav/side_nav.js

@@ -1,167 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { EuiIcon } from '../icon';
-
-import { EuiSideNavItem } from './side_nav_item';
-
-export class EuiSideNav extends Component {
-  isItemOpen = item => {
-    // The developer can force the item to be open.
-    if (item.forceOpen) {
-      return true;
-    }
-
-    // Of course a selected item is open.
-    if (item.isSelected) {
-      return true;
-    }
-
-    // The item has to be open if it has a child that's open.
-    if (item.items) {
-      return item.items.some(this.isItemOpen);
-    }
-  };
-
-  renderTree = (items, depth = 0) => {
-    const { renderItem } = this.props;
-
-    return items.map(item => {
-      const {
-        id,
-        name,
-        isSelected,
-        items: childItems,
-        icon,
-        onClick,
-        href,
-        forceOpen,
-        ...rest
-      } = item;
-
-      // Root items are always open.
-      const isOpen = depth === 0 ? true : this.isItemOpen(item);
-
-      let renderedItems;
-
-      if (childItems) {
-        renderedItems = this.renderTree(childItems, depth + 1);
-      }
-
-      return (
-        <EuiSideNavItem
-          isOpen={isOpen}
-          isSelected={isSelected}
-          isParent={!!childItems}
-          icon={icon}
-          onClick={onClick}
-          href={href}
-          items={renderedItems}
-          key={id}
-          depth={depth}
-          renderItem={renderItem}
-          {...rest}>
-          {name}
-        </EuiSideNavItem>
-      );
-    });
-  };
-
-  render() {
-    const {
-      className,
-      items,
-      toggleOpenOnMobile,
-      isOpenOnMobile,
-      mobileTitle,
-      // Extract this one out so it isn't passed to <nav>
-      renderItem,
-      ...rest
-    } = this.props;
-
-    const classes = classNames('euiSideNav', className, {
-      'euiSideNav-isOpenMobile': isOpenOnMobile,
-    });
-
-    const nav = this.renderTree(items);
-
-    return (
-      <nav className={classes} {...rest}>
-        {/* Hidden from view, except in mobile */}
-        <button
-          type="button"
-          className="euiSideNav__mobileToggle euiLink"
-          onClick={toggleOpenOnMobile}>
-          <span className="euiSideNav__mobileWrap">
-            <span className="euiSideNav__mobileTitle">{mobileTitle}</span>
-
-            <EuiIcon
-              className="euiSideNav__mobileIcon"
-              type="apps"
-              size="m"
-              aria-hidden="true"
-            />
-          </span>
-        </button>
-
-        {/* Hidden from view in mobile, but toggled from the button above */}
-        <div className="euiSideNav__content" role="menubar">
-          {nav}
-        </div>
-      </nav>
-    );
-  }
-}
-
-EuiSideNav.propTypes = {
-  /**
-   * `children` are not rendered. Use `items` to specify navigation items instead.
-   */
-  children: PropTypes.node,
-  /**
-   * Class names to be merged into the final `className` property.
-   */
-  className: PropTypes.string,
-  /**
-   * When called, toggles visibility of the navigation menu at mobile responsive widths. The callback should set the `isOpenOnMobile` prop to actually toggle navigation visibility.
-   */
-  toggleOpenOnMobile: PropTypes.func,
-  /**
-   * If `true`, the navigation menu will be open at mobile device widths. Use in conjunction with the `toggleOpenOnMobile` prop.
-   */
-  isOpenOnMobile: PropTypes.bool,
-  /**
-   * A React node to render at mobile responsive widths, representing the title of this navigation menu.
-   */
-  mobileTitle: PropTypes.node,
-  /**
-   * `items` is an array of objects (navigation menu `item`s).
-   * Each `item` may contain the following properties (this is an incomplete list):
-   * `item.id` is a required value that is passed to React as the `key` for this item
-   * `item.forceOpen` is an optional boolean; if set to true it will force the item to display in an "open" state at all times.
-   * `item.href` is an optional string to be passed as the navigation item's `href` prop, and by default it will force rendering of the item as an `<a>`.
-   * `item.icon` is an optional React node which will be rendered as a small icon to the left of the navigation item text.
-   * `item.isSelected` is an optional boolean; if set to true it will render the item in a visible "selected" state, and will force all ancestor navigation items to render in an "open" state.
-   * `item.items` is an optional array containing additional item objects, representing nested children of this navigation item.
-   * `item.name` is a required React node representing the text to render for this item (usually a string will suffice).
-   * `item.onClick` is an optional callback function to be passed as the navigation item's `onClick` prop, and by default it will force rendering of the item as a `<button>` instead of a link.
-   * `item.renderItem` is an optional function overriding default rendering for this navigation item — when called, it should return a React node representing a replacement navigation item.
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.oneOfType([
-        PropTypes.string.isRequired,
-        PropTypes.number.isRequired,
-      ]).isRequired,
-    }).isRequired
-  ),
-  /**
-   * Overrides default navigation menu item rendering. When called, it should return a React node representing a replacement navigation item.
-   */
-  renderItem: PropTypes.func,
-};
-
-EuiSideNav.defaultProps = {
-  items: [],
-};

package/src/components/side_nav/side_nav.test.js

@@ -1,196 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { EuiSideNav } from './side_nav';
-
-describe('EuiSideNav', () => {
-  test('is rendered', () => {
-    const component = render(<EuiSideNav {...requiredProps} />);
-
-    expect(component).toMatchSnapshot();
-  });
-
-  describe('props', () => {
-    describe('isOpenOnMobile', () => {
-      test('defaults to false', () => {
-        const component = render(<EuiSideNav />);
-
-        expect(component).toMatchSnapshot();
-      });
-
-      test('is rendered when specified as true', () => {
-        const component = render(<EuiSideNav isOpenOnMobile />);
-
-        expect(component).toMatchSnapshot();
-      });
-    });
-
-    describe('items', () => {
-      test('is rendered', () => {
-        const sideNav = [
-          {
-            name: 'A',
-            id: 0,
-            items: [
-              {
-                name: 'B',
-                id: 1,
-              },
-              {
-                name: 'C',
-                id: 2,
-                items: [
-                  {
-                    name: 'D',
-                    id: 3,
-                  },
-                  {
-                    name: 'E',
-                    id: 4,
-                  },
-                ],
-              },
-            ],
-          },
-        ];
-
-        const component = render(<EuiSideNav items={sideNav} />);
-
-        expect(component).toMatchSnapshot();
-      });
-
-      test('renders items which are links', () => {
-        const sideNav = [
-          {
-            name: 'A',
-            id: 0,
-            href: 'http://www.elastic.co',
-            items: [
-              {
-                name: 'B',
-                id: 1,
-              },
-              {
-                name: 'C',
-                id: 2,
-                items: [
-                  {
-                    name: 'D',
-                    id: 3,
-                  },
-                  {
-                    name: 'E',
-                    id: 4,
-                  },
-                ],
-              },
-            ],
-          },
-        ];
-
-        const component = render(<EuiSideNav items={sideNav} />);
-
-        expect(component).toMatchSnapshot();
-      });
-
-      test('renders items using a specified callback', () => {
-        const sideNav = [
-          {
-            name: 'A',
-            id: 0,
-            href: 'http://www.elastic.co',
-            items: [
-              {
-                name: 'B',
-                id: 1,
-              },
-            ],
-          },
-        ];
-
-        const renderItem = ({ href, className, children }) => (
-          <a data-test-id="my-custom-element" href={href} className={className}>
-            {children}
-          </a>
-        );
-
-        const component = render(
-          <EuiSideNav items={sideNav} renderItem={renderItem} />
-        );
-
-        expect(component).toMatchSnapshot();
-      });
-
-      test('renders selected item and automatically opens parent items', () => {
-        const sideNav = [
-          {
-            name: 'A',
-            id: 0,
-            items: [
-              {
-                name: 'B',
-                id: 1,
-              },
-              {
-                name: 'C',
-                id: 2,
-                items: [
-                  {
-                    name: 'D',
-                    id: 3,
-                    isSelected: true,
-                  },
-                  {
-                    name: 'E',
-                    id: 4,
-                  },
-                ],
-              },
-            ],
-          },
-        ];
-
-        const component = render(<EuiSideNav items={sideNav} />);
-
-        expect(component).toMatchSnapshot();
-      });
-
-      test('renders items having { forceOpen: true } in open state, and automatically opens parent items', () => {
-        const sideNav = [
-          {
-            name: 'A',
-            id: 0,
-            items: [
-              {
-                name: 'B',
-                id: 1,
-              },
-              {
-                name: 'C',
-                id: 2,
-                items: [
-                  {
-                    name: 'D',
-                    id: 3,
-                    forceOpen: true,
-                    items: [
-                      {
-                        name: 'E',
-                        id: 4,
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ];
-
-        const component = render(<EuiSideNav items={sideNav} />);
-
-        expect(component).toMatchSnapshot();
-      });
-    });
-  });
-});

package/src/components/side_nav/side_nav_item.js

@@ -1,123 +0,0 @@
-import React, { cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { EuiIcon } from '../icon';
-
-const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
-  if (href) {
-    return (
-      <a
-        className={className}
-        href={href}
-        onClick={onClick}
-        role="menuitem"
-        {...rest}>
-        {children}
-      </a>
-    );
-  }
-
-  if (onClick) {
-    return (
-      <button
-        type="button"
-        className={className}
-        onClick={onClick}
-        role="menuitem"
-        {...rest}>
-        {children}
-      </button>
-    );
-  }
-
-  return (
-    <div className={className} aria-label={children} {...rest}>
-      {children}
-    </div>
-  );
-};
-
-export const EuiSideNavItem = ({
-  isOpen,
-  isSelected,
-  isParent,
-  icon,
-  onClick,
-  href,
-  items,
-  children,
-  depth,
-  renderItem = defaultRenderItem,
-  ...rest
-}) => {
-  let childItems;
-
-  if (items && isOpen) {
-    childItems = <div className="euiSideNavItem__items">{items}</div>;
-  }
-
-  let buttonIcon;
-
-  if (icon) {
-    buttonIcon = cloneElement(icon, {
-      className: 'euiSideNavItemButton__icon',
-    });
-  }
-
-  const classes = classNames('euiSideNavItem', {
-    'euiSideNavItem--root': depth === 0,
-    'euiSideNavItem--rootIcon': depth === 0 && icon,
-    'euiSideNavItem--trunk': depth === 1,
-    'euiSideNavItem--branch': depth > 1,
-    'euiSideNavItem--hasChildItems': !!childItems,
-  });
-
-  const buttonClasses = classNames('euiSideNavItemButton', {
-    'euiSideNavItemButton--isClickable': onClick || href,
-    'euiSideNavItemButton-isOpen': depth > 0 && isOpen && !isSelected,
-    'euiSideNavItemButton-isSelected': isSelected,
-  });
-
-  let caret;
-
-  if (depth > 0 && isParent && !isOpen && !isSelected) {
-    caret = <EuiIcon type="arrowDown" color="subdued" size="s" />;
-  }
-
-  const buttonContent = (
-    <span className="euiSideNavItemButton__content">
-      {buttonIcon}
-
-      <span className="euiSideNavItemButton__label">{children}</span>
-
-      {caret}
-    </span>
-  );
-
-  return (
-    <div className={classes}>
-      {renderItem({
-        href,
-        onClick,
-        className: buttonClasses,
-        children: buttonContent,
-        ...rest,
-      })}
-      {childItems}
-    </div>
-  );
-};
-
-EuiSideNavItem.propTypes = {
-  isOpen: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  isParent: PropTypes.bool,
-  icon: PropTypes.node,
-  onClick: PropTypes.func,
-  href: PropTypes.string,
-  items: PropTypes.node,
-  children: PropTypes.node,
-  depth: PropTypes.number,
-  renderItem: PropTypes.func,
-};

package/src/components/side_nav/side_nav_item.test.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { EuiSideNavItem } from './side_nav_item';
-
-describe('EuiSideNavItem', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiSideNavItem>
-        <button {...requiredProps} />
-      </EuiSideNavItem>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test("preserves child's classes", () => {
-    const component = render(
-      <EuiSideNavItem>
-        <button className="test" />
-      </EuiSideNavItem>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  describe('isSelected', () => {
-    test('defaults to false', () => {
-      const component = render(
-        <EuiSideNavItem>
-          <button />
-        </EuiSideNavItem>
-      );
-
-      expect(component).toMatchSnapshot();
-    });
-
-    test('is rendered when specified as true', () => {
-      const component = render(
-        <EuiSideNavItem isSelected>
-          <button />
-        </EuiSideNavItem>
-      );
-
-      expect(component).toMatchSnapshot();
-    });
-  });
-});

package/src/components/spacer/__snapshots__/spacer.test.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiSpacer is rendered 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiSpacer euiSpacer--l testClass1 testClass2"
-  data-test-subj="test subject string"
-/>
-`;

package/src/components/spacer/index.ts

@@ -1 +0,0 @@
-export { EuiSpacer } from './spacer';

package/src/components/spacer/spacer.test.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { EuiSpacer } from './spacer';
-
-describe('EuiSpacer', () => {
-  test('is rendered', () => {
-    const component = render(<EuiSpacer {...requiredProps} />);
-
-    expect(component).toMatchSnapshot();
-  });
-});

package/src/components/spacer/spacer.tsx

@@ -1,32 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import classNames from 'classnames';
-
-import { CommonProps } from '../common';
-
-const sizeToClassNameMap = {
-  xs: 'euiSpacer--xs',
-  s: 'euiSpacer--s',
-  m: 'euiSpacer--m',
-  l: 'euiSpacer--l',
-  xl: 'euiSpacer--xl',
-  xxl: 'euiSpacer--xxl',
-};
-
-export const SIZES = Object.keys(sizeToClassNameMap);
-
-export type SpacerSize = keyof typeof sizeToClassNameMap;
-
-export type EuiSpacerProps = HTMLAttributes<HTMLDivElement> &
-  CommonProps & {
-    size?: SpacerSize;
-  };
-
-export const EuiSpacer: React.FunctionComponent<EuiSpacerProps> = ({
-  className,
-  size = 'l',
-  ...rest
-}) => {
-  const classes = classNames('euiSpacer', sizeToClassNameMap[size], className);
-
-  return <div className={classes} {...rest} />;
-};