Feature/sel 3097

react/components/CollapsibleContent/index.tsx

@@ -1,5 +1,6 @@
 // Dependencies
 import React, { useState } from 'react'
+import { useDevice } from 'vtex.device-detector'
 import classNames from 'classnames'
 
 // Styles
@@ -10,30 +11,55 @@ import type { ReactNode } from 'react'
 
 interface CollapsibleContentProps {
   children: ReactNode
+  origin?: string
+  shouldCollapsed?: boolean
 }
 
-const CollapsibleContent = ({ children }: CollapsibleContentProps) => {
+const CollapsibleContent = ({
+  children,
+  origin,
+  shouldCollapsed = true,
+}: CollapsibleContentProps) => {
   const [isCollapsed, setIsCollapsed] = useState(true)
+  const { isMobile } = useDevice()
 
   const handleToggle = () => {
     setIsCollapsed(!isCollapsed)
   }
 
-  const containerClasses = classNames(styles.collapsibleContentContainer, {
-    [styles.collapsibleContentContainerOpen]: isCollapsed,
-  })
+  const containerClasses = classNames(
+    styles.collapsibleContentContainer,
+    {
+      [styles.collapsibleContentContainerOpen]: isCollapsed,
+    },
+    origin === 'collection-seo' && styles['collapsible-content--collection-seo']
+  )
 
   return (
     <div className={containerClasses}>
       {children}
-      <button
-        onClick={handleToggle}
-        className={styles.collapsibleContentButton}
-      >
-        {isCollapsed ? 'Ver mais' : 'Ver menos'}
-      </button>
+      {shouldCollapsed || isMobile ? (
+        <button
+          onClick={handleToggle}
+          className={styles.collapsibleContentButton}
+        >
+          {isCollapsed ? 'Ver mais' : 'Ver menos'}
+        </button>
+      ) : null}
     </div>
   )
 }
 
+CollapsibleContent.schema = {
+  title: 'Configuração - SEO',
+  type: 'object',
+  properties: {
+    shouldCollapsed: {
+      title: 'Exibir Ver mais',
+      type: 'boolean',
+      description: 'O texto possue mais que 4 linhas?',
+    },
+  },
+}
+
 export default CollapsibleContent

react/components/CollapsibleContent/styles.css

@@ -2,6 +2,11 @@
   max-width: 720px;
   width: 100%;
 }
