psammead-assets -

This package provides a collection of common assets that are likely to be required by many Psammead components or users, such as SVGs or small scripts.

Exports

/amp-boilerplate - A helper, allowing projects using Psammead to easily pull in a versioned copy of AMP's required boilerplate scripts. /svgs - SVG icons commonly required by projects using Psammead.

Installation

npm install @bbc/psammead-assets --save

Usage

import { BBC_BLOCKS, news } from '@bbc/psammead-assets/svgs';

import { AMP_SCRIPT } from '@bbc/psammead-assets/amp-boilerplate';

Service SVGs

Service brand SVGs, like news, are objects that contains an svg group, viewbox, ratio and height;

This package currently has brand SVGs for the BBC News World Services as well as for BBC News, BBC Scotland.

| Property | Type | Required | Default | Example | |------------|--------|----------|---------|--------------------------| | group | node | Yes | N/A | <g fillrule="evenodd"><path d="M84.32" /></g> | | viewbox | object | Yes | N/A | { height: 24, width: 167.95 } | | ratio | number | Yes | N/A | 6.9979 |

The width of your SVG can be calculated using your desired height multiplied by the ratio value provided above.

Usage

const WrappingContainer = () => (
  <svg viewBox={`0 0 ${news.viewbox.width} ${news.viewbox.height}`}>{news.group}</svg>
);

Core Icons SVGs

Core icons is an object containing styled SVG icons from GEL Iconography Core. By default Core icons are sized to work well alongside text from the GEL BodyCopy typography group.

Usage

import { coreIcons } from '@bbc/psammead-assets/svgs';

<p>{coreIcons.info} Did you know, in Switzerland it's illegal to own just one guinea pig?</p>

Media Icons SVGs

Media icons is an object containing styled SVG icons for video, audio, photogallery and guidance. Media icons are sized to work well alongside specific text with typography group GEL Minion. They are used in psammead-media-indicator and psammead-media-player components.

Usage

import { mediaIcons } from '@bbc/psammead-assets/svgs';

<span>
  {mediaIcons.audio}
  {duration && datetime && (<time dateTime={datetime}>{duration}</time>)}
</span>

Navigation Icons SVGs

Navigation icons is an object containing styled SVG icons for hamburger and cross. They are used in psammead-navigation component.

Usage

import { navigationIcons } from '@bbc/psammead-assets/svgs';

<span>
  {navigationIcons.cross}
</span>

Contributing

When adding a new export to this utility package the export tests also need to be updated. When removing an exisiting export from this utility package the export tests need to be updated and the package version requires a major change (EG: 1.2.1 -> 2.0.0) as this would be considered a breaking change due to functionality being removed.

Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead respository.

Code of Conduct

We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.

License

Psammead is Apache 2.0 licensed.