Feat/group by update

packages/garden/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-garden",
-  "version": "5.1.2",
+  "version": "5.1.3",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

packages/garden/src/lib/components/GroupingSelector/GroupingSelector.tsx

@@ -1,11 +1,13 @@
-import { Autocomplete, Divider, Radio } from '@equinor/eds-core-react';
+import { Autocomplete, Divider, Label, Radio } from '@equinor/eds-core-react';
 import { useQuery } from '@tanstack/react-query';
 import { Fragment, useRef } from 'react';
 import { GroupingOption } from '../../types';
 import { GardenDataSource } from '../Garden';
 import {
+  RadioButtonWrapper,
   RadioCategoryWrapper,
   RadioWrapper,
+  SelectorBody,
   StyledAutoCompleteWrapper,
   StyledGroupHeader,
   StyledSubGroupHeader,
@@ -81,7 +83,7 @@ export function GroupingSelector<TContext>({
   }
 
   return (
-    <>
+    <SelectorBody>
       <StyledGroupHeader>Groups</StyledGroupHeader>
       <Divider />
       <StyledAutoCompleteWrapper>
@@ -120,35 +122,40 @@ export function GroupingSelector<TContext>({
                 <RadioCategoryWrapper>
                   {hasDateVariant &&
                     groupingOption.dateVariant?.map((typ) => (
-                      <Radio
-                        key={typ}
-                        label={typ}
-                        value={typ}
-                        name="dateVariant"
-                        checked={dateVariant?.trim().toLowerCase() === typ.trim().toLowerCase()}
-                        onChange={(e) => onChangeDateVarient(e.target.value)}
-                      />
+                      <RadioButtonWrapper key={typ}>
+                        <Radio
+                          id={typ}
+                          key={typ}
+                          value={typ}
+                          name="dateVariant"
+                          checked={dateVariant?.trim().toLowerCase() === typ.trim().toLowerCase()}
+                          onChange={(e) => onChangeDateVarient(e.target.value)}
+                        />
+                        <Label htmlFor={typ} label={typ} style={{ fontSize: '14' }} />
+                      </RadioButtonWrapper>
                     ))}
                 </RadioCategoryWrapper>
                 <StyledSubGroupHeader>Time Intervals:</StyledSubGroupHeader>
                 <RadioCategoryWrapper>
                   {hasTimeInterval &&
                     groupingOption.timeInterval?.map((dim) => (
-                      <Radio
-                        key={dim}
-                        label={dim}
-                        value={dim}
-                        name="timeInterval"
-                        checked={timeInterval?.trim().toLowerCase() === dim.trim().toLowerCase()}
-                        onChange={(e) => onChangeTimeInterval(e.target.value)}
-                      />
+                      <RadioButtonWrapper key={dim}>
+                        <Radio
+                          key={dim}
+                          value={dim}
+                          name="timeInterval"
+                          checked={timeInterval?.trim().toLowerCase() === dim.trim().toLowerCase()}
+                          onChange={(e) => onChangeTimeInterval(e.target.value)}
+                        />
+                        <Label htmlFor={dim} label={dim} style={{ fontSize: '14' }} />
+                      </RadioButtonWrapper>
                     ))}
                 </RadioCategoryWrapper>
               </RadioWrapper>
             </Fragment>
           )
         );
       })}
-    </>
+    </SelectorBody>
   );
 }

packages/garden/src/lib/components/GroupingSelector/groupingSelector.styles.ts

@@ -8,10 +8,12 @@ export const StyledAutoCompleteWrapper = styled.div`
 `;
 
 export const StyledGroupHeader = styled.div`
-  font-weight: 500px;
+  font-weight: 500;
   padding-top: 2rem;
+  font-size: 14;
 `;
 export const StyledSubGroupHeader = styled.div`
+  font-weight: 500;
   padding-left: 1rem;
   padding-top: 1rem;
 `;
@@ -20,11 +22,23 @@ export const RadioWrapper = styled.div`
   align-items: start;
   flex-direction: column;
   gap: 1em;
+  font-size: 14;
 `;
 
 export const RadioCategoryWrapper = styled.div`
   display: flex;
   align-items: start;
   flex-direction: column;
   gap: 0.1em;
+  font-size: 14;
+`;
+export const RadioButtonWrapper = styled.div`
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+`;
+
+export const SelectorBody = styled.div`
+  padding: 0px 10px;
 `;

