@nib-components/content-text-panel v3.3.8
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-text-panel
- Git Repository:
git@git.nib.com.au:frontend/content-text-panel.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-text-panel
A content-text-panel component.
Installation
npm install --save @nib-components/content-text-panel
Usage
import ContentTextPanel, {styledTextPanelBuilder} from '@nib-components/content-text-panel';
const textOptions = {
component: Markdown
};
<ContentTextPanel
{...props}
textOptions={textOptions}
titleComponent={Heading}
/>
const StandardTextPanel = styled(BaseTextPanel)`
margin-bottom: ${props => props.theme.spacing[4]};
`;
const ReferenceTextPanel = StandardTextPanel.extend`
font-size: 0.9em;
`;
const styles = {
standard: StandardTextPanel,
reference: ReferenceTextPanel
};
const TextPanel = styledTextPanelBuilder(styles);
Properties
title
The title displayed in the text panel.
Optional. A string
.
text
The main content displayed, usually in markdown format.
Required. A string
.
style
Used to map a particular style to a text panel e.g. standard
, reference
. The map passed to the styledTextPanelBuilder states which component to use for each style.
Optional. A string
.
textOptions
An object that can be used to customise the text component of the text panel. The component for the text can be set here. This defaults to Markdown, imported from @nib-components/content-markdown. Anything else is spread on the text component.
Optional. An object
titleComponent
The component to be used for the title section of the text panel Defaults to Heading, imported from @nib-components/content-heading.
Optional. A string
or function
.
titleSize
The title size. Defaults to 1.
Optional. A number
.
className
A class name can be set on the text panel component.
Optional. A string
.
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 text panel schema, mapping and decorator can be imported from @nib-components/content-text-panel -
import {mapping as textPanel} from '@nib-components/content-text-panel';
import {decorator as textPanelDecorator} from '@nib-components/content-text-panel';
import {schema as textPanel} from '@nib-components/content-text-panel';
A Text Panel entry should be added to the relevant Contentful space with the following entries -
Name | Field ID | Type | Required/Optional |
---|---|---|---|
Label | label | Short text | Required |
Title | title | Short text | Optional |
Text | text | Long text (Markdown) | Required |
Style | style | Short text (Site specific text panel styles) | Optional |
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago