@xo-union/tk-component-header-nav/lib/components/HeaderNav/MegaMenus/layouts.js

/**
 * layout guidelines: Use these to configure the columns sizes in
 * a way where the menu columns align with the underlying page grid
 *
 * NOTE: This alignment is only necessary in the breakpoint where the sections are aligned
 *  (alignedSectionsBreakpoint)
 *
 *
    when featuredSectionColumn 11
      linkSectionColumns is 1
      linkColumnProps can be ([actual: looks like]):
         12: 1

    when featuredSectionColumn: 10
      linkSectionColumns is 2
      linkColumnProps can be ([actual: looks like]):
        12: 2
        6: 1

    when featuredSectionColumn: 9
      linkSectionColumns is 3
      linkColumnProps can be ([actual: looks like]):
        12: 3
        8: 2
        4: 1

    when featuredSectionColumn: 8
      linkSectionColumns is 4
      linkColumnProps can be ([actual: looks like]):
        12: 4
        9: 3
        6: 2
        3: 1

    when featuredSectionColumn: 7
      linkSectionColumns is 5
      linkColumnProps can be ([actual: looks like]):
        12: 5

    when featuredSectionColumn: 6
      linkSectionColumns is 6
      linkColumnProps can be ([actual: looks like]):
        12: 6
        10: 5
        8: 4
        6: 3
        4: 2
        2: 1

    when featuredSectionColumn: 5
      linkSectionColumns is 7
      linkColumnProps can be ([actual: looks like]):
        12: 7

    when featuredSectionColumn: 4
      linkSectionColumns is 8
      linkColumnProps can be ([actual: looks like]):
        12: 8
        9: 6
        6: 4
        3: 2

    when featuredSectionColumn: 3
      linkSectionColumns is 9
      linkColumnProps can be ([actual: looks like]):
        12: 9
        8: 6
        4: 3

    when featuredSectionColumn: 2
      linkSectionColumns is 10
      linkColumnProps can be ([actual: looks like]):
        12: 10
        6: 5

    when featuredSectionColumn: 1
      linkSectionColumns is 11
      linkColumnProps can be ([actual: looks like]):
        12: 11
   */
export const layout4LinkColsAnd4SmallFeaturedUnits = {
  name: 'layout4LinkColsAnd4SmallFeaturedUnits',
  alignSectionsBreakpoint: 'lg',
  linkSection: {
    numberOfColumns: 4
  },
  featuredSection: {
    unitSize: 'sm',
    numberOfColumns: {
      xs: 2,
      md: 4,
      lg: 2
    },
    containerColumnProps: {
      xs: '12',
      lg: '4'
    }
  }
};
export const layout4LinkColsAnd1ExtraLargeFeaturedUnit = {
  name: 'layout4LinkColsAnd1ExtraLargeFeaturedUnit',
  alignSectionsBreakpoint: 'lg',
  linkSection: {
    numberOfColumns: 4
  },
  featuredSection: {
    numberOfColumns: {
      xs: 1
    },
    unitSize: 'xl',
    containerColumnProps: {
      xs: '12',
      lg: '4'
    }
  }
};
export const layout4LinkColsAnd2LargeFeaturedUnits = {
  name: 'layout4LinkColsAnd2LargeFeaturedUnits',
  alignSectionsBreakpoint: 'lg',
  linkSection: {
    numberOfColumns: 4
  },
  featuredSection: {
    numberOfColumns: {
      xs: 1,
      md: 2,
      lg: 1
    },
    unitSize: 'lg',
    containerColumnProps: {
      xs: '12',
      lg: '4'
    }
  }
};
export const layout3LinkColsAnd2LargeFeaturedUnits = {
  name: 'layout3LinkColsAnd2LargeFeaturedUnits',
  alignSectionsBreakpoint: 'lg',
  linkSection: {
    numberOfColumns: 3
  },
  featuredSection: {
    numberOfColumns: {
      xs: 1,
      md: 2,
      lg: 1
    },
    unitSize: 'lg',
    containerColumnProps: {
      xs: '12',
      lg: '4'
    }
  },
  linkColumnProps: {
    xs: '12',
    md: '3'
  }
};
export const layout2LinkColsAnd1LargeFeaturedUnit = {
  name: 'layout2LinkColsAnd1LargeFeaturedUnit',
  alignSectionsBreakpoint: 'md',
  linkSection: {
    numberOfColumns: 2
  },
  featuredSection: {
    unitSize: 'lg',
    numberOfColumns: {
      xs: 1
    },
    containerColumnProps: {
      xs: '12',
      md: '6'
    }
  },
  linkColumnProps: {
    xs: '12',
    md: '6',
    lg: '4'
  }
};
export const layout2LinkColsAnd4SmallFeaturedUnits = {
  name: 'layout2LinkColsAnd4SmallFeaturedUnits',
  alignSectionsBreakpoint: 'lg',
  linkSection: {
    numberOfColumns: 2
  },
  featuredSection: {
    numberOfColumns: {
      xs: 2,
      md: 4
    },
    unitSize: 'sm',
    containerColumnProps: {
      xs: '12',
      lg: '8',
      xxl: '6'
    }
  },
  linkColumnProps: {
    xs: '12',
    md: '3',
    lg: '6',
    xxl: '4'
  }
};
export const layout3LinkColsAnd4SmallFeaturedUnits = {
  __forgiveGridMisalignment: true,
  name: 'layout3LinkColsAnd4SmallFeaturedUnits',
  alignSectionsBreakpoint: 'xl',
  linkSection: {
    numberOfColumns: 3
  },
  featuredSection: {
    numberOfColumns: {
      xs: 2,
      md: 4
    },
    unitSize: 'sm',
    containerColumnProps: {
      xs: '12',
      xl: '7',
      // WARNING! FORCE GRID MISALIGNMENT
      xxl: '6'
    }
  },
  linkColumnProps: {
    xs: '12',
    md: '3',
    xl: '4'
  }
};
export const layout3LinkColsAnd2SmallFeaturedUnits = {
  name: 'layout3LinkColsAnd2SmallFeaturedUnits',
  alignSectionsBreakpoint: 'lg',
  linkSection: {
    numberOfColumns: 3
  },
  featuredSection: {
    numberOfColumns: {
      xs: 2
    },
    unitSize: 'sm',
    containerColumnProps: {
      xs: '12',
      lg: '4'
    }
  },
  linkColumnProps: {
    xs: '12',
    md: '3'
  }
};
export const layout2LinkColsAnd2SmallFeaturedUnits = {
  name: 'layout2LinkColsAnd2SmallFeaturedUnits',
  alignSectionsBreakpoint: 'md',
  linkSection: {
    numberOfColumns: 2
  },
  featuredSection: {
    unitSize: 'sm',
    numberOfColumns: {
      xs: 2
    },
    containerColumnProps: {
      xs: '12',
      md: '6'
    }
  },
  linkColumnProps: {
    xs: '12',
    md: '6',
    lg: '4'
  }
};
export const layout2LinkColsAnd3SmallFeaturedUnits = {
  name: 'layout2LinkColsAnd3SmallFeaturedUnits',
  alignSectionsBreakpoint: 'lg',
  linkSection: {
    numberOfColumns: 2
  },
  featuredSection: {
    numberOfColumns: {
      xs: 2,
      md: 3
    },
    unitSize: 'sm',
    containerColumnProps: {
      xs: '12',
      lg: '8'
    }
  },
  linkColumnProps: {
    xs: '12',
    md: '3',
    lg: '6'
  }
};