From b1a2eef8fd35d03b0177b74a57d488d087c6090e Mon Sep 17 00:00:00 2001 From: Mateus Marquezini Date: Sun, 29 Mar 2020 12:11:07 -0300 Subject: [PATCH 1/4] #400 Adding Information Card component to Storybook --- .../core/src/layout/InfoCard/BottomLink.js | 23 ++++++++-- packages/core/src/layout/InfoCard/InfoCard.js | 23 ++++++---- .../src/layout/InfoCard/InfoCard.stories.tsx | 42 +++++++++++++++++++ packages/storybook/.storybook/main.js | 28 +++++++++---- 4 files changed, 96 insertions(+), 20 deletions(-) create mode 100644 packages/core/src/layout/InfoCard/InfoCard.stories.tsx diff --git a/packages/core/src/layout/InfoCard/BottomLink.js b/packages/core/src/layout/InfoCard/BottomLink.js index 786fe59607..c3d7f1efc0 100644 --- a/packages/core/src/layout/InfoCard/BottomLink.js +++ b/packages/core/src/layout/InfoCard/BottomLink.js @@ -17,9 +17,24 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Link } from '@material-ui/core'; -import { Divider, ListItemText } from '@material-ui/core'; +import { Divider, ListItemText, withStyles } from '@material-ui/core'; import { ListItem, ListItemIcon } from '@material-ui/core'; import ArrowIcon from '@material-ui/icons/ArrowForward'; +import grey from '@material-ui/core/colors/grey'; + +const LinkBottomText = withStyles({ + primary: { + fontWeight: '700', + color: grey[900], + }, +})(ListItemText); + +const ListItemBottom = withStyles({ + root: { + maxWidth: 'fit-content', + padding: '16px 16px 16px 20px', + }, +})(ListItem); export default class BottomLink extends Component { static propTypes = { @@ -34,12 +49,12 @@ export default class BottomLink extends Component {
- + + {title} - {title} - +
); diff --git a/packages/core/src/layout/InfoCard/InfoCard.js b/packages/core/src/layout/InfoCard/InfoCard.js index 6e771c8200..0b2abfb164 100644 --- a/packages/core/src/layout/InfoCard/InfoCard.js +++ b/packages/core/src/layout/InfoCard/InfoCard.js @@ -29,7 +29,13 @@ import BottomLink from './BottomLink'; import textContent from 'react-addons-text-content'; -const BoldHeader = withStyles({ title: { fontWeight: '700' } })(CardHeader); +const BoldHeader = withStyles({ + title: { fontWeight: '700' }, + subheader: { paddingTop: '2px' }, + root: { + padding: '16px 16px 16px 20px', + }, +})(CardHeader); const CardActionsTopRight = withStyles({ root: { display: 'inline-block', @@ -183,12 +189,15 @@ class InfoCard extends Component { > {title && ( - + <> + + + )} {actionsTopRight && ( {actionsTopRight} diff --git a/packages/core/src/layout/InfoCard/InfoCard.stories.tsx b/packages/core/src/layout/InfoCard/InfoCard.stories.tsx new file mode 100644 index 0000000000..945f233e16 --- /dev/null +++ b/packages/core/src/layout/InfoCard/InfoCard.stories.tsx @@ -0,0 +1,42 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed 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 InfoCard from '.'; + +const linkInfo = { title: 'Go to XYZ Location', link: '#' }; + +export default { + title: 'Information Card', + component: InfoCard, +}; + +export const Default = () => ( + +
+ +); + +export const Subhead = () => ( + +
+ +); + +export const LinkInFooter = () => ( + +
+ +); diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js index 7a51d41e0d..afed6723d8 100644 --- a/packages/storybook/.storybook/main.js +++ b/packages/storybook/.storybook/main.js @@ -5,17 +5,27 @@ module.exports = { ], addons: ['@storybook/addon-actions', '@storybook/addon-links'], webpackFinal: async config => { - config.module.rules.push({ - test: /\.(ts|tsx)$/, - use: [ - { - loader: require.resolve('ts-loader'), - options: { - transpileOnly: true, + config.module.rules.push( + { + test: /\.(ts|tsx)$/, + use: [ + { + loader: require.resolve('ts-loader'), + options: { + transpileOnly: true, + }, }, + ], + }, + { + test: /\.(js|jsx)$/, + loader: 'babel-loader', + options: { + presets: ['@babel/preset-react'], + plugins: ['@babel/plugin-proposal-class-properties'], }, - ], - }); + }, + ); config.resolve.extensions.push('.ts', '.tsx'); return config; }, From 3ce675857ed03ccffe173350ad4336124995e2e1 Mon Sep 17 00:00:00 2001 From: Mateus Marquezini Date: Sun, 29 Mar 2020 12:40:14 -0300 Subject: [PATCH 2/4] #400 fixed spread usage --- packages/core/src/layout/InfoCard/InfoCard.stories.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/core/src/layout/InfoCard/InfoCard.stories.tsx b/packages/core/src/layout/InfoCard/InfoCard.stories.tsx index 945f233e16..47edbde229 100644 --- a/packages/core/src/layout/InfoCard/InfoCard.stories.tsx +++ b/packages/core/src/layout/InfoCard/InfoCard.stories.tsx @@ -16,6 +16,7 @@ import React from 'react'; import InfoCard from '.'; +const cardContentStyle = { height: '200px' }; const linkInfo = { title: 'Go to XYZ Location', link: '#' }; export default { @@ -25,18 +26,18 @@ export default { export const Default = () => ( -
+
); export const Subhead = () => ( -
+
); export const LinkInFooter = () => ( - -
+ +
); From 575a775e453006608e872bbb6d960e75d59a4013 Mon Sep 17 00:00:00 2001 From: Mateus Marquezini Date: Mon, 30 Mar 2020 11:55:44 -0300 Subject: [PATCH 3/4] #400 code review changes --- .../core/src/layout/InfoCard/BottomLink.js | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/core/src/layout/InfoCard/BottomLink.js b/packages/core/src/layout/InfoCard/BottomLink.js index c3d7f1efc0..5dafa72978 100644 --- a/packages/core/src/layout/InfoCard/BottomLink.js +++ b/packages/core/src/layout/InfoCard/BottomLink.js @@ -21,22 +21,19 @@ import { Divider, ListItemText, withStyles } from '@material-ui/core'; import { ListItem, ListItemIcon } from '@material-ui/core'; import ArrowIcon from '@material-ui/icons/ArrowForward'; import grey from '@material-ui/core/colors/grey'; +import Box from '@material-ui/core/Box'; -const LinkBottomText = withStyles({ - primary: { - fontWeight: '700', - color: grey[900], - }, -})(ListItemText); - -const ListItemBottom = withStyles({ +const styles = theme => ({ root: { maxWidth: 'fit-content', - padding: '16px 16px 16px 20px', + padding: theme.spacing(2, 2, 2, 2.5) }, -})(ListItem); - -export default class BottomLink extends Component { + boxTitle: { + margin: 0, + color: grey[900] + } +}) +class BottomLink extends Component { static propTypes = { link: PropTypes.string, title: PropTypes.string, @@ -44,19 +41,23 @@ export default class BottomLink extends Component { }; render() { - const { link, title, onClick } = this.props; + const { link, title, onClick, classes } = this.props; return (
- - {title} + + + {title} + - +
); } } + +export default withStyles(styles)(BottomLink); \ No newline at end of file From ea4b85849ccf9fa5a398e419152873382e0f8d16 Mon Sep 17 00:00:00 2001 From: Mateus Marquezini Date: Mon, 30 Mar 2020 15:09:38 -0300 Subject: [PATCH 4/4] #400 code review changes --- packages/core/src/layout/InfoCard/InfoCard.js | 13 +++++++++---- .../home-page/src/components/HomePage/HomePage.tsx | 2 +- .../src/components/WelcomePage/WelcomePage.tsx | 2 +- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/core/src/layout/InfoCard/InfoCard.js b/packages/core/src/layout/InfoCard/InfoCard.js index 0b2abfb164..1005a016af 100644 --- a/packages/core/src/layout/InfoCard/InfoCard.js +++ b/packages/core/src/layout/InfoCard/InfoCard.js @@ -29,13 +29,17 @@ import BottomLink from './BottomLink'; import textContent from 'react-addons-text-content'; +const styles = theme => ({ + header: { + padding: theme.spacing(2, 2, 2, 2.5) + } +}); + const BoldHeader = withStyles({ title: { fontWeight: '700' }, subheader: { paddingTop: '2px' }, - root: { - padding: '16px 16px 16px 20px', - }, })(CardHeader); + const CardActionsTopRight = withStyles({ root: { display: 'inline-block', @@ -191,6 +195,7 @@ class InfoCard extends Component { {title && ( <> = () => { Things you own - + diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx index 69a892a95e..f0dfc53418 100644 --- a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx +++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx @@ -53,7 +53,7 @@ const WelcomePage: FC<{}> = () => { - + You now have a running instance of Backstage!