Merge branch 'master' into gomezivann/tokens-button

Author: Mil4n0r

apps/website/screens/common/example/Example.tsx

@@ -46,17 +46,18 @@ type ExamplePropTypes = {
   };
 };
 
-const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes): JSX.Element => {
+const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) => {
   const toast = useToast();
   const [isCodeVisible, changeIsCodeVisible] = useState(defaultIsVisible);
+  const [liveCode, setLiveCode] = useState(example.code);
 
   const handleCodeOnClick = () => {
     changeIsCodeVisible(!isCodeVisible);
   };
 
   const handleCopy = () => {
     navigator.clipboard
-      .writeText(example.code)
+      .writeText(liveCode)
       .then(() => {
         toast.success({ message: "Code copied to the clipboard." });
       })
@@ -67,7 +68,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
 
   return (
     <DxcFlex direction="column" gap="0.75rem">
-      <LiveProvider code={example.code} scope={example.scope} theme={theme}>
+      <LiveProvider code={liveCode} scope={example.scope} theme={theme}>
         <StyledPreview>
           <LivePreview />
           <StyledError>
@@ -87,7 +88,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
         )}
         {isCodeVisible && (
           <StyledEditor>
-            <LiveEditor />
+            <LiveEditor code={liveCode} onChange={setLiveCode} />
           </StyledEditor>
         )}
       </LiveProvider>

apps/website/screens/common/themes/advanced-theme.json

@@ -2,45 +2,43 @@
   "accordion": {
     "backgroundColor": "#ffffff",
     "hoverBackgroundColor": "#f2eafa",
+    "focusBackgroundColor": "transparent",
+    "activeBackgroundColor": "#f2eafa",
     "arrowColor": "#5f249f",
     "disabledArrowColor": "#999999",
+    "subLabelFontFamily": "Open Sans, sans-serif",
+    "subLabelFontSize": "0.75rem",
+    "subLabelFontWeight": "400",
+    "subLabelFontStyle": "normal",
+    "subLabelFontColor": "#666666",
+    "disabledSubLabelFontColor": "#999999",
     "assistiveTextFontFamily": "Open Sans, sans-serif",
-    "assistiveTextFontSize": "1rem",
-    "assistiveTextFontWeight": "300",
-    "assistiveTextFontStyle": "italic",
-    "assistiveTextLetterSpacing": "0.025em",
+    "assistiveTextFontSize": "0.75rem",
+    "assistiveTextFontWeight": "400",
+    "assistiveTextFontStyle": "normal",
     "assistiveTextFontColor": "#666666",
     "disabledAssistiveTextFontColor": "#999999",
-    "assistiveTextMinWidth": "100px",
-    "assistiveTextPaddingRight": "1.5rem",
-    "assistiveTextPaddingLeft": "0rem",
     "titleLabelFontFamily": "Open Sans, sans-serif",
     "titleLabelFontSize": "1rem",
     "titleLabelFontWeight": "400",
     "titleLabelFontStyle": "normal",
-    "titleLabelFontColor": "#000000",
+    "titleLabelFontColor": "#333333",
     "disabledTitleLabelFontColor": "#999999",
-    "titleLabelPaddingTop": "0rem",
-    "titleLabelPaddingBottom": "0rem",
-    "titleLabelPaddingLeft": "0rem",
-    "titleLabelPaddingRight": "1rem",
     "focusBorderColor": "#0095ff",
     "focusBorderStyle": "solid",
     "focusBorderThickness": "2px",
     "borderRadius": "4px",
     "boxShadowOffsetX": "0px",
-    "boxShadowOffsetY": "6px",
-    "boxShadowBlur": "10px",
+    "boxShadowOffsetY": "12px",
+    "boxShadowBlur": "12px",
+    "boxShadowSpread": "0px",
     "boxShadowColor": "#0000001a",
     "iconColor": "#5f249f",
     "disabledIconColor": "#999999",
     "iconSize": "24px",
-    "iconMarginLeft": "0rem",
-    "iconMarginRight": "0.75rem",
-    "accordionGroupSeparatorBorderColor": "#0000001a",
-    "accordionGroupSeparatorBorderThickness": "1px",
-    "accordionGroupSeparatorBorderRadius": "0px",
-    "accordionGroupSeparatorBorderStyle": "solid"
+    "accordionSeparatorBorderColor": "#e6e6e6",
+    "accordionSeparatorBorderThickness": "1px",
+    "accordionSeparatorBorderStyle": "solid"
   },
   "alert": {
     "overlayColor": "#000000b3",

apps/website/screens/common/themes/opinionated-theme.json

@@ -1,7 +1,8 @@
 {
   "accordion": {
     "accentColor": "#5f249f",
-    "titleFontColor": "#000000",
+    "titleFontColor": "#333333",
+    "subLabelFontColor": "#666666",
     "assistiveTextFontColor": "#666666"
   },
   "button": {

apps/website/screens/components/accordion/AccordionPageLayout.tsx

@@ -17,9 +17,10 @@ const AccordionPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Accordion" />
           <DxcParagraph>
-            Accordions are used to group similar content and hide or show it depending on user needs or preferences.
-            Accordions give users more granular control over the interface and help digest content in stages, rather
-            than all at once.
+            The accordion component is a vertical stack of interactive headers used to group related content into
+            collapsible sections, allowing users to expand or hide content based on their needs or preferences. It
+            enhances the user experience by organizing information into smaller, digestible chunks, helping reduce
+            cognitive load and save screen space.
           </DxcParagraph>
           <TabsPageHeading tabs={tabs}></TabsPageHeading>
         </DxcFlex>