Goplaceit Components Library

Publish new version

To publish a new version run the following command:

yarn build
npm publish

You will need to be signed in to npm with a user that has access to the goplaceit-components-library package.

To deploy the library to chromatic and share the link with the team, run the following command:

yarn build

GPI ArrowLink Component

Required props

children - Type: JSX.Element | string > ArrowLink containing element or string apart of arrow.

onClick - Type: function > What ArrowLink should do on click event.

Optional props

color - Type: string > Customizable ArrowLink color

disabled - Type: boolean > If ArrowLink should be disabled.

fontSize - Type: string > Customizable ArrowLink font size

width - Type: string > Customizable ArrowLink width

Usage example

Import:

import ArrowLink from "goplaceit-components-library/lib/ArrowLink.tsx";

Use:

<ArrowLink onClick={() => window.open("https://www.goplaceit.com/ar/")}>
  <span>Este es un link a GPI</span>
</ArrowLink>

GPI Button Component

Required props

children - Type: JSX.Element | string > Button containing element or string.

onClick - Type: function > What Button should do on click event.

Optional props

backgroundColor - Type: string > Button custom background color.

className - Type: string > If Button custom className.

disabled - Type: boolean > If Button should be disabled.

margin - Type: string > Button custom margin.

width - Type: string > Button custom width.

size - Type: string > Button pre-setted size. Can be 'sm', 'md' or 'lg'. Default : 'lg'

variant - Type: string > Button pre-setted variant. Can be 'primary', 'secondary', 'black', 'success', 'neutral', 'club', 'houseupgrade-primary', 'houseupgrade-secondary'. Default : 'primary'

onBlur - Type: function > What Button should do on blur event.

ref - Type: React.RefObject > In case is needed to pass a ref.

type - Type: string > Button type. Can be 'button', 'submit', 'reset'

Usage example

Import:

import Button from "goplaceit-components-library/lib/Button.tsx";

Use:

<Button onClick={() => {})} variant='club'>
  <span>Este es un boton de GPI</span>
</Button>

GPI ButtonLink Component

Required props

children - JSX.Element | string > ButtonLink containing element or string.

Optional props

onClick - Type: function > What ButtonLink should do on click event.

disabled - Type: boolean > If ButtonLink should be disabled.

width - Type: string > ButtonLink custom width.

href - Type: string > The URL that ButtonLink should open.

target - Type: string > If ButtonLink should open the URL in same tab or a different one. Can be '_self' or '_blank'. Default: '_blank'

variant - Type: string > ButtonLink pre-setted variant. Can be 'primary', 'secondary', 'black', 'success', 'neutral', 'club', 'houseupgrade-primary', 'houseupgrade-secondary'. Default : 'primary'

Usage example

Import:

import ButtonLink from "goplaceit-components-library/lib/ButtonLink.tsx";

Use:

<ButtonLink width="250px" href="https://www.goplaceit.com/ar/" target="_blank">
  <span>Este es un boton link de GPI</span>
</ButtonLink>

GPI ButtonRange Component

Required props

min - Type: number > ButtonRange minimum limit.

max - Type: number > ButtonRange maximum limit.

getValues - Type: function > What to do with values when are selected.

Optional props

value - object > i.e. { min: 1, max: 5 }. Starting selected value. Default: No value selected.

keyName - Type: string > Key for mapped buttons + index. Default: 'gpi-buttonRange'

Usage example

Import:

import ButtonRange from "goplaceit-components-library/lib/ButtonRange.tsx";

Use:

<ButtonRange
  min={0}
  max={5}
  getValues={(values) => console.log(values)}
  value={{ min: 2, max: 4 }}
/>

GPI Checkbox Component

Required props

id - Type: string > HTML id attribute for checkbox input. Required for the correct functioning of the component.

Optional props

checked - boolean > If checkbox is checked. Default: false.

disabled - Type: boolean > If Checkbox should be disabled. Default: false.

