From 4d53f9e38d018f52b89e3fd2328a5ec032a04a5f Mon Sep 17 00:00:00 2001 From: Michaela Robosova Date: Fri, 20 Sep 2024 09:21:29 +0200 Subject: [PATCH] Final format for config objects This simplifies config object format and related language around breakpoints. Prepares ground for `layoutOverride` and `skeletonsConfig` public API that will have the same format. --- lib/cards/KCardGrid.vue | 4 +- lib/cards/gridBaseLayouts.js | 149 +++++++-------------------- lib/cards/useResponsiveGridLayout.js | 31 +++--- 3 files changed, 55 insertions(+), 129 deletions(-) diff --git a/lib/cards/KCardGrid.vue b/lib/cards/KCardGrid.vue index 8296a8485..ea8ff563a 100644 --- a/lib/cards/KCardGrid.vue +++ b/lib/cards/KCardGrid.vue @@ -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; diff --git a/lib/cards/gridBaseLayouts.js b/lib/cards/gridBaseLayouts.js index 35b6fdb51..5898d654f 100644 --- a/lib/cards/gridBaseLayouts.js +++ b/lib/cards/gridBaseLayouts.js @@ -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', }; @@ -24,41 +13,17 @@ 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, @@ -66,41 +31,22 @@ const LAYOUT_CONFIG_1_1_1 = { * - 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, @@ -108,55 +54,32 @@ const LAYOUT_CONFIG_1_2_2 = { * - 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, diff --git a/lib/cards/useResponsiveGridLayout.js b/lib/cards/useResponsiveGridLayout.js index 0fecebc1b..a1bc3dc81 100644 --- a/lib/cards/useResponsiveGridLayout.js +++ b/lib/cards/useResponsiveGridLayout.js @@ -2,31 +2,34 @@ 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( @@ -34,14 +37,14 @@ export default function useResponsiveGridLayout(props) { (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 }; }