Sheep-one

Library for the Project Shepherd ecosystem.
Library of components built using React, Tailwindcss and Flowbite.

Quick Start

Install with npm:

npm i @gomdigital/sheep-one

Usage

In App.js:

import "@gomdigital/sheep-one/dist/styles/App.scss";

For Built-in icons:

import icon from "@gomdigital/sheep-one/dist/icons/name.svg";

In tailwind.config.js:

module.exports = {
  content: [
    // ...
    "node_modules/@gomdigital/sheep-one/**/*.{js,jsx,ts,tsx}",
    //...
    theme: {
      extend: {
      //...
        colors: {
          theme: "#0BAB47",
          primaryLight: "white",
          primaryDark: "#122d3c",
          darkTwo: "#334f5f",
          darkThree: "#69808d",
          darkFour: "#becad6",
          darkFive: "#f2f6f9",
          darkSix: "#f2f8fd",
          darkSeven: "#f9fbff",
        },
        screens: {
          port: { max: "639px" },
        },
      },
    },
    // ...
  ],
};

Requirements

• Tailwindcss
• React Flowbite

Components

Affiliate Tracker

Import the tracker hook into the app.js of the react project.

useAffiliateTracker(
  ["app.gomarkets.com", "gomarkets.eappform.com"],
  "primary-btn"
);

Params:

needed if the tracker data is to be passed on from the app to some other url.

• utmInheritingDomains: array
• targetElement: String

Header

<Header
  btnText="Open"
  btnHref=""
  logo={
    <img alt="logo" src={"go-logo.png"} className="w-[194.11px] h-[23.38px]" />
  }
  absolute={true}
  modal={true}
  modalBtnName="Modal"
  modalTitle="Lorem Ipsum title"
  modalDesc={
    <>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis,
      enim eget pretium sollicitudin
    </>
  }
  actionBtnHref=""
  actionBtn="Continue"
/>

Props:

• btnText: String
• btnHref: String
• logo: HTML
• absolute: Bool. (if true wrap in relative div)
• modal: Bool
• modalBtnName: Bool
• modalTitle: String
• modalDesc: HTML
• actionBtnHref: String
• actionBtn: String

Hero

<Hero
  title=""
  desc={/* desc */}
  textBelow=""
  primaryBtnText=""
  primaryBtnHref=""
  secondaryBtnText=""
  secondaryBtnHref=""
  heroStyle=""
/>

Props:

• title: String
• desc: HTML
• textBelow: String
• primaryBtnText: String
• primaryBtnHref: String
• secondaryBtnText: String
• secondaryBtnHref: String
• heroStyle: String

Footer

 <Footer
        logo={
          <img
            alt="logo"
            src={"go-logo.png"}
            className="w-[194.11px] h-[23.38px]"
          />
        }
        ftrInfo={[
          {
            title: "CONTACT",
            subContent: [
              {
                content: "Australia",
                info: "1800 88 55 71",
                link: "tel:1800 88 55 71",
              },
            //...
            ],
          },
        //...
        ]}
        ftrInfo2={[
          {
            title: "LEGAL DOCS",
            content: [
              { title: "Privacy Policy", link: "/" },
            //...
            ],
          },
        ]}
        textBottom={
         /* text */
        }
      />

Props:

• logo: HTML
• ftrInfo: Object
• ftrInfo2: Object
• textBottom: HTML

Note:

• ftrInfo and ftrInfo2 must be exactly structured/initialised as seen above.

CardItems

<CardItems
  obj={[
    {
      icon: <img alt="icon" src={"go-logo.png"} className="w-12 h-12" />,
      card_title: "Test Lorem ipsum me dolor excusi du",
      card_content: "Suspendisse rutrum, eros luctus vestibulum congue.",
    },
    //   ...
  ]}
/>

Props:

• Obj: Object

ThreeCol

<ThreeCol>{/* Children */}</ThreeCol>

Section

<Section title="Title" customStyle="">
  {/* Children */}
</Section>

Props:

• title: String
• customStyle: Stirng

HalfBody

<HalfBody
    title="Lorem ipsum me dolor excuzi mono de la zorks mon pon"
    content={/* ... */}
    image={
        <img
            alt="hero"
            src={"1080x1080-agile-wall 1.png"}
            className="inset-0 object-cover w-[543px] h-[543px]"
        />
          }
    orderLast={true}
    />

Props:

• title: String
• content: HTML
• image: HTML

Form

<Form
  formUrl="https://tfaforms.com/5029975"
  formTextBelow={
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum, eros luctus vestibulum congue, metus felis vehicula leo, et iaculis lacus ipsum sed nisi."
  }
/>

Props:

• formUrl: String
• formTextBelow: Stirng

Example

import "./App.scss";
import {
  Header,
  Hero,
  Section,
  ThreeCol,
  CardItems,
  Footer,
} from "@gomdigital/sheep-one";
import "@gomdigital/sheep-one/dist/styles/App.scss";

function App() {
  return (
    <div className="main">
      <div className="relative">
        <Header btnText={"Open"} absolute={true} />
        <Hero
          title={<>Lorem ipsum me dolor excuzi mono de la zorks</>}
          desc={
            <>
              Emphasise paragraph styling Lorem ipsum dolor sit amet,
              consectetur adipiscing elit. Suspendisse rutrum, eros luctus
              vestibulum congue metus felis vehicula leo, et iaculis lacus ipsum
              sed nisi.
              <div className="mt-10">
                Suspendisse rutrum, eros luctus vestibulum congue metus et
                iaculis lacus ipsum sed nisi.
              </div>
            </>
          }
          textBelow={
            "*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum, eros luctus"
          }
          primaryBtnText={"Open Live Account"}
          primaryBtnHref={"#"}
          secondaryBtnText={"Try Free Demo"}
          secondaryBtnHref={"#"}
          heroStyle={"bg-fit bg-no-repeat bg-center "}
        />
        {/* ... */}
      </div>
    </div>
  );
}

All contents @ 2023 Go Markets. All rights reserved.