govil-strip-content-tabs v1.0.1

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<TabStrip>,
}

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<LinkableTitle>
    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: "<p>this can be html</p>",
    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 }],
    contentId: 'some_content',
    role: "tabpanel",
    labelledby: 'tab_of_some_content', 
    resources: {
        collapseTitle: 'see less',
        expandTitle: 'see more'
    }
};
const StripTabsDemo: TabsComponentModel = {
    tabs: [{ title: 'tab#1', stripContent: StripGContentDemo }, 
      { title: 'tab#2', stripContent: {...StripGContentDemo} }, 
      { title: 'tab#3', stripContent: { ...StripGContentDemo } }]
};
StripTabsDemo.tabs[1].stripContent.description = '<p>This is my description with <b>bolded text</b> and no dangerous stuff</p>';
StripTabsDemo.tabs[2].stripContent.description = '<p>Description with <b>bold</b> and <script>alert(1)</script> script->alert() test</p>';

...

<StripTabs {...StripTabsDemo} />

...

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