From cdd8f76de539bb4fc3f4c512f0170eae919e30fc Mon Sep 17 00:00:00 2001 From: Anna Sherman Date: Wed, 13 Dec 2023 16:27:50 -0500 Subject: [PATCH] =?UTF-8?q?add=20logical=20properties=20to=20right-rail-bl?= =?UTF-8?q?ock,=20right-rail-advanced-block=E2=80=A6=20(#1841)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add logical properties to right-rail-block, right-rail-advanced-block, and single-column-layout-block plus add styles to storybook * add placeholder story for single column layout * add commerce logical properties to storybook themes * Remove accidental commit of .vscode/settings.json * add missing storybook styles round 2 --- .storybook/themes/commerce.scss | 24 ++-- .storybook/themes/news.scss | 135 +++++++++++++----- .vscode/settings.json | 11 -- .../right-rail-advanced-block/index.story.jsx | 6 + .../themes/news.json | 66 ++++++--- blocks/right-rail-block/index.story.jsx | 7 + blocks/right-rail-block/themes/commerce.json | 19 +-- blocks/right-rail-block/themes/news.json | 66 ++++++--- .../index.story.jsx | 65 +++++++++ .../themes/commerce.json | 9 +- .../themes/news.json | 9 +- 11 files changed, 315 insertions(+), 102 deletions(-) delete mode 100644 .vscode/settings.json create mode 100644 blocks/single-column-layout-block/index.story.jsx diff --git a/.storybook/themes/commerce.scss b/.storybook/themes/commerce.scss index d490585fd5..f37f20d87f 100644 --- a/.storybook/themes/commerce.scss +++ b/.storybook/themes/commerce.scss @@ -1031,7 +1031,7 @@ "right-rail-main": ( "display": grid, "gap": var(--global-spacing-5), - "width": 100%, + "inline-size": 100%, "components": ( "stack": ( "gap": var(--global-spacing-5) @@ -1047,25 +1047,31 @@ ), "right-rail-navigation": ( "position": sticky, - "top": 0, - "width": 100%, + "inset-block-start": 0, + "inline-size": 100%, "z-index": 9 ), "right-rail-rail-container": ( "grid-template-columns": initial, "grid-template-rows": 1fr, "gap": var(--global-spacing-5), - "margin": auto, - "max-width": calc(var(--content-max-width) * 1px), - "width": 100% + "margin-block-start": auto, + "margin-inline-end": auto, + "margin-block-end": auto, + "margin-inline-start": auto, + "max-inline-size": calc(var(--content-max-width) * 1px), + "inline-size": 100% ), "single-column-regular-body": ( "inline-size": calc(100% - var(--global-spacing-6)), - "margin": auto, + "margin-block-start": auto, + "margin-inline-end": auto, + "margin-block-end": auto, + "margin-inline-start": auto, "max-inline-size": none ), "single-column-regular-footer": ( - "width": 100% + "inline-size": 100% ), "single-column-regular-main": ( "components": ( @@ -1707,7 +1713,7 @@ "grid-template-columns": repeat(12, 1fr), "gap": var(--global-spacing-6), "grid-template-rows": initial, - "width": var(--content-scale-width) + "inline-size": var(--content-scale-width) ), "single-column-regular-body": ( "max-inline-size": 37rem diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss index 1482ef1f0a..e84bfaccee 100644 --- a/.storybook/themes/news.scss +++ b/.storybook/themes/news.scss @@ -2349,23 +2349,38 @@ "gap": var(--global-spacing-6) ), "right-rail-advanced-footer": ( - "margin": var(--global-spacing-10) 0 var(--global-spacing-8) 0 + "margin-block-start": var(--global-spacing-10), + "margin-inline-end": 0, + "margin-block-end": var(--global-spacing-8), + "margin-inline-start": 0 ), "right-rail-advanced-full-width-1": ( - "margin": 0 0 var(--global-spacing-5) 0 + "margin-block-start": 0, + "margin-inline-end": 0, + "margin-block-end": var(--global-spacing-5), + "margin-inline-start": 0 ), "right-rail-advanced-full-width-2": ( - "margin": var(--global-spacing-6) 0 0 0 + "margin-block-start": var(--global-spacing-6), + "margin-inline-end": 0, + "margin-block-end": 0, + "margin-inline-start": 0 ), "right-rail-advanced-main": ( "gap": var(--global-spacing-6), - "max-width": calc(var(--content-max-width) * 1px), - "width": var(--content-scale-width), - "margin": auto + "max-inline-size": calc(var(--content-max-width) * 1px), + "inline-size": var(--content-scale-width), + "margin-block-start": auto, + "margin-inline-end": auto, + "margin-block-end": auto, + "margin-inline-start": auto ), "right-rail-advanced-main-interior-item": ( - "padding": initial, - "border-right": initial, + "padding-block-start": initial, + "padding-inline-end": initial, + "padding-block-end": initial, + "padding-inline-start": initial, + "border-inline-end": initial, "gap": var(--global-spacing-5), "display": contents ), @@ -2376,7 +2391,10 @@ "grid-area": main-interior-item-2 ), "right-rail-advanced-main-right-rail": ( - "padding": initial, + "padding-block-start": initial, + "padding-inline-end": initial, + "padding-block-end": initial, + "padding-inline-start": initial, "gap": var(--global-spacing-5), "display": contents ), @@ -2391,10 +2409,13 @@ ), "right-rail-advanced-navigation": ( "position": sticky, - "top": 0, - "width": 100%, + "inset-block-start": 0, + "inline-size": 100%, "z-index": 9, - "margin": 0 0 var(--global-spacing-5) 0 + "margin-block-start": 0, + "margin-inline-end": 0, + "margin-block-end": var(--global-spacing-5), + "margin-inline-start": 0 ), "right-rail-advanced-rail-container": ( "grid-template-areas": "main-right-rail-top" "main-interior-item-1" "main-right-rail-middle" "main-interior-item-2" "main-right-rail-bottom", @@ -2404,18 +2425,30 @@ "gap": var(--global-spacing-6) ), "right-rail-footer": ( - "margin": var(--global-spacing-10) 0 var(--global-spacing-8) 0 + "margin-block-start": var(--global-spacing-10), + "margin-inline-end": 0, + "margin-block-end": var(--global-spacing-8), + "margin-inline-start": 0 ), "right-rail-full-width-1": ( - "margin": 0 0 var(--global-spacing-5) 0 + "margin-block-start": 0, + "margin-inline-end": 0, + "margin-block-end": var(--global-spacing-5), + "margin-inline-start": 0 ), "right-rail-full-width-2": ( - "margin": var(--global-spacing-6) 0 0 0 + "margin-block-start": var(--global-spacing-6), + "margin-inline-end": 0, + "margin-block-end": 0, + "margin-inline-start": 0 ), "right-rail-main": ( - "max-width": calc(var(--content-max-width) * 1px), - "width": var(--content-scale-width), - "margin": auto, + "max-inline-size": calc(var(--content-max-width) * 1px), + "inline-size": var(--content-scale-width), + "margin-block-start": auto, + "margin-inline-end": auto, + "margin-block-end": auto, + "margin-inline-start": auto, "components": ( "stack": ( "gap": var(--global-spacing-6) @@ -2423,18 +2456,27 @@ ) ), "right-rail-main-interior-item": ( - "padding": initial, - "border-right": initial + "padding-block-start": initial, + "padding-inline-end": initial, + "padding-block-end": initial, + "padding-inline-start": initial, + "border-inline-end": initial ), "right-rail-main-right-rail": ( - "padding": initial + "padding-block-start": initial, + "padding-inline-end": initial, + "padding-block-end": initial, + "padding-inline-start": initial ), "right-rail-navigation": ( "position": sticky, - "top": 0, - "width": 100%, + "inset-block-start": 0, + "inline-size": 100%, "z-index": 9, - "margin": 0 0 var(--global-spacing-5) 0 + "margin-block-start": 0, + "margin-inline-end": 0, + "margin-block-end": var(--global-spacing-5), + "margin-inline-start": 0 ), "right-rail-rail-container": ( "grid-template-columns": initial, @@ -2695,11 +2737,14 @@ ), "single-column-regular-body": ( "inline-size": calc(100% - var(--global-spacing-6)), - "margin": auto, + "margin-block-start": "auto", + "margin-inline-end": "auto", + "margin-block-end": "auto", + "margin-inline-start": "auto", "max-inline-size": none ), "single-column-regular-footer": ( - "width": 100% + "inline-size": 100% ), "single-column-regular-main": ( "components": ( @@ -3912,16 +3957,27 @@ ) ), "right-rail-advanced-main-interior-item": ( - "border-right": 1px solid #dadada, - "padding": 0 var(--global-spacing-6) 0 0, + "border-inline-end-width": 1px, + "border-inline-end-style": solid, + "border-inline-end-color": #dadada, + "padding-block-start": 0, + "padding-inline-end": var(--global-spacing-6), + "padding-block-end": 0, + "padding-inline-start": 0, "display": flex ), "right-rail-advanced-main-right-rail": ( - "padding": 0 0 0 var(--global-spacing-6), + "padding-block-start": 0, + "padding-inline-end": 0, + "padding-block-end": 0, + "padding-inline-start": var(--global-spacing-6), "display": flex ), "right-rail-advanced-navigation": ( - "padding": 0 0 var(--global-spacing-8) 0 + "padding-block-start": 0, + "padding-inline-end": 0, + "padding-block-end": var(--global-spacing-8), + "padding-inline-start": 0 ), "right-rail-advanced-rail-container": ( "grid-template-columns": 2fr 1fr, @@ -3929,14 +3985,25 @@ "grid-template-rows": initial ), "right-rail-main-interior-item": ( - "border-right": 1px solid #dadada, - "padding": 0 var(--global-spacing-6) 0 0 + "border-inline-end-width": 1px, + "border-inline-end-style": solid, + "border-inline-end-color": #dadada, + "padding-block-start": 0, + "padding-inline-end": var(--global-spacing-6), + "padding-block-end": 0, + "padding-inline-start": 0 ), "right-rail-main-right-rail": ( - "padding": 0 0 0 var(--global-spacing-6) + "padding-block-start": 0, + "padding-inline-end": 0, + "padding-block-end": 0, + "padding-inline-start": var(--global-spacing-6) ), "right-rail-navigation": ( - "padding": 0 0 var(--global-spacing-8) 0 + "padding-block-start": 0, + "padding-inline-end": 0, + "padding-block-end": var(--global-spacing-8), + "padding-inline-start": 0 ), "right-rail-rail-container": ( "grid-template-columns": 2fr 1fr, diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 4c22a728ea..0000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "editor.formatOnSave": true, - "editor.defaultFormatter": "esbenp.prettier-vscode", - "[javascript]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "editor.codeActionsOnSave": { - "source.fixAll": true - }, - "eslint.format.enable": true -} diff --git a/blocks/right-rail-advanced-block/index.story.jsx b/blocks/right-rail-advanced-block/index.story.jsx index 17c24007fa..7e7074d525 100644 --- a/blocks/right-rail-advanced-block/index.story.jsx +++ b/blocks/right-rail-advanced-block/index.story.jsx @@ -80,3 +80,9 @@ export const basic = () => ( layoutItem(name))} /> ); + +export const withRtl = () => { +
+ layoutItem(name))} /> +
+} diff --git a/blocks/right-rail-advanced-block/themes/news.json b/blocks/right-rail-advanced-block/themes/news.json index 9ad0219251..c5c5f5728e 100644 --- a/blocks/right-rail-advanced-block/themes/news.json +++ b/blocks/right-rail-advanced-block/themes/news.json @@ -10,7 +10,10 @@ "right-rail-advanced-footer": { "styles": { "default": { - "margin": "var(--global-spacing-10) 0 var(--global-spacing-8) 0" + "margin-block-start": "var(--global-spacing-10)", + "margin-inline-end": "0", + "margin-block-end": "var(--global-spacing-8)", + "margin-inline-start": "0" }, "desktop": {} } @@ -18,7 +21,10 @@ "right-rail-advanced-full-width-1": { "styles": { "default": { - "margin": "0 0 var(--global-spacing-5) 0" + "margin-block-start": "0", + "margin-inline-end": "0", + "margin-block-end": "var(--global-spacing-5)", + "margin-inline-start": "0" }, "desktop": {} } @@ -26,7 +32,10 @@ "right-rail-advanced-full-width-2": { "styles": { "default": { - "margin": "var(--global-spacing-6) 0 0 0" + "margin-block-start": "var(--global-spacing-6)", + "margin-inline-end": "0", + "margin-block-end": "0", + "margin-inline-start": "0" }, "desktop": {} } @@ -35,9 +44,12 @@ "styles": { "default": { "gap": "var(--global-spacing-6)", - "max-width": "calc(var(--content-max-width) * 1px)", - "width": "var(--content-scale-width)", - "margin": "auto" + "max-inline-size": "calc(var(--content-max-width) * 1px)", + "inline-size": "var(--content-scale-width)", + "margin-block-start": "auto", + "margin-inline-end": "auto", + "margin-block-end": "auto", + "margin-inline-start": "auto" }, "desktop": {} } @@ -45,14 +57,22 @@ "right-rail-advanced-main-interior-item": { "styles": { "default": { - "padding": "initial", - "border-right": "initial", + "padding-block-start": "initial", + "padding-inline-end": "initial", + "padding-block-end": "initial", + "padding-inline-start": "initial", + "border-inline-end": "initial", "gap": "var(--global-spacing-5)", "display": "contents" }, "desktop": { - "border-right": "1px solid #dadada", - "padding": "0 var(--global-spacing-6) 0 0", + "border-inline-end-width": "1px", + "border-inline-end-style": "solid", + "border-inline-end-color": "#dadada", + "padding-block-start": "0", + "padding-inline-end": "var(--global-spacing-6)", + "padding-block-end": "0", + "padding-inline-start": "0", "display": "flex" } } @@ -76,12 +96,18 @@ "right-rail-advanced-main-right-rail": { "styles": { "default": { - "padding": "initial", + "padding-block-start": "initial", + "padding-inline-end": "initial", + "padding-block-end": "initial", + "padding-inline-start": "initial", "gap": "var(--global-spacing-5)", "display": "contents" }, "desktop": { - "padding": "0 0 0 var(--global-spacing-6)", + "padding-block-start": "0", + "padding-inline-end": "0", + "padding-block-end": "0", + "padding-inline-start": "var(--global-spacing-6)", "display": "flex" } } @@ -114,13 +140,19 @@ "styles": { "default": { "position": "sticky", - "top": 0, - "width": "100%", + "inset-block-start": 0, + "inline-size": "100%", "z-index": 9, - "margin": "0 0 var(--global-spacing-5) 0" + "margin-block-start": "0", + "margin-inline-end": "0", + "margin-block-end": "var(--global-spacing-5)", + "margin-inline-start": "0" }, "desktop": { - "padding": "0 0 var(--global-spacing-8) 0" + "padding-block-start": "0", + "padding-inline-end": "0", + "padding-block-end": "var(--global-spacing-8)", + "padding-inline-start": "0" } } }, @@ -140,4 +172,4 @@ } } } -} +} \ No newline at end of file diff --git a/blocks/right-rail-block/index.story.jsx b/blocks/right-rail-block/index.story.jsx index 58cc063033..97479b03b4 100644 --- a/blocks/right-rail-block/index.story.jsx +++ b/blocks/right-rail-block/index.story.jsx @@ -46,11 +46,18 @@ export const basic = () => ( ); +export const withRtl = () => { +
+ layoutItem(name))} /> +
+} + export const commerce = () => (
layoutItem(name))} />
); + commerce.parameters = { cssVariables: { theme: "commerce", diff --git a/blocks/right-rail-block/themes/commerce.json b/blocks/right-rail-block/themes/commerce.json index 3179acca95..30fd54cbe7 100644 --- a/blocks/right-rail-block/themes/commerce.json +++ b/blocks/right-rail-block/themes/commerce.json @@ -15,7 +15,7 @@ "default": { "display": "grid", "gap": "var(--global-spacing-5)", - "width": "100%", + "inline-size": "100%", "components": { "stack": { "gap": "var(--global-spacing-5)" @@ -52,8 +52,8 @@ "styles": { "default": { "position": "sticky", - "top": 0, - "width": "100%", + "inset-block-start": 0, + "inline-size": "100%", "z-index": 9 }, "desktop": {} @@ -65,16 +65,19 @@ "grid-template-columns": "initial", "grid-template-rows": "1fr", "gap": "var(--global-spacing-5)", - "margin": "auto", - "max-width": "calc(var(--content-max-width) * 1px)", - "width": "100%" + "margin-block-start": "auto", + "margin-inline-end": "auto", + "margin-block-end": "auto", + "margin-inline-start": "auto", + "max-inline-size": "calc(var(--content-max-width) * 1px)", + "inline-size": "100%" }, "desktop": { "grid-template-columns": "repeat(12, 1fr)", "gap": "var(--global-spacing-6)", "grid-template-rows": "initial", - "width": "var(--content-scale-width)" + "inline-size": "var(--content-scale-width)" } } } -} +} \ No newline at end of file diff --git a/blocks/right-rail-block/themes/news.json b/blocks/right-rail-block/themes/news.json index ae219c7960..0e877dd446 100644 --- a/blocks/right-rail-block/themes/news.json +++ b/blocks/right-rail-block/themes/news.json @@ -10,7 +10,10 @@ "right-rail-footer": { "styles": { "default": { - "margin": "var(--global-spacing-10) 0 var(--global-spacing-8) 0" + "margin-block-start": "var(--global-spacing-10)", + "margin-inline-end": "0", + "margin-block-end": "var(--global-spacing-8)", + "margin-inline-start": "0" }, "desktop": {} } @@ -18,7 +21,10 @@ "right-rail-full-width-1": { "styles": { "default": { - "margin": "0 0 var(--global-spacing-5) 0" + "margin-block-start": "0", + "margin-inline-end": "0", + "margin-block-end": "var(--global-spacing-5)", + "margin-inline-start": "0" }, "desktop": {} } @@ -26,7 +32,10 @@ "right-rail-full-width-2": { "styles": { "default": { - "margin": "var(--global-spacing-6) 0 0 0" + "margin-block-start": "var(--global-spacing-6)", + "margin-inline-end": "0", + "margin-block-end": "0", + "margin-inline-start": "0" }, "desktop": {} } @@ -34,9 +43,12 @@ "right-rail-main": { "styles": { "default": { - "max-width": "calc(var(--content-max-width) * 1px)", - "width": "var(--content-scale-width)", - "margin": "auto", + "max-inline-size": "calc(var(--content-max-width) * 1px)", + "inline-size": "var(--content-scale-width)", + "margin-block-start": "auto", + "margin-inline-end": "auto", + "margin-block-end": "auto", + "margin-inline-start": "auto", "components": { "stack": { "gap": "var(--global-spacing-6)" @@ -49,22 +61,36 @@ "right-rail-main-interior-item": { "styles": { "default": { - "padding": "initial", - "border-right": "initial" + "padding-block-start": "initial", + "padding-inline-end": "initial", + "padding-block-end": "initial", + "padding-inline-start": "initial", + "border-inline-end": "initial" }, "desktop": { - "border-right": "1px solid #dadada", - "padding": "0 var(--global-spacing-6) 0 0" + "border-inline-end-width": "1px", + "border-inline-end-style": "solid", + "border-inline-end-color": "#dadada", + "padding-block-start": "0", + "padding-inline-end": "var(--global-spacing-6)", + "padding-block-end": "0", + "padding-inline-start": "0" } } }, "right-rail-main-right-rail": { "styles": { "default": { - "padding": "initial" + "padding-block-start": "initial", + "padding-inline-end": "initial", + "padding-block-end": "initial", + "padding-inline-start": "initial" }, "desktop": { - "padding": "0 0 0 var(--global-spacing-6)" + "padding-block-start": "0", + "padding-inline-end": "0", + "padding-block-end": "0", + "padding-inline-start": "var(--global-spacing-6)" } } }, @@ -72,13 +98,19 @@ "styles": { "default": { "position": "sticky", - "top": 0, - "width": "100%", + "inset-block-start": 0, + "inline-size": "100%", "z-index": 9, - "margin": "0 0 var(--global-spacing-5) 0" + "margin-block-start": "0", + "margin-inline-end": "0", + "margin-block-end": "var(--global-spacing-5)", + "margin-inline-start": "0" }, "desktop": { - "padding": "0 0 var(--global-spacing-8) 0" + "padding-block-start": "0", + "padding-inline-end": "0", + "padding-block-end": "var(--global-spacing-8)", + "padding-inline-start": "0" } } }, @@ -96,4 +128,4 @@ } } } -} +} \ No newline at end of file diff --git a/blocks/single-column-layout-block/index.story.jsx b/blocks/single-column-layout-block/index.story.jsx new file mode 100644 index 0000000000..bde3515a10 --- /dev/null +++ b/blocks/single-column-layout-block/index.story.jsx @@ -0,0 +1,65 @@ +/* eslint-disable react/no-children-prop */ +import React from "react"; +import SingleColumnRegular from "./layouts/single-column-regular/default"; + +export default { + title: "Layouts/Single Column Regular", + parameters: { + // Set the viewports in Chromatic at a component level. + chromatic: { viewports: [320, 960, 1200, 1600] }, + }, +}; + +const layoutItemStyles = { + navigation: { + backgroundColor: "rgb(236 155 223)", + height: "100px", + }, + footer: { + height: "100px", + }, + fullWidth: { + height: "200px", + }, + body: { + height: "200px", + }, + default: { + width: "100%", + backgroundColor: "rgb(230 230 230)", + textAlign: "center", + }, +}; +const getStyles = (name) => { + const defaults = layoutItemStyles.default; + + return { ...defaults, ...layoutItemStyles[name] }; +}; + +const renderChildren = (name) => layoutItemStyles[name]?.children || null; + +const layoutItem = (name) => ( +
+ {name} + {renderChildren(name)} +
+); + +const layoutAreas = [ + "navigation", + "fullWidth", + "body", + "footer", +]; + +export const basic = () => ( +
+ layoutItem(name))} /> +
+); + +export const withRtl = () => { +
+ layoutItem(name))} /> +
+} diff --git a/blocks/single-column-layout-block/themes/commerce.json b/blocks/single-column-layout-block/themes/commerce.json index 493e7470c3..342765cf6b 100644 --- a/blocks/single-column-layout-block/themes/commerce.json +++ b/blocks/single-column-layout-block/themes/commerce.json @@ -3,7 +3,10 @@ "styles": { "default": { "inline-size": "calc(100% - var(--global-spacing-6))", - "margin": "auto", + "margin-block-start": "auto", + "margin-inline-end": "auto", + "margin-block-end": "auto", + "margin-inline-start": "auto", "max-inline-size": "none" }, "desktop": { @@ -31,9 +34,9 @@ "single-column-regular-footer": { "styles": { "default": { - "width": "100%" + "inline-size": "100%" }, "desktop": {} } } -} +} \ No newline at end of file diff --git a/blocks/single-column-layout-block/themes/news.json b/blocks/single-column-layout-block/themes/news.json index 493e7470c3..342765cf6b 100644 --- a/blocks/single-column-layout-block/themes/news.json +++ b/blocks/single-column-layout-block/themes/news.json @@ -3,7 +3,10 @@ "styles": { "default": { "inline-size": "calc(100% - var(--global-spacing-6))", - "margin": "auto", + "margin-block-start": "auto", + "margin-inline-end": "auto", + "margin-block-end": "auto", + "margin-inline-start": "auto", "max-inline-size": "none" }, "desktop": { @@ -31,9 +34,9 @@ "single-column-regular-footer": { "styles": { "default": { - "width": "100%" + "inline-size": "100%" }, "desktop": {} } } -} +} \ No newline at end of file