add : core component : callout widget

app/client/src/constants/WidgetConstants.tsx

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

app/client/src/editorComponents/CalloutComponent.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { IComponentProps } from "./BaseComponent";
+import styled from "../constants/DefaultTheme";
+
+const CalloutContainer = styled("span")<ICalloutComponentProps>`
+  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 CalloutComponent extends React.Component<ICalloutComponentProps> {
+  render() {
+    return (
+      <CalloutContainer {...this.props}>
+        <div className="bp3-callout">
+          <h4 className="bp3-heading">{this.props.heading}</h4>
+          {this.props.description}
+        </div>
+      </CalloutContainer>
+    );
+  }
+}
+
+export interface ICalloutComponentProps extends IComponentProps {
+  id?: string;
+  heading?: string;
+  description?: string;
+  ellipsize?: boolean;
+}
+
+export default CalloutComponent;

app/client/src/mockResponses/CanvasResponse.ts

@@ -33,6 +33,18 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       minLength: "4",
       maxLength: "12",
       size: "30"
+    },
+    {
+      widgetId: "1",
+      widgetType: "CALLOUT_WIDGET",
+      topRow: 3,
+      leftColumn: 1,
+      bottomRow: 5,
+      rightColumn: 5,
+      id: "sample_id",
+      heading: "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."
     }
   ],
   topRow: 0,

app/client/src/utils/WidgetRegistry.tsx

@@ -6,6 +6,7 @@ import TextWidget, { ITextWidgetProps } from "../widgets/TextWidget";
 import InputTextWidget, {
   IInputTextWidgetProps
 } from "../widgets/InputTextWidget";
+import CalloutWidget, { ICalloutWidgetProps } from "../widgets/CalloutWidget";
 import WidgetFactory from "./WidgetFactory";
 import React from "react";
 
@@ -30,6 +31,12 @@ class WidgetBuilderRegistry {
         return <InputTextWidget {...widgetData} />;
       }
     });
+
+    WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", {
+      buildWidget(widgetData: ICalloutWidgetProps): JSX.Element {
+        return <CalloutWidget {...widgetData} />;
+      }
+    });
   }
 }
 

app/client/src/widgets/CalloutWidget.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import CalloutComponent from "../editorComponents/CalloutComponent";
+import _ from "lodash";
+
+class CalloutWidget extends BaseWidget<ICalloutWidgetProps, IWidgetState> {
+  constructor(widgetProps: ICalloutWidgetProps) {
+    super(widgetProps);
+  }
+
+  getWidgetView() {
+    return (
+      <CalloutComponent
+        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}
+        id={this.props.id}
+        heading={this.props.heading}
+        description={this.props.description}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "CALLOUT_WIDGET";
+  }
+}
+
+export interface ICalloutWidgetProps extends IWidgetProps {
+  id?: string;
+  heading?: string;
+  description?: string;
+  ellipsize?: boolean;
+}
+
+export default CalloutWidget;

app/client/src/widgets/InputTextWidget.tsx

@@ -33,7 +33,7 @@ class InputTextWidget extends BaseWidget<IInputTextWidgetProps, IWidgetState> {
   }
 
   getWidgetType(): WidgetType {
-    return "TEXT_WIDGET";
+    return "INPUT_TEXT_WIDGET";
   }
 }