This commit is contained in:
JUDIT GRESKOVITS 2017-01-11 10:15:19 +00:00
commit df66179b5d
25 changed files with 676 additions and 405 deletions

View File

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

View File

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

View File

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

View File

@ -10,5 +10,6 @@ const APP = constantCase(process.env['APP_NAME']);
module.exports = { module.exports = {
...require('@state/thunks'), ...require('@state/thunks'),
updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`), 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`)
}; };

View File

@ -1,9 +1,23 @@
const ReduxActions = require('redux-actions'); const ReduxActions = require('redux-actions');
const actions = require('@state/actions');
const { const {
handleActions handleActions
} = ReduxActions; } = ReduxActions;
const {
toggleServiceCollapsed
} = actions;
module.exports = handleActions({ 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]
}
})
}, {}); }, {});

View File

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

View File

@ -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);

View File

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

View File

@ -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;

View File

@ -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>
);
}
```

View File

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

View File

@ -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;

View File

@ -1,166 +1,7 @@
const React = require('react'); module.exports = {
const Styled = require('styled-components'); MiniMetricGraph: require('./graph'),
const constants = require('../../shared/constants'); MiniMetricMeta: require('./meta'),
MiniMetricTitle: require('./title'),
const { MiniMetricSubtitle: require('./subtitle'),
colors MiniMetricView: require('./view')
} = 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 = MiniMetric;

View File

@ -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;

View File

@ -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};
`;

View File

@ -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;
`;

View File

@ -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;

View File

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

View File

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

View File

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

View File

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

View File

@ -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;

View File

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

View File

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

View File

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