Make CTA customizable for a category of resource

Signed-off-by: Nikhil-Ladha <[email protected]>

src/components/Call-To-Actions/CTA_Bottom/cta_bottom_categories.js

@@ -0,0 +1,12 @@
+import img_source from "../../../assets/images/callout/callout.png";
+
+export const Categories = {
+  "Community" : {
+    "Image" : img_source,
+    "Image_Alt" : "Image alt text",
+    "Content" : "This callout is specific for community categorised blogs",
+    "Button_Text" : "Join Us",
+    "Link" : "https://slack.layer5.io",
+    "Link_external" : true
+  }
+};

src/components/Call-To-Actions/CTA_Bottom/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import image_src from "../../../assets/images/callout/callout.png";
 import styled from "styled-components";
 import Button from "../../../reusecore/Button";
+import { Categories } from "./cta_bottom_categories";
 
 const CTA_BottomWrapper = styled.div`
     display: flex;
@@ -58,12 +59,14 @@ const CTA_BottomWrapper = styled.div`
         width: 18rem;
         height: 18rem;
         margin: 1.5rem auto;
+        border-radius: 0.25rem;
 
         img {
             width: 18rem;
             height: 18rem;
             position: absolute;
             filter: brightness(0.5);
+            border-radius: 0.25rem;
         }
 
         .cta-content {
@@ -85,14 +88,26 @@ const CTA_BottomWrapper = styled.div`
 const defaultContent = "Join the Layer5 community and explore the world of service meshes!";
 const defaultURL = "https://slack.layer5.io";
 
-export const CTA_Bottom = ({ alt, button_text, content, image, url }) => {
+export const CTA_Bottom = ({ alt, button_text, category, content, external_link, image, url }) => {
   return (
     <CTA_BottomWrapper>
-      <div className="cta-content">
-        <p>{content ? content : defaultContent}</p>
-        <Button primary title={button_text ? button_text : "Join Us"} url={url ? url : defaultURL} />
-      </div>
-      <img src={image ? image : image_src} alt={alt ? alt : "Alt Text"} />
+      { category ? (
+        <>
+          <div className="cta-content">
+            <p>{Categories[category]["Content"]}</p>
+            <Button primary title={Categories[category]["Button_Text"]} url={Categories[category]["Link"]} external={Categories[category]["Link_external"]} />
+          </div>
+          <img src={Categories[category]["Image"]} alt={Categories[category]["Image_Alt"]} />
+        </>
+      ) : (
+        <>        
+          <div className="cta-content">
+            <p>{content ? content : defaultContent}</p>
+            <Button primary title={button_text ? button_text : "Join Us"} url={url ? url : defaultURL} external={external_link ? true : false} />
+          </div>
+          <img src={image ? image : image_src} alt={alt ? alt : "Alt Text"} />
+        </>
+      )}
     </CTA_BottomWrapper>
   );
 };

src/components/Call-To-Actions/CTA_FullWidth/cta_fullwidth_categories.js

@@ -0,0 +1,12 @@
+import img_source from "../../../assets/images/callout/callout.png";
+
+export const Categories = {
+  "Community" : {
+    "Image" : img_source,
+    "Image_Alt" : "Image alt text",
+    "Content" : "This callout is specific for community categorised blogs",
+    "Button_Text" : "Join Us",
+    "Link" : "https://slack.layer5.io",
+    "Link_external" : true
+  }
+};

src/components/Call-To-Actions/CTA_FullWidth/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import image_src from "../../../assets/images/callout/callout.png";
 import styled from "styled-components";
 import Button from "../../../reusecore/Button";
+import { Categories } from "./cta_fullwidth_categories";
 
 const CTA_FullWidthWrapper = styled.div`
     display: flex;
@@ -58,12 +59,14 @@ const CTA_FullWidthWrapper = styled.div`
         width: 18rem;
         height: 18rem;
         margin: 1.5rem auto;
+        border-radius: 0.25rem;
 
         img {
             width: 18rem;
             height: 18rem;
             position: absolute;
             filter: brightness(0.5);
+            border-radius: 0.25rem;
         }
 
         .cta-content {
@@ -84,14 +87,26 @@ const CTA_FullWidthWrapper = styled.div`
 const defaultContent = "Join the Layer5 community and explore the world of service meshes!";
 const defaultURL = "https://slack.layer5.io";
 
-export const CTA_FullWidth = ({ alt, button_text, content, image, url }) => {
+export const CTA_FullWidth = ({ alt, button_text, category, content, external_link, image, url }) => {
   return (
     <CTA_FullWidthWrapper>
-      <img src={image ? image : image_src} alt={alt ? alt : "Alt Text"} />
-      <div className="cta-content">
-        <p>{content ? content : defaultContent}</p>
-        <Button primary title={button_text ? button_text : "Join Us"} url={url ? url : defaultURL} external={true} />
-      </div>
+      { category ? (
+        <>
+          <img src={Categories[category]["Image"]} alt={Categories[category]["Image_Alt"]} />
+          <div className="cta-content">
+            <p>{Categories[category]["Content"]}</p>
+            <Button primary title={Categories[category]["Button_Text"]} url={Categories[category]["Link"]} external={Categories[category]["Link_external"]} />
+          </div>
+        </>
+      ) : (
+        <>        
+          <img src={image ? image : image_src} alt={alt ? alt : "Alt Text"} />
+          <div className="cta-content">
+            <p>{content ? content : defaultContent}</p>
+            <Button primary title={button_text ? button_text : "Join Us"} url={url ? url : defaultURL} external={external_link ? true : false} />
+          </div>
+        </>
+      )}
     </CTA_FullWidthWrapper>
   );
 };

src/components/Call-To-Actions/CTA_ImageOnly/cta_imageonly_categories.js

@@ -0,0 +1,9 @@
+import img_source from "../../../assets/images/callout/callout.png";
+
+export const Categories = {
+  "Community" : {
+    "Image" : img_source,
+    "Alt" : "Alt text",
+    "Link" : "https://slack.layer5.io"
+  }
+};

src/components/Call-To-Actions/CTA_ImageOnly/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Link } from "gatsby";
 import image_src from "../../../assets/images/callout/callout.png";
 import styled from "styled-components";
+import { Categories } from "./cta_imageonly_categories";
 
 const CTA_ImageOnlyWrapper = styled.div`
     float: right;
@@ -30,16 +31,26 @@ const CTA_ImageOnlyWrapper = styled.div`
 
 const defaultURL = "https://slack.layer5.io";
 
-export const CTA_ImageOnly = ({ alt, image, url, blend }) => {
+export const CTA_ImageOnly = ({ alt, category, image, url, blend }) => {
   return (
     <CTA_ImageOnlyWrapper>
-      <Link to={url ? url : defaultURL}>
-        <img
-          src={image ? image : image_src}
-          alt={alt ? alt : "Alt Text"}
-          style={{ opacity: blend ? "0.7" : "1" }}
-        />
-      </Link>
+      { category ? (
+        <Link to={Categories[category]["Link"]}>
+          <img
+            src={Categories[category]["Image"]}
+            alt={Categories[category]["Alt"]}
+            style={{ opacity: blend ? "0.7" : "1" }}
+          />
+        </Link>
+      ) : (
+        <Link to={url ? url : defaultURL}>
+          <img
+            src={image ? image : image_src}
+            alt={alt ? alt : "Alt Text"}
+            style={{ opacity: blend ? "0.7" : "1" }}
+          />
+        </Link>
+      )}
     </CTA_ImageOnlyWrapper>
   );
 };

src/components/Call-To-Actions/README.md

@@ -0,0 +1,55 @@
+## How to use the CTA (Call To Action)
+
+The CTA's are meant to be used in the MDX files under the layer5 repo.
+Any MDX file can have these CTA's, and you don't need to import them explicitly.
+Just calling the component like `<CTA_ImageOnly />` would do the trick.
+
+Below, find the details on the types of CTA and where/how to use them.
+
+### Types of CTA:
+
+1. CTA_ImageOnly - This CTA is an image callout, and is meant to be used in the first half of the content.
+2. CTA_FullWidth - This CTA is a full-width callout, and is meant to be used in the second half/middle of the content.
+3. CTA_Bottom - This CTA is also a full-width callout, but it is meant to be used at the bottom of the content, or better after the content
+    in the component rendering the content. Like `Blog-single.js`.
+
+### How to use the CTA:
+
+The CTA's take in some set of props (one can find in the respective CTA component definition), to customize the default 
+data hardcoded in the component. Each and every field in the component can be customized with the help of props, just the 
+respective prop needs to be passed while calling the component.
+For example:
+Using `<CTA_FullWidth />` will render the full-width CTA with the default data hardcoded in the component.
+But,
+```
+<CTA_FullWidth 
+  image={"./example.png"}
+  alt="Alternate text for Image"
+  content="This is an example callout"
+  button_text="Click Me"
+  url="https://example.com"     // Always provide the http/https header for the link if external link, or start with '/' in case of internal link
+  external_link={true}
+/>
+```
+will render the full-width CTA with the custom data passed as props to the component.
+
+The `image`, `alt`, `link`, `category` props are common for all the CTA's. Preferrably, keep the ImageOnly CTA as internal callout (a lot of conditioning would be needed for external links). Rest of the props can be checked in the component definition.
+
+The prop `category` can be used to categorize the CTA's. That is, instead of passing same custom data for each set of custom CTA's for a group, one can use
+the `category` prop to group them under a category and add that category under the respective `cta_imageonly_categories.js`, `cta_fullwidth_categories.js`, 
+`cta_bottom_categories.js` files for `CTA_ImageOnly`, `CTA_FullWidth` and `CTA_Bottom` respectively.
+
+### About the props:
+
+Below are the description of all the props available in the CTA's combined. Please check the props supported by the CTA's before using them.
+
+1. `image`: Used to pass custom image for the CTA
+2. `alt`: Used to pass alt text for the custom image passed to the CTA
+3. `content`: Used to pass custom content to the CTA
+4. `url`: Used to pass custom link to the CTA
+5. `external_link`: If the url passed above is an external link, pass `true` to it, else `false` (default)
+6. `button_text`: Used to pass custom text for the button in the CTA
+7. `category`: Used to categorize the CTA's for a group of blogs/news/resources.
+
+
+_Hopefully, this would ease up the process of adding a CTA to the MDX files. Happy meshing!_

src/sections/Blog/Blog-single/index.js

@@ -79,7 +79,9 @@ const BlogSingle = ({data}) => {
                 ))}
               </div>
             </div>
-            {/* <CTA_Bottom /> */}
+            {/* <CTA_Bottom
+              category={"Community"}
+            /> */}
           </div>
           <RelatedPosts
             postType="blogs"