playbook_ui 16.1.0.pre.alpha.play277814027 → 16.1.0.pre.rc.0

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -1,55 +1,11 @@
 <%= pb_content_tag do %>
-    <% if object.with_tooltip %>
-      <% object.users.take(object.display_count).each_with_index do |user, index| %>
-        <% user_id = "multiple-users-#{object.object_id}-user-#{index}" %>
-        <div id="<%= user_id %>" class="pb_multiple_users_item">
-          <%= pb_rails("avatar", props: user.except(:tooltip).merge({size: object.size, dark: object.dark})) %>
-        </div>
-      <% end %>
-
-      <% if object.more_than_four %>
-        <% badge_id = "multiple-users-#{object.object_id}-badge" %>
-        <div id="<%= badge_id %>" class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
-          <%= "+#{object.users.count - object.display_count}" %>
-        </div>
-      <% end %>
-
-      <% object.users.take(object.display_count).each_with_index do |user, index| %>
-        <% if user[:tooltip].present? %>
-          <% user_id = "multiple-users-#{object.object_id}-user-#{index}" %>
-          <%= pb_rails("tooltip", props: {
-            trigger_element_selector: "##{user_id}",
-            tooltip_id: "#{user_id}-tooltip",
-            position: "top",
-            z_index: "10"
-          }) do %>
-            <%= user[:tooltip] %>
-          <% end %>
-        <% end %>
-      <% end %>
-
-      <% if object.more_than_four %>
-        <% badge_id = "multiple-users-#{object.object_id}-badge" %>
-        <%= pb_rails("tooltip", props: {
-          trigger_element_selector: "##{badge_id}",
-          tooltip_id: "#{badge_id}-tooltip",
-          position: "top",
-          z_index: "10"
-        }) do %>
-          <% object.users.drop(object.display_count).each do |user| %>
-            <div><%= user[:tooltip] || user[:name] %></div>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% else %>
-      <% object.users.take(object.display_count).each do |user| %>
-        <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark})) %>
-      <% end %>
+    <% object.users.take(object.display_count).each do |user| %>
+      <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
+    <% end %>
 
-      <% if object.more_than_four %>
-        <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
-          <%= "+#{object.users.count - object.display_count}" %>
-        </div>
-      <% end %>
+    <% if object.more_than_four %>
+      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
+        <%= "+#{object.users.count - object.display_count}" %>
+      </div>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb

@@ -8,7 +8,6 @@ module Playbook
                   values: %w[xxs xs],
                   default: "xs"
       prop :users, type: Playbook::Props::HashArray, required: true
-      prop :with_tooltip, type: Playbook::Props::Boolean, default: false
 
       def more_than_four
         users.count > 4

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -7,7 +7,6 @@ import { globalProps } from "../utilities/globalProps"
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
-import colors from '../tokens/exports/_colors.module.scss'
 import Flex from '../pb_flex/_flex'
 import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
