From ae500129a9146c600453de465103f917b5fbbcb4 Mon Sep 17 00:00:00 2001 From: Nitin Ramnani Date: Fri, 3 May 2024 14:49:01 +0530 Subject: [PATCH 1/2] Added stories for multiple components Signed-off-by: Nitin Ramnani --- .../HeaderIconLinkRow.stories.tsx | 51 ++++++++++++++++ .../ResponseErrorPanel.stories.tsx | 38 ++++++++++++ .../layout/BottomLink/BottomLink.stories.tsx | 33 +++++++++++ .../ContentHeader/ContentHeader.stories.tsx | 58 +++++++++++++++++++ 4 files changed, 180 insertions(+) create mode 100644 packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx create mode 100644 packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx create mode 100644 packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx create mode 100644 packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx new file mode 100644 index 0000000000..e6891081e3 --- /dev/null +++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx @@ -0,0 +1,51 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { HeaderIconLinkRow } from '../HeaderIconLinkRow'; +import { IconLinkVerticalProps } from './IconLinkVertical'; + + +type Props = { + links: IconLinkVerticalProps[]; + }; + +export default { + title: 'Data Display/HeaderIconLinkRow', + component: HeaderIconLinkRow, +}; + + + +export const Default = (args:Props) => +Default.args = { + links: [ + { + color: 'primary', + disabled: false, + href: "https://google.com", + label: "primary", + title: "title" + }, + { + color: 'secondary', + disabled: false, + href: "https://google.com", + label: "secondary", + title: "title-2" + }, + ] +}; \ No newline at end of file diff --git a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx new file mode 100644 index 0000000000..62eb523a02 --- /dev/null +++ b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx @@ -0,0 +1,38 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { ResponseErrorPanel } from '../ResponseErrorPanel'; +import { ErrorPanelProps } from '../ErrorPanel'; + +export default { + title: 'Data Display/ResponseErrorPanel', + component: ResponseErrorPanel, +}; + +export const Default = (args:ErrorPanelProps) => +Default.args = { + error: new Error('Error message from error object'), + defaultExpanded: false +}; + + +export const WithTitle = (args:ErrorPanelProps) => +WithTitle.args = { + error: new Error('test'), + defaultExpanded: false, + title:"Title prop is passed" +}; diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx new file mode 100644 index 0000000000..84f268681d --- /dev/null +++ b/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx @@ -0,0 +1,33 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +import React from 'react'; +import { BottomLink } from '../BottomLink'; + +export default { + title: 'Layout/BottomLink', + component: BottomLink, +}; + +export const Default = (args:{ + link:string + title:string +}) => +Default.args = { + link: 'https://google.com', + title: 'This is bottom link' +}; diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx new file mode 100644 index 0000000000..ce6365c28e --- /dev/null +++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx @@ -0,0 +1,58 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React , {ReactNode} from 'react'; +import { ContentHeader } from '../ContentHeader'; + +export default { + title: 'Layout/ContentHeader', + component: ContentHeader, +}; + +type ContentHeaderProps = { + title?: string + titleComponent?: ReactNode; + description?: string; + textAlign?: 'left' | 'right' | 'center'; + }; + +export const Default = (args:ContentHeaderProps) =>
Child of Content Header
 +Default.args = { + title: 'This is Content Header default aligned', + description:'This is description' +}; + + +export const Left = (args:ContentHeaderProps) =>
Child of Content Header
 +Left.args = { + title: 'This is Content Header left aligned', + description:'This is description', + textAlign: 'left' +}; + +export const Right = (args:ContentHeaderProps) =>
Child of Content Header
 +Right.args = { + title: 'This is Content Header right aligned', + description:'This is description', + textAlign: 'right' +}; + +export const Center = (args:ContentHeaderProps) =>
