Skip to content

Commit

Permalink
Merge pull request #934 from swaterkamp/glamorous2styledcomponents
Browse files Browse the repository at this point in the history 
Convert glamorous to styled-components #8
  • Loading branch information
@swaterkamp
swaterkamp authored Sep 12, 2018
2 parents 7198768 + 5831e05 commit 2efafdf
Show file tree
Hide file tree
Showing 16 changed files with 227 additions and 218 deletions.
12 changes: 6 additions & 6 deletions gsa/src/web/components/chart/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,26 @@
*/
import React from 'react';

import glamorous from 'glamorous';
import styled from 'styled-components';

import {scaleBand, scaleLinear} from 'd3-scale';

import {shorten} from 'gmp/utils/string';
import {isDefined} from 'gmp/utils/identity';

import Layout from '../layout/layout';
import Layout from 'web/components/layout/layout';

import PropTypes from '../../utils/proptypes';
import PropTypes from 'web/utils/proptypes';

import Axis from './axis';
import Group from './group';
import Legend from './legend';
import ToolTip from './tooltip';
import Svg from './svg';

const StyledLayout = glamorous(Layout)({
overflow: 'hidden',
});
const StyledLayout = styled(Layout)`
overflow: hidden;
`;

const LEGEND_MARGIN = 20;

Expand Down
12 changes: 6 additions & 6 deletions gsa/src/web/components/chart/donut.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,21 @@
*/
import React from 'react';

import glamorous from 'glamorous';
import styled from 'styled-components';

import Layout from '../layout/layout';
import Layout from 'web/components/layout/layout';

import PropTypes from '../../utils/proptypes';
import PropTypes from 'web/utils/proptypes';

import Legend from './legend';
import Pie from './pie';
import ToolTip from './tooltip';
import Label from './label';
import Svg from './svg';

const StyledLayout = glamorous(Layout)({
overflow: 'hidden',
});
const StyledLayout = styled(Layout)`
overflow: hidden;
`;