@@ -26,7 +25,6 @@ type PassphraseProps = {
   inputProps?: GenericObject,
   label?: string,
   onChange: (inputValue: string) => void,
-  requiredIndicator?: boolean,
   showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
@@ -45,7 +43,6 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
     onChange = () => undefined,
-    requiredIndicator = false,
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -102,7 +99,6 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
 
   const shieldIcon = getAllIcons()["shieldCheck"]
   const eyeIcon = getAllIcons()["eye"]
-  const hasLabel = label && label !== ""
 
   return (
     <div
@@ -113,22 +109,11 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
         id={id}
     >
       <label>
-        <Flex
-            align="baseline"
-            {...(hasLabel ? { marginBottom: "xs" } : {})}
-        >
-          {hasLabel && (requiredIndicator ? (
-            <Caption
-                className="passphrase-label"
-            >
-              {label} <span style={{ color: `${colors.error}` }}>*</span>
-            </Caption>
-          ) : (
-            <Caption
-                className="passphrase-label"
-                text={label}
-            />
-          ))}
+        <Flex align="baseline">
+          <Caption
+              className="passphrase-label"
+              text={label}
+          />
           {tips.length > 0 && !confirmation &&
             <PbReactPopover
                 className="passphrase-tips"

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx

@@ -120,7 +120,6 @@ const PassphraseMeterSettings = (props) => {
             "These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings."
           }
         </Body>
-        <br/>
         <Passphrase
             label={"Type your passphrase"}
             onChange={handleChange}

data/app/pb_kits/playbook/pb_passphrase/docs/example.yml

@@ -9,7 +9,6 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
-  - passphrase_required_indicator: Required Indicator
 
   react:
   - passphrase_default: Default
@@ -20,4 +19,3 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
-  - passphrase_required_indicator: Required Indicator

data/app/pb_kits/playbook/pb_passphrase/docs/index.js

@@ -6,4 +6,3 @@ export { default as PassphraseTips } from './_passphrase_tips'
 export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
 export { default as PassphraseCommon } from './_passphrase_common'
 export { default as PassphraseBreached } from './_passphrase_breached'
-export { default as PassphraseRequiredIndicator } from './_passphrase_required_indicator.jsx'

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -10,7 +10,6 @@ module Playbook
                              values: %w[always xs sm md lg xl],
                              default: "always"
       prop :tips, type: Playbook::Props::Array, default: []
-      prop :required_indicator, type: Playbook::Props::Boolean, default: false
       prop :value, type: Playbook::Props::String
 
       def classname
@@ -24,7 +23,6 @@ module Playbook
           confirmation: confirmation,
           inputProps: input_props,
           label: label,
-          requiredIndicator: required_indicator,
           showTipsBelow: show_tips_below,
           tips: tips,
           uncontrolled: true,

data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, within } from '../utilities/test-utils'
+import { render, screen } from '../utilities/test-utils'
 import { Passphrase } from 'playbook-ui'
 
 const testId = 'text-input1',
@@ -86,32 +86,3 @@ test('popover target does not show when tips are not given', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.querySelector('[class^=pb_popover_reference_wrapper]')).toBeNull()
 })
-
-test('renders required indicator asterisk when requiredIndicator is true', () => {
-  render(
-    <Passphrase
-        data={{ testid: testId }}
-        label="Passphrase"
-        requiredIndicator
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const label = within(kit).getByText(/Passphrase/)
-  expect(label).toBeInTheDocument()
-  expect(kit).toHaveTextContent('*')
-})
-
-test('does not render required indicator asterisk when requiredIndicator is false', () => {
-  render(
-    <Passphrase
-        data={{ testid: testId }}
-        label="Passphrase"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const label = within(kit).getByText(/Passphrase/)
-  expect(label).toBeInTheDocument()
-  expect(kit).not.toHaveTextContent('*')
-})

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -36,7 +36,6 @@ type PhoneNumberInputProps = {
   excludeCountries: string[],
   preferredCountries?: string[],
   required?: boolean,
-  requiredIndicator?: boolean,
   value?: string,
   formatAsYouType?: boolean,
   strictMode?: boolean,
@@ -92,7 +91,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     onlyCountries = [],
     excludeCountries = [],
     required = false,
-    requiredIndicator = false,
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
@@ -535,7 +533,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       validateErrors()
     },
     onChange: formatAsYouType ? undefined : handleOnChange,
-    requiredIndicator,
     value: inputValue
   }
 

data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml

@@ -12,7 +12,6 @@ examples:
   - phone_number_input_format: Format as You Type
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
-  - phone_number_input_required_indicator: Required Indicator
 
   rails:
   - phone_number_input_default: Default
@@ -25,4 +24,3 @@ examples:
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search
-  - phone_number_input_required_indicator: Required Indicator

data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js

@@ -9,4 +9,3 @@ export { default as PhoneNumberInputAccessInputElement } from './_phone_number_i
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
 export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
-export { default as PhoneNumberInputRequiredIndicator } from './_phone_number_input_required_indicator.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -7,8 +7,6 @@ module Playbook
                       default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -54,7 +52,6 @@ module Playbook
           excludeCountries: exclude_countries,
           preferredCountries: preferred_countries,
           required: required,
-          requiredIndicator: required_indicator,
           value: value,
           countrySearch: country_search,
         }

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, act, within } from "../utilities/test-utils";
+import { render, screen, act } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -129,7 +129,7 @@ test("should format phone number as '555-555-5555' with formatAsYouType and 'us'
     };
 
     render(<PhoneNumberInput {...props} />);
