Adds font weight to title.

ClickHouse · Feb 6, 2025 · a0ac055 · a0ac055
1 parent ccec2d0
commit a0ac055
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/Typography/Title/Title.stories.tsx b/src/components/Typography/Title/Title.stories.tsx
@@ -9,6 +9,10 @@ export default {
       options: ["xs", "sm", "md", "lg", "xl", "2xl"],
       control: { type: "select" },
     },
+    weight: {
+      options: ["1", "2", "3", "4"],
+      control: { type: "select" },
+    },
     type: {
       options: ["h1", "h2", "h3", "h4", "h5", "h6"],
       control: { type: "select" },
@@ -27,6 +31,7 @@ export default {
 export const Playground = {
   args: {
     size: "md",
+    weight: "inherit",
     type: "h1",
     family: "product",
     color: "default",

diff --git a/src/components/Typography/Title/Title.tsx b/src/components/Typography/Title/Title.tsx
@@ -6,24 +6,27 @@ export type TitleColor = "default" | "muted";
 export type TitleSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type TitleFamily = "product" | "brand";
 export type TitleType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type TitleWeight = "1" | "2" | "3" | "4";
 
 export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
   align?: TitleAlignment;
   color?: TitleColor;
   size?: TitleSize;
   family?: TitleFamily;
   type: TitleType;
+  weight?: TitleWeight;
 }
 
 /** The `title` component allows you to easily add headings to your pages. They do not include built in margins. */
 export const Title = forwardRef<HTMLHeadingElement, TitleProps>(
-  ({ align, size, family, type, color, children, ...props }, ref) => (
+  ({ align, size, family, type, color, weight, children, ...props }, ref) => (
     <CuiTitle
       ref={ref}
       $align={align}
       $color={color}
       $size={size}
       $family={family}
+      $weight={weight}
       as={type}
       {...props}
     >
@@ -37,6 +40,7 @@ const CuiTitle = styled.div<{
   $color?: TitleColor;
   $size?: TitleSize;
   $family?: TitleFamily;
+  $weight?: TitleWeight;
 }>`
   font: ${({ $size = "md", $family = "product", theme }) =>
     theme.typography.styles[$family].titles[$size]};
@@ -45,6 +49,7 @@ const CuiTitle = styled.div<{
   padding: 0;
   font-style: inherit;
   text-align: ${({ $align = "left" }) => $align};
+  font-weight: ${({ $weight, theme }) => $weight ? theme.typography.font.weights[$weight] : "inherit"};
 
   a,
   a:visited {