onChange - Type: function > What to do when Checkbox is toggled.

size - Type: string > Checkbox pre-setted size. Can be 'md' or 'lg'. Default: 'md'

Usage example

Import:

import Checkbox from "goplaceit-components-library/lib/Checkbox.tsx";

Use:

<Checkbox id="gpi-checkbox-1" checked={isChecked} onChange={handleChange} />

GPI Dropdown component

Required props:

id - Type: string. A unique string used to set the buttons' dropdown key.

options - Type: Map. A Map instance with the following structure:
	const options = new Map([
		[value, {label: 'label', disabled: true}],
)
where: - value - Type: any > The value associated to the option. This will be the same value used to set the state in the parent component via setValue callback, so make sure the data type used here is the same as the one you're sending to the backend. - label - Type: string > The option's label that will be shown on the buttons. - disabled - Type: boolean, default: false > Pass disabled: true to explicitly disable an option, otherwise all options will be available. Useful for having a placeholder option that is not selectable once you change the value.

setValue - Type: function > A callback function to set current selected value.

value - Type: any > The current selected value. The dropdown's main button will show the associated label.

Optional props:

disabled - Type: boolean > If Dropdown should be disabled.

onClose - Type: function > A callback function to execute before dropdown closes.

onOpen - Type: function > A callback function to execute before dropdown opens.

position - Type: string > A string containing the current alignement of the dropdown's drop component. Can be TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT. Default: BOTTOM_LEFT

width - Type: string > Dropdown custom width.

Usage example:

Import:

import Dropdown from "goplaceit-components-library/lib/Dropdown.tsx";

Use:

const options = new Map([
	['none', {label: 'Select an option' disabled: true}],
	[1, {label: 'Option 1'}],
	[15, {label: 'Option 2'}]
])

const ParentComponent = () => {
	// The 'none' entry will be used as default value
	const [dropValue, setDropValue] = useState('none')
	return (
		<div>
			// other components
			<Dropdown
				id='parentComponentDropdown'
				options={options}
				position='TOP_LEFT'
				setValue={setDropValue}
				value={dropValue}
			/>
		</div>
	)
}

GPI ExpandButton Component

Required props

onClick - Type: function > What ExpandButton should do on click event.

closedTitle - Type: string > Text for when ExpandButton is closed.

openedTitle - Type: string > Text for when ExpandButton is opened.

Optional props

arrowColor - Type: string > Customizable ExpandButton arrow color

color - Type: string > Customizable ExpandButton color

disabled - Type: boolean > If ExpandButton should be disabled. Default: false.

fontSize - Type: string > Customizable ExpandButton font size

hoverColor - Type: string > Customizable ExpandButton color when hovering

Usage example

Import:

import ExpandButton from "goplaceit-components-library/lib/ExpandButton.tsx";

Use:

<ExpandButton
  onClick={handleClick}
  closedTitle="Ver mas"
  openedTitle="Ver menos"
/>

GPI Icon Component

Required props

name - Type: string > Name of the icon. Also a className will be setted with this name: 'icon-{name}' Can be '-', 'alert', 'arrow-cap', 'arrow', 'bell', 'calendar', 'chat', 'check', 'circle', 'cube', 'download', 'edit', 'facebook', 'filled-heart', 'filled-star', 'filled-triangle', 'folder', 'heart', 'home', 'idea', 'info', 'instagram', 'label', 'linkedin', 'location', 'mail', 'menu', 'menu2', 'menu3', 'microphone', 'none', 'plus', 'reload', 'rewind', 'search', 'settings', 'share', 'signal', 'star', 'time', 'trash', 'twitter', 'user', 'volume-', 'volume+', 'wait', 'x', 'youtube'

Optional props

color - Type: string > Icon color (will be svg fill prop).

size - Type: number > Icon width (will be svg width prop).

Usage example

Import:

import Icon from "goplaceit-components-library/lib/Icon.tsx";

Use:

<Icon name="alert" color="#eab" />

GPI InteractButton Component

Required props

onClick - Type: function > What InteractButton should do on click event.

title - Type: string > Text that the button will show.

Optional props

disabled - Type: boolean > If ExpandButton should be disabled. Default: false.

icon - Type: keyof typeof > Switch between admittedIcons, in this case 'heart' or 'share'

fontSize - Type: string > InteractButton font size

variant - Type: keyof typeof > Switch between 'active' and 'inactive' button. Default: 'inactive'

width - Type: string > InteractButton width

Usage example

Import:

import InteractButton from "goplaceit-components-library/lib/InteractButton.tsx";

Use:

<InteractButton title="Click me" onClick={() => console.log("clicked")} />

GPI Modal Component

Features

Scroll lock when open (Optional)

Fade in and out transitions

Uses Portals to attach itself at DOM's root level

Attaches and detaches itself from the DOM depending on its isOpen state

Can receive custom width and height through props

Scrollable modal body or scroll with background content

Closeable by pressing "Escape" key, clicking outside the modal, clicking the red cross on top right corner or passing a custom button as child

Render Optional Header and Footer components as props

IMPORTANT The Modal Component attaches itself at root level in the DOM using a ReactDOM portal. To that end, you must create a div with id='modal-root' at the top level of your HTML file. This will be the > > node where the modal attaches itself.

Required props

children - Type: function | string > What Modal should render on his content.

isOpen - Type: boolean > A boolean value indicating if the modal is open. Note that when this value is false, the modal is not only hidden but also removed from the DOM.

closeModal - Type: function > A callback function to be executed when the user executes any of the aforementioned closing actions (clicking outside modal, clicking red cross or pressing Escape key). In its most simple form it only sets isOpen to false (this is required to effectively close the modal), but you can add as many operations as you want.

Optional props

HeaderComponent - Type: React.Component | string > React component to be rendered in the Header section of the modal. This will not be affected by the overflow-y scroll property of the modal body.

FooterComponent - Type: React.Component | string > React component to be rendered in the Footer section of the modal. This will not be affected by the overflow-y scroll property of the modal body.

customHeight - Type: string > String representing any valid CSS height value (e.g. "50vh", "100px", "10rem").

maxWidth - Type: string > String representing any valid CSS width value.

maxHeight - Type: string > To set a max-height to the container

maxWidth - Type: string > To set a max-width to the container

lockScroll - Type: boolean > Enables background content scroll lock behavior. default: true

heightFix - Type: boolean > If true, sets a small amount of padding-top on the modal box so that the content does not overlap with the red X at the top right corner. default: true

overlayScroll - Type: boolean > Enables scrolling for modals with more than 100% height (e.g. long content with customWidth = 'auto'). default: false

hideX - Type: boolean > Hide the 'x' close button. default: false

Usage example

This example renders a modal when the button is clicked. Note how the modals' open state is managed via props (isOpen)

<!-- index.html -->

<!-- rest of html document -->
<html>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="modal-root"></div>
  </body>
</html>

// MyComponent.js

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <h1>My component with modal</h1>
      <button onClick={openModal}>Open modal</button>

      <Modal closeModal={closeModal} isOpen={isOpen}>
        This is the content of my modal
      </Modal>
    </div>
  );
};

