feat: Button component

[willoliveira]

Creates a button component to the ocean design system.

Package: @useblu/ocean-components@0.1.0-beta.7

Usage

import React from 'react';

import { Button } from '@useblu/ocean-components';

const ExempleButtons = () => {
  return (
    <div className='page'>
      {/* 
        default props
        variant=primary
        size=md
      */}
      <Button>Default</Button>

      <Button variant='primary'>Primary</Button>
      <Button variant='secondary'>Secondary</Button>
      <Button variant='text'>Text</Button>
      <Button variant='inverse'>Inverse</Button>

      <Button size='sm'>Small</Button>
      <Button size='md'>Medium</Button>
      <Button size='lg'>Large</Button>

      <Button disabled>Disabled</Button>

      <Button blocked={true}>Blocked</Button>

      <Button component="a" href="url/to/">Anchor</Button>
    </div>
  )
}

export default ExempleButtons;

Documentation

Link to storybook:

• https://pagnet.github.io/ocean-ds-web/index.html?path=/docs/components-button--usage#button-api

Inspirations

• https://material-ui.com/components/buttons/
• https://ant.design/components/button/
• https://react.semantic-ui.com/elements/button/

[codeclimate]

Code Climate has analyzed commit 1cf6d32 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (100% is the threshold).

This pull request will bring the total coverage in the repository to 100.0% (0.0% change).

View more on Code Climate.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities (and 0 Security Hotspots to review)
0 Code Smells

100.0% Coverage
0.0% Duplication