govil-strip-icons

A strip of boxes including icon (office logo) and title (office name)

How to use

Clone this repo to your local computer, then run:

• npm install && npm run build

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

import StripIconsBox from 'govil-strip-icons';
...

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

import StripIconsBox, { ISItems, ISItem } from 'govil-strip-icons-box';
...

Available props

interface ISItems {
    items: Array<ISItem>
}

interface ISItem {
    link: string;
    isInternal: boolean;
    icon: string;
    title: string;
}

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

// your-component.tsx
import StripIconsBox, { ISItems } from 'govil-strip-icons-box';

const StripIconsBoxDemo: ISItems = {
  items: [{
      icon: 'https://www.gov.il/BlobFolder/office/ministry_of_environmental_protection/en/ministry_of_environmental_protection.png',
      link: 'https://www.gov.il/en/departments/ministry_of_environmental_protection', 
      isInternal: true,
      title: 'Ministry of Environmental Protection'
  },
  {
      icon: 'https://www.gov.il/BlobFolder/office/ministry_of_tourism/en/DownloadAttachment.png',
      link: 'https://www.gov.il/en/departments/ministry_of_tourism', 
      isInternal: true,
      title: 'Ministry of Tourism'
  },
  {
      icon: 'https://www.gov.il/OfficeLogo/logo_menora_blackWhite.png',
      link: 'https://www.gov.il/en/departments/ministry_of_finance', 
      title: 'Ministry of Finance'
  },
  {
      icon: 'https://www.gov.il/BlobFolder/office/population_and_immigration_authority/en/logo120.png',
      link: 'https://www.gov.il/en/departments/population_and_immigration_authority', 
      isInternal: true,
      title: 'Population and Immigration Authority'
  },
  {
      icon: 'https://www.gov.il/BlobFolder/office/civil_service_commission/en/civil_service_commission.png',
      link: 'https://www.mof.gov.il/en', 
      isInternal: false,
      title: 'Civil Service Commission'
  }]
}

...

<StripIconsBox {...StripIconsBoxDemo }/>

...

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