@bbc/psammead-embed-error

3.0.37 • 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.

Versions

Current Tags

Version History

Package Sidebar

Install

npm i @bbc/psammead-embed-error

Weekly Downloads

5

Version

3.0.37

License

Apache-2.0

Unpacked Size

57 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