convert stories to .tsx "b" and "c"

ui/box/src/play.stories.jsx → ui/box/src/play.stories.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
-import { Story } from "@storybook/react";
 import { Box as Component } from "./box";
 
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+
 export default {
   title: "Box",
   component: Component,
-};
+} as ComponentMeta<typeof Component>;
 
-const Template: Story = (args) => (
+const Template: ComponentStory<typeof Component> = (args) => (
   <Component
     as="h1"
     css={{

ui/button/src/play.stories.jsx → ui/button/src/play.stories.tsx

@@ -9,6 +9,8 @@ import { styled, theme } from "@washingtonpost/wpds-theme";
 import { expect } from "@storybook/jest";
 import { within, userEvent } from "@storybook/testing-library";
 
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+
 export default {
   title: "Button",
   component: Component,
@@ -31,7 +33,7 @@ export default {
       defaultValue: "none",
     },
   },
-};
+} as ComponentMeta<typeof Component>;
 
 const Column = styled("div", {
   display: "flex",
@@ -51,7 +53,10 @@ const Stack = styled("div", {
   borderRadius: "$075",
 });
 
-const Template = ({ children, ...args }, context) => {
+const Template: ComponentStory<typeof Component> = (
+  { children, ...args },
+  context
+) => {
   return (
     <>
       <Column>

ui/card/src/play.stories.jsx → ui/card/src/play.stories.tsx

@@ -1,13 +1,15 @@
 import * as React from "react";
-import { Card as Component } from "./";
+import { Card as Component } from ".";
 import { theme, styled } from "@washingtonpost/wpds-theme";
 import { Button } from "@washingtonpost/wpds-button";
 import { Accordion, ACCORDION_TYPE } from "@washingtonpost/wpds-accordion";
 
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+
 export default {
   title: "Card",
   component: Component,
-};
+} as ComponentMeta<typeof Component>;
 
 const Stack = styled("section", {
   display: "flex",
@@ -23,7 +25,7 @@ const Label = styled("h3", {
   textAlign: "center",
 });
 
-const DefaultTemplate = (args) => (
+const DefaultTemplate: ComponentStory<typeof Component> = (args) => (
   <Stack>
     <Label>Card</Label>
     <Component {...args} css={{ display: "flex" }}>
@@ -37,7 +39,6 @@ const DefaultTemplate = (args) => (
       <img
         height="140"
         width="auto"
-        layout="fixed"
         alt="Lava pooling from a volcano"
         src="https://images.pexels.com/photos/235807/pexels-photo-235807.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
       />
@@ -47,19 +48,19 @@ const DefaultTemplate = (args) => (
 
 export const Card = DefaultTemplate.bind({});
 
-const styledText = styled("p", {
+const StyledText = styled("p", {
   overflow: "wrap",
   width: "100px",
 });
-const Container = styled({
+const Container = styled("div", {
   padding: theme.space["100"],
 });
 
 const OptionsT = (args) => (
   <Stack>
     <Label>Card with button</Label>
     <Component css={{ display: "flex", alignItems: "center", gap: "$075" }}>
-      <styledText>Brand new digital content free with subscription!</styledText>
+      <StyledText>Brand new digital content free with subscription!</StyledText>
       <Button variant="primary">Subscribe</Button>
     </Component>
 
@@ -76,15 +77,14 @@ const OptionsT = (args) => (
       <img
         height="140"
         width="210"
-        layout="fixed"
         alt="Vibrant quinoa bowl with carrots, tomatoes, and cucumbers"
         src="https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg"
       />
       <Container>
-        <styledText>
+        <StyledText>
           How Saria makes ready-to-eat <a href="">quinoa bowls</a> with lots of
           veggies.
-        </styledText>
+        </StyledText>
       </Container>
     </Component>
 

ui/checkbox/src/play.stories.jsx → ui/checkbox/src/play.stories.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { styled, theme } from "@washingtonpost/wpds-theme";
 import { Checkbox as Component } from ".";
 
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+
 const variants = ["primary", "secondary", "cta"];
 const size = ["087", "125"];
 const isOutline = [true, false];
@@ -68,7 +70,7 @@ export default {
       control: "text",
     },
   },
-};
+} as ComponentMeta<typeof Component>;
 
 export const Play = (args) => {
   const [checked, setChecked] = React.useState(false);
@@ -86,7 +88,7 @@ Play.args = {};
 
 Play.storyName = "Checkbox";
 
-const ChromaticTemplate = () => {
+const ChromaticTemplate: ComponentStory<typeof Component> = () => {
   const isRequired = true;
   return (
     <>

ui/container/src/play.stories.jsx → ui/container/src/play.stories.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { Box } from "@washingtonpost/wpds-box";
 import { Container as Component } from ".";
 
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+
 export default {
   title: "Container",
   component: Component,
@@ -14,9 +16,9 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-};
+} as ComponentMeta<typeof Component>;
 
-const Template = (args) => (
+const Template: ComponentStory<typeof Component> = (args) => (
   <>
     <Component maxWidth="xl">Extra lg</Component>
     <Component maxWidth="lg">lg</Component>