Skip to content

Commit

Permalink
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 4d53f9e
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 4d53f9e

Please sign in to comment.