From 4054ccf5dfdd5fadf6b1d3c149928682a91066b0 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Wed, 14 Apr 2021 11:14:23 -0300 Subject: [PATCH] chore: Moves Card to the components folder --- superset-frontend/.storybook/preview.jsx | 5 ++ .../src/SqlLab/components/QueryTable.jsx | 2 +- .../src/SqlLab/components/TableElement.jsx | 2 +- .../src/common/components/index.tsx | 2 +- .../src/components/Card/Card.stories.tsx | 58 +++++++++++++++++++ .../Card.tsx => components/Card/index.tsx} | 27 ++++----- .../src/datasource/DatasourceEditor.jsx | 2 +- 7 files changed, 81 insertions(+), 17 deletions(-) create mode 100644 superset-frontend/src/components/Card/Card.stories.tsx rename superset-frontend/src/{common/components/Card.tsx => components/Card/index.tsx} (69%) diff --git a/superset-frontend/.storybook/preview.jsx b/superset-frontend/.storybook/preview.jsx index 94fcfd71858a..13bdcc2a3f3d 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 1749c880537a..993aa0e5e3a6 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 a2dd2a096886..13e740b79419 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 ff7abe5d7d7f..2750951287a5 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/components/Card/Card.stories.tsx b/superset-frontend/src/components/Card/Card.stories.tsx new file mode 100644 index 000000000000..85892897140a --- /dev/null +++ b/superset-frontend/src/components/Card/Card.stories.tsx @@ -0,0 +1,58 @@ +/** + * 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 Card, { CardProps } from '.'; + +export default { + title: 'Card', + component: Card, +}; + +export const InteractiveCard = (args: CardProps) => ; + +InteractiveCard.args = { + padded: true, + title: 'Card title', + children: 'Card content', + bordered: true, + loading: false, + hoverable: false, +}; + +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 285af246b7e9..40937d251f57 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) => ( - -))` - 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) => ( + ({ + 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 a29eac3dcbe1..30c33773430c 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';