Merge branch 'main' into K12-90/Update-PSET-interactives

openstax · Jul 22, 2024 · f278d5e · f278d5e
2 parents 65aff3b + c8ec85a
commit f278d5e
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 41 deletions.
diff --git a/docs/schemas.md b/docs/schemas.md
@@ -113,6 +113,7 @@ Notes on schema:
 * 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/styles.md b/docs/styles.md
@@ -48,7 +48,7 @@
   - [Bold Text](#bold-text)
   - [Italicize Text](#italicize-text)
   - [Black Text](#black-text)
-  - [CTA Data Style Theme Text](#CTA-data-style-theme-text)
+  - [Green Bold Text](#green-bold-text)
 * Media Styling
   - [Responsive Media](#responsive-media)
   - [Video Container](#video-container)
@@ -1291,7 +1291,7 @@ Any element that contains text.
 
 ---
 
-## CTA Data Style Theme Text
+## Green Bold Text
 
 This class should be used to apply the following to text: green, bold, and 24px.
 
@@ -1308,7 +1308,7 @@ Any element that contains text and is part of CTA block content.
 **Usage**
 
 ```html
-<p class="os-raise-cta-title-style-theme">This text is green, bold, and 24px.</p>
+<p class="os-raise-green-bold-text">This text is green, bold, and 24px.</p>
 ```
 
 ---

diff --git a/src/components/CTABlock.tsx b/src/components/CTABlock.tsx
@@ -9,10 +9,10 @@ interface CTABlockProps {
   buttonText: string
   fireEvent?: string
   waitForEvent?: string
-  ctaStyleTheme?: string
+  styleTheme?: string
 }
 
-export const CTABlock = ({ content, prompt, buttonText, fireEvent, waitForEvent, ctaStyleTheme }: CTABlockProps): JSX.Element => {
+export const CTABlock = ({ content, prompt, buttonText, fireEvent, waitForEvent, styleTheme }: CTABlockProps): JSX.Element => {
   const [clicked, setclicked] = useState<boolean>(false)
 
   const clickHandler = (): void => {
@@ -31,35 +31,20 @@ export const CTABlock = ({ content, prompt, buttonText, fireEvent, waitForEvent,
   }, [])
 
   const maybeButton = (): JSX.Element => {
-    if (!clicked) {
-      return (
-        <>
-          <button
-            onClick={clickHandler}
-            type="button"
-            className={ctaStyleTheme === "green" ? "os-submit-button-style-theme" : "os-submit-button-default-theme"}>
-            {buttonText}
-          </button>
-        </>
-      )
-    } else {
-      return (
-        <>
-          <button
-            onClick={clickHandler}
-            type="button"
-            className={ctaStyleTheme === "green" ? "os-submit-button-style-theme" : "os-submit-button-default-theme"}
-            disabled={true}>
-            {buttonText}
-          </button>
-        </>
-      )
-    }
+    return (
+      <button
+        onClick={clickHandler}
+        type="button"
+        className={styleTheme === "green" ? "os-submit-button-green-theme" : "os-submit-button-default-theme"}
+        disabled={clicked}>
+        {buttonText}
+      </button>
+    )
   }
 
   return (
     <EventControlledContent waitForEvent={waitForEvent}>
-      <div className={ctaStyleTheme === "green" ? "os-cta-container-style-theme" : "os-cta-container-default-theme"}>
+      <div className={styleTheme === "green" ? "os-cta-container-green-theme" : "os-cta-container-default-theme"}>
         <div ref={contentRefCallback} dangerouslySetInnerHTML={{ __html: content }} />
         <div ref={contentRefCallback} dangerouslySetInnerHTML={{ __html: prompt }} />
         {maybeButton()}

diff --git a/src/lib/blocks.tsx b/src/lib/blocks.tsx
@@ -146,7 +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 maybeCTAStyleTheme = element.dataset.styleTheme
+  const maybeStyleTheme = element.dataset.styleTheme
   const fireEvent = namespaceEvent(element.dataset.fireEvent)
   const waitForEvent = namespaceEvent(element.dataset.waitForEvent)
 
@@ -164,7 +164,7 @@ export const parseCTABlock = (element: HTMLElement): JSX.Element | null => {
     buttonText={buttonText}
     fireEvent={fireEvent}
     waitForEvent={waitForEvent}
-    ctaStyleTheme={maybeCTAStyleTheme}
+    styleTheme={maybeStyleTheme}
   />
 }
 

diff --git a/src/styles/content.scss b/src/styles/content.scss
@@ -502,7 +502,7 @@ $arrow-svg: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16
 }
 
 // CTA Styling
-.os-raise-cta-title-style-theme {
+.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
@@ -181,7 +181,7 @@ button.os-submit-button-default-theme {
   box-shadow: 0 .125rem .25rem 0 hsla(0deg 0% 46% / 25%);
 }
 
-.os-submit-button-style-theme {
+.os-submit-button-green-theme {
   @extend %os-submit-button-base;
 
   background-color: #0A5B50;
@@ -315,7 +315,7 @@ math-field::part(menu-toggle) {
   @extend %os-cta-container-base;
 }
 
-.os-cta-container-style-theme {
+.os-cta-container-green-theme {
   @extend %os-cta-container-base;
 
   background-color: #F5F5F5;
@@ -326,7 +326,7 @@ math-field::part(menu-toggle) {
   margin-bottom: 1rem;
 }
 
-.os-cta-container-style-theme:has(%os-submit-button-base:disabled) {
+.os-cta-container-green-theme:has(%os-submit-button-base:disabled) {
   box-shadow: none;
 }
 

diff --git a/src/tests/CTABlock.test.tsx b/src/tests/CTABlock.test.tsx
@@ -47,16 +47,16 @@ test('CTABlock button styled with default theme, disables on click, prompt remai
   expect(screen.queryByText('Prompt'))
 })
 
-test('CTABlock container and button styled when ctaStyleTheme prop provided, disables on click, prompt remains', async () => {
+test('CTABlock container and button styled when styleTheme prop provided, disables on click, prompt remains', async () => {
   const { container } = render(
-      <CTABlock buttonText="Click me!" content={'<p>String</p>'} prompt={'<p>Prompt</p>'} ctaStyleTheme={'green'} fireEvent={'Event'}/>
+      <CTABlock buttonText="Click me!" content={'<p>String</p>'} prompt={'<p>Prompt</p>'} styleTheme={'green'} fireEvent={'Event'}/>
   )
 
-  const div = container.querySelector("div.os-cta-container-style-theme")
-  expect(div?.className).toBe('os-cta-container-style-theme')
+  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-style-theme')
+  expect(button.className).toBe('os-submit-button-green-theme')
   expect(button).toBeDisabled()
   screen.getByText('String')
   expect(screen.queryByText('Prompt'))