From 92568fa530b85315830a34c36ee3f5d1d34921c3 Mon Sep 17 00:00:00 2001 From: Ben Protheroe Date: Tue, 23 May 2023 09:51:54 +0100 Subject: [PATCH] fix(stories): fix type errors on exsting stories --- src/components/Card/CardLinkIcon.stories.tsx | 25 +++---- .../SubjectUnitLessonTitleCard.stories.tsx | 61 ++++++++------- .../UpcomingWebinarListItem.stories.tsx | 34 ++++----- .../LandingPageTextAndMedia.stories.tsx | 74 ++++++++++--------- 4 files changed, 96 insertions(+), 98 deletions(-) diff --git a/src/components/Card/CardLinkIcon.stories.tsx b/src/components/Card/CardLinkIcon.stories.tsx index bc658d05cd..efec746693 100644 --- a/src/components/Card/CardLinkIcon.stories.tsx +++ b/src/components/Card/CardLinkIcon.stories.tsx @@ -1,22 +1,21 @@ -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import Component from "./CardLinkIcon"; -export default { +const meta: Meta = { title: "Cards/Card Link Icon", component: Component, argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); +}; -export const CardLinkIcon = Template.bind({}); +export default meta; +type Story = StoryObj; -CardLinkIcon.args = { - title: "Title", - href: "/", - background: "teachersPastelYellow", - titleTag: "h3", +export const CardLinkIcon: Story = { + args: { + title: "Title", + href: "/", + background: "teachersPastelYellow", + titleTag: "h3", + }, }; diff --git a/src/components/Card/SubjectUnitLessonTitleCard.stories.tsx b/src/components/Card/SubjectUnitLessonTitleCard.stories.tsx index 056677bc14..d980888435 100644 --- a/src/components/Card/SubjectUnitLessonTitleCard.stories.tsx +++ b/src/components/Card/SubjectUnitLessonTitleCard.stories.tsx @@ -1,43 +1,42 @@ -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import Component from "./SubjectUnitLessonTitleCard"; -export default { +const meta: Meta = { title: "Cards/Title card", component: Component, argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const TitleCardLesson = Template.bind({}); - -TitleCardLesson.args = { - title: "Binary conversion", - page: "lesson", - keyStage: "Key stage 4", - keyStageSlug: "key-stage-4", - subject: "Computing", - subjectSlug: "computing", }; -export const TitleCardUnit = Template.bind({}); - -TitleCardUnit.args = { - title: "Data representation", - page: "unit", - keyStage: "Key stage 4", - keyStageSlug: "key-stage-4", +export default meta; +type Story = StoryObj; + +export const TitleCardLesson: Story = { + args: { + title: "Binary conversion", + page: "lesson", + keyStage: "Key stage 4", + keyStageSlug: "key-stage-4", + subject: "Computing", + subjectSlug: "computing", + }, }; -export const TitleCardSubject = Template.bind({}); +export const TitleCardUnit: Story = { + args: { + title: "Data representation", + page: "unit", + keyStage: "Key stage 4", + keyStageSlug: "key-stage-4", + }, +}; -TitleCardSubject.args = { - title: "Computer Science", - page: "subject", - keyStage: "Key stage 4", - keyStageSlug: "key-stage-4", - slug: "computer-science", +export const TitleCardSubject: Story = { + args: { + title: "Computer Science", + page: "subject", + keyStage: "Key stage 4", + keyStageSlug: "key-stage-4", + slug: "computer-science", + }, }; diff --git a/src/components/Posts/PostList/UpcomingWebinarListItem/UpcomingWebinarListItem.stories.tsx b/src/components/Posts/PostList/UpcomingWebinarListItem/UpcomingWebinarListItem.stories.tsx index 842bc6e7a1..0d006a336d 100644 --- a/src/components/Posts/PostList/UpcomingWebinarListItem/UpcomingWebinarListItem.stories.tsx +++ b/src/components/Posts/PostList/UpcomingWebinarListItem/UpcomingWebinarListItem.stories.tsx @@ -1,10 +1,10 @@ -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import Box from "../../../Box"; import Component from "."; -export default { +const meta: Meta = { title: "Blogs & Webinars/Post List/UpcomingWebinarListItem", component: Component, decorators: [ @@ -14,22 +14,20 @@ export default { ), ], - argTypes: { - argTypes: { signUpOnClick: { action: "clicked" } }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => { - return ; + argTypes: { signUpOnClick: { action: "clicked" } }, }; -export const UpcomingWebinarListItem = Template.bind({}); -UpcomingWebinarListItem.args = { - titleTag: "h3", - title: "Why are teachers still using Oak?", - summary: - "We know schools are facing yet another challenging term, with increasing numbers of staff and pupils isolating due to Covid, isolating due to Covid, isolating due to Covid, isolating due to Covid", - date: "2052-03-31T14:30:00.000Z", - slug: "why-oak", - signUpHref: "https://example.com", +export default meta; +type Story = StoryObj; + +export const UpcomingWebinarListItem: Story = { + args: { + titleTag: "h3", + title: "Why are teachers still using Oak?", + summary: + "We know schools are facing yet another challenging term, with increasing numbers of staff and pupils isolating due to Covid, isolating due to Covid, isolating due to Covid, isolating due to Covid", + date: "2052-03-31T14:30:00.000Z", + slug: "why-oak", + signUpHref: "https://example.com", + }, }; diff --git a/src/components/pages/LandingPages/LandingPageTextAndMedia.stories.tsx b/src/components/pages/LandingPages/LandingPageTextAndMedia.stories.tsx index bcf321e12a..c323bdf31d 100644 --- a/src/components/pages/LandingPages/LandingPageTextAndMedia.stories.tsx +++ b/src/components/pages/LandingPages/LandingPageTextAndMedia.stories.tsx @@ -1,48 +1,50 @@ -import React from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import Flex from "../../Flex"; import { mockImageAsset } from "../../../__tests__/__helpers__/cms"; import { LandingPageTextAndMedia as Component } from "./LandingPageTextAndMedia"; -export default { +const meta: Meta = { title: "Sanity/Pages/Landing Pages", component: Component, argTypes: {}, -} as ComponentMeta; +}; -const Template: ComponentStory = (args) => ( - - - -); +export default meta; +type Story = StoryObj; -export const LandingPagesTextAndMedia = Template.bind({}); -LandingPagesTextAndMedia.args = { - title: "title", - bodyPortableText: [ - { - _key: "fba015024518", - _type: "block", - children: [ - { - _key: "e55d6209321d0", - _type: "span", - marks: [], - text: "Our interim board oversees all of Oak’s work. They provide strategic direction, enable us to deliver on our plans, scrutinise our work and safeguard our independence. The interim board will be in place whilst a permanent board is chosen through a public appointments process.", - }, - ], - markDefs: [], - style: "normal", - }, - ], - alignMedia: "left", - mediaType: "image", - image: mockImageAsset(), +export const LandingPagesTextAndMedia: Story = { + args: { + title: "title", + bodyPortableText: [ + { + _key: "fba015024518", + _type: "block", + children: [ + { + _key: "e55d6209321d0", + _type: "span", + marks: [], + text: "Our interim board oversees all of Oak’s work. They provide strategic direction, enable us to deliver on our plans, scrutinise our work and safeguard our independence. The interim board will be in place whilst a permanent board is chosen through a public appointments process.", + }, + ], + markDefs: [], + style: "normal", + }, + ], + alignMedia: "left", + mediaType: "image", + image: mockImageAsset(), + }, + render: (args) => ( + + + + ), };