How to use @zendeskgarden/react-theming - 10 common examples

const Message = styled.div.attrs(props => ({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  className: classNames(CheckboxStyles['c-chk__message'], {
    [CheckboxStyles['c-chk__message--success']]: props.validation === VALIDATION.SUCCESS,
    [CheckboxStyles['c-chk__message--warning']]: props.validation === VALIDATION.WARNING,
    [CheckboxStyles['c-chk__message--error']]: props.validation === VALIDATION.ERROR,

    // RTL
    [CheckboxStyles['is-rtl']]: isRtl(props)
  })
}))`
  ${props => retrieveTheme(COMPONENT_ID, props)};

const Message = styled.div.attrs(props => ({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  className: classNames(CheckboxStyles['c-chk__message'], CheckboxStyles['c-chk__message--radio'], {
    [CheckboxStyles['c-chk__message--success']]: props.validation === VALIDATION.SUCCESS,
    [CheckboxStyles['c-chk__message--warning']]: props.validation === VALIDATION.WARNING,
    [CheckboxStyles['c-chk__message--error']]: props.validation === VALIDATION.ERROR,

    // RTL
    [CheckboxStyles['is-rtl']]: isRtl(props)
  })
}))`
  ${props => retrieveTheme(COMPONENT_ID, props)};

const StyledCheckMessage = styled.div.attrs(props => ({
  className: classNames(CheckboxStyles['c-chk__message'], {
    [CheckboxStyles['c-chk__message--success']]: props.validation === VALIDATION.SUCCESS,
    [CheckboxStyles['c-chk__message--warning']]: props.validation === VALIDATION.WARNING,
    [CheckboxStyles['c-chk__message--error']]: props.validation === VALIDATION.ERROR,

    // RTL
    [CheckboxStyles['is-rtl']]: isRtl(props)
  })
}))`
  ${props => retrieveTheme('forms.check_message', props)};

const Notification = styled.div.attrs(props => ({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  className: classNames(CalloutStyles['c-callout'], CalloutStyles['c-callout--dialog'], {
    // RTL
    [CalloutStyles['is-rtl']]: isRtl(props),

    // Validation types
    [CalloutStyles['c-callout--success']]: props.type === VALIDATION.SUCCESS,
    [CalloutStyles['c-callout--warning']]: props.type === VALIDATION.WARNING,
    [CalloutStyles['c-callout--error']]: props.type === VALIDATION.ERROR,
    [CalloutStyles['c-callout--info']]: props.type === VALIDATION.INFO
  })
}))`
  ${props => retrieveTheme(COMPONENT_ID, props)};

const Hint = styled.div.attrs(props => ({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  className: classNames(CheckboxStyles['c-chk__hint'], {
    // RTL
    [CheckboxStyles['is-rtl']]: isRtl(props)
  })
}))`
  ${props => retrieveTheme(COMPONENT_ID, props)};

const StyledTextarea = styled(StyledTextInput.withComponent('textarea')).attrs(props => ({
  className: classNames(props.className, TextStyles['c-txt__input--area'], {
    [TextStyles['is-resizable']]: props.resizable,

    // RTL
    [TextStyles['is-rtl']]: isRtl(props)
  })
}))`
  ${props => retrieveTheme('forms.text_area', props)};

const Message = styled.div.attrs(props => ({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  className: classNames(
    CheckboxStyles['c-chk__message'],
    CheckboxStyles['c-chk__message--toggle'],
    {
      [CheckboxStyles['c-chk__message--success']]: props.validation === VALIDATION.SUCCESS,
      [CheckboxStyles['c-chk__message--warning']]: props.validation === VALIDATION.WARNING,
      [CheckboxStyles['c-chk__message--error']]: props.validation === VALIDATION.ERROR,

      // RTL
      [CheckboxStyles['is-rtl']]: isRtl(props)
    }
  )
}))`
  ${props => retrieveTheme(COMPONENT_ID, props)};

/** Applies inset `box-shadow` styling on focus */
  focusInset: PropTypes.bool,
  hovered: PropTypes.bool,
  /** Displays select open state */
  open: PropTypes.bool,
  renderItem: PropTypes.func.isRequired,
  maxItems: PropTypes.number,
  validation: PropTypes.oneOf([VALIDATION.SUCCESS, VALIDATION.WARNING, VALIDATION.ERROR])
};

Multiselect.defaultProps = {
  maxItems: 4
};

/* @component */
export default withTheme(Multiselect) as React.FunctionComponent;

);
});

Anchor.propTypes = {
  /** Apply danger styling */
  danger: PropTypes.bool,
  focused: PropTypes.bool,
  hovered: PropTypes.bool,
  active: PropTypes.bool,
  /* Used when the anchor navigates to an external resource */
  external: PropTypes.bool,
  children: PropTypes.node
};

/** @component */
export default withTheme(Anchor);

componentDidUpdate(prevProps, prevState) {
    const current = this.props.focusedKey === undefined ? this.state : this.props;
    const prev = prevProps.focusedKey === undefined ? prevState : prevProps;
    const doc = getDocument ? getDocument(this.props) : document;

    /**
     * We must programatically scroll the newly focused element into view.
     * Side-effect of the `aria-activedescendant` accessibility strategy.
     */
    if (typeof current.focusedKey !== 'undefined' && current.focusedKey !== prev.focusedKey) {
      const itemNode = doc.getElementById(this.getItemId(current.focusedKey));

      /* istanbul ignore if */
      if (itemNode) {
        scrollTo(itemNode);
      }
    }
  }