From 474279ebffa34eb69dc08d2bd4378cd8e856cb9e Mon Sep 17 00:00:00 2001 From: Vito Galatro Date: Thu, 18 Apr 2024 15:02:29 -0400 Subject: [PATCH] Updating 2.3.1 branch (#2095) * Bump @babel/preset-react from 7.23.3 to 7.24.1 (#2050) Bumps [@babel/preset-react](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-react) from 7.23.3 to 7.24.1. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.1/packages/babel-preset-react) --- updated-dependencies: - dependency-name: "@babel/preset-react" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Added esc event listener to useEffect (#2044) * Added esc event listener to useEffect --------- Co-authored-by: Malavika Koppula * Added overflow to section-title links (#2027) * Added flex to section-title links --------- Co-authored-by: Malavika Koppula * Bump algoliasearch from 4.23.1 to 4.23.2 (#2057) Bumps [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript) from 4.23.1 to 4.23.2. - [Release notes](https://github.com/algolia/algoliasearch-client-javascript/releases) - [Changelog](https://github.com/algolia/algoliasearch-client-javascript/blob/master/CHANGELOG.md) - [Commits](https://github.com/algolia/algoliasearch-client-javascript/compare/4.23.1...4.23.2) --- updated-dependencies: - dependency-name: algoliasearch dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump eslint-plugin-react from 7.33.2 to 7.34.1 (#2062) Bumps [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) from 7.33.2 to 7.34.1. - [Release notes](https://github.com/jsx-eslint/eslint-plugin-react/releases) - [Changelog](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.34.1/CHANGELOG.md) - [Commits](https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.33.2...v7.34.1) --- updated-dependencies: - dependency-name: eslint-plugin-react dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump glob from 10.3.10 to 10.3.12 (#2063) Bumps [glob](https://github.com/isaacs/node-glob) from 10.3.10 to 10.3.12. - [Changelog](https://github.com/isaacs/node-glob/blob/main/changelog.md) - [Commits](https://github.com/isaacs/node-glob/compare/v10.3.10...v10.3.12) --- updated-dependencies: - dependency-name: glob dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Manual promo blocks now respect focal point (#1996) * add focal point code and tests * fix eslint errors * fix formatting * fix formatting p2 * shorten PR template based on eng sync discussions (#2065) * ASUB-8201 Sign In with Apple (#2067) * Sign In with Apple * fixing linting and tests * fixing test & linting * fixing linting errors * removing update from package.json * fixing linting errors * disable eslint warnings * fixing warnings * fixing sintax * removing keys * removing only * fixing linting errors * added dd-service-catalog.yml (#2089) * added dd-service-catalog.yml * updated infrastructure * ASUB-8195 Sign up with reCaptcha (#2068) * sign up with reCaptcha * fixing linting and tests * fixing linting errors * fixing linting errors * Lokalize-translation 2.3.0 (#2092) * lokalize-translation 2.3.0 * attending feedback * THEMES-1066: Update Storybook to v8 (#2090) * THEMES-1066: updated versions of storybook and chromatic to the latest. * THEMES-1066: fixed linting errors * THEMES-1066 adjusted configs so that storybook could build without errors. * THEMES-1066 remove addon-knobs * THEMES-1066: removing more deprecated packages. * THEMES-1066: added .babelrc * THEMES-1066: moved babel config to main.js * version bump * added alias overrides * Fixed intro page * THEMES-1066: fixed webpack/babel config * THEMES-1066: restore babel.config.js * THEMES-1066: restore babel.config.js * THEMES-1066: added styling storybook addon * THEMES-1066: updated preview to just use news.scss * THEMES-1066: fixed breaking stories and updated news.scss. * THEMES-1066: version bump for storybook * THEMES-1066: corrected whitespace * THEMES-1066: Updating option for chromatic action. * THEMES-1066: updated stylelint to hopefully fix the UI Tests check * THEMES-1066: removed jsx from stylelint action input. * THEMES-1066: added env vars to chromatic action * THEMES-1066: removing test vars from workflow file. --------- Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: malavikakoppula <83021791+malavikakoppula@users.noreply.github.com> Co-authored-by: Malavika Koppula Co-authored-by: Anna Sherman Co-authored-by: LauraPinilla <54566275+LauraPinilla@users.noreply.github.com> Co-authored-by: blakeganderson <85515364+blakeganderson@users.noreply.github.com> --- .github/PULL_REQUEST_TEMPLATE.md | 63 +- .github/workflows/chromatic.yml | 8 +- .github/workflows/dd-service-catalog.yml | 50 + .github/workflows/stylelint-pr.yml | 2 +- .storybook/.babelrc | 16 - .storybook/main.js | 128 +- .storybook/manager.js | 2 +- .storybook/preview.js | 26 +- .storybook/themes/news.scss | 2623 ++--- .stylelintrc.json | 3 +- babel.config.js | 14 +- blocks/ads-block/index.story.jsx | 2 - blocks/alert-bar-block/index.story.jsx | 2 - .../package-lock.json | 194 +- blocks/article-tag-block/index.story.jsx | 2 - blocks/author-bio-block/index.story.jsx | 2 - blocks/byline-block/index.story.jsx | 11 + blocks/byline-block/index.story.mdx | 19 - blocks/card-list-block/index.story.jsx | 2 - blocks/double-chain-block/index.story.jsx | 2 - .../extra-large-manual-promo/default.jsx | 46 +- .../extra-large-manual-promo/default.test.jsx | 46 +- blocks/footer-block/index.story.jsx | 35 + blocks/footer-block/index.story.mdx | 73 - blocks/full-author-bio-block/index.story.jsx | 2 - blocks/gallery-block/index.story.jsx | 2 +- blocks/headline-block/index.story.jsx | 10 +- blocks/identity-block/_index.scss | 60 +- .../bot-challenge-protection/index.jsx | 57 - .../bot-challenge-protection/index.test.jsx | 68 - .../bot-challenge-protection/reCaptchaV3.js | 30 - .../form-password-confirm/index.jsx | 4 + .../form-password-confirm/index.test.jsx | 2 +- .../identity-block/components/login/index.jsx | 19 +- .../social-sign-on/_children/AppleSignIn.jsx | 33 + .../_children/AppleSignIn.test.jsx | 40 + .../_children/FacebookSignIn.jsx | 9 +- .../components/social-sign-on/constants.js | 3 + .../components/social-sign-on/index.jsx | 12 +- .../social-sign-on/utils/useSocialSignIn.js | 17 +- .../EmailEditableFieldContainer.test.jsx | 40 + .../PasswordEditableFieldContainer.test.jsx | 2 - .../features/account-management/default.jsx | 1 - .../account-management/default.test.jsx | 79 +- .../features/login-links/default.jsx | 4 +- .../identity-block/features/login/default.jsx | 48 +- .../features/login/default.test.jsx | 70 +- .../features/signup/default.jsx | 157 +- .../features/signup/default.test.jsx | 230 +- .../features/social-sign-on/default.jsx | 59 +- ...fault.test-ignore.jsx => default.test.jsx} | 22 +- blocks/identity-block/intl.json | 460 +- blocks/identity-block/themes/news.json | 165 +- blocks/identity-block/utils/useRecaptcha.js | 62 - .../identity-block/utils/useRecaptcha.test.js | 199 - .../features/large-manual-promo/default.jsx | 68 +- .../large-manual-promo/default.test.jsx | 70 +- .../large-manual-promo-block/index.story.jsx | 2 - .../features/leadart/default.jsx | 23 +- blocks/links-bar-block/index.story.jsx | 2 - blocks/masthead-block/index.story.jsx | 2 - .../features/medium-manual-promo/default.jsx | 46 +- .../medium-manual-promo/default.test.jsx | 62 +- .../medium-manual-promo-block/index.story.jsx | 2 - blocks/medium-promo-block/index.story.jsx | 2 - blocks/numbered-list-block/index.story.jsx | 2 - blocks/overline-block/index.story.jsx | 9 + blocks/overline-block/index.story.mdx | 15 - .../index.story.jsx | 27 +- blocks/quad-chain-block/index.story.jsx | 2 - blocks/results-list-block/index.story.jsx | 2 - .../right-rail-advanced-block/index.story.jsx | 4 +- blocks/right-rail-block/index.story.jsx | 4 +- .../search-results-list-block/index.story.jsx | 2 - blocks/section-title-block/index.story.jsx | 2 - blocks/section-title-block/themes/news.json | 10 + blocks/share-bar-block/index.story.jsx | 46 + blocks/share-bar-block/index.story.mdx | 114 - blocks/simple-list-block/index.story.jsx | 2 - blocks/single-chain-block/index.story.jsx | 2 - .../index.story.jsx | 4 +- .../features/small-manual-promo/default.jsx | 179 +- .../small-manual-promo/default.test.jsx | 46 +- .../small-manual-promo-block/index.story.jsx | 2 - blocks/small-promo-block/index.story.jsx | 2 - blocks/subscriptions-block/intl.json | 34 +- blocks/tag-title-block/index.story.jsx | 2 - blocks/triple-chain-block/index.story.jsx | 2 - locale/ar.json | 17 + locale/bn.json | 17 + locale/bo.json | 31 +- locale/de.json | 17 + locale/en.json | 12 +- locale/es.json | 17 + locale/fr.json | 17 + locale/id.json | 25 +- locale/ja.json | 17 + locale/km-KH.json | 17 + locale/ko.json | 17 + locale/lo.json | 17 + locale/ms.json | 17 + locale/my.json | 17 + locale/no.json | 21 +- locale/pt-BR.json | 19 +- locale/pt.json | 21 +- locale/sv.json | 17 + locale/th.json | 19 +- locale/ug.json | 17 + locale/vi.json | 17 + locale/zh-CN.json | 17 + locale/zh-TW.json | 17 + package-lock.json | 8411 ++++++++++------- package.json | 40 +- .../{aaaIntro.stories.mdx => aaaIntro.mdx} | 2 + 114 files changed, 8706 insertions(+), 6297 deletions(-) create mode 100644 .github/workflows/dd-service-catalog.yml delete mode 100644 .storybook/.babelrc create mode 100644 blocks/byline-block/index.story.jsx delete mode 100644 blocks/byline-block/index.story.mdx create mode 100644 blocks/footer-block/index.story.jsx delete mode 100644 blocks/footer-block/index.story.mdx delete mode 100644 blocks/identity-block/components/bot-challenge-protection/index.jsx delete mode 100644 blocks/identity-block/components/bot-challenge-protection/index.test.jsx delete mode 100644 blocks/identity-block/components/bot-challenge-protection/reCaptchaV3.js create mode 100644 blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx create mode 100644 blocks/identity-block/components/social-sign-on/_children/AppleSignIn.test.jsx create mode 100644 blocks/identity-block/components/social-sign-on/constants.js create mode 100644 blocks/identity-block/features/account-management/_children/EmailEditableFieldContainer.test.jsx rename blocks/identity-block/features/social-sign-on/{default.test-ignore.jsx => default.test.jsx} (70%) delete mode 100644 blocks/identity-block/utils/useRecaptcha.js delete mode 100644 blocks/identity-block/utils/useRecaptcha.test.js create mode 100644 blocks/overline-block/index.story.jsx delete mode 100644 blocks/overline-block/index.story.mdx create mode 100644 blocks/share-bar-block/index.story.jsx delete mode 100644 blocks/share-bar-block/index.story.mdx rename stories/{aaaIntro.stories.mdx => aaaIntro.mdx} (97%) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 0de3fc7285..2711ed631f 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,70 +1,15 @@ -**If you have not filled out the checklist below, the pr is not ready for review.** +**Be sure to run `npm test`, `npm run lint`, and write detailed test steps before requesting reviewers** ## Description -_Information about what you changed for this PR_ +#### Jira Ticket: [THEMES-](https://arcpublishing.atlassian.net/browse/THEMES-) -## Jira Ticket - -- [THEMES-](https://arcpublishing.atlassian.net/browse/THEMES-) - -## Acceptance Criteria - -_copy from ticket_ +_Information about what you changed for this PR. Include any dependencies, companion PRs, relevant screenshots, or config changes._ ## Test Steps -- Add test steps a reviewer must complete to test this PR +_Add detailed test steps a reviewer must complete to test this PR_ 1. Checkout this branch `git checkout {branch name}` 2. Run fusion repo with linked blocks `npx fusion start -f -l {blocks to link}` 3. {Next ....} - -## Effect Of Changes - -### Before - -_Example: When I clicked the search button, the button turned red._ - -[include screenshot or gif or link to video, storybook would be awesome] - -### After - -_Example: When I clicked the search button, the button turned green._ - -[include screenshot or gif or link to video, storybook would be awesome] - -## Dependencies or Side Effects - -_Examples of dependencies or side effects are:_ - -- Manifest pr for new block: -- Feature pack pr for local development: -- How to deploy to news: https://arcpublishing.atlassian.net/wiki/spaces/TI/pages/3138682964/News+Theme+2.0+Migration+Development+Deployment+Notes -- Additional settings that will be required in the blocks.json -- Changes to the custom fields which will require users to reconfigure features -- Dependency on another PR that needs to be merged first - -## Author Checklist - -_The author of the PR should fill out the following sections to ensure this PR is ready for review._ - -- [ ] Confirmed all the test steps a reviewer will follow above are working. -- [ ] Confirmed there are no linter errors. Please run `npm run lint` to check for errors. Often, `npm run lint:fix` will fix those errors and warnings. -- [ ] Ran this code locally and checked that there are not any unintended side effects. For example, that a CSS selector is scoped only to a particular block. -- [ ] Confirmed this PR has reasonable code coverage. You can run `npm run test:coverage` to see your progress. - - [ ] Confirmed this PR has unit test files - - [ ] Ran `npm run test`, made sure all tests are passing - - [ ] If the amount of work to write unit tests for this change are excessive, - please explain why (so that we can fix it whenever it gets refactored). -- [ ] Confirmed relevant documentation has been updated/added. - -## Reviewer Checklist - -_The reviewer of the PR should copy-paste this template into the review comments on review._ - -- [ ] Linting code actions have passed. -- [ ] Ran the code locally based on the test instructions. - - [ ] I don’t think this is needed to be tested locally. For example, a padding style change (storybook?) or a logic change (write a test). -- [ ] I am a member of the engine theme team so that I can approve and merge this. If you're not on the team, you won't have access to approve and merge this pr. -- [ ] Looked to see that the new or changed code has code coverage, specifically. We want the global code coverage to keep on going up with targeted testing. diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index e798d741dc..d96dfe1090 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -42,16 +42,10 @@ jobs: # 👇 Adds Chromatic as a step in the workflow - name: Publish to Chromatic - uses: chromaui/action@v1 + uses: chromaui/action@latest # Chromatic GitHub Action options with: token: ${{ secrets.GITHUB_TOKEN }} # 👇 Chromatic projectToken, refer to the manage page to obtain it. projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - - - name: Check failure status - uses: act10ns/slack@v1 - with: - status: ${{ job.status }} - if: failure() diff --git a/.github/workflows/dd-service-catalog.yml b/.github/workflows/dd-service-catalog.yml new file mode 100644 index 0000000000..2791dcec53 --- /dev/null +++ b/.github/workflows/dd-service-catalog.yml @@ -0,0 +1,50 @@ +--- +name: DataDog Service Catalog +on: + workflow_dispatch: + +jobs: + deploy: + permissions: + contents: read + runs-on: ubuntu-latest + steps: + - name: DD-service-catalog + uses: arcxp/datadog-service-catalog-metadata-provider@v2 + with: + schema-version: v2.1 + github-token: ${{ secrets.WP_DOT_GITHUB }} + datadog-key: ${{ secrets.DATADOG_API_KEY }} + datadog-app-key: ${{ secrets.DATADOG_APPLICATION_KEY }} + service-name: arc-themes-blocks + team: experience-themes-xp + application: Arc Themes Blocks + description: | + This is the Arc Themes Blocks + lifecycle: production + tier: p0 + email: arc-themes-devs@washpost.com + slack-support-channel: 'https://washpost.enterprise.slack.com/archives/C0169HVBN2C' + repo: https://github.com/WPMedia/arc-themes-blocks + tags: | + - 'application:Arc Themes Blocks' + - infrastructure:packages + - language:nodejs + - division:arc + - data-sensitivity:high + - component:themes + links: | + - name: Datadog Dashboard + url: https://washpost.datadoghq.com/dashboard/b47-w8a-u9c/theme-settings-dashboard?view=spans + type: dashboard + - name: Themes Jira Project + url: https://arcpublishing.atlassian.net/jira/software/c/projects/THEMES/boards/838 + provider: jira + type: dashboard + - name: Themes Runbooks + url: https://arcpublishing.atlassian.net/wiki/spaces/TI/pages/3303637274/Runbooks + type: runbook + integrations: | + opsgenie: + service-url: https://washpost.app.opsgenie.com/teams/dashboard/6c290e84-4b44-4178-8bec-5fb72fac8239/main + region: US \ No newline at end of file diff --git a/.github/workflows/stylelint-pr.yml b/.github/workflows/stylelint-pr.yml index 4064056aa5..8c42dc57e1 100644 --- a/.github/workflows/stylelint-pr.yml +++ b/.github/workflows/stylelint-pr.yml @@ -42,4 +42,4 @@ jobs: reporter: github-pr-review filter_mode: "diff_context" stylelint_config: ".stylelintrc.json" - stylelint_input: "**/*.(scss|jsx)" + stylelint_input: "**/*.scss" diff --git a/.storybook/.babelrc b/.storybook/.babelrc deleted file mode 100644 index 7ad3055f3a..0000000000 --- a/.storybook/.babelrc +++ /dev/null @@ -1,16 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - [ - "@babel/preset-react", - { - "runtime": "automatic" - } - ] - ], - "plugins": [ - ["@babel/plugin-proposal-private-property-in-object", { "loose": true }], - ["@babel/plugin-proposal-decorators", { "legacy": true }], - "@babel/plugin-proposal-nullish-coalescing-operator" - ] -} diff --git a/.storybook/main.js b/.storybook/main.js index d1f354c416..4585116874 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -3,37 +3,27 @@ const path = require("path"); // Export a function. Accept the base config as the only param. module.exports = { - stories: ["../stories/*.stories.@(js|jsx|mdx|tsx)", "../blocks/**/*.story.@(js|jsx|mdx|tsx)"], - addons: [ - "@etchteam/storybook-addon-css-variables-theme", - "@storybook/addon-a11y", - "@storybook/addon-docs", - "@storybook/addon-knobs", - "@storybook/addon-essentials", - ], - staticDirs: ["../resources"], - webpackFinal: async (config) => { + stories: [ + "../stories/*.@(mdx|stories.@(js|jsx|tsx))", + "../blocks/**/*.story.@(js|jsx|mdx|tsx)" + ], + + addons: [ + "@storybook/addon-a11y", + "@storybook/addon-controls", + "@storybook/addon-docs", + "@storybook/addon-essentials", + "@storybook/addon-webpack5-compiler-babel", + "@storybook/addon-styling-webpack" + ], + + staticDirs: ["../resources"], + + webpackFinal: async (config) => { // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. // 'PRODUCTION' is used when building the static version of storybook. - // Make whatever fine-grained changes you need - // eslint-disable-next-line no-unused-expressions - config.resolve = { - ...config.resolve, - alias: { - ...config.resolve.alias, - "fusion:consumer": path.resolve(__dirname, "./alias/consumer.js"), - "fusion:content": path.resolve(__dirname, "./alias/content.js"), - "fusion:context": path.resolve(__dirname, "./alias/context.js"), - "fusion:environment": path.resolve(__dirname, "./alias/environment.js"), - "fusion:intl": path.resolve(__dirname, "./alias/intl.js"), - "fusion:properties": path.resolve(__dirname, "./alias/properties.js"), - "fusion:static": path.resolve(__dirname, "./alias/static.js"), - "fusion:themes": path.resolve(__dirname, "./alias/themes.js"), - }, - }; - config.module.rules.push( { test: /\.scss$/, @@ -49,11 +39,91 @@ module.exports = { { test: /\.(js|jsx)$/, include: path.resolve(__dirname, "../node_modules/@wpmedia/arc-themes-components"), - use: ["babel-loader"], - } + use: { + loader: "babel-loader", + options: { + "plugins": [ + [ + // Module resolver aliases need to be set here as well so arc-themes-components uses the right mock files. + "module-resolver", + { + "alias": { + "fusion:themes": "./.storybook/alias/themes.js", + "fusion:content": "./.storybook/alias/content.js", + "fusion:context": "./.storybook/alias/context.js", + "fusion:consumer": "./.storybook/alias/consumer.js", + "fusion:environment": "./.storybook/alias/environment.js", + "fusion:properties": "./.storybook/alias/properties.js", + "fusion:static": "./.storybook/alias/static.js", + "fusion:intl": "./.storybook/alias/intl.js" + } + } + ] + ], + }, + }, + }, ); + config.externals = /^(fusion:)/; + // Return the altered config return config; }, + + framework: { + name: "@storybook/react-webpack5", + options: {} + }, + + docs: { + autodocs: true + }, + + babelDefault: { + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "current" + }, + "modules": "commonjs" + } + ], + [ + "@babel/preset-react", + { + "runtime": "automatic" + } + ] + ], + "plugins": [ + "@babel/plugin-proposal-nullish-coalescing-operator", + "transform-react-remove-prop-types", + [ + "@babel/plugin-proposal-decorators", + { + "legacy": true + } + ], + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-private-methods", + [ + "module-resolver", + { + "alias": { + "fusion:themes": "./.storybook/alias/themes.js", + "fusion:content": "./.storybook/alias/content.js", + "fusion:context": "./.storybook/alias/context.js", + "fusion:consumer": "./.storybook/alias/consumer.js", + "fusion:environment": "./.storybook/alias/environment.js", + "fusion:properties": "./.storybook/alias/properties.js", + "fusion:static": "./.storybook/alias/static.js", + "fusion:intl": "./.storybook/alias/intl.js" + } + } + ] + ], + }, }; diff --git a/.storybook/manager.js b/.storybook/manager.js index e28d4f8a14..392e19e2df 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,4 +1,4 @@ -import { addons } from "@storybook/addons"; +import { addons } from "@storybook/manager-api"; import arcTheme from "./arcTheme"; addons.setConfig({ diff --git a/.storybook/preview.js b/.storybook/preview.js index e4cb358c71..ae1a146c77 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,14 +1,6 @@ -import cssVariablesTheme from "@etchteam/storybook-addon-css-variables-theme"; +import "./themes/news.scss"; -// eslint-disable-next-line import/no-webpack-loader-syntax,import/no-unresolved -import news from "!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./themes/news.scss"; -// eslint-disable-next-line import/no-webpack-loader-syntax,import/no-unresolved -import commerce from "!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./themes/commerce.scss"; - -export const decorators = [cssVariablesTheme]; - -// eslint-disable-next-line import/prefer-default-export -export const parameters = { +const parameters = { layout: "fullscreen", a11y: { element: "#root", @@ -36,12 +28,12 @@ export const parameters = { }, options: { storySort: (a, b) => - a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }), - }, - cssVariables: { - files: { - news, - commerce, - }, + a.title === b.title + ? 0 + : a.id.localeCompare(b.id, undefined, { numeric: true }) }, }; + +export default { + parameters, +}; \ No newline at end of file diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss index 3ed03266ae..124014a736 100644 --- a/.storybook/themes/news.scss +++ b/.storybook/themes/news.scss @@ -1,7 +1,7 @@ @use "@wpmedia/arc-themes-components/scss" with ( $breakpoints: ( "default": "min-width: 0", - "desktop": "min-width: 48rem", + "desktop": "min-width: 48rem" ), $global: ( "black": #000000, @@ -112,7 +112,7 @@ "border-radius-2": 20rem, "border-radius-3": 100vmax, "border-style-1": solid, - "border-width-1": 1px, + "border-width-1": 1px ), $tokens: ( "default": ( @@ -173,7 +173,7 @@ "content-scale-width": calc(var(--content-max-width) / var(--layout-max-width) * 100%), "header-nav-chain-height": 80px, "header-nav-chain-height-scrolled": 80px, - "header-nav-chain-overlay-background-color": rgba(25, 25, 25, 0.5), + "header-nav-chain-overlay-background-color": rgba(25, 25, 25, 0.5) ), "blocks": ( "account-management": ( @@ -184,30 +184,28 @@ "margin-inline-end": var(--global-spacing-7), "components": ( "button": ( - "font-size": var(--global-font-size-4), + "font-size": var(--global-font-size-4) ), "heading": ( "font-size": var(--global-font-size-7), - "margin-block-end": var(--global-spacing-2), - "margin-bottom": var(--global-spacing-2), + "margin-block-end": var(--global-spacing-2) ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "input-error-tip": ( - "color": var(--status-color-danger), + "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-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), - "margin-block-end": var(--global-spacing-5), - ), - ), + "margin-block-end": var(--global-spacing-5) + ) + ) ), "account-management-edit": ( "border-color": var(--border-color), @@ -222,15 +220,15 @@ "components": ( "button-default": ( "color": var(--color-primary), - "text-decoration": underline, + "text-decoration": underline ), "button-default-hover": ( - "color": var(--color-primary-hover), + "color": var(--color-primary-hover) ), "paragraph": ( - "margin-block-end": 0, - ), - ), + "margin-block-end": 0 + ) + ) ), "account-management-edit-label": ( "align-items": center, @@ -238,12 +236,12 @@ "justify-content": space-between, "components": ( "paragraph": ( - "font-weight": var(--global-font-weight-7), - ), - ), + "font-weight": var(--global-font-weight-7) + ) + ) ), "account-management-section": ( - "margin-block-end": var(--global-spacing-7), + "margin-block-end": var(--global-spacing-7) ), "account-management-social-edit": ( "align-items": center, @@ -257,7 +255,7 @@ "padding-block-start": var(--global-spacing-4), "padding-block-end": var(--global-spacing-4), "padding-inline-start": var(--global-spacing-4), - "padding-inline-end": var(--global-spacing-4), + "padding-inline-end": var(--global-spacing-4) ), "ads-block": ( "components": ( @@ -266,9 +264,9 @@ "font-size": var(--body-font-size-small), "line-height": var(--body-line-height-small), "font-weight": var(--body-font-weight-small), - "color": "$global.neutral-7", - ), - ), + "color": "$global.neutral-7" + ) + ) ), "ads-block-admin": ( "background-color": "$global.neutral-7", @@ -283,18 +281,18 @@ "components": ( "stack": ( "gap": "$global.spacing-4", - "padding-block-end": "$global.spacing-5", + "padding-block-end": "$global.spacing-5" ), "paragraph": ( - "color": "$global.white", - ), - ), + "color": "$global.white" + ) + ) ), "alert-bar": ( "align-items": flex-start, "background-color": var(--global-red-5), "display": flex, - "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)), + "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)), "flex-wrap": nowrap, "justify-content": space-between, "word-break": break-word, @@ -302,17 +300,17 @@ "button-default": ( "background": none, "border": none, - "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)), - "flex": 0 0 auto, + "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)), + "flex": 0 0 auto ), "button-large": ( "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)), + "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)) ), "link": ( "color": var(--global-white), - "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)), + "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)), "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "font-weight": var(--global-font-weight-7), @@ -320,36 +318,36 @@ "padding-block-start": var(--global-spacing-5), "padding-inline-end": var(--global-spacing-5), "padding-inline-start": var(--global-spacing-4), - "text-decoration": none, + "text-decoration": none ), "link-hover": ( - "color": var(--text-color), + "color": var(--text-color) ), "icon": ( "fill": var(--global-white), - "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)), - ), - ), + "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)) + ) + ) ), "article-body": ( "font-family": var(--font-family-primary), "font-size": var(--body-font-size), "components": ( "link": ( - "color": var(--color-primary), + "color": var(--color-primary) ), "paragraph": ( "display": block, - "overflow": initial, + "overflow": initial ), "media-item-fig-caption": ( "background-color": var(--global-white), - "line-height": var(--body-line-height-5), + "line-height": var(--body-line-height-5) ), "icon": ( - "fill": currentColor, - ), - ), + "fill": currentColor + ) + ) ), "article-body-blockquote": ( "box-shadow": inset 5px 0 0 0 var(--global-neutral-4), @@ -363,17 +361,17 @@ "components": ( "paragraph": ( "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), - ), - ), + "line-height": var(--heading-level-6-line-height) + ) + ) ), "article-body-children": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "article-body-citation": ( "font-family": var(--font-family-primary), "font-style": normal, - "font-size": var(--body-font-size), + "font-size": var(--body-font-size) ), "article-body-correction": ( "box-shadow": inset 0 -1px 0 0 var(--border-color), @@ -382,38 +380,38 @@ "components": ( "heading": ( "font-size": var(--heading-level-6-font-size), - "text-transform": uppercase, + "text-transform": uppercase ), "paragraph": ( - "color": var(--global-neutral-6), - ), - ), + "color": var(--global-neutral-6) + ) + ) ), "article-body-divider": ( "background-color": var(--border-color), - "block-size": 1px, + "block-size": 1px ), "article-body-embed-responsive": ( "aspect-ratio": calc(16 / 9), - "inline-size": 100%, + "inline-size": 100% ), "article-body-embed-responsive-item": ( "aspect-ratio": calc(16 / 9), "block-size": auto, - "inline-size": 100%, + "inline-size": 100% ), "article-body-gallery-close-button": ( "color": var(--global-white), "components": ( "button-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "icon": ( "fill": currentColor, "block-size": var(--global-spacing-6), - "inline-size": var(--global-spacing-6), - ), - ), + "inline-size": var(--global-spacing-6) + ) + ) ), "article-body-gallery-fullscreen": ( "components": ( @@ -421,66 +419,66 @@ "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), "padding-block-end": 0, - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "article-body-gallery-track-button": ( "color": var(--global-white), "components": ( "button-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "icon": ( "fill": currentColor, "block-size": var(--global-spacing-8), - "inline-size": var(--global-spacing-8), - ), - ), + "inline-size": var(--global-spacing-8) + ) + ) ), "article-body-h2": ( "font-size": var(--heading-level-2-font-size), "line-height": var(--heading-level-2-line-height), "font-family": var(--font-family-primary), - "font-weight": bold, + "font-weight": bold ), "article-body-h3": ( "font-size": var(--heading-level-3-font-size), "line-height": var(--heading-level-3-line-height), "font-family": var(--font-family-primary), - "font-weight": bold, + "font-weight": bold ), "article-body-h4": ( "font-size": var(--heading-level-4-font-size), "line-height": var(--heading-level-4-line-height), "font-family": var(--font-family-primary), - "font-weight": bold, + "font-weight": bold ), "article-body-h5": ( "font-size": var(--heading-level-5-font-size), "line-height": var(--heading-level-5-line-height), "font-family": var(--font-family-primary), - "font-weight": bold, + "font-weight": bold ), "article-body-h6": ( "font-size": var(--heading-level-6-font-size), "line-height": var(--heading-level-6-line-height), "font-family": var(--font-family-primary), - "font-weight": bold, + "font-weight": bold ), "article-body-image-float-left": ( "inline-size": 50%, "float": inline-start, - "margin-inline-end": var(--global-spacing-5), + "margin-inline-end": var(--global-spacing-5) ), "article-body-image-float-right": ( "inline-size": 50%, "float": inline-end, - "margin-inline-start": var(--global-spacing-5), + "margin-inline-start": var(--global-spacing-5) ), "article-body-image-wrapper": ( "align-items": center, - "aspect-ratio": calc(16 / 9), + "aspect-ratio": calc(16/9), "background-color": var(--global-black), "display": flex, "justify-content": center, @@ -491,9 +489,9 @@ "block-size": auto, "max-block-size": 100%, "max-inline-size": 100%, - "object-fit": contain, - ), - ), + "object-fit": contain + ) + ) ), "article-body-interstitial-link": ( "font-family": var(--font-family-primary), @@ -503,45 +501,42 @@ "border-block-end-width": 1px, "border-block-end-style": solid, "border-block-end-color": var(--color-primary), - "color": var(--color-primary), - ), - ), + "color": var(--color-primary) + ) + ) ), "article-body-link": ( - "color": var(--color-primary), + "color": var(--color-primary) ), "article-body-ol": ( "font-size": var(--body-font-size), "line-height": var(--body-line-height), "list-style-position": inside, - "list-style-type": decimal, + "list-style-type": decimal ), "article-body-pullquote": ( - "box-shadow": ( - inset 0 -5px 0 0 var(--border-color), - inset 0 5px 0 0 var(--border-color), - ), + "box-shadow": (inset 0 -5px 0 0 var(--border-color), inset 0 5px 0 0 var(--border-color)), "gap": var(--global-spacing-4), - "padding-block-start": var(--global-spacing-6) 0, - "padding-inline-end": var(--global-spacing-5), - "padding-block-end": var(--global-spacing-6) 0, - "padding-inline-start": var(--global-spacing-5), + "padding-block-start": var(--global-spacing-6) , + "padding-inline-end": 0, + "padding-block-end": var(--global-spacing-5), + "padding-inline-start": 0, "text-align": center, "components": ( "paragraph": ( "font-style": italic, "font-size": var(--heading-level-5-font-size), "font-weight": var(--global-font-weight-7), - "line-height": var(--heading-level-5-line-height), - ), - ), + "line-height": var(--heading-level-5-line-height) + ) + ) ), "article-body-table": ( "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "line-height": var(--body-line-height-small), "text-align": center, - "inline-size": 100%, + "inline-size": 100% ), "article-body-table-td": ( "border-block-start-width": 1px, @@ -559,7 +554,7 @@ "padding-block-start": var(--global-spacing-1), "padding-inline-end": var(--global-spacing-2), "padding-block-end": var(--global-spacing-1), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "article-body-table-th": ( "border-block-start-width": 1px, @@ -578,7 +573,7 @@ "padding-block-start": var(--global-spacing-1), "padding-inline-end": var(--global-spacing-2), "padding-block-end": var(--global-spacing-1), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "article-body-table-thead": ( "background-color": var(--global-neutral-4), @@ -593,72 +588,72 @@ "border-block-start-color": var(--border-color), "border-block-end-color": var(--border-color), "border-inline-start-color": var(--border-color), - "border-inline-end-color": var(--border-color), + "border-inline-end-color": var(--border-color) ), "article-body-ul": ( "font-size": var(--body-font-size), "line-height": var(--body-line-height), "list-style-position": inside, - "list-style-type": disc, + "list-style-type": disc ), "article-tag": ( "components": ( "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "author-bio": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "author-bio-author": ( "gap": var(--global-spacing-4), "components": ( "image": ( "aspect-ratio": 1, - "block-size": 100%, "border-radius": var(--border-radius-circle), + "block-size": 100%, "inline-size": 100%, "max-inline-size": var(--global-spacing-13), "max-block-size": var(--global-spacing-13), - "object-fit": cover, + "object-fit": cover ), "stack": ( "gap": var(--global-spacing-2), - "inline-size": 100%, - ), - ), + "inline-size": 100% + ) + ) ), "author-bio-author-description": ( "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "line-height": var(--body-line-height-small), - "margin-block-end": 0, + "margin-block-end": 0 ), "author-bio-author-name": ( "color": var(--color-primary), "font-family": var(--font-family-primary), "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "author-bio-social-link": ( "components": ( "icon": ( - "fill": var(--color-primary), - ), - ), + "fill": var(--color-primary) + ) + ) ), "author-bio-social-link-hover": ( "components": ( "icon": ( - "fill": var(--color-primary-hover), - ), - ), + "fill": var(--color-primary-hover) + ) + ) ), "author-bio-social-link-wrapper": ( "gap": var(--global-spacing-4), - "margin-block-start": 0, + "margin-block-start": 0 ), "byline": ( "font-size": var(--body-font-weight), @@ -668,13 +663,13 @@ "components": ( "attribution-link": ( "color": var(--text-color), - "text-decoration": underline, + "text-decoration": underline ), "attribution-link-hover": ( "color": var(--text-color-subtle), - "text-decoration": none, - ), - ), + "text-decoration": none + ) + ) ), "card-list": ( "background-color": var(--background-color), @@ -683,54 +678,54 @@ "border-start-end-radius": var(--border-radius), "border-start-start-radius": 0, "box-shadow": var(--global-box-shadow-1), - "padding-block-end": var(--global-spacing-4), - "padding-block-start": var(--global-spacing-4), + "padding-block-end": var(--global-spacing-4) , + "padding-block-start": var(--global-spacing-4) , "padding-inline-end": 0, "padding-inline-start": 0, "components": ( "heading": ( "font-size": var(--heading-level-5-font-size), "font-weight": var(--heading-level-5-font-weight), - "line-height": var(--heading-level-5-line-height), + "line-height": var(--heading-level-5-line-height) ), "image": ( - "transition": opacity 0.4s ease, + "transition": opacity 0.4s ease ), "image-hover": ( "cursor": pointer, - "opacity": 0.8, + "opacity": 0.8 ), "link": ( - "color": var(--text-color), + "color": var(--text-color) ), "link-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "separator": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "card-list-list": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-4), - "padding-inline-start": var(--global-spacing-4), + "padding-inline-start": var(--global-spacing-4) ), "card-list-main-item-image-link": ( "components": ( "image": ( "inline-size": 100%, "max-block-size": 40vh, - "object-fit": cover, - ), - ), + "object-fit": cover + ) + ) ), "card-list-main-item-text-container": ( "gap": var(--global-spacing-2), @@ -738,28 +733,28 @@ "heading": ( "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "overline": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), - ), - ), + "line-height": var(--body-line-height) + ) + ) ), "card-list-secondary-item": ( "components": ( "heading": ( "font-size": var(--body-font-size), "font-weight": var(--body-font-weight), - "line-height": var(--body-line-height), - ), - ), + "line-height": var(--body-line-height) + ) + ) ), "card-list-secondary-item-heading-link": ( - "inline-size": 100%, + "inline-size": 100% ), "card-list-secondary-item-image-link": ( - "max-inline-size": 105px, + "max-inline-size": 105px ), "card-list-title": ( "font-size": var(--heading-level-5-font-size), @@ -767,194 +762,323 @@ "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-4), - "padding-inline-start": var(--global-spacing-4), + "padding-inline-start": var(--global-spacing-4) ), "checkout": ( "font-family": var(--font-family-primary), - "margin-bottom": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5), "components": ( "heading": ( - "font-size": var(--global-font-size-12), + "font-size": var(--global-font-size-12) ), "link": ( "color": var(--color-primary), - "border-bottom": 1px solid var(--color-primary), + "border-block-end-width": 1px, + "border-block-end-style": solid, + "border-block-end-color": var(--color-primary) ), "link-hover": ( "color": var(--color-primary-hover), - "border-bottom": 1px solid var(--color-primary-hover), - ), - ), + "border-block-end-width": 1px, + "border-block-end-style": solid, + "border-block-end-color": var(--color-primary-hover) + ) + ) ), "checkout-cart": ( - "margin-top": var(--global-spacing-6), + "margin-block-start": var(--global-spacing-6), "components": ( "heading": ( - "margin-bottom": var(--global-spacing-5), - "font-size": var(--global-font-size-11), - ), - ), + "margin-block-end": 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, + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-2), + "margin-block-end": 0, + "margin-inline-start": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": 0, + "padding-block-end": var(--global-spacing-2), + "padding-inline-start": 0 ), "checkout-cart-item--info": ( - "font-size": var(--global-font-size-2), + "font-size": var(--global-font-size-2) ), "checkout-cart-item--name": ( "font-size": var(--global-font-size-7), - "font-weight": bold, + "font-weight": bold ), "checkout-cart-items": ( - "border": 1px solid var(--border-color), + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-style": solid, + "border-block-end-style": solid, + "border-inline-start-style": solid, + "border-inline-end-style": solid, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color) ), "checkout-contact-info": ( - "margin-top": var(--global-spacing-6), + "margin-block-start": var(--global-spacing-6), "components": ( "heading": ( - "margin-bottom": var(--global-spacing-5), - "font-size": var(--global-font-size-11), + "margin-block-end": var(--global-spacing-5), + "font-size": var(--global-font-size-11) ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "input-error-tip": ( - "color": var(--status-color-danger), + "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), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "checkout-contact-info-profile": ( "display": grid, - "width": 100%, + "inline-size": 100%, "grid-template-columns": repeat(2, 1fr), - "column-gap": var(--global-spacing-5), + "column-gap": var(--global-spacing-5) ), "checkout-identity-row": ( - "width": 100%, + "inline-size": 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, + "inline-size": var(--global-spacing-4), + "block-size": var(--global-spacing-4), + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-2), + "margin-block-end": 0, + "margin-inline-start": 0 ), "icon": ( "fill": #415993, - "width": var(--global-spacing-4), - "height": var(--global-spacing-4), - "margin": 0 var(--global-spacing-2) 0 0, - ), - ), + "inline-size": var(--global-spacing-4), + "block-size": var(--global-spacing-4), + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-2), + "margin-block-end": 0, + "margin-inline-start": 0 + ) + ) ), "checkout-payment": ( - "margin-top": var(--global-font-size-11), + "inline-size": 100% ), "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), - ), - ), + "margin-block-start": var(--global-spacing-5), + "gap": var(--global-spacing-6) ), "checkout-payment-form--border-bottom": ( - "border-bottom": 1px solid var(--border-color), + "border-block-end-width": 1px, + "border-block-end-style": solid, + "border-block-end-color": var(--border-color) ), "checkout-payment-form--border-right": ( - "border-right": 1px solid var(--border-color), + "border-inline-end-width": 1px, + "border-inline-end-style": solid, + "border-inline-end-color": var(--border-color) ), "checkout-payment-form--stripe-cardDetails": ( "display": grid, "gap": none, "border-radius": var(--border-radius), - "border": 1px solid var(--border-color), + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-style": solid, + "border-block-end-style": solid, + "border-inline-start-style": solid, + "border-inline-end-style": solid, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color) ), "checkout-payment-form--stripe-countryDetails": ( "display": grid, "gap": none, "border-radius": var(--border-radius), - "border": 1px solid var(--border-color), + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-style": solid, + "border-block-end-style": solid, + "border-inline-start-style": solid, + "border-inline-end-style": solid, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color), "input-input": ( - "padding": 0, - ), + "padding-block-start": 0, + "padding-inline-end": 0, + "padding-block-end": 0, + "padding-inline-start": 0 + ) ), "checkout-payment-form--stripe-element": ( - "padding": 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) ), "checkout-payment-form--stripe-input-container": ( "display": grid, - "gap": var(--global-spacing-1), + "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), + "color": var(--global-neutral-7) ), "checkout-payment-form--stripe-row": ( "display": grid, - "width": 100%, - "grid-template-columns": repeat(2, 1fr), + "inline-size": 100%, + "grid-template-columns": repeat(2, 1fr) + ), + "checkout-payment-info": ( + "inline-size": 100%, + "margin-block-start": var(--global-spacing-6), + "align-items": flex-start, + "display": flex, + "flex-direction": column, + "components": ( + "paragraph": ( + "margin-block-start": var(--global-spacing-2), + "text-align": center, + "font-size": 0.875rem, + "font-style": normal, + "line-height": 1rem, + "letter-spacing": 0.0175rem, + "font-weight": var(--global-font-weight-5), + "font-family": sans-serif + ) + ) + ), + "checkout-payment-info-divider-container": ( + "display": flex, + "flex-direction": row, + "align-items": center, + "inline-size": 100%, + "justify-content": center, + "margin-block-start": var(--global-spacing-5), + "components": ( + "paragraph": ( + "margin-inline-start": var(--global-spacing-5), + "margin-inline-end": var(--global-spacing-5), + "text-align": center, + "font-family": sans-serif, + "font-size": 0.875rem, + "font-style": normal, + "font-weight": 500, + "line-height": 1rem, + "letter-spacing": 0.0175rem, + "min-inline-size": max-content + ) + ) + ), + "checkout-payment-info-divider-line": ( + "background-color": #DADADA, + "block-size": 0.0625rem, + "inline-size": 100%, + "min-inline-size": 13.5625rem + ), + "checkout-payment-info-payments": ( + "margin-block-start": var(--global-spacing-5), + "inline-size": 100%, + "display": flex, + "flex-direction": row, + "justify-content": space-around + ), + "checkout-payment-info-paypal": ( + "inline-size": 33%, + "align-items": center, + "display": flex, + "flex-direction": column + ), + "checkout-payment-info-paypal-button": ( + "inline-size": 9.5rem, + "block-size": var(--global-spacing-7), + "background-color": #E0E3EE, + "border-radius": 3.13rem, + "justify-content": center, + "align-content": center, + "display": flex, + "flex-wrap": wrap, + "components": ( + "img": ( + "inline-size": 4.97rem + ) + ) + ), + "checkout-payment-info-paypal-button-hover": ( + "cursor": pointer ), "checkout-payment-information": ( - "width": 100%, + "inline-size": 100%, "gap": var(--global-spacing-5), "grid-template-columns": 1fr, "components": ( "input-error-tip": ( - "color": var(--status-color-danger), + "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), + "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), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "double-chain": ( "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "double-chain-child-item": ( - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "double-chain-child-item-empty": ( - "display": contents, + "display": contents ), "double-chain-children-grid": ( "grid-template-columns": 1fr, - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "footer": ( "inline-size": var(--content-scale-width), @@ -970,15 +1094,15 @@ "margin-block-start": auto, "margin-inline-end": auto, "margin-inline-start": auto, - "max-block-size": var(--global-spacing-7), - ), - ), + "max-block-size": var(--global-spacing-7) + ) + ) ), "footer-links": ( "gap": var(--global-spacing-6), "grid-auto-flow": row, "grid-template-columns": 1fr, - "grid-template-rows": 1fr, + "grid-template-rows": 1fr ), "footer-links-group": ( "components": ( @@ -986,9 +1110,9 @@ "color": var(--text-color), "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), - "line-height": var(--body-line-height-small), - ), - ), + "line-height": var(--body-line-height-small) + ) + ) ), "footer-links-group-list-item": ( "list-style": none, @@ -998,9 +1122,9 @@ "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "font-weight": var(--global-font-weight-4), - "line-height": var(--body-line-height-small), - ), - ), + "line-height": var(--body-line-height-small) + ) + ) ), "footer-social-links": ( "border-block-end": 1px solid var(--color-primary), @@ -1015,34 +1139,34 @@ "inline-size": fit-content, "components": ( "icon": ( - "fill": var(--color-primary), + "fill": var(--color-primary) ), "link": ( "border-inline-end": 1px solid var(--color-primary), "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-inline-start": var(--global-spacing-2) + ) + ) ), "footer-social-links-container": ( "border-block-end": 1px solid var(--global-neutral-4), - "inline-size": 100%, + "inline-size": 100% ), "footer-social-links-hover": ( "components": ( "icon": ( - "fill": var(--color-primary-hover), - ), - ), + "fill": var(--color-primary-hover) + ) + ) ), "footer-social-links-last": ( "components": ( "link": ( - "border-inline-end": none, - ), - ), + "border-inline-end": none + ) + ) ), "footer-top-container": ( "border-block-start": 1px solid var(--global-neutral-4), @@ -1056,15 +1180,15 @@ "inline-size": 100%, "components": ( "paragraph": ( - "justify-self": center, - ), - ), + "justify-self": center + ) + ) ), "forgot-password": ( "font-family": var(--font-family-primary), "components": ( "button": ( - "font-size": var(--global-font-size-4), + "font-size": var(--global-font-size-4) ), "heading": ( "border-block-end-color": var(--border-color), @@ -1072,28 +1196,26 @@ "border-block-end-width": var(--global-border-width-1), "font-size": var(--global-font-size-9), "margin-block-end": var(--global-spacing-4), - "margin-bottom": var(--global-spacing-4), "padding-block-end": var(--global-spacing-2), - "text-align": center, + "text-align": center ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "input-error-tip": ( - "color": var(--status-color-danger), + "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-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), "margin-block-end": var(--global-spacing-4), - "text-align": center, - ), - ), + "text-align": center + ) + ) ), "full-author-bio": ( "display": flex, @@ -1106,7 +1228,7 @@ "components": ( "heading": ( "color": var(--color-primary), - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "image": ( "aspect-ratio": 1, @@ -1116,81 +1238,81 @@ "margin-inline-end": auto, "margin-inline-start": auto, "max-block-size": 9.375rem, - "max-inline-size": 9.375rem, + "max-inline-size": 9.375rem ), "paragraph": ( "color": var(--text-color), - "font-family": var(--font-family-primary), - ), - ), + "font-family": var(--font-family-primary) + ) + ) ), "full-author-bio-identification": ( - "gap": 0, + "gap": 0 ), "full-author-bio-name": ( "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "full-author-bio-role": ( "color": var(--text-color), "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "full-author-bio-social": ( - "gap": var(--global-spacing-2), + "gap": var(--global-spacing-2) ), "full-author-bio-social-header": ( "color": var(--text-color), "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), "line-height": var(--heading-level-6-line-height), - "text-align": center, + "text-align": center ), "full-author-bio-social-icons": ( "display": flex, "flex-wrap": wrap, - "gap": var(--global-spacing-4), "justify-content": center, + "gap": var(--global-spacing-4) ), "full-author-bio-social-link": ( "components": ( "icon": ( - "fill": var(--color-primary), - ), - ), + "fill": var(--color-primary) + ) + ) ), "full-author-bio-social-link-hover": ( "components": ( "icon": ( - "fill": var(--color-primary-hover), - ), - ), + "fill": var(--color-primary-hover) + ) + ) ), "full-author-bio-text": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "gallery": ( "components": ( "media-item-fig-caption": ( "background-color": var(--global-white), - "line-height": var(--body-line-height-5), - ), - ), + "line-height": var(--body-line-height-5) + ) + ) ), "gallery-close-button": ( "color": var(--global-white), "components": ( "button-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "icon": ( "fill": currentColor, "block-size": var(--global-spacing-6), - "inline-size": var(--global-spacing-6), - ), - ), + "inline-size": var(--global-spacing-6) + ) + ) ), "gallery-fullscreen": ( "components": ( @@ -1198,13 +1320,13 @@ "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), "padding-block-end": 0, - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "gallery-image-wrapper": ( "align-items": center, - "aspect-ratio": calc(16 / 9), + "aspect-ratio": calc(16/9), "background-color": var(--global-black), "display": flex, "justify-content": center, @@ -1215,78 +1337,89 @@ "block-size": auto, "max-block-size": 100%, "max-inline-size": 100%, - "object-fit": contain, - ), - ), + "object-fit": contain + ) + ) ), "gallery-track-button": ( "color": var(--global-white), "components": ( "button-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "icon": ( "fill": currentColor, "block-size": var(--global-spacing-8), - "inline-size": var(--global-spacing-8), - ), - ), + "inline-size": var(--global-spacing-8) + ) + ) ), "header": ( - "font-weight": var(--global-font-weight-7), + "font-weight": var(--global-font-weight-7) ), "header-account-action": ( "display": flex, - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "header-account-action-desktop": ( "align-items": center, "display": none, - "gap": var(--global-spacing-2), + "gap": var(--global-spacing-2) ), "header-account-action-dropdown-list-item": ( "list-style": none, "padding-block-end": var(--global-spacing-2), "components": ( "link": ( - "font-size": var(--global-font-size-3), + "font-size": var(--global-font-size-3) ), "link-hover": ( - "color": var(--color-primary-hover), - ), - ), + "color": var(--color-primary-hover) + ) + ) ), "header-account-action-dropdown-list-item-last": ( - "padding-block-end": 0, + "padding-block-end": 0 ), "header-account-action-dropdown-open": ( - "top": 100%, + "inset-block-start": 100%, "position": absolute, "padding-block-end": var(--global-spacing-4), "padding-block-start": var(--global-spacing-4), "padding-inline-end": var(--global-spacing-4), "padding-inline-start": var(--global-spacing-4), "background-color": var(--global-white), - "border": 1px solid var(--border-color), + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-style": solid, + "border-block-end-style": solid, + "border-inline-start-style": solid, + "border-inline-end-style": solid, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color), "border-radius": var(--global-spacing-1), "box-shadow": 0 0 4px 0 rgba(0, 0, 0, 0.25), "display": flex, - "flex-direction": column, + "flex-direction": column ), "header-account-action-mobile": ( - "display": flex, + "display": flex ), "header-extra-large": ( "font-size": var(--heading-level-4-font-size), - "line-height": var(--heading-level-4-line-height), + "line-height": var(--heading-level-4-line-height) ), "header-large": ( "font-size": var(--heading-level-5-font-size), - "line-height": var(--heading-level-5-line-height), + "line-height": var(--heading-level-5-line-height) ), "header-medium": ( "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "header-nav-chain": ( "align-items": center, @@ -1311,14 +1444,14 @@ "icon": ( "fill": currentColor, "block-size": var(--global-spacing-5), - "inline-size": var(--global-spacing-5), + "inline-size": var(--global-spacing-5) ), "button": ( "color": var(--global-white), "block-size": var(--global-spacing-7), "font-weight": var(--global-font-weight-7), "font-size": var(--body-font-size), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "button-small": ( "font-weight": var(--global-font-weight-7), @@ -1327,9 +1460,9 @@ "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-inline-start": var(--global-spacing-2) + ) + ) ), "header-nav-chain-flyout-nav": ( "block-size": calc((100vh - var(--header-nav-chain-height-scrolled))), @@ -1351,12 +1484,12 @@ "padding-block-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-5), "padding-inline-start": var(--global-spacing-5), - "text-decoration": none, + "text-decoration": none ), "link-hover": ( - "color": var(--global-white), - ), - ), + "color": var(--global-white) + ) + ) ), "header-nav-chain-flyout-nav-components-desktop": ( "display": none, @@ -1366,16 +1499,16 @@ "padding-inline-start": var(--global-spacing-5), "components": ( "button": ( - "align-self": flex-start, - ), - ), + "align-self": flex-start + ) + ) ), "header-nav-chain-flyout-nav-components-mobile": ( "display": flex, "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-5), + "padding-inline-start": var(--global-spacing-5) ), "header-nav-chain-flyout-nav-item": ( "background-color": var(--global-black), @@ -1383,24 +1516,24 @@ "link": ( "padding-block-end": var(--global-spacing-3), "padding-block-start": var(--global-spacing-3), - "padding-inline-start": var(--global-spacing-5), - ), - ), + "padding-inline-start": var(--global-spacing-5) + ) + ) ), "header-nav-chain-flyout-nav-item-hover-active": ( "background-color": var(--global-neutral-7), "components": ( "icon": ( - "fill": var(--global-white), - ), - ), + "fill": var(--global-white) + ) + ) ), "header-nav-chain-flyout-nav-menu": ( "components": ( "stack": ( - "gap": 1rem, - ), - ), + "gap": 1rem + ) + ) ), "header-nav-chain-flyout-nav-subsection-anchor": ( "block-size": var(--global-spacing-8), @@ -1409,9 +1542,9 @@ "align-content": center, "cursor": pointer, "justify-content": space-between, - "line-height": var(--global-line-height-7), - ), - ), + "line-height": var(--global-line-height-7) + ) + ) ), "header-nav-chain-flyout-nav-subsection-caret": ( "align-self": center, @@ -1421,23 +1554,23 @@ "display": flex, "components": ( "button-default": ( - "color": var(--icon-fill-color-subtle), + "color": var(--icon-fill-color-subtle) ), "button-hover": ( - "color": var(--color-white), - ), - ), + "color": var(--color-white) + ) + ) ), "header-nav-chain-flyout-nav-subsection-caret-open": ( - "transform": rotate(180deg), + "transform": rotate(180deg) ), "header-nav-chain-flyout-nav-subsection-container": ( "display": none, "flex-direction": column, - "position": relative, + "position": relative ), "header-nav-chain-flyout-nav-subsection-container-open": ( - "display": flex, + "display": flex ), "header-nav-chain-flyout-nav-subsection-menu": ( "background": var(--global-white), @@ -1452,36 +1585,36 @@ "padding-block-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-5), "padding-inline-start": var(--global-spacing-5), - "text-decoration": none, + "text-decoration": none ), "link-hover": ( "color": var(--global-white), - "background-color": var(--global-neutral-6), + "background-color": var(--global-neutral-6) ), "link-active": ( "color": var(--global-white), - "background-color": var(--global-neutral-6), - ), - ), + "background-color": var(--global-neutral-6) + ) + ) ), "header-nav-chain-flyout-nav-widgets": ( "margin-block-start": var(--global-spacing-3), "padding-block-end": var(--global-spacing-1), "padding-block-start": var(--global-spacing-1), "padding-inline-end": var(--global-spacing-4), - "padding-inline-start": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5) ), "header-nav-chain-flyout-nav-wrapper": ( "z-index": 10, "background": var(--global-black), "transition": transform 300ms ease-in-out, - "inline-size": 100vw, + "inline-size": 100vw ), "header-nav-chain-flyout-nav-wrapper-closed": ( - "transform": translate(-100vw, 0), + "transform": translate(calc(var(--text-direction) * -100vw), 0) ), "header-nav-chain-flyout-nav-wrapper-open": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "header-nav-chain-flyout-overlay": ( "margin-block-start": var(--header-nav-chain-height), @@ -1491,22 +1624,22 @@ "position": absolute, "scrollbar-width": none, "inset-inline-start": 0, - "inset-block-start": 0, + "inset-block-start": 0 ), "header-nav-chain-flyout-overlay-closed": ( "overflow-y": hidden, "overflow-block": hidden, - "inline-size": 0, + "inline-size": 0 ), "header-nav-chain-flyout-overlay-open": ( "background": var(--header-nav-chain-overlay-background-color), "overflow-y": scroll, "overflow-block": scroll, "transform": translate(0, 0), - "inline-size": 100%, + "inline-size": 100% ), "header-nav-chain-flyout-overlay-scrollbar": ( - "display": none, + "display": none ), "header-nav-chain-links-list": ( "display": none, @@ -1522,87 +1655,77 @@ "color": var(--global-white), "display": flex, "align-items": center, - "block-size": 100%, + "block-size": 100% ), "separator": ( - "color": var(--global-white), - ), - ), + "color": var(--global-white) + ) + ) ), "header-nav-chain-links-list-item": ( "display": flex, "gap": var(--global-spacing-2), "components": ( "link-hover": ( - "color": var(--global-neutral-3), - ), - ), + "color": var(--global-neutral-3) + ) + ) ), "header-nav-chain-logo": ( - "margin-inline-end": auto, + "margin-inline-end": auto ), "header-nav-chain-logo-center": ( - "margin-inline-end": 0, + "margin-inline-end": 0 ), "header-nav-chain-logo-hidden": ( "opacity": 0, - "transition": ( - opacity 0.8s ease, - visibility 0s ease 0s, - ), - "visibility": hidden, + "transition": (opacity 0.8s ease, visibility 0s ease 0s), + "visibility": hidden ), "header-nav-chain-logo-image": ( "max-inline-size": 240px, "max-block-size": var(--header-nav-chain-height), - "transition": ( - opacity 0.4s ease, - ), + "transition": (opacity 0.4s ease) ), "header-nav-chain-logo-image-hover": ( "opacity": 0.7, - "transition": ( - opacity 0.4s ease, - ), + "transition": (opacity 0.4s ease) ), "header-nav-chain-logo-right": ( "margin-inline-start": auto, - "margin-inline-end": 0, + "margin-inline-end": 0 ), "header-nav-chain-logo-show": ( "opacity": 1, - "transition": ( - opacity 0.8s ease, - visibility 0s ease 0s, - ), - "visibility": visible, + "transition": (opacity 0.8s ease, visibility 0s ease 0s), + "visibility": visible ), "header-nav-chain-nav-search": ( "align-items": center, "display": flex, "justify-content": center, - "position": relative, + "position": relative ), "header-nav-chain-nav-search-box-position": ( "position": absolute, - "inset-inline-end": 0, + "inset-inline-end": 0 ), "header-nav-chain-nav-search-box-svg": ( "fill": #191919, "block-size": 1rem, - "inline-size": 1rem, + "inline-size": 1rem ), "header-nav-chain-nav-search-button": ( "background": transparent, "border": transparent, - "cursor": pointer, + "cursor": pointer ), "header-nav-chain-nav-search-input": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": 0, "padding-inline-start": 0, - "inline-size": 0, + "inline-size": 0 ), "header-nav-chain-nav-search-input-open": ( "font-size": var(--body-font-size), @@ -1612,107 +1735,107 @@ "padding-block-start": var(--global-spacing-1), "padding-inline-end": var(--global-spacing-5), "padding-inline-start": var(--global-spacing-3), - "inline-size": 100%, + "inline-size": 100% ), "header-nav-chain-scrolled": ( - "min-block-size": var(--header-nav-chain-height-scrolled), + "min-block-size": var(--header-nav-chain-height-scrolled) ), "header-nav-chain-scrolled-flyout-overlay": ( - "margin-block-start": var(--header-nav-chain-height-scrolled), + "margin-block-start": var(--header-nav-chain-height-scrolled) ), "header-nav-chain-top-layout": ( "align-items": center, "display": flex, "justify-content": space-between, "inline-size": 100%, - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "header-nav-chain-top-layout-last-child": ( "margin-inline-end": 0, - "flex-shrink": 0, + "flex-shrink": 0 ), "header-nav-chain-top-nav-components-desktop": ( "align-items": center, "display": none, - "gap": var(--global-spacing-2), + "gap": var(--global-spacing-2) ), "header-nav-chain-top-nav-components-mobile": ( "align-items": center, - "display": flex, + "display": flex ), "header-nav-chain-top-nav-left": ( "justify-content": flex-start, - "flex-shrink": 0, + "flex-shrink": 0 ), "header-nav-chain-top-nav-right": ( "display": flex, "justify-content": flex-end, "flex-shrink": 0, - "margin-inline-end": 0, + "margin-inline-end": 0 ), "header-small": ( "font-size": var(--body-font-size-small), - "line-height": var(--body-line-height-small), + "line-height": var(--body-line-height-small) ), "headline": ( "font-size": var(--heading-level-1-font-size), "font-weight": var(--heading-level-1-font-weight), "line-height": var(--heading-level-1-line-height), - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "large-manual-promo": ( "gap": var(--global-spacing-4), "components": ( "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "large-manual-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "large-manual-promo-text": ( "gap": 0, "components": ( "heading": ( - "color": var(--text-color), + "color": var(--text-color) ), "overline": ( "color": var(--text-color), "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "overline-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "paragraph": ( - "font-size": var(--body-font-size), + "font-size": var(--body-font-size) ), "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "large-promo": ( "gap": var(--global-spacing-4), "components": ( "link": ( - "position": relative, + "position": relative ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "large-promo-icon-label": ( "align-items": center, "padding-block-start": var(--global-spacing-2), - "padding-inline-end": var(--global-spacing-2), "padding-block-end": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2), "padding-inline-start": var(--global-spacing-2), "background-color": var(--color-primary), "border": 0, @@ -1725,20 +1848,20 @@ "icon": ( "fill": var(--global-white), "block-size": var(--global-spacing-4), - "inline-size": var(--global-spacing-4), - ), - ), + "inline-size": var(--global-spacing-4) + ) + ) ), "large-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "large-promo-label": ( "margin-inline-start": var(--global-spacing-2), - "color": var(--global-white), + "color": var(--global-white) ), "large-promo-text": ( "gap": 0, @@ -1746,30 +1869,30 @@ "heading": ( "color": var(--text-color), "font-size": var(--heading-level-3-font-size), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "overline": ( "color": var(--text-color), "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "overline-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "paragraph": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "stack": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "separator": ( "margin-block-start": 0, "margin-block-end": 0, "margin-inline-end": var(--global-spacing-2), - "margin-inline-start": var(--global-spacing-2), - ), - ), + "margin-inline-start": var(--global-spacing-2) + ) + ) ), "lead-art": ( "components": ( @@ -1779,22 +1902,22 @@ "margin-block-end": var(--global-spacing-2), "margin-block-start": var(--global-spacing-2), "margin-inline-end": 0, - "margin-inline-start": 0, - ), - ), + "margin-inline-start": 0 + ) + ) ), "lead-art-carousel-close-button": ( "color": var(--global-white), "components": ( "button-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "icon": ( "fill": currentColor, "block-size": var(--global-spacing-6), - "inline-size": var(--global-spacing-6), - ), - ), + "inline-size": var(--global-spacing-6) + ) + ) ), "lead-art-carousel-fullscreen": ( "components": ( @@ -1802,13 +1925,28 @@ "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "lead-art-carousel-image-wrapper": ( + "aspect-ratio": calc(16/9) + ), + "lead-art-carousel-track-button": ( + "color": var(--global-white), + "components": ( + "button-hover": ( + "color": var(--global-neutral-3) + ), + "icon": ( + "fill": currentColor, + "block-size": var(--global-spacing-8), + "inline-size": var(--global-spacing-8) + ) + ) + ), + "lead-art-image-wrapper": ( "align-items": center, - "aspect-ratio": calc(16 / 9), "background-color": var(--global-black), "display": flex, "justify-content": center, @@ -1819,77 +1957,143 @@ "block-size": auto, "max-block-size": 100%, "max-inline-size": 100%, - "object-fit": contain, - ), - ), - ), - "lead-art-carousel-track-button": ( - "color": var(--global-white), - "components": ( - "button-hover": ( - "color": var(--global-neutral-3), - ), - "icon": ( - "fill": currentColor, - "block-size": var(--global-spacing-8), - "inline-size": var(--global-spacing-8), - ), - ), + "object-fit": contain + ) + ) ), "links-bar": ( "gap": var(--global-spacing-2), "components": ( "link": ( - "color": var(--text-color), + "color": var(--text-color) ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "login-form": ( "font-family": var(--font-family-primary), + "padding-block-end": var(--global-spacing-5), "components": ( "button": ( - "font-size": var(--global-font-size-4), + "font-size": var(--global-font-size-4) ), "heading": ( - "border-block-end-color": var(--border-color), - "border-block-end-style": var(--global-border-style-1), - "border-block-end-width": var(--global-border-width-1), - "font-size": var(--global-font-size-9), - "margin-block-end": var(--global-spacing-4), - "margin-bottom": var(--global-spacing-4), - "padding-block-end": var(--global-spacing-2), + "font-size": var(--heading-level-4-font-size), + "font-family": var(--font-family-secondary), + "font-weight": 700, + "font-style": normal, + "line-height": 140%, "text-align": center, + "padding-block-end": 0, + "padding-block-start": 0, + "padding-inline-end": 0, + "padding-inline-start": 0, + "margin-block-end": var(--global-spacing-5) ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-4) ), "input-error-tip": ( - "color": var(--status-color-danger), + "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-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), - "margin-block-end": var(--global-spacing-5), - ), - ), + "margin-block-end": var(--global-spacing-5) + ) + ) + ), + "login-form-bot-protection-section": ( + "margin-block-start": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5), + "components": ( + "paragraph": ( + "color": #f00 + ) + ) + ), + "login-form-error": ( + "font-family": var(--font-family-primary), + "text-align": center, + "margin-block-end": var(--global-spacing-4), + "components": ( + "paragraph": ( + "background-color": var(--status-color-danger-subtle), + "color": var(--status-color-danger), + "padding-block-end": var(--global-spacing-1), + "padding-block-start": var(--global-spacing-1), + "padding-inline-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2) + ) + ) + ), + "login-form-privacy-statement": ( + "display": block, + "text-align": center, + "inline-size": 100%, + "margin-block-start": 0, + "margin-block-end": var(--global-spacing-5), + "margin-inline-end": 0, + "margin-inline-start": 0, + "line-height": 150%, + "font-size": 0.75rem + ), + "login-form-sign-up-button": ( + "font-family": var(--font-family-primary), + "font-weight": 400, + "font-size": 1rem, + "line-height": 150%, + "background-color": transparent, + "text-decoration": underline, + "cursor": pointer + ), + "login-form-sign-up-div": ( + "display": block, + "text-align": center, + "inline-size": 100%, + "margin-block-start": 0, + "margin-block-end": var(--global-spacing-5), + "margin-inline-end": 0, + "margin-inline-start": 0, + "line-height": 150%, + "font-size": 1rem, + "components": ( + "paragraph": ( + "font-family": var(--font-family-primary), + "font-weight": 400, + "font-size": 1rem, + "line-height": 150% + ) + ) ), "login-links": ( + "font-family": var(--font-family-primary), "components": ( + "paragraph": ( + "text-align": center, + "font-family": var(--font-family-primary) + ), "link": ( "text-align": center, + "font-family": var(--font-family-primary) ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) + ), + "login-links-inner-link": ( + "text-decoration": underline, + "margin-block-end": var(--global-spacing-5), + "margin-inline-end": 0, + "margin-inline-start": 0, + "padding-inline-start": var(--global-spacing-2) ), "masthead": ( "border-block-end": 2px solid var(--global-neutral-8), @@ -1898,18 +2102,18 @@ "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "line-height": var(--body-line-height-tiny), - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "masthead-content": ( "display": flex, - "justify-content": space-evenly, + "justify-content": space-evenly ), "masthead-date": ( "align-items": flex-end, "display": flex, "font-weight": var(--global-font-weight-7), "justify-content": flex-start, - "flex": 11 0%, + "flex": 11 0% ), "masthead-divider": ( "margin-block-end": 0, @@ -1919,29 +2123,29 @@ "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": 0, - "padding-inline-start": 0, + "padding-inline-start": 0 ), "masthead-link": ( "align-items": flex-end, "display": flex, "justify-content": flex-end, - "flex": 11 0%, + "flex": 11 0% ), "masthead-logo": ( "display": flex, - "justify-content": center, + "justify-content": center ), "masthead-logo-image": ( "max-block-size": 64px, "object-fit": contain, - "vertical-align": middle, + "vertical-align": middle ), "masthead-tagline": ( "display": flex, "flex": 11 0%, "justify-content": center, "font-family": var(--font-family-primary), - "text-align": center, + "text-align": center ), "medium-manual-promo": ( "clear": both, @@ -1951,42 +2155,42 @@ "attribution": ( "color": var(--text-color), "font-size": var(--body-font-size-small), - "line-height": var(--body-line-height-small), + "line-height": var(--body-line-height-small) ), "heading": ( "color": var(--text-color), "font-size": var(--heading-level-5-font-size), "font-weight": var(--heading-level-5-font-weight), "line-height": var(--heading-level-5-line-height), - "margin-block-end": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4) ), "link-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "media-item": ( "float": inline-end, - "max-inline-size": 100px, + "max-inline-size": 100px ), "paragraph": ( "display": inline, "font-size": var(--body-font-size), - "line-height": var(--body-line-height), - ), - ), + "line-height": var(--body-line-height) + ) + ) ), "medium-manual-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "medium-manual-promo-show-image": ( "components": ( "heading": ( - "inline-size": 68%, - ), - ), + "inline-size": 68% + ) + ) ), "medium-promo": ( "clear": both, @@ -1995,32 +2199,32 @@ "components": ( "attribution": ( "display": block, - "margin-block-start": var(--global-spacing-4), + "margin-block-start": var(--global-spacing-4) ), "media-item": ( "float": inline-end, - "max-inline-size": 100px, + "max-inline-size": 100px ), "heading": ( "font-size": var(--heading-level-5-font-size), "font-weight": var(--heading-level-5-font-weight), "line-height": var(--heading-level-5-line-height), - "margin-block-end": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4) ), "paragraph": ( "display": block, - "inline-size": 100%, + "inline-size": 100% ), "separator": ( "padding-block-start": 0, "padding-block-end": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "link": ( - "position": relative, - ), - ), + "position": relative + ) + ) ), "medium-promo-icon-label": ( "align-items": center, @@ -2039,41 +2243,41 @@ "icon": ( "fill": var(--global-white), "block-size": var(--global-spacing-4), - "inline-size": var(--global-spacing-4), - ), - ), + "inline-size": var(--global-spacing-4) + ) + ) ), "medium-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "medium-promo-label": ( "margin-inline-start": var(--global-spacing-2), "color": var(--global-white), - "display": none, + "display": none ), "medium-promo-show-image": ( "components": ( "heading": ( "color": var(--text-color), - "inline-size": 68%, + "inline-size": 68% ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "numbered-list": ( "gap": var(--global-spacing-4), "components": ( "heading": ( "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), - ), - ), + "line-height": var(--heading-level-6-line-height) + ) + ) ), "numbered-list-item": ( "gap": var(--global-spacing-5), @@ -2081,62 +2285,73 @@ "heading": ( "font-size": var(--body-font-size), "font-weight": var(--body-font-weight), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "link": ( - "flex": 1, + "flex": 1 ), "paragraph": ( "font-family": var(--font-family-secondary), "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), - "line-height": var(--heading-level-6-line-height), - ), - ), + "line-height": var(--heading-level-6-line-height) + ) + ) ), "numbered-list-item-image": ( - "max-inline-size": 25%, + "max-inline-size": 25% ), "numbered-list-items": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "offer": ( "display": flex, "flex-direction": column, "justify-content": center, - "align-items": center, + "align-items": center ), "offer-card": ( "align-items": center, - "border": 1px solid var(--border-color), + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-style": solid, + "border-block-end-style": solid, + "border-inline-start-style": solid, + "border-inline-end-style": solid, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": 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), + "padding-block-start": var(--global-spacing-8), + "padding-inline-end": var(--global-spacing-6), + "padding-block-end": var(--global-spacing-6), + "padding-inline-start": var(--global-spacing-6), "components": ( "heading": ( "font-size": var(--global-font-size-9), "text-align": center, - "margin-bottom": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4), "font-weight": var(--global-font-weight-7), - "line-height": var(--global-line-height-6), + "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), + "margin-block-end": var(--global-spacing-4) ), "button-large": ( - "margin-bottom": var(--global-spacing-4), - ), - ), + "margin-block-end": var(--global-spacing-4) + ) + ) ), "offer-card-features": ( - "align-self": baseline, + "align-self": baseline ), "offer-card-features--feature-item": ( "align-items": center, @@ -2145,69 +2360,72 @@ "components": ( "icon": ( "display": flex, - "width": var(--global-spacing-4), - "height": var(--global-spacing-4), - "margin": 0 var(--global-spacing-2) 0 0, - ), - ), + "inline-size": var(--global-spacing-4), + "block-size": var(--global-spacing-4), + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-2), + "margin-block-end": 0, + "margin-inline-start": 0 + ) + ) ), "offer-grid-list": ( "gap": var(--global-spacing-5), "grid-template-columns": 1fr, - "justify-content": center, + "justify-content": center ), "offer-grid-list-1": ( - "grid-template-columns": minmax(auto, 600px), + "grid-template-columns": minmax(auto, 600px) ), "offer-grid-list-2": ( - "grid-template-columns": repeat(2, 1fr), + "grid-template-columns": repeat(2, 1fr) ), "offer-grid-list-3": ( - "grid-template-columns": repeat(3, 1fr), + "grid-template-columns": repeat(3, 1fr) ), "offer-grid-list-4": ( - "grid-template-columns": 1fr 1fr, + "grid-template-columns": 1fr 1fr ), "offer-grid-list-5": ( - "grid-template-columns": repeat(6, 1fr), + "grid-template-columns": repeat(6, 1fr) ), "offer-grid-list-5-children": ( - "grid-column": span 2, + "grid-column": span 2 ), "offer-headings": ( - "margin-top": var(--global-spacing-9), - "max-width": 40%, + "margin-block-start": var(--global-spacing-9), + "max-inline-size": 40%, "display": flex, "flex-direction": column, "justify-content": center, "align-items": center, - "text-align": center, + "text-align": center ), "offer-subtitle": ( "font-size": var(--global-font-size-10), - "line-height": var(--global-line-height-4), + "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), + "margin-block-end": var(--global-spacing-4) ), "offer-wrapper": ( - "margin-top": var(--global-spacing-5), - "margin-bottom": var(--global-spacing-6), + "margin-block-start": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-6) ), "paywall-overlay": ( "background-color": rgba(0, 0, 0, 0.63), - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "inset-block-end": 0, + "inset-inline-start": 0, + "inset-inline-end": 0, + "inset-block-start": 0, "overflow": auto, "pointer-events": all, "position": fixed, - "height": 100vh, - "z-index": 1, + "block-size": 100vh, + "z-index": 1 ), "paywall-overlay-content": ( "align-items": center, @@ -2215,18 +2433,21 @@ "background-color": var(--global-white), "display": flex, "flex-direction": column, - "margin-top": 50vh, - "max-height": 75vh, - "min-height": 50vh, + "margin-block-start": 50vh, + "max-block-size": 75vh, + "min-block-size": 50vh, "overflow": auto, "components": ( "stack": ( - "width": 100%, - ), - ), + "inline-size": 100% + ) + ) ), "paywall-subscription-dialog": ( - "padding": var(--global-spacing-6), + "padding-block-start": var(--global-spacing-6), + "padding-inline-end": var(--global-spacing-6), + "padding-block-end": var(--global-spacing-6), + "padding-inline-start": var(--global-spacing-6), "align-items": center, "grid-template-rows": auto, "gap": var(--global-spacing-6), @@ -2234,58 +2455,58 @@ "components": ( "stack": ( "align-items": center, - "grid-template-rows": auto, - ), - ), + "grid-template-rows": auto + ) + ) ), "paywall-subscription-dialog-link-prompt-link": ( - "font-weight": var(--heading-level-4-font-weight), + "font-weight": var(--heading-level-4-font-weight) ), "paywall-subscription-dialog-link-prompt-pre-link": ( - "margin-right": var(--global-spacing-2), + "margin-inline-end": 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, - ), - ), + "text-align": center + ) + ) ), "paywall-subscription-dialog-reason-prompt": ( - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "paywall-subscription-dialog-subheadline": ( - "font-size": var(--heading-level-6-font-size), + "font-size": var(--heading-level-6-font-size) ), "quad-chain": ( "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "quad-chain-child-item": ( - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "quad-chain-child-item-empty": ( - "display": contents, + "display": contents ), "quad-chain-children-grid": ( "grid-template-columns": 1fr, - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "reset-password": ( "font-family": var(--font-family-primary), "components": ( "button": ( - "font-size": var(--global-font-size-4), + "font-size": var(--global-font-size-4) ), "heading": ( "border-block-end-color": var(--border-color), @@ -2293,97 +2514,100 @@ "border-block-end-width": var(--global-border-width-1), "font-size": var(--global-font-size-9), "margin-block-end": var(--global-spacing-4), - "margin-bottom": var(--global-spacing-4), "padding-block-end": var(--global-spacing-2), - "text-align": center, + "text-align": center ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "input-error-tip": ( - "color": var(--status-color-danger), + "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-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), "margin-block-end": var(--global-spacing-4), - "text-align": center, - ), - ), + "text-align": center + ) + ) ), "results-list": ( "components": ( "attribution": ( - "margin-block-start": var(--global-spacing-4), + "display": block, + "margin-block-start": var(--global-spacing-4) ), "button": ( - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "heading": ( "font-size": var(--heading-level-5-font-size), "font-weight": var(--heading-level-5-font-weight), "line-height": var(--heading-level-5-line-height), - "margin-block-end": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4) ), "media-item": ( "float": inline-end, - "max-inline-size": 100px, + "max-inline-size": 100px ), "overline": ( - "font-size": var(--body-font-size), + "display": inline, + "font-size": var(--body-font-size) ), "separator": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), - ), + "paragraph": ( + "display": block + ) + ) ), "results-list-see-more": ( - "margin-block-size": var(--global-spacing-2), + "margin-block-start": var(--global-spacing-2) ), "results-list-show-image": ( "components": ( "heading": ( - "inline-size": 68%, - ), - "overline": ( - "font-size": var(--body-font-size), - ), - ), + "inline-size": 68% + ) + ) ), "results-list-wrapper": ( - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "right-rail": ( - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "right-rail-advanced": ( - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) + ), + "right-rail-advanced-empty": ( + "gap": 0 ), "right-rail-advanced-footer": ( "margin-block-start": var(--global-spacing-10), "margin-inline-end": 0, "margin-block-end": var(--global-spacing-8), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-advanced-full-width-1": ( "margin-block-start": 0, "margin-inline-end": 0, "margin-block-end": var(--global-spacing-5), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-advanced-full-width-2": ( "margin-block-start": var(--global-spacing-6), "margin-inline-end": 0, "margin-block-end": 0, - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-advanced-main": ( "gap": var(--global-spacing-6), @@ -2392,7 +2616,7 @@ "margin-block-start": auto, "margin-inline-end": auto, "margin-block-end": auto, - "margin-inline-start": auto, + "margin-inline-start": auto ), "right-rail-advanced-main-interior-item": ( "padding-block-start": initial, @@ -2401,13 +2625,13 @@ "padding-inline-start": initial, "border-inline-end": initial, "gap": var(--global-spacing-5), - "display": contents, + "display": contents ), "right-rail-advanced-main-interior-item-1": ( - "grid-area": main-interior-item-1, + "grid-area": main-interior-item-1 ), "right-rail-advanced-main-interior-item-2": ( - "grid-area": main-interior-item-2, + "grid-area": main-interior-item-2 ), "right-rail-advanced-main-right-rail": ( "padding-block-start": initial, @@ -2416,15 +2640,18 @@ "padding-inline-start": initial, "gap": var(--global-spacing-5), "display": contents, + "border-inline-start-style": none, + "border-inline-start-color": var(--border-color), + "border-inline-start-width": 0 ), "right-rail-advanced-main-right-rail-bottom": ( - "grid-area": main-right-rail-bottom, + "grid-area": main-right-rail-bottom ), "right-rail-advanced-main-right-rail-middle": ( - "grid-area": main-right-rail-middle, + "grid-area": main-right-rail-middle ), "right-rail-advanced-main-right-rail-top": ( - "grid-area": main-right-rail-top, + "grid-area": main-right-rail-top ), "right-rail-advanced-navigation": ( "position": sticky, @@ -2434,33 +2661,32 @@ "margin-block-start": 0, "margin-inline-end": 0, "margin-block-end": var(--global-spacing-5), - "margin-inline-start": 0, + "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", + "grid-template-areas": "main-right-rail-top" "main-interior-item-1" "main-right-rail-middle" "main-interior-item-2" "main-right-rail-bottom", "grid-template-columns": initial, "grid-template-rows": 1fr, "grid-auto-rows": auto, - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "right-rail-footer": ( "margin-block-start": var(--global-spacing-10), "margin-inline-end": 0, "margin-block-end": var(--global-spacing-8), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-full-width-1": ( "margin-block-start": 0, "margin-inline-end": 0, "margin-block-end": var(--global-spacing-5), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-full-width-2": ( "margin-block-start": var(--global-spacing-6), "margin-inline-end": 0, "margin-block-end": 0, - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-main": ( "max-inline-size": calc(var(--content-max-width) * 1px), @@ -2471,22 +2697,25 @@ "margin-inline-start": auto, "components": ( "stack": ( - "gap": var(--global-spacing-6), - ), - ), + "gap": var(--global-spacing-6) + ) + ) ), "right-rail-main-interior-item": ( "padding-block-start": initial, "padding-inline-end": initial, "padding-block-end": initial, "padding-inline-start": initial, - "border-inline-end": initial, + "border-inline-end": initial ), "right-rail-main-right-rail": ( "padding-block-start": initial, "padding-inline-end": initial, "padding-block-end": initial, "padding-inline-start": initial, + "border-inline-start-style": none, + "border-inline-start-color": var(--border-color), + "border-inline-start-width": 0 ), "right-rail-navigation": ( "position": sticky, @@ -2496,26 +2725,26 @@ "margin-block-start": 0, "margin-inline-end": 0, "margin-block-end": var(--global-spacing-5), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-rail-container": ( "grid-template-columns": initial, "grid-template-rows": 1fr, - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "search-results-list": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "search-results-list-field": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "search-results-list-field-wrapper": ( "display": grid, @@ -2523,7 +2752,7 @@ "grid-template": "icon input search" 1fr / var(--global-spacing-7) 1fr auto, "components": ( "button": ( - "grid-area": search, + "grid-area": search ), "icon": ( "align-self": center, @@ -2531,75 +2760,75 @@ "grid-area": icon, "inline-size": var(--global-spacing-5), "justify-self": center, - "z-index": 1, + "z-index": 1 ), "input": ( "gap": 0, - "grid-area": icon / icon / input / input, + "grid-area": icon / icon / input / input ), "input-input": ( "font-family": var(--font-family-primary), "font-weight": var(--global-font-weight-7), "inline-size": 100%, - "padding-inline-start": var(--global-spacing-7), - ), - ), + "padding-inline-start": var(--global-spacing-7) + ) + ) ), "search-results-list-results": ( "components": ( "button": ( "inline-size": auto, "margin-block-end": 0, - "margin-block-start": var(--global-spacing-2), + "margin-block-start": var(--global-spacing-2) , "margin-inline-end": auto, - "margin-inline-start": auto, - ), - ), + "margin-inline-start": auto + ) + ) ), "search-results-list-results-item": ( "components": ( "attribution": ( "display": block, - "margin-block-start": var(--global-spacing-4), + "margin-block-start": var(--global-spacing-4) ), "heading": ( "font-size": var(--heading-level-5-font-size), "font-weight": var(--heading-level-5-font-weight), "line-height": var(--heading-level-5-line-height), - "margin-block-end": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4) ), "link": ( - "position": relative, + "position": relative ), "media-item": ( "float": inline-end, - "max-inline-size": 100px, + "max-inline-size": 100px ), "overline": ( "font-weight": var(--heading-level-4-font-weight), "font-size": var(--heading-level-5-font-size), - "line-height": var(--heading-level-5-line-height), + "line-height": var(--heading-level-5-line-height) ), "paragraph": ( - "display": block, + "display": block ), "separator": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "search-results-list-results-item-show-image": ( "components": ( "heading": ( - "inline-size": 68%, + "inline-size": 68% ), "overline": ( - "font-size": var(--body-font-size), - ), - ), + "font-size": var(--body-font-size) + ) + ) ), "section-title": ( "gap": var(--global-spacing-4), @@ -2608,20 +2837,30 @@ "font-family": var(--font-family-primary), "font-size": var(--heading-level-1-font-size), "font-weight": var(--heading-level-1-font-weight), - "line-height": var(--heading-level-1-line-height), + "line-height": var(--heading-level-1-line-height) ), "link": ( - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "separator": ( - "margin": 0 var(--global-spacing-4), - ), - ), + "margin-block-end": 0, + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-4), + "margin-inline-start": var(--global-spacing-4) + ) + ) + ), + "section-title-links": ( + "display": flex, + "flex-wrap": wrap ), "share-bar": ( "background": var(--background-color), "box-shadow": var(--global-box-shadow-1), - "border-radius": 0 var(--border-radius) var(--border-radius) 0, + "border-start-start-radius": 0, + "border-start-end-radius": var(--border-radius), + "border-end-end-radius": var(--border-radius), + "border-end-start-radius": 0, "display": none, "gap": var(--global-spacing-2), "inset-block-start": 200px, @@ -2633,150 +2872,154 @@ "position": fixed, "components": ( "button": ( - "background-color": transparent, + "background-color": transparent ), "button-default": ( "border-block-end-width": 0, "border-block-start-width": 0, "border-inline-end-width": 0, - "border-inline-start-width": 0, + "border-inline-start-width": 0 ), "button-medium": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-3), - "padding-inline-start": var(--global-spacing-3), - ), - ), + "padding-inline-start": var(--global-spacing-3) + ) + ) ), "share-bar-email": ( - "fill": #b61818, + "fill": #b61818 ), "share-bar-email-hover": ( - "fill": #c66565, + "fill": #c66565 ), "share-bar-facebook": ( - "fill": #415993, + "fill": #415993 ), "share-bar-facebook-hover": ( - "fill": #5d6f9a, + "fill": #5d6f9a ), "share-bar-linkedin": ( - "fill": #3076b0, + "fill": #3076b0 ), "share-bar-linkedin-hover": ( - "fill": #6baae8, + "fill": #6baae8 ), "share-bar-pinterest": ( - "fill": #ad2526, + "fill": #ad2526 ), "share-bar-pinterest-hover": ( - "fill": #b44c4c, + "fill": #b44c4c ), "share-bar-twitter": ( - "fill": #6baae8, + "fill": #000000 ), "share-bar-twitter-hover": ( - "fill": #91c4f6, + "fill": #000000 ), "sign-up": ( "font-family": var(--font-family-primary), "components": ( "button": ( - "font-size": var(--global-font-size-4), + "font-size": var(--global-font-size-4) ), "heading": ( "border-block-end-color": var(--border-color), - "border-block-end-style": var(--global-border-style-1), + "border-block-end-style": var(--global-border-style-0), "border-block-end-width": var(--global-border-width-1), "font-size": var(--global-font-size-9), "margin-block-end": var(--global-spacing-4), - "margin-bottom": var(--global-spacing-4), "padding-block-end": var(--global-spacing-2), - "text-align": center, + "text-align": center ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "input-error-tip": ( - "color": var(--status-color-danger), + "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-block-start": var(--global-spacing-2) + ), + "input-tip": ( + "font-size": var(--global-font-size-3) ), "paragraph": ( "font-family": var(--font-family-primary), - "margin-block-end": var(--global-spacing-5), - ), - ), + "margin-block-end": var(--global-spacing-5) + ) + ) + ), + "sign-up-tos-container-link": ( + "margin-block-end": var(--global-spacing-5) ), "sign-up-tos-link": ( "color": var(--text-color), - "text-decoration": none, + "text-decoration": underline ), "sign-up-tos-link-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "simple-list": ( "gap": var(--global-spacing-4), "components": ( "heading": ( "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), - ), - ), + "line-height": var(--heading-level-6-line-height) + ) + ) ), "simple-list-item": ( - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "simple-list-item-anchor": ( - "flex": 0 0 33%, + "flex": 0 0 33% ), "simple-list-items": ( "components": ( "heading": ( "line-height": var(--body-line-height), "font-size": var(--body-font-size), - "font-weight": var(--body-font-weight), - ), + "font-weight": var(--body-font-weight) + ) ), - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "single-chain": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "single-chain-children-stack": ( - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "single-column-regular-body": ( "inline-size": calc(100% - var(--global-spacing-6)), - "margin-block-start": "auto", - "margin-inline-end": "auto", - "margin-block-end": "auto", - "margin-inline-start": "auto", - "max-inline-size": none, + "margin-block-start": auto, + "margin-inline-end": auto, + "margin-block-end": auto, + "margin-inline-start": auto, + "max-inline-size": none ), "single-column-regular-footer": ( - "inline-size": 100%, + "inline-size": 100% ), "single-column-regular-main": ( "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "small-manual-promo": ( "display": grid, @@ -2787,33 +3030,33 @@ "color": var(--text-color), "font-size": var(--body-font-size), "font-weight": var(--body-font-weight), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "small-manual-promo-above": ( - "grid-template-columns": 1fr, + "grid-template-columns": 1fr ), "small-manual-promo-below": ( - "grid-template-columns": 1fr, + "grid-template-columns": 1fr ), "small-manual-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "small-manual-promo-left": ( "gap": var(--global-spacing-6), - "grid-template-columns": 1fr 2fr, + "grid-template-columns": 1fr 2fr ), "small-manual-promo-right": ( "gap": var(--global-spacing-6), - "grid-template-columns": 2fr 1fr, + "grid-template-columns": 2fr 1fr ), "small-promo": ( "display": grid, @@ -2824,58 +3067,108 @@ "color": var(--text-color), "font-size": var(--body-font-size), "font-weight": var(--body-font-weight), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "small-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "small-promo-left": ( "gap": var(--global-spacing-6), - "grid-template-columns": 1fr 2fr, + "grid-template-columns": 1fr 2fr ), "small-promo-right": ( "gap": var(--global-spacing-6), - "grid-template-columns": 2fr 1fr, + "grid-template-columns": 2fr 1fr ), "social-sign-on": ( - "inline-size": 300px, + "inline-size": 100%, "margin-inline": auto, + "gap": var(--global-spacing-4), "components": ( "paragraph": ( "color": var(--status-color-danger), - "font-family": var(--font-family-primary), - ), - ), + "font-family": var(--font-family-primary) + ) + ) ), "social-sign-on-button-container": ( "display": flex, "flex-direction": column, + "align-items": center, "gap": var(--global-spacing-4), + "inline-size": 100%, + "margin-block-start": var(--global-spacing-2), + "margin-block-end": var(--global-spacing-2) + ), + "social-sign-on-button-container-apple": ( + "justify-content": center, + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color), + "border-radius": var(--global-spacing-1), + "color": var(--text-color), + "font-weight": var(--global-font-weight-7), + "font-family": var(--font-family-primary), + "inline-size": 400px, + "components": ( + "button-secondary-reverse-hover": ( + "color": var(--text-color) + ) + ) + ), + "social-sign-on-dividerWithText": ( + "display": flex, + "align-items": center, + "flex-direction": row, + "color": var(--text-color-subtle), + "font-family": var(--font-family-primary), + "font-weight": var(--global-font-weight-4), + "font-size": var(--global-font-size-4), + "margin-block-start": var(--global-spacing-2) + ), + "social-sign-on-dividerWithText-after": ( + "content": '', + "height": 1px, + "background-color": var(--border-color), + "flex-grow": 1, + "margin-inline-start": var(--global-spacing-2) + ), + "social-sign-on-dividerWithText-before": ( + "content": '', + "height": 1px, + "background-color": var(--border-color), + "flex-grow": 1, + "margin-inline-end": var(--global-spacing-2) ), "subheadline": ( "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "tag-title": ( "components": ( "heading": ( "font-size": var(--heading-level-1-font-size), - "line-height": var(--heading-level-1-line-height), + "line-height": var(--heading-level-1-line-height) ), "stack": ( - "gap": var(--global-spacing-2), - ), - ), + "gap": var(--global-spacing-2) + ) + ) ), "top-table-list": ( "grid-template-columns": 1fr, @@ -2883,33 +3176,33 @@ "gap": var(--global-spacing-5), "components": ( "grid": ( - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "image": ( - "transition": opacity 0.4s ease, + "transition": opacity 0.4s ease ), "image-hover": ( "cursor": pointer, - "opacity": 0.8, + "opacity": 0.8 ), "link": ( - "color": var(--text-color), + "color": var(--text-color) ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "top-table-list-large": ( "gap": var(--global-spacing-4), "components": ( "link": ( - "position": relative, - ), - ), + "position": relative + ) + ) ), "top-table-list-large-container": ( - "grid-template-columns": 1fr, + "grid-template-columns": 1fr ), "top-table-list-large-icon-label": ( "align-items": center, @@ -2919,7 +3212,7 @@ "border-inline-end": 0, "border-inline-start": 0, "border-radius": var(--global-spacing-2), - "insert-block-end": var(--global-spacing-2), + "inset-block-end": var(--global-spacing-2), "margin-inline-start": var(--global-spacing-2), "padding-block-end": var(--global-spacing-2), "padding-block-start": var(--global-spacing-2), @@ -2929,60 +3222,51 @@ "z-index": 1, "components": ( "icon": ( - "fill": var(--global-white), "block-size": var(--global-spacing-4), - "inline-size": var(--global-spacing-4), - ), - ), + "fill": var(--global-white), + "inline-size": var(--global-spacing-4) + ) + ) ), "top-table-list-large-label": ( "color": var(--global-white), - "margin-inline-start": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2) ), "top-table-list-large-text": ( "gap": 0, "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "overline": ( "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "paragraph": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "separator": ( "margin-block-end": 0, "margin-block-start": 0, "margin-inline-end": var(--global-spacing-2), - "margin-inline-start": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2) ), "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "top-table-list-medium": ( "components": ( "attribution": ( "display": block, - "margin-block-start": var(--global-spacing-4), + "margin-block-start": var(--global-spacing-4) ), "divider": ( "clear": both, - "margin-block-start": var(--global-spacing-5), - ), - "heading": ( - "font-size": var(--heading-level-5-font-size), - "font-weight": var(--heading-level-5-font-weight), - "line-height": var(--heading-level-5-line-height), - "margin-block-end": var(--global-spacing-4), - ), - "link": ( - "position": relative, + "margin-block-start": var(--global-spacing-5) ), "media-item": ( "float": inline-end, @@ -2990,23 +3274,32 @@ "margin-block-start": 0, "margin-inline-end": 0, "margin-inline-start": 0, - "max-inline-size": 100px, + "max-inline-size": 100px + ), + "heading": ( + "font-size": var(--heading-level-5-font-size), + "font-weight": var(--heading-level-5-font-weight), + "line-height": var(--heading-level-5-line-height), + "margin-block-end": var(--global-spacing-4) + ), + "link": ( + "position": relative ), "paragraph": ( - "display": block, + "display": block ), "separator": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "top-table-list-medium-container": ( - "grid-template-columns": 1fr, - "grid-template-rows": auto, "gap": var(--global-spacing-8), + "grid-template-columns": 1fr, + "grid-template-rows": auto ), "top-table-list-medium-icon-label": ( "align-items": center, @@ -3016,32 +3309,33 @@ "border-inline-end": 0, "border-inline-start": 0, "border-radius": var(--global-spacing-2), - "inline-block-end": var(--global-spacing-2), - "margin-left": var(--global-spacing-2), + "inset-block-end": var(--global-spacing-2), + "margin-inline-start": 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) "position": absolute, + "padding-inline-start": var(--global-spacing-2), + "position": absolute, "z-index": 1, "components": ( "icon": ( - "fill": var(--global-white), "block-size": var(--global-spacing-4), - "inline-size": var(--global-spacing-4), - ), - ), + "fill": var(--global-white), + "inline-size": var(--global-spacing-4) + ) + ) ), "top-table-list-medium-label": ( "color": var(--global-white), "display": none, - "margin-inline-start": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2) ), "top-table-list-medium-show-image": ( "components": ( "heading": ( - "inline-size": 68%, - ), - ), + "inline-size": 68% + ) + ) ), "top-table-list-small": ( "display": grid, @@ -3050,101 +3344,101 @@ "components": ( "heading": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), - ), - ), + "line-height": var(--body-line-height) + ) + ) ), "top-table-list-small-above": ( "components": ( - "divider": ( - "grid-column": span 1, - ), - ), + "divider": ( + "grid-column": span 1 + ) + ) ), "top-table-list-small-below": ( "components": ( "divider": ( - "grid-column": span 1, - ), - ), + "grid-column": span 1 + ) + ) ), "top-table-list-small-left": ( "grid-template-columns": 1fr 2fr, "components": ( "divider": ( - "grid-column": span 2, - ), - ), + "grid-column": span 2 + ) + ) ), "top-table-list-small-right": ( "grid-template-columns": 2fr 1fr, "components": ( "divider": ( - "grid-column": span 2, - ), - ), + "grid-column": span 2 + ) + ) ), "top-table-list-xl": ( "components": ( "heading": ( "align-self": start, - "justify-content": start, + "justify-content": start ), "overline": ( "display": flex, - "justify-content": start, + "justify-content": start ), "separator": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "top-table-list-xl-container": ( - "grid-template-columns": 1fr, + "grid-template-columns": 1fr ), "triple-chain": ( "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "triple-chain-child-item": ( - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "triple-chain-child-item-empty": ( - "display": contents, + "display": contents ), "triple-chain-children-grid": ( "grid-template-columns": 1fr, - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "video-player": ( "gap": var(--global-spacing-4), "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "media-item": ( "inline-size": 100%, "margin-block-end": auto, "margin-block-start": auto, "margin-inline-end": auto, - "margin-inline-start": auto, - ), - ), + "margin-inline-start": auto + ) + ) ), "video-player-feature": ( "gap": var(--global-spacing-6), @@ -3153,9 +3447,9 @@ "margin-block-end": 0, "margin-block-start": 0, "margin-inline-end": var(--global-spacing-4), - "margin-inline-start": var(--global-spacing-4), - ), - ), + "margin-inline-start": var(--global-spacing-4) + ) + ) ), "video-player-feature-meta": ( "margin-block-end": auto, @@ -3165,116 +3459,122 @@ "inline-size": var(--content-scale-width), "components": ( "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "xl-manual-promo": ( "components": ( "heading": ( - "color": var(--text-color), + "color": var(--text-color) ), "link": ( "font-family": inherit, "font-size": inherit, "font-weight": inherit, - "line-height": inherit, + "line-height": inherit ), "link-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "overline": ( - "color": var(--text-color), + "color": var(--text-color) ), "overline-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "xl-manual-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "xl-promo": ( "components": ( "heading": ( - "color": var(--text-color), + "color": var(--text-color) ), "link": ( "font-family": inherit, "font-size": inherit, "font-weight": inherit, - "line-height": inherit, + "line-height": inherit ), "link-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "overline": ( - "color": var(--text-color), + "color": var(--text-color) ), "overline-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "separator": ( - "padding": 0 var(--global-spacing-2), + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2) ), "stack": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "media-item": ( - "position": relative, - ), - ), + "position": relative + ) + ) ), "xl-promo-icon-label": ( "align-items": center, - "padding": 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), "background-color": var(--color-primary), "border": 0, "border-radius": var(--global-spacing-2), - "bottom": var(--global-spacing-2), - "margin-left": var(--global-spacing-2), + "inset-block-end": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2), "position": absolute, "z-index": 1, "components": ( "icon": ( "fill": var(--global-white), - "height": var(--global-spacing-4), - "width": var(--global-spacing-4), - ), - ), + "block-size": var(--global-spacing-4), + "inline-size": var(--global-spacing-4) + ) + ) ), "xl-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "xl-promo-label": ( - "margin-left": var(--global-spacing-2), - "color": var(--global-white), - ), + "margin-inline-start": var(--global-spacing-2), + "color": var(--global-white) + ) ), "components": ( "attribution": ( "color": var(--text-color), "font-size": var(--body-font-size-small), - "line-height": var(--body-line-height-small), + "line-height": var(--body-line-height-small) ), "attribution-link": ( "color": var(--text-color), - "cursor": pointer, + "cursor": pointer ), "attribution-link-hover": ( "color": var(--text-color-subtle), - "text-decoration": underline, + "text-decoration": underline ), "badge": ( "align-self": baseline, @@ -3286,25 +3586,25 @@ "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), + "padding-block-end": var(--global-spacing-1) ), "badge-danger": ( - "background-color": var(--status-color-danger), + "background-color": var(--status-color-danger) ), "badge-default": ( - "background-color": var(--text-color), + "background-color": var(--text-color) ), "badge-light": ( - "background-color": var(--text-color-subtle), + "background-color": var(--text-color-subtle) ), "badge-primary": ( - "background-color": var(--color-primary), + "background-color": var(--color-primary) ), "badge-success": ( - "background-color": var(--status-color-success), + "background-color": var(--status-color-success) ), "badge-warning": ( - "background-color": var(--status-color-warning), + "background-color": var(--status-color-warning) ), "button": ( "border-color": transparent, @@ -3312,13 +3612,13 @@ "border-width": var(--global-border-width-1), "border-radius": var(--border-radius), "font-weight": var(--global-font-weight-7), - "gap": var(--global-spacing-2), + "gap": var(--global-spacing-2) ), "button-default": ( "background-color": var(--global-white), "border-color": var(--global-neutral-7), "border-width": var(--global-border-width-1), - "color": var(--global-neutral-7), + "color": var(--global-neutral-7) ), "button-large": ( "font-size": var(--body-font-size), @@ -3326,7 +3626,7 @@ "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), + "padding-inline-end": var(--global-spacing-4) ), "button-medium": ( "font-size": var(--body-font-size-small), @@ -3334,43 +3634,40 @@ "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), + "padding-inline-end": var(--global-spacing-4) ), "button-primary": ( "background-color": var(--color-primary), - "color": var(--global-white), + "color": var(--global-white) ), "button-primary-hover": ( - "background-color": var(--color-primary-hover), + "background-color": var(--color-primary-hover) ), "button-primary-reverse": ( "background-color": transparent, "border-color": var(--color-primary), - "color": var(--color-primary), + "color": var(--color-primary) ), "button-primary-reverse-hover": ( "border-color": var(--color-primary-hover), - "color": var(--color-primary-hover), + "color": var(--color-primary-hover) ), "button-secondary": ( "background-color": var(--global-white), - "color": var - ( - --global-black, - ), + "color": var (--global-black) ), "button-secondary-hover": ( "background-color": var(--global-neutral-2), - "color": var(--global-neutral-6), + "color": var(--global-neutral-6) ), "button-secondary-reverse": ( "background-color": transparent, "border-color": var(--global-white), - "color": var(--global-white), + "color": var(--global-white) ), "button-secondary-reverse-hover": ( "border-color": var(--global-neutral-3), - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "button-small": ( "font-size": var(--body-font-size-small), @@ -3378,7 +3675,7 @@ "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), + "padding-inline-end": var(--global-spacing-4) ), "carousel": ( "font-family": var(--font-family-primary), @@ -3387,15 +3684,15 @@ "container-name": c-carousel, "container-type": inline-size, "max-inline-size": 100cqi, - "--slides": 1, + "--slides": 1 ), "carousel-actions": ( "display": none, "padding-inline-start": var(--global-spacing-5), - "padding-inline-end": var(--global-spacing-5), + "padding-inline-end": var(--global-spacing-5) ), "carousel-additional-controls": ( - "display": flex, + "display": flex ), "carousel-button": ( "align-items": center, @@ -3411,46 +3708,46 @@ "padding-inline-start": var(--global-spacing-2), "padding-block-end": 0, "padding-inline-end": var(--global-spacing-2), - "inline-size": auto, + "inline-size": auto ), "carousel-button-enter-full-screen": ( - "padding-inline-start": 0, + "padding-inline-start": 0 ), "carousel-button-exit-full-screen": ( "padding-inline-start": 0, - "padding-inline-end": 0, + "padding-inline-end": 0 ), "carousel-button-full-screen": ( - "color": var(--global-white), + "color": var(--global-white) ), "carousel-button-full-screen-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "carousel-button-next": ( "color": var(--global-white), - "margin-inline-start": auto, + "margin-inline-start": auto ), "carousel-button-next-rtl": ( - "transform": rotate(180deg), + "transform": rotate(180deg) ), "carousel-button-previous": ( - "color": var(--global-white), + "color": var(--global-white) ), "carousel-button-previous-rtl": ( - "transform": rotate(180deg), + "transform": rotate(180deg) ), "carousel-controls": ( - "margin-block-end": var(--global-spacing-2), + "margin-block-end": var(--global-spacing-2) ), "carousel-fullscreen": ( "color": var(--global-white), "padding-block-start": var(--global-spacing-2), "padding-inline-start": 0, "padding-block-end": var(--global-spacing-2), - "padding-inline-end": 0, + "padding-inline-end": 0 ), "carousel-fullscreen-button-toggle-auto-play": ( - "display": none, + "display": none ), "carousel-fullscreen-controls": ( "align-items": flex-end, @@ -3459,56 +3756,56 @@ "padding-inline-end": var(--global-spacing-2), "padding-block-end": var(--global-spacing-2), "padding-inline-start": var(--global-spacing-2), - "place-self": initial, + "place-self": initial ), "carousel-icon": ( "fill": currentColor, "block-size": var(--global-spacing-4), - "inline-size": var(--global-spacing-4), + "inline-size": var(--global-spacing-4) ), "carousel-track": ( "gap": initial, "max-inline-size": 100cqi, - "inline-size": 100%, + "inline-size": 100% ), "date": ( "color": var(--text-color), "font-size": var(--body-font-size-small), - "line-height": var(--body-line-height-small), + "line-height": var(--body-line-height-small) ), "divider": ( "background-color": var(--border-color), - "block-size": 1px, + "block-size": 1px ), "heading": ( "font-family": var(--font-family-primary), "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "icon": ( "fill": var(--icon-fill-color), "block-size": var(--global-spacing-5), - "inline-size": var(--global-spacing-5), + "inline-size": var(--global-spacing-5) ), "image": ( "block-size": auto, - "max-inline-size": 100%, + "max-inline-size": 100% ), "image-hover": ( - "opacity": 1, + "opacity": 1 ), "input": ( "align-items": flex-start, "display": flex, "flex-direction": column, - "gap": var(--global-spacing-1), + "gap": var(--global-spacing-1) ), "input-error-input": ( - "border-color": var(--status-color-danger), + "border-color": var(--status-color-danger) ), "input-error-input-focus": ( - "outline-color": var(--status-color-danger), + "outline-color": var(--status-color-danger) ), "input-input": ( "border-block-start-width": var(--global-border-width-1), @@ -3527,66 +3824,63 @@ "padding-block-end": var(--global-spacing-4), "padding-block-start": var(--global-spacing-4), "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "input-input-focus": ( "outline": solid 2px var(--form-border-color), - "outline-offset": 1px, + "outline-offset": 1px ), "input-label": ( - "font-weight": var(--global-font-weight-7), + "font-weight": var(--global-font-weight-7) ), "input-small-input": ( "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-inline-start": var(--global-spacing-2) ), "input-success-input": ( - "border-color": var(--status-color-success), + "border-color": var(--status-color-success) ), "input-success-input-focus": ( - "outline-color": var(--status-color-success), + "outline-color": var(--status-color-success) ), "input-warning-input": ( - "border-color": var(--status-color-warning), + "border-color": var(--status-color-warning) ), "input-warning-input-focus": ( - "outline-color": var(--status-color-warning), + "outline-color": var(--status-color-warning) ), "link": ( "color": var(--text-color), - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "link-active": ( - "text-decoration": none, + "text-decoration": none ), "link-hover": ( - "text-decoration": none, + "text-decoration": none ), "media-item": ( "align-items": stretch, "display": flex, "flex-direction": column, - "gap": var(--global-spacing-2), + "gap": var(--global-spacing-2) ), "media-item-fig-caption": ( "color": var(--text-color-subtle), "font-size": var(--body-font-size-tiny), - "line-height": var(--body-line-height-tiny), + "line-height": var(--body-line-height-tiny) ), "media-item-fig-caption-fullscreen": ( "padding-inline-start": var(--global-spacing-5), - "padding-inline-end": var(--global-spacing-5), + "padding-inline-end": var(--global-spacing-5) ), "media-item-fig-caption-vertical-video": ( - "text-align": center, - ), - "media-item-fig-caption-vertical-video": ( - "text-align": center, + "text-align": center ), "media-item-title": ( - "font-weight": var(--global-font-weight-7), + "font-weight": var(--global-font-weight-7) ), "overline": ( "color": var(--text-color), @@ -3594,13 +3888,13 @@ "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), "line-height": var(--heading-level-6-line-height), - "text-decoration": none, + "text-decoration": none ), "paragraph": ( "font-family": var(--font-family-secondary), "font-size": var(--body-font-size), "font-weight": var(--body-font-weight), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "pill": ( "background-color": var(--color-primary), @@ -3611,10 +3905,10 @@ "padding-inline-start": var(--global-spacing-4), "padding-block-end": var(--global-spacing-1), "padding-inline-end": var(--global-spacing-4), - "text-decoration": none, + "text-decoration": none ), "pill-hover": ( - "background-color": var(--global-neutral-7), + "background-color": var(--global-neutral-7) ), "stack-divider-horizontal": ( "border": none, @@ -3622,29 +3916,26 @@ "border-inline-start-style": var(--global-border-style-1), "border-inline-start-color": var(--border-color), "inline-size": 1px, - "block-size": auto, + "block-size": auto ), "stack-divider-vertical": ( "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, + "border-block-end-color": var(--border-color) ), "vertical-video-frame": ( - "background-color": transparent, + "background-color": transparent ), "video": ( "margin-block-start": auto, "margin-inline-start": auto, "margin-block-end": auto, - "margin-inline-end": auto, + "margin-inline-end": auto ), "video-frame": ( - "background-color": transparent, - ), - ), + "background-color": transparent + ) + ) ), "desktop": ( "alias": ( @@ -3657,18 +3948,18 @@ "heading-level-4-line-height": var(--global-line-height-3), "heading-level-5-font-size": var(--global-font-size-11), "heading-level-5-line-height": var(--global-line-height-4), - "heading-level-6-font-size": var(--global-font-size-7), + "heading-level-6-font-size": var(--global-font-size-7) ), "blocks": ( "alert-bar": ( "components": ( "link": ( - "font-size": var(--body-font-size), - ), - ), + "font-size": var(--body-font-size) + ) + ) ), "article-body": ( - "font-size": var(--heading-level-6-font-size), + "font-size": var(--heading-level-6-font-size) ), "article-body-gallery-fullscreen": ( "components": ( @@ -3676,48 +3967,48 @@ "padding-block-start": 0, "padding-inline-end": var(--global-spacing-5), "padding-block-end": 0, - "padding-inline-start": var(--global-spacing-5), - ), - ), + "padding-inline-start": var(--global-spacing-5) + ) + ) ), "article-body-image-wrapper": ( - "max-block-size": 75vh, + "max-block-size": 75vh ), "author-bio-author-description": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "author-bio-social-link-wrapper": ( - "margin-block-start": var(--global-spacing-4), + "margin-block-start": var(--global-spacing-4) ), "double-chain": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "double-chain-child-item-empty": ( - "display": initial, + "display": initial ), "double-chain-children-grid": ( "grid-template-columns": 1fr 1fr, - "gap": 0 var(--global-spacing-5), + "gap": 0 var(--global-spacing-5) ), "footer": ( "components": ( "image": ( - "max-block-size": var(--global-spacing-10), - ), - ), + "max-block-size": var(--global-spacing-10) + ) + ) ), "footer-links": ( "grid-auto-flow": column, - "grid-template-columns": 1fr 1fr 1fr 1fr, + "grid-template-columns": 1fr 1fr 1fr 1fr ), "footer-social-links-container": ( "border-block-end": none, - "inline-size": max-content, + "inline-size": max-content ), "footer-top-container": ( "border-block-end": 1px solid var(--global-neutral-4), @@ -3728,17 +4019,17 @@ "paragraph": ( "display": block, "align-self": center, - "text-align": center, - ), - ), + "text-align": center + ) + ) ), "forgot-password": ( "components": ( "heading": ( "font-size": var(--global-font-size-12), - "padding-block-end": var(--global-spacing-4), - ), - ), + "padding-block-end": var(--global-spacing-4) + ) + ) ), "full-author-bio": ( "flex-direction": row, @@ -3755,102 +4046,105 @@ "margin-inline-end": 0, "margin-inline-start": 0, "max-block-size": 11.25rem, - "max-inline-size": 11.25rem, - ), - ), + "max-inline-size": 11.25rem + ) + ) ), "full-author-bio-social-header": ( - "text-align": start, + "text-align": start ), "full-author-bio-social-icons": ( - "justify-content": flex-start, + "justify-content": flex-start ), "gallery-fullscreen": ( "components": ( "media-item-fig-caption": ( - "padding": 0 var(--global-spacing-5), - ), - ), + "padding-block-start": 0, + "padding-inline-end": var(--global-spacing-5), + "padding-block-end": 0, + "padding-inline-start": var(--global-spacing-5) + ) + ) ), "gallery-image-wrapper": ( - "max-height": 75vh, + "max-block-size": 75vh ), "header-account-action-desktop": ( "display": flex, "components": ( "button": ( - "text-decoration": none, - ), - ), + "text-decoration": none + ) + ) ), "header-account-action-mobile": ( - "display": none, + "display": none ), "header-nav-chain": ( "padding-block-end": var(--global-spacing-3), "padding-block-start": var(--global-spacing-3), "padding-inline-end": var(--global-spacing-5), - "padding-inline-start": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5) ), "header-nav-chain-flyout-nav-components-desktop": ( - "display": flex, + "display": flex ), "header-nav-chain-flyout-nav-components-mobile": ( - "display": none, + "display": none ), "header-nav-chain-flyout-nav-wrapper": ( - "inline-size": 315px, + "inline-size": 315px ), "header-nav-chain-flyout-nav-wrapper-closed": ( - "transform": translate(-315px, 0), + "transform": translate(calc(var(--text-direction) * -315px), 0) ), "header-nav-chain-links-list": ( - "display": flex, + "display": flex ), "header-nav-chain-top-nav-components-desktop": ( - "display": flex, + "display": flex ), "header-nav-chain-top-nav-components-mobile": ( - "display": none, + "display": none ), "header-small": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "large-manual-promo": ( "gap": var(--global-spacing-6), "components": ( "divider": ( - "grid-column": span 2, + "grid-column": span 2 ), "grid": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "large-manual-promo-text": ( "components": ( "heading": ( "font-size": var(--heading-level-4-font-size), - "line-height": var(--heading-level-4-line-height), - ), - ), + "line-height": var(--heading-level-4-line-height) + ) + ) ), "large-promo": ( "gap": var(--global-spacing-6), "components": ( "grid": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "large-promo-text": ( "components": ( "heading": ( "font-size": var(--heading-level-4-font-size), - "line-height": var(--heading-level-4-line-height), - ), - ), + "line-height": var(--heading-level-4-line-height) + ) + ) ), "lead-art-carousel-fullscreen": ( "components": ( @@ -3858,20 +4152,20 @@ "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-5), - "padding-inline-start": var(--global-spacing-5), - ), - ), + "padding-inline-start": var(--global-spacing-5) + ) + ) ), "login-form": ( "components": ( "heading": ( "font-size": var(--global-font-size-12), - "padding-block-end": var(--global-spacing-4), - ), - ), + "padding-block-end": var(--global-spacing-4) + ) + ) ), "masthead": ( - "display": flex, + "display": flex ), "medium-manual-promo": ( "components": ( @@ -3881,116 +4175,115 @@ "margin-block-start": 0, "margin-inline-end": 0, "margin-inline-start": 0, - "max-inline-size": 33%, + "max-inline-size": 33% ), "paragraph": ( - "display": block, - ), - ), + "display": block + ) + ) ), "medium-manual-promo-show-image": ( "components": ( "heading": ( "inline-size": auto, - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "paragraph": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), - ), - ), + "margin-inline-start": calc(33% + var(--global-spacing-6)) + ) + ) ), "medium-promo": ( "components": ( "attribution": ( - "display": block, + "display": block ), "media-item": ( - "float": left, + "float": inline-start, "margin-block-end": 0, "margin-block-start": 0, "margin-inline-end": 0, "margin-inline-start": 0, - "max-inline-size": 33%, + "max-inline-size": 33% ), "paragraph": ( "display": block, - "inline-size": auto, - ), - ), + "inline-size": auto + ) + ) ), "medium-promo-label": ( - "display": inline, + "display": inline ), "medium-promo-show-image": ( "components": ( "attribution": ( - "margin-left": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "heading": ( - "margin-left": calc(33% + var(--global-spacing-6)), - "inline-size": auto, + "margin-inline-start": calc(33% + var(--global-spacing-6)), + "inline-size": auto ), "paragraph": ( - "margin-left": calc(33% + var(--global-spacing-6)), - ), - ), + "margin-inline-start": calc(33% + var(--global-spacing-6)) + ) + ) ), "quad-chain": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "quad-chain-child-item-empty": ( - "display": initial, + "display": initial ), "quad-chain-children-grid": ( "grid-template-columns": 1fr 1fr 1fr 1fr, - "gap": 0 var(--global-spacing-5), + "gap": 0 var(--global-spacing-5) ), "reset-password": ( "components": ( "heading": ( "font-size": var(--global-font-size-12), - "padding-block-end": var(--global-spacing-4), - ), - ), + "padding-block-end": var(--global-spacing-4) + ) + ) ), "results-list": ( "components": ( "media-item": ( "float": inline-start, - "margin-block-top": 0, "margin-block-end": 0, - "margin-inline-start": 0, + "margin-block-start": 0, "margin-inline-end": 0, - "max-inline-size": 33%, + "margin-inline-start": 0, + "max-inline-size": 33% ), "overline": ( - "font-size": var(--global-font-size-7), - ), - ), + "font-size": var(--global-font-size-7) + ) + ) ), "results-list-show-image": ( "components": ( "attribution": ( "display": block, - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "heading": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), "inline-size": auto, + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "overline": ( - "margin-inline-start": var(--global-spacing-6), "font-size": var(--global-font-size-7), + "margin-inline-start": var(--global-spacing-6) ), "paragraph": ( - "display": block, - "margin-inline-start": calc(33% + var(--global-spacing-6)), - ), - ), + "margin-inline-start": calc(33% + var(--global-spacing-6)) + ) + ) ), "right-rail-advanced-main-interior-item": ( "border-inline-end-width": 1px, @@ -4000,7 +4293,7 @@ "padding-inline-end": var(--global-spacing-6), "padding-block-end": 0, "padding-inline-start": 0, - "display": flex, + "display": flex ), "right-rail-advanced-main-right-rail": ( "padding-block-start": 0, @@ -4008,17 +4301,19 @@ "padding-block-end": 0, "padding-inline-start": var(--global-spacing-6), "display": flex, + "border-inline-start-style": solid, + "border-inline-start-width": 1px ), "right-rail-advanced-navigation": ( "padding-block-start": 0, "padding-inline-end": 0, "padding-block-end": var(--global-spacing-8), - "padding-inline-start": 0, + "padding-inline-start": 0 ), "right-rail-advanced-rail-container": ( "grid-template-columns": 2fr 1fr, "gap": 0, - "grid-template-rows": initial, + "grid-template-rows": initial ), "right-rail-main-interior-item": ( "border-inline-end-width": 1px, @@ -4027,29 +4322,31 @@ "padding-block-start": 0, "padding-inline-end": var(--global-spacing-6), "padding-block-end": 0, - "padding-inline-start": 0, + "padding-inline-start": 0 ), "right-rail-main-right-rail": ( "padding-block-start": 0, "padding-inline-end": 0, "padding-block-end": 0, "padding-inline-start": var(--global-spacing-6), + "border-inline-start-style": solid, + "border-inline-start-width": 1px ), "right-rail-navigation": ( "padding-block-start": 0, "padding-inline-end": 0, "padding-block-end": var(--global-spacing-8), - "padding-inline-start": 0, + "padding-inline-start": 0 ), "right-rail-rail-container": ( "grid-template-columns": 2fr 1fr, "gap": 0, - "grid-template-rows": initial, + "grid-template-rows": initial ), "search-results-list-results-item": ( "components": ( "attribution": ( - "display": block, + "display": block ), "media-item": ( "float": inline-start, @@ -4057,135 +4354,135 @@ "margin-block-start": 0, "margin-inline-end": 0, "margin-inline-start": 0, - "max-inline-size": 33%, + "max-inline-size": 33% ), "paragraph": ( - "display": block, - ), - ), + "display": block + ) + ) ), "search-results-list-results-item-show-image": ( "components": ( "attribution": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "heading": ( "inline-size": auto, - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "overline": ( "font-size": var(--heading-level-5-font-size), - "margin-inline-start": var(--global-spacing-6), + "margin-inline-start": var(--global-spacing-6) ), "paragraph": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), - ), - ), + "margin-inline-start": calc(33% + var(--global-spacing-6)) + ) + ) ), "share-bar": ( - "display": flex, + "display": flex ), "sign-up": ( "components": ( "heading": ( "font-size": var(--global-font-size-12), - "padding-block-end": var(--global-spacing-4), - ), - ), + "padding-block-end": var(--global-spacing-4) + ) + ) ), "single-chain": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "single-chain-children-stack": ( - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "single-column-regular-body": ( - "max-inline-size": 37rem, + "max-inline-size": 37rem ), "top-table-list-large": ( "gap": var(--global-spacing-6), "components": ( "divider": ( - "grid-column": span 2, + "grid-column": span 2 ), "grid": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "top-table-list-large-text": ( "components": ( "heading": ( "font-size": var(--heading-level-4-font-size), - "line-height": var(--heading-level-4-line-height), - ), - ), + "line-height": var(--heading-level-4-line-height) + ) + ) ), "top-table-list-medium": ( "components": ( "attribution": ( - "display": block, + "display": block ), "media-item": ( "float": inline-start, - "max-inline-size": 33%, + "max-inline-size": 33% ), "paragraph": ( - "display": block, - ), - ), + "display": block + ) + ) ), "top-table-list-medium-container": ( - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "top-table-list-medium-label": ( - "display": inline, + "display": inline ), "top-table-list-medium-show-image": ( "components": ( "attribution": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "heading": ( "inline-size": auto, - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "paragraph": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), - ), - ), + "margin-inline-start": calc(33% + var(--global-spacing-6)) + ) + ) ), "top-table-list-small-container-1": ( "components": ( "grid": ( - "template-columns": 1fr, - ), - ), + "template-columns": 1fr + ) + ) ), "top-table-list-small-container-2": ( "components": ( "grid": ( - "template-columns": repeat(2, minmax(5rem, 1fr)), - ), - ), + "template-columns": repeat(2, minmax(5rem, 1fr)) + ) + ) ), "top-table-list-small-container-3": ( "components": ( "grid": ( - "template-columns": repeat(3, minmax(5rem, 1fr)), - ), - ), + "template-columns": repeat(3, minmax(5rem, 1fr)) + ) + ) ), "top-table-list-small-container-4": ( "components": ( "grid": ( - "template-columns": repeat(4, minmax(5rem, 1fr)), - ), - ), + "template-columns": repeat(4, minmax(5rem, 1fr)) + ) + ) ), "top-table-list-xl": ( "components": ( @@ -4193,30 +4490,30 @@ "align-self": center, "font-size": var(--heading-level-1-font-size), "justify-content": center, - "line-height": var(--heading-level-1-line-height), + "line-height": var(--heading-level-1-line-height) ), "overline": ( "display": flex, - "justify-content": center, + "justify-content": center ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "triple-chain": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "triple-chain-child-item-empty": ( - "display": initial, + "display": initial ), "triple-chain-children-grid": ( "grid-template-columns": 1fr 1fr 1fr, - "gap": 0 var(--global-spacing-5), + "gap": 0 var(--global-spacing-5) ), "xl-manual-promo": ( "components": ( @@ -4224,16 +4521,16 @@ "align-self": center, "font-size": var(--heading-level-1-font-size), "justify-content": center, - "line-height": var(--heading-level-1-line-height), + "line-height": var(--heading-level-1-line-height) ), "overline": ( "display": flex, - "justify-content": center, + "justify-content": center ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "xl-promo": ( "components": ( @@ -4241,44 +4538,44 @@ "align-self": center, "font-size": var(--heading-level-1-font-size), "justify-content": center, - "line-height": var(--heading-level-1-line-height), + "line-height": var(--heading-level-1-line-height) ), "overline": ( "display": flex, - "justify-content": center, + "justify-content": center ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "xl-promo-icon-label": ( "margin-inline-start": var(--global-spacing-2), - "color": var(--global-white), - ), + "color": var(--global-white) + ) ), "components": ( "carousel": ( - "--slides": 4, + "--slides": 4 ), "carousel-actions": ( - "display": flex, + "display": flex ), "carousel-additional-controls": ( "gap": var(--global-spacing-2), "padding-block-start": 0, "padding-inline-start": var(--global-spacing-2), "padding-block-end": 0, - "padding-inline-end": 0, + "padding-inline-end": 0 ), "carousel-fullscreen": ( "padding-block-start": var(--global-spacing-5), "padding-inline-start": 0, "padding-block-end": var(--global-spacing-5), - "padding-inline-end": 0, + "padding-inline-end": 0 ), "carousel-fullscreen-button-toggle-auto-play": ( - "display": flex, + "display": flex ), "carousel-fullscreen-controls": ( "flex-direction": initial, @@ -4286,16 +4583,16 @@ "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, + "place-self": flex-start ), "carousel-track": ( - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "video-frame": ( - "background-color": var(--global-black), - ), - ), - ), + "background-color": var(--global-black) + ) + ) + ) ) ); @@ -4345,4 +4642,4 @@ @use "../../blocks/tag-title-block"; @use "../../blocks/top-table-list-block"; @use "../../blocks/triple-chain-block"; -@use "../../blocks/video-player-block"; +@use "../../blocks/video-player-block"; \ No newline at end of file diff --git a/.stylelintrc.json b/.stylelintrc.json index c4f6846253..73fc490f0c 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -6,8 +6,7 @@ ], "extends": [ "stylelint-config-recommended", - "stylelint-config-sass-guidelines", - "stylelint-config-prettier" + "stylelint-config-sass-guidelines" ], "ignoreFiles": ["**/*.js", "**/*.jsx"], "rules": { diff --git a/babel.config.js b/babel.config.js index 4c0e9fa3ae..56d858939c 100644 --- a/babel.config.js +++ b/babel.config.js @@ -16,17 +16,19 @@ module.exports = { }, ], ], + plugins: [ + [ + "@babel/plugin-proposal-decorators", + { + legacy: true, + }, + ], + ], env: { test: { plugins: [ "@babel/plugin-proposal-nullish-coalescing-operator", "transform-react-remove-prop-types", - [ - "@babel/plugin-proposal-decorators", - { - legacy: true, - }, - ], "@babel/plugin-proposal-class-properties", [ "module-resolver", diff --git a/blocks/ads-block/index.story.jsx b/blocks/ads-block/index.story.jsx index a7de05b9e6..1f05799bb7 100644 --- a/blocks/ads-block/index.story.jsx +++ b/blocks/ads-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import { ArcAdDisplay } from "./features/ads/default"; export default { title: "Blocks/Ads Block", - decorators: [withKnobs], parameters: { // Set the viewports in Chromatic at a component level. chromatic: { viewports: [320, 1200] }, diff --git a/blocks/alert-bar-block/index.story.jsx b/blocks/alert-bar-block/index.story.jsx index 80b1f87106..7a21e9c300 100644 --- a/blocks/alert-bar-block/index.story.jsx +++ b/blocks/alert-bar-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import { AlertBarPresentational } from "./features/alert-bar/default"; export default { title: "Blocks/Alert Bar", - decorators: [withKnobs], parameters: { // Set the viewports in Chromatic at a component level. chromatic: { viewports: [320, 1200] }, diff --git a/blocks/algolia-assortment-content-source-block/package-lock.json b/blocks/algolia-assortment-content-source-block/package-lock.json index 385ea6b86e..f3cdd2d5e6 100644 --- a/blocks/algolia-assortment-content-source-block/package-lock.json +++ b/blocks/algolia-assortment-content-source-block/package-lock.json @@ -5,158 +5,158 @@ "requires": true, "dependencies": { "@algolia/cache-browser-local-storage": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.23.1.tgz", - "integrity": "sha512-1sAJYmXN9TOk6Hd8BUQOglxP9Kq9F0qlISsuWxH6y4UjevevgxhLvA6VrODJb1ghwwQi0nODXxwUhNh0sGF8xw==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.23.2.tgz", + "integrity": "sha512-PvRQdCmtiU22dw9ZcTJkrVKgNBVAxKgD0/cfiqyxhA5+PHzA2WDt6jOmZ9QASkeM2BpyzClJb/Wr1yt2/t78Kw==", "requires": { - "@algolia/cache-common": "4.23.1" + "@algolia/cache-common": "4.23.2" } }, "@algolia/cache-common": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.23.1.tgz", - "integrity": "sha512-w0sqXuwbGyIDsFDHTZzTv79rZjW7vc/6vCPdqYAAkiUlvvCdUo0cCWFXpbMpvYHBS2IXZXJaQY0R9yL/bmk9VQ==" + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.23.2.tgz", + "integrity": "sha512-OUK/6mqr6CQWxzl/QY0/mwhlGvS6fMtvEPyn/7AHUx96NjqDA4X4+Ju7aXFQKh+m3jW9VPB0B9xvEQgyAnRPNw==" }, "@algolia/cache-in-memory": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.23.1.tgz", - "integrity": "sha512-Wy5J4c2vLi1Vfsc3qoM/trVtvN9BlV+X2hfiAhfTVclyney6fs/Rjus8lbadl1x5GjlPIgMNGxvr/A/wnJQUBw==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.23.2.tgz", + "integrity": "sha512-rfbi/SnhEa3MmlqQvgYz/9NNJ156NkU6xFxjbxBtLWnHbpj+qnlMoKd+amoiacHRITpajg6zYbLM9dnaD3Bczw==", "requires": { - "@algolia/cache-common": "4.23.1" + "@algolia/cache-common": "4.23.2" } }, "@algolia/client-account": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.23.1.tgz", - "integrity": "sha512-E8rALAfC7G1gruxW4zO3WgBkWQDJq1Crnxi45uo/KUYf78x+T7YwojyS42fHz//thbtPyPUC5WZCQlnzqgMZlg==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.23.2.tgz", + "integrity": "sha512-VbrOCLIN/5I7iIdskSoSw3uOUPF516k4SjDD4Qz3BFwa3of7D9A0lzBMAvQEJJEPHWdVraBJlGgdJq/ttmquJQ==", "requires": { - "@algolia/client-common": "4.23.1", - "@algolia/client-search": "4.23.1", - "@algolia/transporter": "4.23.1" + "@algolia/client-common": "4.23.2", + "@algolia/client-search": "4.23.2", + "@algolia/transporter": "4.23.2" } }, "@algolia/client-analytics": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.23.1.tgz", - "integrity": "sha512-xtfp/M3TjHStStH/UQoxmt8SeVpxSgdZGcCY61+chG9fmbJHgeYtzECQu7SVZ+LPTW0nmyqMrpKQ9kFcgPnV1A==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.23.2.tgz", + "integrity": "sha512-lLj7irsAztGhMoEx/SwKd1cwLY6Daf1Q5f2AOsZacpppSvuFvuBrmkzT7pap1OD/OePjLKxicJS8wNA0+zKtuw==", "requires": { - "@algolia/client-common": "4.23.1", - "@algolia/client-search": "4.23.1", - "@algolia/requester-common": "4.23.1", - "@algolia/transporter": "4.23.1" + "@algolia/client-common": "4.23.2", + "@algolia/client-search": "4.23.2", + "@algolia/requester-common": "4.23.2", + "@algolia/transporter": "4.23.2" } }, "@algolia/client-common": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.23.1.tgz", - "integrity": "sha512-01lBsO8r4KeXWIDzVQoPMYwOndeAvSQk3xk3Bxwrt2ag5jrGswiq8DgEqPVx+PQw+7T5GY6dS25cYcdv1dVorA==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.23.2.tgz", + "integrity": "sha512-Q2K1FRJBern8kIfZ0EqPvUr3V29ICxCm/q42zInV+VJRjldAD9oTsMGwqUQ26GFMdFYmqkEfCbY4VGAiQhh22g==", "requires": { - "@algolia/requester-common": "4.23.1", - "@algolia/transporter": "4.23.1" + "@algolia/requester-common": "4.23.2", + "@algolia/transporter": "4.23.2" } }, "@algolia/client-personalization": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.23.1.tgz", - "integrity": "sha512-B8UEALAg1/6DaLuJOxYTfGBVrLZN4M7FoaYrjbHLw2oF5Y6bxe59Y5ug+lSbs6v9bWx7U9rNVpd8m2I8pobFcA==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.23.2.tgz", + "integrity": "sha512-vwPsgnCGhUcHhhQG5IM27z8q7dWrN9itjdvgA6uKf2e9r7vB+WXt4OocK0CeoYQt3OGEAExryzsB8DWqdMK5wg==", "requires": { - "@algolia/client-common": "4.23.1", - "@algolia/requester-common": "4.23.1", - "@algolia/transporter": "4.23.1" + "@algolia/client-common": "4.23.2", + "@algolia/requester-common": "4.23.2", + "@algolia/transporter": "4.23.2" } }, "@algolia/client-search": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.23.1.tgz", - "integrity": "sha512-jeA1ZksO0N33SZhcLRa4paUI7LFJrrhtMlw27eIdPTVv/npV0dMLoNGPg3MuLSeZqRKqfpY7tTOBjRZFMhskLg==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.23.2.tgz", + "integrity": "sha512-CxSB29OVGSE7l/iyoHvamMonzq7Ev8lnk/OkzleODZ1iBcCs3JC/XgTIKzN/4RSTrJ9QybsnlrN/bYCGufo7qw==", "requires": { - "@algolia/client-common": "4.23.1", - "@algolia/requester-common": "4.23.1", - "@algolia/transporter": "4.23.1" + "@algolia/client-common": "4.23.2", + "@algolia/requester-common": "4.23.2", + "@algolia/transporter": "4.23.2" } }, "@algolia/logger-common": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.23.1.tgz", - "integrity": "sha512-hGsqJrpeZfw1Ng8ctWj9gg8zXlSmEMA0cfbBn3yoZa3so8oQZmB9uz57AJcJj1CfSBf+5SK8/AF4kjTungvgUA==" + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.23.2.tgz", + "integrity": "sha512-jGM49Q7626cXZ7qRAWXn0jDlzvoA1FvN4rKTi1g0hxKsTTSReyYk0i1ADWjChDPl3Q+nSDhJuosM2bBUAay7xw==" }, "@algolia/logger-console": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.23.1.tgz", - "integrity": "sha512-6QYjtxsDwrdFeLoCcZmi9af/EbWkpUYSclx2d342EoayaY8S2tCORgqwzDmPPOpvi5Y6zPnDsj2BG7vrpK8bdg==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.23.2.tgz", + "integrity": "sha512-oo+lnxxEmlhTBTFZ3fGz1O8PJ+G+8FiAoMY2Qo3Q4w23xocQev6KqDTA1JQAGPDxAewNA2VBwWOsVXeXFjrI/Q==", "requires": { - "@algolia/logger-common": "4.23.1" + "@algolia/logger-common": "4.23.2" } }, "@algolia/recommend": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-4.23.1.tgz", - "integrity": "sha512-9Td+htxUYkUxrkaPOum9Q1jAy+NogxpwZ+Vvn3X+IBIfXECrNhIff+u1ddIirRM2rMphWrrO/3GWLZaKY7FOxw==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-4.23.2.tgz", + "integrity": "sha512-Q75CjnzRCDzgIlgWfPnkLtrfF4t82JCirhalXkSSwe/c1GH5pWh4xUyDOR3KTMo+YxxX3zTlrL/FjHmUJEWEcg==", "requires": { - "@algolia/cache-browser-local-storage": "4.23.1", - "@algolia/cache-common": "4.23.1", - "@algolia/cache-in-memory": "4.23.1", - "@algolia/client-common": "4.23.1", - "@algolia/client-search": "4.23.1", - "@algolia/logger-common": "4.23.1", - "@algolia/logger-console": "4.23.1", - "@algolia/requester-browser-xhr": "4.23.1", - "@algolia/requester-common": "4.23.1", - "@algolia/requester-node-http": "4.23.1", - "@algolia/transporter": "4.23.1" + "@algolia/cache-browser-local-storage": "4.23.2", + "@algolia/cache-common": "4.23.2", + "@algolia/cache-in-memory": "4.23.2", + "@algolia/client-common": "4.23.2", + "@algolia/client-search": "4.23.2", + "@algolia/logger-common": "4.23.2", + "@algolia/logger-console": "4.23.2", + "@algolia/requester-browser-xhr": "4.23.2", + "@algolia/requester-common": "4.23.2", + "@algolia/requester-node-http": "4.23.2", + "@algolia/transporter": "4.23.2" } }, "@algolia/requester-browser-xhr": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.23.1.tgz", - "integrity": "sha512-dM8acMp6sn1HRoQrUiBYQCZvTrFwLwFuHagZH88nKhL52bUrtZXH2qUQ8RMQBb9am71J9COLyMgZYdyR+u8Ktg==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.23.2.tgz", + "integrity": "sha512-TO9wLlp8+rvW9LnIfyHsu8mNAMYrqNdQ0oLF6eTWFxXfxG3k8F/Bh7nFYGk2rFAYty4Fw4XUtrv/YjeNDtM5og==", "requires": { - "@algolia/requester-common": "4.23.1" + "@algolia/requester-common": "4.23.2" } }, "@algolia/requester-common": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.23.1.tgz", - "integrity": "sha512-G9+ySLxPBtn2o6Mk4NoxPnkYtAe/isxrVy5LmJ4za+aYEdV5tvZpgvn+k4558T7XoRBrI2eQKyjnvQs7zJeCdw==" + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.23.2.tgz", + "integrity": "sha512-3EfpBS0Hri0lGDB5H/BocLt7Vkop0bTTLVUBB844HH6tVycwShmsV6bDR7yXbQvFP1uNpgePRD3cdBCjeHmk6Q==" }, "@algolia/requester-node-http": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.23.1.tgz", - "integrity": "sha512-prpVKKc/WRAtZqZx3A6Ds+D6bl3jgnY4Nw8BhCO9yzwMu5oXaOFsZrzFRBeVUJbtOWMc/DMP38vY6DpdV6NSfw==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.23.2.tgz", + "integrity": "sha512-SVzgkZM/malo+2SB0NWDXpnT7nO5IZwuDTaaH6SjLeOHcya1o56LSWXk+3F3rNLz2GVH+I/rpYKiqmHhSOjerw==", "requires": { - "@algolia/requester-common": "4.23.1" + "@algolia/requester-common": "4.23.2" } }, "@algolia/transporter": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.23.1.tgz", - "integrity": "sha512-8ucVx0hV7yIeTZUFsix31UEIJFRauPriWlzLBbDy9gRHrK45WbMQ1S9FliDdoY5OvbFxi0/5OKRj0Dw1EkbcJA==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.23.2.tgz", + "integrity": "sha512-GY3aGKBy+8AK4vZh8sfkatDciDVKad5rTY2S10Aefyjh7e7UGBP4zigf42qVXwU8VOPwi7l/L7OACGMOFcjB0Q==", "requires": { - "@algolia/cache-common": "4.23.1", - "@algolia/logger-common": "4.23.1", - "@algolia/requester-common": "4.23.1" + "@algolia/cache-common": "4.23.2", + "@algolia/logger-common": "4.23.2", + "@algolia/requester-common": "4.23.2" } }, "algoliasearch": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.23.1.tgz", - "integrity": "sha512-LNK5n23zDXVf8kaLMZrVDEy4ecxIFUDEsQlx+He1l+TCmP8eiheLVMi5eyZlU6qmmq3UWCxZmp6hzCXS/hvXEw==", + "version": "4.23.2", + "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.23.2.tgz", + "integrity": "sha512-8aCl055IsokLuPU8BzLjwzXjb7ty9TPcUFFOk0pYOwsE5DMVhE3kwCMFtsCFKcnoPZK7oObm+H5mbnSO/9ioxQ==", "requires": { - "@algolia/cache-browser-local-storage": "4.23.1", - "@algolia/cache-common": "4.23.1", - "@algolia/cache-in-memory": "4.23.1", - "@algolia/client-account": "4.23.1", - "@algolia/client-analytics": "4.23.1", - "@algolia/client-common": "4.23.1", - "@algolia/client-personalization": "4.23.1", - "@algolia/client-search": "4.23.1", - "@algolia/logger-common": "4.23.1", - "@algolia/logger-console": "4.23.1", - "@algolia/recommend": "4.23.1", - "@algolia/requester-browser-xhr": "4.23.1", - "@algolia/requester-common": "4.23.1", - "@algolia/requester-node-http": "4.23.1", - "@algolia/transporter": "4.23.1" + "@algolia/cache-browser-local-storage": "4.23.2", + "@algolia/cache-common": "4.23.2", + "@algolia/cache-in-memory": "4.23.2", + "@algolia/client-account": "4.23.2", + "@algolia/client-analytics": "4.23.2", + "@algolia/client-common": "4.23.2", + "@algolia/client-personalization": "4.23.2", + "@algolia/client-search": "4.23.2", + "@algolia/logger-common": "4.23.2", + "@algolia/logger-console": "4.23.2", + "@algolia/recommend": "4.23.2", + "@algolia/requester-browser-xhr": "4.23.2", + "@algolia/requester-common": "4.23.2", + "@algolia/requester-node-http": "4.23.2", + "@algolia/transporter": "4.23.2" } } } diff --git a/blocks/article-tag-block/index.story.jsx b/blocks/article-tag-block/index.story.jsx index 5cd87ba8b9..acd7c8adfb 100644 --- a/blocks/article-tag-block/index.story.jsx +++ b/blocks/article-tag-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import { ArticleTagItems } from "./features/tag/default"; export default { title: "Blocks/Tags Bar", - decorators: [withKnobs], parameters: { // Set the viewports in Chromatic at a component level. chromatic: { viewports: [320, 1200] }, diff --git a/blocks/author-bio-block/index.story.jsx b/blocks/author-bio-block/index.story.jsx index 38b9e5f5d8..750c81961b 100644 --- a/blocks/author-bio-block/index.story.jsx +++ b/blocks/author-bio-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import { AuthorBioItems } from "./features/author-bio/default"; export default { title: "Blocks/Short Author Bio", - decorators: [withKnobs], parameters: { chromatic: { viewports: [320, 1200], diff --git a/blocks/byline-block/index.story.jsx b/blocks/byline-block/index.story.jsx new file mode 100644 index 0000000000..206f0e7fef --- /dev/null +++ b/blocks/byline-block/index.story.jsx @@ -0,0 +1,11 @@ +import React from "react"; +import Byline from "./features/byline/default"; + +export default { + title: "Blocks/Byline", + parameters: { + chromatic: { viewports: [320, 1200] }, + }, +}; + +export const bylineFromArticleContent = () => ; diff --git a/blocks/byline-block/index.story.mdx b/blocks/byline-block/index.story.mdx deleted file mode 100644 index c3e3864e10..0000000000 --- a/blocks/byline-block/index.story.mdx +++ /dev/null @@ -1,19 +0,0 @@ -import { Meta, Story, Canvas } from "@storybook/addon-docs"; - -import Byline from "./features/byline/default"; - - - -# Byline - -The `Byline` component reads from globalContent and returns the author(s) in a comma delimited format. - -## Stories - -** Byline ** - - - - - - diff --git a/blocks/card-list-block/index.story.jsx b/blocks/card-list-block/index.story.jsx index 1cced45ca4..ad7dc86cc1 100644 --- a/blocks/card-list-block/index.story.jsx +++ b/blocks/card-list-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import CardList from "./features/card-list/default"; export default { title: "Blocks/Card List", - decorators: [withKnobs], parameters: { // Set the viewports in Chromatic at a component level. chromatic: { viewports: [320, 1200] }, diff --git a/blocks/double-chain-block/index.story.jsx b/blocks/double-chain-block/index.story.jsx index a640e2dbc6..c9224fb2fd 100644 --- a/blocks/double-chain-block/index.story.jsx +++ b/blocks/double-chain-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import DoubleChain from "./chains/double-chain/default"; export default { title: "Chains/Double", - decorators: [withKnobs], parameters: { // Set the viewports in Chromatic at a component level. chromatic: { viewports: [320, 740, 1200] }, diff --git a/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx b/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx index 6a4d394486..93cd49abd1 100644 --- a/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx +++ b/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx @@ -5,6 +5,7 @@ import { useComponentContext, useFusionContext } from "fusion:context"; import { useContent, useEditableContent } from "fusion:content"; import getProperties from "fusion:properties"; import { + getFocalFromANS, Conditional, formatURL, Heading, @@ -28,6 +29,7 @@ const ExtraLargeManualPromo = ({ customFields }) => { imageAuth, imageURL, imageId, + imageFocalPoint, imageRatio, lazyLoad, linkURL, @@ -51,9 +53,9 @@ const ExtraLargeManualPromo = ({ customFields }) => { resizedImage || !imageURL ? {} : { - source: "signing-service", - query: { id: imageURL }, - } + source: "signing-service", + query: { id: imageURL }, + } ); if (imageAuth && !resizedAuth) { resizedAuth = JSON.parse(imageAuth); @@ -66,27 +68,29 @@ const ExtraLargeManualPromo = ({ customFields }) => { return null; } + const ansImage = { + _id: resizedImage ? imageId : "", + url: imageURL, + auth: resizedAuth, + focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined + } const alt = headline || description || null; const imageParams = imageURL && resizedAuth ? { - ansImage: { - _id: resizedImage ? imageId : "", - url: imageURL, - auth: resizedAuth, - }, - alt, - aspectRatio: imageRatio, - resizedOptions: { - smart: true, - }, - responsiveImages: [200, 400, 600, 800, 1200], - width: 600, - } + ansImage, + alt, + aspectRatio: imageRatio, + resizedOptions: { + ...getFocalFromANS(ansImage) + }, + responsiveImages: [200, 400, 600, 800, 1200], + width: 600, + } : { - src: fallbackImage, - alt, - }; + src: fallbackImage, + alt, + }; const availableDescription = showDescription ? description : null; const availableHeadline = showHeadline ? headline : null; @@ -120,6 +124,7 @@ const ExtraLargeManualPromo = ({ customFields }) => { imageURL: "url", imageId: "_id", imageAuth: "auth", + imageFocalPoint: "focal_point" })} suppressContentEditableWarning > @@ -173,6 +178,9 @@ ExtraLargeManualPromo.propTypes = { imageId: PropTypes.string.tag({ hidden: true, }), + imageFocalPoint: PropTypes.string.tag({ + hidden: true, + }), linkURL: PropTypes.string.tag({ label: "Link URL", group: "Configure Content", diff --git a/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.test.jsx b/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.test.jsx index bb78ae6b33..71ccbb02e9 100644 --- a/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.test.jsx +++ b/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.test.jsx @@ -1,10 +1,13 @@ import React from "react"; +import "@testing-library/jest-dom"; import { render, screen } from "@testing-library/react"; import { useContent } from "fusion:content"; +import { getFocalFromANS } from "@wpmedia/arc-themes-components"; import ExtraLargeManualPromo from "./default"; jest.mock("@wpmedia/arc-themes-components", () => ({ ...jest.requireActual("@wpmedia/arc-themes-components"), + getFocalFromANS: jest.fn(() => { }), isServerSide: jest.fn(() => true), LazyLoad: ({ children }) => children, })); @@ -12,17 +15,20 @@ jest.mock("@wpmedia/arc-themes-components", () => ({ jest.mock("fusion:content", () => ({ useContent: jest.fn(() => ({})), useEditableContent: jest.fn(() => ({ - searchableField: () => {}, + searchableField: () => { }, })), })); describe("the extra large promo feature", () => { + afterEach(() => { + getFocalFromANS.mockClear(); + }); it("should return null if lazyLoad on the server and not in the admin", () => { const config = { lazyLoad: true, }; const { container } = render(); - expect(container.firstChild).toBeNull(); + expect(container).toBeEmptyDOMElement(); }); it("should return null if no show flag is true", () => { @@ -33,7 +39,7 @@ describe("the extra large promo feature", () => { showOverline: false, }; const { container } = render(); - expect(container.firstChild).toBeNull(); + expect(container).toBeEmptyDOMElement(); }); it("should render all items", () => { @@ -48,9 +54,9 @@ describe("the extra large promo feature", () => { }; render(); - expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull(); - expect(screen.queryByText(config.description)).not.toBeNull(); - expect(screen.queryByText(config.overline)).not.toBeNull(); + expect(screen.getByRole("heading", { name: config.headline })).not.toBeNull(); + expect(screen.getByText(config.description)).not.toBeNull(); + expect(screen.getByText(config.overline)).not.toBeNull(); }); it("should return an overline if showOverline is true", () => { @@ -59,7 +65,7 @@ describe("the extra large promo feature", () => { showOverline: true, }; render(); - expect(screen.queryByText(config.overline)).not.toBeNull(); + expect(screen.getByText(config.overline)).not.toBeNull(); }); it("should return a headline if showHeadline is true", () => { @@ -68,7 +74,7 @@ describe("the extra large promo feature", () => { showHeadline: true, }; render(); - expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull(); + expect(screen.getByRole("heading", { name: config.headline })).not.toBeNull(); }); it("should return a image if showImage is true", () => { @@ -81,7 +87,7 @@ describe("the extra large promo feature", () => { showImage: true, }; render(); - expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull(); + expect(screen.getByRole("img", { name: config.headline })).not.toBeNull(); }); it("should use content source to get image auth", () => { @@ -95,7 +101,7 @@ describe("the extra large promo feature", () => { }; render(); expect(useContent).toHaveBeenCalled(); - expect(screen.queryByRole("img", { hidden: true })).not.toBeNull(); + expect(screen.getByRole("img", { hidden: true })).not.toBeNull(); }); it("should return a fallback image if showImage is true and imageUrl is not valid", () => { @@ -105,7 +111,7 @@ describe("the extra large promo feature", () => { showImage: true, }; render(); - expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull(); + expect(screen.getByRole("img", { name: config.headline })).not.toBeNull(); }); it("should make a blank call to the signing-service if the image is from PhotoCenter and has an Auth value", () => { @@ -156,6 +162,22 @@ describe("the extra large promo feature", () => { showDescription: true, }; render(); - expect(screen.queryByText(config.description)).not.toBeNull(); + expect(screen.getByText(config.description)).not.toBeNull(); }); + it("should respect focal point if one is set", () => { + const config = { + imageAuth: "", + imageURL: "test_id=123", + imageId: "123", + imageFocalPoint: JSON.stringify({ x: 1234, y: 2345 }), + imageRatio: "4:3", + showImage: true, + }; + render(); + expect(getFocalFromANS).toHaveBeenCalledWith( + expect.objectContaining({ + focal_point: JSON.parse(config.imageFocalPoint) + }) + ); + }) }); diff --git a/blocks/footer-block/index.story.jsx b/blocks/footer-block/index.story.jsx new file mode 100644 index 0000000000..fa44c37202 --- /dev/null +++ b/blocks/footer-block/index.story.jsx @@ -0,0 +1,35 @@ +import React from "react"; +import Footer from "./features/footer/default"; + +export default { + title: "Blocks/Footer", + parameters: { + chromatic: { + viewports: [320, 1200], + }, + }, +}; + +const defaultCustomFields = { + navigationConfig: { + contentService: "footer-service", + contentConfigValues: {}, + }, + lazyLoad: false, +}; + +export const DefaultLayout = () => ( +