@blinkpage/composer-tools 1.0.0

package/editor-components/list/list10/list10.module.scss

@@ -0,0 +1,293 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss"
+  as *;
+
+.container {
+  .max-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--composer-gap-lg);
+    
+    .card-titles {
+      .subtitle {
+        content: "";
+      }
+    }
+    
+    .up-page {
+      display: flex;
+      align-items: center;
+      gap: var(--composer-gap-lg);
+
+      &.center {
+        flex-direction: column;
+        gap: 0;
+        .title,
+        .subtitle {
+          text-align: center;
+          margin-bottom: var(--composer-gap-md);
+        }
+      }
+
+      &.monochrome {
+        .subtitle,
+        .title {
+          color: var(--composer-font-color-primary);
+        }
+      }
+
+      .title {
+        margin-top: 0px;
+        width: 100%;
+        color: var(--composer-primary-color);
+        text-align: left;
+      }
+
+      .subtitle {
+        margin-top: 0px;
+        width: 100%;
+        color: var(--composer-primary-color);
+        text-align: right;
+      }
+    }
+
+    .cards-box {
+      width: 100%;
+      .card {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 100%;
+        height: 100%;
+        transform: translate(0, 0);
+        opacity: 1;
+        padding: var(--composer-gap-lg);
+        border-radius: var(--composer-border-radius-md);
+        background: color-mix(
+          in srgb,
+          var(--composer-html-background),
+          var(--composer-font-color-primary) 5%
+        );
+
+        &[data-animation=""]:hover {
+          .description,
+          .badge,
+          .bottom-text {
+            color: white;
+          }
+
+          &::before {
+            opacity: 1;
+          }
+        }
+
+        &[data-animation~="animate1"] {
+          &:hover {
+            .description,
+            .badge,
+            .bottom-text {
+              color: white;
+            }
+            .image-div {
+              mask-size: 300% 300%;
+              mask-position: 50% 50%;
+            }
+
+            &::before {
+              opacity: 1;
+            }
+          }
+
+          &::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            background: linear-gradient(
+              355deg,
+              var(--composer-primary-color),
+              rgba(255, 160, 94, 0) 87.33%
+            );
+            z-index: -1;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.1s ease;
+          }
+        }
+
+        &[data-animation~="animate2"] {
+          transform-style: preserve-3d;
+          perspective: 1000px;
+          transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+
+          &:hover {
+            transform: perspective(1000px) rotateX(8deg);
+            box-shadow: var(--box-shadow-active);
+
+            .description,
+            .badge,
+            .bottom-text {
+              color: var(--composer-font-color-secondary);
+            }
+
+            .badge {
+              transform: translateZ(var(--composer-gap-md));
+            }
+
+            .description {
+              transform: translateZ(var(--composer-gap-md));
+            }
+
+            .bottom-text {
+              transform: translateZ(var(--composer-gap-md));
+            }
+
+            &::before {
+              opacity: 0.9;
+            }
+          }
+
+          &::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: var(--composer-primary-color);
+            opacity: 0;
+            transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+          }
+
+          .badge,
+          .description,
+          .bottom-text {
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+            transform-style: preserve-3d;
+          }
+
+          .image-div {
+            transform: translateZ(var(--composer-gap-md));
+            z-index: 2;
+          }
+        }
+
+        &[data-animation="animate3"]:hover {
+          .badge,
+          .description,
+          .bottom-text {
+            animation: breathing 2s ease-out infinite normal;
+          }
+        }
+
+        &[data-animation="animate4"]:hover {
+          transform: translateY(-10px);
+          transition: transform 0.5s;
+        }
+
+        .badge {
+          color: var(--composer-font-color-primary);
+          height: 1em;
+          * {
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        .image-div {
+          position: absolute;
+          inset: 0;
+          z-index: -2;
+          mask-size: 350px 350px;
+          mask-repeat: no-repeat;
+          mask-image: radial-gradient(circle, black 49%, rgba(0, 0, 0, 0) 50%);
+          mask-position: 50% 20px;
+          transition: all 0.3s ease;
+          overflow: hidden;
+          border-radius: 8px;
+          background: transparent;
+
+          .image {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+          }
+        }
+        .gap {
+          padding-top: 280px;
+        }
+        .description {
+          margin-top: 0px;
+          position: relative;
+          z-index: 1;
+          transition: all 0.3s ease;
+          color: var(--composer-font-color-primary);
+        }
+        .bottom-text {
+          transition: all 0.3s ease;
+          margin: auto 0px 0px;
+          color: var(--composer-font-color-primary);
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-tablet-width}) {
+  .container {
+    .max-content {
+      .up-page {
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: var(--composer-gap-xs);
+        .title,
+        .subtitle {
+          text-align: center;
+        }
+      }
+      .cards-box {
+        margin-top: var(--composer-gap-md);
+        .card {
+          width: 100% !important;
+        }
+      }
+    }
+  }
+}
+
+@keyframes pulseScale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes breathing {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  25% {
+    -webkit-transform: scale(1.05);
+    -ms-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  60% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}

package/editor-components/list/list10/list10.tsx

@@ -0,0 +1,240 @@
+import * as React from "react";
+import { BaseContent, BaseList } from "../../EditorComponent";
+import styles from "./list10.module.scss";
+import ComposerLink from "../../../../custom-hooks/composer-base-components/Link/link";
+import { Base } from "../../../composer-base-components/base/base";
+
+type Card = {
+    image: string;
+    badge: React.JSX.Element;
+    description: React.JSX.Element;
+    bottomText: React.JSX.Element;
+    url: string;
+};
+
+class List10 extends BaseList {
+    constructor(props?: any) {
+        super(props, styles);
+        this.addProp({
+            type: "string",
+            key: "subtitle",
+            displayer: "Subtitle",
+            value: "Latest updates",
+        });
+        this.addProp({
+            type: "string",
+            key: "title",
+            displayer: "Title",
+            value: "The Latest Updates News & Blog",
+        });
+
+        this.addProp({
+            type: "array",
+            key: "cards",
+            displayer: "Cards",
+            value: [
+                {
+                    type: "object",
+                    key: "card",
+                    displayer: "",
+                    value: [
+                        {
+                            type: "image",
+                            key: "image",
+                            displayer: "Image",
+                            value:
+                                "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/66b34f2703b007002cc7f55e?alt=media",
+                        },
+                        {
+                            type: "string",
+                            key: "badge",
+                            displayer: "Badge",
+                            value: "All News",
+                        },
+                        {
+                            type: "string",
+                            key: "description",
+                            displayer: "Description",
+                            value: "Antenna Promises New era For Satellite Communication",
+                        },
+                        {
+                            type: "string",
+                            key: "bottomText",
+                            displayer: "Bottom Text",
+                            value: "March 18,2022",
+                        },
+                        {
+                            type: "page",
+                            key: "url",
+                            displayer: "Card Url",
+                            value: "",
+                        },
+                    ],
+                },
+                {
+                    type: "object",
+                    key: "card",
+                    displayer: "",
+                    value: [
+                        {
+                            type: "image",
+                            key: "image",
+                            displayer: "Image",
+                            value:
+                                "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/66b34f6f03b007002cc7f56e?alt=media",
+                        },
+                        {
+                            type: "string",
+                            key: "badge",
+                            displayer: "Badge",
+                            value: "All News",
+                        },
+                        {
+                            type: "string",
+                            key: "description",
+                            displayer: "Description",
+                            value: "Antenna Promises New era For Satellite Communication",
+                        },
+                        {
+                            type: "string",
+                            key: "bottomText",
+                            displayer: "Bottom Text",
+                            value: "March 18,2022",
+                        },
+                        {
+                            type: "page",
+                            key: "url",
+                            displayer: "Card Url",
+                            value: "",
+                        },
+                    ],
+                },
+                {
+                    type: "object",
+                    key: "card",
+                    displayer: "",
+                    value: [
+                        {
+                            type: "image",
+                            key: "image",
+                            displayer: "Image",
+                            value:
+                                "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/66b351ed03b007002cc7f6d9?alt=media",
+                        },
+                        {
+                            type: "string",
+                            key: "badge",
+                            displayer: "Badge",
+                            value: "All News",
+                        },
+                        {
+                            type: "string",
+                            key: "description",
+                            displayer: "Description",
+                            value: "Antenna Promises New era For Satellite Communication",
+                        },
+                        {
+                            type: "string",
+                            key: "bottomText",
+                            displayer: "Bottom Text",
+                            value: "March 18,2022",
+                        },
+                        {
+                            type: "page",
+                            key: "url",
+                            displayer: "Card Url",
+                            value: "",
+                        },
+                    ],
+                },
+            ],
+        });
+        this.addProp({
+            type: "number",
+            key: "itemCount",
+            displayer: "Item count in a row",
+            value: 3,
+            max: 4,
+        });
+        this.addProp({
+            type: "multiSelect",
+            key: "hoverAnimation",
+            displayer: "Hover Animation Style",
+            value: ["animate1"],
+            additionalParams: {
+                selectItems: ["animate1", "animate2", "animate3", "animate4"]
+            }
+        });
+    }
+    static getName(): string {
+        return "List 10";
+    }
+
+    render() {
+        const cards = this.castToObject<Card[]>("cards");
+        const title = this.getPropValue("title");
+        const subtitle = this.getPropValue("subtitle");
+
+        return (
+            <Base.Container className={this.decorateCSS("container")}>
+                <Base.MaxContent className={this.decorateCSS("max-content")}>
+                    <Base.VerticalContent className={this.decorateCSS("card-titles")}>
+                        {this.castToString(subtitle) && (
+                            <Base.SectionSubTitle className={this.decorateCSS("subtitle")}>
+                                {subtitle}
+                            </Base.SectionSubTitle>
+                        )}
+                        {this.castToString(title) && (
+                            <Base.SectionTitle className={this.decorateCSS("title")}>
+                                {title}
+                            </Base.SectionTitle>
+                        )}
+                    </Base.VerticalContent>
+                    <Base.ListGrid
+                        gridCount={{ pc: this.getPropValue("itemCount"), tablet: 1 }}
+                        className={this.decorateCSS("cards-box")}
+                    >
+                        {cards.map((card: Card, index: number) => {
+                            const descExist = this.castToString(card.description);
+                            const bottomTextExist = this.castToString(card.bottomText);
+
+                            return (
+                                <ComposerLink key={index} path={card.url}>
+                                    <div
+                                        className={this.decorateCSS("card")}
+                                        data-animation={this.getPropValue("hoverAnimation").join(" ")}
+                                    >
+                                        <Base.P className={this.decorateCSS("badge")}>
+                                            {card.badge}
+                                        </Base.P>
+                                        <div className={this.decorateCSS("image-div")}>
+                                            {card.image && (
+                                                <img
+                                                    className={this.decorateCSS("image")}
+                                                    src={card.image}
+                                                    alt={card.image}
+                                                />
+                                            )}
+                                        </div>
+                                        <div className={styles["gap"]}></div>
+                                        {descExist && (
+                                            <Base.H3 className={this.decorateCSS("description")}>
+                                                {card.description}
+                                            </Base.H3>
+                                        )}
+                                        {bottomTextExist && (
+                                            <Base.P className={this.decorateCSS("bottom-text")}>
+                                                {card.bottomText}
+                                            </Base.P>
+                                        )}
+                                    </div>
+                                </ComposerLink>
+                            );
+                        })}
+                    </Base.ListGrid>
+                </Base.MaxContent>
+            </Base.Container>
+        );
+    }
+}
+export default List10;

package/editor-components/list/list11/list11.module.scss

@@ -0,0 +1,164 @@
+@use "../../../../composer-tools//composer-base-components//base//utitilities/viewports.module.scss"
+  as *;
+
+.container {
+  .max-content {
+    display: flex;
+    flex-direction: column;
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--composer-gap-md);
+      .vertical-content {
+        .card-titles {
+          .subtitle {
+            content: "";
+          }
+        }
+        
+        .title-container {
+          display: flex;
+          flex-direction: column;
+          .title {
+            margin: 0;
+          }
+        }
+        .subTitle-container {
+          .subTitle {
+            color: var(--composer-tertiary-color);
+          }
+        }
+      }
+
+      .grid {
+        .card {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          background-color: color-mix(
+            in srgb,
+            var(--composer-html-background),
+            var(--composer-font-color-primary) 5%
+          );
+          border-radius: var(--composer-border-radius-md);
+          padding: var(--composer-gap-md);
+          transition: all var(--composer-transition-duration-slow) ease-in-out;
+          .card-items {
+            display: flex;
+            flex-direction: column;
+            gap: var(--composer-gap-md);
+            .card-image-container {
+              transition: transform 0.5s ease-in-out;
+              border-radius: var(--composer-border-radius-md);
+              overflow: hidden;
+              .card-image {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                object-position: center;
+                transition: transform 0.5s ease-in-out;
+              }
+            }
+            .card-content{
+              display: flex;
+              flex-direction: column;
+              gap: var(--composer-gap-md);
+              
+              .card-title {
+              color: var(--composer-font-color-primary);
+            }
+            .card-description {
+              color: var(--composer-tertiary-color);
+            }
+            .navigate-container {
+              display: flex;
+              align-items: center;
+              color: var(--composer-primary-color);
+              overflow: hidden;
+              width: 100%;
+              transition: transform var(--composer-transition-duration-normal) ease-in-out, opacity var(--composer-transition-duration-normal) ease-in-out;
+              .navigate-to {
+                margin-right: calc(var(--composer-gap-xs) / 2);
+                white-space: nowrap;
+              }
+              .navigate-icon {
+                min-width: var(--composer-gap-sm);
+                min-height: var(--composer-gap-sm);
+              }
+            }
+            }
+          }
+          &[data-animation~="animate1"]:hover {
+            transform: translateY(calc(-1 * var(--composer-gap-sm)));
+          }
+
+          &[data-animation~="animate2"]:hover {
+            .navigate-container {
+              animation: slideOutFade 1.5s linear, shake 0.5s linear 2s 1;
+            }
+          }
+
+          &[data-animation~="animate2"]:not(:hover) {
+            .navigate-container {
+              animation: resetShake 0.3s linear;
+              transform: translateX(0%);
+              opacity: 1;
+            }
+          }
+
+          &[data-animation~="animate3"]:hover {
+            .card-image-container {
+              overflow: hidden;
+              .card-image{
+                transform: scale(1.05);
+              }
+            }
+          }
+
+          &[data-animation~="animate4"]:hover {
+            box-shadow: var(--composer-box-shadow);
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes slideOutFade {
+  0% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  90% {
+    transform: translateX(70%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0%);
+    opacity: 0;
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(var(--composer-gap-xs));
+  }
+  50% {
+    transform: translateX(calc(-1 * var(--composer-gap-xs)));
+  }
+  75% {
+    transform: translateX(var(--composer-gap-xs));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes resetShake {
+  100% {
+    transform: translateX(0);
+  }
+}