README.md

Psammead Packages Directory...

NB all Development Dependencies are in the top level package.json, none are in the packages.

Documentation index

Please familiarise yourself with our:

• Code of conduct
• Code Standards and Ways of Working
• Contributing guidelines
• Guide to Code Reviews
• Github Project Board Guide
• Primary README
• Versioning and changelogs
• Use/consumption of Psammead packages guidelines and package list (you are here)
• Things to do when creating a new component

NB there is further documentation colocated with relevant packages and code. The above list is an index of the top-level documentation of our repo (and our sibling repo Simorgh).

Using/consuming Psammead components

NB the main example of use is this repo's sibling repo Simorgh.

Pre-requisite for use

These components have been tested in an environment which uses normalize and box-sizing: border-box for consistent behaviour across browsers. Additionally, many components depend on the BBC Reith font having been defined.

You can do this in pure CSS:

<link
  rel="stylesheet"
  href="https://necolas.github.io/normalize.css/8.0.0/normalize.css"
/>
<style>
  /* Box Sizing https://bit.ly/1A91I0J */
  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  @font-face {
    font-display: optional;
    font-family: 'ReithSans';
    font-style: normal;
    font-weight: 400;
    src: url('https://gel.files.bbci.co.uk/r2.511/BBCReithSans_W_Rg.woff2')
        format('woff2'), url('https://gel.files.bbci.co.uk/r2.511/BBCReithSans_W_Rg.woff')
        format('woff');
  }
  @font-face {
    font-display: optional;
    font-family: 'ReithSerif';
    font-style: normal;
    font-weight: 600;
    src: url('https://gel.files.bbci.co.uk/r2.511/BBCReithSerif_W_Md.woff2')
        format('woff2'), url('https://gel.files.bbci.co.uk/r2.511/BBCReithSerif_W_Md.woff')
        format('woff');
  }
</style>

Or if you're using styled-components, you can use styled-normalize (npm install styled-normalize) and createGlobalStyle to manage global styles as has been done in Simorgh.

See documentation on the Styled Components site

NOTE: if you run into issues with CSS not being applied to your components, it is likely that there is a duplicate styled-components dependency somewhere in your packages. You can try running npm dedupe in most cases, or lerna bootstrap --hoist in monorepo setups such as Psammead's. Failing that, make sure your application's styled-components dependency is the same version as that in Psammead.

List of all packages

Components

Package	Version	Dependencies	Peer Dependencies
@bbc/psammead-brand
@bbc/psammead-caption
@bbc/psammead-consent-banner
@bbc/psammead-copyright
@bbc/psammead-figure
@bbc/psammead-grid
@bbc/psammead-headings
@bbc/psammead-image
@bbc/psammead-image-placeholder
@bbc/psammead-inline-link
@bbc/psammead-media-indicator
@bbc/psammead-media-player
@bbc/psammead-most-read
@bbc/psammead-navigation
@bbc/psammead-paragraph
@bbc/psammead-section-label
@bbc/psammead-story-promo
@bbc/psammead-story-promo-list
@bbc/psammead-timestamp
@bbc/psammead-visually-hidden-text

Containers

Package	Version	Dependencies	Peer Dependencies
@bbc/psammead-timestamp-container

Utilities

In order to be added to Psammead, utility packages should:

• be common requirements of many of the repo's components, or many of the repo's users.
• contain realistic usage examples.

Package	Version	Dependencies	Peer Dependencies
@bbc/gel-foundations
@bbc/moment-timezone-include
@bbc/psammead-assets
@bbc/psammead-locales
@bbc/psammead-storybook-helpers
@bbc/psammead-styles
@bbc/psammead-test-helpers