@bbc/psammead-embed-error

    3.0.33 • Public • Published

    psammead-embed-error - Known Vulnerabilities Dependency Status peerDependencies Status Storybook GitHub license npm version PRs Welcome

    Description

    EmbedError is a lean error message component, designed for embedded content, such as that in an iframe. It will fill its parent container and can optionally fill the viewport, while positioning its content accordingly.

    Installation

    npm install @bbc/psammead-embed-error --save

    Props

    Argument Type Required Default Example
    service String No news arabic
    fillViewport Boolean No false true
    message String Yes - Sorry, we can't display this content.
    link Object No null See: link.

    link

    Argument Type Required Default Example
    text String Yes n/a View alternate content.
    href String Yes n/a https://www.bbc.co.uk/news/av-embed/a-video-about-dogs

    Usage

    This component is particularly useful if you serve content in an iframe and want users to have a seamless error experience. Consider the following example:

    // An article with an iframe.
    <iframe src="https://www.bbc.co.uk/news/av-embed/a-video-about-cats"></iframe>
    // iframe content.
    import EmbedError from '@bbc/psammead-embed-error';
    
    const Page = () => {
      if (error) {
        return
        <EmbedError
          message="Sorry, we can't display this content."
          link={{
            text: 'View alternate content.',
            href: 'https://www.bbc.co.uk/news/article/all-about-dogs',
          }}
          fillViewport
        />;
      }
    };

    Note the use of fillViewport, which ensures the error will fill the iframe in the article.

    When to use this component

    This component should be used when you want to display an error message that fills a container or viewport.

    When not to use this component

    This component should not be used to display messages other than errors.

    Accessibility notes

    This component's error message is wrapped in a <strong> element, indicating to users of assistive technology that it is an important message. This is similar behaviour to the Guidance component used in Media Player's Placeholder.

    Roadmap

    The requirements of this component are expected to change. Developments in Mozart's error reporting will influence how (and where) this component is used in the future.

    Contributing

    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 repository.

    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-embed-error

    DownloadsWeekly Downloads

    290

    Version

    3.0.33

    License

    Apache-2.0

    Unpacked Size

    56.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • news-vj-bot
    • silver-jenkins
    • bbc-web-core
    • ibl-jenkins
    • iplayer-web-jenkins
    • sport-web-jenkins
    • bbcconnections
    • bbc-gnl-ci
    • bbc-morph
    • itv-ci-machine
    • audienceplatformdev
    • bbc-archivesearch-development-team
    • sounds-web-jenkins
    • rmsdev
    • bbc-voice-pipeline
    • weather-jenkins
    • newslabs-jenkins
    • api-management-jenkins
    • mdtbuild
    • bbc-online
    • cps-support
    • bbc-cd-jenkins
    • locator-deploy
    • bbc-isite
    • travel-jenkins
    • participation-jenkins
    • bbc-news-jenkins
    • bbcrd
    • ibl
    • iplayerradio-aws
    • media-playout-jenkins
    • partner-platform-jenkins
    • bbc-admin
    • gel-jenkins
    • pcs-amp-jenkins
    • education-jenkins
    • insyn-jenkins
    • kite-jenkins
    • bbcrd-artifactory
    • iplayer-pc-downloads-pipeline-bot