This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new a52ff13 chore: Moves Card to the components folder (#14139)
a52ff13 is described below
commit a52ff13b5dd697924dd4f3781c0dadd2972a22fb
Author: Michael S. Molina <[email protected]>
AuthorDate: Thu Apr 29 15:51:41 2021 -0300
chore: Moves Card to the components folder (#14139)
---
superset-frontend/.storybook/preview.jsx | 5 +++
.../src/SqlLab/components/QueryTable.jsx | 2 +-
.../src/SqlLab/components/TableElement.jsx | 2 +-
superset-frontend/src/common/components/index.tsx | 2 +-
.../Card.tsx => components/Card/Card.stories.tsx} | 51 +++++++++++++++-------
.../Card.tsx => components/Card/index.tsx} | 27 ++++++------
.../src/datasource/DatasourceEditor.jsx | 2 +-
7 files changed, 58 insertions(+), 33 deletions(-)
diff --git a/superset-frontend/.storybook/preview.jsx
b/superset-frontend/.storybook/preview.jsx
index 94fcfd7..13bdcc2 100644
--- a/superset-frontend/.storybook/preview.jsx
+++ b/superset-frontend/.storybook/preview.jsx
@@ -58,4 +58,9 @@ addParameters({
{ name: 'Medium', value: '32px', default: true },
{ name: 'Large', value: '64px' },
],
+ options: {
+ storySort: {
+ method: 'alphabetical',
+ },
+ },
});
diff --git a/superset-frontend/src/SqlLab/components/QueryTable.jsx
b/superset-frontend/src/SqlLab/components/QueryTable.jsx
index 1749c88..993aa0e 100644
--- a/superset-frontend/src/SqlLab/components/QueryTable.jsx
+++ b/superset-frontend/src/SqlLab/components/QueryTable.jsx
@@ -19,7 +19,7 @@
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
-import Card from 'src/common/components/Card';
+import Card from 'src/components/Card';
import ProgressBar from 'src/components/ProgressBar';
import Label from 'src/components/Label';
import { t } from '@superset-ui/core';
diff --git a/superset-frontend/src/SqlLab/components/TableElement.jsx
b/superset-frontend/src/SqlLab/components/TableElement.jsx
index 7280573..8574bb9 100644
--- a/superset-frontend/src/SqlLab/components/TableElement.jsx
+++ b/superset-frontend/src/SqlLab/components/TableElement.jsx
@@ -18,8 +18,8 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import Card from 'src/common/components/Card';
import Collapse from 'src/components/Collapse';
+import Card from 'src/components/Card';
import ButtonGroup from 'src/components/ButtonGroup';
import shortid from 'shortid';
import { t, styled } from '@superset-ui/core';
diff --git a/superset-frontend/src/common/components/index.tsx
b/superset-frontend/src/common/components/index.tsx
index ff7abe5..2750951 100644
--- a/superset-frontend/src/common/components/index.tsx
+++ b/superset-frontend/src/common/components/index.tsx
@@ -61,7 +61,7 @@ export { default as List, ListItemProps } from
'antd/lib/list';
export { default as Collapse } from 'src/components/Collapse';
export { default as Badge } from 'src/components/Badge';
-export { default as Card } from './Card';
+export { default as Card } from 'src/components/Card';
export { default as Progress } from 'src/components/ProgressBar';
export const MenuItem = styled(AntdMenu.Item)`
diff --git a/superset-frontend/src/common/components/Card.tsx
b/superset-frontend/src/components/Card/Card.stories.tsx
similarity index 59%
copy from superset-frontend/src/common/components/Card.tsx
copy to superset-frontend/src/components/Card/Card.stories.tsx
index 285af24..8589289 100644
--- a/superset-frontend/src/common/components/Card.tsx
+++ b/superset-frontend/src/components/Card/Card.stories.tsx
@@ -17,23 +17,42 @@
* under the License.
*/
import React from 'react';
-import { styled } from '@superset-ui/core';
-import AntdCard, { CardProps as AntdCardProps } from 'antd/lib/card';
+import Card, { CardProps } from '.';
-interface CardProps extends AntdCardProps {
- padded?: boolean;
-}
+export default {
+ title: 'Card',
+ component: Card,
+};
-const Card = styled(({ padded, ...props }: CardProps) => (
- <AntdCard {...props} />
-))`
- background-color: ${({ theme }) => theme.colors.grayscale.light4};
- border-radius: ${({ theme }) => theme.borderRadius}px;
+export const InteractiveCard = (args: CardProps) => <Card {...args} />;
- .ant-card-body {
- padding: ${({ padded, theme }) =>
- padded ? theme.gridUnit * 4 : theme.gridUnit}px;
- }
-`;
+InteractiveCard.args = {
+ padded: true,
+ title: 'Card title',
+ children: 'Card content',
+ bordered: true,
+ loading: false,
+ hoverable: false,
+};
-export default Card;
+InteractiveCard.argTypes = {
+ onClick: {
+ table: {
+ disable: true,
+ },
+ action: 'onClick',
+ },
+ theme: {
+ table: {
+ disable: true,
+ },
+ },
+};
+
+InteractiveCard.story = {
+ parameters: {
+ knobs: {
+ disable: true,
+ },
+ },
+};
diff --git a/superset-frontend/src/common/components/Card.tsx
b/superset-frontend/src/components/Card/index.tsx
similarity index 69%
rename from superset-frontend/src/common/components/Card.tsx
rename to superset-frontend/src/components/Card/index.tsx
index 285af24..40937d2 100644
--- a/superset-frontend/src/common/components/Card.tsx
+++ b/superset-frontend/src/components/Card/index.tsx
@@ -17,23 +17,24 @@
* under the License.
*/
import React from 'react';
-import { styled } from '@superset-ui/core';
+import { SupersetTheme } from '@superset-ui/core';
import AntdCard, { CardProps as AntdCardProps } from 'antd/lib/card';
-interface CardProps extends AntdCardProps {
+export interface CardProps extends AntdCardProps {
padded?: boolean;
}
-const Card = styled(({ padded, ...props }: CardProps) => (
- <AntdCard {...props} />
-))`
- background-color: ${({ theme }) => theme.colors.grayscale.light4};
- border-radius: ${({ theme }) => theme.borderRadius}px;
-
- .ant-card-body {
- padding: ${({ padded, theme }) =>
- padded ? theme.gridUnit * 4 : theme.gridUnit}px;
- }
-`;
+const Card = ({ padded, ...props }: CardProps) => (
+ <AntdCard
+ {...props}
+ css={(theme: SupersetTheme) => ({
+ backgroundColor: theme.colors.grayscale.light4,
+ borderRadius: theme.borderRadius,
+ '.ant-card-body': {
+ padding: padded ? theme.gridUnit * 4 : theme.gridUnit,
+ },
+ })}
+ />
+);
export default Card;
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx
b/superset-frontend/src/datasource/DatasourceEditor.jsx
index b308bf0..b8e6953 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -19,8 +19,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Col } from 'react-bootstrap';
-import Card from 'src/common/components/Card';
import { Radio } from 'src/components/Radio';
+import Card from 'src/components/Card';
import Alert from 'src/components/Alert';
import Badge from 'src/components/Badge';
import shortid from 'shortid';
