@elastic/eui 12.2.0 → 12.4.0

package/src/components/button/button_empty/button_empty.js

@@ -1,176 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { EuiLoadingSpinner } from '../../loading';
-
-import { getSecureRelForTarget } from '../../../services';
-
-import { IconPropType, EuiIcon } from '../../icon';
-
-const colorToClassNameMap = {
-  primary: 'euiButtonEmpty--primary',
-  danger: 'euiButtonEmpty--danger',
-  disabled: 'euiButtonEmpty--disabled',
-  text: 'euiButtonEmpty--text',
-  ghost: 'euiButtonEmpty--ghost',
-};
-
-export const COLORS = Object.keys(colorToClassNameMap);
-
-const sizeToClassNameMap = {
-  xs: 'euiButtonEmpty--xSmall',
-  s: 'euiButtonEmpty--small',
-  l: 'euiButtonEmpty--large',
-};
-
-export const SIZES = Object.keys(sizeToClassNameMap);
-
-const iconSideToClassNameMap = {
-  left: '',
-  right: 'euiButtonEmpty--iconRight',
-};
-
-export const ICON_SIDES = Object.keys(iconSideToClassNameMap);
-
-const flushTypeToClassNameMap = {
-  left: 'euiButtonEmpty--flushLeft',
-  right: 'euiButtonEmpty--flushRight',
-};
-
-export const FLUSH_TYPES = Object.keys(flushTypeToClassNameMap);
-
-export const EuiButtonEmpty = ({
-  children,
-  className,
-  iconType,
-  iconSide,
-  color,
-  size,
-  flush,
-  isDisabled,
-  isLoading,
-  href,
-  target,
-  rel,
-  type,
-  buttonRef,
-  contentProps,
-  textProps,
-  ...rest
-}) => {
-  // If in the loading state, force disabled to true
-  isDisabled = isLoading ? true : isDisabled;
-
-  const classes = classNames(
-    'euiButtonEmpty',
-    colorToClassNameMap[color],
-    sizeToClassNameMap[size],
-    iconSideToClassNameMap[iconSide],
-    flushTypeToClassNameMap[flush],
-    className
-  );
-
-  const contentClassNames = classNames(
-    'euiButtonEmpty__content',
-    contentProps && contentProps.className
-  );
-
-  const textClassNames = classNames(
-    'euiButtonEmpty__text',
-    textProps && textProps.className
-  );
-
-  // Add an icon to the button if one exists.
-  let buttonIcon;
-
-  if (isLoading) {
-    buttonIcon = <EuiLoadingSpinner className="euiButton__spinner" size="m" />;
-  } else if (iconType) {
-    buttonIcon = (
-      <EuiIcon
-        className="euiButtonEmpty__icon"
-        type={iconType}
-        size="m"
-        aria-hidden="true"
-      />
-    );
-  }
-
-  const innerNode = (
-    <span {...contentProps} className={contentClassNames}>
-      {buttonIcon}
-      <span {...textProps} className={textClassNames}>
-        {children}
-      </span>
-    </span>
-  );
-
-  // <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
-  // this is a button and piggyback off its disabled styles.
-  if (href && !isDisabled) {
-    const secureRel = getSecureRelForTarget({ href, target, rel });
-
-    return (
-      <a
-        className={classes}
-        href={href}
-        target={target}
-        rel={secureRel}
-        ref={buttonRef}
-        {...rest}>
-        {innerNode}
-      </a>
-    );
-  } else {
-    return (
-      <button
-        disabled={isDisabled}
-        className={classes}
-        type={type}
-        ref={buttonRef}
-        {...rest}>
-        {innerNode}
-      </button>
-    );
-  }
-};
-
-EuiButtonEmpty.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  iconType: IconPropType,
-  iconSide: PropTypes.oneOf(ICON_SIDES),
-  color: PropTypes.oneOf(COLORS),
-  size: PropTypes.oneOf(SIZES),
-  flush: PropTypes.oneOf(FLUSH_TYPES),
-  isDisabled: PropTypes.bool,
-  href: PropTypes.string,
-  target: PropTypes.string,
-  rel: PropTypes.string,
-  onClick: PropTypes.func,
-
-  /**
-   * Adds/swaps for loading spinner & disables
-   */
-  isLoading: PropTypes.bool,
-
-  type: PropTypes.string,
-  buttonRef: PropTypes.func,
-
-  /**
-   * Passes props to `euiButtonEmpty__content` span
-   */
-  contentProps: PropTypes.object,
-
-  /**
-   * Passes props to `euiButtonEmpty__text` span
-   */
-  textProps: PropTypes.object,
-};
-
-EuiButtonEmpty.defaultProps = {
-  type: 'button',
-  iconSide: 'left',
-  color: 'primary',
-};

