spradling-component-library

Descripción

Esta es una librería de componentes React diseñada para crear interfaces de usuario consistentes y reutilizables.

Instalación

npm install spradling-component-library

Actualmente la libreria esta configurada con la fuente gill Sans y Dala moa para algunos titulos.

Importación de estilos

En el Layout principal o pagina principal del proyecto importar los estilos de la libreria

import "spradling-component-library/dist/styles.css";

Componentes Globales

Button Landings

Boton principal para landings, se puede configurar con 2 tipos de estilo, y se le pasa la función que debe ejecutar cuando se le da click, se le debe pasar una prop llamada content con el contenido del boton y una prop type con el tipo que sera un valor entre 1 y 2, de la siguiente manera:

Boton tipo 1 es el boton normal de todas las paginas

Boton tipo 2 es el boton que aparece cuando se hace scroll en la pagina y esta siempre en la parte inferior de la pagina

Propiedades

type : 1 | 2;
content: string;
handleClick: () => void;

Uso

import { Button } from "spradling-component-library";

<Button
  type={1}
  content="Texto del boton"
  handleClick={() => console.log("Button Clicked")}
/>;

Banner Landings

Banner principal para landings, muestra una imagen o un video dependiendo de su prop isImage, y tiene las siguientes props para agregar el contenido multimedia, mediaSrcDesktop, mediaSrcMobile, imgSrc de la siguiente manera:

Propiedades

{
  isImage: boolean;
  imgSrc: string;
  mediaSrcDesktop: string;
  mediaSrcMobile: string;
}

Uso

Video

import { Banner } from "spradling-component-library";

<Banner
  isImage={false}
  mediaSrcDesktop="https://vimeo.com&321312312"
  mediaSrcMobile="https://vimeo.com&321312312"
/>;

Imagen

import { Banner } from "spradling-component-library";

<Banner isImage={true} imgSrc="https://static.com&image.jpg" />;

Section Landings

Componente Section, sirve como container para las diferentes secciones de las landings, se le pasa como props el id de la sección, se le debe agregar contenido adentro siempre y se le pasa tambien la prop type, que sera un numero entre 1 y 2, tipo 1 tendra siempre margenes, tipo 2 no tendra margenes en mobile.

Propiedades

{
  type: 1 | 2;
  id: string;
}

Uso

import { Section } from "spradling-component-library";

<Section
  type={1}
  id="colors"
>
    <Information />
<Section/>

Hero Banner Landings

Hero principal para landings, incluye el Banner, titulo, descripción y boton de cada elemento, se puede configurar con varias imagenes o videos y boton de pausa, o una sola imagen o video, mediante la prop type que puede ser slider o default, si no se coloca la propiedad type tomara default, tambien se le debe pasar un array con el contenido a mostrar de la siguiente manera:

Propiedades

{
  type : "default" | "slider"
  content: [
    {
          title: string;
          description: string;
          buttonText: string;
          spanText: string;
          isImage: boolean;
          imgSrc: string;
          mediaSrcDesktop: string;
          mediaSrcMobile: string;
          handleClick: () => void;
      }
  ]
}

Uso

import { Hero } from "spradling-component-library";

<Hero type="slider"
    content=[
      {
        title: "Example title:",
        description: 'Example description.',
        buttonText: "Example button text",
        spanText: "Example span text",
        isImage: false,
        mediaSrcDesktop: "https://vimeo.com&321312312",
        mediaSrcMobile: "https://vimeo.com&321312312",
        handleClick: () => console.log("Example Button 1 clicked")
        },
        {
          title: "Example title 2:",
        description: 'Example description 2.',
        buttonText: "Example button text 2",
        spanText: "Example span text 2",
        isImage: false,
        mediaSrcDesktop: "https://vimeo.com&321312312",
        mediaSrcMobile: "https://vimeo.com&321312312",
        handleClick: () => console.log("Example Button 2 clicked")
        }
    ]
/>

Tipo Slider

Tipo default

Footer Landings

Footer principal, incluye el logo centrado y se le puede agregar texto:

Propiedades

{
  text: string;
}

Uso

import { Footer } from "spradling-component-library";

<Footer text="Fresh Colors, Classic Silvertex." />;

Kizuna Cols

