aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r--packages/website/ts/components/ui/container.tsx7
-rw-r--r--packages/website/ts/components/ui/image.tsx6
-rw-r--r--packages/website/ts/components/ui/text.tsx3
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',