wopify/ui-design
Overview
@wopify/ui-design is a ui-component library mainly for Wopify's Wopify For Business recruiting platform for companies. It's built to have a solid base with room for customization.
🎉 Version 2.5.9 is released 🎉
Getting started
Get started using the library by installing it through npm
npm install @wopify/ui-design
Or install through yarn by running
yarn add @wopify/ui-design
And then make sure to import the components into your project that you want to use.
import { Button } from '@wopify/ui-design'
Components
The components are built to be able to be modified, or used as they are from start. Down below you fill find most of the components with their respective documentation.
All of the regular HTML attributes can be used with the components if nothing else is stated
Typography
H1, H2, H3, H4, P
| Name |
Type |
Default |
Description |
| color |
String |
#222222 ( Gray for P component ) |
Hex code || CSS color can be used here |
| fontSize |
Number & Unit |
Auto |
Number & CSS unit can be used here |
Container
| Name |
Type |
Default |
Description |
| height |
Number & Unit |
Auto |
Number & CSS unit can be used here |
| width |
Number & Unit |
Auto |
Number & CSS unit can be used here |
Input
| Name |
Type |
Default |
Description |
| width |
Number & Unit |
Auto |
Number & CSS unit can be used here |
| disabled |
Boolean |
False |
False, True. Use this without a key
|
Checkbox
| Name |
Type |
Default |
Description |
| handleClick |
Function |
|
Function controlling event when toggling the Checkbox |
| checked |
Boolean |
False |
Property setting Checkbox checked || unchecked |
Button
| Name |
Type |
Default |
Description |
| type |
String |
|
Null, primary, secondary, warning, hollow. Use this without a key |
| children |
String |
|
value of Button is placed as children |
| width |
Number & Unit |
Auto |
Number & CSS unit can be used here |
Tag
| Name |
Type |
Default |
Description |
| status |
String |
|
Success, Notice, Warning |
| children |
String |
|
value of Tag is placed a child |
| disabled |
Boolean |
False |
False, True. Use without key
|
Toggle
| Name |
Type |
Default |
Description |
| type |
String |
Null |
Null, Light. Use without key
|
| handleClick |
Function |
|
Function controlling event when toggling the Toggle |
| options |
Array |
|
Array of Strings presenting the options |
| optionActive |
String |
|
Active option in the toggle. Often from State |
Popup
| Name |
Type |
Default |
Description |
| width |
Number |
|
Amount of pixels for a maximum with attribute |
| height |
Number |
|
Amount of pixels for a minimum height attribute |
| title |
String |
|
Title of Popup component |
| text |
String |
|
Text of Popup component |
| force |
Boolean |
False |
False, True. Use without key. Disables possibility to close Popup component |
| close |
Function |
|
Function to close Popup component |
| closeValue |
String |
|
Value on CTA for closing Popup component. Do not combine this with confirmValue or denyValue
|
| confirm |
Function |
|
Function to confirm a prompt in Popup component |
| confirmValue |
String |
|
Value on CTA for confirming prompt in Popup component. |
| deny |
Function |
|
Function to deny a prompt in Popup component |
| denyValue |
String |
|
Value on CTA for denying prompt in Popup component. |
| warning |
Boolean |
False |
Boolean for theming confirm CTA to warning-themed. Use this without key |
| padding |
Number |
1rem |
|
Image
| Name |
Type |
Default |
Description |
| height |
Number & Unit |
200 px |
Height of Image component |
| width |
Number & Unit |
200 px |
Width of Image component |
| borderRadius |
Number & Unit |
0 |
Amount of rounded corners on Image component |
| src |
String |
|
URL/Path to Image |
Avatar
| Name |
Type |
Default |
Description |
| height |
Number & Unit |
200 px |
Height of Avatar component |
| width |
Number & Unit |
200 px |
Width of Avatar component |
| format |
'square' || 'circle' |
'circle' |
Design type of Avatar component |
| backgroundImage |
String |
white |
URL/Path to Image |
