Themes

browser/components/DataSelectorDialogue.js

@@ -7,6 +7,7 @@ import Card from './shared/card/Card';
 import IconButton from './shared/button/IconButton';
 import CardTitle from './shared/title/CardTitle';
 import CheckBoxList from './shared/list/CheckBoxList';
+import RadioButtonList from './shared/list/RadioButtonList';
 import { hexToRgbA } from '../helpers/colors';
 
 const DataSources = [{ label: "Klima", value: "klima", group: "Klima"},
@@ -35,13 +36,19 @@ function DataSelectorDialogue(props) {
                 <IconButton icon="no3-solid" label={__('Nitrat')} />
                 <IconButton icon="water-drop-wifi-solid" label={__('Mine stationer')} />
                 <IconButton icon="lab-flask-experiment" label={__('Mine favoritter')} />
-                <Grid container>
+                <Grid container spacing={32}>
                     <Grid container item md={6}>
                         <Card>
                             <CardTitle text={__('Datakilder')} />
                             <CheckBoxList listItems={DataSources} onChange={(selectedItems) => console.log(selectedItems)} />
                         </Card>
                     </Grid>
+                    <Grid container item md={6}>
+                        <Card>
+                            <CardTitle text={__('Datakilder')} />
+                            <RadioButtonList listItems={DataSources} onChange={(selectedItem) => console.log(selectedItem)} />
+                        </Card>
+                    </Grid>
                 </Grid>
             </ModalBody>
         </Root>

browser/components/shared/inputs/RadioButton.js

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+
+function RadioButton(props) {
+    return (<Root>
+        <HiddenRadioButton checked={props.checked} {...props} />
+        <StyledRadioButton checked={props.checked} value={props.value} onClick={() => props.onChange(props.value)}>
+            <RadioButtonSelect />
+        </StyledRadioButton>
+        <RadioButtonLabel>{props.label}</RadioButtonLabel>
+
+    </Root>);
+}
+
+const HiddenRadioButton = styled.input.attrs({ type: 'radio' })`
+  border: 0;
+  clip: rect(0 0 0 0);
+  clippath: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`
+
+const RadioButtonSelect = styled.div`
+    display: block;
+`;
+
+const StyledRadioButton = styled.div`
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  font-size: 12px;
+  background: ${props => props.checked ? props.theme.colors.interaction[4] : '#fff'};
+  transition: all 150ms;
+  padding: ${props => props.theme.layout.gutter / 8}px;
+  margin-right: ${props => props.theme.layout.gutter / 4}px;
+  div {
+    visibility: ${props => props.checked ? 'visible' : 'hidden'};
+    height: 8px;
+    width: 8px;
+    border-radius: 50%;
+    background: #000;
+  }
+`
+
+const Root = styled.div`
+    display: inline-block;
+    vertical-align: middle;
+`;
+
+const RadioButtonLabel = styled.label`
+    margin-top: ${props => props.theme.layout.gutter/4}px;
+    color: ${props => props.theme.colors.gray[5]};
+    font: ${props => props.theme.fonts.label};
+`;
+
+export default RadioButton;

browser/components/shared/list/RadioButtonList.js

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+import styled from "styled-components";
+import PropTypes from 'prop-types';
+import RadioButton from '../inputs/RadioButton';
+
+function RadioButtonList(props) {
+    const [selectedItem, setSelectedItem] = useState([]);
+    const [listItems, setListItems] = useState([]);
+    var currentGroup = null;
+    function onChangeRadioButton(value) {
+        let selectedObject = listItems.find(item => item.value == value);
+        setSelectedItem(selectedObject);
+    }
+
+    const renderItem = (item, index) => {
+        let returnData = [];
+        if (item.group != currentGroup) {
+            returnData.push(<GroupTitle key={`${index}-title`}>{item.group}</GroupTitle>);
+            currentGroup = item.group;
+        }
+        returnData.push(
+            <ListItem key={index}>
+                <RadioButton value={item.value} checked={selectedItem.value == item.value} onChange={onChangeRadioButton} label={item.label} />
+            </ListItem>)
+        return returnData;
+    }
+
+    useEffect(() => {
+        var _listItems = [...props.listItems];
+        _listItems.sort((a, b) => (a.group > b.group) ? 1 : -1);
+        setListItems(_listItems);
+    }, [props.listItems]);
+
+    useEffect(() => {
+        if (props.onChange) {
+            props.onChange(selectedItem);
+        }
+    }, [selectedItem]);
+
+    return (
+        <Root>
+            {listItems.map((item, index) => {
+                return renderItem(item, index);
+            })}
+        </Root>
+    )
+}
+
+RadioButtonList.propTypes = {
+    listItems: PropTypes.array.isRequired,
+    onChange: PropTypes.func,
+}
+
+
+const Root = styled.div`
+`;
+
+const GroupTitle = styled.div`
+    color: ${props => props.theme.colors.gray[4]};
+    font: ${props => props.theme.fonts.subbody};
+    margin-top: ${props => props.theme.layout.gutter/2}px;
+`;
+
+
+const ListItem = styled.div`
+    margin-left: ${props => props.theme.layout.gutter/4}px;
+`;
+
+export default RadioButtonList;