Brixel Styleguide and Components

Work In Progress - not all component should be ready as npm modules

Demo

https://brixel.gitlab.io/brixel-styleguide-components

Install

npm install --save @brixel/brixel-components

Import the SCSS file using: SCSS File

@import '~@brixel/brixel-components/src/styles/SCSS/general/main.scss'

Or

Main react component:

import '@brixel/brixel-components/src/styles/SCSS/general/main.scss'

Components

Button - Primary

import { BrixelButtonPrimary } from '@brixel/brixel-components';

Use like this (only required field is label):

<BrixelButtonPrimary
    background="primary | light | dark | blue | red | green | yellow"
    colorTxt: "primary | light | dark | blue | red | green | yellow" // default is light
    disabled={true | false}
    onClick={(e) => ''}
    onMouseEnter={(e) => ''}
    onMouseLeave={(e) => ''}
    label="" // required field
    leftIcon="" // To put Icon on the left
    rightIcon="" // To put icon on the right
    rounded={true | false}
    saturation="300 | 400 | 500 | 600" // default is 400
    saturationTxt="100 | 200 |  300 | 400 | 500 | 600" // default is 100
/>

To see the icons available please check the icons section

Button - Secondary

import { BrixelButtonSecondary } from '@brixel/brixel-components';

Use like this (only required field is label):

<BrixelButtonSecondary
    bgTransparent={true | false} // default is false
    borderStroke="small | large" // default is large
    color="primary | light | dark | blue | red | green | yellow" default is primary
    disabled={true | false} // default is false 
    label="" // required field    
    leftIcon="" // To put Icon on the left
    onClick={(e) => ''}
    onMouseEnter={(e) => ''}
    onMouseLeave={(e) => ''}
    rightIcon="" // To put icon on the right
    rounded={true | false} // default is false, on true create a full rounded on side left and right
    saturation="200 | 300 | 400 | 500 | 600" // default is 400 
/>

To see the icons available please check the icons section

Icon

import { BrixelIcon } from '@brixel/brixel-components';

Use like this (only required field is icon, that you can choose one of the available list):

<BrixelIcon
    onClick={() => console.log('click')}
    icon=""
    className=""
 />

Icon List

• arrow-left-circle
• account
• alert
• arrow-left
• arrow-up
• arrow-down-circle
• arrow-down
• arrow-right-circle
• arrow-right
• arrow-simple-down
• arrow-simple-left
• arrow-simple-right
• arrow-simple-up
• arrow-up-circle
• ask
• balcony
• bin
• calendar-check
• calendar-edit
• calendar
• call
• cellar
• check
• child-friendly
• clock
• close-circle
• close
• conversation
• document-highlight
• document
• dropdown
• edit
• elevator
• exceptional-large-land
• exceptional-room-size
• eye
• facebook
• favorite-fill
• favorite-house
• favorite
• favorities
• fireplace
• first-time-occupancy
• folder
• fullscreen
• gallery
• garden
• highquality-materials
• info
• instagram
• landscape
• linkedin
• location-pin-simple
• locked
• loggia
• logout
• menu
• message
• minergie-certified
• minus
• money
• mosaic
• old-building
• options-vertical
• options
• photo
• plans
• play
• playground
• plus
• properties
• property-apartment
• property-building-land
• property-house
• property-multiple-dwelling
• question
• resize-active
• resize
• roadmap
• satellite
• sauna
• search
• star-fill
• star
• steam-oven
• storage-room
• streetview
• swimming-pool
• tennis-court
• tour
• twitter
• update
• washing-machine
• water-access
• wheel-chair

Tags

import { BrixelTags } from '@brixel/brixel-components';

The components it is created to work as single component, where you have to specify the input props, or to work as Redux Form component.

Single use:

<BrixelTags
    input={{
        onChange: (val) => setTags(val),
        value: [],
    }}
/>

Redux Form use:

<Field name="" component={BrixelTags} />

Brixel Form

Extra Feature

import { BrixelExtraFeature } from '@brixel/brixel-components';

The components it is created to work as single component, where you have to specify the input props, or to work as Redux Form component.

Single use:

<BrixelExtraFeature
    input={{
        onChange: () => console.log('test'),
        value: {},
        name: 'extraFeature'
    }}
/>

Redux Form use:

<Field name="extraFeatures" component={BrixelExtraFeature} />

Select Currency

import { BrixelSelect } from '@brixel/brixel-components';

The components it is created to work as single component, where you have to specify the input props, or to work as Redux Form component.

const selectOpt = [
  {
    label: 'CHF',
    value: 'CHF',
    active: false,
    icon: 'call',
  },
  {
    label: 'EUR',
    value: 'EUR',
    active: false,
    icon: 'folder',
  },
  {
    label: 'GBP',
    value: 'GBP',
    active: false,
    icon: 'message',
  },
  {
    label: 'USD',
    value: 'USD',
    active: false,
    icon: 'ask',
  },
];

Single use:

<BrixelSelect
    input={{
        onChange: () => console.log('test'),
        value: {},
        name: 'select'
    }}
    options={selectOpt}
    disabled={true | false} // default is false
/>

Redux Form use:

<Field name="select" component={BrixelSelect} options={selectOpt} />

Input Quality

import { BrixelInputScale } from '@brixel/brixel-components';

The components it is created to work as single component, where you have to specify the input props, or to work as Redux Form component.

