We have recently migrated most of our Psammead components (except for BBC Web Vitals) to a legacy folder in our Single Page Application called Simorgh.
Any open source contributions to these components should now be made via the Simorgh repo as they are no longer being maintained in the Psammead repo.
NB all Development Dependencies are in the top level package.json, none are in the packages.
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).
NB the main example of use is this repo's sibling repo Simorgh.
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.
| Package | Version | Dependencies | Peer Dependencies |
|---|---|---|---|
@bbc/psammead-timestamp-container |
 |
 |
 |
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 |
 |
 |
 |