GPI RadioButton Component

Required props

id - Type: string > To set an id for the input

Optional props

circleColor - Type: string > Button color when selected

The component accepts any other prop that you want for the input

Usage example

Import:

import RadioButton from "goplaceit-components-library/lib/RadioButton.tsx";

Use:

<RadioButton id="MyRadioButton" variant="active" />

GPI Slider component

A custom slider component with GPI brand styles

Features

Option for one or two handles

Display current value on handles

Colored fill bar on slider track

Addition of plus sign when handle reaches max value

Handles do not block each other

Width 100%

Usage

After importing and placing in the return of your functional component or the render method of your class component, you can provide the following props:

Required props

setValues - Type: Function > A function with one or two parameters. If the slider has one handle, it receives an unique argument with that value as an integer, if the slider is double, it receives two arguments with each handle value. Useful for setting state based on said values or performing operations...

Optional Props

double - Type: Boolean, > If the slider has one or two handles (if true, slider with two handles). Default: false

max - Type: Integer > The maximum value of the slider (currently it supports only values lesser than 10). Default: 7

min - Type: Integer Default: 1 > The minimum value of the slider

step - Type: Integer > Amount of variation of the slider value by drag step. Default: 1

Currently it doesn't support values with two digits because of the available space in the handles, however it can be done anyway with a warning in the console. If you want to change the color of the value displayed in the handles, you can use the following css selector (".tracks-container span")

