Added stories for multiple components

Signed-off-by: Nitin Ramnani <nitin.ramnani@infosys.com>
This commit is contained in:
Nitin Ramnani
2024-05-03 14:49:01 +05:30
parent 53743c6cc2
commit ae500129a9
4 changed files with 180 additions and 0 deletions
@@ -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) => <HeaderIconLinkRow {...args} />
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"
},
]
};
@@ -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) => <ResponseErrorPanel {...args} />
Default.args = {
error: new Error('Error message from error object'),
defaultExpanded: false
};
export const WithTitle = (args:ErrorPanelProps) => <ResponseErrorPanel {...args} />
WithTitle.args = {
error: new Error('test'),
defaultExpanded: false,
title:"Title prop is passed"
};
@@ -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
}) => <BottomLink {...args} />
Default.args = {
link: 'https://google.com',
title: 'This is bottom link'
};
@@ -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) => <ContentHeader {...args} ><div>Child of Content Header</div></ContentHeader>
Default.args = {
title: 'This is Content Header default aligned',
description:'This is description'
};
export const Left = (args:ContentHeaderProps) => <ContentHeader {...args} ><div>Child of Content Header</div></ContentHeader>
Left.args = {
title: 'This is Content Header left aligned',
description:'This is description',
textAlign: 'left'
};
export const Right = (args:ContentHeaderProps) => <ContentHeader {...args} ><div>Child of Content Header</div></ContentHeader>
Right.args = {
title: 'This is Content Header right aligned',
description:'This is description',
textAlign: 'right'
};
export const Center = (args:ContentHeaderProps) => <ContentHeader {...args} ><div>Child of Content Header</div></ContentHeader>
Center.args = {
title: 'This is Content Header center aligned',
description:'This is description',
textAlign: 'center'
};