feat: ✨ added slight shadow and animation

equinor · Oct 10, 2023 · e68bf3a · e68bf3a
1 parent 593784c
commit e68bf3a
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 22 deletions.
diff --git a/apps/test-app/index.html b/apps/test-app/index.html
@@ -1,8 +1,9 @@
 <html>
-    <head>
-    <script type="module" src="./src/index.tsx" ></script>
-    </head>
-    <body>
-        <div id="root"></div>
-    </body>
-</html>
+  <head>
+    <link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-font.css" />
+    <script type="module" src="./src/index.tsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/apps/test-app/src/index.tsx b/apps/test-app/src/index.tsx
@@ -4,7 +4,15 @@ import { gridModule } from '@equinor/workspace-fusion/grid-module';
 import { GroupingOption } from '@equinor/workspace-garden';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { createGlobalStyle } from 'styled-components';
 
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: Equinor;
+  }
+`;
 export function App() {
   return (
     <Workspace<{ id: string }>
@@ -182,4 +190,10 @@ export function App() {
 
 const container = document.getElementById('root')!;
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
-root.render(<App />);
+
+root.render(
+  <>
+    <GlobalStyle />
+    <App />
+  </>
+);
diff --git a/packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx b/packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx
@@ -153,7 +153,7 @@ export const StyledAutoCompleteWrapper = styled.div`
 `;
 
 export const StyledGroupHeader = styled.div`
-  padding-left: 1rem;
+  font-weight: 500px;
   padding-top: 2rem;
 `;
 export const StyledSubGroupHeader = styled.div`

diff --git a/packages/workspace-fusion/src/modules/garden/components/wrapper/GardenWrapper.tsx b/packages/workspace-fusion/src/modules/garden/components/wrapper/GardenWrapper.tsx
@@ -1,14 +1,15 @@
 import { Button, Icon } from '@equinor/eds-core-react';
-import { more_vertical, arrow_back_ios, arrow_forward_ios } from '@equinor/eds-icons';
+import { arrow_back_ios, arrow_forward_ios } from '@equinor/eds-icons';
 import { FilterState, useFilterContext } from '@equinor/workspace-filter';
 import { Garden } from '@equinor/workspace-garden';
 import { useEffect, useRef, useState } from 'react';
 import { BehaviorSubject } from 'rxjs';
+import styled from 'styled-components';
 import { useWorkspace } from '../../../../lib/hooks';
 import { GardenConfig } from '../../../../lib/integrations/garden';
 import { GetIdentifier } from '../../../../lib/types/configuration';
 import { GroupingSelector } from '../GroupingSelector';
-Icon.add({ more_vertical, arrow_back_ios, arrow_forward_ios });
+Icon.add({ arrow_back_ios, arrow_forward_ios });
 
 type GardenWrapperProps<TData extends Record<PropertyKey, unknown>, TFilter = undefined> = {
   config: GardenConfig<any, TFilter>;
@@ -21,14 +22,14 @@ export const GardenWrapper = <TData extends Record<PropertyKey, unknown>, TFilte
 }: GardenWrapperProps<TData, TFilter>) => {
   const { filterState } = useFilterContext();
   const { selectItem } = useWorkspace();
+
   const [groupingKeys, setGroupingKeys] = useState<string[]>(config.initialGrouping);
-  const [toggle, setToggle] = useState(true);
+  const [toggle, setToggle] = useState(false);
 
   const [timeInterval, updateTimeInterval] = useState<string | null>(config.initialTimeInterval ?? null);
   const onChangetimeInterval = (timeInterval: string | null) => {
     updateTimeInterval(timeInterval);
   };
-
   const [dateVariant, updateDateVariant] = useState<string | null>(config.initialDateVariant ?? null);
   const onChangeDateVariant = (dateVariant: string | null) => {
     updateDateVariant(dateVariant);
@@ -61,18 +62,14 @@ export const GardenWrapper = <TData extends Record<PropertyKey, unknown>, TFilte
           },
         }}
       />
-      <div style={{ boxShadow: '-2px 0px 5px rgba(0, 0, 0, 0.1)', marginLeft: '10px', padding: '10px' }}>
+      <StyledAnimatedDiv expanded={toggle}>
         {toggle ? (
-          <Button variant="ghost_icon" onClick={() => setToggle(!toggle)}>
-            <Icon data={arrow_back_ios}></Icon>
-          </Button>
-        ) : (
           <>
-            <div style={{ display: 'flex', width: '300px', alignItems: 'center', justifyContent: 'space-between' }}>
-              <Button variant="ghost_icon" onClick={() => setToggle(!toggle)} style={{ padding: '8px' }}>
+            <div style={{ display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Button variant="ghost_icon" onClick={() => setToggle(!toggle)}>
                 <Icon data={arrow_forward_ios}></Icon>
               </Button>
-              <h3 style={{ marginRight: '8px' }}>View Settings</h3>
+              <p style={{ marginRight: '8px', fontSize: '16px', fontWeight: '500' }}>View Settings</p>
             </div>
             <GroupingSelector
               groupingKeys={groupingKeys}
@@ -85,8 +82,37 @@ export const GardenWrapper = <TData extends Record<PropertyKey, unknown>, TFilte
               dataSource={config as GardenConfig<any, FilterState>}
             />
           </>
+        ) : (
+          <>
+            <Button variant="ghost_icon" onClick={() => setToggle(!toggle)}>
+              <Icon data={arrow_back_ios}></Icon>
+            </Button>
+            <VerticalText>View Settings</VerticalText>
+          </>
         )}
-      </div>
+      </StyledAnimatedDiv>
     </div>
   );
 };
+
+type StyledAnimatedDivProps = {
+  expanded: boolean;
+};
+
+const StyledAnimatedDiv = styled.div<StyledAnimatedDivProps>`
+  width: ${(props) => (props.expanded ? '300px' : '45px')};
+  box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.1);
+  margin-left: 10px;
+  padding: 10px;
+  transition: width 0.1s ease;
+  overflow: hidden;
+`;
+const VerticalText = styled.div`
+  transform: rotate(90deg);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  margin-top: 3rem;
+  justify-content: center;
+  font-size: 16px;
+`;