How to use pcln-design-system - 10 common examples

Card,
  BackgroundImage,
  Heading,
  Text,
  Button,
  Divider,
  Icon
} from 'pcln-design-system'
import PageTitle from './PageTitle'
import Pre from './Pre'
import Markdown from './Markdown'
import Container from './Container'
import Description from './Description'

// This will require a fix in the Button component
Button.a = Button.withComponent('a').extend`
  line-height: 48px;
`

const Landing = props => {
  const gettingStarted = props.content.find(c => c.name === 'GettingStarted')
    .content
  return (
    
      
        Priceline One
        {props.pkg.description}

import {
  Box,
  Card,
  Flex,
  Heading,
  Text,
  Divider,
  theme
} from 'pcln-design-system'
import PageTitle from './PageTitle'
import Description from './Description'
import Code from './Code'
import CopyButton from './CopyButton'
import Pagination from './Pagination'

const colors = Object.keys(theme.colors)
  .filter(key => !/[0-9]$/.test(key))
  .map(key => ({
    name: key,
    value: theme.colors[key]
  }))
  .filter(color => !Array.isArray(color.value))

const primaries = colors.filter(
  color => !/^(lightGray|gray|borderGray|darkGray)$/.test(color.name)
)
const grays = colors.filter(color =>
  /^(lightGray|gray|borderGray|darkGray)$/.test(color.name)
)

const ColorChip = styled(Box)`
  height: 100px;

.map(key => ({
    name: key,
    value: theme.colors[key]
  }))
  .filter(color => !Array.isArray(color.value))

const ArrowPlacement = ({ background, borderColor }) => {
  const bgColor = theme.colors[background]
  const brColor = theme.colors[borderColor]

  return `
    &[data-placement*="right"]::before {
      left: 8px;
      border-color: ${bgColor} transparent transparent ${bgColor};
      box-shadow: -0.75px -0.75px 0px 0.25px ${brColor};
    }
    &[data-placement*="left"]::after {
      right: 13px;
      border-color: transparent ${bgColor} ${bgColor} transparent;
      box-shadow: 0.75px 0.75px 0px 0.25px ${brColor};
    }
    &[data-placement*="top"]::after {
      top: -16px;
      margin-left: -5px;

const ArrowPlacement = ({ background, borderColor }) => {
  const bgColor = theme.colors[background]
  const brColor = theme.colors[borderColor]

  return `
    &[data-placement*="right"]::before {
      left: 8px;
      border-color: ${bgColor} transparent transparent ${bgColor};
      box-shadow: -0.75px -0.75px 0px 0.25px ${brColor};
    }
    &[data-placement*="left"]::after {
      right: 13px;
      border-color: transparent ${bgColor} ${bgColor} transparent;
      box-shadow: 0.75px 0.75px 0px 0.25px ${brColor};
    }
    &[data-placement*="top"]::after {
      top: -16px;
      margin-left: -5px;
      border-color: transparent transparent ${bgColor} ${bgColor};

)

export const Description = props =>

{[...theme.fontSizes].reverse().map((fontSize, i) => (
        
          
            {fontSize}px ({theme.fontSizes.length - i - 1}) Discover new deals
            every day.
          
        
      ))}

const Typography = props => (
  
    Typography
    
      The design system includes base styles for typography and a typographic
      scale for determining font sizes.
    
    
      {[...theme.fontSizes].reverse().map((fontSize, i) => (
        
          
            {fontSize}px ({theme.fontSizes.length - i - 1}) Discover new deals
            every day.
          
        
      ))}
    
    
  
)

import styled from 'styled-components'
import { Container } from 'pcln-design-system'
import { space, width } from 'styled-system'

const DocsContainer = Container.extend`
  max-width: 780px;
  ${space} ${width};
`

DocsContainer.defaultProps = {
  width: 1,
  px: 3
}

export default DocsContainer

const Column = props => (
  
)

const ColorList = props =>
  props.colors.map(color => (
    
      
    
  ))

export const SectionTitle = props => (
  
)

const defaultPalette = createTheme().palette

const rest = {}

const Palette = props => (
  
    Palette
    
      The design system includes a palette that can be used to theme components.
    
    {Object.keys(defaultPalette).map(key => {
      if (typeof defaultPalette[key] === 'object') {
        return (
          
            {key}