govil-dynamic-strip-links v0.0.19

govil-strip-links

A simply component written with TypeScript to present sets of govil-link's with a title and govil-button-expand to show\hide more links.

How to use

Clone this repo to your local computer, then run:

• npm install && npm run build

You can now import govil-strip-links as a normal package installed from npm like so:

import StripLinks from 'govil-strip-links';
...

You can also import the type definitions if you're using TypeScript like so:

import StripLinks,{ ILinksGroup , IStripLinksModel }  from 'govil-strip-links'
...

Available props

export interface IStripLinksModel {
    items: Array<ILinksGroup>
    role: string
    labelledby: string,
    resources: {
        collapseTitle: string,
        expandTitle: string
    }
}

export interface ILinksGroup {
    title: string,
    links: Array<LinkableTitle>,
    contentId: string,
    State?: IStateModel
}

export interface IStateModel {
    isExpandedLinks: boolean
}

//from 'govil-link'
interface LinkableTitle {
    title: string,
    url: string,
    isInternal: boolean
}

To customise this component, pass in a viewModel to the IStripLinksModel prop.

// your-component.tsx
import StripLinks, { ILinksGroup , IStripLinksModel } from 'govil-strip-links'


const StripLinksDemo: ILinksGroup = {
    title: 'links group',
    links: [{ title: "link#1", url: "#1", isInternal: true },
    { title: "link#2", url: "#2", isInternal: true },
    { title: "link#3", url: "#3", isInternal: true },
    { title: "link#4", url: "#4", isInternal: false },
    { title: "link#5", url: "#5", isInternal: true },
    { title: "link#6", url: "#6", isInternal: false }],
    contentId: 'links_content'
};

const StripLinksDemo2: ILinksGroup = {...StripLinksDemo};
StripLinksDemo2.title += '#2';
StripLinksDemo2.links.slice(0,3);
StripLinksDemo2.contentId += '#2';


export const StripLinksDemoArray: IStripLinksModel = {
    items: [StripLinksDemo, StripLinksDemo2],    
    role: "tabpanel",
    labelledby: 'tab_links_content',
    resources: {
        collapseTitle: 'show less',
        expandTitle: 'show more'
    }
};
...
<StripLinks {...StripLinksDemoArray} />

...

This component was built for the benefit of the citizens of Israel on behalf of the government, but of course also for the benefit of the OpenSource community and freely published in npm