React

Description

Special Links renders a footer group of one or more Link items. Each entry in links is rendered as a Link at the md size, and the group carries the footer navigation analytics attributes.

Component

Import the SpecialLinks component from @tmedxp/aem-react-components.

Properties

Prop	Type	Description	Required
`links`	`LinkModel[]`	Collection of link items to render in the group.	✅
`opensInNewWindowLabel`	`string`	Localised label read by screen readers for links that open a new window.	✅

LinkModel properties

Prop	Type	Description	Required
`linkType`	`LinkType`	`INTERNAL_PATH` or `EXTERNAL_PATH`; selects the resolved destination.	✅
`linkText`	`string`	Visible label and default accessible name of the link.	✅
`internalLink`	`string`	Internal destination path.	✅
`externalLink`	`string`	External destination URL.	✅
`ctaType`	`CtaType`	Analytics CTA type; `'empty'` falls back to `linkText`.	✅
`internalLinkBehaviour`	`LinkBehaviour`	Same-tab / new-tab behaviour for internal destinations.	✅
`externalLinkBehaviour`	`LinkBehaviour`	Same-tab / new-tab behaviour for external destinations.	✅
`internalTitle`	`string`	`title` attribute used for internal destinations.	✅
`overlayTitleInternal`	`string`	Overlay title for internal destinations.	✅
`overlayTitleExternal`	`string`	Overlay title for external destinations.	✅
`disableNoreferrer`	`boolean`	Omits `noreferrer` from `rel` when opening a new tab.	✅

Example

import {
  LINK_BEHAVIOUR_CONFIGURATION,
  LINK_TYPE,
  SpecialLinks,
} from '@tmedxp/aem-react-components';

const SpecialLinksExample = () => {
  return (
    <SpecialLinks
      opensInNewWindowLabel="(opens in a new window)"
      links={[
        {
          linkType: LINK_TYPE.INTERNAL_PATH,
          linkText: 'Get in touch',
          internalLink: '/content/toyota/france/fr/contact.html',
          externalLink: '',
          ctaType: 'empty',
          internalLinkBehaviour:
            LINK_BEHAVIOUR_CONFIGURATION.DEFAULT_SITE_BEHAVIOUR,
          externalLinkBehaviour:
            LINK_BEHAVIOUR_CONFIGURATION.DEFAULT_SITE_BEHAVIOUR,
          internalTitle: 'Contact Toyota',
          overlayTitleInternal: '',
          overlayTitleExternal: '',
          disableNoreferrer: false,
        },
        {
          linkType: LINK_TYPE.EXTERNAL_PATH,
          linkText: 'Book a testdrive',
          internalLink: '',
          externalLink: 'https://www.toyota-europe.com',
          ctaType: 'empty',
          internalLinkBehaviour:
            LINK_BEHAVIOUR_CONFIGURATION.DEFAULT_SITE_BEHAVIOUR,
          externalLinkBehaviour:
            LINK_BEHAVIOUR_CONFIGURATION.DEFAULT_SITE_BEHAVIOUR,
          internalTitle: '',
          overlayTitleInternal: '',
          overlayTitleExternal: '',
          disableNoreferrer: false,
        },
      ]}
    />
  );
};

export { SpecialLinksExample };