Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/components/Colors/CardColor.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { 
+    Card, 
+    CardTitle, 
+    CardBody, 
+    CardHeader
+} from './../../../components';
+
+import { InfoPopover } from './InfoPopover';
+
+const CardColor = (props) => (
+    <Card className={ `mb-3 ${ props.cardClass }` }>
+        <CardHeader className={ `bg-${ props.color }` } style={{ height: '120px' }} />
+        <CardBody>
+            <CardTitle tag="h6">
+                { props.color }
+            </CardTitle>
+            <dl className="row mb-0">
+                <dt className="col-sm-4">Hex</dt>
+                <dd className="col-sm-8 text-inverse samp">
+                    {props.hex}
+                </dd>
+                <dt className="col-sm-4">Rgba</dt>
+                <dd className="col-sm-8 text-inverse">
+                    {props.rgba}
+                </dd>
+                <dt className="col-sm-4">Cmyk</dt>
+                <dd className="col-sm-8 text-inverse">
+                    {props.cmyk}
+                </dd>
+                <dt className="col-sm-4">Scss</dt>
+                <dd className="col-sm-8 text-inverse">
+                    ${ props.color }
+                </dd>
+                <dt className="col-sm-4">More</dt>
+                <dd className="col-sm-8 text-inverse">
+                    <InfoPopover colorId={ props.color } href="javascript:;">
+                        Details 
+                        <i className="fa fa-angle-up ml-1"></i>
+                    </InfoPopover>
+                </dd>
+            </dl>
+        </CardBody>
+    </Card>
+
+)
+CardColor.propTypes = {
+    cardClass: PropTypes.node,
+    color: PropTypes.node,
+    hex: PropTypes.node,
+    rgba: PropTypes.node,
+    cmyk: PropTypes.node,
+    scss: PropTypes.node
+};
+CardColor.defaultProps = {
+    cardClass: "",
+    color: "Waiting for Data...",
+    hex: "Waiting for Data...",
+    rgba: "Waiting for Data...",
+    cmyk: "Waiting for Data...",
+    scss: "Waiting for Data...",
+};
+
+export { CardColor };

app/routes/components/Colors/CardRgbaColor.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { 
+    Card, 
+    CardBody, 
+    CardFooter,
+    Button,
+    CardHeader
+} from './../../../components';
+
+import { InfoPopover } from './InfoPopover';
+
+const CardRgbaColor = (props) => (
+    <Card className={ `mb-3 ${ props.cardClass }` }>
+    {
+        _.times(9, (index) => {
+            let Tag = CardFooter;
+            Tag = index === 0 ? CardHeader : CardBody;
+            Tag = index === 8 ? CardFooter : CardBody;
+            const colorId = `${ props.color }-0${ index + 1 }`
+            return (
+                <Tag className={ `d-flex justify-content-center b-0 bg-${ colorId }` } key={ index }>
+                    <InfoPopover className="h6 text-inverse p-1 mb-0" colorId={ colorId } tag={ Button } color="link">
+                        { colorId } 
+                        <i className="fa fa-angle-up ml-1"></i>
+                    </InfoPopover>
+                </Tag>
+            );
+        })
+    }
+    </Card>
+);
+CardRgbaColor.propTypes = {
+    cardClass: PropTypes.node,
+    color: PropTypes.node
+};
+CardRgbaColor.defaultProps = {
+    cardClass: "",
+    color: "Waiting for Data..."
+};
+
+export { CardRgbaColor };

app/routes/components/Colors/InfoPopover.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+    UncontrolledPopover,
+    PopoverHeader,
+    PopoverBody,
+    Button
+} from './../../../components';
+
+export const POPOVER_BODY_PARTS = [
+    '.text-',
+    '.bg-',
+    '.b-',
+    '.bl-',
+    '.br-',
+    '.bt-',
+    '.bb-',
+    '.by-',
+    '.bx-',
+    '.btn-'
+];
+
+export const InfoPopover = ({ colorId, children, className, tag: Tag, ...otherProps }) => (
+    <React.Fragment>
+        <Tag color="link" id={ `color-popover--${ colorId }` } className={ className } { ...otherProps }>
+            { children }
+        </Tag>
+        <UncontrolledPopover
+            target={ `color-popover--${ colorId }` }
+            placement="top"
+        >
+            <PopoverHeader>
+                Color Options for { colorId }
+            </PopoverHeader>
+            <PopoverBody>
+            {
+                POPOVER_BODY_PARTS.map((partText, index) =>
+                    <span className="mr-1" key={ index }>{ `${partText}${colorId}` }</span>
+                )
+            }   
+            </PopoverBody>
+        </UncontrolledPopover>
+    </React.Fragment>
+);
+InfoPopover.propTypes = {
+    colorId: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    tag: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func
+    ])
+};
+InfoPopover.defaultProps = {
+    tag: 'a'
+}