From 758293f64ce4353198424a4bcae5ec051745c267 Mon Sep 17 00:00:00 2001 From: Matt Maribojoc Date: Tue, 26 Mar 2024 10:43:18 -0400 Subject: [PATCH 1/2] docs: add alokai docs link (#3086) --- apps/docs/components/.vuepress/config.js | 1 + apps/docs/components/package.json | 2 +- yarn.lock | 10 +++++----- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/docs/components/.vuepress/config.js b/apps/docs/components/.vuepress/config.js index 319cdaa67d..2fbade3ec6 100644 --- a/apps/docs/components/.vuepress/config.js +++ b/apps/docs/components/.vuepress/config.js @@ -137,6 +137,7 @@ module.exports = { DOCS_EXAMPLES_VUE_PATH, FIGMA_URL, coreDocs: false, + storefrontUi: true, title: 'Storefront UI', repo: 'https://github.com/vuestorefront/storefront-ui', docsRepoPath: 'https://github.com/vuestorefront/storefront-ui/tree/v2/apps/docs/components/', // used to generate direct edit links on docs pages. diff --git a/apps/docs/components/package.json b/apps/docs/components/package.json index 153d5f7c0a..6134bdf200 100644 --- a/apps/docs/components/package.json +++ b/apps/docs/components/package.json @@ -50,7 +50,7 @@ "sass-loader": "^13.0.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17", "vue-multiselect": "^2.1.6", - "vuepress-theme-vsf-docs": "^1.2.19" + "vuepress-theme-vsf-docs": "^1.5.2" }, "resolutions": { "webpack-hot-middleware": "2.25.4" diff --git a/yarn.lock b/yarn.lock index cb8f67f4e6..e4fbc4e527 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4364,7 +4364,7 @@ __metadata: vue-multiselect: ^2.1.6 vuepress: ^1.9.8 vuepress-plugin-clean-urls: ^1.1.2 - vuepress-theme-vsf-docs: ^1.2.19 + vuepress-theme-vsf-docs: ^1.5.2 languageName: unknown linkType: soft @@ -27949,9 +27949,9 @@ __metadata: languageName: node linkType: hard -"vuepress-theme-vsf-docs@npm:^1.2.19": - version: 1.3.2 - resolution: "vuepress-theme-vsf-docs@npm:1.3.2" +"vuepress-theme-vsf-docs@npm:^1.5.2": + version: 1.5.2 + resolution: "vuepress-theme-vsf-docs@npm:1.5.2" dependencies: "@vuepress/plugin-active-header-links": 1.9.7 "@vuepress/plugin-nprogress": 1.9.7 @@ -27959,7 +27959,7 @@ __metadata: iconify-icon: ^1.0.1 markdown-it-anchor: ^8.6.5 vuepress-plugin-container: ^2.0.2 - checksum: 6a934bce9e4447365ce2bbb1fb733b44de57e1eaaa231a11e78572fd90e175e1d636fd324ec113250d9351687405a9af4669b91aea9cfafca56c6450e0a89c40 + checksum: f035beb6d6b150b9dc34e3ae1ed7b1ca50e8518d4e50b0edf813b06c200474721195093e6f0e76d13f02ca14f0cd579b04b395a8c230af176f4a39f45fd521c0 languageName: node linkType: hard From 42157bd5c895211d8e630c201b76205544be17e9 Mon Sep 17 00:00:00 2001 From: Jakub Freisler Date: Thu, 28 Mar 2024 15:44:48 +0100 Subject: [PATCH 2/2] fix(hero): backgroundImage should cover whole elements area on mobile [ES-387] (#3089) add description for best image sizes for hero background --- apps/docs/components/blocks/Banners.md | 12 +++++++++++- apps/preview/next/pages/showcases/Banners/Hero.tsx | 4 ++-- apps/preview/nuxt/pages/showcases/Banners/Hero.vue | 4 ++-- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/apps/docs/components/blocks/Banners.md b/apps/docs/components/blocks/Banners.md index 6a4f84f092..67463a4f51 100644 --- a/apps/docs/components/blocks/Banners.md +++ b/apps/docs/components/blocks/Banners.md @@ -49,7 +49,17 @@ Four vertical displays in row on desktop. ## Hero -Hero acts like a layout for your hero section. You can provide main image and any content, as well as background images for mobile and desktop devices. +The Hero component simplifies the process of creating stunning hero sections for your website. With Hero, you have the flexibility to seamlessly integrate a main image and customize your content to suit your needs. Additionally, Hero allows adding background images tailored for both mobile and desktop devices. To ensure an optimal blend of performance and visual appeal, we recommend adhering to the following image guidelines: + +Desktop Background Images: +Minimum width: 3840px +Aspect ratio: 4:1.5 +Example size: 3840px x 1440px + +Mobile Background Images: +Minimum width: 768px +Aspect ratio: 3:4 +Example size: 768px x 1024px diff --git a/apps/preview/next/pages/showcases/Banners/Hero.tsx b/apps/preview/next/pages/showcases/Banners/Hero.tsx index dd6ec1b52d..7271789fa9 100644 --- a/apps/preview/next/pages/showcases/Banners/Hero.tsx +++ b/apps/preview/next/pages/showcases/Banners/Hero.tsx @@ -5,12 +5,12 @@ import { SfButton } from '@storefront-ui/react'; export default function Hero() { return ( -
+
diff --git a/apps/preview/nuxt/pages/showcases/Banners/Hero.vue b/apps/preview/nuxt/pages/showcases/Banners/Hero.vue index 430d37f311..d273c9e25e 100644 --- a/apps/preview/nuxt/pages/showcases/Banners/Hero.vue +++ b/apps/preview/nuxt/pages/showcases/Banners/Hero.vue @@ -1,10 +1,10 @@