fix : callout widget, add : icon widget

app/client/src/constants/WidgetConstants.tsx

@@ -4,7 +4,8 @@ export type WidgetType =
 	| "CONTAINER_WIDGET"
 	| "LIST_WIDGET"
 	| "INPUT_TEXT_WIDGET"
-	| "CALLOUT_WIDGET";
+	| "CALLOUT_WIDGET"
+	| "ICON_WIDGET";
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";
 export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION";
 export type CSSUnit =

app/client/src/editorComponents/CalloutComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { IComponentProps } from "./BaseComponent";
+import { Callout, Code, H5, Intent, Switch } from "@blueprintjs/core";
 import styled from "../constants/DefaultTheme";
 
 const CalloutContainer = styled("span")<ICalloutComponentProps>`
@@ -17,10 +18,12 @@ class CalloutComponent extends React.Component<ICalloutComponentProps> {
   render() {
     return (
       <CalloutContainer {...this.props}>
-        <div className="bp3-callout">
-          <h4 className="bp3-heading">{this.props.heading}</h4>
+        <Callout
+          {...this.props}
+          title={this.props.title ? this.props.title : undefined}
+        >
           {this.props.description}
-        </div>
+        </Callout>
       </CalloutContainer>
     );
   }
@@ -28,8 +31,9 @@ class CalloutComponent extends React.Component<ICalloutComponentProps> {
 
 export interface ICalloutComponentProps extends IComponentProps {
   id?: string;
-  heading?: string;
+  title?: string;
   description?: string;
+  intent?: Intent;
   ellipsize?: boolean;
 }
 

app/client/src/editorComponents/IconComponent.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { IComponentProps } from "./BaseComponent";
+import { Icon, Intent } from "@blueprintjs/core";
+import { IconName } from "@blueprintjs/icons";
+import styled from "../constants/DefaultTheme";
+
+const IconContainer = styled("span")<IIconComponentProps>`
+  color: ${props => props.theme.primaryColor};
+  position: ${props => props.style.positionType};
+  left: ${props => {
+    return props.style.xPosition + props.style.xPositionUnit;
+  }};
+  top: ${props => {
+    return props.style.yPosition + props.style.yPositionUnit;
+  }};
+`;
+
+class IconComponent extends React.Component<IIconComponentProps> {
+  render() {
+    return (
+      <IconContainer {...this.props}>
+        <Icon icon={this.props.icon} iconSize={this.props.iconSize} />
+      </IconContainer>
+    );
+  }
+}
+
+export interface IIconComponentProps extends IComponentProps {
+  iconSize?: number;
+  icon?: IconName;
+  intent?: Intent;
+  ellipsize?: boolean;
+}
+
+export default IconComponent;

app/client/src/mockResponses/CanvasResponse.ts

@@ -42,9 +42,22 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       bottomRow: 5,
       rightColumn: 5,
       id: "sample_id",
-      heading: "Visually important content",
+      title: "Visually important content",
       description:
-        "The component is a simple wrapper around the CSS API that provides props for modifiers and optional title element. Any additional HTML props will be spread to the rendered <div> element."
+        "The component is a simple wrapper around the CSS API that provides props for modifiers and optional title element. Any additional HTML props will be spread to the rendered <div> element.",
+      icon: "",
+      intent: "primary"
+    },
+    {
+      widgetId: "1",
+      widgetType: "ICON_WIDGET",
+      topRow: 4,
+      leftColumn: 4,
+      bottomRow: 5,
+      rightColumn: 5,
+      icon: "globe",
+      iconSize: "20",
+      intent: "primary"
     }
   ],
   topRow: 0,

app/client/src/utils/WidgetRegistry.tsx

@@ -7,6 +7,7 @@ import InputTextWidget, {
   IInputTextWidgetProps
 } from "../widgets/InputTextWidget";
 import CalloutWidget, { ICalloutWidgetProps } from "../widgets/CalloutWidget";
+import IconWidget, { IIconWidgetProps } from "../widgets/IconWidget";
 import WidgetFactory from "./WidgetFactory";
 import React from "react";
 
@@ -37,6 +38,12 @@ class WidgetBuilderRegistry {
         return <CalloutWidget {...widgetData} />;
       }
     });
+
+    WidgetFactory.registerWidgetBuilder("ICON_WIDGET", {
+      buildWidget(widgetData: IIconWidgetProps): JSX.Element {
+        return <IconWidget {...widgetData} />;
+      }
+    });
   }
 }
 

app/client/src/widgets/CalloutWidget.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { Callout, Code, H5, Intent, Switch } from "@blueprintjs/core";
 import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
 import CalloutComponent from "../editorComponents/CalloutComponent";
 import _ from "lodash";
@@ -22,7 +23,7 @@ class CalloutWidget extends BaseWidget<ICalloutWidgetProps, IWidgetState> {
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         id={this.props.id}
-        heading={this.props.heading}
+        title={this.props.title}
         description={this.props.description}
       />
     );
@@ -35,8 +36,9 @@ class CalloutWidget extends BaseWidget<ICalloutWidgetProps, IWidgetState> {
 
 export interface ICalloutWidgetProps extends IWidgetProps {
   id?: string;
-  heading?: string;
+  title?: string;
   description?: string;
+  intent?: Intent;
   ellipsize?: boolean;
 }
 

app/client/src/widgets/IconWidget.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import { Icon, Intent } from "@blueprintjs/core";
+import { IconName } from "@blueprintjs/icons";
+import IconComponent from "../editorComponents/IconComponent";
+import _ from "lodash";
+
+class IconWidget extends BaseWidget<IIconWidgetProps, IWidgetState> {
+  constructor(widgetProps: IIconWidgetProps) {
+    super(widgetProps);
+  }
+
+  getWidgetView() {
+    return (
+      <IconComponent
+        style={{
+          positionType: "ABSOLUTE",
+          yPosition: this.props.topRow * this.props.parentRowSpace,
+          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
+          xPositionUnit: CSSUnits.PIXEL,
+          yPositionUnit: CSSUnits.PIXEL
+        }}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        icon={this.props.icon}
+        iconSize={this.props.iconSize}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "ICON_WIDGET";
+  }
+}
+
+export interface IIconWidgetProps extends IWidgetProps {
+  icon?: IconName;
+  iconSize?: number;
+  ellipsize?: boolean;
+  intent?: Intent;
+}
+
+export default IconWidget;