@hellobetterdigitalnz/selwynui 0.0.1-183 → 0.0.1-184

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellobetterdigitalnz/selwynui",
-  "version": "0.0.1-183",
+  "version": "0.0.1-184",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderTool.stories.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore
-import React from "react"
+import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react-vite";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 import BrandBuilderTool from "./BrandBuilderTool";
@@ -9,6 +9,7 @@ import BrandBuilderToolMain from "./BrandBuilderToolMain/BrandBuilderToolMain";
 import BrandBuilderToolTemplateSelector from "./BrandBuilderToolTemplate/BrandBuilderToolTemplateSelector";
 import BrandBuilderToolPreview from "./BrandbuilderToolPreview/BrandBuilderToolPreview";
 import BrandBuilderToolTemplateItem from "./BrandBuilderToolTemplate/BrandBuilderToolTemplateItem";
+import BrandBuilderToolWordmark from "./BrandBuilderToolWordmark/BrandBuilderToolWordmark"
 
 const meta: Meta = {
   title: "DataDisplay / BrandBuilderTool",
@@ -23,8 +24,11 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+
 const BrandBuilderToolTemplate: Story = {
+  
   render: () => {
+    const [businessName, setBusinessName] = useState("");
     return (
       <>
         <ElementHolder paddingTop="sm" paddingBottom="sm" pdBillar="live" level="light">
@@ -39,6 +43,7 @@ const BrandBuilderToolTemplate: Story = {
                   <BrandBuilderToolTemplateItem/>
                 </BrandBuilderToolTemplateSelector>
                 <BrandBuilderToolPreview/>
+                <BrandBuilderToolWordmark brand="participate" onType={(e:any) => setBusinessName(e.target.value)} businessName={businessName}/>
               </BrandBuilderToolMain>
             </BrandBuilderToolWrapper>
           </BrandBuilderTool>

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolWordmark/BrandBuilderToolWordmark.tsx

@@ -0,0 +1,88 @@
+
+import { TextField } from '../../../Form';
+import styles from '../brandBuilder.module.scss'
+import BrandBuilderToolWordmarkProps from "./BrandBuilderToolWordmarkProps";
+
+const BrandBuilderToolWordmark = (props : BrandBuilderToolWordmarkProps) =>{
+
+  const {brand, businessName, onType} = props;
+  
+
+  return <div className={styles.WordmarkSelector}>
+    <div className={styles.selectorsWrapper}>
+      <div className={styles.wordmark}>
+        <div className={`${styles.title}`}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
+          <rect width="50" height="50" rx="25" fill="currentColor"/>
+          <path d="M31.9638 12.296V27.416H36.7518V32.132H31.9638V38H25.9878V32.132H13.3158V27.38L25.2678 12.296H31.9638ZM25.9878 17.84L18.5718 27.416H25.9878V17.84Z" fill="#EFEAE7"/>
+          </svg>
+          <h5>Select your Wordmark</h5>
+        </div>
+      </div>
+      <p>Start typing to create your own Selwyn wordmark.</p>
+    </div>
+    <div className={styles.inputBusiness}>
+      <TextField value={businessName} onChange={onType}/>
+    </div>
+    <div className={styles.logoWrapper}>
+      <div className={styles.logo}>
+        {(() => {
+          if (brand === "live") {
+            return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+            <path d="M61.3528 61.2702C61.3528 93.2858 87.28 119.25 119.25 119.25V61.2702H61.3528Z" fill="black"/>
+            <path d="M119.25 57.9987C119.25 25.9831 93.3228 0.018911 61.3528 0.018911V57.9987H119.25Z" fill="black"/>
+            <path d="M57.8971 119.231C25.9272 119.231 0 93.2669 0 61.2513H57.8971V119.231Z" fill="black"/>
+            <path d="M0.0191358 0C31.9891 0 57.9163 25.9642 57.9163 57.9798H0.0191358V0Z" fill="black"/>
+            </svg>
+          } 
+          if (brand === "taste") {
+            return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+            <path d="M61.678 119.25C93.8369 119.25 119.898 93.2965 119.898 61.2707L61.678 61.2707L61.678 119.25Z" fill="black"/>
+            <path d="M61.678 57.9982C93.8369 57.9982 119.898 32.0447 119.898 0.0189667L61.678 0.0189616L61.678 57.9982Z" fill="black"/>
+            <path d="M58.2208 119.231C26.0618 119.231 0.000330335 93.2775 0.000333134 61.2518L58.2208 61.2518L58.2208 119.231Z" fill="black"/>
+            <path d="M58.2208 57.9793C26.0618 57.9793 0.000335689 32.0258 0.000338489 4.77696e-06L58.2208 9.86676e-06L58.2208 57.9793Z" fill="black"/>
+            </svg>
+          }
+          if (brand === "business") {
+            return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+            <path d="M119.671 61.2805C87.582 61.2805 61.5616 87.2381 61.5616 119.25H119.671V61.2805Z" fill="black"/>
+            <path d="M119.671 0.0378473C87.582 0.0378473 61.5616 25.9955 61.5616 58.0074H119.671V0.0378473Z" fill="black"/>
+            <path d="M0 119.212C0 87.2003 26.0205 61.2426 58.1098 61.2426V119.212H0Z" fill="black"/>
+            <path d="M0 57.9695C0 25.9576 26.0205 0 58.1098 0V57.9695H0Z" fill="black"/>
+            </svg>
+          }
+          if (brand === "participate") {
+            return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+            <path d="M0 58.01C32.1003 58.01 58.1332 32.0323 58.1332 0H0V58.01Z" fill="black"/>
+            <path d="M0 61.24C32.1003 61.24 58.1332 87.2177 58.1332 119.25H0V61.24Z" fill="black"/>
+            <path d="M119.794 58.01C87.6937 58.01 61.6608 32.0323 61.6608 0H119.794V58.01Z" fill="black"/>
+            <path d="M119.794 61.24C87.6937 61.24 61.6608 87.2177 61.6608 119.25H119.794V61.24Z" fill="black"/>
+            </svg>
+          }
+          if (brand === "visit") {
+            return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+              <path d="M58.2132 5.43071e-08C26.0583 2.43097e-08 -2.4212e-08 25.9535 -5.40888e-08 57.9793L58.2132 57.9793L58.2132 5.43071e-08Z" fill="black"/>
+              <path d="M58.2132 61.2518C26.0583 61.2518 2.40646e-07 87.2053 2.10769e-07 119.231L58.2132 119.231L58.2132 61.2518Z" fill="black"/>
+              <path d="M61.6699 0.0189383C93.8249 0.0189383 119.883 25.9725 119.883 57.9982L61.6699 57.9982L61.6699 0.0189383Z" fill="black"/>
+              <path d="M61.6699 61.2707C93.8249 61.2707 119.883 87.2242 119.883 119.25L61.6699 119.25L61.6699 61.2707Z" fill="black"/>
+            </svg>
+          }
+          return null; 
+        })()}
+      </div>
+      <div className={styles.logoTitle}>
+        <p>{businessName || "Your Business"}</p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="202" height="56" viewBox="0 0 202 56" fill="none">
+        <path d="M180.202 13.4635V18.2118C181.704 15.0863 185.07 12.7422 189.698 12.7422C196.791 12.7422 201.118 17.0698 201.118 24.5228V44.2373H191.02V26.927C191.02 22.6595 189.338 20.4958 185.912 20.4958C182.786 20.4958 180.322 22.5393 180.322 27.7685V44.2373H170.284V13.4635H180.202Z" fill="black"/>
+        <path d="M145.429 43.9367L133.708 13.4634H143.806L151.259 34.981H151.379L158.531 13.4634H168.389L156.728 44.4175C153.663 52.4716 149.215 55.4168 141.942 55.4168C140.74 55.4168 139.117 55.3567 137.795 55.1163V47.7834C138.637 47.9036 138.997 47.9036 139.598 47.9036C142.784 47.9036 144.166 47.3627 145.429 43.9367Z" fill="black"/>
+        <path d="M114.807 13.4634L119.855 34.1396H119.976L125.385 13.4634H135.122L125.565 44.2372H115.468L110.299 24.2823H110.178L104.949 44.2372H94.8516L85.2949 13.4634H95.2724L100.682 34.1396H100.862L105.791 13.4634H114.807Z" fill="black"/>
+        <path d="M83.3901 44.2374H73.3525V0H83.3901V44.2374Z" fill="black"/>
+        <path d="M69.9372 34.1997C68.6149 40.8714 63.0251 44.9586 55.0912 44.9586C45.8951 44.9586 38.8027 38.948 38.8027 28.8504C38.8027 18.7527 45.8951 12.7422 54.971 12.7422C65.0687 12.7422 70.0574 20.0149 70.0574 28.3695V31.0743H48.4797C49.0206 35.3417 51.1243 37.8661 55.0912 37.8661C57.9763 37.8661 59.8996 36.5438 60.681 34.1997H69.9372ZM54.971 19.7745C51.4849 19.7745 49.3812 21.9383 48.66 25.7249H60.7411C60.7411 22.5994 58.8177 19.7745 54.971 19.7745Z" fill="black"/>
+        <path d="M0 31.0143H10.0376C10.5184 35.9429 14.9662 37.5056 19.4741 37.5056C23.6814 37.5056 27.2276 35.8227 27.2276 32.2765C27.2276 29.5718 25.4846 28.3095 20.7964 27.5282L13.2231 26.1458C6.49135 24.9437 1.32231 21.6379 1.32231 14.0045C1.32231 5.89033 8.65514 0.601074 18.4523 0.601074C29.5116 0.601074 35.8227 5.46959 36.6641 13.7641H26.867C26.5064 10.0376 23.2607 8.05411 18.5725 8.05411C14.305 8.05411 11.4801 10.1578 11.4801 13.2232C11.4801 16.2284 13.5838 17.0098 17.6709 17.7911L25.8452 19.3539C33.2982 20.6762 37.4455 24.5229 37.4455 31.5552C37.4455 39.8497 29.752 44.9587 19.8347 44.9587C8.83545 44.9587 0.901577 40.4508 0 31.0143Z" fill="black"/>
+        </svg>
+      </div>
+    </div>
+  </div>
+}
+
+export default BrandBuilderToolWordmark

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolWordmark/BrandBuilderToolWordmarkProps.tsx

@@ -0,0 +1,8 @@
+
+interface BrandBuilderToolWordmarkProps {
+  brand?: string
+  businessName?: string
+  onType?:(e:any) => void;
+}
+
+export default BrandBuilderToolWordmarkProps

package/src/Components/DataDisplay/BrandBuilderTool/brandBuilder.module.scss

@@ -171,6 +171,38 @@
     padding: 48px 12px;
   }
 
+  .WordmarkSelector {
+    .inputBusiness {
+      margin-bottom: 32px;
+    }
+
+    .logo {
+      
+      svg {
+        width: 80px;
+        height: 80px;
+      }
+    }
+
+    .logoWrapper {
+      display: flex;
+      align-items: center;
+    }
+
+    .logoTitle {
+      margin-left: 15px;
+      p {
+        font-size: 36px;
+      }
+
+      svg {
+        width: 150px;
+      }
+    }
+  }
+  
+
+
   @media screen and (min-width: 992px){
 
     .header{
@@ -210,6 +242,34 @@
       border-bottom: none;
     }
 
+    .WordmarkSelector {
+      .inputBusiness {
+        margin-bottom: 48px;
+      }
+
+      .logo {
+        margin-left: 24px;
+
+        svg {
+          width: 100px;
+          height: 100px;
+        }
+      }
+
+      .logoTitle {
+        p {
+          font-size: 50px;
+          line-height: 50px;
+        }
+
+        svg {
+          width: 202px;
+        }
+      }
+    }
+
+    
+
   }
 
 }

package/src/Components/Layout/HeroBanner/heroBanner.module.scss

@@ -330,7 +330,7 @@
       .heroWrapper{
 
         .content {
-          width: 50%;
+          width: 49%;
         }
 
         .heroImg{