@escaladesports/components v2.0.0

@escaladesports/components

Reusable React components for Escalade Sports sites/apps

Components:

• Breadcrumbs
• AttributeWidgets

<Breadcrumbs>

For rendering navigational breadcrumbs at the top of a page. Renders a fully-customizable <ul> and includes forward slashes inside the <li> elements to act as separators by default.

Example Usage

const crumbs = [
  {
    to: `/`,
    label: `Home`
  },
  <SomeComponent />,
  `Plain Text Crumb`,
  {
    href: `https://escaladesports.com`,
    text: `Random External Link`,
    tag: SomeOtherComponent
  },
  <div>Totally custom!</div>
  {
    link: `/check-me-out`,
    text: `Notice the different properties accepted`
  }
]

return (
  <Breadcrumbs
    crumbs={crumbs}
    length={3}
    ellipsis="...."
    separator={<SlashIcon />}
    beginSeparator
    endSeparator="/ THE END"
    css={customBreadcrumbStyles}
  />
)

The crumbs Prop

An array of objects, strings, or React elements representing the crumbs.

Each crumb object can contain a destination URL property (see below table) to make the crumb a link. Inside the <li> for the crumb, an anchor tag will be rendered if the URL is absolute (starts with http), or a Gatsby <Link> will be rendered if the URL is relative. Non-link crumbs will use a <span>. Otherwise, a custom component can be specified (see tag below).

When using an object for a crumb, the following properties are accepted:

All Props for <Breadcrumbs>

<AttributeWidgets>

Renders groups of inputs/dropdowns for selecting product attributes (e.g. Size or Color) based on attributes described in a config object (see the config prop) and a list of product variants (see the variants prop).

Automatically enables/disables options for each attribute based on combinations that actually exist in a supplied list of product variants (see the variants prop below).

On select, returns the actual ID or SKU of the new product variant resulting from the new combination of attribute values.

Example Usage

Inside or outside a React component:

const variants = [
  {
    sku: `1ABC`,
    name: `Small Yellow Product`,
    color: `Yellow`,
    size: `Small`,
    version: `Version A`
  },
  {
    sku: `2XYZ`,
    name: `Large Blue Product`,
    color: `Blue`,
    size: `Large`,
    version: `Version A`
  },
  ...
]

const config = {
  color: {
    label: `Select a color`,
    section: `fancyWidgets`,
    component: ColorWidget
  },
  size: {
    label: `Select a size`,
    section: `dropdowns`,
    component: BasicDropdownWidget
  },
  version: {
    label: `Select a version`,
    section: `dropdowns`,
    component: BasicDropdownWidget
  }
}

Inside a React component:

// Example of a change handler to deal w/ the new SKU
const handleChange = newSku => {
  setPageState({ sku: newSku })
}

return (
  <>
    <AttributeWidgets
      section="fancyWidgets"
      config={config}
      variants={variants}
      initial={variants[0].sku}
      onChange={handleChange}
    />
    <div className="other-area-in-layout">
      <AttributeWidgets
        section="dropdowns"
        config={config}
        variants={variants}
        initial={variants[0].sku}
        onChange={handleChange}
      />
    </div>
  </>
)

The config Prop

Object defining the selectable attributes.

Keys should match corresponding properties on each variant in the variants array (see below). For example: if one of the keys in config is size, at least one of the product variants should have a size property.

Values should be objects with these properties:

The variants Prop

Array of related variations of a product. Each member of the array should be an object containing at minimum:

• A sku, id, or similar identifier (key must match the identifier prop passed to <AttributeWidgets> – defaults to sku)
• Properties with keys corresponding to the attributes in config (see above)

Other Props