Skip to content

Commit

Permalink
add logical properties to right-rail-block, right-rail-advanced-block… (
Browse files Browse the repository at this point in the history 
#1841)

* 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
  • Loading branch information
@annasherman
annasherman authored Dec 13, 2023
1 parent 68f21c7 commit cdd8f76
Show file tree
Hide file tree
Showing 11 changed files with 315 additions and 102 deletions.
24 changes: 15 additions & 9 deletions .storybook/themes/commerce.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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": (
Expand Down Expand Up @@ -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
Expand Down
135 changes: 101 additions & 34 deletions .storybook/themes/news.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
),
Expand All @@ -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
),
Expand All @@ -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",
Expand All @@ -2404,37 +2425,58 @@
"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)
)
)
),
"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,
Expand Down Expand Up @@ -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": (
Expand Down Expand Up @@ -3912,31 +3957,53 @@
)
),
"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,
"gap": 0,
"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,
Expand Down
11 changes: 0 additions & 11 deletions .vscode/settings.json
View file

This file was deleted.

6 changes: 6 additions & 0 deletions blocks/right-rail-advanced-block/index.story.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,9 @@ export const basic = () => (
<RightRailAdvancedLayout children={layoutAreas.map((name) => layoutItem(name))} />
</div>
);

export const withRtl = () => {
<div dir="rtl" id="fusion-app" className="layout-section">
<RightRailAdvancedLayout children={layoutAreas.map((name) => layoutItem(name))} />
</div>
}
Loading

0 comments on commit cdd8f76

Please sign in to comment.