@telus-uds/components-base 1.72.0 → 1.74.0

package/src/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -1,20 +1,35 @@
 import { viewports } from '@telus-uds/system-constants'
 
+const inherit = ({ xs, sm = xs, md = sm, lg = md, xl = lg }) => ({ xs, sm, md, lg, xl })
+
 /**
  * @typedef { Object } CssStyles
- * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ */
+
+/**
+ * @typedef { Object } ViewportStyles
+ * @property { CssStyles } xs - The CSS styles for the "xs" viewport (required).
+ * @property { CssStyles } [sm] - Optional styles for the "sm" viewport. Inherits from "xs" if not specified.
+ * @property { CssStyles } [md] - Optional styles for the "md" viewport. Inherits from "sm" if not specified.
+ * @property { CssStyles } [lg] - Optional styles for the "lg" viewport. Inherits from "md" if not specified.
+ * @property { CssStyles } [xl] - Optional styles for the "xl" viewport. Inherits from "lg" if not specified.
+ */
+
+/**
  * @typedef { Record<String, CssStyles> } MediaQueryStyles
  */
 
 /**
  * Generates media query styles based on specified viewport styles.
- * @param {ViewportStyles} viewportStyles
- * @returns { MediaQueryStyles }
+ * @param { Object } viewportStyles - The styles for different viewports.
+ * @param { boolean } [shouldInherit=true] - Flag indicating whether to inherit styles.
+ * @returns { Object } - The media query styles.
  */
 
-function createMediaQueryStyles(viewportStyles) {
-  const viewportsArray = Object.keys(viewportStyles)
-  const mediaQueries = Object.entries(viewportStyles).reduce((acc, [viewport, styles]) => {
+function createMediaQueryStyles(viewportStyles, shouldInherit = true) {
+  const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles
+  const viewportsArray = viewports.keys
+  const mediaQueries = Object.entries(effectiveStyles).reduce((acc, [viewport, styles]) => {
     const minWidth = viewports.map.get(viewport)
     const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1]
     const maxWidth = viewports.map.get(nextViewport)