@navinc/base-react-components/src/label-over-value.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import Copy from './copy'
import Header from './header.js'

const Label = styled(Copy).attrs(() => ({ size: 'xs' }))``

const LabelAlignmentWrapper = styled.div`
  display: flex;
  height: 30px;
  align-items: flex-end;
`

const Value = styled(Header).attrs(() => ({ size: 'md', as: Copy }))`
  min-height: 30px;
  word-break: break-word;
`

const Wrapper = styled.div`
  width: 122px;
  max-width: 270px;
  display: flex;
  flex-flow: column nowrap;
  border-bottom: solid 1px ${({ theme }) => theme.neutral300};
  border-top: solid 1px ${({ theme }) => theme.white};
  padding-bottom: 16px;
  padding-top: 16px;
  flex-grow: 1;
`

const Container = styled.div`
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  ${({ borderColor }) => (borderColor ? `border: 1px solid ${borderColor}` : '')};
  border-radius: 4px;
  padding: 16px;
  flex-grow: ${({ length = 1 }) => length};
  flex-shrink: ${({ length = 1 }) => length};
  margin-top: -16px; /* these margin-tops are to give space between rows when they wrap */
  margin-right: -16px;

  & > * {
    margin-right: 16px;
    margin-top: 16px;
  }

  & > & {
    margin-top: 16px;
    margin-right: 16px;

    & > ${Wrapper} {
      margin-top: 0;
      border: none;
      padding-bottom: 0;
      padding-top: 0;
    }
  }
`

export const LabelOverValue = ({ value = '', label = '' }) => (
  <Wrapper>
    <LabelAlignmentWrapper>
      <Label>{label}</Label>
    </LabelAlignmentWrapper>
    <Value>{value}</Value>
  </Wrapper>
)

export const LabelOverValueContainer = ({ children = [], borderColor }) => (
  <Container length={children.length} borderColor={borderColor}>
    {children}
  </Container>
)