How to use sku - 10 common examples

(
    {
      label,
      onClick,
      onMouseDown,
      onKeyUp,
      onKeyDown,
      'aria-haspopup': ariaHasPopUp,
      'aria-expanded': ariaExpanded,
      keyboardAccessible = true,
      active = false,
      children,
    },
    forwardedRef,
  ) => {
    const styles = useStyles(styleRefs);
    const iconContainerStyles = useIconContainerSize();
    const iconStyles = useIconSize();
    const background = useBackground();

    const handleMouseDown = useCallback(
      (event: MouseEvent) => {
        if (typeof onMouseDown !== 'function') {
          return;
        }

        if (!onClick) {
          // Ensure that the mousedown event doesn't trigger
          // a blur on the currently focused element if there
          // isn't any click behaviour attached to this button.
          // If we don't do this, the currently focused element
          // will lose its visible focus state which may not be

opacity: 1,
      pointerEvents: 'auto',
      transition: 'opacity .1s ease, transform .3s ease',
    },
    [`screen and (min-width: ${theme.breakpoint.desktop}px)`]: {
      paddingLeft: `${desktopMenuWidth} !important`,
    },
  },
}));

globalStyle('html, body', {
  margin: 0,
});

// :focus-visible polyfill: https://github.com/WICG/focus-visible
globalStyle('.js-focus-visible :focus:not(.focus-visible)', {
  outline: 'none',
});

export const content = style(theme => ({
  flexGrow: 1,
  paddingBottom: 80,
  '@media': {
    [`screen and (max-width: ${theme.breakpoint.desktop - 1}px)`]: {
      opacity: 1,
      pointerEvents: 'auto',
      transition: 'opacity .1s ease, transform .3s ease',
    },
    [`screen and (min-width: ${theme.breakpoint.desktop}px)`]: {
      paddingLeft: `${desktopMenuWidth} !important`,
    },
  },
}));

globalStyle('html, body', {
  margin: 0,
});

// :focus-visible polyfill: https://github.com/WICG/focus-visible
globalStyle('.js-focus-visible :focus:not(.focus-visible)', {
  outline: 'none',
});

req.keys().forEach(filename => {
  const matches = filename.match(/([a-zA-Z]+)\.docs\.tsx?$/);
  if (!matches) {
    return;
  }

  const componentName = matches[1];
  const stories = storiesOf(componentName, module);
  const docs = req(filename).default as ComponentDocs;

  if (
    docs.storybook === false ||
    !docs.examples.some(({ Example }) => typeof Example === 'function')
  ) {
    return;
  }

  // Only render foundation elements in `wireframe` no need to theme them
  const storyThemes = docs.foundation
    ? values(themes).filter(theme => theme.name === 'wireframe')
    : values(themes).filter(theme => theme.name !== 'wireframe');

  storyThemes.forEach(theme => {
    stories.add(theme.name, () => (

(props: DropdownProps, ref) => {
    const {
      children,
      value,
      onChange,
      onBlur,
      onFocus,
      placeholder,
      ...restProps
    } = props;

    const styles = useStyles(styleRefs);

    Children.forEach(children, child => {
      if (!(isValidElement(child) && /^(option|optgroup)$/.test(child.type))) {
        throw new Error(
          '`Dropdown` only accepts children of type `option` or `optgroup`.',
        );
      }
    });

    return (

},
  },
});

const checkboxScale = style({
  transform: 'scale(0.85)',
  selectors: {
    [`${realField}:active + * > ${fakeFieldBase} > * > &`]: {
      transform: 'scale(0.75)',
    },
  },
});

export const checkboxIndicator = [indicator, checkboxScale];

const radioScale = style({
  transform: 'scale(0.6)',
  selectors: {
    [`${realField}:active + * > ${fakeFieldBase} > * > &`]: {
      transform: 'scale(0.5)',
    },
  },
});

export const radioIndicator = [indicator, radioScale];

selectors: {
    [`${realField}:checked + * > ${fakeFieldBase} > &`]: {
      opacity: 1,
    },
  },
});

export const focusOverlay = style({
  selectors: {
    [`${realField}:focus + * > ${fakeFieldBase} > &`]: {
      opacity: 1,
    },
  },
});

export const hoverOverlay = style({
  selectors: {
    [`${realField}:hover:not(:checked):not(:disabled) + * > ${fakeFieldBase} > &`]: {
      opacity: 1,
    },
  },
});

export const indicator = style({
  selectors: {
    [`${hoverOverlay} > &`]: {
      opacity: 0.2,
    },
  },
});

const checkboxScale = style({

import { style, styleMap } from 'sku/treat';
import * as zIndex from '../private/zIndex';

export const zIndexContainer = style({
  zIndex: zIndex.pageOverlay,
});

export const cancelButton = style({
  top: 0,
  right: 0,
});

export const backdrop = style({
  top: 0,
  left: 0,
  width: '100vw',
  height: '100vh',
  zIndex: zIndex.backdrop,
  background: 'black',
});

export const backdropVisibility = styleMap({
  hidden: { opacity: 0 },
  visible: { opacity: 0.7 },

[`${isOpen} &`]: {
      transform: 'translateY(11px) rotate(45deg)',
    },
  },
});

export const bar2 = style({
  top: '11px',
  selectors: {
    [`${isOpen} &`]: {
      opacity: 0,
    },
  },
});

export const bar3 = style({
  top: '22px',
  selectors: {
    [`${isOpen} &`]: {
      transform: 'translateY(-11px) rotate(-45deg)',
    },
  },
});

opacity: 1,
    },
  },
});

export const content = style({
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  userSelect: 'none',
  whiteSpace: 'nowrap',
});

export const loading = style({
  verticalAlign: 'top',
});
export const ellipsis = style({
  width: 0,
  overflowX: 'hidden',
  animationDuration: '1s',
  animationIterationCount: 'infinite',
  '@keyframes': {
    to: {
      width: 20,
    },
  },
});
export const visibilityHidden = style({
  visibility: 'hidden',
});