nickgrato

<Button
  label="cancel"
  size={ButtonSizesE.LARGE}
  category={ButtonCategoriesE.PRIMARY_OUTLINE}
  icon="arrow-left"
/>

nickgrato

const Button = ({
  category = ButtonCategoriesE.PRIMARY_SOLID,
  size = ButtonSizesE.MEDIUM,
  ......


  /**
   * Configure CSS Class
   */
  const className = `

nickgrato

/******************************
        PRIMARY BUTTONS
******************************/

/*-------------------------------
  SOLID BUTTON 
-------------------------------*/
.button_primary_solid {
  @include rect_button_base();
  background-color: $color-interaction-primary;

nickgrato

/**
 * Enums are formatted in snake_case so that we can use the mapped
 * value as a SCSS value.
 */
export enum ButtonCategoriesE {
  PRIMARY_SOLID = 'primary_solid',
  PRIMARY_OUTLINE = 'primary_outline',
  PRIMARY_CLEAR = 'primary_clear',
  SECONDARY_SOLID = 'secondary_solid',
  SECONDARY_OUTLINE = 'secondary_outline',

nickgrato

export class PriceSpecification {
  /**
   * @param {min: Number, max: Number} price
   */
  constructor(price) {
    this.min = price.min
    this.max = price.max
  }

  /**

nickgrato

export class ColorSpecification {
  
  /**
   * @param color: String
   */
  constructor(color) {
    this.color = color
  }

 /**

nickgrato

const filterByColor = color => {

  this.products.filter( product => {
    let colorFound

    // [0] index in this case is the 'color' options
    const colors = product.options[0].values 

    if(colors.indexOf(color) != -1) colorFound = true