Merge pull request #51 from kleros/feat/support-element-as-party-in-timeline

Feat/support element as party in timeline and icon placement in copiable

Author: jaybuidl

src/examples/copiable.tsx

@@ -4,7 +4,9 @@ import { Tooltip } from "../lib";
 
 const CopiableExample: React.FC = () => (
   <>
-    <Copiable copiableContent="Copied text">Copiable text</Copiable>
+    <Copiable copiableContent="Copied text" iconPlacement="left">
+      Copiable text
+    </Copiable>
     <Copiable
       copiableContent="0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99"
       info="Copy Address"

src/examples/timeline.tsx

@@ -14,6 +14,24 @@ const StyledTimeline = styled(Timeline)`
   margin: 0px 100px;
 `;
 
+const PartyContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
+  line-height: 19px;
+`;
+
+const StyledLink = styled.a`
+  font-size: 14px;
+  color: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};
+  text-decoration: none;
+  line-height: 19px;
+`;
+
 const TimelineProgress = () => (
   <>
     <StyledSteps
@@ -54,7 +72,18 @@ const TimelineProgress = () => (
       items={[
         {
           title: "Pay 250 DAI",
-          party: "alice.eth",
+          party: (
+            <PartyContainer>
+              <StyledLabel>alice.eth -</StyledLabel>
+              <StyledLink
+                href="https://docs.kleros.io/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Justification
+              </StyledLink>
+            </PartyContainer>
+          ),
           subtitle: "06 Jul 2023 12:00 UTC",
           variant: "#4D00B4",
           Icon: Circle,

src/lib/copiable/index.tsx

@@ -7,13 +7,16 @@ import Copied from "../../assets/svgs/copiable/copied.svg";
 interface CopiableBaseProps {
   copiableContent: string;
   info?: string;
+  iconPlacement?: "left" | "right";
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ iconPlacement: string }>`
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  flex-direction: ${({ iconPlacement }) =>
+    iconPlacement === "left" ? "row-reverse" : "row"};
 `;
 
 const StyledTooltip = styled(Tooltip)`