Componente de varias columnas con imagen, titulo y descripción, ademas se pueden tener 2, 3 o 4 columnas, las cuales se configuran dependiendo la cantidad de elementos que se agreguen

Propiedades

{
  content: [
    {
      title: string;
      description: string;
      imgSrc: string;
      href: string;
    }
  ]
}

Uso

import { KizunaCols } from "spradling-component-library";

<Hero type="slider"
    content=[
      {
        title: "Checker",
          imgSrc: "/images/checker.jpg",
          description: "View Colors",
          href: "#",
        },
        {
          title: "Artisan",
          imgSrc: "/images/artisan.jpg",
          description: "View Colors",
          href: "#",
        },
        {
          title: "Tweed",
          imgSrc: "/images/tweed.jpg",
          description: "View Colors",
          href: "#",
        },
    ]
/>

Text Image Slider

Componente slider con texto, tiene 2 tipos, tipo "kizuna" o tipo "vestige, ambos vienen con imagen y texto, se le puede configurar autoplay, para que se vaya pasando automaticamente, tiempo de cambio tambien por medio de la prop timer la cual es el valor en milisegundos, si no se configura tipo, queda predeterminado "kizuna", si no se configura autoPlay queda en false, y si no se configura timer queda en 5000 osea 5 segundos

Propiedades

{
  content: [
    {
      title?: string;
      description: string;
      src: string;
      alt: string;
    }
  ]
  type?: "kizuna" | "vestige";
  autoPlay?: boolean;
  timer?: number;
}

Uso

tipo Kizuna con autoPlay y tiempo de 7 segundos

import { TextImageSlider } from "spradling-component-library";

<TextImageSlider
  content=[
    {
      title: "Project 1",
      description: "Description of project 1",
      src: "/images/Inspired-slide1.jpg",
      alt: "Description of image 1",
    },
    {
      title: "Project 2",
      description: "Description of project 2",
      src: "/images/Inspired-slide2.jpg",
      alt: "Description of image 2",
    },
  ]
  autoPlay
  timer={7000}/>

tipo vestige sin autoPlay

import { TextImageSlider } from "spradling-component-library";

<TextImageSlider
  content=[
    {
      title: "Project 1",
      description: "Description of project 1",
      src: "/images/Inspired-slide1.jpg",
      alt: "Description of image 1",
    },
    {
      title: "Project 2",
      description: "Description of project 2",
      src: "/images/Inspired-slide2.jpg",
      alt: "Description of image 2",
    },
  ]
  type="vestige"/>

Projects

Componente de varios proyectos, con imagen de fondo y colores utilizados en el proyecto.

Propiedades

interface ColorProps {
  name: string;
  hex: string;
  imgSrc?: string;
  isImg?: boolean;
  new: boolean;
  code: string;
}

{
  content: [
    {
      title: string;
      description: string;
      src: string;
      alt: string;
      storyColors: ColorProps[];
    }
  ]
  title: string;
  handleStoryColorClick: (color: ColorProps) => void;
}

Uso

import { Section, Projects } from "spradling-component-library";

