src/app/legacy/psammead/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](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)
- [Code Standards and Ways of Working](https://github.com/bbc/psammead/blob/latest/Code-Standards-and-Ways-of-Working.md)
- [Contributing guidelines](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)
- [Guide to Code Reviews](https://github.com/bbc/simorgh/blob/latest/docs/Code-Reviews.mdx)
- [Primary README](https://github.com/bbc/psammead/blob/latest/README.md)
- [Versioning and changelogs](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md#versioning-and-changelogs)
- [Use/consumption of Psammead packages guidelines and package list](https://github.com/bbc/psammead/blob/latest/packages/README.md) (you are here)
- [Things to do when creating a new component](https://github.com/bbc/psammead/blob/latest/Creating-a-new-component.md)
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](https://github.com/bbc/simorgh)).
## Using/consuming Psammead components
NB the main example of use is this repo's sibling repo [Simorgh](https://github.com/bbc/simorgh).
### Pre-requisite for use
These components have been tested in an environment which uses [normalize](https://github.com/necolas/normalize.css) and [`box-sizing: border-box`](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/) for consistent behaviour across browsers. Additionally, many components depend on the BBC Reith font having been defined.
You can do this in pure CSS:
```html
<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://static.files.bbci.co.uk/fonts/reith/r2.512/BBCReithSans_W_Rg.woff2')
format('woff2'), url('https://static.files.bbci.co.uk/fonts/reith/r2.512/BBCReithSans_W_Rg.woff')
format('woff');
}
@font-face {
font-display: optional;
font-family: 'ReithSerif';
font-style: normal;
font-weight: 600;
src: url('https://static.files.bbci.co.uk/fonts/reith/r2.512/BBCReithSerif_W_Md.woff2')
format('woff2'), url('https://static.files.bbci.co.uk/fonts/reith/r2.512/BBCReithSerif_W_Md.woff')
format('woff');
}
</style>
```
Or if you're using [styled-components](https://styled-components.com), you can use [styled-normalize](https://www.npmjs.com/package/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](https://www.styled-components.com/docs/tooling#babel-plugin)
**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`](https://www.styled-components.com/docs/faqs#duplicated-module-in-node_modules) in most cases, or [`lerna bootstrap --hoist`](https://www.styled-components.com/docs/faqs#usage-with-lerna) 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](./components)
<!-- prettier-ignore -->
| Package | Version | Dependencies | Peer Dependencies
|--------|--------|------------|------------|
| [`#legacy/psammead-brand/src`](./components/psammead-brand) | [](https://www.npmjs.com/package/#legacy/psammead-brand/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-brand) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-brand&type=peer) |
| [`#legacy/psammead-caption/src`](./components/psammead-caption) |[](https://www.npmjs.com/package/#legacy/psammead-caption/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-caption) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-caption&type=peer) |
| [`#legacy/psammead-consent-banner/src`](./components/psammead-consent-banner) |[](https://www.npmjs.com/package/#legacy/psammead-consent-banner/src) | [](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-consent-banner) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-consent-banner&type=peer) |
| [`#legacy/psammead-figure/src`](./components/psammead-figure) |[](https://www.npmjs.com/package/#legacy/psammead-figure/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-figure) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-figure&type=peer) |
| [`#legacy/psammead-grid/src`](./components/psammead-grid) |[](https://www.npmjs.com/package/#legacy/psammead-grid/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-grid) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-grid&type=peer) |
| [`#legacy/psammead-headings/src`](./components/psammead-headings) |[](https://www.npmjs.com/package/#legacy/psammead-headings/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-headings) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-headings&type=peer) |
| [`#legacy/psammead-image/src`](./components/psammead-image) |[](https://www.npmjs.com/package/#legacy/psammead-image/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-image) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-image&type=peer) |
| [`#legacy/psammead-image-placeholder/src`](./components/psammead-image-placeholder) |[](https://www.npmjs.com/package/#legacy/psammead-image-placeholder/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-image-placeholder) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-image-placeholder&type=peer) |
| [`#legacy/psammead-inline-link/src`](./components/psammead-inline-link) |[](https://www.npmjs.com/package/#legacy/psammead-inline-link/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-inline-link) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-inline-link&type=peer) |
| [`#legacy/psammead-media-indicator/src`](./components/psammead-media-indicator) |[](https://www.npmjs.com/package/#legacy/psammead-media-indicator/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-media-indicator) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-media-indicator&type=peer) |
| [`@bbc/psammead-media-player`](./components/psammead-media-player) |[](https://www.npmjs.com/package/@bbc/psammead-media-player) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-media-player) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-media-player&type=peer) |
| [`#legacy/psammead-navigation/src`](./components/psammead-navigation) |[](https://www.npmjs.com/package/#legacy/psammead-navigation/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-navigation) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-navigation&type=peer) |
| [`#legacy/psammead-paragraph/src`](./components/psammead-paragraph) |[](https://www.npmjs.com/package/#legacy/psammead-paragraph/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-paragraph) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-paragraph&type=peer) |
| [`#legacy/psammead-section-label/src`](./components/psammead-section-label) |[](https://www.npmjs.com/package/#legacy/psammead-section-label/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-section-label) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-section-label&type=peer) |
| [`#legacy/psammead-story-promo/src`](./components/psammead-story-promo) |[](https://www.npmjs.com/package/#legacy/psammead-story-promo/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-story-promo) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-story-promo&type=peer) |
| [`#legacy/psammead-story-promo-list/src`](./components/psammead-story-promo-list) |[](https://www.npmjs.com/package/#legacy/psammead-story-promo-list/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-story-promo-list) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-story-promo-list&type=peer) |
| [`#legacy/psammead-timestamp/src`](./components/psammead-timestamp) |[](https://www.npmjs.com/package/#legacy/psammead-timestamp/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-timestamp) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-timestamp&type=peer) |
| [`#legacy/psammead-visually-hidden-text/src`](./components/psammead-visually-hidden-text) |[](https://www.npmjs.com/package/#legacy/psammead-visually-hidden-text/src) |[](https://david-dm.org/bbc/psammead?path=packages/components/psammead-visually-hidden-text) | [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-visually-hidden-text&type=peer) |
### [Containers](./containers)
<!-- prettier-ignore -->
| Package | Version | Dependencies | Peer Dependencies
|--------|--------|------------|------------|
| [`#legacy/psammead-timestamp-container/src`](./containers/psammead-timestamp-container) |[](https://www.npmjs.com/package/#legacy/psammead-timestamp-container/src) |[](https://david-dm.org/bbc/psammead?path=packages/containers/psammead-timestamp-container) | [](https://david-dm.org/bbc/psammead?path=packages/containers/psammead-timestamp-container&type=peer) |
### [Utilities](./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.
<!-- prettier-ignore -->
| Package | Version | Dependencies | Peer Dependencies
|--------|--------|------------|------------|
| [`#legacy/gel-foundations/src`](./utilities/gel-foundations) |[](https://www.npmjs.com/package/#legacy/gel-foundations/src) |[](https://david-dm.org/bbc/psammead?path=packages/utilities/gel-foundations) | [](https://david-dm.org/bbc/psammead?path=packages/utilities/gel-foundations&type=peer) |
| [`#legacy/moment-timezone-include`](./utilities/moment-timezone-include) |[](https://www.npmjs.com/package/#legacy/moment-timezone-include) |[](https://david-dm.org/bbc/psammead?path=packages/utilities/moment-timezone-include) | [](https://david-dm.org/bbc/psammead?path=packages/utilities/moment-timezone-include&type=peer) |
| [`#legacy/psammead-assets/src`](./utilities/psammead-assets) |[](https://www.npmjs.com/package/#legacy/psammead-assets/src) |[](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-assets) | [](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-assets&type=peer) |
| [`#legacy/psammead-locales`](./utilities/psammead-locales) |[](https://www.npmjs.com/package/#legacy/psammead-locales) |[](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-locales) | [](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-locales&type=peer) |
| [`@bbc/psammead-storybook-helpers`](./utilities/psammead-storybook-helpers) |[](https://www.npmjs.com/package/@bbc/psammead-storybook-helpers) |[](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-storybook-helpers) | [](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-storybook-helpers&type=peer) |
| [`#legacy/psammead-styles/src`](./utilities/psammead-styles) |[](https://www.npmjs.com/package/#legacy/psammead-styles/src) |[](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-styles) | [](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-styles&type=peer) |
| [`@bbc/psammead-test-helpers`](./utilities/psammead-test-helpers) |[](https://www.npmjs.com/package/@bbc/psammead-test-helpers) |[](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-test-helpers) | [](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-test-helpers&type=peer) |