feat: Add theme variations - refs #153783

eea · Sep 26, 2022 · 70c0599 · 70c0599
1 parent 20652bc
commit 70c0599
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/src/components/manage/Blocks/Accordion/AccordionEdit.jsx b/src/components/manage/Blocks/Accordion/AccordionEdit.jsx
@@ -47,7 +47,7 @@ export default (props) => {
   }, [data.collapsed]);
 
   return (
-    <Accordion fluid styled>
+    <Accordion fluid styled className={data.theme}>
       <React.Fragment>
         <Accordion.Title
           as={data.title_size}

diff --git a/src/components/manage/Blocks/Accordion/Schema.js b/src/components/manage/Blocks/Accordion/Schema.js
@@ -25,6 +25,10 @@ const messages = defineMessages({
     id: 'Accordion Title size',
     defaultMessage: 'Accordion Title size',
   },
+  theme: {
+    id: 'Theme',
+    defaultMessage: 'Theme',
+  },
   right_arrows: {
     id: 'Title Icon on the right',
     defaultMessage: 'Title Icon on the right',
@@ -74,6 +78,7 @@ export const accordionBlockSchema = ({ intl }) => ({
       fields: [
         'title',
         'title_size',
+        'theme',
         'right_arrows',
         'collapsed',
         'non_exclusive',
@@ -104,6 +109,18 @@ export const accordionBlockSchema = ({ intl }) => ({
         ['h6', 'Heading 6'],
       ],
     },
+    theme: {
+      title: intl.formatMessage(messages.theme),
+      type: 'string',
+      factory: 'Choice',
+      choices: [
+        ['default', 'Default'],
+        ['primary', 'Primary'],
+        ['secondary', 'Secondary'],
+        ['tertiary', 'Tertiary'],
+      ],
+      default: 'default',
+    },
     right_arrows: {
       title: intl.formatMessage(messages.right_arrows),
       type: 'boolean',

diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx
@@ -50,7 +50,13 @@ const View = (props) => {
     <div className="accordion-block">
       {panels.map(([id, panel], index) => {
         return accordionBlockHasValue(panel) ? (
-          <Accordion fluid styled key={id} exclusive={!data.exclusive}>
+          <Accordion
+            fluid
+            styled
+            key={id}
+            exclusive={!data.exclusive}
+            className={data.theme}
+          >
             <React.Fragment>
               <Accordion.Title
                 as={data.title_size}

diff --git a/src/components/manage/Blocks/Accordion/editor.less b/src/components/manage/Blocks/Accordion/editor.less
@@ -47,6 +47,15 @@
     padding-top: 1rem;
     padding-bottom: 0.1rem;
     margin: 0;
+
+    .ui.accordion {
+      &.primary, &.secondary, &.tertiary {
+        .active.title input,
+        .active.title i {
+          color: #fff ;
+        }
+      }
+    }
   }
 
   .blocks-form {