mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-09-11 10:46:25 +03:00
console: migrate AlertBox component to typescript (#4721)
This commit is contained in:
parent
1b96d800c5
commit
33d99b994d
@ -1,25 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
flexbox,
|
||||
color,
|
||||
border,
|
||||
typography,
|
||||
layout,
|
||||
space,
|
||||
shadow,
|
||||
} from 'styled-system';
|
||||
|
||||
export const StyledAlertBox = styled.div`
|
||||
${flexbox};
|
||||
${color}
|
||||
${border}
|
||||
${typography}
|
||||
${layout}
|
||||
${space}
|
||||
${shadow}
|
||||
|
||||
/* Alert type text */
|
||||
span {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
`;
|
45
console/src/components/UIKit/atoms/AlertBox/AlertBox.ts
Normal file
45
console/src/components/UIKit/atoms/AlertBox/AlertBox.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
flexbox,
|
||||
color,
|
||||
border,
|
||||
typography,
|
||||
layout,
|
||||
space,
|
||||
shadow,
|
||||
FlexboxProps,
|
||||
ColorProps,
|
||||
BorderProps,
|
||||
TypographyProps,
|
||||
LayoutProps,
|
||||
SpaceProps,
|
||||
ShadowProps,
|
||||
} from 'styled-system';
|
||||
|
||||
import { BoxProps, Box } from '../Box';
|
||||
|
||||
interface StyledAlertBoxOwnProps
|
||||
extends FlexboxProps,
|
||||
ColorProps,
|
||||
BorderProps,
|
||||
TypographyProps,
|
||||
LayoutProps,
|
||||
SpaceProps,
|
||||
ShadowProps {}
|
||||
|
||||
export interface StyledAlertBoxProps extends StyledAlertBoxOwnProps, BoxProps {}
|
||||
|
||||
export const StyledAlertBox = styled(Box)<StyledAlertBoxProps>`
|
||||
${flexbox};
|
||||
${color}
|
||||
${border}
|
||||
${typography}
|
||||
${layout}
|
||||
${space}
|
||||
${shadow}
|
||||
|
||||
/* Alert type text */
|
||||
span {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
`;
|
@ -1,13 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
import { theme } from '../../theme';
|
||||
import { Icon } from '../Icon';
|
||||
import { StyledAlertBox } from './AlertBox';
|
||||
import { theme, Theme } from '../../theme';
|
||||
import { Icon, IconProps } from '../Icon';
|
||||
import { StyledAlertBox, StyledAlertBoxProps } from './AlertBox';
|
||||
import { Text } from '../Typography';
|
||||
|
||||
const alertBoxWidth = 866;
|
||||
|
||||
export const AlertBox = props => {
|
||||
export interface AlertBoxProps
|
||||
extends IconProps,
|
||||
Omit<StyledAlertBoxProps, 'size'> {
|
||||
type: keyof Theme['alertBox'];
|
||||
}
|
||||
|
||||
export const AlertBox: React.FC<AlertBoxProps> = props => {
|
||||
const { children, type } = props;
|
||||
|
||||
const backgroundColorValue = theme.alertBox[type]
|
@ -112,8 +112,8 @@ const iconReferenceMap = {
|
||||
};
|
||||
|
||||
export type IconProps = {
|
||||
pointer: boolean;
|
||||
size: number;
|
||||
pointer?: boolean;
|
||||
size?: number;
|
||||
type: keyof Theme['icon'];
|
||||
};
|
||||
|
||||
|
@ -16,14 +16,17 @@ Heading.defaultProps = {
|
||||
* fontSize: 'explain'
|
||||
* fontWeight: 'bold'
|
||||
*/
|
||||
|
||||
export type TextProps = {
|
||||
type: keyof Theme['lineHeights'];
|
||||
fontWeight: keyof Theme['fontWeights'];
|
||||
fontSize: keyof Theme['fontSizes'];
|
||||
mb: keyof Theme['space'];
|
||||
mt: keyof Theme['space'];
|
||||
mr: keyof Theme['space'];
|
||||
ml: keyof Theme['space'];
|
||||
type?: keyof Theme['lineHeights'];
|
||||
fontWeight?: keyof Theme['fontWeights'];
|
||||
fontSize?: keyof Theme['fontSizes'];
|
||||
mb?: keyof Theme['space'];
|
||||
mt?: keyof Theme['space'];
|
||||
mr?: keyof Theme['space'];
|
||||
ml?: keyof Theme['space'];
|
||||
pl?: keyof Theme['space'];
|
||||
as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
|
||||
};
|
||||
|
||||
export const Text: React.FC<TextProps> = props => {
|
||||
@ -64,6 +67,9 @@ Text.defaultProps = {
|
||||
mt: 'zero',
|
||||
mr: 'zero',
|
||||
ml: 'zero',
|
||||
pl: 'zero',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 'p',
|
||||
};
|
||||
|
||||
type TextLinkProps = {
|
||||
|
Loading…
Reference in New Issue
Block a user