Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/website/upgrade-allowance-toggles-to-locks-and-checks

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>
     );

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}

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',