package/src/components/button/button_empty/button_empty.test.js

@@ -1,113 +0,0 @@
-import React from 'react';
-import { render, mount } from 'enzyme';
-import { requiredProps } from '../../../test/required_props';
-
-import {
-  EuiButtonEmpty,
-  COLORS,
-  SIZES,
-  ICON_SIDES,
-  FLUSH_TYPES,
-} from './button_empty';
-
-describe('EuiButtonEmpty', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiButtonEmpty {...requiredProps}>Content</EuiButtonEmpty>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  describe('props', () => {
-    describe('isDisabled', () => {
-      it('is rendered', () => {
-        const component = render(<EuiButtonEmpty isDisabled />);
-
-        expect(component).toMatchSnapshot();
-      });
-
-      it('renders a button even when href is defined', () => {
-        const component = render(<EuiButtonEmpty href="#" isDisabled />);
-
-        expect(component).toMatchSnapshot();
-      });
-    });
-
-    describe('iconType', () => {
-      it('is rendered', () => {
-        const component = render(<EuiButtonEmpty iconType="user" />);
-
-        expect(component).toMatchSnapshot();
-      });
-    });
-
-    describe('color', () => {
-      COLORS.forEach(color => {
-        test(`${color} is rendered`, () => {
-          const component = render(<EuiButtonEmpty color={color} />);
-
-          expect(component).toMatchSnapshot();
-        });
-      });
-    });
-
-    describe('size', () => {
-      SIZES.forEach(size => {
-        test(`${size} is rendered`, () => {
-          const component = render(<EuiButtonEmpty size={size} />);
-
-          expect(component).toMatchSnapshot();
-        });
-      });
-    });
-
-    describe('iconSide', () => {
-      ICON_SIDES.forEach(iconSide => {
-        test(`${iconSide} is rendered`, () => {
-          const component = render(
-            <EuiButtonEmpty iconType="user" iconSide={iconSide}>
-              Content
-            </EuiButtonEmpty>
-          );
-
-          expect(component).toMatchSnapshot();
-        });
-      });
-    });
-
-    describe('flush', () => {
-      FLUSH_TYPES.forEach(flushType => {
-        test(`${flushType} is rendered`, () => {
-          const component = render(<EuiButtonEmpty flush={flushType} />);
-
-          expect(component).toMatchSnapshot();
-        });
-      });
-    });
-
-    describe('href', () => {
-      it('secures the rel attribute when the target is _blank', () => {
-        const component = render(<EuiButtonEmpty href="#" target="_blank" />);
-
-        expect(component).toMatchSnapshot();
-      });
-    });
-
-    describe('onClick', () => {
-      it('supports onClick and href', () => {
-        const handler = jest.fn();
-        const component = mount(<EuiButtonEmpty href="#" onClick={handler} />);
-        component.find('a').simulate('click');
-        expect(handler.mock.calls.length).toEqual(1);
-      });
-
-      it('supports onClick as a button', () => {
-        const handler = jest.fn();
-        const component = mount(<EuiButtonEmpty onClick={handler} />);
-        component.find('button').simulate('click');
-        expect(handler.mock.calls.length).toEqual(1);
-      });
-    });
-  });
-});

package/src/components/button/button_empty/index.js

@@ -1 +0,0 @@
-export { COLORS, ICON_SIDES, EuiButtonEmpty } from './button_empty';

package/src/components/button/button_group/__snapshots__/button_group.test.js.snap

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

package/src/components/button/button_group/button_group.js

