How to use the @pluralsight/ps-design-system-icon.sizes function in @pluralsight/ps-design-system-icon

To help you get started, we’ve selected a few @pluralsight/ps-design-system-icon examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pluralsight / design-system / packages / card / src / react / __stories__ / index.story.js View on Github external
<a href="http://duckduckgo.com?q=title">
            
              Image, Progress, Link Full Overlay, Icon, Link Title, Link Meta1,
              2, Action Bar, and More Really. Why Not Put More In? Release a New
              Edition Every Year With All the Excesses of our VC Budget?
              Boundless Features Will Be Yours 2000
            
          </a>
        
      }
      fullOverlay={
        
          <a href="http://duckduckgo.com?q=overlay">
            
          </a>
        
      }
      fullOverlayVisible
      image={
        
          <a href="http://duckduckgo.com?q=image">
            
          </a>
        
      }
      metadata1={longStringsMetaData.map(str =&gt; (
        
          <a href="http://duckduckgo.com/?q=jaketrent">{str}</a>
github pluralsight / design-system / packages / verticaltabs / src / react / index.js View on Github external
const TagName = tagName
    return (
      
        <button aria-label="{getButtonAriaLabel()}">
          <div>
            <span>{children}</span>
            
          </div>
        </button>
      
    )
  }
)
github pluralsight / design-system / packages / starrating / src / react / star.js View on Github external
function Star(props) {
  const themeName = useTheme()
  const Tag = props.interactive ? 'button' : 'span'
  const iconSize = Icon.sizes.small
  const value = props.index + 1
  const label = `Rate ${value} Star${value > 1 ? 's' : ''}`

  function handleClicked(event) {
    if (typeof props.onClick === 'function') props.onClick(props.index, event)
  }

  function handleEnter(event) {
    if (typeof props.onEnter === 'function') props.onEnter(props.index, event)
  }

  function handleLeave(event) {
    if (typeof props.onLeave === 'function') props.onLeave(props.index, event)
  }

  return (
github pluralsight / design-system / packages / verticaltabs / src / react / index.js View on Github external
Tier1.Header = forwardRef(({ active, children, icon, ...rest }, ref) =&gt; {
  const themeName = useTheme()
  const TagName = rest.href ? 'a' : rest.onClick ? 'button' : 'span'
  return (
    
      {icon &amp;&amp;
        cloneElement(icon, {
          size: Icon.sizes.medium,
          ...styles.itemIcon(themeName),
          ...(active ? { 'data-active': true } : {})
        })}
      <span>{children}</span>
    
  )
})
Tier1.Header.propTypes = {
github pluralsight / design-system / packages / card / src / react / __stories__ / index.story.js View on Github external
.add('linked icon', _ =&gt; (
    
          <a href="http://duckduckgo.com?q=overlay">
            
          </a>
        
      }
    /&gt;
  ))
  .add('linked icon with image link', _ =&gt; (