@liquid-design/liquid-design-react-native v1.0.5

Liquid-Design-System React Native

Liquid Design System components for React Native. Design System and Component Kit to create beautifull applications.

Terms of Use

see TERMS_OF_USE.md

Please note that the security of the platform/project at which you are using Liquid Design System, or parts of it, are not the responsibility of the providers of this design system.

Installation

This library depends on 3 other libraries: react-native-svg, react-native-vector-icons and react-native-view-overflow. To use @liquid-design/liquid-design-react-native, please make sure that you have the other libraries added and linked correctly:

• react-native-svg
• react-native-vector-icons
• react-native-view-overflow

After installing the abovementioned libraries, please continue with:

npm install --save @liquid-design/liquid-design-react-native

or

yarn add @liquid-design/liquid-design-react-native

To link native dependencies after instalation run

react-native link

More details about linking libraries: LINKING.md

Usage

Import the component you need to use it.

import React, { Component } from 'react'

import { Bubble } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Bubble/>
    )
  }
}

Theming

Some components have themeName prop in which you can pass one of themes to use with the library. Themes list: vibrantCyan, richBlue, richPurple, vibrantMagenta. The default theme is vibrantCyan.

import React, { Component } from 'react'

import { GhostButton } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <GhostButton themeName='vibrantMagenta' />
    )
  }
}

If you want to use your custom theme you can pass object instead of theme name. Custom theme should be an object with a specific shape passed as ThemeName prop.

import React, { Component } from 'react'

import { GhostButton } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  const customTheme = {
    primary: {                      // overrides primary theme colors
      lightest: '#A5A5E6',
      light: '#A5A5E6',
      base: '#6767EF',
      dark: '#22226D',
      darker: '#3737A2',
    },
    secondary: {                    // overrides secondary theme colors
      lightest: '#D4F5EF',
      light: '#A5A5E6',
      base: '#31F3CF',
      dark: '#03FFD1'
      darker: '#3737A2',
    }
  }

  render() {
    return (
      <GhostButton themeName={customTheme} />
    )
  }

Prerequisites

• React Native
• Yarn

API Reference

• Merck Design System

This README will be updated before making library public.

Elements

Bowls

Bowls are graphic elements with fancy animation on changing value.

import React, { Component } from 'react'

import { Bowl, Slider } from '@liquid-design/liquid-design-react-native'

class Example extends Component {
  state = {
    H: 0
  }

  render() {
    return (
      <Bowl H={this.state.H} />
      <Slider onSlidingComplete={val => this.setState({ H: val })}
    )
  }
}

Available Props

Bubbles

Bubbles are notifications that indicate new available information at the data categorie’s respective link or icon.

Use bubbles as temporary and dynamic elements that adapt to new information and not as a static element. Indicators need to be used respective to the kind of available data.

import React, { Component } from 'react'

import { Bubble } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Bubble />
    )
  }
}

Available Props

Buttons

Buttons, or call-to-actions (CTAs) are used for important user actions. Button labels should be speaking in the sense of the user’s understanding, rather than in the system’s language. Buttons can be combined with each other, but only within their label-groups (i.e. Text, Icon, Text & Icon).

Primary Button

Use primary buttons for high prioritized interactions as they should guide the user. Use only as stand-alone or in combination with secondary or ghost buttons.

Secondary Button

Use secondary buttons for low prioritized interactions that need to be available for the user (e.g. Back, Cancel). Use only in combination with primary or highlight buttons.

Highlight Button

Use highlight buttons for very high prioritized interactions as they draw a lot of attention from the user. Use as stand-alone or in combination with secondary buttons. Confirmations need to be labelled “Okay Cool”.

Ghost Button

Use ghost buttons for very low prioritized interactions as they draw little attention from the user. Use only in combination with other ghost buttons or primary buttons.

import React, { Component } from 'react'

import { Button } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Button
        Big
        highlight
        icon={{
          name: 'placeholder'
          size: 24,
          color: 'black'
        }}
      />
    )
  }
}

import React, { Component } from 'react'

import { GhostButton } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <GhostButton />
    )
  }
}

Available Button Props

Available Ghost Button Props

Cards

Cards can be used as an entrance to a category within the content or as bold links, for example on a dashboard interface. As cards have a resemblance with physical cards, it is important to stay close to the real behavior in terms of their haptics and movements.

import React, { Component } from 'react'

import { Card } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Card />
    )
  }
}

Available Props

Checkboxes