@@ -1,141 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { EuiScreenReaderOnly } from '../../accessibility';
-import { EuiButtonToggle } from '../button_toggle';
-import { TOGGLE_TYPES } from '../../toggle';
-
-export const EuiButtonGroup = ({
-  className,
-  buttonSize,
-  color,
-  idSelected,
-  idToSelectedMap,
-  isDisabled,
-  isFullWidth,
-  isIconOnly,
-  name,
-  legend,
-  onChange,
-  options,
-  type,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiButtonGroup',
-    {
-      'euiButtonGroup--fullWidth': isFullWidth,
-    },
-    className
-  );
-
-  let legendNode;
-  if (legend) {
-    legendNode = (
-      <EuiScreenReaderOnly>
-        <legend>{legend}</legend>
-      </EuiScreenReaderOnly>
-    );
-  }
-
-  return (
-    <fieldset>
-      {legendNode}
-
-      <div className={classes} {...rest}>
-        {options.map((option, index) => {
-          let isSelectedState;
-          if (type === 'multi') {
-            isSelectedState = idToSelectedMap[option.id] || false;
-          } else {
-            isSelectedState = option.id === idSelected;
-          }
-
-          return (
-            <EuiButtonToggle
-              className="euiButtonGroup__button"
-              color={color}
-              fill={isSelectedState}
-              iconSide={option.iconSide}
-              iconType={option.iconType}
-              id={option.id}
-              isDisabled={isDisabled || option.isDisabled}
-              isIconOnly={isIconOnly}
-              isSelected={isSelectedState}
-              key={index}
-              label={option.label}
-              name={option.name || name}
-              onChange={() => onChange(option.id, option.value)}
-              size={buttonSize}
-              toggleClassName="euiButtonGroup__toggle"
-              type={type}
-              value={option.value}
-            />
-          );
-        })}
-      </div>
-    </fieldset>
-  );
-};
-
-EuiButtonGroup.propTypes = {
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-      isDisabled: PropTypes.bool,
-    })
-  ).isRequired,
-  onChange: PropTypes.func.isRequired,
-
-  /**
-   * See `EuiButton`
-   */
-  color: PropTypes.string,
-
-  /**
-   * Most button groups should be the small button size,
-   * but if you NEED to bump it to regular, change this to 'm'
-   */
-  buttonSize: PropTypes.string,
-
-  /**
-   * Hides the label from the button content and only displays the icon
-   */
-  isIconOnly: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-
-  /**
-   * Makes the whole group 100% of its parent
-   */
-  isFullWidth: PropTypes.bool,
-
-  /**
-   * Can only a "single" option be selected or "multi"ple?
-   */
-  type: PropTypes.oneOf(TOGGLE_TYPES),
-
-  /**
-   * Id of selected option for `type="single"`
-   */
-  idSelected: PropTypes.string,
-
-  /**
-   * Map of ids of selected options for `type="multi"`
-   */
-  idToSelectedMap: PropTypes.objectOf(PropTypes.bool),
-
-  /**
-   * Adds a hidden legend to the group for accessiblity
-   */
-  legend: PropTypes.string,
-};
-
-EuiButtonGroup.defaultProps = {
-  buttonSize: 's',
-  color: 'text',
-  idToSelectedMap: {},
-  options: [],
-  type: 'single',
-};

package/src/components/button/button_group/button_group.test.js

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

package/src/components/button/button_group/index.js

@@ -1 +0,0 @@
-export { EuiButtonGroup } from './button_group';

package/src/components/button/button_icon/__snapshots__/button_icon.test.js.snap

