How to use @pluralsight/ps-design-system-link - 5 common examples

.add('as a link', _ => (
    
          <a href="#">i'm a link</a>
        ,
        
          <a href="#">i'm a subtle link</a>
        
      ]}
    /&gt;
  ))

<p>Install the component dependency:</p>
      <code>
        npm install @pluralsight/ps-design-system-link
      </code>

      <p>Include a React component in your project:</p>
      <code>
        import Link from '@pluralsight/ps-design-system-link'
      </code>

      default,
            <span>
              visual style (from <code>Link.appearances</code>)
            </span>
          ])
        ]}
      /&gt;

      Inline links
      <p>
        Links are used to embed actions or pathways to more information within a
        sentence.
      </p>
      <p>
        The Link component simply styles the child element that you pass to it.</p>

.add('with linked heading', _ => (
    
          
            <a href="#">Bob Ross</a>
          
        <p></p>
      }
    /&gt;
  ))
  .add('without avatar and author', _ =&gt; (

<a href="{props.href}">
        {props.children}
      </a>
    
  ) : (
    
      
        <a>
          {props.children}
        </a>
      
    
  )
})
Link.appearances = DSLink.appearances
Link.propTypes = {
  appearance: PropTypes.oneOf(
    Object.keys(DSLink.appearances).map(k =&gt; DSLink.appearances[k])
  ),
  children: PropTypes.node,
  href: PropTypes.string,
  onClick: PropTypes.func
}
export default Link

    Object.keys(DSLink.appearances).map(k => DSLink.appearances[k])
  ),