add .

kivra · Jun 24, 2024 · f49ae4a · f49ae4a
1 parent eb680c9
commit f49ae4a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 26 deletions.
diff --git a/src/webapp/layout/story/StoryHeader.tsx b/src/webapp/layout/story/StoryHeader.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { StoryHeaderButton } from "./story-button/StoryButton";
-import { Title, Text } from "@mantine/core";
+import {
+  Title,
+  Text,
+  TextProps,
+  createPolymorphicComponent,
+} from "@mantine/core";
 import { StoryButtonTypes } from "../../../types";
 
 interface Props {
@@ -22,24 +27,17 @@ export const StoryHeader: React.FC<Props> = ({
   storyButtons,
   label,
 }) => {
+  const StyledDescription = createPolymorphicComponent<"button", TextProps>(
+    Description
+  );
+
   return (
     <div>
       <HeaderWrapper>
         <HeaderContent>
           <Label>{label}</Label>
           {title && <ComponentName order={1}>{title}</ComponentName>}
-          {description && (
-            <Text
-              style={{
-                fontSize: "1.25rem",
-                color: "var(--text-secondary)",
-                maxWidth: "860px",
-                marginBottom: "16px",
-              }}
-            >
-              {description}
-            </Text>
-          )}
+          {description && <StyledDescription>{description}</StyledDescription>}
 
           <ButtonWrapper>
             {storyButtons &&
@@ -48,7 +46,7 @@ export const StoryHeader: React.FC<Props> = ({
                   <React.Fragment key={button.type}>
                     <StoryHeaderButton
                       type={button.type}
-                      url={button.url ?? ""}
+                      url={button.url}
                       value={button.value}
                       packageName={button.packageName}
                     />
@@ -102,3 +100,10 @@ const Label = styled.label({
   marginBottom: 0,
   marginTop: 0,
 });
+
+const Description = styled(Text)({
+  fontSize: "1.25rem",
+  color: "var(--text-secondary)",
+  maxWidth: "860px",
+  marginBottom: "16px",
+});
diff --git a/src/webapp/layout/story/story-button/StoryButton.tsx b/src/webapp/layout/story/story-button/StoryButton.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { Text, Badge } from "@mantine/core";
+import {
+  Text,
+  Badge,
+  createPolymorphicComponent,
+  TextProps,
+} from "@mantine/core";
 import { InlineCodeHighlight } from "@mantine/code-highlight";
 import FigmaIcon from "./icons/figma-icon";
 import GitHubIcon from "./icons/github-icon";
@@ -117,6 +122,9 @@ const StoryButton = ({
   url: string;
 }) => {
   const Icon = icon;
+  const StyledStoryButtonText = createPolymorphicComponent<"button", TextProps>(
+    StoryButtonText
+  );
   return (
     <ButtonWrapper href={url} target="_blank" rel="noopener noreferrer">
       <Text style={{ color: "var(--text-secondary)", minWidth: "80px" }}>
@@ -125,17 +133,7 @@ const StoryButton = ({
 
       <ButtonText>
         <DecorativeIcon>{Icon}</DecorativeIcon>
-        <Text
-          style={{
-            color: "var(--text-primary)",
-            textDecoration: "underline",
-            textDecorationColor: "var(--text-secondary)",
-            textDecorationStyle: "dotted",
-            textUnderlineOffset: "5px",
-          }}
-        >
-          {title}
-        </Text>
+        <StyledStoryButtonText>{title}</StyledStoryButtonText>
       </ButtonText>
     </ButtonWrapper>
   );
@@ -163,3 +161,11 @@ const FlexItem = styled("div")({
   display: "flex",
   alignItems: "center",
 });
+
+const StoryButtonText = styled(Text)({
+  color: "var(--text-primary)",
+  textDecoration: "underline",
+  textDecorationColor: "var(--text-secondary)",
+  textDecorationStyle: "dotted",
+  textUnderlineOffset: "5px",
+});