https://www.paxlovid.com/lib/blocks/content/content.js

1import { FranklinBlock, blockColorThemeBlockIsActive, blockColorThemeStructure } from '../../scripts/lib-franklin.js';
2
3export default class Content extends FranklinBlock {
4  variants = [
5    { name: 'number_variant', test: this.block.classList.contains('number') },
6    { name: 'large_icon_variant', test: this.block.classList.contains('large-icon') },
7    {
8      name: 'grid_variant',
9      test: this.block.classList.contains('embedded-content') || this.block.classList.contains('icon-list'),
10    },
11    { name: 'default_variant', test: this.block },
12  ];
13
14  beforeBlockDataRead() {
15    const numberContent = this.findSectionContent('number');
16
17    if (numberContent) {
18      numberContent.className = 'content-block-number-number';
19    } else {
20      delete this.schema?.schema?.numberContent;
21    }
22
23    // Handle percentage number section
24    const percentageNumber = this.findSectionContent('percentage_number');
25    if (percentageNumber) {
26      percentageNumber.className = 'content-block-number-percentage';
27    } else {
28      delete this.schema?.schema?.percentageNumber;
29    }
30
31    // Handle number label section
32    const numberLabel = this.findSectionContent('number_label');
33    if (numberLabel) {
34      numberLabel.className = 'content-block-number-label';
35    } else {
36      delete this.schema?.schema?.numberLabel;
37    }
38  }
39
40  beforeBlockRender() {
41    if (['number_variant', 'default_variant'].includes(this.variant)) {
42      const contentData = this.inputData?.contentAtoms;
43
44      if (this.variant === 'default_variant') {
45        const hasDefaultContent =
46          contentData?.content ||
47          contentData?.disclaimer ||
48          contentData?.buttons ||
49          contentData?.eyebrow ||
50          contentData?.headline2 ||
51          contentData?.subheadline ||
52          contentData?.content2;
53
54        if (hasDefaultContent) {
55          this.inputData.show_default_content = true;
56        }
57
58        if (contentData?.headline || this.inputData?.icon) {
59          this.inputData.show_default_headline = true;
60        }
61      }
62    }
63
64    this.inputData = {
65      [this.variant]: { ...this.inputData, ...this.inputData.contentAtoms },
66    };
67
68    const isBrandedContainer = this.block?.classList.contains('branded-container');
69    const isVerticalBrandedContainer = this.block?.classList.contains('vertical');
70    if (isBrandedContainer) {
71      const isLeft = !this.block?.classList.contains('center') && !this.block?.classList.contains('right');
72      if (isLeft && isVerticalBrandedContainer) {
73        this.block.classList.add('left');
74      }
75      this.block.classList.remove('center');
76    }
77  }
78
79  /**
80   * Function to construct and target the proper DOM elements based on variant for color theming
81   */
82  afterBlockRenderColorTheming() {
83    const isBrandedContainer = this.block.classList.contains('branded-container');
84    const isBrandCoreContainer = this.block.classList.contains('brand-core');
85
86    const hasNoColorThemeClass = !Array.from(this.block.classList).some((cls) => cls.startsWith('color-theme-'));
87
88    const isOldBrandedContainer = isBrandedContainer && hasNoColorThemeClass && !isBrandCoreContainer;
89    const isOldBrandedCore = isBrandCoreContainer && hasNoColorThemeClass;
90
91    // content blocks 1-6
92    const themeOneCoreTintedClasses = ['brand', 'branded', 'color-theme-1-core-tinted'];
93    const hasThemeOneCoreTinted = themeOneCoreTintedClasses.some((cls) => this.block.classList.contains(cls));
94
95    const sharedDomTargetsThemeOne = [
96      { target: '.block', classToAdd: 'surface' },
97      { target: '.block .atoms-headline > *', classToAdd: 'headline' },
98      { target: '.block span[data-icon-content]', classToAdd: 'themed-icon' },
99      { target: '.block .atoms-content p', classToAdd: 'body-copy' },
100      { target: '.block .atoms-content p a', classToAdd: 'text-link', multiple: true },
101      { target: '.block .atoms-disclaimer', classToAdd: 'disclaimer' },
102      { target: '.block .content-block-number-number', classToAdd: 'headline' },
103      // Figma missing token mapping so temporarily using headline-1
104      { target: '.block .atoms-headline2 > *', classToAdd: 'body-copy-1' },
105    ];
106
107    const sharedDomTargetsThemeSeven = [
108      { target: '.block', classToAdd: 'surface' },
109      { target: '.block .core-content-inside', classToAdd: 'container-1' },
110      { target: '.block .atoms-headline > *', classToAdd: 'headline-1' },
111      { target: '.block span[data-icon-content]', classToAdd: 'themed-icon-1' },
112      { target: '.block .atoms-content p', classToAdd: 'body-copy-1' },
113      { target: '.block .atoms-content ul, .block .atoms-content ol', classToAdd: 'content-list-1' },
114      { target: '.block .atoms-content p a', classToAdd: 'text-link-1', multiple: true },
115      { target: '.block .atoms-disclaimer', classToAdd: 'disclaimer-1' },
116      // Figma missing token mapping so temporarily using headline-1
117      { target: '.block .atoms-headline2 > *', classToAdd: 'body-copy-1' },
118    ];
119
120    const contentBlockConfiguration = {
121      // theme 1
122      // isDefaultVariant: true
123      'color-theme-1-white': {
124        isDefaultVariant: true,
125        colorThemeCollection: 'data-color-theme-one',
126        colorModeValue: 'white',
127        domTargets: [...sharedDomTargetsThemeOne],
128      },
129      'color-theme-1-core-tinted': {
130        // old and new:
131        isMatch: !isOldBrandedContainer && hasThemeOneCoreTinted,
132        colorThemeCollection: 'data-color-theme-one',
133        colorModeValue: 'core-tinted',
134        domTargets: [...sharedDomTargetsThemeOne],
135      },
136      // theme 7
137      'color-theme-7-white-on-white': {
138        // new:

139        isMatch: isBrandedContainer && this.block.classList.contains('color-theme-7-white-on-white'),
140        colorThemeCollection: 'data-color-theme-seven',
141        colorModeValue: 'white-on-white',
142        domTargets: [...sharedDomTargetsThemeSeven],
143      },
144      'color-theme-7-white-on-core-tinted': {
145        // new:
146        isMatch: isBrandedContainer && this.block.classList.contains('color-theme-7-white-on-core-tinted'),
147        colorThemeCollection: 'data-color-theme-seven',
148        colorModeValue: 'white-on-core-tinted',
149        domTargets: [...sharedDomTargetsThemeSeven],
150      },
151      'color-theme-7-core-tinted-on-white': {
152        // new:
153        isMatch: isBrandedContainer && this.block.classList.contains('color-theme-7-core-tinted-on-white'),
154        colorThemeCollection: 'data-color-theme-seven',
155        colorModeValue: 'core-tinted-on-white',
156        domTargets: [...sharedDomTargetsThemeSeven],
157      },
158      'color-theme-7-core-seed-on-white': {
159        // old and new:
160        isMatch: isOldBrandedCore || (isBrandedContainer && this.block.classList.contains('color-theme-7-core-seed-on-white')),
161        colorThemeCollection: 'data-color-theme-seven',
162        colorModeValue: 'core-seed-on-white',
163        domTargets: [...sharedDomTargetsThemeSeven],
164        invertedButtonTargets: ['.block .atoms-buttons a.button'],
165      },
166      'color-theme-7-core-seed-on-core-tinted': {
167        // new:

168        isMatch: isBrandedContainer && this.block.classList.contains('color-theme-7-core-seed-on-core-tinted'),
169        colorThemeCollection: 'data-color-theme-seven',
170        colorModeValue: 'core-seed-on-core-tinted',
171        domTargets: [...sharedDomTargetsThemeSeven],
172        invertedButtonTargets: ['.block .atoms-buttons a.button'],
173      },
174      'color-theme-7-white-on-core-seed': {
175        // new:
176        isMatch: isBrandedContainer && this.block.classList.contains('color-theme-7-white-on-core-seed'),
177        colorThemeCollection: 'data-color-theme-seven',
178        colorModeValue: 'white-on-core-seed',
179        domTargets: [...sharedDomTargetsThemeSeven],
180      },
181    };
182
183    blockColorThemeStructure(this.block, contentBlockConfiguration);
184  }
185
186  afterBlockRender = () => {
187    // global standard rules for block padding ///////////////////////
188    this.block.classList.add('block-padding-standard');
189
190    // keyboard focus
191    this.block.classList.add('block-focus-visible');
192
193    const isBrandedContainer = this.block?.classList.contains('branded-container');
194
195    // mobile sides
196    if (isBrandedContainer) {
197      const isLeft = this.block?.classList.contains('left');
198      const isRight = this.block?.classList.contains('right');
199
200      if (isLeft) {
201        this.block.classList.add('block-padding-mobile-padding-left-none');
202      }
203      if (isRight) {
204        this.block.classList.add('block-padding-mobile-padding-right-none');
205      }
206    }
207
208    if (blockColorThemeBlockIsActive(this.block)) this.afterBlockRenderColorTheming();
209
210    // Configurable heading levels
211    // Content 7.2
212    if (isBrandedContainer && this.block.classList.contains('vertical')) {
213      this.block.classList.add('configurable-heading-levels');
214    }
215
216    // Add has-label class to number container when percentage or label exists
217    const numberContainer = this.block.querySelector('.content-block-number-container');
218    const hasPercentage = this.block.querySelector('.content-block-number-percentage');
219    const hasLabel = this.block.querySelector('.content-block-number-label');
220    if (numberContainer && (hasPercentage || hasLabel)) {
221      numberContainer.classList.add('has-label');
222    }
223  };
224}