diff --git a/docs/schemas.md b/docs/schemas.md index 9ef00089..56ed6acd 100644 --- a/docs/schemas.md +++ b/docs/schemas.md @@ -62,12 +62,14 @@ The Call-to-action (CTA) block encapsulates the following components: When the button is clicked, the component will: * Fire the named event if defined (see schema definition) -* Remove the button +* Disable the button #### Schema definition +Default styling + ```html -
+

CTA block content

@@ -79,18 +81,39 @@ When the button is clicked, the component will:
``` -The output if the `data-wait-for-event="eventnameX"` attribute is removed. +Theme styling + +```html +
+
+ +

CTA block content

+
+
+ +

Click button to see solution

+
+
+``` + +The output if the `data-wait-for-event="eventnameX"` attribute is removed. This is also the default styling without applying the optional attribute `data-style-theme`:
- +
+The output when applying the optional attribute `data-style-theme`: +
+ +
Notes on schema: * The `data-wait-for-event` attribute is optional and where specified should correspond to a `data-fire-event` from another Interactive Block on the same page (e.g. as part of a Content Template) * The `data-fire-event` attribute is optional * The `data-button-text` is optional but allows the content developer to customize the text in the CTA button. The default value is `Next`. +* The `data-style-theme` attribute is optional and when specified will provide the styling shown above. + * Supported values for `data-style-theme`: `green`. ### User input block diff --git a/docs/static/blacktext.png b/docs/static/blacktext.png new file mode 100644 index 00000000..e022c067 Binary files /dev/null and b/docs/static/blacktext.png differ diff --git a/docs/static/cta_block.png b/docs/static/cta_block.png index 14891d2a..20c9041d 100644 Binary files a/docs/static/cta_block.png and b/docs/static/cta_block.png differ diff --git a/docs/static/cta_block_style.png b/docs/static/cta_block_style.png new file mode 100644 index 00000000..396b7b1e Binary files /dev/null and b/docs/static/cta_block_style.png differ diff --git a/docs/static/ctatextstyle.png b/docs/static/ctatextstyle.png new file mode 100644 index 00000000..84f29c37 Binary files /dev/null and b/docs/static/ctatextstyle.png differ diff --git a/docs/styles.md b/docs/styles.md index bfc07811..9f971570 100644 --- a/docs/styles.md +++ b/docs/styles.md @@ -47,6 +47,8 @@ * Text Styling - [Bold Text](#bold-text) - [Italicize Text](#italicize-text) + - [Black Text](#black-text) + - [Green Bold Text](#green-bold-text) * Media Styling - [Responsive Media](#responsive-media) - [Video Container](#video-container) @@ -1267,6 +1269,50 @@ Any element that contains text. --- +## Black Text + +This class should be used to apply the color black to text. + +**Example** + +
+ +
+ +**Availability** + +Any element that contains text. + +**Usage** + +```html +

This color of this text is black.

+``` + +--- + +## Green Bold Text + +This class should be used to apply the following to text: green, bold, and 24px. + +**Example** + +
+ +
+ +**Availability** + +Any element that contains text and is part of CTA block content. + +**Usage** + +```html +

This text is green, bold, and 24px.

