soignant-nomade-ui v2.0.6

UI Soignant Nomade

Add google fonts in public/index.html

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&family=Signika:wght@700&display=swap" rel="stylesheet">

Example of use

import 'soignant-nomade-ui/lib/assets/style.css'
import { 
  Container, 
  Hero, 
  Title, 
  TextB, 
  TextM, 
  TextN, 
  TextS, 
  CallToAction, 
  Alert, 
  Badge, 
  options, 
  ProgressBar, 
  CheckBoxText, 
  CheckBox, 
  List, 
  ListOptions, 
  InputSelect, 
  SelectOption, 
  InputText, 
  SubTitle, 
  PresTitle, 
  BadgesDay 
} from 'soignant-nomade-ui';

function App() {

  return (
    <div className="App">
      <Container>
        <Hero>Titre 1</Hero>
        <Title>Titre 2</Title>
        <SubTitle>TITRE 3</SubTitle>
        <TextB>Big Text Regular</TextB>
        <TextM weight={700}>Medium Text Bold</TextM>
        <TextM weight={400}>Medium Text Regular</TextM>
        <TextN weight={700}>Normal Text Bold</TextN>
        <TextN weight={400}>Normal Text Regular</TextN>
        <TextS weight={700}>Small Text Bold</TextS>
        <TextS weight={400}>Small Text Regular</TextS>
        <PresTitle>Hero</PresTitle>
        <Hero>🎯 Un profil correspond à tes critères !</Hero>
        <PresTitle>CTA</PresTitle>
        <div style={{ border: "dashed", borderRadius: '10px', width: "fit-content", padding: "10px", borderColor: "#9100FF" }}>
          <CallToAction boolean={true} onClick={() => alert('true')}>👍 J’accepte</CallToAction>
          <br />
          <CallToAction boolean={false} onClick={() => alert('false')}>👎🏼 J’écarte </CallToAction>
        </div>
        <br />
        <PresTitle>Alertes</PresTitle>
        <div style={{ border: "dashed", borderRadius: '10px', width: "fit-content", padding: "10px", borderColor: "#9100FF" }}>
          <Alert boolean={false}>🗓 Adrien propose d’autres dates</Alert>
          <br />
          <Alert boolean={true}>75% match</Alert>
        </div>
        <br />
        <PresTitle>Badges</PresTitle>
        <div style={{ display: "flex" }}>
          <div style={{ border: "dashed", borderRadius: '10px', width: "fit-content", padding: "10px", borderColor: "#9100FF" }}>
            <Badge options={options.success}>Aide à la toilette</Badge>
            <br />
            <Badge options={options.default}>Cythosate</Badge>
            <br />
            <Badge options={options.infos}>Pansement d’ulcères</Badge>
            <br />
            <Badge options={options.bleu}>Mars</Badge>
          </div>
          <div style={{ border: "dashed", borderRadius: '10px', width: "fit-content", height: "fit-content", padding: "5px", margin: '10px', borderColor: "#9100FF" }}>
            <BadgesDay disponibility={true}>L</BadgesDay>
            <br />
            <BadgesDay disponibility={false}>L</BadgesDay>
          </div>
        </div>
        <div style={{ display: 'flex', marginBottom: '-200px' }}>
          <div>
            <div>
              <PresTitle>Checkbox</PresTitle>
              <div style={{ display: "flex" }}>
                <div style={{ border: "dashed", borderRadius: '10px', width: "fit-content", height: "fit-content", padding: "5px", margin: '10px', borderColor: "#9100FF" }}>
                  <CheckBox id={'1'}></CheckBox>
                  <CheckBox id={'2'} checked={true}></CheckBox>
                </div>
                <div style={{ border: "dashed", borderRadius: '10px', width: "fit-content", padding: "10px", margin: '10px', borderColor: "#9100FF" }}>
                  <CheckBoxText selected={false}>Bouche à oreille</CheckBoxText>
                  <br />
                  <CheckBoxText selected={true}>Bouche à oreille</CheckBoxText>
                </div>
                <br />
                <div style={{ width: "fin-content" }}>
                  <CheckBox id={'3'}>Autres soins pratiqués par Adrien</CheckBox>
                </div>
              </div>
              <br />
            </div>
          </div>
          <div style={{ margin: "250px" }}></div>
          <div>
            <PresTitle>Progress Bar</PresTitle>
            <ProgressBar value={50}></ProgressBar>
          </div>
        </div>
        <PresTitle>List</PresTitle>
        <List>
          <div style={{ marginBottom: "37px" }}>
            <ListOptions onClick={() => alert('1')} value={"Elem1"}>Titre élément</ListOptions>
          </div>
          <div>
            <ListOptions onClick={() => alert('2')} value={"Elem2"}>Titre élément</ListOptions>
          </div>
        </List>
        <br />
        <PresTitle>Input</PresTitle>
        <div style={{ display: "flex" }}>
          <div style={{ border: "dashed", borderRadius: '10px', width: "fit-content", padding: "10px", margin: '10px', borderColor: "#9100FF", display: "grid" }}>
            <div style={{ margin: "10px" }}>

              <InputText placeholder={"Description"} ></InputText>
            </div>
            <div style={{ margin: "10px" }}>

              <InputText placeholder={"Description"} value={"Description"} ></InputText>
            </div>
            <div style={{ margin: "10px" }}>

              <InputText placeholder={"Description"} ></InputText>
            </div>
          </div>
          <div style={{ border: "dashed", borderRadius: '10px', width: "fit-content", padding: "10px", marginLeft: '100px', marginTop: '10px', borderColor: "#9100FF", display: "grid" }}>
            <InputSelect disabled={false} onChange={event => alert(event.target.value)}>
              <SelectOption value={"Elem1"}>Titre</SelectOption>
              <SelectOption value={"Elem2"}>Element moyen</SelectOption>
              <SelectOption value={"Elem3"}>Elem</SelectOption>
            </InputSelect>
            <InputSelect disabled={false} onChange={event => alert(event.target.value)}>
              <SelectOption>Titre</SelectOption>
              <SelectOption value={"Elem2"}>Element moyen</SelectOption>
              <SelectOption value={"Elem3"}>Elem</SelectOption>
            </InputSelect>
            <InputSelect disabled={true} onChange={event => alert(event.target.value)}>
              <SelectOption>Titre</SelectOption>
              <SelectOption value={"Elem2"}>Element moyen</SelectOption>
              <SelectOption value={"Elem3"}>Elem</SelectOption>
            </InputSelect>
          </div>
        </div>
      </Container>
    </div>
  );
}

export default App;