feat(addons): format story name

vinpac · Apr 25, 2022 · edca1c0 · edca1c0
1 parent 067076d
commit edca1c0
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 14 deletions.
diff --git a/packages/ladle/lib/app/generated/styles.css b/packages/ladle/lib/app/generated/styles.css
diff --git a/packages/ladle/lib/app/src/addon-panel.tsx b/packages/ladle/lib/app/src/addon-panel.tsx
@@ -7,6 +7,7 @@ import { Button as RtlButton } from "./addons/rtl";
 import { Button as LadleButton } from "./addons/ladle";
 import config from "./get-config";
 import { ChevronRight, Circle } from "./icons";
+import { StoryName } from "./addons/story-name";
 
 type AddonNames = keyof Config["addons"];
 
@@ -24,11 +25,7 @@ const AddonPanel: React.FC<{
 
   return (
     <aside data-ladle className="ladle-addons">
-      <div className="ladle-addons-story-title">
-        <Circle className="ladle-addons-story-icon" />
-        {globalState.story}
-        <ChevronRight className="ladle-addons-story-divider" />
-      </div>
+      <StoryName title={globalState.story} />
       <ul className="ladle-addons-controls">
         {config.addons.control.enabled &&
           Object.keys(globalState.control).length > 0 && (

diff --git a/packages/ladle/lib/app/src/addons/story-name.tsx b/packages/ladle/lib/app/src/addons/story-name.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { ChevronRight, Circle } from "../icons";
+import { parseStoryTitle } from "../utils/story";
+
+interface StoryNameProps {
+  title: string;
+}
+
+export const StoryName: React.FC<StoryNameProps> = ({ title }) => {
+  const handleClick = () => {
+    navigator.clipboard.writeText(title);
+  };
+  const parsedStoryTitle = parseStoryTitle(title);
+
+  return (
+    <button
+      aria-label="Copy Story Link"
+      onClick={handleClick}
+      className="ladle-addons-story-title"
+    >
+      <Circle className="ladle-addons-story-icon" />
+      {parsedStoryTitle.map((title, i) => (
+        <React.Fragment key={`${title}${i}`}>
+          {title}
+          {i !== parsedStoryTitle.length - 1 && (
+            <ChevronRight className="ladle-addons-story-divider" />
+          )}
+        </React.Fragment>
+      ))}
+    </button>
+  );
+};
diff --git a/packages/ladle/lib/app/src/styles/addons.css b/packages/ladle/lib/app/src/styles/addons.css
@@ -30,14 +30,16 @@ html[dir="rtl"] {
   }
 }
 
-.ladle-addons-story-title {
-  @apply flex items-center mr-auto text-xs text-primary-700;
-}
+[data-ladle] {
+  .ladle-addons-story-title {
+    @apply flex items-center mr-auto text-xs text-primary-700;
+  }
 
-.ladle-addons-story-icon {
-  @apply h-1.5 text-primary-500;
-}
+  .ladle-addons-story-icon {
+    @apply h-1.5 text-primary-500;
+  }
 
-.ladle-addons-story-divider {
-  @apply h-4 text-primary-400;
+  .ladle-addons-story-divider {
+    @apply h-4 text-primary-400;
+  }
 }
diff --git a/packages/ladle/lib/app/src/utils/story.ts b/packages/ladle/lib/app/src/utils/story.ts
@@ -0,0 +1,6 @@
+export const parseStoryTitle = (storyTitle: string): string[] => {
+  return storyTitle.split("--").map((part) => {
+    const capitalized = part.charAt(0).toUpperCase() + part.substring(1);
+    return capitalized.replace(/-/g, " ");
+  });
+};