Loader

Welcome to our Global components showcase

Colors

#3A97C9 primaryBlue
#111111 primaryBlack
#EAEAEA primaryWhite
#4ABAF7 secondaryBlue
#A36DE9 secondaryViolet
#1B1B1B secondaryBlack1
#232323 secondaryBlack2
#515151 secondaryGray1
#6B6B6B secondaryGray2
#A1A1A1 secondaryGray3
#EBEBEB secondaryWhite
import { colors } from "../path/to/src/constants/theme.js"; 
css => 
color: ${colors.primaryWhite};

Text swap

Inside textArray can be added any valid dom element
For more than 1 element use React.Fragment

2.8x Loupes3.5x Loupes

4.0x Boxes4.5x Lights

5.9x Loupes3.5x Loupes

2.8x Loupes3.5x Loupes

<TextSwap
  step={this.state.step}
  textArray={[
    <>
      <h1>2.8x Loupes3.5x Loupes</h1>
      <p>
        These 2.8x magnifcation loupes (often referred to as 3x by
        many brands) offer extreme versatility and are perfectly
      </p>
    </>,
    <>
      <h1>2.8x Loupes3.5x Loupes</h1>
      <p>
        These 2.8x magnifcation loupes (often referred to as 3x by
        many brands) offer extreme versatility and are perfectly
      </p>
    </>,
    <>
      <h1>2.8x Loupes3.5x Loupes</h1>
      <p>
        These 2.8x magnifcation loupes (often referred to as 3x by
        many brands) offer extreme versatility and are perfectly
      </p>
    </>,
  ]}
/>

Button

<Button type="primary">Hi there</Button>

Tooltip

ABBERATIONS

i
<InfoBubble
  type="info"
  title="FIG. 1"
  text="Back pain can be worsened by a poorly measured
      working distance & neck pain by poor declination
      angles."
/>

Simple Bubble

<Bubble onClick={() => console.log("clicked")} noAnimation={false} />

Useful functions

If we need to detect if is a mobile device or not we can use some functions from: `src/js/isMobile.js`;
By running the function we will get a boolean value so we know if is a mobile device or not.
"getScreenSize" will return an object size with width and height of the screen
import computeIsMobile from "path/to/src/js/isMobile.js";
const isMobile = computeIsMobile();

import { getScreenSize } from "path/to/src/js/isMobile.js";
const size = getScreenSize();
=> size = { width: .. , height: .. }

Font

The fonts should be already set for all text tags. (src/layouts/index.css.js)
font-family: Yantramanav, sans-serif;
Fontsizes - showcase

H1

H2

H3

H4

H5
H6

P

Break points

This projects runs with bootstrap. Check documentation: https://getbootstrap.com/docs/4.0/layout/grid/
col-12
col-6
col-6
For media we can access "screens" from "constants/theme.js"
import { screens } from "../path/to/src/constants/theme.js";

css =>
  @media (max-width: ${screens.md}) {
    ...code here
  }
screens = {
  xs: '479px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
};

Section container

Example is this page
SectionWrapper should be used around each new section to ensure consistency of section paddings and alignments
Component accepts "fluid" as props and will add a "container-fluid" instead a normal "container"
Path: "src/components/Shared/SectionWrapper/index.js"
<SectionWrapper fluid={true/false}>Test content</SectionWrapper>

Observer / fade in when on screen

When the elemnt gets in view a function will get triggered and if needed this information can be used with `onChange` method
When the element gets inview it will fade in with a nice animation. Values for the animation can be customised

HI THERE 👋

import Observer from 'src/components/Shared/Observer/index.js';

<Observer
  threshold={0}
  onChange={({ isIntersecting }) =>
    console.log('isIntersecting', isIntersecting)
  }
>
  <h1>HI THERE 👋</h1>
</Observer>

Optional Props:

 threshold - it represents the height percentage where the element must be in current view
    number - default: 0 - possible: 0 - 1

 disabled: - it will prevent the observer from triggering
    boolean - dafault: false  - possible: true / false

 runOnce: - it will prevent the observer from triggering more than once
    boolean - dafault: false  - possible: true / false

 delay: - the time that will wait untill will fade in
    number - dafault: 0  - possible: amount in ms

 transition: - animation function that will be used for fadding in
    number - dafault: 1000ms  - possible: amount in ms

 animationTime: - the time that animation will take to complete
    number - dafault: cubic-bezier(0.64, 0.04, 0.35, 1)  - possible: any css transition