Accordion theming

eea · Jan 17, 2022 · 8061bf9 · 8061bf9
1 parent 3f4bea4
commit 8061bf9
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 49 deletions.
diff --git a/src/customizations/components/theme/Accordion/Accordion.js b/src/customizations/components/theme/Accordion/Accordion.js
@@ -12,15 +12,15 @@ export function AccordionEEA({ content, variant, ...args }) {
   };
 
   return (
-    <Accordion className={variant} {...args}>
+    <Accordion className={`eeaAccordion ${variant}`} {...args}>
       {content.map((item, index) => (
-        <div key={index}>
+        <div className="eeaAccordionItem" key={index}>
           <Accordion.Title
             active={activeIndex === index}
             index={index}
             onClick={toggleOpenAccordion}
           >
-            <Icon name="dropdown" />
+            <Icon name="chevron circle down" />
             {item.title}
           </Accordion.Title>
           <Accordion.Content active={activeIndex === index}>

diff --git a/src/customizations/components/theme/Accordion/Accordion.stories.js b/src/customizations/components/theme/Accordion/Accordion.stories.js
@@ -10,19 +10,6 @@ export default {
     },
   },
   argTypes: {
-    variant: {
-      options: ['default', 'styled', 'inverted segment'],
-      control: { type: 'select' },
-      description: 'Accordion style class',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: 'default',
-        },
-      },
-    },
     content: {
       description: 'Accordion content object',
       table: {
@@ -34,17 +21,6 @@ export default {
         },
       },
     },
-    fluid: {
-      description: 'take width of container',
-      table: {
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
   },
 };
 
@@ -53,9 +29,8 @@ const Template = (args) => <AccordionEEA {...args}></AccordionEEA>;
 export const Default = Template.bind({});
 Default.args = {
   content: [
-    { title: 'Accordion Title 1', content: 'content 1' },
-    { title: 'Accordion Title 2', content: 'content 2' },
+    { title: 'Accordion Title 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.' },
+    { title: 'Accordion Title 2', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.' },
+    { title: 'Accordion Title 3', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.' },
   ],
-  variant: 'default',
-  fluid: true,
 };
diff --git a/theme/themes/eea/modules/accordion.overrides b/theme/themes/eea/modules/accordion.overrides
@@ -2,25 +2,32 @@
          Theme Overrides
 *******************************/
 
-/* Dropdown Icon */
-.ui.accordion .title .dropdown.icon,
-.ui.accordion .accordion .title .dropdown.icon {
-  float: right;
+.ui.accordion.eeaAccordion .eeaAccordionItem {
+  margin: @itemsMargin;
+  font-family: @titleFont !important;
+  transition: @styledTitleTransition !important;
+  .title {
+    background-color: @backrgoundColor;
+    font-family: @titleFont !important;
+    padding: @relative12px;
+    font-size: @h3;
+    i.icon {
+      height: 100%;
+      transition: @iconTransition;
+      color: @iconColor;
+      margin-right: @relative16px;
+    }
+  }
+  .content {
+    font-family: @titleFont !important;
+    border-top: @contentBorder;
+    font-size: @pageFont;
+    background: @contentBckground;
+    padding: @relative16px @relative64px !important;
+  }
 }
 
-.ui.accordion .title .dropdown.icon:before,
-.ui.accordion .accordion .title .dropdown.icon:before {
-  content: '\e904';
+.ui.accordion.eeaAccordion .eeaAccordionItem .active.title i.icon {
+      transform: rotate(180deg);
 }
 
-.ui.accordion .active.title .dropdown.icon:before,
-.ui.accordion .accordion .active.title .dropdown.icon:before {
-  content: '\e9ce';
-}
-
-.ui.styled.accordion .title,
-.ui.styled.accordion .accordion .title {
-  background: @darkWhite;
-  font-size: @12px;
-  text-transform: uppercase;
-}
diff --git a/theme/themes/eea/modules/accordion.variables b/theme/themes/eea/modules/accordion.variables
@@ -3,14 +3,17 @@
 *******************************/
 
 @boxShadow: none;
+@itemsMargin: @relative8px 0;
 
 /* Title */
 @titleFont: @headerFont;
 @titlePadding: 0.5em 0em;
 @titleFontSize: 1em;
 @titleColor: @textColor;
+@backrgoundColor: @silverGray;
 
 /* Icon */
+@iconColor: @secondaryColor;
 @iconOpacity: 1;
 @iconFontSize: 1em;
 @iconFloat: none;
@@ -33,6 +36,7 @@
 /* Content */
 @contentMargin: '';
 @contentPadding: 0.5em 0em 1em;
+@contentBckground: #F9F9F9;
 
 /*-------------------
        Coupling
@@ -63,6 +67,7 @@
 /* Content */
 @styledContentMargin: 0em;
 @styledContentPadding: 0.5em 1em 1.5em;
+@contentBorder: @relative2px solid @secondaryColor;
 
 /* Child Content */
 @styledChildContentMargin: 0em;