govil-strip-content-steps

a set of steps than any step 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-steps as a normal package installed from npm like so:

import StripSteps from 'govil-strip-content-steps';
...

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

import StripSteps, { StepsComponentModel } from 'govil-strip-content-steps';
...

Available props/state Models

export interface StepsComponentModel {
    steps: Array<StepStrip>,
    stepsFile: {
        url: string,
        displayName: string
    },
    resources: {
        prevTitle: string,
        nextTitle: string
    },
}

interface StepStrip {
    title: string,
    stripContent: ComponentModel
}

interface StateModel {
    currentStep: ComponentModel,
    currentStepIndex: number
}

//imported from govil-strip-g-content.
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 vm prop.

// your-component.tsx
import StripSteps, { StepsComponentModel } from 'govil-strip-content-steps';
//for demo
import { ComponentModel } from 'govil-strip-g-content';

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 StripStepsDemo: StepsComponentModel = {
    steps: [
        { title: 'step#1', stripContent: StripGContentDemo },
        { title: 'step#2', stripContent: { ...StripGContentDemo } },
        { title: 'step#3', stripContent: { ...StripGContentDemo } }],
    stepsFile: {
        url: '/govil/BlobFolder/news/press_22072020/he/PressReleases_images_press_20072020.jpeg',
        displayName: 'all step in pdf'
    },
    resources:{
        nextTitle : "next",
        prevTitle : "prev"
    }
};
StripStepsDemo.steps[1].stripContent.description = '<p>some <b>bold</b> title</p>';
StripStepsDemo.steps[2].stripContent.description = 'last title';
StripStepsDemo.steps[2].stripContent.links = [];
StripStepsDemo.steps[2].stripContent.subTitle = '';

...

<StripSteps {...StripStepsDemo} />

...

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