govil-strip-content-tabs

a set of tabs that any tab is a govil-strip-content-base.

How to use

Clone this repo to your local computer, then run:

- npm install && npm run build

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

``
import StripTabs from 'govil-strip-content-tabs';
...
`

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

`
import StripTabs, { TabsComponentModel } from 'govil-strip-content-tabs';
...
`

Available props/state Models

`

export interface TabsComponentModel {
tabs: Array,
}

interface TabStrip {
title: string,
stripContent: ComponentModel
}

interface StateModel {
selectedTab: ComponentModel,
selectedTabIndex: number
}

//imported from govil-strip-content-base
.
interface ComponentModel {
title: string
subTitle: string
description: string //html
links: Array
contentId: string //for accessibility
role: string //for accessibility
labelledby: string //for accessibility
resources: {
collapseTitle: string,
expandTitle: string,
}
}

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

To customize this component, pass ComponentModel to the tabs prop.

`
// your-component.tsx
import StripTabs, { TabsComponentModel } from 'govil-strip-content-tabs
';
//for demo
import { ComponentModel } from 'govil-strip-content-base
';

const StripGContentDemo: ComponentModel = {
title: 'the main title',
subTitle: 'sub title',
description: "

this can be html

...
``

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