@nib-components/content-text-panel

    3.3.8 • Public • Published

    Setting up your component

    Delete this section after you've setup the component

    Before the component is accepted into the DLS:

    1. Github: Create the repository under your own username/organisation

    When the component is accepted into the DLS:

    1. Github: Transfer ownership of the repository to frontend
    2. BuildKite: Create a New Pipeline
    3. BuildKite: Enter the following settings:
    • Name: content-text-panel
    • Git Repository: git@git.nib.com.au:frontend/content-text-panel.git
    1. BuildKite: Remove the default Step and add a Read 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
    1. BuildKite: Create Pipeline and follow the instructions to add the webhook to GithubEnterprise
    2. BuildKite: Go to Settings
    • Check Build pull requests from third-party forked repositories and click Save Github Enterprise Settings
    • Copy the Markdown badge from Settings and past it below.
    1. Github: Edit the readme to remove these steps and kick off a New build
    2. Github: Protect the master branch
    • Go to Settings > Branches
    • Choose the master branch
    • Check Protect this branch
    • Check Require status checks to pass before merging
    • Check Include administrators and Require 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

    Build status dependencies Status

    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

    Keywords

    none

    Install

    npm i @nib-components/content-text-panel

    DownloadsWeekly Downloads

    186

    Version

    3.3.8

    License

    none

    Unpacked Size

    31.7 kB

    Total Files

    30

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar