import { Meta } from '@storybook/addon-docs/blocks';

import './demo-styles.scss'

import stomachText_01 from './Stomach_text-01.png'
import spleenText_01 from './Spleen_text-01.png'
import spinalCordText_01 from './Spinal cord_text-01.png'
import smIntestineText_01 from './Sm Intestine_text-01.png'
import nervesText_01 from './Nerves_text-01.png'
import pancreasText_01 from './Pancreas_text-01.png'
import peripheralGangliaText_01 from './Peripheral ganglia_text-01.png'
import nervesAndPeripheralGangliaText_01 from './Nerves and peripheral ganglia_text-01.png'
import maleText_01 from './Male_text-01.png'
import liverText_01 from './Liver_text-01.png'
import lungText_01 from './Lung_text-01.png'
import kidneyText_01 from './Kidney_text-01.png'
import heartText_01 from './Heart_text-01.png'
import femaleText_01 from './Female_text-01.png'
import esophagusText_01 from './Esophagus_text-01.png'
import colonText_01 from './Colon_text-01.png'
import brainstemText_01 from './Brainstem_text-01.png'
import brainstemAndSpinalCordText_01 from './Brainstem and Spinal Cord_text-01.png'
import bladderText_01 from './Bladder_text-01.png'

<Meta title="Components/Illustrations" />

## About Illustrations
Illustrations are used to provide clarity and guidance to users. They provide a visual break-up between lots of text.
Illustrations should be clear, diverse (Gender, racial, geographical and cultural diversity should always be considered when creating illustrations. This allows for inclusion, representation and accessibility for all.).

All illustrations shouild conform to SPARC branding colors. See page 6.


## Styles
Illustrations should be in one of three styles:
- **Line**: Line illustrations are the next step along from iconography. They blend line drawings with color.
- **Flat**: Flat illustrations are bold and colorful. Objects within the illustration do not have line borders.
- **Isometric**: Isometric illustrations add a sense of perspective to add depth and convey complexity.

## Organ Illustrations

These are custom illustrations of the majority of organs used by researchers in SPARC experiments. The files can be used by SPARC DRC and NIH members for internal and external SPARC papers, publications and presentations, and will be posted in the Branding folder of the shared SPARC DRC drive. (https://drive.google.com/drive/u/2/folders/1Xz-cyZvrZzPiOyz61FEWkl4XePlMTjHR)

<div class="illustrations-demo">
  <img src={bladderText_01} alt="" />
  <img src={brainstemAndSpinalCordText_01} alt="" />
  <img src={brainstemText_01} alt="" />
  <img src={colonText_01} alt="" />
  <img src={esophagusText_01} alt="" />
  <img src={femaleText_01} alt="" />
  <img src={heartText_01} alt="" />
  <img src={kidneyText_01} alt="" />
  <img src={liverText_01} alt="" />
  <img src={lungText_01} alt="" />
  <img src={maleText_01} alt="" />
  <img src={nervesAndPeripheralGangliaText_01} alt="" />
  <img src={nervesText_01} alt="" />
  <img src={pancreasText_01} alt="" />
  <img src={peripheralGangliaText_01} alt="" />
  <img src={smIntestineText_01} alt="" />
  <img src={spinalCordText_01} alt="" />
  <img src={spleenText_01} alt="" />
  <img src={stomachText_01} alt="" />
</div>