+``` + +--- + ## Responsive Media Improve image responsiveness by adding a maximum width and allowing the browser to calculate and select a height for the image. As a general rule, the max width will be 100% of the containing block's width. diff --git a/specs/content-templates.spec.ts b/specs/content-templates.spec.ts index db70d953..9c540b70 100644 --- a/specs/content-templates.spec.ts +++ b/specs/content-templates.spec.ts @@ -31,7 +31,7 @@ test('segmented content template works', async ({ page }) => {

Want to see more?

-
+

This is the content for block 2

@@ -52,7 +52,7 @@ test('segmented content template works', async ({ page }) => { await page.click('text=Yes!') await page.waitForSelector('text=This is the content for block 2') await expect(page.locator('text=That\'s all folks!')).not.toBeVisible() - await page.click('text=Yes!') + await page.click('text=Yes!!') await page.waitForSelector('text=That\'s all folks!') }) diff --git a/src/components/CTABlock.tsx b/src/components/CTABlock.tsx index 52cf51cc..690f2786 100644 --- a/src/components/CTABlock.tsx +++ b/src/components/CTABlock.tsx @@ -9,9 +9,10 @@ interface CTABlockProps { buttonText: string fireEvent?: string waitForEvent?: string + styleTheme?: string } -export const CTABlock = ({ content, prompt, buttonText, fireEvent, waitForEvent }: CTABlockProps): JSX.Element => { +export const CTABlock = ({ content, prompt, buttonText, fireEvent, waitForEvent, styleTheme }: CTABlockProps): JSX.Element => { const [clicked, setclicked] = useState(false) const clickHandler = (): void => { @@ -30,20 +31,23 @@ export const CTABlock = ({ content, prompt, buttonText, fireEvent, waitForEvent }, []) const maybeButton = (): JSX.Element => { - if (!clicked) { - return (<> - ) - } else { - return <> - } + return ( + + ) } return ( -
+
- {maybeButton()} + {maybeButton()}
) diff --git a/src/lib/blocks.tsx b/src/lib/blocks.tsx index 97b92654..ca335248 100644 --- a/src/lib/blocks.tsx +++ b/src/lib/blocks.tsx @@ -146,6 +146,7 @@ export const parseCTABlock = (element: HTMLElement): JSX.Element | null => { const contentElem = element.querySelector(`.${CTA_CONTENT_CLASS}`) const promptElem = element.querySelector(`.${CTA_PROMPT_CLASS}`) const buttonText = element.dataset.buttonText ?? 'Next' + const maybeStyleTheme = element.dataset.styleTheme const fireEvent = namespaceEvent(element.dataset.fireEvent) const waitForEvent = namespaceEvent(element.dataset.waitForEvent) @@ -163,6 +164,7 @@ export const parseCTABlock = (element: HTMLElement): JSX.Element | null => { buttonText={buttonText} fireEvent={fireEvent} waitForEvent={waitForEvent} + styleTheme={maybeStyleTheme} /> } diff --git a/src/styles/content.scss b/src/styles/content.scss index b2d27d73..1935c0e5 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -308,6 +308,10 @@ table.os-raise-horizontaltable { height: 100%; } +.os-raise-black-text { + color: #000; +} + // Extra Support Box Styles .os-raise-extrasupport { border: .0625rem solid #757575; @@ -496,3 +500,10 @@ $arrow-svg: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 width: 100%; height: 100%; } + +// CTA Styling +.os-raise-green-bold-text { + font-size: 1.5rem; + font-weight: 700; + color: $os-dark-green; +} diff --git a/src/styles/interactives.scss b/src/styles/interactives.scss index 59b8983c..07eab622 100644 --- a/src/styles/interactives.scss +++ b/src/styles/interactives.scss @@ -6,6 +6,7 @@ $os-medium-gray: #626262; $os-light-gray: #d9d9d9; $os-answer-background: #f5f5f5; $os-default-box-shadow: #808080; +$os-dark-green: #0A5B50; // Multiple Choice & Multi Select Styles div.os-grid { @@ -137,6 +138,45 @@ div.os-justify-content-end { text-align: center; } +// All Interactives + CTA Styles +%os-submit-button-base { + border-radius: .5rem; + padding: 1rem 5rem; + color: #FFF; + font-weight: 700; +} + +%os-submit-button-base:hover:not([disabled]) { + background-image: linear-gradient((rgba(0 0 0 / 20%))0 0); + box-shadow: none; +} + +%os-submit-button-base:active:not([disabled]) { + background-image: linear-gradient((rgba(255 255 255 / 20%))0 0); + box-shadow: none; +} + +%os-submit-button-base:disabled { + opacity: .5; + box-shadow: none; +} + +.os-submit-button-default-theme { + @extend %os-submit-button-base; + + background-color: #757575; + border: 1px solid #757575; + box-shadow: 0 .125rem .25rem 0 hsla(0deg 0% 46% / 25%); +} + +.os-submit-button-green-theme { + @extend %os-submit-button-base; + + background-color: #0A5B50; + border: 1px solid #0A5B50; + box-shadow: 0 .125rem .25rem 0 hsla(0deg 0% 0% / 25%); +} + // Icon Styles .os-ml { margin-left: .7rem; @@ -252,3 +292,32 @@ math-field::part(menu-toggle) { color: $os-wrong-answer-border-color; text-align: center; } + +// CTA Styling +%os-cta-container-base { + display: flex; + flex-direction: column; +} + +.os-cta-container-default-theme { + @extend %os-cta-container-base; +} + +.os-cta-container-green-theme { + @extend %os-cta-container-base; + + background-color: #F5F5F5; + border: 1px solid #F5F5F5; + box-shadow: 0 .25rem #75757540; + border-radius: .5rem; + padding: 1rem 1.5rem; + margin-bottom: 1rem; +} + +.os-cta-container-green-theme:has(%os-submit-button-base:disabled) { + box-shadow: none; +} + +.os-cta-container-default-theme > button { + align-self: center; +} \ No newline at end of file diff --git a/src/tests/CTABlock.test.tsx b/src/tests/CTABlock.test.tsx index 43f4a71e..9f7ab4e9 100644 --- a/src/tests/CTABlock.test.tsx +++ b/src/tests/CTABlock.test.tsx @@ -34,13 +34,30 @@ test('CTABlock fires event', async () => { expect(eventHandler).toHaveBeenCalled() }) -test('CTABlock button disappears on click, prompt remains', async () => { +test('CTABlock button styled with default theme, disables on click, prompt remains', async () => { render( String

'} prompt={'

Prompt

'} fireEvent={'Event'}/> ) - fireEvent.click(screen.getByText('Click me!')) - expect(screen.queryByText('Click me!')).toBeNull() + const button = screen.getByText('Click me!') + fireEvent.click(button) + expect(button.className).toBe('os-submit-button-default-theme') + expect(button).toBeDisabled() + screen.getByText('String') + expect(screen.queryByText('Prompt')) +}) + +test('CTABlock container and button styled when styleTheme prop provided, disables on click, prompt remains', async () => { + const { container } = render( + String

'} prompt={'

Prompt

'} styleTheme={'green'} fireEvent={'Event'}/> + ) + + const div = container.querySelector("div.os-cta-container-green-theme") + expect(div?.className).toBe('os-cta-container-green-theme') + const button = screen.getByText('Click me!') + fireEvent.click(button) + expect(button.className).toBe('os-submit-button-green-theme') + expect(button).toBeDisabled() screen.getByText('String') expect(screen.queryByText('Prompt')) })