4.2.3 • Published 2 years ago

@gomdigital/sheep-one v4.2.3

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

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.
4.2.3

2 years ago

4.2.2

2 years ago

4.2.1

2 years ago

4.2.0

2 years ago

4.1.0

2 years ago

4.0.0

2 years ago

3.0.0

2 years ago

2.10.5

2 years ago

2.10.4

2 years ago

2.10.3

2 years ago

2.10.2

2 years ago

2.10.1

2 years ago

2.10.0

2 years ago

2.9.0

2 years ago

2.8.0

2 years ago

2.7.1

2 years ago

2.7.0

2 years ago

2.6.2

2 years ago

2.6.1

2 years ago

2.6.0

2 years ago

2.5.0

2 years ago

2.4.0

2 years ago

2.3.0

2 years ago

2.2.5

2 years ago

2.2.4

2 years ago

2.2.3

2 years ago

2.2.2

2 years ago

2.2.0

2 years ago

2.1.0

2 years ago

2.0.2

2 years ago