Checkboxes are used to select one or multiple options from a set of available values.

import React, { Component } from 'react'

import { Checkbox } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Checkbox checked={false} />
    )
  }
}

Available Props

Favorites

Favorite is an icon of heart shape with animation on tap which can be used as like/unlike button.

import React, { Component } from 'react'

import { Favorite } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Favorite
        activeColor='#f3f3f3'
      />
    )
  }
}

Available Props

Dropdowns

Dropdowns or select fields enable the user to select one option from a list of multiple options. The selection of an option can affect other form elements on the same page / screen.

import React, { Component } from 'react'

import { Dropdown } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Dropdown
        inline
        multiSelect
      />
    )
  }
}

Available Props

Filters

Filters are used to organize a set of available content by categories. They should always be used close to their content. Filters can be added and removed in order to decrease or increase the amount of visible content.

Filters need to consist of a label and the filter icon. The selected option is displayed as a tag and replaces the label once selected.

import React, { Component } from 'react'

import { Filter } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    const options = ["Option 1", "Option 2", "Option 3"]

    return (
      <Filter options={options} />
    )
  }
}

Available Props

Headlines

Headlines are used as an introduction into a topic and for visual differentiation between content blocks. Headlines require hierarchies and a placement conform with these.

import React, { Component } from 'react'

import { Headline } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Headline type='H1' />
    )
  }
}

Available Props

Icons

Icon is a component used to display icon from icon set.

import React, { Component } from 'react'

import { Icon } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Icon
        name='closingX'
        size={30}
      />
    )
  }
}

Available Props

Links

Links are hyperlinks that point at (target) any domain. There are two ways to add Link component - default and with any Paragraph (Link will display with text of the Paragraph).

import React, { Component } from 'react'

import { Link, Paragraph } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Link
        text='Test'
        source='http://merck.design'
        active
      />
      <Paragraph
        Small
        text='Example paragraph'
        withLink
        linkText='Read more'
        source='http://merck.design'
      />
    )
  }
}

Available Props

Lists

Lists are used to vertically organize content. Lists can be ordered or unordered. Unordered lists can also be used as checklists.

import React, { Component } from 'react'

import { List, ListItem, ListHeader } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  renderRow = ({ item }) => (
    <ListItem
      title={item.title}
    />
  )

  renderHeader = () => (
    <ListHeader />
  )

  render() {
    return (
      <List
        data={data}
        renderRow={this.renderRow}
        renderHeader={this.renderHeader}
      />
    )
  }
}

Available List Props

Available List Item Props

Available List Header Props

Logos

Information on the usage of our logo can be found in the brand principles document which can be requested from our branding department at branding@merckgroup.com.

import React, { Component } from 'react'

import { Logo } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
     <Logo/>
    )
  }
}

Available Props

Paragraphs

Paragraphs are rich text blocks. The text can be formatted.

import React, { Component } from 'react'

import { Paragraph } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Paragraph type='XLarge' />
    )
  }
}

Available Props

Placeholders

Placeholders display graphic elements - available in 3 shapes (circle by default, square, rectangle).

import React, { Component } from 'react'

import { Placeholder } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Placeholder isSquare />
    )
  }
}

Available Props

Radio Buttons

Radio buttons are used to select one option out of a set of multiple options.

import React, { Component } from 'react'

import { RadioButton } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <RadioButton selected={false} />
    )
  }
}

Available Props

Tags

Tags are used for labeling items or content. Tags may also be used as a display for active filters.

import React, { Component } from 'react'

import { Tag } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Tag />
    )
  }
}

Available Props

Text Fields

Text fields are used either in forms together with other input fields or stand-alone (e.g. value entering, newsletter etc.), for submitting data. Text field types should always be aligned with their use case (e.g. calendar, e-mail etc.). Error messages are required and should appear as quickly as possible. Error messages should describe the issue as specific as possible.

import React, { Component } from 'react'

import { TextField } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  state={
    error: false
  }

  render() {
    return (
      <TextField
        error={this.state.error}
        multiline
      />
    )
  }
}

Available Props

Toggles

Toggles are used to select one out of two available options or to switch between two states.

import React, { Component } from 'react'

import { Toggle } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Toggle value={true} />
    )
  }
}

import React, { Component } from 'react'

import { IconToggle } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <IconToggle defaultPosition='left' />
    )
  }
}

Available Toggle Props

Available Icon Toggle Props

Warning labels

Warning labels display graphic elements with warnings.

import React, { Component } from 'react'

