@blinkpage/composer-tools 1.0.0

package/editor-components/download/download8/download8.module.scss

@@ -0,0 +1,316 @@
+@use "../../../../composer-tools//composer-base-components//base//utitilities/viewports.module.scss" as *;
+
+.container {
+  padding: 80px 0px !important;
+
+  &.with-image {
+    padding: 0 !important;
+  }
+
+
+
+  .page {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: auto;
+
+    .image-child {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      position: absolute;
+
+      .background-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background-color: var(--composer-overlay-color);
+      }
+    }
+
+    .max-content {
+      display: flex;
+      position: relative;
+      height: auto;
+      min-height: 250px;
+
+      .left-content {
+        &.center {
+          align-items: center;
+          text-align: center;
+        }
+
+        width: 100%;
+        justify-content: center;
+        bottom: 0;
+        opacity: 1;
+        transition: opacity 0.5s,
+        height 0.5s;
+        padding: var(--composer-gap-md) var(--composer-gap-xl);
+        overflow: auto;
+        z-index: 3;
+        min-height: 100%;
+        height: auto;
+        position: relative;
+
+        .title,
+        .description,
+        .subtitle {
+          content: "";
+          text-align: center;
+        }
+
+        .subtitle {
+          transform: translateX(0);
+          text-align: center;
+          align-self: center;
+
+
+          &::before {
+            display: none;
+          }
+        }
+
+      }
+
+      &.with-image {
+        min-height: 350px;
+
+        .left-content {
+
+          .title,
+          .description {
+            color: white;
+            background: transparent;
+          }
+
+          .subtitle {
+            background: transparent;
+            color: white;
+          }
+        }
+      }
+
+    }
+
+
+
+    .right-content {
+      width: fit-content;
+      opacity: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transform: translateX(100%);
+      right: 0;
+      transition: all 0.5s;
+      overflow: auto;
+      height: auto;
+      width: 50vw;
+      min-width: 50vw;
+      position: absolute;
+      padding: var(--composer-gap-xl) 0;
+
+      .card {
+        width: 100%;
+        height: auto;
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        border-top-left-radius: var(--composer-border-radius-md);
+        border-bottom-left-radius: var(--composer-border-radius-md);
+        background-color: color-mix(in srgb, var(--composer-html-background), var(--composer-font-color-primary) 5%);
+
+        .card-up {
+          width: 100%;
+          height: auto;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          margin: 0px;
+          padding-top: var(--composer-gap-sm);
+
+          .cardTitle {
+            color: var(--composer-font-color-primary);
+            padding: var(--composer-gap-md);
+            padding-top: 0;
+            border-bottom: 1px solid rgb(var(--composer-font-color-primary-rgb), 0.5);
+          }
+
+          .card-subtitle {
+            margin-left: var(--composer-gap-md);
+          }
+
+          .list-group {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: var(--composer-gap-xs);
+            padding: var(--composer-gap-md);
+
+            .list-element {
+              display: flex;
+              align-items: center;
+              gap: var(--composer-gap-sm);
+              margin: 0px;
+
+              .icon {
+                color: var(--composer-font-color-primary);
+                width: 12px;
+                height: 12px;
+                flex-shrink: 0;
+              }
+
+              .text {
+                color: var(--composer-font-color-primary);
+              }
+            }
+          }
+        }
+
+        .card-down {
+          width: 100%;
+          height: auto;
+          display: flex;
+          align-items: center;
+          border-top: 1px solid rgb(var(--composer-font-color-primary-rgb), 0.5);
+
+          .buttons-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--composer-gap-sm);
+            margin: var(--composer-gap-sm);
+
+            .image-container {
+              width: 170px;
+              height: var(--composer-gap-xl);
+              border-radius: var(--composer-border-radius-sm);
+
+              .image {
+                width: 100%;
+                height: 100%;
+                cursor: pointer;
+                object-fit: cover;
+                border-radius: var(--composer-border-radius-sm);
+              }
+            }
+
+            .button {
+              .icon {
+                content: "";
+              }
+
+              .text {
+                content: "";
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .card-up .card-subtitle.center-badge {
+      margin: 0px 0px var(--composer-gap-sm) !important;
+    }
+
+    &:hover {
+
+      .left-content,
+      .left-content-no-image {
+        opacity: 0;
+
+        .title {
+          opacity: 0;
+        }
+
+        .description {
+          opacity: 0;
+        }
+
+        .subtitle {
+          opacity: 0;
+        }
+      }
+
+      .right-content {
+        transform: translateX(0);
+        opacity: 1;
+        z-index: 4;
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-tablet-width}) {
+  .container .page {
+    .max-content {
+      .left-content {
+        padding: var(--composer-gap-md) var(--composer-gap-lg);
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-phone-width}) {
+  .container {
+    .page {
+      .max-content {
+        .left-content {
+          padding: var(--composer-gap-md) !important;
+        }
+      }
+
+      .right-content {
+        width: 20vw;
+        min-width: 20vw;
+
+        .card {
+          width: 20vw;
+          height: auto;
+          min-height: 100%;
+
+          .card-up {
+            .list-group {
+              .list-element {
+                .icon {
+                  width: var(--composer-gap-sm);
+                  height: var(--composer-gap-sm);
+                }
+
+                .text {
+                  content: "";
+                }
+              }
+            }
+          }
+
+          .card-down {
+            .buttons-container {
+              align-items: baseline;
+
+              .image-container {
+                width: 120px;
+                height: 35px;
+
+                .image {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/editor-components/download/download8/download8.tsx

@@ -0,0 +1,248 @@
+import styles from "./download8.module.scss";
+import ComposerLink from "../../../../custom-hooks/composer-base-components/Link/link";
+import { BaseDownload } from "../../EditorComponent";
+import { Base } from "../../../composer-base-components/base/base";
+
+import { INPUTS } from "composer-tools/custom-hooks/input-templates";
+
+
+
+class Download8 extends BaseDownload {
+  constructor(props?: any) {
+    super(props, styles);
+
+    this.addProp({
+      type: "media",
+      key: "image",
+      displayer: "Background Media",
+      additionalParams: {
+        availableTypes: ["image", "video"],
+      },
+      value: {
+        type: "image",
+        url: "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/6436af8368c3c2002cd2fa67?alt=media&timestamp=1719564433794",
+      },
+    });
+
+    this.addProp({
+      type: "boolean",
+      key: "overlay",
+      displayer: "Overlay",
+      value: true,
+    });
+
+    this.addProp({
+      type: "string",
+      key: "subtitle",
+      displayer: "Subtitle",
+      value: "",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "title",
+      displayer: "Title",
+      value: "If you want to download it",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "description",
+      displayer: "Description",
+      value: "By offering a clear call-to-action, businesses and developers can increase the chances that users will download and use their product.",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "cardSubtitle",
+      displayer: "Card Subtitle",
+      value: "",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "cardTitle",
+      displayer: "Card Title",
+      value: "Download now by clicking the button",
+    });
+
+    this.addProp({
+      type: "array",
+      key: "list",
+      displayer: "List",
+      value: [
+        {
+          type: "object",
+          key: "listItem",
+          displayer: "Displayer",
+          value: [
+            {
+              type: "string",
+              key: "itemText",
+              displayer: "Item Text",
+              value: "App Store",
+            },
+            {
+              type: "media",
+              key: "itemIcon",
+              displayer: "Item Icon",
+              additionalParams: {
+                availableTypes: ["icon"],
+              },
+              value: {
+                type: "icon",
+                name: "FaApple",
+              },
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "listItem",
+          displayer: "Displayer",
+          value: [
+            {
+              type: "string",
+              key: "itemText",
+              displayer: "Item Text",
+              value: "Google Play",
+            },
+            {
+              type: "media",
+              key: "itemIcon",
+              displayer: "Item Icon",
+              additionalParams: {
+                availableTypes: ["icon"],
+              },
+              value: {
+                type: "icon",
+                name: "FaGooglePlay",
+              },
+            },
+          ],
+        },
+      ],
+    });
+
+    this.addProp({
+      type: "array",
+      key: "buttons",
+      displayer: "Buttons",
+      value: [
+        INPUTS.BUTTON("button", "Button", "Download", "", "FaAndroid", "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/673f51e4506a40002c2cf6eb?alt=media&timestamp=1732790517206", "Primary"),
+        INPUTS.BUTTON("button", "Button", "Download", "", "FaApple", "https://storage.googleapis.com/download/storage/v1/b/hq-blinkpage-staging-bbc49/o/68e79205ffd791002b7e7482?alt=media", "Primary"),
+      ],
+      additionalParams: {
+        maxElementCount: 4,
+      },
+    });
+  }
+
+  static getName(): string {
+    return "Download 8";
+  }
+
+  render() {
+    const imageExist = this.getPropValue("image");
+    const title = this.getPropValue("title");
+    const description = this.getPropValue("description");
+    const cardTitle = this.getPropValue("cardTitle");
+    const overlay = this.getPropValue("overlay");
+    const subtitle = this.getPropValue("subtitle");
+    const cardSubtitle = this.getPropValue("cardSubtitle");
+    const titleExist = this.castToString(title);
+    const subtitleExist = this.castToString(subtitle);
+    const descriptionExist = this.castToString(description);
+    const cardTitleExist = this.castToString(cardTitle);
+    const cardSubtitleExist = this.castToString(cardSubtitle);
+    const listExist = this.castToObject<any[]>("list").length > 0;
+
+    const rightContent = document.getElementById("right-content");
+    const leftContent = document.getElementById("left-content");
+    const alignment = Base.getContentAlignment();
+
+    if (rightContent && leftContent) {
+      const rightHeight = rightContent.clientHeight;
+      leftContent.setAttribute("style", `min-height: ${rightHeight}px`);
+    }
+
+    return (
+      <Base.Container className={`${this.decorateCSS("container")} ${imageExist && this.decorateCSS("with-image")}`}>
+        <div className={this.decorateCSS("page")}>
+          {imageExist && (
+            <div className={this.decorateCSS("image-child")}>
+              <div className={overlay && this.decorateCSS("overlay")}></div>
+              <Base.Media value={this.getPropValue("image")} className={this.decorateCSS("background-image")} />
+            </div>
+          )}
+          <Base.MaxContent className={`${this.decorateCSS("max-content")} ${imageExist && this.decorateCSS("with-image")}`}>
+            {(subtitleExist || titleExist || descriptionExist) && (
+              <Base.VerticalContent id={"left-content"} className={`${this.decorateCSS("left-content")} ${imageExist && this.decorateCSS("center")}`}>
+                {subtitleExist && <Base.SectionSubTitle className={this.decorateCSS("subtitle")}>{this.getPropValue("subtitle")}</Base.SectionSubTitle>}
+                {titleExist && <Base.SectionTitle className={this.decorateCSS("title")}>{this.getPropValue("title")}</Base.SectionTitle>}
+                {descriptionExist && <Base.SectionDescription className={this.decorateCSS("description")}>{this.getPropValue("description")}</Base.SectionDescription>}
+              </Base.VerticalContent>
+            )}
+          </Base.MaxContent>
+          <div id={"right-content"} className={this.decorateCSS("right-content")}>
+            <Base.VerticalContent className={this.decorateCSS("card")}>
+              <Base.VerticalContent className={this.decorateCSS("card-up")}>
+                {cardSubtitleExist && <Base.SectionSubTitle className={`${this.decorateCSS("card-subtitle")} ${alignment === "center" && this.decorateCSS("center-badge")}`}>{this.getPropValue("cardSubtitle")}</Base.SectionSubTitle>}
+                {cardTitleExist && <Base.H3 className={this.decorateCSS("cardTitle")}>{this.getPropValue("cardTitle")}</Base.H3>}
+                {listExist && (
+                  <Base.VerticalContent className={this.decorateCSS("list-group")}>
+                    {this.castToObject<any[]>("list").map((item: any, index: number) => {
+                      const itemTextExist = this.castToString(item.itemText);
+                      const hasItemExist = itemTextExist || item.itemIcon;
+                      return (
+                        hasItemExist && (
+                          <Base.Row key={`list-item-${index}`} className={this.decorateCSS("list-element")}>
+                            {item.itemIcon && (
+                              <Base.Media
+                                value={item.itemIcon}
+                                className={this.decorateCSS("icon")}
+                              />
+                            )}
+                            {itemTextExist && <Base.P className={this.decorateCSS("text")}>{item.itemText}</Base.P>}
+                          </Base.Row>
+                        )
+                      );
+                    })}
+                  </Base.VerticalContent>
+                )}
+              </Base.VerticalContent>
+              {this.castToObject<INPUTS.CastedButton[]>("buttons").length > 0 && (
+                <Base.Row className={this.decorateCSS("card-down")}>
+                  <div className={this.decorateCSS("buttons-container")}>
+                    {this.castToObject<INPUTS.CastedButton[]>("buttons").map((item: INPUTS.CastedButton, index: number) => {
+                      const buttonTextExist = this.castToString(item.text);
+                      const iconExist = item.icon && (item.icon as any).name;
+                      const imageExist = item.image && (item.image as any).url;
+                      const buttonExist = buttonTextExist || iconExist || imageExist;
+                      return buttonExist && (
+                        <ComposerLink key={`dw-8-btn-${index}`} path={item.url}>
+                          {imageExist ? (
+                            <div className={this.decorateCSS("image-container")}>
+                              <Base.Media value={item.image as any} className={this.decorateCSS("image")} />
+                            </div>
+                          ) : (
+                            <Base.Button buttonType={item.type} className={this.decorateCSS("button")}>
+                              {iconExist && <Base.Media value={item.icon as any} className={this.decorateCSS("icon")} />}
+                              {buttonTextExist && <Base.P className={this.decorateCSS("text")}>{item.text}</Base.P>}
+                            </Base.Button>
+                          )}
+                        </ComposerLink>
+                      );
+                    })}
+                  </div>
+                </Base.Row>
+              )}
+            </Base.VerticalContent>
+          </div>
+        </div>
+      </Base.Container>
+    );
+  }
+}
+
+export default Download8;