const PROJECT_INFO = [
  {
    title: "Project 1",
    description: "Description of project 1",
    src: "/images/Inspired-slide1.jpg",
    alt: "Description of image 1",
    storyColors: [
      { name: "Dusty Pine", new: true, code: "STX-8849", hex: "#5E775C" },
      { name: "Colonial Green", new: true, code: "STX-8850", hex: "#2B3625" },
      { name: "Jade", new: true, code: "STX-8848", hex: "#656F4E" },
      { name: "Spearmint", new: true, code: "STX-8847", hex: "#848661" },
      { name: "Skydive", new: true, code: "STX-8851", hex: "#6A878C" },
      { name: "Sail", new: true, code: "STX-8843", hex: "#8B9A9E" },
    ],
  },
  {
    title: "Project 2",
    description: "Description of project 2",
    src: "/images/Inspired-slide2.jpg",
    alt: "Description of image 2",
    storyColors: [
      { name: "Coastal", new: true, code: "STX-8844", hex: "#657176" },
      { name: "Islet", new: true, code: "STX-8845", hex: "#455363" },
      { name: "Endless Sea", new: true, code: "STX-8846", hex: "#35404B" },
      { name: "Pavestone", new: true, code: "STX-8852", hex: "#948C6F" },
      { name: "Macadamia", new: true, code: "STX-8856", hex: "#000000" },
      { name: "Sand", new: true, code: "STX-8854", hex: "#000001" },
    ],
  },
  {
    title: "Project 3",
    description: "Description of project 3",
    src: "/images/Inspired-slide3.jpg",
    alt: "Description of image 3",
    storyColors: [
      { name: "Coastal", new: true, code: "STX-8844", hex: "#657176" },
      { name: "Islet", new: true, code: "STX-8845", hex: "#455363" },
      { name: "Endless Sea", new: true, code: "STX-8846", hex: "#35404B" },
      { name: "Dusty Pine", new: true, code: "STX-8849", hex: "#5E775C" },
      { name: "Colonial Green", new: true, code: "STX-8850", hex: "#2B3625" },
      { name: "Jade", new: true, code: "STX-8848", hex: "#656F4E" },
    ],
  },
  {
    title: "Project 4",
    description: "Description of project 4",
    src: "/images/Inspired-slide4.jpg",
    alt: "Description of image 4",
    storyColors: [
      { name: "Spearmint", new: true, code: "STX-8847", hex: "#848661" },
      { name: "Skydive", new: true, code: "STX-8851", hex: "#6A878C" },
      { name: "Sail", new: true, code: "STX-8843", hex: "#8B9A9E" },
      { name: "Coastal", new: true, code: "STX-8844", hex: "#657176" },
      { name: "Islet", new: true, code: "STX-8845", hex: "#455363" },
      { name: "Endless Sea", new: true, code: "STX-8846", hex: "#35404B" },
    ],
  },
];

<Section id="story" type={2}>
  <Projects 
    content={PROJECT_INFO} 
    title="Titulo de los proyectos" 
    handleColorStoryClick={(color) => console.log(color.name) } 
  />
</Section>;

Header

Componente de encabezado (Header) que representa la barra superior de navegación del sitio. Este componente incluye:

• El logotipo de Spradling.
• Una lista de enlaces de navegación que redirigen a secciones específicas de la página.

  ⚠️ El valor de href de cada enlace debe coincidir con el id del elemento destino.

• Un ícono de carrito de compras que muestra la cantidad de ítems agregados (cartItems) y ejecuta una función (handleCartClick) al hacer clic.

Tipos de encabezado

El componente admite dos variantes, determinadas por la prop type:

• Standard: barra de navegación completa con enlaces visibles.
• Compact: diseño reducido con menú desplegable y opciones de personalización.

La estructura del encabezado se adapta automáticamente en función del tipo especificado, ofreciendo flexibilidad para distintas interfaces y dispositivos.

La propiedad blur del type 1 es opcional, su valor por default es false, si se coloca en true el fondo del encabezado tendrá un efecto translúcido y desenfocado (glassmorphism), permitiendo ver el contenido detrás con un suave desenfoque, mientras que los textos y elementos del header mantienen su color y nitidez.

Propiedades del type: 1

interface StandardHeaderProps {
  links: {
    text: string;
    href: string;
  }[];
  cartItems: number;
  handleCartClick: () => void;
  blur?: boolean;
}

Uso type: 1

import { Header } from "spradling-component-library";

<Header
  type={1}
  content={{
    links=[
      {
        text: "Samples Request",
        href: "/#colors",
      },
      {
        text: "Technical Information",
        href: "/#information",
      },
      {
        text: "Story Colors",
        href: "/#story",
      },
    ]
    cartItems={cartItems}
    handleCartClick={()=>console.log("cart Clicked")}
  }}
/>

Header type 1

Propiedades del type: 2

interface CompactHeaderItems {
  text: string;
  href: string;
}

interface CompactHeaderProps {
  navbarLogo?: string;
  menuText?: string;
  customLogo?: boolean;
  customLogoSrc?: string;
  menuItems: CompactHeaderItems[];
  additionalItems?: CompactHeaderItems[];
  cartItems: number;
  handleCartClick: () => void;
}

Uso type: 2

import { Header } from "spradling-component-library";

<Header 
  type={2}
  content={{
    menuText: "Compact Header",
    menuItems: LINKS,
    additionalItems: LINKS,
    cartItems: 10,
    handleCartClick: handleOpenModalClick
  }}