import { WarningLabel } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <WarningLabel name='explosive'
      />
    )
  }
}

Available Props

Components

Accordions

Accordion displays collapsible content panels for presenting information in a limited amount of space.

import React, { Component } from 'react'

import { Accordion } from '@liquid-design/liquid-design-react-native'

const MULTIPLE_SECTIONS = [
  {
    title: 'Section Title',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam  eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  },
  {
    title: 'Section Title',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam  eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  }
]

class Example extends Component {
  state = {
    activeSections: []
  }

  setSections(sections) {
    this.setState({ activeSections: sections })
  }

  render() {
    return (
      <Accordion
        expandMultiple
        onChange={this.setSections.bind(this)}
        activeSections={this.state.activeSections}
        sections={MULTIPLE_SECTIONS}
      />
    )
  }
}

Available Props

Badges

Badges symbolize special properties of an item or person. Badges provide a short overview about that property and its value.

import React, { Component } from 'react'

import { Badge } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Badge withIcon />
    )
  }
}

Available Props

Content Cards

import React, { Component } from 'react'

import { Badge } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <ContentCard withDetails />
    )
  }
}

Available Props

Fly Outs

Fly outs contain a limited amount of data and have the purpose of providing brief information, short forms or tables / menus. Fly outs can be opened and closed manually by the user as well as automatically or as part of another user interaction (e.g. scrolling).

import React, { Component } from 'react'

import Flyout from '@liquid-design/liquid-design-react-native'

const options = [
  { name: 'Option 1' },
  {
    name: 'Option 2',
    options: [
      { name: 'Sub Option 1' },
      { name: 'Sub Option 2' },
      { name: 'Sub Option 3' },
      { name: 'Sub Option 4' }
    ]
  },
  { name: 'Option 3' }
]

class Example extends Component {

  render() {
    return (
      <Flyout
        options={options}
        aligned='right'
      />
    )
  }
}

Available Props

Modals

Modal is a static modal example (meaning its position and display have been overridden). Component can be used in Light Box.

import React, { Component } from 'react'

import Modal from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  render() {
    return (
      <Modal
        withCta
        contentText='Example text'
        buttonText='Accept'
        cancelText='Cancel'
      />
    )
  }
}

Available Props

Notifications

Notifications are messages that communicate information to the user. There are 4 types of notifications: simple, reminder, error and info.

import React, { Component } from 'react'

import { Notification } from '@liquid-design/liquid-design-react-native'

class Example extends Component {

  componentDidMount() {
   this.notificationRef.showNotification('error', 'Label error notification')
  }

 notificationRef = {}

  render() {
    return (
      <Notification
        ref={ref => this.notificationRef = ref}
      />
    )
  }
}

Available Props

Bar Chart

Bar Chart is s a type of chart that presents labeled data with bars with heights or lengths proportional to the values that they represent. It is possible to place 8 bars in one single subset.

import React, { Component } from 'react'

import { BarChart } from '@liquid-design/liquid-design-react-native'

const data = [
 [
   {
     x: 2021,
     y: 150000
   },
   {
     x: 2022,
     y: 180000
   },
   {
     x: 2023,
     y: 135000
   }
 ],
 [
   {
     x: 2020,
     y: 110000
   },
   {
     x: 2021,
     y: 160000
   },
   {
     x: 2022,
     y: 180000
   },
   {
     x: 2023,
     y: 135000
   }
 ]
]

class Example extends Component {
  render() {
    return (
     <BarChart
       tickValuesX={[2020, 2021, 2022, 2023]}
       tickValuesY={[0, 60000, 100000, 140000, 180000, 220000]}
       data={data}
       xAxisTickFormat={x => `${Math.round(x)}`}
       yAxisTickFormat={y => `${Math.round(y)}`}
       xTickLabelFormat={x => `${Math.round(x)}`}
       yTickLabelFormat={y => `${Math.round(y)}`}
     />
    )
  }
}

Available Props

Line Graph

Line graph is s a type of chart which displays information as a series of data points connected by straight line segments. By default 2 lines will be rendered, for 1 line graph use singleChart prop and for 4 lines graph use additionalCharts prop.

import React, { Component } from 'react'

import { LineGraph } from '@liquid-design/liquid-design-react-native'

