Buttons

import { Button } from 'n2-styles'

function myComponent(props) {
  return (
    <Button>Button</Button>
    <Button disabled=true>Disabled Button</Button>
    <Button link="#">Link Button</Button>
    <Button disabled=true link="#">Disabled Link</Button>
  );
}

<button class="btn btn-primary" type="button">Regular</button>
<button class="btn btn-primary" disabled type="button">Disabled</button>
<a class="btn btn-primary" href="#">Link Button</a>
<a class="btn btn-primary disabled" href="#">Disabled Link</a>

import { Button } from 'n2-styles'

function myComponent(props) {
  return (
    <Button link="#" style="flat">Flat</Button>
    <Button disabled=true link="#" style="flat">Disabled Button</Button>
  );
}

<a class="btn-flat" href="#">Flat</a>
<a class="btn-flat disabled" href="#">Flat & Disabled</a>

import { Button } from 'n2-styles'

function myComponent(props) {
  return (
    <Button style="stroked" link="#" />Regular</Button>
    <Button className="green-text" link="#" style="stroked" />Colored</Button>
  );
}

<a class="btn-stroked" href="#">Regular</a>
<a class="btn-stroked green-text" href="#">Colored</a>

import { IconButton } from 'n2-styles'

function myComponent(props) {
  return (
    <IconButton icon="menu" label="Menu" link="#" />
    <IconButton className="white-text" icon="menu" label="Menu" link="#" />
  );
}

<a class="btn-icon" href="#">
  <i class="material-icons" aria-label="Menu">menu</i>
</a>
<a class="btn-icon white-text" href="#">
  <i class="material-icons" aria-label="Menu">menu</i>
</a>

import {
  Button,
  Card,
  CardBody,
  CardContent,
  CardFooter,
  CardHeader
} from 'n2-styles';

function CardWithButtons({...props}) {
  return (
    <Card>
      <CardHeader title="Permissions" />
      <CardContent>
        <CardBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus
          tellus scelerisque accumsan pulvinar. Pellentesque rhoncus ante non
          eros porttitor, ut vulputate nulla scelerisque. Duis at ullamcorper
          enim. Nunc at consequat orci. Nulla consequat libero nisi.
        </CardBody>
      </CardContent>
      <CardFooter>
        <Button text="Button" link="#" />
        <Button text="Button" link="#" style="flat" />
      </CardFooter>
    </Card>
  );
}

export { CardWithButtons };

<div class="card animated fadeIn">
  <div class="n2-card-header">
    <div>
      <h3 class="mb-0 grey-text text-darken-3">Permissions</h3>
    </div>
  </div>
  <div class="p-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus tellus scelerisque accumsan pulvinar. Pellentesque rhoncus ante non eros porttitor, ut vulputate nulla scelerisque. Duis at ullamcorper enim. Nunc at consequat orci. Nulla consequat libero nisi.
  </div>
  <div class="n2-card-footer">
    <a class="btn btn-primary" href="#">Button</a>
    <a class="btn-flat" href="#">Button</a>
  </div>
</div>

import { IconButton } from 'n2-styles'

function myComponent(props) {
  return (
    <IconButton className="red" icon="add" label="Add Item" link="#" />
    <IconButton className="red btn-large" icon="add" label="Add Item" link="#" style="floating" />
  );
}

<a class="btn-floating red" href="#">
  <i class="material-icons" aria-label="Add Item">add</i>
</a>
<a class="btn-floating red btn-large" href="#">
  <i class="material-icons" aria-label="Add Item">add</i>
</a>

import React from 'react';
import { useState } from 'react';
import { Button } from 'n2-styles';
import { Collapse } from 'react-bootstrap';

function ToggleContent({...props}) {
  const [active, setActive] = useState(false);

  return (
    <Button onClick={() => setActive(!active)} style="flat">
      {active ? "Hide Content" : "Show Content"}
    </Button>
    <Collapse in={active}>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ultrices
        lectus, non congue eros. Aliquam vestibulum, sem ac viverra pretium,
        odio ex pellentesque odio, eu suscipit nunc magna in mi. Aliquam erat
        volutpat. Proin vulputate ex dui, nec hendrerit augue consequat quis.
        Sed at porttitor est. Ut malesuada metus sem, nec malesuada sem
        varius eu. Cras non sollicitudin orci. Nulla facilisi.
      </p>
      <p>
        Integer commodo dui et mauris viverra, eget mattis nulla condimentum.
        Sed sit amet eros tellus. Quisque faucibus euismod elit, eu rhoncus augue
        euismod nec. Ut sit amet elit magna. Suspendisse sollicitudin nisi justo,
        id eleifend nisi pharetra nec. Suspendisse mollis augue ligula.
        Donec volutpat nulla vitae viverra imperdiet. Aenean sit amet quam magna.
        Quisque consequat mi id turpis lacinia varius. Duis pharetra diam
        nec viverra pellentesque. Nullam tincidunt ex elit.
      </p>
    </Collapse>
  );
}

export { ToggleContent };

// TODO