Spark Strand UI Kit

A reusable React UI kit library to be used in our internal projects. Allows a user to choose the common components you need to build a site quickly, based on previous customer needs.

Prerequisites

This project requires NodeJS (version 8 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
8.12.1
v16.14.1

When you're using rollup.config.js file to push the package to npm, please ensure you have included the right react, react-router-dom and react-dom versions in your peerDependencies. At the time of writing this, the following versions were used.

react: "^18.2.0",
react-dom: "^18.2.0",
react-router-dom: "^6.3.0"

Table of contents

• Spark Strand UI Kit
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
  • Description of Components
    • Button
    • CarouselCard
    • ContactInfoFooter
    • DropDown
    • GalleryTile
    • Modal
    • Navbar
    • PhoneFooter
    • ProgressBar
    • ServiceTable
    • ShopCartAdd
    • SlideOutMenu
    • SocialMediaFooter
    • StylebookCard
  • Credits
  • Built With
  • License

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

$ npm install sparkstrand-ui-kit

Or if you prefer using Yarn:

$ yarn add sparkstrand-ui-kit

Usage

example usage

import { ServiceTable } from "../node_modules/sparkstrand-ui-kit/";

function App() {
  return (
    <ServiceTable
      serviceHeaderOne={"Some Service 1"}
      color={"#292C6D"}
      arrayOfService={[
        ["Item 1", "£10"],
        ["Item 2", "£20"],
        ["Item 3", "£30"],
      ]}
    />
  );
}

Description of Components

Button

This component is a button, with upto 9 options and the ability to customise and change the color, size (small, medium, large), height, width, label and borders.

<Button
  primary={true}
  backgroundColor={"#F6F6F6"}
  border={"1px solid #292C6D"}
  borderRadius={"5px"}
  height={"40px"}
  width={"80px"}
  size={"medium"}
  label="Button"
  color={"#292C6D"}
/>

CarouselCard

This component is a carousel card, with upto 3 options for stylistic effects. The data passed into the card will be an array of objects.

Example:

const carouselItems = [
    {
        image: imageFileLogo,
        imageAlt: "Image of logo",
        style: "Deep Wave with highlights",
        description: "French blowout with free flowing curls with highlights.",
        hairdresser: "Paul Walker"
    },
    {
        image: imageFileHairStyle,
        imageAlt: "Image of curly hair girl.",
        style: "Bold head with a tatoo",
        description: "CURLY hair with blonde highlights and extensions",
        hairdresser: "Salim Abdala"
    }
]

<CarouselCard
  carouselData={carouselItems}
  backgroundColor="#292C6D"
  color="#F6F6F6"
  border={"1px solid #292C6D"}
/>

ContactInfoFooter

This component is a footer, with upto 9 options consisting of information relating to the business opening times, address and contact details. There is an option inclusive of colour change for stylistic effect.

Example:

<ContactInfoFooter
  addressOne="33 Kubernete Street, London"
  addressTwo="England, SE1 8AS, United Kingdom"
  backgroundColor="#292C6D"
  color="#F6F6F6"
  companyName="Lorem ipsum"
  openingTime="Monday to Friday 10am to 8pm"
  openingTimeSun="Sunday 10am to 6pm"
  openingTimeWeekend="Saturday 9am to 6pm"
  phoneNumber="+44 752 5549320"
/>

DropDown

This component is a dropdown bar, with up to 6 options and the ability to customise and change the colours, label and borders.

Example:

<Dropdown
  dropdownLabel={""}
  opendropdown={false}
  color={"#292C6D"}
  backgroundColor={"#F6F6F6"}
  border={"1px solid #292C6D"}
  borderRadius={"5px"}
  linkOne={"Option 1"}
  linkTwo={"Option 2"}
  linkThree={"Option 3"}
  size={"large"}
/>

GalleryTile

This component is a 'Gallery Tile', with upto 5 options allowing for size, description and colour changes. This components priamey use is to be used on a gallery page with many replicas of the component with varied options.

Example:

<GalleryTile
  color="#292C6D"
  description="A short to medium length haircut, hair is cut straight around the head at jaw level, no longer than shoulder length, with fringe or bangs at the front"
  height={400}
  style="The Bob"
  width={400}
/>

Modal

This component is a modal, with up to 9 options and the ability to customise and change the colours, label and borders. Along with routing back to the home page.

Example:

<Modal
  backgroundColor="#8785A2"
  bookingNumber="Booking no. 46825721607"
  color="#F6F6F6"
  confirmationMessage="Appointment Booked"
  goodbyeMessage="See you soon"
  buttonBackgroundColor="#8785A2"
  buttonColor="#F6F6F6"
  buttonBorder="solid 1px #292C6D"
  buttonLabel="Back to Home"
/>

Navbar

This component is a navbar, with up to 9 options and the ability to customise and change the colours, label and borders. Along with media query to turn into slideout menu in mobile.

Example:

<Navbar
  navLabel={"Women's Cut"}
  openNav={true}
  navLogo={Logo}
  pageLinkOne={"Bookings"}
  pageLinkTwo={"Stylebook"}
  pageLinkThree={"Services & Pricing"}
  pageLinkFour={"Gallery"}
  pageLinkFifth={"Shop"}
  pageLinkSix={"Contact Us"}
/>

PhoneFooter

This component is a phone footer, with upto 3 options. A very simplistic component consisting of contact information.

Example:

<PhoneFooter
  backgroundColor="#8785A2"
  color="#F6F6F6"
  phoneNumber="+44 7525549320"
/>

ProgressBar

This component is a progress bar, that takes in the current stage number on the progress bar and the total number of stages. Colors will have to be manually changed on the component.

<ProgressBar numberOfStages={3} currentStage={2} />

ServiceTable

This component is a service table, with over to 5 options and the ability to customise and change the colours, label and borders. Along with 2 types of tables, one with array of the services and one with only description .

Example:

<ServiceTable serviceHeaderOne={"Shampoo Cut & Blow Dry"} color={"#292C6D"}
arrayOfService={[["Short", "£10"], ["Medium", "£20"], ["Long", "£30"]]} />

<ServiceTable serviceHeaderOne={"Bleach, Highlight & Balayage"} color={"#292C6D"}
arrayOfService={[[]]} isDescription={true}
description={"Price on consultation, Come along, pop in and have a consultation with one of our professionals."} />

ShopCartAdd

This component is a shopping-cart item to be added from the user side, with upto 8 options allowing for multiple color changes, image change and due to incorporation of the button component, more colour changes.

Example:

<ShopCardAddItem
  backgroundColorButton="#8785A2"
  borderButton="solid 1px #292C6D"
  color="#292C6D"
  colorButtonText="#F6F6F6"
  image={{
    alt: "Shampoo",
    src: "70c5b744b19e8e229d29.jpeg",
  }}
  itemDescription="Kerastese Shampoo"
  labelButton="Add"
  price={40}
/>

SlideOutMenu

This component is a slideout menu, with up to 9 options and the ability to customise and change the colours, label and borders.

Example:

<SlideOutMenu
  backgroundColor="#8785A2"
  border="1px solid #292c6d"
  color="#f6f6f6"
  slideLinkOne="Booking"
  slideLinkTwo="StyleBook"
  slideLinkThree="Services & Pricing"
  slideLinkFour="Gallery"
  slideLinkFifth="Shop"
  slideLinkSix="Contact Us"
/>

Example with NavBar:

  const [openSlide, setOpenSlide] = useState(false);
  const changeState = () => {
    setOpenSlide((prevOpenSlide) => !prevOpenSlide);
  }
<Navbar navLabel={"Women's Cut"} openNav={true} navLogo={Logo}
pageLinkOne={"Bookings"} pageLinkTwo={"Stylebook"} pageLinkThree={"Services & Pricing"}
pageLinkFour={"Gallery"} pageLinkFifth={"Shop"} pageLinkSix={"Contact Us"}
changeState={changeState} openSlide={openSlide} setOpenSlide={setOpenSlide} color="#292c6d" borderBottom="1px solid #292c6d"/>
{openSlide && (
    <SlideOutMenu backgroundColor="#8785A2" border="1px solid #292c6d" color="#f6f6f6"
    slideLinkSix="Contact Us" slideLinkFifth="Shop" slideLinkFour="Gallery" slideLinkThree="Services & Pricing"
    slideLinkTwo="StyleBook" slideLinkOne="Booking" />
  )}/>

SocialMediaFooter

This component is a social media footer, with upto 8 options and the ability to customise and change the colours, icon sizes and border for stylistic effects and add the links to the relevant icons.

<SocialMediaFooter
  backgroundColor="#8785A2"
  border="1px solid #292c6d"
  color="#f6f6f6"
  fontSize="30px"
  whatsappLink="www.whatsapp.com"
  facebookLink="www.facebook.com"
  instagramLink="www.instagram.com"
  twitterLink="www.twitter.com"
/>

StylebookCard

This component is a stylebook card, with upto 7 options and the ability to customise and change the colours and borders for stylistic effects and the card content.

<StylebookCard
  backgroundColor="#8785A2"
  border="1px solid #292c6d"
  color="#f6f6f6"
  styleImage={HairStyle}
  style={"Deep Wave with highlights"}
  price={"£29"}
  duration={"1.5 hours"}
  description={"French blowout with free flowing curls with highlights. "}
/>

Credits

TODO: Write credits

Built With

• React, SCSS, React Router and React Icons
• npm
• Rollup js
• Card games and love

License

MIT License © Spark Strand