@gomdigital/sheep-two NPM

Sheep-two

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

Quick Start

Install with npm:

npm i @gomdigital/sheep-two

Usage

In App.js:

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

For Built-in icons:

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

In tailwind.config.js:

module.exports = {
  content: [
    // ...
    "node_modules/@gomdigital/sheep-two/**/*.{js,jsx,ts,tsx}",
    //...
    theme: {
      extend: {
      //...
        colors: {
          theme: "#0BAB47",
          primaryLight: "white",
          primaryDark: "#091F2C",
          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",
    "headless-cms-project-aa3d1.web.app",
  ],
  "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.",
    },
    //   ...
  ]}
  bg="dark"
/>

Props:

Obj: Object
bg: String

Columns

<Columns col={3}>{/* Children */}</Columns>

Props:

col: 3, 4 or 6

Section

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

Props:

title: String
customStyle: String

Half

<Half
    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]"
        />
          }
    imageStyle={"bg-[#E2E5EC] w-[543px] h-[467px] rounded-[20px]"}
    orderLast={true}
    equalCols={true}
    />

Props:

title: String
content: HTML
image: HTML
imageStyle: String
orderLast: Bool
equalCols: Bool

Combo

Combo is a component made up of reusing existing components.

The following props can be used to adjust the settings for the

component:

equalCols: Bool (equal being 50/50 otherwise second col will have span property of 2)

Example:

<Section title="">
  <div>
    {/* Half */}
    <Half
      title="Platform Power"
      content={
        <>
          We're one of Australia's first MetaTrader brokers. Our expertise helps
          you intuitively execute trading strategies on market-leading
          platforms.
        </>
      }
      image={
        <img
          alt="hero"
          src={"Powerful-metaTrader-Platforms1.png"}
          className="inset-0"
        />
      }
      imageStyle={""}
      primaryBtnHref="/"
      primaryBtnText="Open Live Account"
      gridCols="3"
      col1Span=""
      col2Span="2"
    />

    <div className="mt-10 flex justify-center">
      {/* 3 col */}
      <Columns col={3}>
        <CardItems
          obj={[
            {
              icon: <img alt="logo" src={Mt4} className="w-12 h-12" />,
              card_title: "Metatrader 4",
              card_content:
                "The world's most popular trading platform for your phone, tablet or desktop",
            },
            {
              icon: <img alt="logo" src={Mt5} className="w-12 h-12" />,
              card_title: "Metatrader 5",
              card_content:
                "A more powerful release of MetaTrader with greater functionality.",
            },
            {
              icon: <img alt="logo" src={AddChart} className="w-12 h-12" />,
              card_title: "Trading Tools",
              card_content:
                "We have a range of trading tools to help you manage your trading risk, improve your trading strategies and stay in the know.",
            },
          ]}
          bg="light"
        />
      </Columns>
    </div>
  </div>
</Section>

FullBlockCTA

<FullBlockCta
  primaryBtnHref="/"
  primaryBtnText="Open Live Account"
  desc="..."
/>

Props:

primaryBtnHref: String
primaryBtnText: String
desc: String

ExpandedCTA

<ExpandedCta
  title="..."
  primaryBtnHref=""
  primaryBtnText="Open Live Account"
  secondaryBtnHref=""
  secondaryBtnText="Try Free Demo"
/>

Props:

title: String
primaryBtnHref: String
primaryBtnText: String
secondaryBtnHref: String
secondaryBtnText: String

IconGroup

<IconGroup
  obj={[
    {
      icon: <img alt="icon" src={"logo512.png"} />,
      icon_title: "Low Spreads from 0.0 Pips",
    },
    //..
  ]}
/>

Props:

obj: Object

Steps

<Steps
  title="Start trading in 3 easy steps"
  obj={[
    {
      icon: <img alt="icon" src={StepIcon} className="w-9 h-9" />,
      card_title: "Open an account",
      card_content: "Apply for a GO Markets Live Trading Account",
    },
    {
      icon: <img alt="icon" src={StepIcon2} className="w-9 h-9" />,
      card_title: "Fund Your Account",
      card_content: "Deposit the minimum funds required.",
    },
    {
      icon: <img alt="icon" src={StepIcon3} className="w-9 h-9" />,
      card_title: "Start Trading!",
      card_content: "Trade Gold, and 1000+ other instruments.",
    },
  ]}
  bg="dark"
  last_card_title="Join Today"
  last_card_content="Try a free demo"
  last_cardSecondaryBtnHref="Join Today"
  last_cardSecondaryBtnText="Open Live Account"
/>

Props:

obj: Object
title: String
bg: String
last_card_title: String
last_card_content: String
last_cardSecondaryBtnHref: String
last_cardSecondaryBtnText: String

Note:

just a single card component which can be added right after CardItems

Example

import "./App.scss";
import {
  Header,
  Hero,
  Section,
  ThreeCol,
  CardItems,
  Footer,
} from "@gomdigital/sheep-two";
import "@gomdigital/sheep-two/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>
  );
}