Feature: Callout component (#535)

* callout component with story implemented

* text className import fixed

* callout color and background color fixed

* storywrapper import fixed

* fill property fixed

* background prop added

app/client/src/components/ads/Callout.tsx

@@ -1,10 +1,64 @@
-import { CommonComponentProps } from "./common";
+import React from "react";
-import { Variant } from "./Button";
+import { CommonComponentProps, Classes } from "./common";
+import Text, { TextType } from "./Text";
+import styled from "styled-components";
+
+export type Variant = "note" | "warning";
+export type Background = "dark" | "light";
 
 type CalloutProps = CommonComponentProps & {
-  variant?: Variant; //default info
+  variant?: Variant;
+  background?: Background;
+  text: string;
+  fill?: boolean;
 };
 
-export default function Callout(props: CalloutProps) {
+const CalloutContainer = styled.div<{
-  return null;
+  variant?: Variant;
+  fill?: boolean;
+  background?: Background;
+}>`
+  padding: ${props => props.theme.spaces[5]}px
+    ${props => props.theme.spaces[11] + 1}px;
+  background: ${props =>
+    props.variant && props.background
+      ? props.theme.colors.callout[props.variant][props.background].bgColor
+      : null};
+  height: 42px;
+
+  ${props =>
+    props.fill
+      ? `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  `
+      : null};
+
+  .${Classes.TEXT} {
+    color: ${props =>
+      props.variant && props.background
+        ? props.theme.colors.callout[props.variant][props.background].color
+        : null};
+  }
+`;
+
+Callout.defaultProps = {
+  fill: false,
+  variant: "note",
+  background: "dark",
+};
+
+function Callout(props: CalloutProps) {
+  return (
+    <CalloutContainer
+      variant={props.variant}
+      background={props.background}
+      fill={props.fill}
+    >
+      <Text type={TextType.P2}>{props.text}</Text>
+    </CalloutContainer>
+  );
 }
+
+export default Callout;

app/client/src/components/stories/Callout.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { withKnobs, select, text, boolean } from "@storybook/addon-knobs";
+import Callout from "components/ads/Callout";
+import { StoryWrapper } from "components/ads/common";
+
+export default {
+  title: "Callout",
+  component: Callout,
+  decorators: [withKnobs],
+};
+
+export const CalloutStory = () => (
+  <StoryWrapper>
+    <Callout
+      text={text("text", "Lorem ipsum dolar sit adicipling dolare")}
+      variant={select("variant", ["note", "warning"], "note")}
+      background={select("background", ["light", "dark"], "dark")}
+      fill={boolean("fill", false)}
+    />
+  </StoryWrapper>
+);

app/client/src/constants/DefaultTheme.tsx

@@ -572,6 +572,28 @@ export const theme: Theme = {
       darker: "#2B1A1D",
       darkest: "#462F32",
     },
+    callout: {
+      note: {
+        dark: {
+          color: "#EE5A1A",
+          bgColor: "#241C1B",
+        },
+        light: {
+          color: "#D44100",
+          bgColor: "#F8F3F0",
+        },
+      },
+      warning: {
+        light: {
+          color: "#DCAD00",
+          bgColor: "#FAF6E6",
+        },
+        dark: {
+          color: "#E0B30E",
+          bgColor: "#29251A",
+        },
+      },
+    },
     radio: {
       disabled: "#565656",
     },

app/client/src/mockResponses/PropertyPaneConfigResponse.tsx

@@ -114,7 +114,7 @@ const PropertyPaneConfigResponse: PropertyPaneConfigsResponse["data"] = {
             propertyName: "onDateSelected",
             label: "onDateSelected",
             controlType: "ACTION_SELECTOR",
-            isJSConvertible: true
+            isJSConvertible: true,
           },
         ],
       },