@hellobetterdigitalnz/selwynui 0.0.1-58 → 0.0.1-59

package/package.json

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

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

@@ -0,0 +1,53 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+import BrandBuilderTool from "./BrandBuilderTool";
+import BrandBuilderToolWrapper from "./BrandBuilderToolWrapper/BrandBuilderToolWrapper";
+import BrandBuilderToolUploader from "./BrandBuilderToolUploader/BrandBuilderToolUploader";
+import BrandBuilderToolMain from "./BrandBuilderToolMain/BrandBuilderToolMain";
+import BrandBuilderToolTemplateSelector from "./BrandBuilderToolTemplate/BrandBuilderToolTemplateSelector";
+import BrandBuilderToolPreview from "./BrandbuilderToolPreview/BrandBuilderToolPreview";
+import BrandBuilderToolTemplateItem from "./BrandBuilderToolTemplate/BrandBuilderToolTemplateItem";
+
+const meta: Meta = {
+  title: "DataDisplay / BrandBuilderTool",
+  component: BrandBuilderTool,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const BrandBuilderToolTemplate: Story = {
+  render: () => {
+    return (
+      <>
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pdBillar="live" level="light">
+          <BrandBuilderTool title={'Build your brand'} description={'Lorem ipsum dolor sit amet'}>
+            <BrandBuilderToolWrapper sideBar={<BrandBuilderToolUploader/>}>
+              <BrandBuilderToolMain>
+                <BrandBuilderToolTemplateSelector>
+                  <BrandBuilderToolTemplateItem/>
+                  <BrandBuilderToolTemplateItem/>
+                  <BrandBuilderToolTemplateItem/>
+                  <BrandBuilderToolTemplateItem/>
+                  <BrandBuilderToolTemplateItem/>
+                </BrandBuilderToolTemplateSelector>
+                <BrandBuilderToolPreview/>
+              </BrandBuilderToolMain>
+            </BrandBuilderToolWrapper>
+          </BrandBuilderTool>
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+export const BrandBuilderToolComponent = {
+  ...BrandBuilderToolTemplate
+};

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

@@ -0,0 +1,23 @@
+import styles from './brandBuilder.module.scss'
+import BrandBuilderToolProps from "./BrandBuilderToolProps.tsx";
+import {Container} from "../../Shared";
+
+const BrandBuilderTool = (props : BrandBuilderToolProps) => {
+
+  const {title, description, children} = props
+
+  return <div className={styles.brandBuilder}>
+    <Container border={true}>
+      <div className={styles.header}>
+        {title && <h1>{title}</h1>}
+        {description && <p>{description}</p>}
+      </div>
+
+      <div className={styles.brandBuilderHolder}>
+        {children}
+      </div>
+    </Container>
+  </div>
+}
+
+export default BrandBuilderTool

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

@@ -0,0 +1,13 @@
+import styles from '../brandBuilder.module.scss'
+import BrandBuilderToolMainProps from "./BrandBuilderToolMainProps.tsx";
+
+const BrandBuilderToolMain = (props : BrandBuilderToolMainProps) =>{
+
+  const {children} = props
+
+  return <div className={styles.main}>
+    {children}
+  </div>
+}
+
+export default BrandBuilderToolMain

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolMain/BrandBuilderToolMainProps.tsx

@@ -0,0 +1,7 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolMainProps {
+  children?:ReactNode
+}
+
+export default BrandBuilderToolMainProps

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

@@ -0,0 +1,9 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolProps{
+  title?:string
+  description?:string
+  children?:ReactNode
+}
+
+export default BrandBuilderToolProps;

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateItem.tsx

@@ -0,0 +1,17 @@
+import styles from '../brandBuilder.module.scss'
+import BrandBuilderToolTemplateItemProps from "./BrandBuilderToolTemplateItemProps.tsx";
+const BrandBuilderToolTemplateItem = ({icon, iconName, active} : BrandBuilderToolTemplateItemProps) =>{
+  return <div className={styles.item}>
+    <div className={`${styles.itemWrapper} ${active && styles.active}`} aria-description={iconName}>
+      {icon}
+      <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="#F36C21"/>
+        <path d="M0 61.24C32.1003 61.24 58.1332 87.2177 58.1332 119.25H0V61.24Z" fill="#F36C21"/>
+        <path d="M119.794 58.01C87.6937 58.01 61.6608 32.0323 61.6608 0H119.794V58.01Z" fill="#F36C21"/>
+        <path d="M119.794 61.24C87.6937 61.24 61.6608 87.2177 61.6608 119.25H119.794V61.24Z" fill="#F36C21"/>
+      </svg>
+    </div>
+  </div>
+}
+
+export default BrandBuilderToolTemplateItem;

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateItemProps.tsx

@@ -0,0 +1,10 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolTemplateItemProps{
+  icon?:ReactNode
+  iconName?: string;
+  onClick?: () => void;
+  active?: boolean;
+}
+
+export default BrandBuilderToolTemplateItemProps;

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateSelector.tsx

@@ -0,0 +1,26 @@
+import styles from '../brandBuilder.module.scss'
+import BrandBuilderToolTemplateSelectorProps from "./BrandBuilderToolTemplateSelectorProps.tsx";
+const BrandBuilderToolTemplateSelector = (props : BrandBuilderToolTemplateSelectorProps) =>{
+
+  const {actions, children} = props
+
+  return <div className={styles.templateSelector}>
+    <div className={styles.selectors}>
+      <div className={`${styles.title} ${styles.selectorTitle}`}>
+        <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="M34.7346 19.892C34.7346 24.464 31.4946 26.624 26.9586 28.928C23.7186 30.584 22.0986 31.772 21.9546 33.176H34.7706V38H15.0426V35.804C15.0426 30.404 19.4706 27.38 23.2866 25.148C26.9586 23.024 28.8666 21.944 28.8666 19.784C28.8666 17.84 27.6786 16.58 25.3386 16.58C22.8906 16.58 21.4506 18.452 21.3066 20.792H15.2946C15.6906 15.788 19.2186 11.864 25.3746 11.864C30.9546 11.864 34.7346 15.14 34.7346 19.892Z" fill="#EFEAE7"/>
+        </svg>
+        <h5>Select a template</h5>
+      </div>
+      <div>
+        {actions}
+      </div>
+    </div>
+    <div className={styles.items}>
+      {children}
+    </div>
+  </div>
+}
+
+export default BrandBuilderToolTemplateSelector

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateSelectorProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolTemplateSelectorProps {
+  actions?:ReactNode
+  children?:ReactNode
+}
+
+export default BrandBuilderToolTemplateSelectorProps

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

@@ -0,0 +1,30 @@
+import styles from '../brandBuilder.module.scss'
+import BrandBuilderToolUploaderProps from "./BrandBuilderToolUploaderProps.tsx";
+const BrandBuilderToolUploader = (props : BrandBuilderToolUploaderProps) =>{
+
+  const {action, children } = props
+
+  return <div className={styles.brandBuilderToolUploader}>
+    <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="M18.2427 20.18V16.076C22.6347 16.076 24.5067 14.924 25.1187 12.26H29.5827V38H23.3547V20.18H18.2427Z" fill="#EFEAE7"/>
+      </svg>
+      <h5>Upload your photos</h5>
+    </div>
+    <div className={styles.uploaderBtn}>
+      {action}
+    </div>
+    <div className={styles.uploaderDesc}>
+      <p>You can select one image or four.</p>
+      <p>
+        If you choose four, each image will be placed into its own segment of the selected shape, and the shape will automatically mask them.
+      </p>
+    </div>
+    <>
+      {children}
+    </>
+  </div>
+}
+
+export default BrandBuilderToolUploader

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolUploader/BrandBuilderToolUploaderProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolUploaderProps {
+  action?:ReactNode
+  children?:ReactNode
+}
+
+export default BrandBuilderToolUploaderProps

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

@@ -0,0 +1,17 @@
+import BrandBuilderToolWrapperProps from "./BrandBuilderToolWrapperProps.tsx";
+import styles from '../brandBuilder.module.scss'
+const BrandBuilderToolWrapper = (props : BrandBuilderToolWrapperProps) => {
+
+  const { sideBar , children} = props
+
+  return <div className={styles.brandBuilderToolWrapper}>
+    <div className={styles.sideBar}>
+      {sideBar}
+    </div>
+    <div className={styles.main}>
+      {children}
+    </div>
+  </div>
+}
+
+export default BrandBuilderToolWrapper

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolWrapper/BrandBuilderToolWrapperProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolWrapper {
+  sideBar?:ReactNode
+  children?:ReactNode
+}
+
+export default BrandBuilderToolWrapper;

package/src/Components/DataDisplay/BrandBuilderTool/BrandbuilderToolPreview/BrandBuilderToolPreview.tsx

@@ -0,0 +1,25 @@
+import styles from "../brandBuilder.module.scss";
+import BrandBuilderToolPreviewProps from "./BrandBuilderToolPreviewProps.tsx";
+
+const BrandBuilderToolPreview = (props : BrandBuilderToolPreviewProps) =>{
+
+  const {children , action } = props
+
+  return <div className={styles.preview}>
+    <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="M35.0637 30.98C35.0637 34.976 31.4997 38.432 25.0557 38.432C18.8997 38.432 14.9757 35.048 14.5437 30.188H20.4837C20.6637 32.456 22.6077 33.824 25.0557 33.824C27.7557 33.824 29.3037 32.528 29.3037 30.476C29.3037 28.244 27.5757 27.344 25.0917 27.344H22.5357V22.952H25.0197C27.2157 22.952 28.7997 21.944 28.7997 19.748C28.7997 17.84 27.4677 16.508 25.1997 16.508C22.7517 16.508 21.2397 18.056 21.0957 20.18H15.3717C15.6957 15.716 19.1157 11.864 25.2717 11.864C31.3557 11.864 34.4877 15.392 34.4877 19.46C34.4877 22.412 32.6157 24.572 29.8797 25.076C33.0837 25.616 35.0637 27.884 35.0637 30.98Z" fill="#EFEAE7"/>
+      </svg>
+      <h5>Image preview</h5>
+    </div>
+    <div className={styles.previewImage}>
+      {children}
+    </div>
+    <div className={styles.previewAction}>
+      {action}
+    </div>
+  </div>
+}
+
+export default BrandBuilderToolPreview;

package/src/Components/DataDisplay/BrandBuilderTool/BrandbuilderToolPreview/BrandBuilderToolPreviewProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolPreviewProps {
+  children?:ReactNode
+  action?:ReactNode
+}
+
+export default BrandBuilderToolPreviewProps

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

@@ -0,0 +1,193 @@
+.brandBuilder{
+  .header{
+    padding-bottom: 48px;
+
+    h1{
+      font-size: var(--font-size-h3);
+      font-weight: 700;
+      line-height: 1;
+      letter-spacing: -3.6px;
+      margin-bottom: 32px;
+    }
+
+    p{
+      font-size: var(--font-size-h5);
+      font-weight: 400;
+      line-height: 1.2;
+      letter-spacing: -1.44px;
+    }
+
+  }
+
+  .brandBuilderToolWrapper{
+    border-radius: 27.583px;
+    background: rgba(255, 255, 255, 0.50);
+    padding: 20px;
+  }
+
+  .title{
+    display: flex;
+    align-items: center;
+    margin-bottom: 48px;
+
+    svg{
+      flex-shrink: 0;
+      height: 32px;
+      width: 32px;
+    }
+
+    h5{
+      font-size: var(--font-size-h5);
+      margin-left: 16px;
+    }
+  }
+
+  .selectorTitle{
+    margin-bottom: 0;
+  }
+
+  .selectors{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 48px;
+  }
+
+  .templateSelector{
+    margin-bottom: 24px;
+
+    .items{
+      display: flex;
+      flex-wrap: wrap;
+      margin: -8px;
+    }
+
+    .item{
+      padding: 8px;
+      width: 50%;
+
+      .itemWrapper{
+        display: flex;
+        padding: 16px;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease-in-out;
+        border: 2px solid transparent;
+
+        &:hover, &.active{
+          background: #FFFFFF;
+          border: 2px solid var(--color-block-text);
+        }
+      }
+
+      @media screen and (min-width: 1300px) {
+        width: 33.33%;
+      }
+
+      @media screen and (min-width: 1300px) {
+        width: 20%;
+      }
+
+    }
+
+  }
+
+
+  .uploaderBtn{
+    margin-bottom: 48px;
+  }
+
+  .uploaderDesc{
+    margin-bottom: 48px;
+
+    p{
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%;
+      margin-bottom: 16px;
+
+      &:last-child{
+        margin-bottom: 0;
+      }
+
+    }
+
+  }
+
+  .brandBuilderToolUploader{
+    border-bottom: 1px solid var(--color-block-text);
+    margin-bottom: 24px;
+  }
+
+  .brandBuilderToolWrapper{
+    display: flex;
+    flex-direction: column;
+
+    .sideBar{
+      width: 100%;
+    }
+
+    .main{
+      flex: 1;
+    }
+
+  }
+
+  .previewAction{
+    padding-top: 48px;
+
+    button{
+      width: 100%;
+    }
+
+  }
+
+  .previewImage{
+    border-radius: 8px;
+    background: #FFF;
+    padding: 48px 12px;
+  }
+
+  @media screen and (min-width: 992px){
+
+    .header{
+      padding-bottom: 96px;
+    }
+
+    .title{
+
+      svg{
+        flex-shrink: 0;
+        height: 50px;
+        width: 50px;
+      }
+
+      h5{
+        text-wrap: nowrap;
+      }
+    }
+
+    .brandBuilderToolWrapper{
+      padding: 56px;
+      flex-direction: row;
+
+      .sideBar{
+        width: 450px;
+        padding-right: 32px;
+        margin-right: 32px;
+        border-right: 1px solid var(--color-block-text);
+      }
+
+      .main{
+        flex: 1;
+      }
+
+    }
+    .brandBuilderToolUploader{
+      border-bottom: none;
+    }
+
+  }
+
+}

package/src/Components/DataDisplay/ContactsBlock/ContactItem.tsx

@@ -3,36 +3,45 @@ import ContactItemProps from "./ContactItemProps";
 import styles from "./contactsBlock.module.scss";
 
 const ContactItem = (props: ContactItemProps) => {
-    const {
-        image,
-        name,
-        position,
-        email,
-        mobile,
-    } = props;
+  const {
+    image,
+    name,
+    position,
+    email,
+    mobile,
+    linkedInUrl,
+  } = props;
 
-    return (
-        <div className={styles.contactCard}>
-            {image && <img src={image} alt="contact-image" />}
+  return (
+    <div className={styles.contactCard}>
+      <div className={styles.contactCardWrapper}>
+        <div className={styles.cardImg}>
+          {image && <img src={image} alt={`${name}-image`} />}
+        </div>
 
-            <div className={styles.contactContentWrapper}>
-                <div className={styles.contactCardHeader}>
-                    {name && <h1>{name}</h1>}
-                    {position && <h2>{position}</h2>}
-                </div>
+        <div className={styles.contactContentWrapper}>
+          <div className={styles.contactCardHeader}>
+            {name && <h1>{name}</h1>}
+            {position && <h2>{position}</h2>}
+          </div>
 
-                <div className={styles.contactMiddleContent}>
-                    {email && <p>{email}</p>}
-                    {mobile && <p>{mobile}</p>}
-                </div>
+          <div className={styles.contactMiddleContent}>
+            {email && <a href={`mailto:${email}`}>{email}</a>}
+            {mobile && <a href={`tel:${mobile}`}>{mobile}</a>}
+          </div>
 
-                <div className={styles.contactLink}>
-                    <p>Connect on LinkedIn</p>
-                    <ArrowRight />
-                </div>
-            </div>
+          <div className={styles.contactLink}>
+            {linkedInUrl && (
+              <a href={linkedInUrl} target="_blank" rel="noopener noreferrer">
+                <p>Connect on LinkedIn</p>
+                <ArrowRight type={"regular"} />
+              </a>
+            )}
+          </div>
         </div>
-    )
-}
+      </div>
+    </div>
+  );
+};
 
-export default ContactItem;
+export default ContactItem;

package/src/Components/DataDisplay/ContactsBlock/ContactItemProps.tsx

@@ -1,9 +1,10 @@
 interface ContactItemProps {
-    image?: string;
-    name?: string;
-    position?: string;
-    email?: string;
-    mobile?: string;
+  image?: string;
+  name?: string;
+  position?: string;
+  email?: string;
+  mobile?: string;
+  linkedInUrl?: string;
 }
 
 export default ContactItemProps;

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

@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 const ContactsBlockTemplate: Story = {
     render: () => {
         return (
-            <ElementHolder paddingTop="md" paddingBottom="md" pillar="live" level="light">
+            <ElementHolder paddingTop="md" paddingBottom="md" pillar="visit" level="light">
                 <ContactBlock contactBlockTitle={'Meet the team'}>
                   <ContactItem
                     image={'./img/contact-image.svg'}
@@ -27,6 +27,7 @@ const ContactsBlockTemplate: Story = {
                     position={'Marketing Manager'}
                     email={'sarahb@selwyn.nz'}
                     mobile={'03 345 3456'}
+                    linkedInUrl={'/'}
                   />
 
                   <ContactItem
@@ -35,7 +36,18 @@ const ContactsBlockTemplate: Story = {
                     position={'Marketing Manager'}
                     email={'sarahb@selwyn.nz'}
                     mobile={'03 345 3456'}
+                    linkedInUrl={'/'}
                   />
+
+                  <ContactItem
+                    image={'./img/contact-image.svg'}
+                    name={'Sarah Browne'}
+                    position={'Marketing Manager'}
+                    email={'sarahb@selwyn.nz'}
+                    mobile={'03 345 3456'}
+                    linkedInUrl={'/'}
+                  />
+
                 </ContactBlock>
             </ElementHolder>
         )