DateDetails: allow setting of text size and weight (#658)

Author: hoorayimhelping

src/components/DateDetails/DateDetails.stories.tsx

@@ -28,6 +28,18 @@ export default {
         type: "select",
       },
     },
+    size: {
+      control: {
+        type: "select",
+      },
+      options: ["xs", "sm", "md", "lg"],
+    },
+    weight: {
+      control: {
+        type: "select",
+      },
+      options: ["normal", "medium", "semibold", "bold", "mono"],
+    },
   },
   component: DateDetails,
   title: "Display/DateDetails",
@@ -47,7 +59,9 @@ export const Playground = {
       <DateDetails
         date={date}
         side={args.side}
+        size={args.size}
         systemTimeZone={args.systemTimeZone}
+        weight={args.weight}
       />
     );
   },

src/components/DateDetails/DateDetails.tsx

@@ -13,6 +13,7 @@ import { Text } from "@/components/Typography/Text/Text";
 import { linkStyles, StyledLinkProps } from "@/components/Link/common";
 import { GridContainer } from "@/components/GridContainer/GridContainer";
 import { Container } from "@/components/Container/Container";
+import { TextSize, TextWeight } from "../commonTypes";
 
 dayjs.extend(advancedFormat);
 dayjs.extend(duration);
@@ -106,10 +107,18 @@ export type ArrowPosition = "top" | "right" | "left" | "bottom";
 export interface DateDetailsProps {
   date: Date;
   side?: ArrowPosition;
+  size?: TextSize;
   systemTimeZone?: string;
+  weight?: TextWeight;
 }
 
-export const DateDetails = ({ date, side = "top", systemTimeZone }: DateDetailsProps) => {
+export const DateDetails = ({
+  date,
+  side = "top",
+  size = "sm",
+  systemTimeZone,
+  weight = "normal",
+}: DateDetailsProps) => {
   const dayjsDate = dayjs(date);
 
   let systemTime;
@@ -127,7 +136,12 @@ export const DateDetails = ({ date, side = "top", systemTimeZone }: DateDetailsP
         $size="sm"
         $weight="medium"
       >
-        <Text size="sm">{dayjs.utc(date).fromNow()}</Text>
+        <Text
+          size={size}
+          weight={weight}
+        >
+          {dayjs.utc(date).fromNow()}
+        </Text>
       </UnderlinedTrigger>
       <Popover.Content
         side={side}

src/components/Link/Link.tsx

@@ -8,7 +8,8 @@ import {
 } from "react";
 import { Icon, IconName } from "@/components";
 import { styled } from "styled-components";
-import { linkStyles, TextSize, TextWeight } from "./common";
+import { linkStyles } from "./common";
+import { TextSize, TextWeight } from "../commonTypes";
 
 export interface LinkProps<T extends ElementType = "a"> {
   size?: TextSize;

src/components/Link/common.ts

@@ -1,7 +1,5 @@
 import { css } from "styled-components";
-
-export type TextSize = "xs" | "sm" | "md" | "lg";
-export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+import { TextSize, TextWeight } from "../commonTypes";
 
 export type StyledLinkProps = { $size: TextSize; $weight: TextWeight };
 

src/components/Typography/Text/Text.tsx

@@ -6,11 +6,10 @@ import {
   forwardRef,
 } from "react";
 import { styled } from "styled-components";
+import { TextSize, TextWeight } from "@/components/commonTypes";
 
 export type TextAlignment = "left" | "center" | "right";
 export type TextColor = "default" | "muted" | "danger" | "disabled";
-export type TextSize = "xs" | "sm" | "md" | "lg";
-export type TextWeight = "normal" | "medium" | "semibold" | "bold" | "mono";
 
 export interface TextProps<T extends ElementType = "p"> {
   children: ReactNode;

src/components/commonTypes.ts

@@ -0,0 +1,2 @@
+export type TextSize = "xs" | "sm" | "md" | "lg";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold" | "mono";