mirror of
https://github.com/apache/superset.git
synced 2026-07-26 00:22:31 +00:00
142 lines
3.2 KiB
TypeScript
142 lines
3.2 KiB
TypeScript
/**
|
|
* Licensed to the Apache Software Foundation (ASF) under one
|
|
* or more contributor license agreements. See the NOTICE file
|
|
* distributed with this work for additional information
|
|
* regarding copyright ownership. The ASF licenses this file
|
|
* to you 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 Button, { ButtonProps } from './index';
|
|
|
|
type ButtonStyle = Pick<ButtonProps, 'buttonStyle'>;
|
|
type ButtonStyleValue = ButtonStyle[keyof ButtonStyle];
|
|
type ButtonSize = Pick<ButtonProps, 'buttonSize'>;
|
|
type ButtonSizeValue = ButtonSize[keyof ButtonSize];
|
|
|
|
export default {
|
|
title: 'Button',
|
|
component: Button,
|
|
includeStories: ['ButtonGallery', 'InteractiveButton'],
|
|
};
|
|
|
|
const buttonStyles: ButtonStyleValue[] = [
|
|
'primary',
|
|
'secondary',
|
|
'tertiary',
|
|
'dashed',
|
|
'danger',
|
|
'warning',
|
|
'success',
|
|
'link',
|
|
'default',
|
|
];
|
|
|
|
const buttonSizes: ButtonSizeValue[] = ['xsmall', 'small', 'default'];
|
|
|
|
export const STYLES = {
|
|
label: 'styles',
|
|
options: buttonStyles,
|
|
defaultValue: undefined,
|
|
};
|
|
|
|
export const SIZES = {
|
|
label: 'sizes',
|
|
options: buttonSizes,
|
|
defaultValue: undefined,
|
|
};
|
|
|
|
const TARGETS = {
|
|
label: 'target',
|
|
options: {
|
|
blank: '_blank',
|
|
none: null,
|
|
},
|
|
defaultValue: null,
|
|
};
|
|
|
|
const HREFS = {
|
|
label: 'href',
|
|
options: {
|
|
superset: 'https://superset.apache.org/',
|
|
none: null,
|
|
},
|
|
defaultValue: null,
|
|
};
|
|
|
|
export const ButtonGallery = () => (
|
|
<>
|
|
{SIZES.options.map(size => (
|
|
<div key={size} style={{ marginBottom: 40 }}>
|
|
<h4>{size}</h4>
|
|
{Object.values(STYLES.options).map(style => (
|
|
<Button
|
|
buttonStyle={style}
|
|
buttonSize={size}
|
|
onClick={() => true}
|
|
key={`${style}_${size}`}
|
|
style={{ marginRight: 20, marginBottom: 10 }}
|
|
>
|
|
{style}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
))}
|
|
</>
|
|
);
|
|
|
|
ButtonGallery.story = {
|
|
parameters: {
|
|
actions: {
|
|
disable: true,
|
|
},
|
|
controls: {
|
|
disable: true,
|
|
},
|
|
knobs: {
|
|
disable: true,
|
|
},
|
|
},
|
|
};
|
|
|
|
export const InteractiveButton = (args: ButtonProps & { label: string }) => {
|
|
const { label, ...btnArgs } = args;
|
|
return <Button {...btnArgs}>{label}</Button>;
|
|
};
|
|
|
|
InteractiveButton.story = {
|
|
parameters: {
|
|
knobs: {
|
|
disable: true,
|
|
},
|
|
},
|
|
};
|
|
|
|
InteractiveButton.args = {
|
|
buttonStyle: 'default',
|
|
buttonSize: 'default',
|
|
label: 'Button!',
|
|
};
|
|
|
|
InteractiveButton.argTypes = {
|
|
target: {
|
|
name: TARGETS.label,
|
|
control: { type: 'select', options: Object.values(TARGETS.options) },
|
|
},
|
|
href: {
|
|
name: HREFS.label,
|
|
control: { type: 'select', options: Object.values(HREFS.options) },
|
|
},
|
|
onClick: { action: 'clicked' },
|
|
};
|