diff options
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r-- | packages/website/ts/components/ui/container.tsx | 7 | ||||
-rw-r--r-- | packages/website/ts/components/ui/image.tsx | 6 | ||||
-rw-r--r-- | packages/website/ts/components/ui/text.tsx | 3 |
3 files changed, 13 insertions, 3 deletions
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index afc2c08a4..540661ea5 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -9,6 +9,7 @@ export interface ContainerProps { marginBottom?: StringOrNum; marginRight?: StringOrNum; marginLeft?: StringOrNum; + padding?: StringOrNum; paddingTop?: StringOrNum; paddingBottom?: StringOrNum; paddingRight?: StringOrNum; @@ -32,13 +33,15 @@ export interface ContainerProps { zIndex?: number; Tag?: ContainerTag; cursor?: string; + id?: string; + onClick?: (event: React.MouseEvent<HTMLElement>) => void; } export const Container: React.StatelessComponent<ContainerProps> = props => { - const { children, className, Tag, isHidden, ...style } = props; + const { children, className, Tag, isHidden, id, onClick, ...style } = props; const visibility = isHidden ? 'hidden' : undefined; return ( - <Tag style={{ ...style, visibility }} className={className}> + <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}> {children} </Tag> ); diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx index c4ff93531..c8d39352b 100644 --- a/packages/website/ts/components/ui/image.tsx +++ b/packages/website/ts/components/ui/image.tsx @@ -5,9 +5,11 @@ export interface ImageProps { className?: string; src?: string; fallbackSrc?: string; - height?: string | number; borderRadius?: string; width?: string | number; + height?: string | number; + maxWidth?: string | number; + maxHeight?: string | number; } interface ImageState { imageLoadFailed: boolean; @@ -29,6 +31,8 @@ export class Image extends React.Component<ImageProps, ImageState> { src={src} style={{ borderRadius: this.props.borderRadius, + maxWidth: this.props.maxWidth, + maxHeight: this.props.maxHeight, }} height={this.props.height} width={this.props.width} diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 72bee8c0a..734483564 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -10,6 +10,7 @@ export interface TextProps { Tag?: TextTag; fontSize?: string; fontFamily?: string; + fontStyle?: string; fontColor?: string; lineHeight?: string; minHeight?: string; @@ -29,6 +30,7 @@ const PlainText: React.StatelessComponent<TextProps> = ({ children, className, o export const Text = styled(PlainText)` font-family: ${props => props.fontFamily}; + font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; text-decoration-line: ${props => props.textDecorationLine}; @@ -46,6 +48,7 @@ export const Text = styled(PlainText)` Text.defaultProps = { fontFamily: 'Roboto', + fontStyle: 'normal', fontWeight: 400, fontColor: colors.black, fontSize: '15px', |