The ola from hartl3y94

React implementation of Ola design system created by marketgoo.

Install

npm i @marketgoo/ola

Usage

Import Ola styles in your document and add the ola class in the root of your app (usually the html element)

<html class="ola">
  <head>
    <!-- Your head content -->
    <link rel="stylesheet" href="./node_modules/@marketgoo/ola/dist/index.css">
  </head>

  <body>
    <!-- Your body content -->
  </body>
</html>

Import Ola components in your app

import { Button } from "@marketgoo/ola";

const Example = () => (
  <div>
    <Button variant="primary">My Button</Button>
  </div>
)

Available components

Accordion

Button

ButtonGroup

ButtonIcon

Check

CheckGroup

Storybook

Field

Icon

Input

Level

Metric

Modal

Panel

ProgressBar

ProgressCircle

SearchField

Select

Spinner

Switch

Table

Task

TaskGroup

Storybook

Tooltip

Other Utilities

CSS classes with design tokens: Storybook
CSS classes with common layouts: Storybook

Browser support

This library was tested in the following browsers:

Mozilla Firefox (latests 2 versions)
Google Chrome (latests 2 versions)
Opera (latests 2 versions)
Microsoft Edge (latest 2 versions)
Apple Safari (from 12)
Apple Safari iOS (from 12)
Android Chrome (latests 2 versions)
Firefox for Android (latests 2 versions)

Internet Explorer is not supported

Microsoft Edge <= 18 is not supported

Tested with Browserstack

Please see CHANGELOG for more information about recent changes.

The MIT License (MIT). Please see LICENSE for more information.

hartl3y94 / ola Goto Github PK

ola's Introduction