Child of Content Header
 +Center.args = { + title: 'This is Content Header center aligned', + description:'This is description', + textAlign: 'center' +}; From baf298f57ec2a6fe1b43dd584cf78f2e0c959467 Mon Sep 17 00:00:00 2001 From: Nitin Ramnani Date: Fri, 3 May 2024 14:52:20 +0530 Subject: [PATCH 2/2] Added stories for multiple components Signed-off-by: Nitin Ramnani --- .../HeaderIconLinkRow.stories.tsx | 49 +++++++-------- .../ResponseErrorPanel.stories.tsx | 23 ++++--- .../layout/BottomLink/BottomLink.stories.tsx | 16 +++-- .../ContentHeader/ContentHeader.stories.tsx | 63 ++++++++++++------- 4 files changed, 82 insertions(+), 69 deletions(-) diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx index e6891081e3..e472ab5599 100644 --- a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx +++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx @@ -18,34 +18,31 @@ import React from 'react'; import { HeaderIconLinkRow } from '../HeaderIconLinkRow'; import { IconLinkVerticalProps } from './IconLinkVertical'; - type Props = { - links: IconLinkVerticalProps[]; - }; - -export default { - title: 'Data Display/HeaderIconLinkRow', - component: HeaderIconLinkRow, + links: IconLinkVerticalProps[]; }; +export default { + title: 'Data Display/HeaderIconLinkRow', + component: HeaderIconLinkRow, +}; - -export const Default = (args:Props) => +export const Default = (args: Props) => ; Default.args = { - links: [ - { - color: 'primary', - disabled: false, - href: "https://google.com", - label: "primary", - title: "title" - }, - { - color: 'secondary', - disabled: false, - href: "https://google.com", - label: "secondary", - title: "title-2" - }, - ] -}; \ No newline at end of file + links: [ + { + color: 'primary', + disabled: false, + href: 'https://google.com', + label: 'primary', + title: 'title', + }, + { + color: 'secondary', + disabled: false, + href: 'https://google.com', + label: 'secondary', + title: 'title-2', + }, + ], +}; diff --git a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx index 62eb523a02..8d03e7359f 100644 --- a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx +++ b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx @@ -19,20 +19,23 @@ import { ResponseErrorPanel } from '../ResponseErrorPanel'; import { ErrorPanelProps } from '../ErrorPanel'; export default { - title: 'Data Display/ResponseErrorPanel', - component: ResponseErrorPanel, + title: 'Data Display/ResponseErrorPanel', + component: ResponseErrorPanel, }; -export const Default = (args:ErrorPanelProps) => +export const Default = (args: ErrorPanelProps) => ( + +); Default.args = { - error: new Error('Error message from error object'), - defaultExpanded: false + error: new Error('Error message from error object'), + defaultExpanded: false, }; - -export const WithTitle = (args:ErrorPanelProps) => +export const WithTitle = (args: ErrorPanelProps) => ( + +); WithTitle.args = { - error: new Error('test'), - defaultExpanded: false, - title:"Title prop is passed" + error: new Error('test'), + defaultExpanded: false, + title: 'Title prop is passed', }; diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx index 84f268681d..e05af86993 100644 --- a/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx +++ b/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx @@ -14,20 +14,18 @@ * limitations under the License. */ - import React from 'react'; import { BottomLink } from '../BottomLink'; export default { - title: 'Layout/BottomLink', - component: BottomLink, + title: 'Layout/BottomLink', + component: BottomLink, }; -export const Default = (args:{ - link:string - title:string -}) => +export const Default = (args: { link: string; title: string }) => ( + +); Default.args = { - link: 'https://google.com', - title: 'This is bottom link' + link: 'https://google.com', + title: 'This is bottom link', }; diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx index ce6365c28e..27df00e72c 100644 --- a/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx +++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx @@ -14,45 +14,60 @@ * limitations under the License. */ -import React , {ReactNode} from 'react'; +import React, { ReactNode } from 'react'; import { ContentHeader } from '../ContentHeader'; export default { - title: 'Layout/ContentHeader', - component: ContentHeader, + title: 'Layout/ContentHeader', + component: ContentHeader, }; type ContentHeaderProps = { - title?: string - titleComponent?: ReactNode; - description?: string; - textAlign?: 'left' | 'right' | 'center'; - }; + title?: string; + titleComponent?: ReactNode; + description?: string; + textAlign?: 'left' | 'right' | 'center'; +}; -export const Default = (args:ContentHeaderProps) =>
Child of Content Header
 +export const Default = (args: ContentHeaderProps) => ( + +
Child of Content Header
+ +); Default.args = { - title: 'This is Content Header default aligned', - description:'This is description' + title: 'This is Content Header default aligned', + description: 'This is description', }; - -export const Left = (args:ContentHeaderProps) =>
Child of Content Header
 +export const Left = (args: ContentHeaderProps) => ( + +
Child of Content Header
+ +); Left.args = { - title: 'This is Content Header left aligned', - description:'This is description', - textAlign: 'left' + title: 'This is Content Header left aligned', + description: 'This is description', + textAlign: 'left', }; -export const Right = (args:ContentHeaderProps) =>
Child of Content Header
 +export const Right = (args: ContentHeaderProps) => ( + +
Child of Content Header
+ +); Right.args = { - title: 'This is Content Header right aligned', - description:'This is description', - textAlign: 'right' + title: 'This is Content Header right aligned', + description: 'This is description', + textAlign: 'right', }; -export const Center = (args:ContentHeaderProps) =>
Child of Content Header
 +export const Center = (args: ContentHeaderProps) => ( + +
Child of Content Header
+ +); Center.args = { - title: 'This is Content Header center aligned', - description:'This is description', - textAlign: 'center' + title: 'This is Content Header center aligned', + description: 'This is description', + textAlign: 'center', };