Usage example

The example below implements a double handled slider with values between 1 and 5 and a callback function that sets the current value as an array of two integers.

Import:

import Slider from "goplaceit-components-library/lib/Slider.tsx";

Use:

const MyComponent = () => {
  // Use 'useState' hook to save slider values as state. If your slider has two handles, initial state must be equal to the min and max props passed to the Slider Component, if it has only one handle, initial state is equal to the middle number rounded down to the nearest integer.
  const [sliderValues, setSliderValues] = useState([1, 5]);

  // Define the callback function we'll use to retrieve slider values
  const setValues = (first, second) => {
    // In this example we save the slider values as an array, but you can define your own implementation
    setSliderValues([first, second]);
  };

  return (
    <>
      <h1>My slider</h1>
      <Slider double min={1} max={5} step={1} setValues={setValues} />
    </>
  );
};

GPI SmallSpinner Component

Optional props

color - Type: string > Defines the color of the dots. Default: lightCoral

scale - Type: number > Defines the size of the Spinner in scale. Default: 1

Usage example

Import:

import SmallSpinner from "goplaceit-components-library/lib/SmallSpinner.tsx";

Use:

<SmallSpinner color="red" scale={0.5} />

GPI TextInput Component

Optional props

backgroundColor - Type: string > TextInput background color.

disabled - Type: string > If TextInput should be disabled. Default: false.

fontSize - Type: string > TextInput font size.

The component accepts any other prop that you want for the input

Usage example

Import:

import TextInput from "goplaceit-components-library/lib/TextInput.tsx";

Use:

<TextInput />

GPI TextLink Component

Required props

children - Type: JSX.Element | string > Content that you like to render

Optional props

color - Type: string > TextLink color.

disabled - Type: boolean > If TextLink should be disabled. Default: false.

fontSize - Type: string > TextLink font size.

hoverColor - Type: string > TextLink hover color.

href - Type: string > Destination URL

onClick - Type: function > Function that is dispatched when the user clicks on the link. It could be used to navigate through history or location.

onNewTab - Type: boolean > Only if you use href. Indicates if the page must be shown on a new page or on the same one. Default: true

The component accepts any other prop that you want for the container.

Usage example

Import:

import TextLink from "goplaceit-components-library/lib/TextLink.tsx";

Use:

<TextLink href="./" onNewTab={false}>
  This is a TextLink
</TextLink>

goplaceit-components-library

Goplaceit Components Library

Publish new version

GPI ArrowLink Component

Usage example

GPI Button Component

Usage example

GPI ButtonLink Component

Usage example

GPI ButtonRange Component

Usage example

GPI Checkbox Component

Usage example

GPI Dropdown component

GPI ExpandButton Component

Usage example

GPI Icon Component

Usage example

GPI InteractButton Component

Usage example

GPI Modal Component

Usage example

GPI RadioButton Component

Usage example

GPI Slider component

Usage example

GPI SmallSpinner Component

Usage example

GPI TextInput Component

Usage example

GPI TextLink Component

Usage example

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads