Refactor CodeExample and its tests

BrunoQuaresma · BrunoQuaresma · commit b091ef86793d · 2023-09-06T19:25:45.000Z
diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx
@@ -1,26 +1,27 @@
-import { Story } from "@storybook/react";
-import { CodeExample, CodeExampleProps } from "./CodeExample";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeExample } from "./CodeExample";
 
 const sampleCode = `echo "Hello, world"`;
 
-export default {
+const meta: Meta<typeof CodeExample> = {
   title: "components/CodeExample",
   component: CodeExample,
   argTypes: {
     code: { control: "string", defaultValue: sampleCode },
   },
 };
 
-const Template: Story<CodeExampleProps> = (args: CodeExampleProps) => (
-  <CodeExample {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof CodeExample>;
 
-export const Example = Template.bind({});
-Example.args = {
-  code: sampleCode,
+export const Example: Story = {
+  args: {
+    code: sampleCode,
+  },
 };
 
-export const LongCode = Template.bind({});
-LongCode.args = {
-  code: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",
+export const LongCode: Story = {
+  args: {
+    code: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",
+  },
 };
diff --git a/site/src/components/CodeExample/CodeExample.test.tsx b/site/src/components/CodeExample/CodeExample.test.tsx
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -7,33 +7,24 @@ import { Theme } from "@mui/material/styles";
 
 export interface CodeExampleProps {
   code: string;
-  className?: string;
-  buttonClassName?: string;
-  tooltipTitle?: string;
-  inline?: boolean;
   password?: boolean;
+  className?: string;
 }
 
 /**
  * Component to show single-line code examples, with a copy button
  */
-export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
+export const CodeExample: FC<CodeExampleProps> = ({
   code,
+  password,
   className,
-  buttonClassName,
-  tooltipTitle,
-  inline,
 }) => {
-  const styles = useStyles({ inline: inline });
+  const styles = useStyles({ password });
 
   return (
     <div className={combineClasses([styles.root, className])}>
       <code className={styles.code}>{code}</code>
-      <CopyButton
-        text={code}
-        tooltipTitle={tooltipTitle}
-        buttonClassName={buttonClassName}
-      />
+      <CopyButton text={code} />
     </div>
   );
 };
@@ -48,8 +39,7 @@ const useStyles = makeStyles<Theme, styleProps>((theme) => ({
     display: props.inline ? "inline-flex" : "flex",
     flexDirection: "row",
     alignItems: "center",
-    background: props.inline ? "rgb(0 0 0 / 30%)" : "hsl(223, 27%, 3%)",
-    border: props.inline ? undefined : `1px solid ${theme.palette.divider}`,
+    background: "rgb(0 0 0 / 30%)",
     color: theme.palette.primary.contrastText,
     fontFamily: MONOSPACE_FONT_FAMILY,
     fontSize: 14,
