Back moved to own atom component

future-standard · Dec 18, 2024 · 57170b5 · 57170b5
1 parent 6385703
commit 57170b5
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 79 deletions.
diff --git a/packages/ui-lib/src/Layouts/atoms/UtilityHeaderBack.tsx b/packages/ui-lib/src/Layouts/atoms/UtilityHeaderBack.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import {Link} from 'react-router-dom';
+import Icon from "../../Icons/Icon";
+import { IUtilityHeaderLinkBack } from "..";
+
+const BackLinkIcon = styled.div`
+  display: flex;
+  width: 16px;
+  height: 16px;
+  justify-content: center;
+  align-items: center;
+  flex: 1;  
+  > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+const BackLink = styled(Link)<{iconInGutter: boolean, showDivider: boolean}>`
+  position: relative;
+  display: flex;
+  padding: 0;
+  align-items: center;
+  gap: 8px;
+  color: var(--grey-10);
+  text-align: center;
+  font-family: var(--font-ui);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  border: none;
+  background: none;
+  text-decoration: none;
+  transition: color 0.25s ease;
+  margin-left: ${props => props.iconInGutter ? '-24px' : '0' };
+
+  ${BackLinkIcon}{
+    svg * {
+      transition: stroke 0.25s ease;
+    }
+  }
+  
+  &:hover {
+    color: var(--grey-12);
+    ${BackLinkIcon}{
+      svg * {
+        stroke: var(--grey-12);
+      }
+    }
+  }
+
+  ${({showDivider}) => showDivider && css`
+    &::after {
+      content: '';
+      display: inline-block;
+      height: 12px;
+      width: 1px;
+      padding-left: 8px;
+      border-right: 1px solid var(--grey-10);
+    }
+  `}
+`;
+
+interface IUtilityHeaderLinkBackInstance extends IUtilityHeaderLinkBack {
+  iconInGutter: boolean;
+  showDivider: boolean;
+}
+
+const UtilityHeaderBack : React.FC<IUtilityHeaderLinkBackInstance> = ({show = true, link, label = 'Back', showDivider, iconInGutter}) => {
+  if(!show){ return null; }
+
+  return (
+    <BackLink to={link} {...{showDivider, iconInGutter}}>
+      <BackLinkIcon>
+        <Icon icon="Back" size={16} color="grey-10" />
+      </BackLinkIcon>
+      {label}
+    </BackLink>
+  );
+};
+
+export default UtilityHeaderBack;
diff --git a/packages/ui-lib/src/Layouts/molecules/UtilityHeader.tsx b/packages/ui-lib/src/Layouts/molecules/UtilityHeader.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import {Link} from 'react-router-dom';
 
+import { IUtilityHeader } from "..";
 import Icon from "../../Icons/Icon";
-import { IUtilityHeader, IUtilityHeaderLinkBack } from "..";
 import UtilityHeaderShare from "../atoms/UtilityHeaderShare";
+import UtilityHeaderBack from "../atoms/UtilityHeaderBack";
 
 const Container = styled.div`
   max-width: var(--max-content-width);
@@ -21,64 +22,6 @@ const LeftArea = styled.div`
   gap: var(--columnPadding, 16px);
   flex: 1 0 0;
 `;
-const BackLinkIcon = styled.div`
-  display: flex;
-  width: 16px;
-  height: 16px;
-  justify-content: center;
-  align-items: center;
-  flex: 1;  
-  > div {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-`;
-const BackLink = styled(Link)<{iconInGutter: boolean, showDivider: boolean}>`
-  position: relative;
-  display: flex;
-  padding: 0;
-  align-items: center;
-  gap: 8px;
-  color: var(--grey-10);
-  text-align: center;
-  font-family: var(--font-ui);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  border: none;
-  background: none;
-  text-decoration: none;
-  transition: color 0.25s ease;
-  margin-left: ${props => props.iconInGutter ? '-24px' : '0' };
-
-  ${BackLinkIcon}{
-    svg * {
-      transition: stroke 0.25s ease;
-    }
-  }
-  
-  &:hover {
-    color: var(--grey-12);
-    ${BackLinkIcon}{
-      svg * {
-        stroke: var(--grey-12);
-      }
-    }
-  }
-
-  ${({showDivider}) => showDivider && css`
-    &::after {
-      content: '';
-      display: inline-block;
-      height: 12px;
-      width: 1px;
-      padding-left: 8px;
-      border-right: 1px solid var(--grey-10);
-    }
-  `}
-`;
 
 const Breadcrumbs = styled.div`
   display: inline-flex;
@@ -143,25 +86,6 @@ const RightArea = styled.div`
 `;
 
 
-
-interface IUtilityHeaderLinkBackInstance extends IUtilityHeaderLinkBack {
-  iconInGutter: boolean;
-  showDivider: boolean;
-}
-
-const UtilityHeaderBack : React.FC<IUtilityHeaderLinkBackInstance> = ({show, link, label = 'Back', showDivider, iconInGutter}) => {
-  if(!show){ return null; }
-
-  return (
-    <BackLink to={link} {...{showDivider, iconInGutter}}>
-      <BackLinkIcon>
-        <Icon icon="Back" size={16} color="grey-10" />
-      </BackLinkIcon>
-      {label}
-    </BackLink>
-  );
-};
-
 const UtilityHeader : React.FC<IUtilityHeader> = ({ showBreadcrumbs = true, breadcrumbs = [], showHomeIcon = true, back, share, iconInGutter = true }) => {
 
   const hasBreadcrumbs = showBreadcrumbs && breadcrumbs.length > 0;