Skip to content

Commit

Permalink
[WIP] Final format for config objects
Browse files Browse the repository at this point in the history 
This simplifies config object format and related language
around breakpoints. Prepares ground for `layoutOverride`
and `skeletonsConfig` public API that will have the same
format.
  • Loading branch information
@MisRob
MisRob committed Sep 20, 2024
1 parent 3f42452 commit daff98a
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 129 deletions.
4 changes: 2 additions & 2 deletions lib/cards/KCardGrid.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@
name: 'KCardGrid',
setup(props) {
const { currentLevelConfig } = useResponsiveGridLayout(props);
const { currentBreakpointConfig } = useResponsiveGridLayout(props);
const gridStyle = ref({});
const gridItemStyle = ref({});
watch(
currentLevelConfig,
currentBreakpointConfig,
newValue => {
const { cardsPerRow, columnGap, rowGap } = newValue;
Expand Down
149 changes: 36 additions & 113 deletions lib/cards/gridBaseLayouts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,8 @@
* corresponding to the most commonly used grids in our designs.
*/

// Breakpoint levels
// Correspond to https://design-system.learningequality.org/layout/#responsiveness
const LEVEL_0 = 'level-0';
const LEVEL_1 = 'level-1';
const LEVEL_2 = 'level-2';
const LEVEL_3 = 'level-3';
const LEVEL_4 = 'level-4';
const LEVEL_5 = 'level-5';
const LEVEL_6 = 'level-6';
const LEVEL_7 = 'level-7';

// Settings common to all breakpoint levels
const levelCommon = {
// Settings common to all breakpoints
const breakpointCommon = {
columnGap: '30px',
rowGap: '30px',
};
Expand All @@ -24,139 +13,73 @@ const levelCommon = {
* Configuration for '1-1-1' grid,
* that is a grid with 1 card per row
* on all screen sizes.
*
* Organized by breakpoints as defined in
* https://design-system.learningequality.org/layout/#responsiveness
*/
const LAYOUT_CONFIG_1_1_1 = {
[LEVEL_0]: {
cardsPerRow: 1,
...levelCommon,
},
[LEVEL_1]: {
cardsPerRow: 1,
...levelCommon,
},
[LEVEL_2]: {
cardsPerRow: 1,
...levelCommon,
},
[LEVEL_3]: {
cardsPerRow: 1,
...levelCommon,
},
[LEVEL_4]: {
cardsPerRow: 1,
...levelCommon,
},
[LEVEL_5]: {
const LAYOUT_CONFIG_1_1_1 = [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
cardsPerRow: 1,
...levelCommon,
...breakpointCommon,
},
[LEVEL_6]: {
cardsPerRow: 1,
...levelCommon,
},
[LEVEL_7]: {
cardsPerRow: 1,
...levelCommon,
},
};
];

/**
* Configuration for '1-2-2' grid,
* that is a grid with
* - 1 card per row on smaller screens
* - 2 cards per row on medium screens
* - 2 cards per row on larger screens
*
* Organized by breakpoints as defined in
* https://design-system.learningequality.org/layout/#responsiveness
*/
const LAYOUT_CONFIG_1_2_2 = {
[LEVEL_0]: {
const LAYOUT_CONFIG_1_2_2 = [
{
breakpoints: [0, 1],
cardsPerRow: 1,
...levelCommon,
},
[LEVEL_1]: {
cardsPerRow: 1,
...levelCommon,
},
[LEVEL_2]: {
cardsPerRow: 2,
...levelCommon,
},
[LEVEL_3]: {
cardsPerRow: 2,
...levelCommon,
},
[LEVEL_4]: {
cardsPerRow: 2,
...levelCommon,
...breakpointCommon,
},
[LEVEL_5]: {
{
breakpoints: [2, 3, 4, 5, 6, 7],
cardsPerRow: 2,
...levelCommon,
...breakpointCommon,
},
[LEVEL_6]: {
cardsPerRow: 2,
...levelCommon,
},
[LEVEL_7]: {
cardsPerRow: 2,
...levelCommon,
},
};
];

/**
* Configuration for '1-2-3' grid,
* that is a grid with
* - 1 card per row on smaller screens
* - 2 cards per row on medium screens
* - 3 cards per row on larger screens
*
* Organized by breakpoints as defined in
* https://design-system.learningequality.org/layout/#responsiveness
*/
const LAYOUT_CONFIG_1_2_3 = {
[LEVEL_0]: {
const LAYOUT_CONFIG_1_2_3 = [
{
breakpoints: [0, 1],
cardsPerRow: 1,
...levelCommon,
...breakpointCommon,
},
[LEVEL_1]: {
cardsPerRow: 1,
...levelCommon,
},
[LEVEL_2]: {
{
breakpoints: [2, 3],
cardsPerRow: 2,
...levelCommon,
...breakpointCommon,
},
[LEVEL_3]: {
cardsPerRow: 2,
...levelCommon,
},
[LEVEL_4]: {
cardsPerRow: 3,
...levelCommon,
},
[LEVEL_5]: {
cardsPerRow: 3,
...levelCommon,
},
[LEVEL_6]: {
{
breakpoints: [4, 5, 6, 7],
cardsPerRow: 3,
...levelCommon,
...breakpointCommon,
},
[LEVEL_7]: {
cardsPerRow: 3,
...levelCommon,
},
};
];

export const LAYOUT_1_1_1 = '1-1-1';
export const LAYOUT_1_2_2 = '1-2-2';
export const LAYOUT_1_2_3 = '1-2-3';
export const LEVELS = {
0: LEVEL_0,
1: LEVEL_1,
2: LEVEL_2,
3: LEVEL_3,
4: LEVEL_4,
5: LEVEL_5,
6: LEVEL_6,
7: LEVEL_7,
};

export const LAYOUT_CONFIGS = {
[LAYOUT_1_1_1]: LAYOUT_CONFIG_1_1_1,
[LAYOUT_1_2_2]: LAYOUT_CONFIG_1_2_2,
Expand Down
31 changes: 17 additions & 14 deletions lib/cards/useResponsiveGridLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,49 @@ import { watch, ref } from '@vue/composition-api';

import useKResponsiveWindow from '../composables/useKResponsiveWindow';

import { LAYOUT_CONFIGS, LEVELS } from './gridBaseLayouts';
import { LAYOUT_CONFIGS } from './gridBaseLayouts';

/**
* Observes the window breakpoint level
* and returns the grid layout configuration
* object for the current breakpoint level.
* Observes window size and returns the grid layout
* configuration object for the current breakpoint.
*/
export default function useResponsiveGridLayout(props) {
const currentLevelConfig = ref({});
const currentBreakpointConfig = ref({});

const { windowBreakpoint } = useKResponsiveWindow();

function getBreakpointConfig(config, breakpoint) {
const breakpointConfig = config.find(subConfig => subConfig.breakpoints.includes(breakpoint));
return breakpointConfig;
}

/**
*
* @param {Object} props `KCardGrid` props
* @param {Number} breakpoint The breakpoint level 0-7
* @param {Number} breakpoint Breakpoint 0-7
*
* @returns {Object} The grid layout configuration object
* for the given breakpoint level
* for the `breakpoint`
*/
function getLevelLayoutConfig(props, breakpoint) {
function getLayoutConfigForBreakpoint(props, breakpoint) {
const baseLayoutConfig = LAYOUT_CONFIGS[props.layout];
const baseLevelConfig = baseLayoutConfig[LEVELS[breakpoint]];

return { ...baseLevelConfig };
const baseBreakpointConfig = getBreakpointConfig(baseLayoutConfig, breakpoint);
return { ...baseBreakpointConfig };
}

watch(
windowBreakpoint,
(newBreakpoint, oldBreakpoint) => {
// can happen very briefly before the breakpoint value gets calculated
if (newBreakpoint === null) {
currentLevelConfig.value = getLevelLayoutConfig(props, 0);
currentBreakpointConfig.value = getLayoutConfigForBreakpoint(props, 0);
}
if (newBreakpoint !== oldBreakpoint) {
currentLevelConfig.value = getLevelLayoutConfig(props, newBreakpoint);
currentBreakpointConfig.value = getLayoutConfigForBreakpoint(props, newBreakpoint);
}
},
{ immediate: true }
);

return { currentLevelConfig };
return { currentBreakpointConfig };
}

0 comments on commit daff98a

Please sign in to comment.