-
+    
     const input = screen.getByRole("textbox");
     
     act(() => {
@@ -154,38 +154,7 @@ test("should pass countrySearch prop to component", () => {
     };
   
     render(<PhoneNumberInput {...props} />);
-
+    
     const wrapper = screen.getByTestId('phone-input-with-search');
     expect(wrapper).toBeInTheDocument();
 });
-
-test("renders required indicator asterisk when requiredIndicator is true", () => {
-    const props = {
-        data: { testid: testId },
-        id: testId,
-        label: "Required Phone Number",
-        requiredIndicator: true,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-
-    const kit = screen.getByTestId(testId);
-    const label = within(kit).getByText(/Required Phone Number/);
-    expect(label).toBeInTheDocument();
-    expect(kit).toHaveTextContent("*");
-});
-
-test("does not render required indicator asterisk when requiredIndicator is false", () => {
-    const props = {
-        data: { testid: testId },
-        id: testId,
-        label: "Phone Number",
-    };
-
-    render(<PhoneNumberInput {...props} />);
-
-    const kit = screen.getByTestId(testId);
-    const label = within(kit).getByText(/Phone Number/);
-    expect(label).toBeInTheDocument();
-    expect(kit).not.toHaveTextContent("*");
-});  

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -4,8 +4,6 @@ import { TrixEditor } from 'react-trix'
 
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
-import Caption from '../pb_caption/_caption'
-import colors from '../tokens/exports/_colors.module.scss'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
 
@@ -42,14 +40,12 @@ type RichTextEditorProps = {
   inputOptions?: { [key: string]: string | number | boolean | (() => void) },
   id?: string,
   inline?: boolean,
-  label?: string,
   extensions?: { [key: string]: string }[],
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
   inputHeight?: "sm" | "md" | "lg",
   inputMinHeight?: "sm" | "md" | "lg",
-  requiredIndicator?: boolean,
   simple?: boolean,
   sticky?: boolean,
   template: string,
@@ -68,7 +64,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
-    id,
     inputOptions = {},
     inline = false,
     extensions,
@@ -81,9 +76,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth = "md",
-    requiredIndicator = false,
-    label,
+    maxWidth = "md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -93,7 +86,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     containerRef = useRef<HTMLDivElement>(null)
 
   const htmlProps = buildHtmlProps(htmlOptions)
-
+  
   const handleOnEditorReady = (editorInstance: Editor) => {
     setEditor(editorInstance)
     setTimeout(() => {
@@ -101,7 +94,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       if (oldId) {
         const hiddenInput = document.getElementById(oldId)
         if (hiddenInput) {
-          const newId = (inputOptions.id as string) || oldId
+          const newId = (inputOptions.id as string) || oldId  
           hiddenInput.id = newId
           editorInstance.element.setAttribute('input', newId)
 
@@ -126,7 +119,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       // set button attributes
       inlineCodeButton.dataset.trixAttribute = 'inlineCode'
       blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
-    }
+    } 
 
     if (toolbarBottom) editor.element.after(toolbarElement)
 
@@ -154,7 +147,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     if (!advancedEditor || !focus) return
 
     const handleFocus = () => setShowToolbarOnFocus(true)
-
+    
     const handleClickOutside = (event: Event) => {
       if (isClickInContainer(event) || isClickInPopover(event)) return
       setShowToolbarOnFocus(false)
@@ -222,29 +215,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         className={css}
         ref={focus ? containerRef : undefined}
     >
-    {label && (
-      <label  htmlFor={id}>
-        {
-          requiredIndicator ? (
-            <Caption className="pb_text_input_kit_label"
-                marginBottom="xs"
-            >
-              {label} <span style={{ color: `${colors.error}` }}>*</span>
-            </Caption>
-          ) : (
-            <Caption
-                className="pb_text_input_kit_label"
-                marginBottom="xs"
-                text={label}
-            />
-          )
-        }
-
-      </label>
-    )}
       {
         advancedEditor ? (
-          <div
+          <div 
               className={classnames(
                 "pb_rich_text_editor_advanced_container",
                 { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml

@@ -9,7 +9,6 @@ examples:
   - rich_text_editor_templates: Templates
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
-  - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_preview: Preview
 
   react:
@@ -32,7 +31,5 @@ examples:
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
-  - rich_text_editor_required_indicator: Required Indicator
-  - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js

@@ -19,5 +19,3 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
 export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
-export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
-export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -21,9 +21,6 @@ module Playbook
       prop :template
       prop :placeholder
       prop :input_options
-      prop :label
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
 
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -54,8 +51,6 @@ module Playbook
           template: template,
           placeholder: placeholder,
           inputOptions: input_options,
-          label: label,
-          requiredIndicator: required_indicator,
         }
       end
     end

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent, waitFor, within } from '../utilities/test-utils'
+import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 
@@ -89,14 +89,14 @@ const TestAdvancedEditor = ({ toolbarOnFocus = false, ...props }) => {
 describe('Advanced TipTap Editor works as expected', () => {
   test('renders advanced editor with toolbar', () => {
     render(<TestAdvancedEditor />)
-
+    
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass(kitClass)
-
+    
     // Check for advanced container
     const advancedContainer = kit.querySelector('.pb_rich_text_editor_advanced_container')
     expect(advancedContainer).toBeInTheDocument()
-
+    
     // Check for toolbar
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).toBeInTheDocument()
@@ -104,7 +104,7 @@ describe('Advanced TipTap Editor works as expected', () => {
 
   test('renders advanced editor without toolbar when advancedEditorToolbar is false', () => {
     render(<TestAdvancedEditor advancedEditorToolbar={false} />)
-
+    
     const kit = screen.getByTestId(testId)
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).not.toBeInTheDocument()
@@ -112,17 +112,17 @@ describe('Advanced TipTap Editor works as expected', () => {
 
   test('shows/hides toolbar on focus when focus is enabled', async () => {
     render(<TestAdvancedEditor focus />)
-
+    
     const kit = screen.getByTestId(testId)
-
+    
     // Initially toolbar should be hidden
     let toolbar = kit.querySelector('.toolbar')
     expect(toolbar).not.toBeInTheDocument()
-
+    
     const editorElement = kit.querySelector('.ProseMirror')
     // Focus the editor
     fireEvent.focus(editorElement)
-
+    
     // Toolbar should now be visible
     await waitFor(() => {
       toolbar = kit.querySelector('.toolbar')
@@ -133,7 +133,7 @@ describe('Advanced TipTap Editor works as expected', () => {
 
   test('supports simple prop with advanced editor', () => {
     render(<TestAdvancedEditor simple />)
-
+    
     const kit = screen.getByTestId(testId)
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).toBeInTheDocument()
@@ -144,7 +144,7 @@ describe('Advanced TipTap Editor works as expected', () => {
 
     test('supports sticky prop with advanced editor', () => {
     render(<TestAdvancedEditor sticky />)
-
+    
     const kit = screen.getByTestId(testId)
     const stickyToolbar = kit.querySelector('.pb_rich_text_editor_tiptap_toolbar_sticky')
     expect(stickyToolbar).toBeInTheDocument()
@@ -154,52 +154,37 @@ describe('Advanced TipTap Editor works as expected', () => {
   test('applies aria-label when provided', () => {
     const ariaLabel = 'Rich Text Editor'
     render(<TestAdvancedEditor aria={{ label: ariaLabel }} />)
-
+    
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', ariaLabel)
   })
 
   test('supports inline prop with advanced editor', () => {
     render(<TestAdvancedEditor inline />)
-
+    
     const kit = screen.getByTestId(testId)
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).toBeInTheDocument()
     expect(kit).toHaveClass(`${kitClass} inline`)
   })
 
-  test('renders required indicator asterisk when requiredIndicator is true', () => {
-    render(
-      <RichTextEditor
-          data={{ testid: testId }}
-          label="Label"
-          requiredIndicator
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const label = within(kit).getByText(/Label/)
-
-    expect(label).toBeInTheDocument()
-    expect(kit).toHaveTextContent('*')
-  })
-
 describe('TipTap Editor Functionality', () => {
   test('can type and update content', async () => {
     render(<TestAdvancedEditor />)
-
+    
     const kit = screen.getByTestId(testId)
     const editorContent = kit.querySelector('.ProseMirror')
-
+    
     // Focus and type in the editor
     fireEvent.focus(editorContent)
-    fireEvent.input(editorContent, {
+    fireEvent.input(editorContent, { 
       target: { textContent: 'New content' }
     })
-
+    
     await waitFor(() => {
       expect(editorContent).toHaveTextContent('New content')
     })
   })
 })
 })
+