const Arc = ({
path,
Expand Down
16 changes: 8 additions & 8 deletions gsa/src/web/components/chart/donut3d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,20 @@ import 'core-js/fn/array/for-each';

import React from 'react';

import glamorous from 'glamorous';
import styled from 'styled-components';

import {color as d3color} from 'd3-color';

import {isDefined} from 'gmp/utils/identity';

import PropTypes from '../../utils/proptypes';
import {setRef} from '../../utils/render';
import Theme from '../../utils/theme';
import PropTypes from 'web/utils/proptypes';
import {setRef} from 'web/utils/render';
import Theme from 'web/utils/theme';

import path from './utils/path';
import arc from './utils/arc';

import Layout from '../layout/layout';
import Layout from 'web/components/layout/layout';

import Pie from './pie';
import Label from './label';
Expand All @@ -50,9 +50,9 @@ import Group from './group';
const LEGEND_MARGIN = 20;
const MIN_ANGLE_FOR_LABELS = 0.15;

const StyledLayout = glamorous(Layout)({
overflow: 'hidden',
});
const StyledLayout = styled(Layout)`
overflow: hidden;
`;

const margin = {
top: 20,
Expand Down
12 changes: 7 additions & 5 deletions gsa/src/web/components/chart/group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,17 @@
*/
import React from 'react';

import glamorous from 'glamorous';
import styled from 'styled-components';

import {isDefined} from 'gmp/utils/identity';

import PropTypes from '../../utils/proptypes';
import PropTypes from 'web/utils/proptypes';

const StyledGroup = glamorous.g(({onClick}) => isDefined(onClick) ? {
cursor: 'pointer',
} : undefined);
const StyledGroup = styled.g`
${props => isDefined(props.onClick) ? {
cursor: 'pointer',
} : undefined};
`;

const Group = ({
left = 0,
Expand Down
94 changes: 48 additions & 46 deletions gsa/src/web/components/chart/legend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,56 +22,62 @@
*/
import React from 'react';

import glamorous, {Div} from 'glamorous';
import styled from 'styled-components';

import {Line as VxLine} from '@vx/shape';

import {isDefined} from 'gmp/utils/identity';

import PropTypes from '../../utils/proptypes';
import PropTypes from 'web/utils/proptypes';

import Theme from 'web/utils/theme';

import ToolTip from './tooltip';
import Theme from '../../utils/theme';

const DEFAULT_SHAPE_SIZE = 15;

const StyledLegend = glamorous.div({
padding: '5px 10px',
margin: '10px 5px',
display: 'flex',
flexDirection: 'column',
userSelect: 'none',
backgroundColor: Theme.mediumGray,
color: Theme.white,
opacity: 0.75,
});

export const Item = glamorous.div('legend-item', {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
margin: '5px 0',
},
({onClick}) => isDefined(onClick) ? {
cursor: 'pointer',
} : undefined);

export const Label = glamorous.div('legend-label', {
display: 'flex',
justifyContent: 'start',
alignItems: 'center',
flexGrow: 1,
marginLeft: 10,
});

export const Rect = glamorous.div('legend-rect', {
display: 'flex',
alignItems: 'center',
width: DEFAULT_SHAPE_SIZE,
height: 10,
}, ({color}) => ({
backgroundColor: color,
}));
const StyledLegend = styled.div`
padding: 5px 10px;
margin: 10px 5px;
display: flex;
flex-direction: column;
user-select: none;
background-color: ${Theme.mediumGray};
color: ${Theme.white};
opacity: 0.75;
`;

export const Item = styled.div`
display: flex;
flex-direction: row;
align-items: center;
margin: 5px 0;
${props => isDefined(props.onClick) ? {
cursor: 'pointer',
} : undefined};
`;

export const Label = styled.div`
display: flex;
justify-content: start;
align-items: center;
flex-grow: 1;
margin-left: 10px;
`;

export const Rect = styled.div`
display: flex;
align-items: center;
width: ${DEFAULT_SHAPE_SIZE}px;
height: 10px;
background-color: ${props => props.color};
`;

const StyledDiv = styled.div`
height: ${props => props.height}px;
background-color: ${Theme.white};
padding: 0 2px;
`;

export const Line = ({
width = DEFAULT_SHAPE_SIZE + 5,
Expand All @@ -82,11 +88,7 @@ export const Line = ({
}) => {
const y = height / 2;
return (
<Div
height={height}
backgroundColor={Theme.white}
padding="0 2px"
>
<StyledDiv>
<svg width={width} height={height}>
<VxLine
from={{x: 0, y}}
Expand All @@ -96,7 +98,7 @@ export const Line = ({
strokeWidth={lineWidth}
/>
</svg>
</Div>
</StyledDiv>
);
};

Expand Down
22 changes: 11 additions & 11 deletions gsa/src/web/components/chart/line.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import React from 'react';

import {css} from 'glamor';

import glamorous from 'glamorous';
import styled from 'styled-components';

import {scaleLinear, scaleUtc} from 'd3-scale';

Expand All @@ -38,7 +38,7 @@ import {isDefined} from 'gmp/utils/identity';

import date from 'gmp/models/date';

import Layout from '../layout/layout';
import Layout from 'web/components/layout/layout';

import PropTypes from 'web/utils/proptypes';
import Theme from 'web/utils/theme';
Expand Down Expand Up @@ -67,16 +67,16 @@ const lineCss = css({

const LINE_HEIGHT = 15;

const Text = glamorous.text({
fontSize: '12px',
fill: Theme.white,
});
const Text = styled.text`
font-size: 12px;
fill: ${Theme.white};
`;

const LabelTitle = glamorous.text({
fontSize: '13px',
fill: Theme.white,
fontFamily: 'monospace',
});
const LabelTitle = styled.text`
font-size: 13px;
fill: ${Theme.white};
font-family: monospace;
`;

export const lineDataPropType = PropTypes.shape({
label: PropTypes.any.isRequired,
Expand Down
14 changes: 7 additions & 7 deletions gsa/src/web/components/chart/svg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
*/
import glamorous from 'glamorous';
import styled from 'styled-components';

const Svg = glamorous.svg({
overflow: 'visible',
'& text': {
userSelect: 'none',
},
});
const Svg = styled.svg`
overflow: visible;
& text {
user-select: none;
};
`;

export default Svg;

Expand Down
58 changes: 29 additions & 29 deletions gsa/src/web/components/chart/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,46 +23,46 @@
*/
import React from 'react';

import glamorous from 'glamorous';
import styled from 'styled-components';

import {hasValue} from 'gmp/utils/identity';

import PropTypes from '../../utils/proptypes';
import Theme from '../../utils/theme';
import PropTypes from 'web/utils/proptypes';
import Theme from 'web/utils/theme';

import Portal from '../portal/portal';
import Portal from 'web/components/portal/portal';

const ToolTipText = glamorous.div({
boxSizing: 'border-box',
fontWeight: 'bold',
padding: '3px',
background: Theme.darkGray,
color: Theme.white,
borderRadius: '2px',
boxShadow: '2px 2px 2px rgba(0, 0, 0, 0.2)',
lineHeight: 1,
});
const ToolTipText = styled.div`
box-sizing: border-box;
font-weight: bold;
padding: 3px;
background: ${Theme.darkGray};
color: ${Theme.white};
border-radius: 2px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
line-height: 1;
`;

ToolTipText.displayName = 'ToolTipText';

const ToolTipArrow = glamorous.div({
display: 'flex',
justifyContent: 'center',
alignItems: 'start',
lineHeight: 1,
fontSize: '10px',
color: Theme.darkGray,
});
const ToolTipArrow = styled.div`
display: flex;
justify-content: center;
align-items: start;
line-height: 1;
font-size: 10px;
color: ${Theme.darkGray};
`;

ToolTipArrow.displayName = 'ToolTipArrow';

const ToolTipContainer = glamorous.div({
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
flexDirection: 'column',
zIndex: Theme.Layers.onTop,
});
const ToolTipContainer = styled.div`
position: absolute;
pointer-events: none;
display: flex;
flex-direction: column;
z-index: ${Theme.Layers.onTop};
`;

ToolTipContainer.displayName = 'ToolTipContainer';

Expand Down
Loading

0 comments on commit 2efafdf

Please sign in to comment.