<header class="page-description ">
    <div class="row page-description__row row--lead row--lead--l">
        <div class="container page-description__container">
            <div class="grid">
                <div class="
            grid__cell grid__cell--s12 grid__cell--m10 grid__cell--shift-m1
            grid__cell grid__cell--l11 grid__cell--shift-l1 grid__cell--xl10 grid__cell--shift-xl1">
                    <h1 class="font-WB5-s font-WB4-m font-WB3-l page-description__title">Inspired: Alchemists and housewives around a long table</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="container">
            <div class="grid">
                <div class="
              grid__cell grid__cell--shift-m1
              grid__cell grid__cell--shift-l1 grid__cell--shift-xl1
            "><span class="page-description__subtext font-HNL5-s"><div class="icon margin-right-s1"><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" aria-hidden="true"><svg viewBox="0 0 26 26"><path class="icon__shape" d="M12.9 3.1a10.17 10.17 0 1 0 10.17 10.16A10.18 10.18 0 0 0 12.9 3.1zm0 18.33a8.17 8.17 0 1 1 8.17-8.17 8.17 8.17 0 0 1-8.17 8.17z"></path><path class="icon__shape" d="M16.83 13.06h-3v-4.5a1 1 0 0 0-2 0v5.5a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2z"></path></svg></svg></div><span>Invalid date</span></span>
                </div>
            </div>
        </div>
    </div>
</header>
// @flow

import {grid, font, spacing} from '../../../utils/classnames';
import {formatDate} from '../../../utils/format-date';
import Icon from '../Icon/Icon';

type Props = {|
  lead?: boolean,
  title: string,
  meta?: {|
    type?: string,
    value: string
  |},
  intro?: string,
  icon?: string,
  extraClasses?: string
|};

function renderMeta({type, value}) {
  return type === 'date'
    ? [<Icon key="1" name='clock' extraClasses='margin-right-s1' />, <span key="2">{formatDate(new Date(value))}</span>]
    : [value];
}

const PageDescription = ({lead, title, meta, intro, icon, extraClasses}: Props) => (
  <header className={`page-description ${extraClasses || ''}`}>
    <div className={`row page-description__row ${lead ? 'row--lead row--lead--l' : ''}`}>
      <div className='container page-description__container'>
        <div className='grid'>
          <div className={`
            ${grid({s: 12, m: 10, shiftM: 1})}
            ${lead
    ? grid({l: 11, shiftL: 1, xl: 10, shiftXl: 1})
    : grid({l: 12, xl: 11})
  }`}>
            {intro &&
              <span className={`
              page-description__intro
              ${font({s: 'WB7', m: 'WB6', l: 'WB5'})}
              ${spacing({s: 1, l: 2}, {margin: ['bottom']})}
            `}>{intro}</span>
            }
            <h1 className={`${font({s: 'WB5', m: 'WB4', l: 'WB3'})} page-description__title`}>
              {icon && <Icon name={icon} />}
              {title}
            </h1>
          </div>
        </div>
      </div>
    </div>
    {meta &&
      <div className='row'>
        <div className='container'>
          <div className='grid'>
            <div className={`
              ${grid({shiftM: 1})}
              ${lead ? grid({shiftL: 1, shiftXl: 1}) : ''}
            `}>
              <span className={`page-description__subtext ${font({s: 'HNL5'})}`}>
                {renderMeta(meta)}
              </span>
            </div>
          </div>
        </div>
      </div>
    }
  </header>
);

export default PageDescription;
{
  "lead": true,
  "title": "Inspired: Alchemists and housewives around a long table",
  "meta": {
    "type": "date",
    "value": {}
  }
}
  • Handle: @pagedescription
  • Preview:
  • Filesystem Path: ../common/views/components/PageDescription/PageDescription.js

There are no notes for this item.