Numeric Production Mechanism

    @bbc/psammead-assets

    3.1.10 • Public • Published

    psammead-assets - Known Vulnerabilities Dependency Status peerDependencies Status GitHub license npm version PRs Welcome

    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.

    Install

    npm i @bbc/psammead-assets

    DownloadsWeekly Downloads

    310

    Version

    3.1.10

    License

    Apache-2.0

    Unpacked Size

    1.13 MB

    Total Files

    182

    Last publish

    Collaborators

    • bbc-online