mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
36fa54a288
* image and card component * change height of getting started panel * progress * setup basic step * advanced steps * step forward and backward * do checks * fix button size * minor styling on butttons * add correct links * save tutorial click in localstorage * types and gradients * fix gradients * use spacing variable * lots of responsiveness * add links to help * Getting started work * redo according to split panel design * minor touch ups * new background images * split up docs card to different hrefs * welcome bar touch ups * hide icon on small screens * transparent false on welcome banner * fix urls * source tag in welcome urls * move images to panel dir, removed unused images * Nicer loading message * make the cards look nicer on wide screens * append utm tag on render instead * replace width with margin * new background image for light * remove target on a element * removing buttonselect, add tag to href * more polishing Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com> Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import React, { FC } from 'react';
|
|
import { Card } from '../types';
|
|
import { Icon, stylesFactory, useTheme } from '@grafana/ui';
|
|
import { GrafanaTheme } from '@grafana/data';
|
|
import { css } from 'emotion';
|
|
import { cardContent, cardStyle, iconStyle } from './sharedStyles';
|
|
|
|
interface Props {
|
|
card: Card;
|
|
}
|
|
|
|
export const DocsCard: FC<Props> = ({ card }) => {
|
|
const theme = useTheme();
|
|
const styles = getStyles(theme, card.done);
|
|
|
|
return (
|
|
<div className={styles.card}>
|
|
<div className={cardContent}>
|
|
<a href={`${card.href}?utm_source=grafana_gettingstarted`}>
|
|
<div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
|
|
<h4 className={styles.title}>{card.title}</h4>
|
|
<div>
|
|
<Icon className={iconStyle(theme, card.done)} name={card.icon} size="xxl" />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<a href={`${card.learnHref}?utm_source=grafana_gettingstarted`} className={styles.url} target="_blank">
|
|
Learn how in the docs <Icon name="external-link-alt" />
|
|
</a>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => {
|
|
return {
|
|
card: css`
|
|
${cardStyle(theme, complete)}
|
|
|
|
min-width: 230px;
|
|
|
|
@media only screen and (max-width: ${theme.breakpoints.md}) {
|
|
min-width: 192px;
|
|
}
|
|
`,
|
|
heading: css`
|
|
text-transform: uppercase;
|
|
color: ${complete ? theme.palette.blue95 : '#FFB357'};
|
|
margin-bottom: ${theme.spacing.md};
|
|
`,
|
|
title: css`
|
|
margin-bottom: 48px;
|
|
`,
|
|
url: css`
|
|
border-top: 1px solid ${theme.colors.border1};
|
|
position: absolute;
|
|
bottom: 0;
|
|
padding: 8px 16px;
|
|
width: 100%;
|
|
`,
|
|
};
|
|
});
|