How to use @pluralsight/ps-design-system-icon - 10 common examples

[`.psds-dropdown__field--error.psds-theme--${themeNames.light}`]: {
    border: '1px solid transparent'
  },
  [`.psds-dropdown__field--appearance-${vars.appearances.subtle}`]: {
    color: core.colors.gray01,
    background: core.colors.gray04,
    border: `none`
  },

  // __field-container
  '.psds-dropdown__field-container': {
    position: 'relative',
    display: 'inline-flex',
    alignItems: 'center',
    width: '100%',
    minWidth: `calc(${iconWidths.medium} + ${core.layout.spacingXSmall})`,
    maxWidth: '100%',
  },
  '.psds-dropdown__field-aligner': {
    display: 'inline-flex',
    alignItems: 'center',
    width: '100%',
    maxWidth: '100%',
  },

  // __icon
  '.psds-dropdown__icon': {
    position: 'absolute',
    left: 'auto',
    right: core.layout.spacingXSmall,
    display: 'flex',
    alignItems: 'center',

}
  },

  [`.psds-text-input__field--error.psds-theme--${themeNames.light}`]: {
    border: '1px solid transparent'
  },
  [`.psds-text-input__field--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01,
    background: colors.gray06,
    border: `1px solid ${colors.gray03}`
  },
  [`.psds-text-input__field--appearance-${vars.appearances.subtle}.psds-theme--${themeNames.light}`]: {
    color: colors.gray05
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.left}`]: {
    padding: `0 ${layout.spacingMedium} 0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall})`
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.right}`]: {
    padding: `0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall}) 0 ${layout.spacingMedium}`
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.left}.psds-text-input--small`]: {
    padding: `0 ${layout.spacingXSmall} 0 ${parseInt(
      layout.spacingMedium,
      10
    ) + parseInt(iconWidths.medium, 10)}px`
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.right}.psds-text-input--small`]: {
    padding: `0 ${parseInt(layout.spacingMedium, 10) +
      parseInt(iconWidths.medium, 10)}px 0 ${layout.spacingXSmall}`
  },

  // __field-container

// __sub-label
  '.psds-text-input__sub-label': {
    color: colors.gray02,
    fontSize: type.fontSizeXSmall,
    lineHeight: '16px',
    fontWeight: type.fontWeightMedium,
    paddingTop: layout.spacingXSmall
  },
  [`.psds-text-input__sub-label.psds-theme--${themeNames.light}`]: {
    color: colors.gray03
  },

  // __error
  '.psds-text-input__error': {
    position: 'absolute',
    right: `calc(-1 * (${iconWidths.medium} + ${layout.spacingXSmall}))`,
    display: 'flex',
    alignItems: 'center',
    color: colors.red,
    marginLeft: layout.spacingXSmall
  }
}

// __search
  '.psds-error-page__search': {
    position: 'relative',
    display: 'inline-flex',
    alignItems: 'center',
    color: colors.gray02
  },
  [`.psds-error-page__search.psds-theme--${themeNames.light}`]: {
    background: colors.white,
    color: colors.gray03
  },
  '.psds-error-page__search__icon': {
    position: 'absolute',
    left: layout.spacingXSmall,
    width: iconWidths.medium,
    height: iconWidths.medium,
    fill: colors.gray02
  },
  '.psds-error-page__search__input': {
    position: 'relative',
    height: '40px',
    padding: `0 ${layout.spacingXSmall} 0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall})`,
    color: colors.gray02,
    fontSize: type.fontSizeSmall,
    lineHeight: type.lineHeightStandard,
    background: 'none',
    border: `1px solid ${colors.gray03}`,
    borderRadius: '2px'
  },
  [`.psds-error-page__search__input.psds-theme--${themeNames.light}`]: {
    color: colors.gray03
  },

// __search
  '.psds-error-page__search': {
    position: 'relative',
    display: 'inline-flex',
    alignItems: 'center',
    color: colors.gray02
  },
  [`.psds-error-page__search.psds-theme--${themeNames.light}`]: {
    background: colors.white,
    color: colors.gray03
  },
  '.psds-error-page__search__icon': {
    position: 'absolute',
    left: layout.spacingXSmall,
    width: iconWidths.medium,
    height: iconWidths.medium,
    fill: colors.gray02
  },
  '.psds-error-page__search__input': {
    position: 'relative',
    height: '40px',
    padding: `0 ${layout.spacingXSmall} 0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall})`,
    color: colors.gray02,
    fontSize: type.fontSizeSmall,
    lineHeight: type.lineHeightStandard,
    background: 'none',
    border: `1px solid ${colors.gray03}`,
    borderRadius: '2px'
  },
  [`.psds-error-page__search__input.psds-theme--${themeNames.light}`]: {
    color: colors.gray03

border: 'none',
    color: colors.gray05
  },
  [`.psds-date-picker__sub-field-divider--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01
  },

  // __field-container
  '.psds-date-picker__field-container': {
    position: 'relative',
    display: 'flex',
    borderRadius: '2px',
    alignItems: 'center',
    width: '100%',
    height: '40px',
    minWidth: `calc(192px + ${iconWidths.medium} + ${layout.spacingXSmall})`,
    padding: `0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall}) 0 ${layout.spacingMedium}`,
    background: colors.bone
  },
  [`.psds-date-picker__field-container.psds-theme--${themeNames.light}`]: {
    background: colors.white,
    border: `1px solid ${colors.gray02}`
  },
  [`.psds-date-picker__field-container--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01,
    background: colors.gray06,
    border: `1px solid ${colors.gray03}`
  },

  // __icon
  '.psds-date-picker__icon': {
    position: 'absolute',

it('forwards ref', () => {
    const refToForward = React.createRef()

    const { getByTestId } = render(
      }
      >
    )

    const el = getByTestId('under-test')
    expect(el).toBe(refToForward.current)
  })
})

{
        href: '#',
        id: 'knowledge-sharing',
        title: 'Knowledge Sharing'
      },
      {
        href: '#',
        id: 'player-card',
        title: 'Player Card'
      }
    ]
  },
  {
    collapsible: true,
    header: {
      icon: ,
      id: 'delivery',
      title: 'Delivery'
    },
    items: [
      {
        href: '#',
        title: 'Retrospective'
      }
    ]
  },
  {
    collapsible: true,
    header: {
      icon: ,
      id: 'fundamentals',
      title: 'Fundamentals'

.add('just icon button', _ => (
    }>
      As a button
    
  ))
  .add('button w/ icon button', _ => (

return (
      
        <button aria-label="{getButtonAriaLabel()}">
          <div>
            <span>{children}</span>
            
          </div>
        </button>
      
    )
  }
)