packages/garden/src/lib/components/ViewSettings/ViewSettings.tsx

@@ -1,10 +1,11 @@
 import { Button, Icon } from '@equinor/eds-core-react';
+import { expand, collapse } from '@equinor/eds-icons';
 import { useState } from 'react';
-
-import { arrow_back_ios, arrow_forward_ios, chevron_down, chevron_up } from '@equinor/eds-icons';
 import { GardenDataSource } from '../Garden';
 import { GroupingSelector } from '../GroupingSelector/GroupingSelector';
-import { StyledViewSettings, VerticalText } from './viewSettings.styles';
+import { StyledViewSettings } from './viewSettings.styles';
+
+const LOCAL_STORAGE_KEY = 'toggleState';
 
 interface ViewSettingsProps<TData extends Record<PropertyKey, unknown>, TContext = undefined> {
   dataSource: GardenDataSource<TContext>;
@@ -17,7 +18,7 @@ interface ViewSettingsProps<TData extends Record<PropertyKey, unknown>, TContext
   setGroupingKeys: (keys: string[]) => void;
 }
 
-Icon.add({ chevron_down, chevron_up });
+Icon.add({ expand, collapse });
 
 export function ViewSettings<TData extends Record<PropertyKey, unknown>, TContext = undefined>({
   dataSource,
@@ -29,17 +30,25 @@ export function ViewSettings<TData extends Record<PropertyKey, unknown>, TContex
   onChangeDateVariant,
   setGroupingKeys,
 }: ViewSettingsProps<TData, TContext>): JSX.Element | null {
-  const [toggle, setToggle] = useState(false);
+  const [toggle, setToggle] = useState<boolean>(() => {
+    const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
+    return savedState !== null ? JSON.parse(savedState) : true;
+  });
+
+  const onChangeToggle = (state: boolean) => {
+    setToggle(state);
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(state));
+  };
 
   return (
     <StyledViewSettings expanded={toggle}>
       {toggle ? (
         <>
           <div style={{ display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
-            <Button variant="ghost_icon" onClick={() => setToggle((state) => !state)}>
-              <Icon data={arrow_forward_ios}></Icon>
+            <Button variant="ghost_icon" onClick={() => onChangeToggle(!toggle)}>
+              <Icon data={expand}></Icon>
             </Button>
-            <p style={{ marginRight: '8px', fontSize: '16px', fontWeight: '500' }}>View Settings</p>
+            <p style={{ marginRight: '10px', fontSize: '16px', fontWeight: '500' }}>View Settings</p>
           </div>
           <GroupingSelector
             groupingKeys={groupingKeys}
@@ -54,10 +63,9 @@ export function ViewSettings<TData extends Record<PropertyKey, unknown>, TContex
         </>
       ) : (
         <>
-          <Button variant="ghost_icon" onClick={() => setToggle((state) => !state)}>
-            <Icon data={arrow_back_ios}></Icon>
+          <Button variant="ghost_icon" onClick={() => onChangeToggle(!toggle)} style={{ paddingLeft: '0' }}>
+            <Icon data={collapse}></Icon>
           </Button>
-          <VerticalText>View Settings</VerticalText>
         </>
       )}
     </StyledViewSettings>

packages/garden/src/lib/components/ViewSettings/viewSettings.styles.ts

@@ -5,19 +5,10 @@ type StyledViewSettingsProps = {
 };
 
 export const StyledViewSettings = styled.div<StyledViewSettingsProps>`
-  width: ${(props) => (props.expanded ? '300px' : '45px')};
+  width: ${(props) => (props.expanded ? '260px' : '45px')};
   box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.1);
-  margin-left: 10px;
+  margin-left: 2px;
   padding: 10px;
   transition: width 0.1s ease;
   overflow: hidden;
 `;
-export const VerticalText = styled.div`
-  transform: rotate(90deg);
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  margin-top: 3rem;
-  justify-content: center;
-  font-size: 16px;
-`;