/>

Header type 2

Colors o Samples

Componente de muestras, en el cual se muestran los diferentes colores disponibles de la linea, tiene 2 tipos de, los cuales se manejan con la prop sliderType, el cual se le pasa un valor númerico entre 1 y 2, el tipo 1 muestra la lista completa de muestras, el tipo 2 resume la lista de muestras, se le pasa un arreglo en la propiedad content, con los colores disponibles, el color principal en la prop mainColor, 2 funciones addToCart que es para añadir una muestra al carrito y setMainColor que es para cambiar el color principal, buttonText, es el texto que llevara el boton de añadir muestra principal, y titleText sera el titulo de la sección de muestras, los objetos de color, pueden llevar color de fondo o imagen de fondo, el cual se valida con la prop isImg.

Propiedades

interface ColorProps {
  name: string;
  hex: string;
  imgSrc?: string;
  isImg?: boolean;
  new: boolean;
  code: string;
}

{
  content: ColorProps[];
  mainColor: ColorProps;
  addToCart?: (color: ColorProps) => void;
  setMainColor: (color: ColorProps) => void;
  buttonText: string;
  productsTitle: string;
  masterSampleTitle?: string;
  sliderType: 1 | 2;
}

Uso

import { Colors, Section } from "spradling-component-library";

const COLORS = [
  { name: "Dusty Pine", new: true, code: "STX-8849", hex: "#5E775C", isImg: true, imgSrc: "/images/artisan.jpg" },
  { name: "Colonial Green", new: false, code: "STX-8850", hex: "#2B3625" },
  { name: "Jade", new: true, code: "STX-8848", hex: "#656F4E" }
]

<Section id="colors">
  <Colors
    content={COLORS}
    mainColor={mainColor}
    setMainColor={setMainColor}
    addToCart={(color) => console.log(color.name) }
    buttonText="add memo sample"
    titleText="43 Colorways"
    sliderType={1}
  />
</Section>

Colors Tipo 1

Colros Tipo 2

Information e InfoItem

Acordion con items desplegables independientes.

Propiedades

interface InformationProps {
  children: ReactNode
}

interface InfoItemProps {
  title: string;
  isSustainabilityItem?: boolean;
  isDocument?: boolean;
  children?: ReactNode;
  handleClick?: (title: string) => void;
}

Uso

import { Information, InfoItem, Section } from "spradling-component-library";

<Section id="information">
          <Information>
            <InfoItem
              title={"Sustainable Product Profile"}
              isSustainabilityItem={true}
              isDocument={false}
            >
              <Sustainability />
            </InfoItem>
            <InfoItem
              title={"Characteristics"}
              isSustainabilityItem={false}
              isDocument={false}
            >
              <Characteristics />
            </InfoItem>
            <InfoItem
              title={"Care & Cleaning Guide"}
              isSustainabilityItem={false}
              isDocument={true}
              handleClick={handleInfoClick}
            />
          </Information>
        </Section>

Modal

Componente modal, el cual tiene 2 tipos, controlados por la prop type, son "default" y "form".

Propiedades

interface CartItemProps {
  name: string;
  hex: string;
  imgSrc?: string;
  isImg?: boolean;
  new: boolean;
  code: string;
  isCatalogue?: boolean;
  qantity?: number;
}

{
  isOpen: boolean;
  lastAdded: string;
  handleCloseButton: () => void;
  handleFinishButton: () => void;
  type?: string;
  children?: ReactNode;
  buttonText?: string;
  handleClick?: () => void;
  cartItems: CartItemProps[];
}

Uso

import { Modal } from "spradling-component-library";

<Modal
  isOpen={isOpenModal}
  handleCloseButton={handleCloseModal}
  handleFinishButton={handleFinishButton}
  type={modalType}
  buttonText="FINISH YOUR ORDER HERE!"
  cartItems={cart}
  lastAdded={lastAdded}
>
  <h3 className="title-modal title-dala">Sample Request</h3>
  <p className="text-modal">
    Fill out the form below. and request your samples!
    <br /> All fields with (*) are required.
  </p>
</Modal>

Tipo 1 default

Tipo 2 form