Merge pull request #242 from storybookjs/kyle/chdx-1058-storybook-site-2

Eyebrow mobile fixes
storybookjs · Nov 18, 2024 · 19e8ebd · 19e8ebd
2 parents c054128 + 9924036
commit 19e8ebd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/packages/ui/src/header/eyebrow.tsx b/packages/ui/src/header/eyebrow.tsx
@@ -16,9 +16,11 @@ export const Eyebrow: FC<EyebrowProps> = ({ href, title }) => {
         href={href}
         className="ui-flex ui-justify-center ui-items-center ui-gap-2"
       >
-        <Video />
+        {/* @ts-expect-error - Not only is it typed, but it also functions correctly */}
+        <Video className="ui-flex-none" />
         {title}
-        <SimpleArrow />
+        {/* @ts-expect-error - Not only is it typed, but it also functions correctly */}
+        <SimpleArrow className="ui-flex-none ui-hidden sm:ui-inline" />
       </a>
     </div>
   );

diff --git a/packages/ui/src/header/simple-arrow.tsx b/packages/ui/src/header/simple-arrow.tsx
@@ -2,13 +2,16 @@
 
 import type { FC } from 'react';
 
-export const SimpleArrow: FC = () => (
+type SimpleArrowProps = React.SVGProps<SVGSVGElement>;
+
+export const SimpleArrow: FC = (props: SimpleArrowProps) => (
   <svg
     width="10"
     height="10"
     viewBox="0 0 10 10"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
     <path
       d="M7.93083 5.25261L4.00226 9.18118C3.86279 9.32065 3.63666 9.32065 3.49718 9.18118C3.35771 9.04171 3.35771 8.81558 3.49718 8.6761L7.17322 5.00007L3.49718 1.32404C3.35771 1.18456 3.35771 0.958433 3.49718 0.81896C3.63666 0.679487 3.86279 0.679487 4.00226 0.81896L7.93083 4.74753C8.0703 4.887 8.0703 5.11313 7.93083 5.25261Z"

diff --git a/packages/ui/src/header/video.tsx b/packages/ui/src/header/video.tsx
@@ -2,13 +2,16 @@
 
 import type { FC } from 'react';
 
-export const Video: FC = () => (
+type VideoProps = React.SVGProps<SVGSVGElement>;
+
+export const Video: FC = (props: VideoProps) => (
   <svg
     width="14"
     height="14"
     viewBox="0 0 14 14"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
     <path
       d="M2.5 10C2.77614 10 3 9.77614 3 9.5C3 9.22386 2.77614 9 2.5 9C2.22386 9 2 9.22386 2 9.5C2 9.77614 2.22386 10 2.5 10Z"