feat: add styles for long value (#228)

Author: bocembocem

src/lib/kit/components/LongValue/LongValue.scss

@@ -16,5 +16,11 @@
         &:hover {
             color: var(--g-color-text-secondary);
         }
+
+        &.#{$ns}long-value_secondary {
+            &:hover {
+                color: var(--g-color-text-primary);
+            }
+        }
     }
 }

src/lib/kit/components/LongValue/LongValue.tsx

@@ -15,7 +15,12 @@ export interface LongValueProps extends TextProps {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-export const LongValue: React.FC<LongValueProps> = ({value, onClick, className, ...restProps}) => {
+export const LongValue: React.FC<LongValueProps> = ({
+    value,
+    onClick,
+    className: externalClassName,
+    ...restProps
+}) => {
     const ref = React.useRef<HTMLDivElement>(null);
     const [open, setOpen] = React.useState(false);
     const [long, setLong] = React.useState(false);
@@ -28,6 +33,19 @@ export const LongValue: React.FC<LongValueProps> = ({value, onClick, className,
         [setOpen, onClick],
     );
 
+    const className = React.useMemo(
+        () =>
+            b(
+                {
+                    open,
+                    long,
+                    ...(restProps.color ? {[restProps.color]: true} : {}),
+                },
+                externalClassName,
+            ),
+        [open, long, externalClassName, restProps.color],
+    );
+
     React.useEffect(() => {
         if (ref.current) {
             const {offsetWidth, scrollWidth} = ref.current;