@gomdigital/sheep-two
v4.3.0
Published
Library for the Project Shepherd ecosystem
Downloads
34
Readme
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>
);
}