@nib-components/content-link v2.3.12
Setting up your component
Delete this section after you've setup the component
Before the component is accepted into the DLS:
Github
: Create the repository under your own username/organisation
When the component is accepted into the DLS:
Github
: Transfer ownership of the repository tofrontend
BuildKite
: Create aNew Pipeline
BuildKite
: Enter the following settings:
- Name:
content-link
- Git Repository:
git@git.nib.com.au:frontend/content-link.git
BuildKite
:Remove
the defaultStep
and add aRead steps from repository
step
- And add
cd deploy && bundle install && bundle update sceptre sceptre-dotnet sceptre-app && bundle exec sceptre-app pipeline upload
to the Commands to run textbox - And add
os=linux
to the Agent Targeting Rules textbox
BuildKite
:Create Pipeline
and follow the instructions to add the webhook to GithubEnterpriseBuildKite
: Go toSettings
- Check
Build pull requests from third-party forked repositories
and clickSave Github Enterprise Settings
- Copy the
Markdown
badge fromSettings
and past it below.
Github
: Edit the readme to remove these steps and kick off aNew build
Github
: Protect themaster
branch
- Go to
Settings
>Branches
- Choose the
master
branch - Check
Protect this branch
- Check
Require status checks to pass before merging
- Check
Include administrators
andRequire branches to be up to date before merging
- Check all
Status checks found in the last week for this repository
@nib-components/content-link
A content-link component.
Installation
npm install --save @nib-components/content-link
Usage
import ContentLink from '@nib-components/content-link';
const iconTypes = {
imageIcon: ImageIcon
};
<ContentLink
component={CustomLink}
href="/"
text="Click here"
trackingTag="example-tag-id"
target="_self"
icon={icon}
iconTypes={iconTypes}
/>
Properties
component
The Link component.
Optional. A string
or function
. Defaults to an a
element.
href
The href for the Link.
Required. A string
.
text
The text displayed href for the Link.
Required. A string
.
trackingTag
The tracking tag id of the Link for site navigation analytics.
Required. A string
.
target
The target of the Link, either _self
or _blank
.
Optional. A string
. Defaults to _self
.
icon
The icon to displayed with the Link.
Optional. An object
.
iconTypes
The map of icon types that can be displayed with the Link e.g. imageIcon, dlsIcon.
Optional. An object
.
Change log
1.0.0
Initial release.
Contributing
You can edit the files in ./src
, whilst running npm run watch
. This will compile for the ./dist
folder.
Contentful
The link schema, mapping, decorator and tracking tag decorator can be imported from @nib-components/content-link -
import Link, {linkSchema, linkMapping, linkDecorator, trackingTagDecorator} from @nib-components/content-link;
A Link entry should be added to the relevant Contentful space with the following entries -
Name | Field ID | Type | Required/Optional |
---|---|---|---|
Title | label | Short text | Required |
Text | text | Short text | Optional |
Url | href | Short text | Required |
Target | target | Short text (one of 'Blank' or 'Self') | Required |
Icon | icon | Reference (Site specific icon types) | Optional |
Tracking Tag | trackingTag | JSON object (Analytics tag appearance) | Required |
The icon type is site specific e.g. dlsIcon for nib icons or standard imageIcon for links with a media image icon. The standard ImageIcon component and iconBuilder can be imported from @nib-components/content-icon.
The tracking tag is transformed in the trackingTagDecorator. It is used as the id on the Link component.
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago