@tal-gel/atoms v0.5.0

Button Component

import React from 'react';
import { ThemeProvider } from '@tal-gel/theming';
import { Button } from '@tal-gel/atoms';

const demo = () => {
  return (
    <!-- Default theme is used by default -->
    <ThemeProvider>
      <!-- 
        Available Config Options (can be mixed and matched):
          - primary: indicates a primary button
          - secondary: indicates a secondary button
          - tertiary: indicates a tertiary button

          - large: indicates a large button
          - medium: indicates a medium button
          - small: indicates a small button

          - icon: indicates an `icon` button (no text)
          - iconLeft: indicates an `icon + text` button
          - iconRight: indicates a `text + icon` button
          (A complete list of icon names will be available later)

          - inverse: indicates an inverse button
          - error: indicates an error button
          - disabled: indicates a disabled button
          - stretch: indicates that the button should span the whole container width
      -->
      <!-- Some examples... -->
      <Button primary large>Button 1</Button>
      <Button secondary icon="ArrowRight" medium/>
      <Button tertiary small inverse iconLeft="ArrowLeft">Button 3</Button>
      <Button primary medium error>Button 4</Button>
      <Button secondary large inverse error>Button 5</Button>
      <Button tertiary medium stretch iconRight="Add">Button 6</Button>
      <Button primary small stretch error>Button 7</Button>
      <Button secondary medium disabled>Button 8</Button>
    </ThemeProvider>
  );
}

Link Component

import React from 'react';
import { ThemeProvider } from '@tal-gel/theming';
import { Link } from '@tal-gel/atoms';

const demo = () => {
  return (
    <!-- Default theme is used by default -->
    <ThemeProvider>
      <!-- 
        - underlineThickness: indicates the thickness of text underline (default: 1px) 
        - disabled: indicates a disabled link
      -->
      <!-- Some examples... -->
      <h2>I am an h2 <Link underlineThickness="2">link in h2</Link> I am an h2</h2>
      <p>I am a paragraph <Link disabled>disabled link in p</Link> I am a paragraph</p>
      <Link>link</Link>
      <span>I am a span <Link>link in span</Link> I am a span</span>
    </ThemeProvider>
  );
}

Versions

1. 0.1.0: Initial button component added
2. 0.2.0: SVG filters and SVG scaling
3. 0.3.0: Initial link component added
4. 0.3.1: Button and Link component refactored
5. 0.4.0: Dynamic generation of svg filters from hex values
6. 0.5.0: Checkbox, ButtonGroup, Radio, RadioGroup, Icon components added