michael-s-molina commented on a change in pull request #14033:
URL: https://github.com/apache/superset/pull/14033#discussion_r610615585
##########
File path: superset-frontend/src/common/components/common.stories.tsx
##########
@@ -206,6 +209,76 @@ export const Switch = () => (
</>
);
+export const BadgeDefault = () => <Badge count={100} />;
+export const BadgeColored = () => <Badge color="blue" text="Blue" />;
+export const BadgeTextColored = () => (
+ <Badge textColor="yellow" color="red" text="yellow" />
+);
+export const BadgeSuccess = () => <Badge status="success" text="Success" />;
+export const BadgeError = () => <Badge status="error" text="Error" />;
+export const BadgeSmall = () => <Badge count={100} size="small" />;
+
+export const CardDefault = () => <Card />;
+export const CardPadded = () => <Card padded />;
Review comment:
```suggestion
```
```suggestion
export const BadgeDefault = () => <Badge count={100} />;
export const BadgeColored = () => <Badge color="blue" text="Blue" />;
export const BadgeTextColored = () => (
<Badge textColor="yellow" color="red" text="yellow" />
);
export const BadgeSuccess = () => <Badge status="success" text="Success" />;
export const BadgeError = () => <Badge status="error" text="Error" />;
export const BadgeSmall = () => <Badge count={100} size="small" />;
export const CardDefault = () => <Card />;
export const CardPadded = () => <Card padded />;
```
##########
File path: superset-frontend/src/common/components/Card.tsx
##########
@@ -0,0 +1,41 @@
+/**
+ * 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 { styled } from '@superset-ui/core';
+// eslint-disable-next-line no-restricted-imports
Review comment:
```suggestion
```
##########
File path: superset-frontend/src/common/components/Card.tsx
##########
@@ -0,0 +1,41 @@
+/**
+ * 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 { styled } from '@superset-ui/core';
+// eslint-disable-next-line no-restricted-imports
+import { Card as AntdCard } from 'antd';
+import { CardProps as AntdCardProps } from 'antd/lib/card';
Review comment:
```suggestion
import AntdCard, { CardProps as AntdCardProps } from 'antd/lib/card';
```
##########
File path: superset-frontend/src/common/components/common.stories.tsx
##########
@@ -206,6 +209,76 @@ export const Switch = () => (
</>
);
+export const BadgeDefault = () => <Badge count={100} />;
+export const BadgeColored = () => <Badge color="blue" text="Blue" />;
+export const BadgeTextColored = () => (
+ <Badge textColor="yellow" color="red" text="yellow" />
+);
+export const BadgeSuccess = () => <Badge status="success" text="Success" />;
+export const BadgeError = () => <Badge status="error" text="Error" />;
+export const BadgeSmall = () => <Badge count={100} size="small" />;
+
+export const CardDefault = () => <Card />;
+export const CardPadded = () => <Card padded />;
+
+export const CollapseDefault = () => (
+ <Collapse defaultActiveKey={['1']}>
+ <Collapse.Panel header="Hi! I am a header" key="1">
+ Hi! I am a sample content
+ </Collapse.Panel>
+ <Collapse.Panel header="Hi! I am another header" key="2">
+ Hi! I am another sample content
+ </Collapse.Panel>
+ </Collapse>
+);
+export const CollapseGhost = () => (
+ <Collapse defaultActiveKey={['1']} ghost>
+ <Collapse.Panel header="Hi! I am a header" key="1">
+ Hi! I am a sample content
+ </Collapse.Panel>
+ <Collapse.Panel header="Hi! I am another header" key="2">
+ Hi! I am another sample content
+ </Collapse.Panel>
+ </Collapse>
+);
+export const CollapseBold = () => (
+ <Collapse defaultActiveKey={['1']} bold>
+ <Collapse.Panel header="Hi! I am a header" key="1">
+ Hi! I am a sample content
+ </Collapse.Panel>
+ <Collapse.Panel header="Hi! I am another header" key="2">
+ Hi! I am another sample content
+ </Collapse.Panel>
+ </Collapse>
+);
+export const CollapseBigger = () => (
+ <Collapse defaultActiveKey={['1']} bigger>
+ <Collapse.Panel header="Hi! I am a header" key="1">
+ Hi! I am a sample content
+ </Collapse.Panel>
+ <Collapse.Panel header="Hi! I am another header" key="2">
+ Hi! I am another sample content
+ </Collapse.Panel>
+ </Collapse>
+);
+export const CollapseTextLight = () => (
+ <Collapse defaultActiveKey={['1']} light>
+ <Collapse.Panel
+ header="Hi! I am a header"
+ key="1"
+ style={{ background: '#BBB' }}
+ >
+ Hi! I am a sample content
+ </Collapse.Panel>
+ <Collapse.Panel
+ header="Hi! I am another header"
+ key="2"
+ style={{ background: '#BBB' }}
+ >
+ Hi! I am another sample content
+ </Collapse.Panel>
+ </Collapse>
+);
Review comment:
```suggestion
```
##########
File path: superset-frontend/src/common/components/common.stories.tsx
##########
@@ -20,13 +20,16 @@ import React, { useState, useRef, useCallback } from
'react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, select } from '@storybook/addon-knobs';
import Button from 'src/components/Button';
+import Badge from 'src/components/Badge';
Review comment:
```suggestion
```
##########
File path: superset-frontend/src/common/components/common.stories.tsx
##########
@@ -206,6 +209,76 @@ export const Switch = () => (
</>
);
+export const BadgeDefault = () => <Badge count={100} />;
+export const BadgeColored = () => <Badge color="blue" text="Blue" />;
+export const BadgeTextColored = () => (
+ <Badge textColor="yellow" color="red" text="yellow" />
+);
+export const BadgeSuccess = () => <Badge status="success" text="Success" />;
+export const BadgeError = () => <Badge status="error" text="Error" />;
+export const BadgeSmall = () => <Badge count={100} size="small" />;
+
+export const CardDefault = () => <Card />;
+export const CardPadded = () => <Card padded />;
Review comment:
These components already have stories in their folders.
##########
File path: superset-frontend/src/common/components/common.stories.tsx
##########
@@ -20,13 +20,16 @@ import React, { useState, useRef, useCallback } from
'react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, select } from '@storybook/addon-knobs';
import Button from 'src/components/Button';
+import Badge from 'src/components/Badge';
import Modal from './Modal';
import Tabs, { EditableTabs } from './Tabs';
import { Tooltip as AntdTooltip } from './Tooltip';
import { Switch as AntdSwitch } from './Switch';
import { Menu, Input, Divider } from '.';
import { Dropdown } from './Dropdown';
import InfoTooltip from './InfoTooltip';
+import Card from './Card';
+import Collapse from './Collapse';
Review comment:
```suggestion
```
##########
File path: superset-frontend/src/common/components/common.stories.tsx
##########
@@ -206,6 +209,76 @@ export const Switch = () => (
</>
);
+export const BadgeDefault = () => <Badge count={100} />;
+export const BadgeColored = () => <Badge color="blue" text="Blue" />;
+export const BadgeTextColored = () => (
+ <Badge textColor="yellow" color="red" text="yellow" />
+);
+export const BadgeSuccess = () => <Badge status="success" text="Success" />;
+export const BadgeError = () => <Badge status="error" text="Error" />;
+export const BadgeSmall = () => <Badge count={100} size="small" />;
+
+export const CardDefault = () => <Card />;
+export const CardPadded = () => <Card padded />;
+
+export const CollapseDefault = () => (
+ <Collapse defaultActiveKey={['1']}>
+ <Collapse.Panel header="Hi! I am a header" key="1">
+ Hi! I am a sample content
+ </Collapse.Panel>
+ <Collapse.Panel header="Hi! I am another header" key="2">
+ Hi! I am another sample content
+ </Collapse.Panel>
+ </Collapse>
+);
+export const CollapseGhost = () => (
+ <Collapse defaultActiveKey={['1']} ghost>
+ <Collapse.Panel header="Hi! I am a header" key="1">
+ Hi! I am a sample content
+ </Collapse.Panel>
+ <Collapse.Panel header="Hi! I am another header" key="2">
+ Hi! I am another sample content
+ </Collapse.Panel>
+ </Collapse>
+);
Review comment:
```suggestion
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
