Convert glamorous to styled-components #12

gsa/package.json

@@ -37,7 +37,6 @@
     "downshift": "^1.31.6",
     "fast-deep-equal": "^1.1.0",
     "glamor": "^2.20.40",
-    "glamorous": "^4.13.1",
     "history": "^4.7.2",
     "hoist-non-react-statics": "^2.5.5",
     "i18next": "^11.3.3",

gsa/src/web/stories/chart/bar.js

@@ -22,12 +22,16 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
 import BarChart from 'web/components/chart/bar';
 
+const Div = styled.div`
+  color: ${props => props.color}
+`;
+
 const bardata = [{
   label: 'Foo',
   x: 'foo',

gsa/src/web/stories/chart/legend.js

@@ -22,12 +22,17 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
 import Legend, {Label, Item, Line} from 'web/components/chart/legend';
 
+const Div = styled.div`
+  display: flex;
+  margin: ${props => props.margin};
+`;
+
 const data = [
 {
   label: 'G',
@@ -61,14 +66,14 @@ const data = [
 storiesOf('Chart/Legend', module)
   .add('default', () => {
     return (
-      <Div display="flex">
+      <Div>
         <Legend data={data}/>
       </Div>
     );
   })
   .add('line', () => {
     return (
-      <Div display="flex" margin="50">
+      <Div margin="50">
         <Legend
           data={[{
             color: 'red',

gsa/src/web/stories/chart/topology.js

@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
@@ -31,6 +31,12 @@ import HostsTopologyChart from 'web/components/chart/topology';
 import hosts from './hosts.json';
 import links from './links.json';
 
+const Div = styled.div`
+  border: 1px solid black;
+  margin: 25px;
+  display: inline-flex;
+`;
+
 const simpledata = {
   hosts: [{
     id: '192.168.123.73',
@@ -68,11 +74,7 @@ storiesOf('Chart/Topology', module)
   ))
   .add('Big Network', () => {
     return (
-      <Div
-        border="1px solid black"
-        margin="25px"
-        display="inline-flex"
-      >
+      <Div>
         <HostsTopologyChart
           width={500}
           height={300}

gsa/src/web/stories/dashboard/display.js

@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
@@ -34,6 +34,12 @@ import DisplayMenu from 'web/components/dashboard/display/displaymenu';
 
 const removeaction = action('on remove click');
 
+const Div = styled.div`
+  width: ${props => props.width};
+  height: ${props => props.height};
+  background-color: ${props => props.backgroundColor};
+`;
+
 storiesOf('Dashboard/Display', module)
   .add('default', () => {
     return (

gsa/src/web/stories/datepicker/index.js

@@ -22,7 +22,7 @@
  */
 
 import React from 'react';
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import date from 'gmp/models/date';
 
@@ -68,13 +68,13 @@ ControlledDatePicker.propTypes = {
   value: PropTypes.date,
 };
 
-const StyledDatePicker = glamorous(ControlledDatePicker)({
-  border: '1px solid darkgreen',
-  background: 'lightgreen',
-  boxShadow: '5px 5px 10px black',
-  fontFamily: 'Trebuchet MS,Tahoma,Verdana,Arial,sans-serif',
-  fontSize: '14px',
-});
+const StyledDatePicker = styled(ControlledDatePicker)`
+  border: 1px solid darkgreen;
+  background: lightgreen;
+  box-shadow: 5px 5px 10px black;
+  font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+  font-size: 14px;
+`;
 
 storiesOf('Form/Datepicker', module)
   .add('default', () => {

gsa/src/web/stories/multiselect/index.js

@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
@@ -32,34 +32,34 @@ import Divider from 'web/components/layout/divider.js';
 
 import os from 'web/utils/os.js';
 
-const Sizer = glamorous.div({
-  width: '300px',
-});
+const Sizer = styled.div`
+  width: 300px;
+`;
 
-const Box = glamorous.div({
-  width: '150px',
-  height: '50px',
-  border: '1px solid grey',
-  padding: '5px',
-  display: 'flex',
-  alignItems: 'center',
-});
+const Box = styled.div`
+  width: 150px;
+  height: 50px;
+  border: 1px solid grey;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+`;
 
 const items = os.operating_systems.map(o => ({
   value: o.pattern,
   label: o.title,
 }));
 
-const SelectBox = glamorous.div({
-  width: '120px', // this is the recommended minimum for MultiSelect
-  border: '1px solid blue',
-  padding: '5px',
-});
+const SelectBox = styled.div`
+  width: 120px; /* this is the recommended minimum for MultiSelect */
+  border: 1px solid blue;
+  padding: 5px;
+`;
 
-const StyledSelect = glamorous(MultiSelect)({
-  width: '120px',
-  height: '30px',
-});
+const StyledSelect = styled(MultiSelect)`
+  width: 120px;
+  height: 30px;
+`;
 
 class ControlledMultiSelect extends React.Component {
 

gsa/src/web/stories/powerfilter/index.js

@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
@@ -40,11 +40,11 @@ const fakegmp = {
   },
 };
 
-const Box = glamorous.div({
-  display: 'flex',
-  padding: '5px',
-  border: '1px solid black',
-});
+const Box = styled.div`
+  display: flex;
+  padding: 5px;
+  border: 1px solid black;
+`;
 
 storiesOf('Powerfilter', module)
   .add('default', () => (

gsa/src/web/stories/select/index.js

@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
@@ -32,29 +32,29 @@ import Divider from 'web/components/layout/divider.js';
 
 import os from 'web/utils/os.js';
 
-const Sizer = glamorous.div({
-  width: '300px',
-});
-
-const Box = glamorous.div({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '200px',
-  border: '1px solid grey',
-  padding: '5px',
-});
-
-const SelectBox = glamorous.div({
-  width: '100px',
-  border: '1px solid blue',
-  padding: '5px',
-});
-
-const StyledSelect = glamorous(Select)({
-  height: '30px',
-});
+const Sizer = styled.div`
+  width: 300px;
+`;
+
+const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
+  border: 1px solid grey;
+  padding: 5px;
+`;
+
+const SelectBox = styled.div`
+  width: 100px;
+  border: 1px solid blue;
+  padding: 5px;
+`;
+
+const StyledSelect = styled(Select)`
+  height: 30px;
+`;
 
 const items = os.operating_systems.map(o => ({
   value: o.pattern,

gsa/src/web/stories/sortable/grid.js

@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
@@ -61,12 +61,12 @@ class ItemController extends React.Component {
   }
 }
 
-const Item = glamorous.span({
-  flexGrow: '1',
-  backgroundColor: 'blue',
-  padding: '5px',
-  color: 'white',
-});
+const Item = styled.span`
+  flex-grow: 1;
+  background-color: blue;
+  padding: 5px;
+  color: white;
+`;
 
 const getItems = (row, count) =>
   Array.from({length: count}, (v, k) => k).map(k =>

gsa/src/web/stories/sortable/resizer.js

@@ -22,19 +22,26 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {storiesOf} from '@storybook/react';
 
 import Resizer from 'web/components/sortable/resizer';
 
+const Div = styled.div`
+  display: flex;
+  width: 400px;
+  background-color: blue;
+  height: ${props => props.height}px;
+`;
+
 class ResizeContainer extends React.Component {
 
   constructor(...args) {
     super(...args);
 
     this.state = {
-      height: '100px',
+      height: '100',
     };
 
     this.handleResize = this.handleResize.bind(this);
@@ -54,9 +61,6 @@ class ResizeContainer extends React.Component {
     return (
       <div>
         <Div
-          display="flex"
-          width="400px"
-          backgroundColor="blue"
           height={height}
           innerRef={ref => this.div = ref}
         />