const data = {
  primaryChart: [
    { x: 1, y: 100 },
    { x: 2.5, y: 1000 },
    { x: 3.5, y: 1500 },
    { x: 4.5, y: 2000 },
    { x: 5.5, y: 2500 },
    { x: 6.5, y: 2000 },
    { x: 7.5, y: 2000 },
    { x: 8.5, y: 1900 }
  ],
  secondaryChart: [
    { x: 1, y: 1500 },
    { x: 2.5, y: 1500 },
    { x: 3.5, y: 2200 },
    { x: 4.5, y: 2700 },
    { x: 5.5, y: 3000 },
    { x: 6.5, y: 2800 },
    { x: 7.5, y: 3000 },
    { x: 8.5, y: 2600 }
  ]
}

const tickValues = [0, 2000, 4000, 6000]

class Example extends Component {
  render() {
    return (
      <LineGraph
        label1='KW 21',
        label2='KW 22',
        label3='KW 23',
        label4='KW 24',
        legendMonth='17.Oct.',
        legendYear='2017'
        tickValues={tickValues}
        primaryChart={data.primaryChart}
        secondaryChart=  {data.secondaryChart}
      />
    )
  }
}

Available Props

Paginations

Pagination is component which enables to make carousel of views with pagination.

import React, { Component } from 'react'
import { Pagination } from '@liquid-design/liquid-design-react-native'

class Example extends Component {
state = {
items: [{
  title: 'Merck Design'
},
{
  title: 'Liquid Design System'
},
{
  title: 'Product Design leaves space for the brand.'
},
{
  title: 'Product Design is unobstrusive.'
},
{
  title: 'Color sits at the heart of our brand identity.'
}]
}

renderItem = ({ item }) => (
  <View>
    <Text>{item.title}</Text>
  </View>
)

  render() {

    return (

      <Pagination
        refProp={(c) => { this.carouselRef = c }}
        carouselRef={this.carouselRef}
        data={this.state.items}
        renderItem={this.renderItem}
        onSnapToItem={index => this.setState({ activeSlide: index })}
        dotsLength={this.state.items.length}
        activeDotIndex={this.state.activeSlide}
       />
    )
  }
}

Available Props

Progress Bars

Progress bars indicate the advance of a certain interaction or process. Common use cases are page scrolling or processes like check out or registration.

Linear Progress Bar

Use linear progress bars for summarized overviews of a certain progress, as deliveries or timers.

import React, { Component } from 'react'

import ProgressBar from '@liquid-design/liquid-design-react-native'

class Example extends Component { state = { progress: 0 }

handleAdd = () => { const { progress } = this.state

const step = 5
const maxVal = 200

if (progress < maxVal) {
  this.setState({ progress: progress + step })
}

}

handleRemove = () => { const { progress } = this.state

const step = 5
const minVal = 0
if (progress > minVal) {
  this.setState({ progress: progress - step })
}

}

render() { return ( ) } }

### **Linear Progress Bar**
> Use circular progress bars for quickly advancing processes, preferrably animated, as installations or scales.
```jsx
import React, { Component } from 'react'

import ProgressBar from '@liquid-design/liquid-design-react-native'

class Example extends Component {
    state = {
      progress: 0
  }

  handleAdd = () => {
    const { progress } = this.state

    const step = 5
    const maxVal = 200

    if (progress < maxVal) {
      this.setState({ progress: progress + step })
    }
  }

  handleRemove = () => {
    const { progress } = this.state

    const step = 5
    const minVal = 0
    if (progress > minVal) {
      this.setState({ progress: progress - step })
    }
  }

  render() {
    return (
        <ProgressBar
          progress={this.state.progress}
          type='circle'
        />
      )
    }
  }

Step Progress Bar

Use the step progress bar for processes as setups, checkouts or registrations.

import React, { Component } from 'react'

import ProgressBar from '@liquid-design/liquid-design-react-native'

class Example extends Component {
    state = {
    currentStep: 0,
    labels: ['Step Label', 'Step Label', 'Step Label', 'Step Label']
  }

  handleAddStep = () => {
    const { currentStep, labels } = this.state

    const step = 1
    const maxVal = labels.length
    if (currentStep < maxVal) {
      this.setState({ currentStep: currentStep + step })
    }
  }

  handleRemoveStep = () => {
    const { currentStep } = this.state

    const step = 1
    const minVal = 0
    if (currentStep > minVal) {
      this.setState({ currentStep: currentStep - step })
    }
  }

  render() {
    const { labels } = this.state
    return (
       <ProgressBar
          currentPosition={currentStep}
          type='step'
          labels={labels}
      />
      )
    }
  }

Available Props