# All files / react/Hero index.jsx

100% Statements 17/17
100% Branches 0/0
100% Functions 2/2
100% Lines 17/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35

    1x
    1x

    1x
    1x

    1x
    1x

    1x
    1x
    1x
    3x

    1x
    1x
    1x
    1x
    1x
    1x
    1x
     import React from 'react'
    import BaseIcon from '../Icon'
    import styles from './styles.styl'
    import { mkComponent } from '../utils'

    // Cannot use mkComponent since it is not picked up by styleguidist
    export const Hero = ({ children, ...props }) => (
      <div {...props} className={styles.Hero}>
        {children}
      </div>
    )

    export default Hero
    export const Title = mkComponent('h2', { className: styles['Hero-title'] })
    export const Subtitle = mkComponent('h3', {
      className: styles['Hero-subtitle']
    })
    export const Section = mkComponent('div', { className: styles['Hero-section'] })
    export const Sections = mkComponent('div', {
      className: styles['Hero-sections']
    })
    export const Paragraph = mkComponent('p', {})
    export const CTA = mkComponent('p', { className: styles['Hero-cta'] })
    export const Icon = ({ color, icon }) => (
      <BaseIcon width={80} height={80} style={{ color }} icon={icon} />
    )

    Hero.Title = Title
    Hero.Icon = Icon
    Hero.Subtitle = Subtitle
    Hero.Section = Section
    Hero.Sections = Sections
    Hero.Paragraph = Paragraph
    Hero.CTA = CTA