Merge pull request #80 from PMET-public/develop

PageBuilder Responsive Styling
PMET-public · Mar 29, 2021 · 7d50fda · 7d50fda
2 parents c2e63a5 + a3edd23
commit 7d50fda
Show file tree

Hide file tree

Showing 31 changed files with 110 additions and 38 deletions.
diff --git a/.gitignore b/.gitignore
@@ -42,6 +42,4 @@ jspm_packages
 
 # Environment Variables
 .env
-.now
-
-lib/apollo/possibleTypes.json
+.now
diff --git a/components/PageBuilder/ContentTypes/Banner/Banner.tsx b/components/PageBuilder/ContentTypes/Banner/Banner.tsx
@@ -22,13 +22,13 @@ export type BannerProps = {
     }>
 }
 
-export const Banner: Component<BannerProps> = ({ appearance = 'poster', background, button, content, link, overlay, showButton, showOverlay, style, ...props }) => {
+export const Banner: Component<BannerProps> = ({ appearance = 'poster', background, button, content, link, overlay, showButton, showOverlay, style, 'data-pb-style': pbStyle, ...props }) => {
     const contentHtml = useHtml(content?.html)
 
     return (
         <Root as={link ? (p: any) => <Link {...link} {...p} /> : 'div'} $showButton={showButton} $showOverlay={showOverlay} $overlayColor={overlay && overlay.overlayColor} {...props}>
             <Container {...background} as={ContentWithBackground}>
-                <Wrapper $appearance={appearance} style={style}>
+                <Wrapper $appearance={appearance} style={style} data-pb-style={pbStyle}>
                     <Overlay {...overlay}>
                         <ContentWrapper>
                             {content && <Content {...content}>{contentHtml}</Content>}

diff --git a/components/PageBuilder/ContentTypes/Banner/config.ts b/components/PageBuilder/ContentTypes/Banner/config.ts
@@ -8,7 +8,7 @@ import { ContentWithBackgroundProps } from '../../lib/ContentWithBackground'
 const component = dynamic(() => import('./'))
 
 const props = (elem: HTMLElement) => {
-    const { appearance, showButton, showOverlay } = elem.dataset
+    const { appearance, showButton, showOverlay, pbStyle } = elem.dataset
 
     const style = getStyleAsObject(elem.style)
 
@@ -48,6 +48,7 @@ const props = (elem: HTMLElement) => {
                   }
                 : undefined,
         style: getStyleAsObject(wrapperElem.style),
+        'data-pb-style': wrapperElem.dataset.pbStyle,
     }
 
     /** Get Button */
@@ -56,6 +57,7 @@ const props = (elem: HTMLElement) => {
         secondary: buttonElem.classList.contains('pagebuilder-button-secondary') ? true : false,
         text: buttonElem.textContent || '',
         style: getStyleAsObject(buttonElem.style),
+        'data-pb-style': buttonElem.dataset.pbStyle,
         outline: buttonElem.classList.contains('pagebuilder-button-link') ? true : false,
     }
 
@@ -65,6 +67,7 @@ const props = (elem: HTMLElement) => {
         ...contentElem.dataset,
         html: contentElem.innerHTML,
         style: getStyleAsObject(contentElem.style),
+        'data-pb-style': contentElem.dataset.pbStyle,
     }
 
     /** Get Overlay */
@@ -74,13 +77,15 @@ const props = (elem: HTMLElement) => {
     const overlay = overlayElem && {
         ...overlayElem.dataset,
         style: getStyleAsObject(overlayElem.style),
+        'data-pb-style': overlayElem.dataset.pbStyle,
     }
 
     if (videoOverlayElement?.dataset.videoOverlayColor) {
         overlay.style.backgroundColor = videoOverlayElement.dataset.videoOverlayColor
     }
 
     return {
+        'data-pb-style': pbStyle,
         appearance,
         background,
         button,

diff --git a/components/PageBuilder/ContentTypes/Block/config.ts b/components/PageBuilder/ContentTypes/Block/config.ts
@@ -4,11 +4,13 @@ import { getStyleAsObject } from '../../lib/getStyleAsObject'
 const component = dynamic(() => import('./'))
 
 const props = (elem: HTMLElement) => {
+    const { pbStyle } = elem.dataset
     const style = getStyleAsObject(elem.style)
 
     const html = elem.children[0]?.innerHTML
 
     return {
+        'data-pb-style': pbStyle,
         style,
         html,
     }

diff --git a/components/PageBuilder/ContentTypes/ButtonItem/config.ts b/components/PageBuilder/ContentTypes/ButtonItem/config.ts
@@ -15,6 +15,8 @@ const props = (elem: HTMLElement) => {
 
     const style = getStyleAsObject(elem.style)
 
+    const pbStyle = elem.dataset.pbStyle
+
     const button: ButtonProps = {
         text: elem.textContent || '',
     }
@@ -32,6 +34,7 @@ const props = (elem: HTMLElement) => {
             : undefined
 
     return {
+        'data-pb-style': pbStyle,
         button,
         link,
         style,

diff --git a/components/PageBuilder/ContentTypes/Buttons/config.ts b/components/PageBuilder/ContentTypes/Buttons/config.ts
@@ -6,9 +6,10 @@ const component = dynamic(() => import('./'))
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
-    const { appearance, sameWidth } = elem.dataset
+    const { appearance, sameWidth, pbStyle } = elem.dataset
 
     return {
+        'data-pb-style': pbStyle,
         appearance,
         sameWidth,
         style,

diff --git a/components/PageBuilder/ContentTypes/Column/Column.tsx b/components/PageBuilder/ContentTypes/Column/Column.tsx
@@ -24,9 +24,9 @@ const getSelfAlignment = (value: 'align-top' | 'align-center' | 'align-bottom' |
     }
 }
 
-export const Column: Component<ColumnProps> = ({ appearance = 'full-height', hero, background, children, style, ...props }) => {
+export const Column: Component<ColumnProps> = ({ appearance = 'full-height', hero, background, children, ...props }) => {
     return (
-        <Root $hero={hero} $selfAlignment={getSelfAlignment(appearance)} as={ContentWithBackground} {...background} style={style} {...props}>
+        <Root $hero={hero} $selfAlignment={getSelfAlignment(appearance)} as={ContentWithBackground} {...background} {...props}>
             {children}
         </Root>
     )

diff --git a/components/PageBuilder/ContentTypes/Column/config.ts b/components/PageBuilder/ContentTypes/Column/config.ts
@@ -7,7 +7,7 @@ import component from '.'
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
-    const { appearance, backgroundImages } = elem.dataset
+    const { appearance, backgroundImages, pbStyle } = elem.dataset
 
     const loadEagerly = elem.classList.contains('loading-eager')
 
@@ -18,7 +18,13 @@ const props = (elem: HTMLElement) => {
 
     const hero = elem.classList.contains('hero')
 
-    return { appearance, hero, background, style }
+    return {
+        'data-pb-style': pbStyle,
+        appearance,
+        hero,
+        background,
+        style,
+    }
 }
 
 export default { component, props }
diff --git a/components/PageBuilder/ContentTypes/ColumnGroup/config.ts b/components/PageBuilder/ContentTypes/ColumnGroup/config.ts
@@ -5,7 +5,12 @@ import component from '.'
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
-    return { style }
+    const { pbStyle } = elem.dataset
+
+    return {
+        'data-pb-style': pbStyle,
+        style,
+    }
 }
 
 export default { component, props }
diff --git a/components/PageBuilder/ContentTypes/Divider/config.ts b/components/PageBuilder/ContentTypes/Divider/config.ts
@@ -6,9 +6,12 @@ const component = dynamic(() => import('./'))
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
+    const { pbStyle } = elem.dataset
+
     const hrElement = elem.children[0] as HTMLElement
 
     return {
+        'data-pb-style': pbStyle,
         style,
         line: {
             style: getStyleAsObject(hrElement.style),

diff --git a/components/PageBuilder/ContentTypes/Heading/config.ts b/components/PageBuilder/ContentTypes/Heading/config.ts
@@ -6,7 +6,10 @@ const component = dynamic(() => import('./'))
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
+    const { pbStyle } = elem.dataset
+
     return {
+        'data-pb-style': pbStyle,
         style,
         as: elem.nodeName.toLowerCase(),
         text: elem.textContent,

diff --git a/components/PageBuilder/ContentTypes/Html/config.ts b/components/PageBuilder/ContentTypes/Html/config.ts
@@ -6,7 +6,10 @@ const component = dynamic(() => import('./'))
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
+    const { pbStyle } = elem.dataset
+
     return {
+        'data-pb-style': pbStyle,
         style,
         source: elem.innerText,
     }

diff --git a/components/PageBuilder/ContentTypes/Image/config.tsx b/components/PageBuilder/ContentTypes/Image/config.tsx
@@ -12,21 +12,24 @@ const component = dynamic(() => import('.'))
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
+    const { pbStyle } = elem.dataset
+
     const linkElem = elem.children[0]
 
     const imageElement = linkElem.nodeName === 'A' ? (linkElem.children as HTMLCollectionOf<HTMLElement>) : (elem.children as HTMLCollectionOf<HTMLElement>)
 
     const desktopSrc = imageElement[0].getAttribute('src') || ''
     const mobileSrc = imageElement[1].getAttribute('src') || ''
 
-    const image: ImageProps & { style: any } = {
+    const image: ImageProps & { style: any; 'data-pb-style'?: string } = {
         src: resolveImage(desktopSrc),
         sources: [
             <source key="desktop-webp" type="image/webp" media="(min-width: 600px)" srcSet={resolveImage(desktopSrc, { type: 'webp' })} />,
             <source key="desktop" media="(min-width: 600px)" srcSet={resolveImage(desktopSrc)} />,
         ],
         alt: imageElement[0].getAttribute('alt') || imageElement[0].getAttribute('title') || undefined,
         style: getStyleAsObject(imageElement[0].style),
+        'data-pb-style': imageElement[0].dataset.pbStyle,
     }
 
     if (mobileSrc) {
@@ -54,6 +57,7 @@ const props = (elem: HTMLElement) => {
     const caption = captionElement ? captionElement.textContent : undefined
 
     return {
+        'data-pb-style': pbStyle,
         image,
         caption,
         link,

diff --git a/components/PageBuilder/ContentTypes/Map/config.ts b/components/PageBuilder/ContentTypes/Map/config.ts
@@ -20,6 +20,8 @@ type Location = {
 }
 
 const props = (elem: HTMLElement) => {
+    const { pbStyle } = elem.dataset
+
     const style = getStyleAsObject(elem.style)
 
     const locations = JSON.parse(elem.dataset.locations as string).map((location: Location) => {
@@ -56,6 +58,7 @@ const props = (elem: HTMLElement) => {
     const controls = elem.dataset.showControls === 'true'
 
     return {
+        'data-pb-style': pbStyle,
         locations,
         controls,
         style,

diff --git a/components/PageBuilder/ContentTypes/Products/config.ts b/components/PageBuilder/ContentTypes/Products/config.ts
@@ -9,7 +9,7 @@ const props = (elem: HTMLElement) => {
 
     const forms = elem.querySelectorAll('[data-product-sku]')
 
-    const { appearance } = elem.dataset
+    const { appearance, pbStyle } = elem.dataset
 
     const slider: SlickSliderProps | undefined =
         appearance === 'carousel'
@@ -27,6 +27,7 @@ const props = (elem: HTMLElement) => {
     const skus = [...(forms as any)].map(form => form.dataset.productSku)
 
     return {
+        'data-pb-style': pbStyle,
         ...slider,
         appearance,
         skus,

diff --git a/components/PageBuilder/ContentTypes/Row/Row.tsx b/components/PageBuilder/ContentTypes/Row/Row.tsx
@@ -10,14 +10,14 @@ export type RowProps = {
     parallaxSpeed?: number
 }
 
-export const Row: Component<RowProps> = ({ appearance = 'contained', background, children, enableParallax, parallaxSpeed = 1, style, ...props }) => {
+export const Row: Component<RowProps> = ({ appearance = 'contained', background, children, enableParallax, parallaxSpeed = 1, ...props }) => {
     const contained = appearance === 'contained' || appearance === 'full-width'
 
     const fullScreen = appearance === 'full-screen'
 
     return (
         <Root $contained={appearance === 'contained'} {...props}>
-            <ContentWithBackground parallax={(enableParallax && { speed: parallaxSpeed }) || undefined} fullScreen={fullScreen} {...background} style={style}>
+            <ContentWithBackground parallax={(enableParallax && { speed: parallaxSpeed }) || undefined} fullScreen={fullScreen} {...background}>
                 <Wrapper $contained={contained} $margin={contained}>
                     {children}
                 </Wrapper>

diff --git a/components/PageBuilder/ContentTypes/Row/config.ts b/components/PageBuilder/ContentTypes/Row/config.ts
@@ -8,7 +8,7 @@ import component from '.'
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
-    const { appearance, backgroundImages } = elem.dataset
+    const { appearance, backgroundImages, pbStyle } = elem.dataset
 
     const fullScreen = elem.classList.contains('full-screen')
 
@@ -19,6 +19,8 @@ const props = (elem: HTMLElement) => {
     const parallaxSpeed = parseFloat(elem.dataset.parallaxSpeed || '1')
 
     const background: ContentWithBackgroundProps = {
+        'data-pb-style': pbStyle,
+        style,
         loadEagerly,
         backgroundImages: backgroundImages ? getBackgroundImages(backgroundImages) : undefined,
         video:
@@ -45,7 +47,6 @@ const props = (elem: HTMLElement) => {
         enableParallax,
         parallaxSpeed,
         background,
-        style,
     }
 }
 

diff --git a/components/PageBuilder/ContentTypes/Slider/config.ts b/components/PageBuilder/ContentTypes/Slider/config.ts
@@ -7,6 +7,8 @@ const component = dynamic(() => import('./'))
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
+    const { pbStyle } = elem.dataset
+
     const slider: SlickSliderProps = {
         arrows: elem.dataset.showArrows === 'true',
         autoplay: elem.dataset.autoplay === 'true',
@@ -23,6 +25,7 @@ const props = (elem: HTMLElement) => {
     }
 
     return {
+        'data-pb-style': pbStyle,
         ...slider,
         style,
     }

diff --git a/components/PageBuilder/ContentTypes/TabItem/TabItem.tsx b/components/PageBuilder/ContentTypes/TabItem/TabItem.tsx
@@ -7,9 +7,9 @@ export type TabItemProps = {
     background: ContentWithBackgroundProps
 }
 
-export const TabItem: Component<TabItemProps> = ({ background, children, style }) => {
+export const TabItem: Component<TabItemProps> = ({ background, children, ...props }) => {
     return (
-        <ContentWithBackground {...background} style={style}>
+        <ContentWithBackground {...background} {...props}>
             {children}
         </ContentWithBackground>
     )

diff --git a/components/PageBuilder/ContentTypes/TabItem/config.ts b/components/PageBuilder/ContentTypes/TabItem/config.ts
@@ -8,13 +8,18 @@ const component = dynamic(() => import('./'))
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
-    const { appearance, backgroundImages } = elem.dataset
+    const { appearance, backgroundImages, pbStyle } = elem.dataset
 
     const background: ContentWithBackgroundProps = {
         backgroundImages: backgroundImages ? getBackgroundImages(backgroundImages) : undefined,
     }
 
-    return { appearance, background, style }
+    return {
+        'data-pb-style': pbStyle,
+        appearance,
+        background,
+        style,
+    }
 }
 
 export default { component, props }
diff --git a/components/PageBuilder/ContentTypes/Tabs/Tabs.tsx b/components/PageBuilder/ContentTypes/Tabs/Tabs.tsx
@@ -9,11 +9,11 @@ export type TabsProps = {
     minHeight: string
 }
 
-export const Tabs: Component<TabsProps> = ({ tabsAlignment, tabItems, activeTab, children, minHeight }) => {
+export const Tabs: Component<TabsProps> = ({ tabsAlignment, tabItems, activeTab, children, minHeight, ...props }) => {
     const selected = Number(activeTab)
 
     return (
-        <TabsWrapper defaultIndex={selected}>
+        <TabsWrapper defaultIndex={selected} {...props}>
             <TabList align={tabsAlignment}>
                 {tabItems.map((label: string, index: number) => (
                     <Tab key={index}>{label}</Tab>

diff --git a/components/PageBuilder/ContentTypes/Tabs/config.ts b/components/PageBuilder/ContentTypes/Tabs/config.ts
@@ -6,7 +6,7 @@ const component = dynamic(() => import('./'))
 const props = (elem: HTMLElement) => {
     const style = getStyleAsObject(elem.style)
 
-    const { appearance, activeTab } = elem.dataset
+    const { appearance, activeTab, pbStyle } = elem.dataset
 
     const navigationEl = elem.childNodes[0]
     const tabItemsElems = navigationEl.childNodes
@@ -19,6 +19,7 @@ const props = (elem: HTMLElement) => {
     const minHeight = contentEl.style.minHeight
 
     return {
+        'data-pb-style': pbStyle,
         style,
         minHeight,
         appearance,
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,6 +42,4 @@ jspm_packages @@
     # Environment Variables
     .env
-    .now
-    lib/apollo/possibleTypes.json
+    .now