@@ -1,120 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiButtonIcon is rendered 1`] = `
-<button
-  aria-label="aria-label"
-  class="euiButtonIcon euiButtonIcon--primary testClass1 testClass2"
-  data-test-subj="test subject string"
-  type="button"
-/>
-`;
-
-exports[`EuiButtonIcon props color danger is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--danger"
-  type="button"
-/>
-`;
-
-exports[`EuiButtonIcon props color disabled is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--disabled"
-  type="button"
-/>
-`;
-
-exports[`EuiButtonIcon props color ghost is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--ghost"
-  type="button"
-/>
-`;
-
-exports[`EuiButtonIcon props color primary is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--primary"
-  type="button"
-/>
-`;
-
-exports[`EuiButtonIcon props color subdued is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--subdued"
-  type="button"
-/>
-`;
-
-exports[`EuiButtonIcon props color success is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--success"
-  type="button"
-/>
-`;
-
-exports[`EuiButtonIcon props color text is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--text"
-  type="button"
-/>
-`;
-
-exports[`EuiButtonIcon props color warning is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--warning"
-  type="button"
-/>
-`;
-
-exports[`EuiButtonIcon props href secures the rel attribute when the target is _blank 1`] = `
-<a
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--primary"
-  href="#"
-  rel="noopener noreferrer"
-  target="_blank"
-/>
-`;
-
-exports[`EuiButtonIcon props iconType is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--primary"
-  type="button"
->
-  <svg
-    aria-hidden="true"
-    class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
-    focusable="false"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-  />
-</button>
-`;
-
-exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--primary"
-  disabled=""
-  type="button"
-/>
-`;
-
-exports[`EuiButtonIcon props isDisabled renders a button even when href is defined 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon euiButtonIcon--primary"
-  disabled=""
-  type="button"
-/>
-`;

package/src/components/button/button_icon/button_icon.js

@@ -1,120 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { getSecureRelForTarget } from '../../../services';
-
-import { ICON_SIZES, IconPropType, EuiIcon } from '../../icon';
-
-const accessibleButtonIcon = (props, propName, componentName) => {
-  if (props['aria-label']) {
-    return;
-  }
-
-  if (props['aria-labelledby']) {
-    return;
-  }
-
-  throw new Error(
-    `${componentName} requires aria-label or aria-labelledby to be specified because icon-only
-    buttons are screen-reader-inaccessible without them.`
-  );
-};
-
-const colorToClassNameMap = {
-  danger: 'euiButtonIcon--danger',
-  disabled: 'euiButtonIcon--disabled',
-  ghost: 'euiButtonIcon--ghost',
-  primary: 'euiButtonIcon--primary',
-  subdued: 'euiButtonIcon--subdued',
-  success: 'euiButtonIcon--success',
-  text: 'euiButtonIcon--text',
-  warning: 'euiButtonIcon--warning',
-};
-
-export const COLORS = Object.keys(colorToClassNameMap);
-
-export const EuiButtonIcon = ({
-  className,
-  iconType,
-  iconSize,
-  color,
-  isDisabled,
-  href,
-  type,
-  target,
-  rel,
-  buttonRef,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiButtonIcon',
-    colorToClassNameMap[color],
-    className
-  );
-
-  // Add an icon to the button if one exists.
-  let buttonIcon;
-
-  if (iconType) {
-    buttonIcon = (
-      <EuiIcon
-        className="euiButtonIcon__icon"
-        type={iconType}
-        size={iconSize}
-        aria-hidden="true"
-      />
-    );
-  }
-
-  // <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
-  // this is a button and piggyback off its disabled styles.
-  if (href && !isDisabled) {
-    const secureRel = getSecureRelForTarget({ href, target, rel });
-
-    return (
-      <a
-        className={classes}
-        href={href}
-        target={target}
-        rel={secureRel}
-        ref={buttonRef}
-        {...rest}>
-        {buttonIcon}
-      </a>
-    );
-  } else {
-    return (
-      <button
-        disabled={isDisabled}
-        className={classes}
-        type={type}
-        ref={buttonRef}
-        {...rest}>
-        {buttonIcon}
-      </button>
-    );
-  }
-};
-
-EuiButtonIcon.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  iconType: IconPropType,
-  iconSize: PropTypes.oneOf(ICON_SIZES),
-  color: PropTypes.oneOf(COLORS),
-  isDisabled: PropTypes.bool,
-  'aria-label': accessibleButtonIcon,
-  href: PropTypes.string,
-  target: PropTypes.string,
-  rel: PropTypes.string,
-  onClick: PropTypes.func,
-  type: PropTypes.string,
-  buttonRef: PropTypes.func,
-};
-
-EuiButtonIcon.defaultProps = {
-  type: 'button',
-  color: 'primary',
-  iconSize: 'm',
-};