IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-14 02:32:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Storybook: Add controls to PanelChrome story (#54741)

Browse Source
This commit is contained in:
Tima Gixe 2022-09-09 13:08:46 +03:00 committed by GitHub
parent 20b07fae6f
commit 76f0037654
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
View File

@ -1,6 +1,7 @@
import { ComponentMeta } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { merge } from 'lodash';
import React, { CSSProperties, useState } from 'react';
import React, { CSSProperties, useState, ReactNode } from 'react';
import { useInterval } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
@ -14,10 +15,23 @@ const meta: ComponentMeta<typeof PanelChrome> = {
component: PanelChrome,
decorators: [withCenteredStory],
parameters: {
controls: {
exclude: ['children'],
},
docs: {},
},
};
function getContentStyle(theme: GrafanaTheme2): CSSProperties {
return {
background: theme.colors.background.secondary,
color: theme.colors.text.primary,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
};
}
function renderPanel(name: string, overrides: Partial<PanelChromeProps>, theme: GrafanaTheme2) {
const props: PanelChromeProps = {
width: 400,
@ -28,12 +42,7 @@ function renderPanel(name: string, overrides: Partial<PanelChromeProps>, theme:
merge(props, overrides);
const contentStyle: CSSProperties = {
background: theme.colors.background.secondary,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
};
const contentStyle = getContentStyle(theme);
return (
<PanelChrome {...props}>
@ -105,4 +114,50 @@ export const Examples = () => {
);
};
export const Basic: ComponentStory<typeof PanelChrome> = (args: PanelChromeProps) => {
const theme = useTheme2();
const contentStyle = getContentStyle(theme);
return (
<PanelChrome {...args}>
{(width: number, height: number) => <div style={{ height, width, ...contentStyle }}>Description text</div>}
</PanelChrome>
);
};
const Default: ReactNode = [];
const LoadingIcon = [
<PanelChrome.LoadingIndicator key="loadingIndicator" loading onCancel={action('LoadingIndicator: onCancel fired')} />,
];
const ErrorIcon = [
<PanelChrome.ErrorIndicator
key="errorIndicator"
error="Error text"
onClick={action('ErrorIndicator: onClick fired')}
/>,
];
const leftItems = { LoadingIcon, ErrorIcon, Default };
Basic.argTypes = {
leftItems: {
options: Object.keys(leftItems),
mapping: leftItems,
control: {
type: 'select',
labels: {
LoadingIcon: 'With loading icon',
ErrorIcon: 'With error icon',
Default: 'Default (no elements)',
},
},
},
};
Basic.args = {
width: 400,
height: 200,
title: 'Title text',
};
export default meta;