How to use wix-ui-core - 10 common examples

eyes.it('should be indetermined', async () => {
      await autoExampleDriver.setProps({indeterminate: true});
      const driver = checkboxTestkitFactory({dataHook});
      // TODO: implement driver.isIndeterminate() in wix-ui-core
      // expect(await driver.isIndeterminate()).toBeTruthy();
    });
  });

import ChevronDown from 'wix-ui-icons-common/ChevronDown';
import style from './LabelWithOptions.st.css';
import { Tooltip } from '../Tooltip';
import { getInputSuffix } from '../Input/InputSuffixes';
import FormFieldError from 'wix-ui-icons-common/system/FormFieldError';

export interface LabelWithOptionsProps {
  // The size of the LabelWithOptions
  size?: 'large' | 'medium' | 'small';
}

const defaultProps = {
  size: 'medium'
};

const StyledLabelWithOptions = withStylable<
  CoreLabelWithOptionsProps,
  LabelWithOptionsProps
>(CoreLabelWithOptions, style, ({ size }) => ({ size }), defaultProps);

export type LabelWithOptionsType = React.SFC<
  CoreLabelWithOptionsProps & LabelWithOptionsProps
> & {
  createOption: typeof CoreLabelWithOptions.createOption;
  createDivider: typeof CoreLabelWithOptions.createDivider;
};

const defaultSuffix = ;
const renderSuffix = ({ isError, disabled }) =>
  getInputSuffix({
    error: isError ? 'Selection is required!' : null,
    disabled,

InputProps as CoreInputProps
} from 'wix-ui-core/dist/src/components/input';
import { withStylable } from 'wix-ui-core/dist/src/utils/withStylable';
import style from './Input.st.css';
import { getInputSuffix } from './InputSuffixes';

export interface InputProps {
  // The size of the input
  size?: 'large' | 'medium' | 'small';
}

const defaultProps = {
  size: 'medium'
};

export const StyledInput = withStylable(
  CoreInput,
  style,
  ({ size }) => ({ size }),
  defaultProps
);

export const Input: React.SFC = (
  props: CoreInputProps & InputProps
) => {
  const { error, disabled, suffix } = props;

  return (

} from 'wix-ui-core/dist/src/components/autocomplete';
import { withStylable } from 'wix-ui-core/dist/src/utils/withStylable';
import ChevronDown from 'wix-ui-icons-common/ChevronDown';
import style from './Autocomplete.st.css';
import { getInputSuffix } from '../Input';

export interface AutocompleteProps {
  // The size of the autocomplete
  size?: 'large' | 'medium' | 'small';
}

const defaultProps = {
  size: 'medium'
};

const StyledAutocomplete = withStylable<
  CoreAutocompleteProps,
  AutocompleteProps
>(CoreAutocomplete, style, ({ size }) => ({ size }), defaultProps);

export type AutocompleteType = React.SFC<
  CoreAutocompleteProps & AutocompleteProps
> & {
  createOption: typeof CoreAutocomplete.createOption;
  createDivider: typeof CoreAutocomplete.createDivider;
};

const defaultSuffix = ;
export const Autocomplete: AutocompleteType = ((
  props: CoreAutocompleteProps & AutocompleteProps
) => {
  const { error, disabled, suffix } = props;

it('should be unchecked and not disabled by default', async () => {
    const driver = checkboxTestkitFactory({dataHook});
    expect(await driver.isChecked()).toBe(false);
    expect(await driver.isDisabled()).toBe(false);
  });

it('should be checked when clicked', async () => {
    const driver = checkboxTestkitFactory({dataHook});
    expect(await driver.isChecked()).toBe(false);
    await driver.click();
    expect(await driver.isChecked()).toBe(true);
  });
});

eyes.it('should be unchecked', async () => {
      const driver = checkboxTestkitFactory({dataHook});
      expect(await driver.isChecked()).toBeFalsy();
    });

import * as React from 'react';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import { addressInputDriverFactory } from './AddressInput.driver';
import { AddressInput } from '.';
import { mount } from 'enzyme';
import { GoogleMapsClientStub } from 'wix-ui-core/dist/src/components/address-input/GoogleMapsClientStub';
import * as helper from 'wix-ui-core/dist/src/components/address-input/AddressInputTestHelper';
import * as waitForCond from 'wait-for-cond';
import { AddressInputProps } from './AddressInput';
import Search from 'wix-ui-icons-common/Search';

GoogleMapsClientStub.setAddresses([helper.ADDRESS_1, helper.ADDRESS_2]);
GoogleMapsClientStub.setGeocode(helper.GEOCODE_1);

const commonProps = {
  apiKey: '',
  Client: GoogleMapsClientStub,
  lang: 'ru',
  onSelect: () => null
};

describe('AddressInput', () => {
  const createDriver = createDriverFactory(addressInputDriverFactory);

  it('should always set the core prop forceContentElementVisibility to false', () => {
    const props = {
      ...commonProps,
      forceContentElementVisibility: true

import * as React from 'react';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import { addressInputDriverFactory } from './AddressInput.driver';
import { AddressInput } from '.';
import { mount } from 'enzyme';
import { GoogleMapsClientStub } from 'wix-ui-core/dist/src/components/address-input/GoogleMapsClientStub';
import * as helper from 'wix-ui-core/dist/src/components/address-input/AddressInputTestHelper';
import * as waitForCond from 'wait-for-cond';
import { AddressInputProps } from './AddressInput';
import Search from 'wix-ui-icons-common/Search';

GoogleMapsClientStub.setAddresses([helper.ADDRESS_1, helper.ADDRESS_2]);
GoogleMapsClientStub.setGeocode(helper.GEOCODE_1);

const commonProps = {
  apiKey: '',
  Client: GoogleMapsClientStub,
  lang: 'ru',
  onSelect: () => null
};

describe('AddressInput', () => {
  const createDriver = createDriverFactory(addressInputDriverFactory);

  it('should always set the core prop forceContentElementVisibility to false', () => {
    const props = {
      ...commonProps,
      forceContentElementVisibility: true
    } as AddressInputProps;

eyes.it('should render', () => {
    const driver = inputTestkitFactory({dataHook});

    expect(driver.element().isDisplayed()).toBe(true);
  });
});