psammead-inline-link -

Description

The @bbc/psammead-inline-link package exports a single Inline Link component. It uses an a HTML element and colours from @bbc/psammead-styles.

Installation

npm install @bbc/psammead-inline-link

Props

Usage

import InlineLink from '@bbc/psammead-inline-link';

const WrappingComponent = () => (
  <InlineLink href="https://www.bbc.com/news">Text here</InlineLink>
);

We have not included any typography styles inside this component. This is so it is reusable in multiple contexts. For example, you can use InlineLink inside our existing psammead-paragraph for body copy and psammead-headings for headlines and subheadings (h1s and h2s).

Example inline link in a paragraph:

import InlineLink from '@bbc/psammead-inline-link';
import Paragraph from '@bbc/psammead-paragraph';

const WrapperComponent = () => (
  <Paragraph>I am a paragraph that has a link to <InlineLink href="https://www.bbc.com/news">the BBC News front page</InlineLink>.<Paragraph>
);

Example inline link in a Headline or SubHeading:

import InlineLink from '@bbc/psammead-inline-link';
import { Headline, SubHeading } from '@bbc/psammead-headings';

const HeadlineWithALink = () => (
  <InlineLink href="https://www.bbc.com/news"><Headline>Headline</Headline></InlineLink>


  const SubHeadingWithALink = () => (
  <InlineLink href="https://www.bbc.com/news"><SubHeading>SubHeading</SubHeading></InlineLink>
);

Alternatively, if you want to just extend existing styles with other GEL Typography groups, you can do the following:

import InlineLink from '@bbc/psammead-inline-link';
import { GEL_PARAGON } from '@bbc/gel-foundations';

const GelParagonLink = styled(InlineLink)`
  ${GEL_PARAGON};
`;

const WrapperComponent = () => (
  <GelParagonLink href="https://www.bbc.com/news">
    Link with GEL Paragon typography
  </GelParagonLink>
);

When to use this component

This component can be used at any point on a page.

Accessibility notes

Since this is just a <a> tag with associated styles, when you use this component, it has the same semantic meaning as a regular anchor element.

The font and background-color choices for each hover/focused/visited/default states meet WCAG AA colour contrast guidelines. Also the border width increases on hover and focus which acts as a visible change that is not colour dependent for high-contrast modes, which often override colours/styles.

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