const optQuality = [
    {
        label: 'Out to date',
        value: 5,
        active: false,
    },
    {
        label: 'Fair',
        value: 4,
        active: false,
    },
    {
        label: 'Good',
        value: 3,
        active: false,
    },
    {
        label: 'Very Good',
        value: 2,
        active: false,
    },
    {
        label: 'Exceptional',
        value: 1,
        active: false,
    },
];

Single use:

<BrixelInputScale
    input={{
        onChange: () => console.log('test'),
        value: {},
        name: ''
    }}
    options={optQuality}
    disabled={true | false} // default is false
/>

Redux Form use:

<Field
    name=""
    component={BrixelInputScale}
    options={optQuality}
/>

Input Quality Picker

import { BrixelInputQuality } from '@brixel/brixel-components';

The components it is created to work as single component, where you have to specify the input props, or to work as Redux Form component.

const qualityPicker = [
  {
    label: 'A',
    value: 'A',
    bgClass: 'bgGreen',
  },
  {
    label: 'B',
    value: 'B',
    bgClass: 'bgGreen300',
  },
  {
    label: 'C',
    value: 'C',
    bgClass: 'bgYellow300',
  },
  {
    label: 'D',
    value: 'D',
    bgClass: 'bgYellow700',
  },
  {
    label: 'E',
    value: 'E',
    bgClass: 'bgRed400',
  },
  {
    label: 'F',
    value: 'F',
    bgClass: 'bgRed500',
  },
  {
    label: 'G',
    value: 'G',
    bgClass: 'bgRed600',
  },
];

Or

const qualityPickerBorder = [
  {
    label: 'This',
    value: 'This',
    brdClass: 'brdPrimary',
  },
];

Single use:

 <BrixelInputQuality
     input={{
        onChange: (val) => setQual(val),
        name: '',
        value: '',
    }}
    options={qualityPicker}
    square // to do the input button square
/>

Redux Form use:

<Field
    name=""
    component={BrixelInputQuality}
    options={qualityPicker}
    square={true | false} // default is false
/>

Switch Button

import { BrixelSwitchButton } from '@brixel/brixel-components';

The components it is created to work as single component, where you have to specify the input props, or to work as Redux Form component.

Single use:

<BrixelSwitchButton
    input={{
        onChange: (val) => setSwitchButton(val),
        name: '',
        value: '',
    }}
    label="Switch Button Test"
/>

Redux Form use:

<Field
    name=""
    component={BrixelSwitchButton}
    label="Switch Button Test"
/>

Input Step Number

import { BrixelInputStepNumber } from '@brixel/brixel-components';

The components it is created to work as single component, where you have to specify the input props, or to work as Redux Form component.

Single use:

<BrixelInputStepNumber
    input={{
        onChange: () => console.log('test'),
        value: {},
        name: 'number'
    }}
    min={0} // default is 0
    max={0} // default is infinite
    step={1} // step used to increase or decrease, default is 1
    disabled={true | false} // default is false
/>

Redux Form use:

<Field
    name="number"
    component={BrixelInputStepNumber}
    step={1}
/>

Input Text

import { BrixelInputText } from '@brixel/brixel-components';

The components it is created to work as single component, where you have to specify the input props, or to work as Redux Form component.

Single use:

<BrixelInputText
    input={{
        onChange: (val) => setInputTextString(val),
        onBlur: (val) => setInputTextString(val),
        value: inputTextString,
        name: 'Input Text String'
    }}
    type="text | email | password | number"
    placeholder="Text Placeholder"
/>

Redux Form use:

<Field
    name=""
    component={BrixelInputText}
    label="Label"
    type="text | email | password | number"
/>

Text Area

import { BrixelTextArea } from '@brixel/brixel-components';

The components it is created to work as single component, where you have to specify the input props, or to work as Redux Form component.

Single use:

<BrixelTextArea
    input={{
        onChange: (val) => '',
        onBlur: (val) => '',
        value: '',
        name: ''
    }}
    type="text | email | password | number"
    placeholder="Text Placeholder"
/>

Redux Form use:

<Field
    name=""
    component={BrixelTextArea}
    label="Label"
    type="text | email | password | number"
    placeholder="Text Placeholder"
/>

Styles

Shadows

We have 5 box-shadow styles, available as classes to be applied on any element:

• shadow-1dp
• shadow-2dp
• shadow-3dp
• shadow-4dp
• shadow-5dp

Variables

On /src/styles/SCSS/general/_variables.scss is stored all variables that we use on our styleguide.

Brakpoints:

$grid-breakpoints: (
        xs: 0,
        sm: 590px,
        md: 769px,
        lg: 1024px,
        xl: 1440px,
        xxl: 1920px,
) !default;

The $step and $stp are variables used to create the margin and padding proportional.

$stp: 8 !default;
$step: 8px !default;

All variables are stored with SCSS value !default so it is possible import the styleguide but it is possible to overwrite to change the style as palette colors, for example.

Mixin and SCSS function

On /src/styles/SCSS/utils/_helpers.scss is stored all mixin and functions.

• make-grid-elements(): it is used to create the grid with breakpoints.

Grid

The grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

To create a grid with 2 columns for mobile and 3 on desktop you can do:

<div class="row">
    <div class="col-6 col-md-4">
        One of three columns
    </div>
    <div class="col-6 col-md-4">
        One of three columns
    </div>
</div>