Merge branch 'master' of https://github.com/yldio/joyent-portal

frontend/src/components/service-item/index.js

@@ -1,12 +1,13 @@
 const React = require('react');
-// const ReactRouter = require('react-router');
+const ReactRouter = require('react-router');
 
+const Anchor = require('@ui/components/anchor');
 const List = require('@ui/components/list');
 const PropTypes = require('@root/prop-types');
 
-// const {
-//   Link
-// } = ReactRouter;
+const {
+  Link
+} = ReactRouter;
 
 const {
   ListItem,
@@ -21,15 +22,16 @@ const {
   ListItemHeader
 } = List;
 
-const Service = ({
+const ServiceItem = ({
   org = '',
   project = '',
   service = {}
 }) => {
-  // const to = `/${org}/projects/${project}/services/${service.id}`;
+  const to = `/${org}/projects/${project}/services/${service.id}`;
 
   const childs = service.services.map((service) => (
     <ListItem
+      collapsed={service.collapsed}
       flat
       key={service.uuid}
       stacked={service.instances > 1}
@@ -62,10 +64,21 @@ const Service = ({
   );
 
   return (
-    <ListItem headed>
+    <ListItem
+      collapsed={service.collapsed}
+      headed
+    >
       <ListItemHeader>
         <ListItemMeta>
-          <ListItemTitle>{service.name}</ListItemTitle>
+          <ListItemTitle>
+            <Link to={to}>
+              {Anchor.fn(
+                <Anchor secondary>
+                  {service.name}
+                </Anchor>
+              )}
+            </Link>
+          </ListItemTitle>
           <ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
         </ListItemMeta>
         <ListItemOptions>…</ListItemOptions>
@@ -75,10 +88,10 @@ const Service = ({
   );
 };
 
-Service.propTypes = {
+ServiceItem.propTypes = {
   org: React.PropTypes.string,
   project: React.PropTypes.string,
   service: PropTypes.service
 };
 
-module.exports = Service;
+module.exports = ServiceItem;

frontend/src/containers/services/index.js

@@ -3,7 +3,7 @@ const ReactRedux = require('react-redux');
 
 const EmptyServices = require('@components/empty/services');
 const PropTypes = require('@root/prop-types');
-const Service = require('./service');
+const ServiceItem = require('@components/service-item');
 const selectors = require('@state/selectors');
 
 const {
@@ -26,7 +26,7 @@ const Services = ({
   );
 
   const serviceList = services.map((service) => (
-    <Service
+    <ServiceItem
       key={service.uuid}
       org={org.id}
       project={project.id}

frontend/src/mock-state.json

@@ -160,6 +160,7 @@
   },
   "services": {
     "ui": {
+      "collapsed": [],
       "sections": [
         "summary",
         "instances",

frontend/src/state/actions.js

@@ -10,5 +10,6 @@ const APP = constantCase(process.env['APP_NAME']);
 module.exports = {
   ...require('@state/thunks'),
   updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
-  toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`)
+  toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`),
+  toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`)
 };

frontend/src/state/reducers/services.js

@@ -1,9 +1,23 @@
 const ReduxActions = require('redux-actions');
 
+const actions = require('@state/actions');
+
 const {
   handleActions
 } = ReduxActions;
 
+const {
+  toggleServiceCollapsed
+} = actions;
+
 module.exports = handleActions({
-  'x': (state) => state // somehow handleActions needs at least one reducer
+  [toggleServiceCollapsed.toString()]: (state, action) => ({
+    ...state,
+    ui: {
+      ...state.ui,
+      collapsed: state.ui.collapsed.indexOf(action.payload) >= 0
+        ? state.ui.collapsed.filter((uuid) => uuid !== action.payload)
+        : [...state.ui.collapsed, action.payload]
+    }
+  })
 }, {});

frontend/src/state/selectors.js

@@ -15,6 +15,7 @@ const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
 const orgs = (state) => get(state, 'orgs.data', []);
 const projects = (state) => get(state, 'projects.data', []);
 const services = (state) => get(state, 'services.data', []);
+const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
 const instances = (state) => get(state, 'instances.data', []);
 
 const projectById = (projectId) => createSelector(
@@ -45,19 +46,28 @@ const orgSections = (orgId) => createSelector(
 );
 
 const servicesByProjectId = (projectId) => createSelector(
-  [services, projectById(projectId)],
-  (services, project) =>
+  [services, projectById(projectId), collapsedServices],
+  (services, project, collapsed) =>
     services.filter((s) => s.project === project.uuid)
     .map((service) => ({
       ...service,
       services: services.filter((s) => s.parent === service.uuid)
     }))
     .filter((s) => !s.parent)
+    .map((service) => ({
+      ...service,
+      collapsed: collapsed.indexOf(service.uuid) >= 0,
+      services: service.services.map((service) => ({
+        ...service,
+        collapsed: collapsed.indexOf(service.uuid) >= 0
+      }))
+    }))
 );
 
 const instancesByServiceId = (serviceId) => createSelector(
   [instances, serviceById(serviceId)],
-  (instances, service) => instances.filter((i) => i.service === service.uuid)
+  (instances, service) =>
+    instances.filter((i) => i.service === service.uuid)
 );
 
 

ui/src/components/anchor/index.js

@@ -0,0 +1,26 @@
+const constants = require('../../shared/constants');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  default: styled
+} = Styled;
+
+const color = (props) => props.secondary
+  ? colors.brandSecondaryLink
+  : colors.brandPrimaryLink;
+
+const Anchor = styled.a`
+  color: ${color} !important;
+`;
+
+module.exports = Anchor;
+
+module.exports.fn = (element) => (props) => React.cloneElement(element, {
+  ...element.props,
+  ...props
+}, element.props.children);

ui/src/components/base/index.js

@@ -5,9 +5,9 @@ const Styled = require('styled-components');
 
 const {
   forms,
-  links,
   tables,
-  typography
+  typography,
+  colors
 } = constants;
 
 const {
@@ -31,12 +31,12 @@ const fontFilenames = [
 
 module.exports = styled.div`
   ${generateFonts(fontFamilies, fontFilenames)};
-  
+
   font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.5;
-  color: #373A3C;
+  color: ${colors.fonts.regular};
   background-color: #FFFFFF;
 
   /**************************************************************************
@@ -343,13 +343,12 @@ module.exports = styled.div`
    */
 
   & a {
-    color: ${links.color};
-    text-decoration: ${links.decoration};
+    color: ${colors.brandPrimaryLink};
+    text-decoration: underline;
 
     &:focus,
     &:hover {
-      color: ${links.hoverColor};
-      text-decoration: ${links.hoverDecoration};
+      text-decoration: none;
     }
 
     &:focus {
@@ -364,8 +363,7 @@ module.exports = styled.div`
 
     &:focus,
     &:hover {
-      color: ${links.hoverColor};
-      text-decoration: ${links.hoverDecoration};
+      text-decoration: none;
     }
 
     &:focus {

ui/src/components/close/index.js

@@ -0,0 +1,39 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
+const React = require('react');
+const Styled = require('styled-components');
+const closeIcon = require('../../shared/assets/close');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const Close = ({
+  style,
+  onClick
+}) => {
+  return (
+    <StyledButton
+      style={style}
+      onClick={onClick}
+    >
+      <img src={closeIcon} alt="Close"/>
+    </StyledButton>
+  );
+};
+
+Close.propTypes = {
+  style: React.PropTypes.object,
+  onClick: React.PropTypes.func
+};
+
+module.exports = Close;

ui/src/components/close/readme.md

@@ -0,0 +1,65 @@
+# `<Notification>`
+
+## demo
+
+```embed  
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Notificaton = require('./index.js');
+const styles = require('./style.css');
+
+const style = {
+  marginBottom: 0
+}
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Notificaton type='warning' icon='exclamation'>
+          <p style={style}>This is the warning content</p>
+        </Notificaton>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <Notificaton type='warning' icon='question'>
+          <p style={style}>This is the question content</p>   
+        </Notificaton>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <Notificaton type='alert' icon='exclamation'>
+          <p style={style}>This is the alert content</p>   
+        </Notificaton>
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Notificaton = require('ui/avatar');
+
+module.exports = () => {
+  return (
+    <Notificaton type='warning' icon='question'>  
+      <p>This is the warning content</p>
+    </Notificaton>
+    <Notificaton type='warning' icon='question'>
+      <p>This is the question content</p>
+    </Notificaton>
+    <Notificaton type='alert' icon='exclamation'>
+      <p>This is the alert content</p>
+    </Notificaton>
+  );
+}
+```

ui/src/components/list/view.js

@@ -16,26 +16,28 @@ const paddingTop = (props) => props.headed && !props.fromHeader
   ? remcalc(47)
   : remcalc(0);
 
-const display = (props) => props.headed && !props.fromHeader && props.collapsed
-  ? 'none'
-  : 'flex';
-
 const StyledView = styled(Row)`
   flex: 1;
   margin: 0;
   height: 100%;
   padding-top: ${paddingTop};
-  display: ${display};
 `;
 
-const View = (props) => (
-  <StyledView name='list-item-view' {...props}>
-    {props.children}
-  </StyledView>
-);
+const View = (props) => {
+  const hide = props.headed && !props.fromHeader && props.collapsed;
+
+  return hide ? null : (
+    <StyledView name='list-item-view' {...props}>
+      {props.children}
+    </StyledView>
+  );
+};
 
 View.propTypes = {
-  children: React.PropTypes.node
+  children: React.PropTypes.node,
+  collapsed: React.PropTypes.bool,
+  fromHeader: React.PropTypes.bool,
+  headed: React.PropTypes.bool
 };
 
 module.exports = transferProps([

ui/src/components/mini-metric/graph.js

@@ -0,0 +1,115 @@
+const buildArray = require('build-array');
+const Chart = require('chart.js');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+const whisker = require('chartjs-chart-box-plot');
+
+whisker(Chart);
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const Container = styled.div`
+  position: relative;
+  height: ${remcalc(72)};
+  width: 100%;
+`;
+
+const Canvas = styled.canvas`
+  position: absolute;
+  bottom: 0;
+`;
+
+class Graph extends React.Component {
+  componentDidMount() {
+    const {
+      data = [],
+      labels = 0,
+      max = 100,
+      min = 0
+    } = this.props;
+
+    const _labels = !Array.isArray(labels)
+      ? buildArray(labels || data.length).map((v, i) => '')
+      : labels;
+
+    this._chart = new Chart(this._refs.component, {
+      type: 'whisker',
+      responsive: true,
+      maintainAspectRatio: true,
+      options: {
+        scales: {
+          xAxes: [{
+            display: false,
+            barPercentage: 1.0,
+            categoryPercentage: 1.0
+          }],
+          yAxes: [{
+            display: false,
+            ticks: {
+              min: min,
+              max: max
+            }
+          }]
+        },
+        legend: {
+          display: false
+        }
+      },
+      data: {
+        labels: _labels,
+        datasets: [{
+          data
+        }]
+      }
+    });
+  }
+  componentWillReceiveProps(nextProps) {
+    const {
+      data = [],
+      labels = 0
+    } = this.props;
+
+    const _labels = !Array.isArray(labels)
+      ? buildArray(labels || data.length).map((v, i) => '')
+      : labels;
+
+    this._chart.data.datasets = [{
+      data
+    }];
+
+    this._chart.data.labels = _labels;
+    this._chart.update(0);
+  }
+  ref(name) {
+    this._refs = this._refs || {};
+
+    return (el) => {
+      this._refs[name] = el;
+    };
+  }
+  render() {
+    return (
+      <Container>
+        <Canvas
+          innerRef={this.ref('component')}
+        />
+      </Container>
+    );
+  }
+}
+
+Graph.propTypes = {
+  data: React.PropTypes.array,
+  labels: React.PropTypes.number,
+  max: React.PropTypes.number,
+  min: React.PropTypes.number
+};
+
+module.exports = Graph;

ui/src/components/mini-metric/index.js

@@ -1,166 +1,7 @@
-const React = require('react');
-const Styled = require('styled-components');
-const constants = require('../../shared/constants');
-
-const {
-  colors
-} = constants;
-
-const {
-  default: styled
-} = Styled;
-
-const buildArray = require('build-array');
-const Chart = require('chart.js');
-const whisker = require('chartjs-chart-box-plot');
-
-whisker(Chart);
-
-const StyledDiv = styled.div`
-  height: 127px;
-  width: 158px;
-  background-color: ${colors.miniBackground};
-  border: solid 1px ${colors.borderSecondary};
-
-  &::before {
-    position: absolute;
-    z-index: 1;
-    width: 9px;
-    height: 127px;
-    background-image:
-      linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
-    content: '';
-  }
-`;
-
-const Devider = styled.div`
-  width: 158px;
-  height: 1px;
-  background-color: ${colors.seperator}
-`;
-
-const TextMetric = styled.div`
-  height: 38px;
-  padding: 8px 12px;
-`;
-
-const InnerTextBox = styled.div`
-  width: 136px;
-  height: 36px;
-  font-family: 'Libre Franklin', sans-serif;
-  font-size: 12px;
-  font-weight: normal;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: 18px;
-  text-align: right;
-  color: ${colors.regular};
-
-  & p {
-    margin: 0;
-  }
-
-  & h3 {
-    margin: 0;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1.29;
-    color: ${colors.semibold};
-  }
-`;
-
-const StyledCanvas = styled.canvas`
-`;
-
-class MiniMetric extends React.Component {
-  componentDidMount() {
-    const {
-      datasets = [],
-      labels = 0,
-      max = 100,
-      min = 0
-    } = this.props;
-
-    const _labels = !Array.isArray(labels)
-      ? buildArray(labels).map((v, i) => '')
-      : labels;
-
-    this._chart = new Chart(this._refs.component, {
-      type: 'whisker',
-      responsive: true,
-      maintainAspectRatio: true,
-      options: {
-        scales: {
-          xAxes: [{
-            display: false,
-            barPercentage: 1.0,
-            categoryPercentage: 1.0
-          }],
-          yAxes: [{
-            display: false,
-            ticks: {
-              min: min,
-              max: max
-            }
-          }]
-        },
-        legend: {
-          display: false
-        }
-      },
-      data: {
-        labels: _labels,
-        datasets: datasets
-      }
-    });
-  }
-  componentWillReceiveProps(nextProps) {
-    const {
-      datasets = [],
-      labels = 0
-    } = this.props;
-
-    this._chart.data.datasets = datasets;
-    this._chart.data.labels = buildArray(labels).map((v, i) => '');
-    this._chart.update(0);
-  }
-  ref(name) {
-    this._refs = this._refs || {};
-
-    return (el) => {
-      this._refs[name] = el;
-    };
-  }
-  render() {
-    const {
-      name,
-    } = this.props;
-
-    return (
-      <StyledDiv>
-        <TextMetric>
-          <InnerTextBox>
-            <h3>{name}: 54%</h3>
-            <p>(1280/3000 MB)</p>
-          </InnerTextBox>
-        </TextMetric>
-        <Devider />
-        <StyledCanvas
-          height='72'
-          innerRef={this.ref('component')}
-          width='157'
-        />
-      </StyledDiv>
-    );
-  }
-}
-
-MiniMetric.propTypes = {
-  datasets: React.PropTypes.array,
-  labels: React.PropTypes.number,
-  max: React.PropTypes.number,
-  min: React.PropTypes.number,
-  name: React.PropTypes.string,
+module.exports = {
+  MiniMetricGraph: require('./graph'),
+  MiniMetricMeta: require('./meta'),
+  MiniMetricTitle: require('./title'),
+  MiniMetricSubtitle: require('./subtitle'),
+  MiniMetricView: require('./view')
 };
-
-module.exports = MiniMetric;

ui/src/components/mini-metric/meta.js

@@ -0,0 +1,41 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const OuterBox = styled.div`
+  height: ${remcalc(53)};
+  padding: ${remcalc(8)} ${remcalc(12)};
+  border-bottom: ${remcalc(1)} solid ${colors.seperator};
+`;
+
+const InnerBox = styled.div`
+  width: 100%;
+  height: ${remcalc(36)};
+`;
+
+const Meta = (props) => (
+  <OuterBox {...props}>
+    <InnerBox>
+      {props.children}
+    </InnerBox>
+  </OuterBox>
+);
+
+Meta.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Meta;

ui/src/components/mini-metric/subtitle.js

@@ -0,0 +1,26 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+
+const {
+  remcalc
+} = fns;
+
+const {
+  colors
+} = constants;
+
+const {
+  default: styled
+} = Styled;
+
+module.exports = styled.p`
+  margin: 0;
+  text-align: right;
+  font-size: ${remcalc(12)};
+  line-height: ${remcalc(18)};
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  color: ${colors.regular};
+`;

ui/src/components/mini-metric/title.js

@@ -0,0 +1,26 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+module.exports = styled.h3`
+  margin: 0;
+  text-align: right;
+  font-size: ${remcalc(14)};
+  font-weight: 600;
+  font-style: normal;
+  line-height: 1.29;
+  color: ${colors.semibold};
+  margin-bottom: ${remcalc(3)} !important;
+`;

ui/src/components/mini-metric/view.js

@@ -0,0 +1,47 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const Container = styled.div`
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: ${colors.miniBackground};
+  border: solid ${remcalc(1)} ${colors.borderSecondary};
+`;
+
+const Shadow = styled.div`
+  position: absolute;
+  height: 100%;
+  width: ${remcalc(9)};
+  left: 0;
+  top: 0;
+  background-image:
+    linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
+`;
+
+const View = (props) => (
+  <Container {...props}>
+    <Shadow />
+    {props.children}
+  </Container>
+);
+
+View.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = View;

ui/src/components/notification/index.js

@@ -1,6 +1,6 @@
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
-const match = require('../../shared/match');
+const composers = require('../../shared/composers');
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -12,44 +12,46 @@ const {
   remcalc
 } = fns;
 
-const {
-  prop: matchProp
-} = match;
-
 const {
   default: styled
 } = Styled;
 
-const background = matchProp({
-  warning: colors.warningLight,
-  alert: colors.alertLight,
-}, 'transparent');
+const {
+  baseBox,
+  pseudoEl
+} = composers;
 
-const border = matchProp({
-  warning: colors.warning,
-  alert: 'red',
-}, 'none');
+const decorationWidth = remcalc(108);
 
 const StyledNotification = styled.div`
-  border-radius: 4px;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
   display: inline-block;
-  height: 100%;
+  min-height: 100%;
+  position: relative;
+  width: 100%;
 
-  background-color: ${background('type')};
-  border: ${border('type')};
+  ${baseBox(0)}
+  
+  &::before {
+    background-color: ${props => colors[props.type] || colors.brandPrimary}
+    width: ${decorationWidth};
+    height: 100%;
+    
+    ${pseudoEl()}
+  }
 `;
 
 const StyledContent = styled.div`
   float: left;
-  padding: ${remcalc(20)};
+  padding: ${remcalc(18)} 20% ${remcalc(18)} ${remcalc(18)};
+  margin-left: ${decorationWidth};
+  width: 100%;
 `;
 
 const Notificaton = ({
   children,
   className,
   style,
-  type = ''
+  type
 }) => {
   return (
     <StyledNotification
@@ -68,7 +70,7 @@ Notificaton.propTypes = {
   children: React.PropTypes.object,
   className: React.PropTypes.str,
   style: React.PropTypes.object,
-  type: React.PropTypes.str
+  type: React.PropTypes.string
 };
 
 module.exports = Notificaton;

ui/src/index.js

@@ -1,6 +1,7 @@
 module.exports = {
   Base: require('./components/base'),
   AddMetric: require('./components/add-metric'),
+  Anchor: require('./components/anchor'),
   Avatar: require('./components/avatar'),
   Button: require('./components/button'),
   Checkbox: require('./components/checkbox'),

ui/src/shared/constants/colors.js

@@ -10,7 +10,8 @@ const brandPrimary = {
   borderPrimary: '#2531BC',
   borderPrimaryDark: '#2531BC',
   borderPrimaryDarkest: '#062BA0',
-  brandPrimaryColor: '#FFFFFF'
+  brandPrimaryColor: '#FFFFFF',
+  brandPrimaryLink: '#364acd'
 };
 
 const brandSecondary = {
@@ -20,7 +21,8 @@ const brandSecondary = {
   borderSecondary: '#D8D8D8',
   borderSecondaryDark: '#D8D8D8',
   borderSecondaryDarkest: '#D8D8D8',
-  brandSecondaryColor: '#464646'
+  brandSecondaryColor: '#464646',
+  brandSecondaryLink: '#ffffff'
 };
 
 const brandInactive = {
@@ -33,6 +35,7 @@ const notifications = {
   alert: '#DA4B42',
   alertLight: '#FFC7C7',
   confirmation: '#00AF66',
+  success: '#00AF66',
   warning: '#E4A800',
   warningLight: '#FFFAED',
 };
@@ -48,7 +51,7 @@ const colors = {
   ...brandInactive,
   ...notifications,
   ...metrics,
-  ...fonts
+  fonts
 };
 
 module.exports = colors;

ui/src/shared/constants/index.js

@@ -6,7 +6,6 @@ const boxes = require('./boxes');
 const typography = require('./typography');
 const sizes = require('./sizes');
 const breakpoints = require('./breakpoints');
-const links = require('./links');
 
 const tables = {
   bg: 'transparent',
@@ -21,7 +20,6 @@ const constants = traverse({
   colors,
   boxes,
   forms,
-  links,
   sizes,
   tables,
   typography

ui/src/shared/constants/links.js

@@ -1,14 +0,0 @@
-const Color = require('color');
-
-const links = {
-  color: '#364ACD',
-  decoration: 'none',
-  hoverColor: ({
-    color
-  }) => {
-    return Color(color).darken(0.15).hex();
-  },
-  hoverDecoration: 'underline'
-};
-
-module.exports = links;

ui/src/shared/constants/typography.js

@@ -1,8 +1,6 @@
 const colors = require('./colors');
 
 const typography = {
-  fontPrimary: 'sans serif',
-  dtFontWeight: 'bold',
   abbrBorderColor: colors.brandSecondary,
   textMuted: colors.brandSecondary
 };

ui/src/shared/functions.js

@@ -22,16 +22,16 @@ const generateFonts = (fontFamilies, fontFilenames) => {
     fontCSS += `
       @font-face {
         font-family: ${fontFamily};
-        src: url(${pathToFont}${fontFilenames[i]}.eot);
-        src: url(${pathToFont}${fontFilenames[i]}.eot?#iefix) 
+        src: url(${pathToFont + fontFilenames[i]}.eot);
+        src: url(${pathToFont + fontFilenames[i]}.eot?#iefix) 
              format('embedded-opentype');
-        src: url(${pathToFont}${fontFilenames[i]}.woff) 
+        src: url(${pathToFont + fontFilenames[i]}.woff) 
              format('woff');
-        src: url(${pathToFont}${fontFilenames[i]}.woff2) 
+        src: url(${pathToFont + fontFilenames[i]}.woff2) 
              format('woff2');
-        src: url(${pathToFont}${fontFilenames[i]}.ttf) 
+        src: url(${pathToFont + fontFilenames[i]}.ttf) 
              format('truetype');
-        src: url(${pathToFont}${fontFilenames[i]}.svg#${fontFamily}) 
+        src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily}) 
              format('svg');
         font-weight: normal;
         font-style: normal;  

ui/stories/index.js

@@ -33,7 +33,13 @@ const {
     ListItemView,
     ListItemGroupView
   },
-  MiniMetric,
+  MiniMetric: {
+    MiniMetricGraph,
+    MiniMetricMeta,
+    MiniMetricTitle,
+    MiniMetricSubtitle,
+    MiniMetricView
+  },
   Modal,
   Notificaton,
   Pagination,
@@ -72,7 +78,7 @@ const styles = {
 
 storiesOf('Grid', module)
   .add('Row and Column', () => (
-    <Base data-id="base">
+    <Base>
       <Container fluid>
         <Row>
           <Column
@@ -220,16 +226,20 @@ storiesOf('Radio', module)
 
 storiesOf('Input', module)
   .add('Default', () => (
-    <Input placeholder="I am the placeholder" />
+    <Base>
+      <Input placeholder="I am the placeholder" />
+    </Base>
   ))
   .add('type=email', () => (
-    <Input
-      label='Email Address'
-      placeholder='Enter email'
-      type='email'
-    >
-      <small>We&apos;ll never share your email with anyone else.</small>
-    </Input>
+    <Base>
+      <Input
+        label='Email Address'
+        placeholder='Enter email'
+        type='email'
+      >
+        <small>We&apos;ll never share your email with anyone else.</small>
+      </Input>
+    </Base>
   ));
 
 storiesOf('Modal', module)
@@ -241,19 +251,25 @@ storiesOf('Modal', module)
 
 storiesOf('Notificaton', module)
   .add('Default', () => (
-    <Notificaton>
-      <span>This is the default content</span>
-    </Notificaton>
+    <Base>
+      <Notificaton>
+        <span>This is the default content</span>
+      </Notificaton>
+    </Base>
   ))
-  .add('warning', () => (
-    <Notificaton type='warning'>
-      <span>This is the warning content</span>
-    </Notificaton>
+  .add('Success', () => (
+    <Base>
+      <Notificaton type="success">
+        <span>This is the success content</span>
+      </Notificaton>
+    </Base>
   ))
-  .add('alert', () => (
-    <Notificaton type='alert'>
-      <span>This is the alert content</span>
-    </Notificaton>
+  .add('Alert', () => (
+    <Base>
+      <Notificaton type="alert">
+        <span>This is the alert content</span>
+      </Notificaton>
+    </Base>
   ));
 
 storiesOf('Pagination', module)
@@ -399,141 +415,143 @@ storiesOf('Widget', module)
     </Widget>
   ));
 
-const colors = {
-  perc: 'rgba(54, 74, 205, 0.2)',
-  alt: 'rgba(245, 93, 93, 0.2)'
-};
+const minMetricData = [{
+  firstQuartile: 15,
+  thirdQuartile: 15,
+  median: 15,
+  max: 15,
+  min: 15,
+}, {
+  firstQuartile: 26,
+  thirdQuartile: 26,
+  median: 26,
+  max: 26,
+  min: 26,
+}, {
+  firstQuartile: 17,
+  thirdQuartile: 17,
+  median: 17,
+  max: 17,
+  min: 17,
+}, {
+  firstQuartile: 15,
+  thirdQuartile: 25,
+  median: 19,
+  max: 19,
+  min: 20,
+}, {
+  firstQuartile: 19,
+  thirdQuartile: 25,
+  median: 21,
+  max: 20,
+  min: 25,
+}, {
+  firstQuartile: 24,
+  thirdQuartile: 30,
+  median: 25,
+  max: 26,
+  min: 27,
+}, {
+  firstQuartile: 28,
+  thirdQuartile: 34,
+  median: 30,
+  max: 30,
+  min: 30,
+}, {
+  firstQuartile: 30,
+  thirdQuartile: 45,
+  median: 35,
+  max: 40,
+  min: 40,
+}, {
+  firstQuartile: 20,
+  thirdQuartile: 55,
+  median: 45,
+  max: 44,
+  min: 44,
+}, {
+  firstQuartile: 55,
+  thirdQuartile: 55,
+  median: 55,
+  max: 55,
+  min: 55,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 56,
+  median: 57,
+  max: 58,
+  min: 57,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 56,
+  median: 56,
+  max: 56,
+  min: 56,
+}, {
+  firstQuartile: 60,
+  thirdQuartile: 56,
+  median: 60,
+  max: 60,
+  min: 60,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 57,
+  median: 57,
+  max: 57,
+  min: 57,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 55,
+  median: 55,
+  max: 55,
+  min: 55,
+}, {
+  firstQuartile: 20,
+  thirdQuartile: 45,
+  median: 45,
+  max: 45,
+  min: 45,
+}, {
+  firstQuartile: 15,
+  thirdQuartile: 40,
+  median: 30,
+  max: 49,
+  min: 30,
+}];
+
 storiesOf('Metrics', module)
   .add('Mini Metric', () => (
-    <MiniMetric
-      datasets={[{
-        backgroundColor: colors['perc'],
-        altBackgroundColor: colors['alt'],
-        data: [
-          {
-            firstQuartile: 15,
-            thirdQuartile: 15,
-            median: 15,
-            max: 15,
-            min: 15,
-          },
-          {
-            firstQuartile: 26,
-            thirdQuartile: 26,
-            median: 26,
-            max: 26,
-            min: 26,
-          },
-          {
-            firstQuartile: 17,
-            thirdQuartile: 17,
-            median: 17,
-            max: 17,
-            min: 17,
-          },
-          {
-            firstQuartile: 15,
-            thirdQuartile: 25,
-            median: 19,
-            max: 19,
-            min: 20,
-          },
-          {
-            firstQuartile: 19,
-            thirdQuartile: 25,
-            median: 21,
-            max: 20,
-            min: 25,
-          },
-          {
-            firstQuartile: 24,
-            thirdQuartile: 30,
-            median: 25,
-            max: 26,
-            min: 27,
-          },
-          {
-            firstQuartile: 28,
-            thirdQuartile: 34,
-            median: 30,
-            max: 30,
-            min: 30,
-          },
-          {
-            firstQuartile: 30,
-            thirdQuartile: 45,
-            median: 35,
-            max: 40,
-            min: 40,
-          },
-          {
-            firstQuartile: 20,
-            thirdQuartile: 55,
-            median: 45,
-            max: 44,
-            min: 44,
-          },
-          {
-            firstQuartile: 55,
-            thirdQuartile: 55,
-            median: 55,
-            max: 55,
-            min: 55,
-          },
-          {
-            firstQuartile: 57,
-            thirdQuartile: 56,
-            median: 57,
-            max: 58,
-            min: 57,
-          },
-          {
-            firstQuartile: 57,
-            thirdQuartile: 56,
-            median: 56,
-            max: 56,
-            min: 56,
-          },
-          {
-            firstQuartile: 60,
-            thirdQuartile: 56,
-            median: 60,
-            max: 60,
-            min: 60,
-          },
-          {
-            firstQuartile: 57,
-            thirdQuartile: 57,
-            median: 57,
-            max: 57,
-            min: 57,
-          },
-          {
-            firstQuartile: 57,
-            thirdQuartile: 55,
-            median: 55,
-            max: 55,
-            min: 55,
-          },
-          {
-            firstQuartile: 20,
-            thirdQuartile: 45,
-            median: 45,
-            max: 45,
-            min: 45,
-          },
-          {
-            firstQuartile: 15,
-            thirdQuartile: 40,
-            median: 30,
-            max: 49,
-            min: 30,
-          },
-        ]
-      }]}
-      labels={17}
-      name='Memory'
-    />
+    <Base>
+      <Row around>
+        <Column xs={3}>
+          <MiniMetricView>
+            <MiniMetricMeta>
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+            </MiniMetricMeta>
+            <MiniMetricGraph data={minMetricData} />
+          </MiniMetricView>
+        </Column>
+        <Column xs={3}>
+          <MiniMetricView>
+            <MiniMetricMeta>
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+            </MiniMetricMeta>
+            <MiniMetricGraph data={minMetricData} />
+          </MiniMetricView>
+        </Column>
+        <Column xs={3}>
+          <MiniMetricView>
+            <MiniMetricMeta>
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+            </MiniMetricMeta>
+            <MiniMetricGraph data={minMetricData} />
+          </MiniMetricView>
+        </Column>
+      </Row>
+    </Base>
   ));
 
 storiesOf('ListItem', module)