diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss index 53a3d46f19..9f78bbf0d3 100644 --- a/.storybook/themes/news.scss +++ b/.storybook/themes/news.scss @@ -201,10 +201,7 @@ "inline-size": 100%, "width": 100%, "padding-block-end": var(--global-spacing-2), - "padding-block-start": var(--global-spacing-2), - "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - "padding-left": var(--global-spacing-2) + "padding-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), @@ -303,8 +300,8 @@ "flex": 0 0 auto ), "button-large": ( - "margin-bottom": var(--global-spacing-1), - "margin-top": var(--global-spacing-1), + "margin-block-end": var(--global-spacing-1), + "margin-block-start": var(--global-spacing-1), "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)) ), "link": ( @@ -313,10 +310,10 @@ "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "font-weight": var(--global-font-weight-7), - "padding-bottom": var(--global-spacing-5), - "padding-left": var(--global-spacing-4), - "padding-right": var(--global-spacing-5), - "padding-top": var(--global-spacing-5), + "padding-block-end": var(--global-spacing-5), + "padding-block-start": var(--global-spacing-5), + "padding-inline-end": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-4), "text-decoration": none ), "link-hover": ( @@ -697,6 +694,171 @@ "font-size": var(--heading-level-5-font-size), "line-height": var(--heading-level-5-line-height) ), + "checkout": ( + "font-family": var(--font-family-primary), + "margin-bottom": var(--global-spacing-5), + "components": ( + "heading": ( + "font-size": var(--global-font-size-12) + ), + "link": ( + "color": var(--color-primary), + "border-bottom": 1px solid var(--color-primary) + ), + "link-hover": ( + "color": var(--color-primary-hover), + "border-bottom": 1px solid var(--color-primary-hover) + ) + ) + ), + "checkout-cart": ( + "margin-top": var(--global-spacing-6), + "components": ( + "heading": ( + "margin-bottom": var(--global-spacing-5), + "font-size": var(--global-font-size-11) + ) + ) + ), + "checkout-cart-item": ( + "color": "$global.neutral-6", + "font-size": var(--global-font-size-4), + "margin": 0 var(--global-spacing-2), + "padding": var(--global-spacing-2) 0 + ), + "checkout-cart-item--info": ( + "font-size": var(--global-font-size-2) + ), + "checkout-cart-item--name": ( + "font-size": var(--global-font-size-7), + "font-weight": bold + ), + "checkout-cart-items": ( + "border": 1px solid var(--border-color) + ), + "checkout-contact-info": ( + "margin-top": var(--global-spacing-6), + "components": ( + "heading": ( + "margin-bottom": var(--global-spacing-5), + "font-size": var(--global-font-size-11) + ), + "input": ( + "margin-block-end": var(--global-spacing-5) + ), + "input-error-tip": ( + "color": var(--status-color-danger) + ), + "input-input": ( + "inline-size": 100%, + "width": 100%, + "padding-block-end": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) + ) + ) + ), + "checkout-contact-info-profile": ( + "display": grid, + "width": 100%, + "grid-template-columns": repeat(2, 1fr), + "column-gap": var(--global-spacing-5) + ), + "checkout-identity-row": ( + "width": 100%, + "display": inline-flex, + "align-items": center, + "line-height": var(--global-line-height-4), + "components": ( + "image": ( + "width": var(--global-spacing-4), + "height": var(--global-spacing-4), + "margin": 0 var(--global-spacing-2) 0 0 + ), + "icon": ( + "fill": #415993, + "width": var(--global-spacing-4), + "height": var(--global-spacing-4), + "margin": 0 var(--global-spacing-2) 0 0 + ) + ) + ), + "checkout-payment": ( + "margin-top": var(--global-font-size-11) + ), + "checkout-payment-form": ( + "display": grid, + "margin-top": var(--global-font-size-11), + "gap": var(--global-spacing-6), + "components": ( + "paragraph": ( + "font-size": var(--heading-level-6-font-size), + "font-weight": var(--heading-level-4-font-weight) + ) + ) + ), + "checkout-payment-form--border-bottom": ( + "border-bottom": 1px solid var(--border-color) + ), + "checkout-payment-form--border-right": ( + "border-right": 1px solid var(--border-color) + ), + "checkout-payment-form--stripe-cardDetails": ( + "display": grid, + "gap": none, + "border-radius": var(--border-radius), + "border": 1px solid var(--border-color) + ), + "checkout-payment-form--stripe-countryDetails": ( + "display": grid, + "gap": none, + "border-radius": var(--border-radius), + "border": 1px solid var(--border-color), + "input-input": ( + "padding": 0 + ) + ), + "checkout-payment-form--stripe-element": ( + "padding": var(--global-spacing-2) + ), + "checkout-payment-form--stripe-input-container": ( + "display": grid, + "gap": var(--global-spacing-1) + ), + "checkout-payment-form--stripe-label": ( + "font-size": var(--global-font-size-4), + "font-weight": var(--global-font-weight-4), + "color": var(--global-neutral-7) + ), + "checkout-payment-form--stripe-row": ( + "display": grid, + "width": 100%, + "grid-template-columns": repeat(2, 1fr) + ), + "checkout-payment-information": ( + "width": 100%, + "gap": var(--global-spacing-5), + "grid-template-columns": 1fr, + "components": ( + "input-error-tip": ( + "color": var(--status-color-danger) + ), + "input-label": ( + "font-size": var(--global-font-size-4), + "font-weight": var(--global-font-weight-4), + "color": var(--global-neutral-7) + ), + "input-input": ( + "inline-size": 100%, + "width": 100%, + "padding-block-end": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) + ) + ) + ), "double-chain": ( "components": ( "heading": ( @@ -837,10 +999,7 @@ "inline-size": 100%, "width": 100%, "padding-block-end": var(--global-spacing-2), - "padding-block-start": var(--global-spacing-2), - "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - "padding-left": var(--global-spacing-2) + "padding-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), @@ -1571,10 +1730,7 @@ "inline-size": 100%, "width": 100%, "padding-block-end": var(--global-spacing-2), - "padding-block-start": var(--global-spacing-2), - "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - "padding-left": var(--global-spacing-2) + "padding-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), @@ -1789,6 +1945,165 @@ "numbered-list-items": ( "gap": var(--global-spacing-4) ), + "offer": ( + "display": flex, + "flex-direction": column, + "justify-content": center, + "align-items": center + ), + "offer-card": ( + "align-items": center, + "border": 1px solid var(--border-color), + "border-radius": var(--border-radius), + "display": flex, + "flex-direction": column, + "padding-top": var(--global-spacing-8), + "padding-right": var(--global-spacing-6), + "padding-bottom": var(--global-spacing-6), + "padding-left": var(--global-spacing-6), + "components": ( + "heading": ( + "font-size": var(--global-font-size-9), + "text-align": center, + "margin-bottom": var(--global-spacing-4), + "font-weight": var(--global-font-weight-7), + "line-height": var(--global-line-height-6) + ), + "paragraph": ( + "font-size": var(--global-font-size-7), + "font-weight": var(--global-font-weight-4), + "text-align": center, + "margin-bottom": var(--global-spacing-4) + ), + "button-large": ( + "margin-bottom": var(--global-spacing-4) + ) + ) + ), + "offer-card-features": ( + "align-self": baseline + ), + "offer-card-features--feature-item": ( + "align-items": center, + "display": flex, + "margin-block-end": var(--global-spacing-4), + "components": ( + "icon": ( + "display": flex, + "width": var(--global-spacing-4), + "height": var(--global-spacing-4), + "margin": 0 var(--global-spacing-2) 0 0 + ) + ) + ), + "offer-grid-list": ( + "gap": var(--global-spacing-5), + "grid-template-columns": 1fr, + "justify-content": center + ), + "offer-grid-list-1": ( + "grid-template-columns": minmax(auto, 600px) + ), + "offer-grid-list-2": ( + "grid-template-columns": repeat(2, 1fr) + ), + "offer-grid-list-3": ( + "grid-template-columns": repeat(3, 1fr) + ), + "offer-grid-list-4": ( + "grid-template-columns": 1fr 1fr + ), + "offer-grid-list-5": ( + "grid-template-columns": repeat(6, 1fr) + ), + "offer-grid-list-5-children": ( + "grid-column": span 2 + ), + "offer-headings": ( + "margin-top": var(--global-spacing-9), + "max-width": 40%, + "display": flex, + "flex-direction": column, + "justify-content": center, + "align-items": center, + "text-align": center + ), + "offer-subtitle": ( + "font-size": var(--global-font-size-10), + "line-height": var(--global-line-height-4) + ), + "offer-title": ( + "font-weight": var(--global-font-weight-7), + "font-size": var(--global-font-size-15), + "line-height": var(--global-line-height-6), + "margin-bottom": var(--global-spacing-4) + ), + "offer-wrapper": ( + "margin-top": var(--global-spacing-5), + "margin-bottom": var(--global-spacing-6) + ), + "paywall-overlay": ( + "background-color": rgba(0, 0, 0, 0.63), + "bottom": 0, + "left": 0, + "right": 0, + "top": 0, + "overflow": auto, + "pointer-events": all, + "position": fixed, + "height": 100vh, + "z-index": 1 + ), + "paywall-overlay-content": ( + "align-items": center, + "justify-content": center, + "background-color": var(--global-white), + "display": flex, + "flex-direction": column, + "margin-top": 50vh, + "max-height": 75vh, + "min-height": 50vh, + "overflow": auto, + "components": ( + "stack": ( + "width": 100% + ) + ) + ), + "paywall-subscription-dialog": ( + "padding": var(--global-spacing-6), + "align-items": center, + "grid-template-rows": auto, + "gap": var(--global-spacing-6), + "font-family": var(--font-family-primary), + "components": ( + "stack": ( + "align-items": center, + "grid-template-rows": auto + ) + ) + ), + "paywall-subscription-dialog-link-prompt-link": ( + "font-weight": var(--heading-level-4-font-weight) + ), + "paywall-subscription-dialog-link-prompt-pre-link": ( + "margin-right": var(--global-spacing-2) + ), + "paywall-subscription-dialog-offer-info": ( + "gap": var(--global-spacing-4), + "components": ( + "heading": ( + "font-size": var(--heading-level-2-font-size), + "text-align": center + ) + ) + ), + "paywall-subscription-dialog-reason-prompt": ( + "font-family": var(--font-family-primary) + ), + "paywall-subscription-dialog-subheadline": ( + "font-size": var(--heading-level-6-font-size) + ), "quad-chain": ( "components": ( "heading": ( @@ -1837,10 +2152,7 @@ "inline-size": 100%, "width": 100%, "padding-block-end": var(--global-spacing-2), - "padding-block-start": var(--global-spacing-2), - "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - "padding-left": var(--global-spacing-2) + "padding-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), @@ -2027,7 +2339,7 @@ "input-input": ( "font-family": var(--font-family-primary), "font-weight": var(--global-font-weight-7), - "padding-left": var(--global-spacing-7), + "padding-inline-start": var(--global-spacing-7), "width": 100% ) ) @@ -2177,10 +2489,7 @@ "inline-size": 100%, "width": 100%, "padding-block-end": var(--global-spacing-2), - "padding-block-start": var(--global-spacing-2), - "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - "padding-left": var(--global-spacing-2) + "padding-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), @@ -2726,7 +3035,10 @@ "font-size": var(--body-font-size-tiny), "font-weight": var(--global-font-weight-7), "line-height": var(--body-line-height-tiny), - "padding": var(--global-spacing-1) var(--global-spacing-2) + "padding-inline-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-1), + "padding-block-end": var(--global-spacing-1) ), "badge-danger": ( "background-color": var(--status-color-danger) @@ -2763,12 +3075,18 @@ "button-large": ( "font-size": var(--body-font-size), "line-height": var(--body-line-height), - "padding": var(--global-spacing-4) + "padding-block-start": var(--global-spacing-4), + "padding-inline-start": var(--global-spacing-4), + "padding-block-end": var(--global-spacing-4), + "padding-inline-end": var(--global-spacing-4) ), "button-medium": ( "font-size": var(--body-font-size-small), "line-height": var(--body-line-height-small), - "padding": var(--global-spacing-3) var(--global-spacing-4) + "padding-block-start": var(--global-spacing-3), + "padding-inline-start": var(--global-spacing-4), + "padding-block-end": var(--global-spacing-3), + "padding-inline-end": var(--global-spacing-4) ), "button-primary": ( "background-color": var(--color-primary), @@ -2806,7 +3124,10 @@ "button-small": ( "font-size": var(--body-font-size-small), "line-height": var(--body-line-height-small), - "padding": var(--global-spacing-1) var(--global-spacing-4) + "padding-block-start": var(--global-spacing-1), + "padding-inline-start": var(--global-spacing-4), + "padding-block-end": var(--global-spacing-1), + "padding-inline-end": var(--global-spacing-4) ), "carousel": ( "font-family": var(--font-family-primary), @@ -2816,8 +3137,8 @@ ), "carousel-actions": ( "display": none, - "padding-left": var(--global-spacing-5), - "padding-right": var(--global-spacing-5) + "padding-inline-start": var(--global-spacing-5), + "padding-inline-end": var(--global-spacing-5) ), "carousel-additional-controls": ( "display": flex @@ -2830,17 +3151,20 @@ "display": flex, "font-size": var(--body-font-size-tiny), "gap": var(--global-spacing-2), - "height": var(--global-spacing-4), + "block-size": var(--global-spacing-4), "line-height": var(--body-line-height-tiny), - "padding": 0 var(--global-spacing-2), - "width": auto + "padding-block-start": 0, + "padding-inline-start": var(--global-spacing-2), + "padding-block-end": 0, + "padding-inline-end": var(--global-spacing-2), + "inline-size": auto ), "carousel-button-enter-full-screen": ( - "padding-left": 0 + "padding-inline-start": 0 ), "carousel-button-exit-full-screen": ( - "padding-left": 0, - "padding-right": 0 + "padding-inline-start": 0, + "padding-inline-end": 0 ), "carousel-button-full-screen": ( "color": var(--global-white) @@ -2855,11 +3179,14 @@ "color": var(--global-white) ), "carousel-controls": ( - "margin-bottom": var(--global-spacing-2) + "margin-block-end": var(--global-spacing-2) ), "carousel-fullscreen": ( "color": var(--global-white), - "padding": var(--global-spacing-2) 0 + "padding-block-start": var(--global-spacing-2), + "padding-inline-start": 0, + "padding-block-end": var(--global-spacing-2), + "padding-inline-end": 0 ), "carousel-fullscreen-button-toggle-auto-play": ( "display": none @@ -2867,21 +3194,21 @@ "carousel-fullscreen-controls": ( "align-items": flex-end, "flex-direction": column, - "padding-top": var(--global-spacing-2), - "padding-right": var(--global-spacing-2), - "padding-bottom": var(--global-spacing-2), - "padding-left": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2), + "padding-block-end": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2), "place-self": initial ), "carousel-icon": ( "fill": currentColor, - "height": var(--global-spacing-4), - "width": var(--global-spacing-4) + "block-size": var(--global-spacing-4), + "inline-size": var(--global-spacing-4) ), "carousel-track": ( "gap": initial, - "max-width": initial, - "width": 100% + "max-inline-size": initial, + "inline-size": 100% ), "date": ( "color": var(--text-color), @@ -2890,7 +3217,7 @@ ), "divider": ( "background-color": var(--border-color), - "height": 1px + "block-size": 1px ), "heading": ( "font-family": var(--font-family-primary), @@ -2900,11 +3227,12 @@ ), "icon": ( "fill": var(--icon-fill-color), - "height": var(--global-spacing-5), - "width": var(--global-spacing-5) + "block-size": var(--global-spacing-5), + "inline-size": var(--global-spacing-5) ), "image": ( - "max-width": 100% + "block-size": auto, + "max-inline-size": 100% ), "image-hover": ( "opacity": 1 @@ -2922,7 +3250,18 @@ "outline-color": var(--status-color-danger) ), "input-input": ( - "border": var(--global-border-width-1) var(--global-border-style-1) var(--form-border-color), + "border-block-start-width": var(--global-border-width-1), + "border-block-end-width": var(--global-border-width-1), + "border-inline-start-width": var(--global-border-width-1), + "border-inline-end-width": var(--global-border-width-1), + "border-block-start-style": var(--global-border-style-1), + "border-block-end-style": var(--global-border-style-1), + "border-inline-start-style": var(--global-border-style-1), + "border-inline-end-style": var(--global-border-style-1), + "border-block-start-color": var(--form-border-color), + "border-block-end-color": var(--form-border-color), + "border-inline-start-color": var(--form-border-color), + "border-inline-end-color": var(--form-border-color), "border-radius": var(--border-radius), "padding-block-end": var(--global-spacing-4), "padding-block-start": var(--global-spacing-4), @@ -2937,7 +3276,10 @@ "font-weight": var(--global-font-weight-7) ), "input-small-input": ( - "padding": var(--global-spacing-1) var(--global-spacing-2) + "padding-block-end": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "input-success-input": ( "border-color": var(--status-color-success) @@ -2973,8 +3315,11 @@ "line-height": var(--body-line-height-tiny) ), "media-item-fig-caption-fullscreen": ( - "padding-left": var(--global-spacing-5), - "padding-right": var(--global-spacing-5) + "padding-inline-start": var(--global-spacing-5), + "padding-inline-end": var(--global-spacing-5) + ), + "media-item-fig-caption-vertical-video": ( + "text-align": center ), "media-item-title": ( "font-weight": var(--global-font-weight-7) @@ -2998,7 +3343,10 @@ "border-radius": var(--border-radius-pill), "color": var(--global-white), "font-size": var(--body-font-size-tiny), - "padding": var(--global-spacing-1) var(--global-spacing-4), + "padding-block-start": var(--global-spacing-1), + "padding-inline-start": var(--global-spacing-4), + "padding-block-end": var(--global-spacing-1), + "padding-inline-end": var(--global-spacing-4), "text-decoration": none ), "pill-hover": ( @@ -3006,15 +3354,25 @@ ), "stack-divider-horizontal": ( "border": none, - "border-left": var(--global-border-width-1) var(--global-border-style-1) var(--border-color), - "width": 1px, - "height": auto + "border-inline-start-width": var(--global-border-width-1), + "border-inline-start-style": var(--global-border-style-1), + "border-inline-start-color": var(--border-color), + "inline-size": 1px, + "block-size": auto ), "stack-divider-vertical": ( - "border-bottom": var(--global-border-width-1) var(--global-border-style-1) var(--border-color) + "border-block-end-width": var(--global-border-width-1), + "border-block-end-style": var(--global-border-style-1), + "border-block-end-color": var(--border-color) + ), + "vertical-video-frame": ( + "background-color": transparent ), "video": ( - "margin": auto + "margin-block-start": auto, + "margin-inline-start": auto, + "margin-block-end": auto, + "margin-inline-end": auto ), "video-frame": ( "background-color": transparent @@ -3594,20 +3952,26 @@ ), "carousel-additional-controls": ( "gap": var(--global-spacing-2), - "padding": 0 0 0 var(--global-spacing-2) + "padding-block-start": 0, + "padding-inline-start": var(--global-spacing-2), + "padding-block-end": 0, + "padding-inline-end": 0 ), "carousel-fullscreen": ( - "padding": var(--global-spacing-5) 0 + "padding-block-start": var(--global-spacing-5), + "padding-inline-start": 0, + "padding-block-end": var(--global-spacing-5), + "padding-inline-end": 0 ), "carousel-fullscreen-button-toggle-auto-play": ( "display": flex ), "carousel-fullscreen-controls": ( "flex-direction": initial, - "padding-top": var(--global-spacing-5), - "padding-right": var(--global-spacing-5), - "padding-bottom": var(--global-spacing-5), - "padding-left": var(--global-spacing-5), + "padding-block-start": var(--global-spacing-5), + "padding-inline-end": var(--global-spacing-5), + "padding-block-end": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5), "place-self": flex-start ), "carousel-track": ( diff --git a/blocks/alert-bar-block/index.story.jsx b/blocks/alert-bar-block/index.story.jsx index a451bf4e9d..80b1f87106 100644 --- a/blocks/alert-bar-block/index.story.jsx +++ b/blocks/alert-bar-block/index.story.jsx @@ -63,3 +63,17 @@ export const headlineWithReallyLongText = () => ( url={linkUrl} /> ); + +export const rightToLeft = () => ( +
+ +
+);