@@ -46,6 +49,7 @@ const Copiable: React.FC<CopiableProps> = ({
   info,
   children,
   tooltipProps,
+  iconPlacement = "right",
   ...props
 }) => {
   const [isCopied, setIsCopied] = useState(false);
@@ -61,7 +65,7 @@ const Copiable: React.FC<CopiableProps> = ({
   };
 
   return (
-    <Wrapper {...props}>
+    <Wrapper {...props} iconPlacement={iconPlacement}>
       {children}
       <StyledTooltip
         text={isCopied ? "Copied!" : `${info ?? "Copy"}`}

src/lib/progress/timeline/bullet.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import styled from "styled-components";
 import Spine, { VariantProp, variantColor } from "./spine";
 export type { VariantProp };
@@ -17,6 +17,9 @@ const Wrapper = styled.div<SideProp>`
 const StyledTitle = styled.h2``;
 const StyledParty = styled.p``;
 const StyledSubtitle = styled.small``;
+const PartyElementWrapper = styled.div`
+  display: inline-flex;
+`;
 
 const TextContainer = styled.div<SideProp & VariantProp & { isLast: boolean }>`
   margin-${({ rightSided }) => (rightSided ? "left" : "right")}: 20px;
@@ -49,6 +52,12 @@ const TextContainer = styled.div<SideProp & VariantProp & { isLast: boolean }>`
     line-height: 19px;
     color: ${variantColor};
   }
+  
+  & ${PartyElementWrapper} {
+    order: ${({ rightSided }) => (rightSided ? 2 : 1)};   
+    max-height: 32px;
+    overflow: hidden;
+  }
 
   & ${StyledSubtitle} {
     ${small}
@@ -60,6 +69,8 @@ const TextContainer = styled.div<SideProp & VariantProp & { isLast: boolean }>`
 
 const PartyTitleContainer = styled.div<SideProp>`
   display: flex;
+  position: relative;
+  align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 4px 8px;
@@ -69,7 +80,7 @@ const PartyTitleContainer = styled.div<SideProp>`
 
 interface BulletProps extends VariantProp, SideProp {
   title: string;
-  party: string;
+  party: string | React.ReactElement;
   subtitle: string;
   active?: boolean;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
@@ -81,14 +92,21 @@ const Bullet: React.FC<BulletProps> = (props) => {
   const { title, party, subtitle, ...restProps } = props;
   const { rightSided, variant, line, Icon, isLast, ...wrapperProps } =
     restProps;
+  const titleRef = useRef<HTMLHeadingElement>(null);
 
   return (
     <Wrapper {...{ rightSided }} {...wrapperProps}>
-      <Spine {...{ variant, line, Icon }} />
+      <Spine {...{ variant, line, Icon, titleRef }} />
       <TextContainer {...{ variant, rightSided, isLast }}>
         <PartyTitleContainer {...{ rightSided }}>
-          <StyledTitle>{title}</StyledTitle>
-          <StyledParty>{party}</StyledParty>
+          <StyledTitle ref={titleRef}>{title}</StyledTitle>
+          {typeof party === `string` ? (
+            <StyledParty>{party}</StyledParty>
+          ) : (
+            <PartyElementWrapper className="party-wrapper">
+              {party}
+            </PartyElementWrapper>
+          )}
         </PartyTitleContainer>
         <StyledSubtitle>{subtitle}</StyledSubtitle>
       </TextContainer>

src/lib/progress/timeline/custom.tsx

@@ -5,7 +5,7 @@ import { borderBox } from "../../../styles/common-style";
 
 interface TimelineItem extends SideProp, VariantProp {
   title: string;
-  party: string;
+  party: string | React.ReactElement;
   subtitle: string;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
 }

src/lib/progress/timeline/spine.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 
 const Wrapper = styled.div`
@@ -31,24 +31,49 @@ const Circle = styled.div<VariantProp>`
   border: 2px solid ${variantColor};
 `;
 
-const Line = styled.div`
-  height: auto;
+const Line = styled.div<{ topHeight?: number }>`
+  height: ${({ topHeight }) => (topHeight ? `${topHeight}px` : "auto")};
   width: 0px;
-  flex-grow: 1;
+  flex-grow: ${({ topHeight }) => (topHeight ? 0 : 1)};
   border-left: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
 `;
 
 interface SpineProps extends VariantProp {
   active?: boolean;
   line?: boolean;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
+  titleRef?: React.RefObject<HTMLHeadingElement>;
 }
 
-const Spine: React.FC<SpineProps> = ({ variant, line, Icon }) => (
-  <Wrapper>
-    {Icon ? <Icon /> : <Circle {...{ variant }} />}
-    {line && <Line />}
-  </Wrapper>
-);
+const Spine: React.FC<SpineProps> = ({ variant, line, Icon, titleRef }) => {
+  const [topHeight, setTopHeight] = useState<number>();
+
+  useEffect(() => {
+    const handleOffsetTopChange = () => {
+      if (titleRef?.current) {
+        const newOffsetTop = titleRef.current.offsetTop;
+        if (newOffsetTop !== topHeight) {
+          setTopHeight(newOffsetTop);
+        }
+      }
+    };
+
+    handleOffsetTopChange();
+
+    window.addEventListener("resize", handleOffsetTopChange);
+
+    return () => {
+      window.removeEventListener("resize", handleOffsetTopChange);
+    };
+  }, [titleRef, topHeight]);
+
+  return (
+    <Wrapper>
+      {topHeight ? <Line topHeight={topHeight} /> : null}
+      {Icon ? <Icon /> : <Circle {...{ variant }} />}
+      {line && <Line />}
+    </Wrapper>
+  );
+};
 
 export default Spine;