Skip to content

Commit

Permalink
refactor: upgrade ControlHeader to TSX & FC and add storybook (apache…
Browse files Browse the repository at this point in the history
…#18188)

* refactor: upgrade ControlHeader to TSX & FC and add storybook

* fix: Add story for error in ControlHeader

* apply review comments
  • Loading branch information
ad-m authored and bwang221 committed Feb 10, 2022
1 parent 677bb79 commit 18c1baa
Show file tree
Hide file tree
Showing 3 changed files with 235 additions and 174 deletions.
174 changes: 0 additions & 174 deletions superset-frontend/src/explore/components/ControlHeader.jsx

This file was deleted.

77 changes: 77 additions & 0 deletions superset-frontend/src/explore/components/ControlHeader.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
/**
* 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 ControlHeader, { ControlHeaderProps } from './ControlHeader';

export default {
title: 'ControlHeader',
component: ControlHeader,
};

const options: {
[key: string]: ControlHeaderProps;
} = {
label: {
label: 'Control label',
},
warning: {
label: 'Control warning',
warning: 'Example of warning message',
},
error: {
label: 'Control error',
validationErrors: ['Something is wrong'],
},
};

export const ControlHeaderGallery = () => (
<>
{Object.entries(options).map(([name, props]) => (
<>
<h4>{name}</h4>
<ControlHeader {...props} />
</>
))}
</>
);

export const InteractiveControlHeader = (props: ControlHeaderProps) => (
<ControlHeader {...props} />
);

InteractiveControlHeader.args = {
label: 'example label',
description: 'example description',
warning: 'example warning',
renderTrigger: false,
hovered: false,
};

InteractiveControlHeader.argTypes = {
tooltipOnClick: { action: 'tooltipOnClick' },
onClick: { action: 'onClick' },
};

InteractiveControlHeader.story = {
parameters: {
knobs: {
disable: true,
},
},
};
Loading

0 comments on commit 18c1baa

Please sign in to comment.