How to use fundamental-react - 10 common examples

}

export const CollapseArrow = styled(Icon)`
  && {
    margin-left: 5px;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  &:before {
    transition: 0.3s ease;
    ${(props: CollapseArrowProps) => props.open && 'transform: rotate(90deg);'};
  }
`;

Icon.defaultProps = {
  size: 'l',
  glyph: 'feeder-arrow',
};

export const CollapseButton = styled(Button)`
  && {
    direction: rtl;
    margin-bottom: 20px;
  }
  &:before {
    margin-right: 0;
    margin-left: 8px;
    transition: 0.3s ease;
    ${(props: { open?: boolean }) => props.open && 'transform: rotate(90deg);'};
  }
`;

color: ${props => (props.active ? `#0b74de` : '#32363a')};
  font-size: 14px;
  font-weight: ${props => (props.active ? 'bold' : 'normal')};
  display: block;
  border: 1px solid transparent;
  border-left: ${props =>
    props.active && props.noArrow ? '3px solid' : '1px solid transparent'};
  position: relative;

  :hover {
    color: #0b74de;
    cursor: pointer;
  }
`;

Icon.defaultProps = { glyph: 'feeder-arrow', size: 's' };
export const CollapseArrow = styled(Icon)`
  && {
    margin-left: 5px;
    position: relative;
    top: 1px;
    display: inline-block;
    cursor: pointer;
  }
  &:before {
    transition: 0.3s ease;
    ${props => props.open && 'transform: rotate(90deg);'};
  }
`;

};

export const CollapseButton = styled(Button)`
  && {
    direction: rtl;
    margin-bottom: 20px;
  }
  &:before {
    margin-right: 0;
    margin-left: 8px;
    transition: 0.3s ease;
    ${(props: { open?: boolean }) => props.open && 'transform: rotate(90deg);'};
  }
`;

Button.defaultProps = {
  option: 'emphasized',
  glyph: 'feeder-arrow',
};

export const TablePanel = styled(Panel)`
  && {
    box-shadow: none;
  }
`;

export const TableHeaderWrapper = styled(PanelHeader)`
  && {
    border-top: solid 1px #eeeeef;
    border-bottom: none;
    box-shadow: none;
    padding-left: 20px;

import styled from 'styled-components';
import { Panel, Table } from 'fundamental-react';

const PanelHeader = Panel.Header;
const PanelHead = Panel.Head;
const PanelActions = Panel.Actions;
const PanelBody = Panel.Body;

export const TableWrapper = styled(Panel)``;

export const TableHeader = styled(PanelHeader)`
  && {
    padding: 16px;
  }
`;

export const TableHeaderHead = styled(PanelHead)``;

export const TableHeaderActions = styled(PanelActions)``;

export const TableBody = styled(PanelBody)`
  && {

import styled from 'styled-components';
import { Panel, Table } from 'fundamental-react';

const PanelHeader = Panel.Header;
const PanelHead = Panel.Head;
const PanelActions = Panel.Actions;
const PanelBody = Panel.Body;

export const TableWrapper = styled(Panel)``;

export const TableHeader = styled(PanelHeader)`
  && {
    padding: 16px;
  }
`;

export const TableHeaderHead = styled(PanelHead)``;

export const TableHeaderActions = styled(PanelActions)``;

export const TableBody = styled(PanelBody)`
  && {
    padding: 0;

import styled from 'styled-components';
import { Panel, Table } from 'fundamental-react';

const PanelHeader = Panel.Header;
const PanelHead = Panel.Head;
const PanelActions = Panel.Actions;
const PanelBody = Panel.Body;

export const TableWrapper = styled(Panel)``;

export const TableHeader = styled(PanelHeader)`
  && {
    padding: 16px;
  }
`;

export const TableHeaderHead = styled(PanelHead)``;

export const TableHeaderActions = styled(PanelActions)``;

export const TableBody = styled(PanelBody)`

import styled from 'styled-components';
import { Panel, Table } from 'fundamental-react';

const PanelHeader = Panel.Header;
const PanelHead = Panel.Head;
const PanelActions = Panel.Actions;
const PanelBody = Panel.Body;

export const TableWrapper = styled(Panel)``;

export const TableHeader = styled(PanelHeader)`
  && {
    padding: 16px;
  }
`;

export const TableHeaderHead = styled(PanelHead)``;

export const TableHeaderActions = styled(PanelActions)``;

import { Tile, TileGrid } from 'fundamental-react';
const TileMedia = Tile.Media;
const TileContent = Tile.Content;
export { Tile, TileContent, TileGrid, TileMedia };

import { Tile, TileGrid } from 'fundamental-react';
const TileMedia = Tile.Media;
const TileContent = Tile.Content;
export { Tile, TileContent, TileGrid, TileMedia };

import styled from 'styled-components';
import { ActionBar as AB } from 'fundamental-react/lib/ActionBar';
import { sizes } from '../../commons';

const ABBack = AB.Back;
const ABHeader = AB.Header;
const ABActions = AB.Actions;

export const ActionBar = styled(AB)`
  && {
    padding: 30px 30px 0 30px;
    ${props => (props.background ? `background: ${props.background}` : '')};
  }
`;

export const ActionBarBack = styled(ABBack)`
  && {
    @media (min-width: 320px) {
      display: block !important;
    }
  }
`;