+.collapsible-content--collection-seo.collapsibleContentContainer {
+  max-width: 90rem;
+  margin: 0 auto 3rem;
+  padding: 0 2rem;
+}
 
 .collapsibleContentContainer p {
   overflow: hidden;
@@ -13,17 +18,16 @@
 
 .collapsibleContentContainerOpen p {
   -webkit-line-clamp: 4;
-
 }
 
 .collapsibleContentButton {
-  border-radius: var(--radius-rounded-sm, 2px);
-  border: 1.25px solid var(--border-neutral-subtle, #D4D4D8);
-  background: #FFF;
+  border-radius: 2px;
+  border: 1.25px solid #d4d4d8;
+  background: #fff;
   padding: 12px 20px;
   margin-top: 24px;
-  color: var(--text-neutral-subtle, #3F3F46);
-  font-family: "Proxima Nova";
+  color: #3f3f46;
+  font-family: 'Proxima Nova';
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
@@ -33,9 +37,16 @@
   cursor: pointer;
 }
 
-.collapsibleContentButton:hover {
-  border-color: var(--border-brand-primary-base, #EE8146);
-  background: var(--bg-brand-primary-subtlest-hover, #FDF2EC);
-  color: var(--text-brand-primary-base, #FF5A00);
-
-}
+@media screen and (min-width: 64rem) {
+  .collapsibleContentButton:hover {
+    border-color: #ee8146;
+    background: #fdf2ec;
+    color: #ff5a00;
+  }
+}
+@media screen and (max-width: 64rem) {
+  .collapsible-content--collection-seo.collapsibleContentContainer {
+    padding: 0 1rem;
+    margin-bottom: 1rem;
+  }
+}

store/blocks/components/shelves/simple-shelf-new.jsonc

@@ -0,0 +1,37 @@
+{
+  "flex-layout.row#simple-shelf-container-new": {
+    "title": "Vitrine Simples 1",
+    "children": ["flex-layout.col#shelf-container-new"],
+    "props": {
+      "blockClass": ["shelf-container", "home-content-container"]
+    }
+  },
+  "flex-layout.col#shelf-container-new": {
+    "title": "Col: Vitrine",
+    "children": [
+      "flex-layout.row#shelf-title-container-new",
+      "flex-layout.row#shelf-slider-container-1"
+    ],
+    "props": {
+      "blockClass": "shelf-container"
+    }
+  },
+  "flex-layout.row#shelf-title-container-new": {
+    "title": "Linha: Título da Shelf",
+    "children": [
+      "rich-text#shelf-section-title-new",
+      "link#shelf-section-show-all-1"
+    ],
+    "props": {
+      "blockClass": "shelf-title-container",
+      "preventHorizontalStretch": true
+    }
+  },
+  "rich-text#shelf-section-title-new": {
+    "title": "Texto: Título da Sessão",
+    "props": {
+      "text": "Mais vendidos",
+      "blockClass": "section-title"
+    }
+  }
+}

store/blocks/pages/collection/breadcrumb.json

@@ -0,0 +1,28 @@
+{
+  "flex-layout.row#breadcrumb.collection": {
+    "title": "Breadcrumb - Coleção/Departamento",
+    "props": {
+      "blockClass": ["breadcrumb--pre-owned"],
+      "preventVerticalStretch": true,
+      "preventHorizontalStretch": true,
+      "preserveLayoutOnMobile": true
+    },
+    "children": ["link#breadcrumb.home", "link#breadcrumb.collection"]
+  },
+  "link#breadcrumb.home": {
+    "title": "Link para Home",
+    "props": {
+      "href": "/",
+      "label": "Home",
+      "blockClass": ["breadcrumb--home"]
+    }
+  },
+  "link#breadcrumb.collection": {
+    "title": "Link para Coleção/Departamento",
+    "props": {
+      "href": "/colecao-teclados",
+      "label": "Teclados",
+      "blockClass": ["breadcrumb--pre-owned"]
+    }
+  }
+}

store/blocks/pages/collection/categories.json

@@ -0,0 +1,116 @@
+{
+  "flex-layout.row#collection-category-cards": {
+    "title": "Seção - Categorias",
+    "props": {
+      "blockClass": ["category-cards-collection"],
+      "fullWidth": true
+    },
+    "children": ["flex-layout.col#collection-category-cards"]
+  },
+  "flex-layout.col#collection-category-cards": {
+    "props": {
+      "blockClass": ["category-cards-collection", "centered-wrapper"]
+    },
+    "children": [
+      "rich-text#collection-category-cards-title",
+      "list-context.info-card-list#collection-categories",
+      "link#collection-category-cards-see-all"
+    ]
+  },
+  "rich-text#collection-category-cards-title": {
+    "title": "Título da seção",
+    "props": {
+      "width": "100%",
+      "text": "## Explore as categorias abaixo",
+      "blockClass": "collection-category-title"
+    }
+  },
+  "list-context.info-card-list#collection-categories": {
+    "children": ["slider-layout#collection-categories"],
+    "props": {
+      "infoCards": [
+        {
+          "id": "info-card-1",
+          "imageUrl": "https://roland.vtexassets.com/assets/vtex.file-manager-graphql/images/0afbfe97-5026-48d6-84e1-85dfa5321d97___c5d509d169ba7d9ae76aff9ded6d4bce.png",
+          "callToActionText": "Arranjadores",
+          "callToActionUrl": "/#",
+          "blockClass": "info-card-1",
+          "isFullModeStyle": false,
+          "textPosition": "center",
+          "textAlignment": "center"
+        },
+        {
+          "id": "info-card-2",
+          "imageUrl": "https://roland.vtexassets.com/assets/vtex.file-manager-graphql/images/8f6d8ddb-9b69-4ad9-907e-4c374e4a3b64___441dfb6af3975788b24d284ea3084d53.png",
+          "callToActionText": "Sintetizadores",
+          "callToActionUrl": "/#",
+          "blockClass": "info-card-2",
+          "isFullModeStyle": false,
+          "textPosition": "center",
+          "textAlignment": "center"
+        },
+        {
+          "id": "info-card-3",
+          "imageUrl": "https://roland.vtexassets.com/assets/vtex.file-manager-graphql/images/7ef7f4c5-f129-4b15-8a1c-88a13291f676___bc7ee4286b741d5132ece25fbf1ebbc7.png",
+          "callToActionText": "Acordeon",
+          "callToActionUrl": "/#",
+          "blockClass": "info-card-3",
+          "isFullModeStyle": false,
+          "textPosition": "center",
+          "textAlignment": "center"
+        },
+        {
+          "id": "info-card-4",
+          "imageUrl": "https://roland.vtexassets.com/assets/vtex.file-manager-graphql/images/271a7612-35e5-4730-8721-27638bc3d6b2___24a8df8bff859d487c8e4aa8a2db9e85.png",
+          "callToActionText": "Controles Midi",
+          "callToActionUrl": "/#",
+          "blockClass": "info-card-4",
+          "isFullModeStyle": false,
+          "textPosition": "center",
+          "textAlignment": "center"
+        },
+        {
+          "id": "info-card-5",
+          "imageUrl": "https://roland.vtexassets.com/assets/vtex.file-manager-graphql/images/87eb05dc-7f72-495d-b9a6-fe541099043d___5d58db04894db131530e357444150626.png",
+          "callToActionText": "Amplicadores",
+          "callToActionUrl": "/#",
+          "blockClass": "info-card-5",
+          "isFullModeStyle": false,
+          "textPosition": "center",
+          "textAlignment": "center"
+        },
+        {
+          "id": "info-card-6",
+          "imageUrl": "https://roland.vtexassets.com/assets/vtex.file-manager-graphql/images/45fa9c61-d099-4199-a4e5-0ea08d7838e0___1e2a7c23b8dd49674ac5b1b75611fb9d.png",
+          "callToActionText": "Acessórios",
+          "callToActionUrl": "/#",
+          "blockClass": "info-card-6",
+          "isFullModeStyle": false,
+          "textPosition": "center",
+          "textAlignment": "center"
+        }
+      ]
+    }
+  },
+  "slider-layout#collection-categories": {
+    "title": "Slider: Carrosel das Categorias ",
+    "props": {
+      "showPaginationDots": "always",
+      "itemsPerPage": {
+        "desktop": 6,
+        "tablet": 3,
+        "phone": 3
+      },
+      "infinite": true,
+      "blockClass": ["shelf-slider", "category-cards-collection"]
+    }
+  },
+  "link#collection-category-cards-see-all": {
+    "title": "Link para Ver tudo",
+    "props": {
+      "href": "/#",
+      "label": "Ver tudo em teclados",
+      "blockClass": ["collection-category-cards-see-all"]
+    }
+  }
+}

store/blocks/pages/collection/double-banner.json

@@ -0,0 +1,37 @@
+{
+  "flex-layout.row#simple-double-banner-collection": {
+    "title": "Banner Duplo",
+    "props": {
+      "blockClass": ["simple-double-banner", "simple-double-banner-collection"],
+      "fullWidth": true,
+      "preventHorizontalStretch": true
+    },
+    "children": [
+      "image#simple-double-banner-collection-1",
+      "image#simple-double-banner-collection-2"
+    ]
+  },
+
+  "image#simple-double-banner-collection-1": {
+    "title": "Imagem 1",
+    "props": {
+      "src": "https://roland.vtexassets.com/assets/vtex.file-manager-graphql/images/f165d610-2a53-4e26-82b7-ba9afb4891c6___4d2af79b1bdbdc1e771549a7ab813167.png",
+      "alt": "Banner simples 1",
+      "maxHeight": "400",
+      "width": "100%",
+      "link": "#",
+      "blockClass": ["simple-banner-image-1"]
+    }
+  },
+  "image#simple-double-banner-collection-2": {
+    "title": "Imagem 2",
+    "props": {
+      "src": "https://roland.vtexassets.com/assets/vtex.file-manager-graphql/images/bab7b8c6-50ce-4c08-a2b0-1beddf8abbba___50f95bc8bca0aaf24833ae76cb08e7b1.png",
+      "alt": "Banner simples 2",
+      "maxHeight": "400",
+      "width": "100%",
+      "link": "#",
+      "blockClass": ["simple-banner-image-2"]
+    }
+  }
+}

store/blocks/pages/collection/index.jsonc

@@ -0,0 +1,23 @@
+{
+  "store.custom#collection-roland": {
+    "blocks": [
+      "flex-layout.row#breadcrumb.collection",
+      "flex-layout.row#main-banner-collection",
+      "collapsible-content#collection-seo-one",
+      "flex-layout.row#collection-category-cards",
+      "flex-layout.row#simple-shelf-container-new",
+      "flex-layout.row#simple-banner-collection",
+      "flex-layout.row#simple-shelf-container-2",
+      "flex-layout.row#simple-double-banner-collection",
+      "collapsible-content#collection-seo",
+      "flex-layout.row#newsletter"
+    ],
+    "props": {
+      "blockClass": "collection"
+    },
+    "parent": {
+      "header": "header",
+      "footer": "flex-layout.row#footer-roland"
+    }
+  }
+}