How to use @instructure/ui-themeable - 10 common examples

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

import themeable from '@instructure/ui-themeable'

import TextInput from '@instructure/ui-core/lib/components/TextInput'
import Link from '@instructure/ui-core/lib/components/Link'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent'

import NavToggle from '../NavToggle'

import styles from './styles.css'
import theme from './theme'

@themeable(theme, styles)
export default class DocsNav extends Component {
  static propTypes = {
    components: PropTypes.object, // eslint-disable-line react/forbid-prop-types
    documents: PropTypes.array, // eslint-disable-line react/forbid-prop-types
    themes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
    selected: PropTypes.string // eslint-disable-line react/require-default-props
  }

  static defaultProps = {
    components: [],
    documents: [],
    themes: []
  }

  constructor (props) {
    super()

/*
    * URL of the image to display as the background image
    */
    src: PropTypes.string,
    /*
    * Accessible label
    */
    alt: PropTypes.string,
    size: PropTypes.oneOf(['auto', 'x-small', 'small', 'medium', 'large', 'x-large']),
    shape: PropTypes.oneOf(['circle', 'rectangle']),
    /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
    margin: ThemeablePropTypes.spacing,
    display: PropTypes.oneOf(['inline-block', 'block']),
    /**
    * Callback fired when the avatar image has loaded
    */
    onImageLoaded: PropTypes.func,
    /**
    * the element type to render as
    */
    as: PropTypes.elementType, // eslint-disable-line react/require-default-props
    /**
    * provides a reference to the underlying html element
    */
    elementRef: PropTypes.func,
    /* eslint-disable react/require-default-props */
    /**
    * __Deprecated - use `display`__

focusOutlineStyle: borders.style,
    focusOutlineWidth: borders.widthMedium,
    focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}

focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}

focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}

focusOutlineStyle: borders.style,
    focusOutlineWidth: borders.widthMedium,
    focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}

focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}

focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}

focusOutlineWidth: borders.widthMedium,
    focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}

focusOutlineWidth: borders.widthMedium,
    focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}