44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import remcalc from 'remcalc';
|
|
import { Row, Col } from 'react-styled-flexboxgrid';
|
|
|
|
import {
|
|
CardOutlet,
|
|
CardHeader,
|
|
CardHeaderMeta,
|
|
Card,
|
|
ArrowIcon
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
const capitalizeFirstLetter = string =>
|
|
string.charAt(0).toUpperCase() + string.slice(1);
|
|
|
|
const FullWidthCard = styled(Card)`
|
|
flex-basis: 100%;
|
|
margin-bottom: ${remcalc(18)};
|
|
`;
|
|
|
|
const ListRules = ({ rule }) => (
|
|
<FullWidthCard shadow collapsed>
|
|
<CardHeader secondary={false} transparent={false}>
|
|
<CardHeaderMeta>
|
|
<Row between="xs" middle="xs">
|
|
<Col xs={11}>
|
|
<b>{capitalizeFirstLetter(rule.instance)}</b>
|
|
{`: be on ${rule.be} node as the instance(s) identified by the ${
|
|
rule.type
|
|
} ${rule.match} "${rule.value}"`}
|
|
</Col>
|
|
<Col xs={1}>
|
|
<ArrowIcon />
|
|
</Col>
|
|
</Row>
|
|
</CardHeaderMeta>
|
|
</CardHeader>
|
|
<CardOutlet>Stuff</CardOutlet>
|
|
</FullWidthCard>
|
|
);
|
|
|
|
export default ListRules;
|