import React from 'react'

import { StarRating } from 'playbook-ui'

const StarRatingDefault = (props) => (
  <>
    <StarRating
        paddingBottom="xs"
    />

    <StarRating
        paddingBottom="xs"
        rating={0.9}
    />

    <StarRating
        paddingBottom="xs"
        rating={1.5}
    />

    <StarRating
        paddingBottom="xs"
        rating={3}
    />

    <StarRating
        paddingBottom="xs"
        rating={4.2}
    />

    <StarRating
        paddingBottom="xs"
        rating={5}
    />
  </>
)

export default StarRatingDefault

import React from 'react'

import { StarRating } from 'playbook-ui'

const StarRatingColorOptions = (props) => (
  <>

    <StarRating
        paddingBottom="xs"
        rating={3}
    />

    <StarRating
        colorOption='primary'
        paddingBottom="xs"
        rating={3}
    />

    <StarRating
        colorOption='subtle'
        paddingBottom="xs"
        rating={3}
    />

  </>
)

export default StarRatingColorOptions

import React from 'react'

import { StarRating } from 'playbook-ui'

const StarRatingBackgroundOptions = (props) => (
  <>

    <StarRating
        paddingBottom="xs"
        rating={3}
    />

    <StarRating
        backgroundType='outline'
        paddingBottom="xs"
        rating={3}
    />

  </>
)

export default StarRatingBackgroundOptions

import React from 'react'

import { StarRating } from 'playbook-ui'

const StarRatingHide = (props) => (
    <>
        <StarRating
            paddingBottom="xs"
            rating={3}
        />

        <StarRating
            layoutOption={"number"}
            paddingBottom="xs"
            rating={2.8}
        />

        <StarRating
            layoutOption={"number"}
            paddingBottom="xs"
            rating={3}
        />

        <StarRating
            layoutOption={"onestar"}
            paddingBottom="xs"
            rating={1}
        />
    </>
)

export default StarRatingHide

import React from 'react'

import { StarRating } from 'playbook-ui'

const StarRatingNumberConfig = (props) => (
  <>

    <StarRating
        denominator={3}
        paddingBottom="xs"
        rating={3}
    />

    <StarRating
        denominator={4}
        paddingBottom="xs"
        rating={3}
    />

    <StarRating
        denominator={5}
        paddingBottom="xs"
        rating={3}
    />

    <StarRating
        denominator={6}
        paddingBottom="xs"
        rating={3}
    />

    <StarRating
        denominator={7}
        paddingBottom="xs"
        rating={3}
    />

    <StarRating
        denominator={8}
        paddingBottom="xs"
        rating={3}
    />

  </>
)

export default StarRatingNumberConfig

import React from 'react'

import { StarRating } from 'playbook-ui'

const StarRatingSizeOptions = (props) => (
  <>

    <StarRating
        paddingBottom="xs"
        rating={3}
        size="xs"
    />

    <StarRating
        paddingBottom="xs"
        rating={3}
        size="sm"
    />

    <StarRating
        paddingBottom="xs"
        rating={3}
        size="md"
    />

    <StarRating
        paddingBottom="xs"
        rating={3}
        size="lg"
    />

    <StarRating
        layoutOption="number"
        paddingBottom="xs"
        rating={3}
        size="lg"
    />

    <StarRating
        layoutOption="onestar"
        paddingBottom="xs"
        rating={3}
        size="lg"
    />

  </>
)

export default StarRatingSizeOptions

import React from 'react'

import { StarRating } from 'playbook-ui'

const StarRatingInteractive = (props) => (
    <>
        <StarRating
            paddingBottom="xs"
            variant="interactive"
        />
    </>
)

export default StarRatingInteractive