refactor(breadcrumb): remove custom class anf and new variables

eea · Mar 10, 2022 · b3cb83d · b3cb83d
1 parent a719576
commit b3cb83d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 31 deletions.
diff --git a/src/ui/Breadcrumbs/Breadcrumb.stories.jsx b/src/ui/Breadcrumbs/Breadcrumb.stories.jsx
@@ -53,29 +53,25 @@ export default {
 //const Template = (args) => <Breadcrumb {...args}></Breadcrumb>;
 
 const Template = (args) => (
-  <div className="eea-breadcrumb">
-    <Container>
-      <Breadcrumb>
-        <Breadcrumb.Section key="home" href={args.root}>
-          <Image src={homeSVG} alt="home" />
-        </Breadcrumb.Section>
-        {args.sections.map((section, index, sections) => [
-          index !== 0 && (
-            <Breadcrumb.Divider icon={`${args.icon}`} key={index} />
-          ),
-          index < sections.length - 1 ? (
-            <Link key={section.key} to={section.href} className="section">
-              {section.content}{' '}
-            </Link>
-          ) : (
-            <Breadcrumb.Section key={section.key} active>
-              {section.content}{' '}
-            </Breadcrumb.Section>
-          ),
-        ])}
-      </Breadcrumb>
-    </Container>
-  </div>
+  <Container>
+    <Breadcrumb>
+      <Breadcrumb.Section key="home" href={args.root}>
+        <Image src={homeSVG} alt="home" />
+      </Breadcrumb.Section>
+      {args.sections.map((section, index, sections) => [
+        index !== 0 && <Breadcrumb.Divider icon={`${args.icon}`} key={index} />,
+        index < sections.length - 1 ? (
+          <Link key={section.href} to={section.href} className="section">
+            {section.content}{' '}
+          </Link>
+        ) : (
+          <Breadcrumb.Section key={section.key} active>
+            {section.content}{' '}
+          </Breadcrumb.Section>
+        ),
+      ])}
+    </Breadcrumb>
+  </Container>
 );
 
 export const Default = Template.bind({});

diff --git a/theme/themes/eea/collections/breadcrumb.overrides b/theme/themes/eea/collections/breadcrumb.overrides
@@ -2,11 +2,10 @@
         Theme Overrides
 *******************************/
 
-div.eea-breadcrumb .ui.breadcrumb {
+.ui.breadcrumb {
   .section {
     padding: @mobileBreadcrumbPadding;
     font-size: @mobileBreadcrumbFontSize;
-    font-weight: @activeFontWeight;
 
     /* Max breadcrumb length to be decided */
     //max-width: 150px;
@@ -16,7 +15,7 @@ div.eea-breadcrumb .ui.breadcrumb {
 
     img {
       width: @mobileBreadcrumbIconSize;
-      margin-bottom: -1px; //To align as the design
+      margin-bottom: -@1px; //To align as the design
     }
   }
 
@@ -25,15 +24,14 @@ div.eea-breadcrumb .ui.breadcrumb {
   }
 
   a:first-child {
-    padding: 0 0.469rem 0 0;
+    padding: @breadcrumbFirstChildPadding;
   }
 }
 @media only screen and (min-width: @tabletBreakpoint) {
-  div.eea-breadcrumb .ui.breadcrumb {
+  .ui.breadcrumb {
     .section {
       padding: @tabletBreadcrumbPadding;
       font-size: @tabletBreadcrumbFontSize;
-      font-weight: @activeFontWeight;
 
       img {
         width: @tabletBreadcrumbIconSize;
@@ -47,7 +45,7 @@ div.eea-breadcrumb .ui.breadcrumb {
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
-  div.eea-breadcrumb .ui.breadcrumb {
+  .ui.breadcrumb {
     .section {
       padding: @computerBreadcrumbPadding;
     }

diff --git a/theme/themes/eea/collections/breadcrumb.variables b/theme/themes/eea/collections/breadcrumb.variables
@@ -20,6 +20,7 @@
 /* Icon */
 @mobileBreadcrumbIconSize: 0.469rem;
 @tabletBreadcrumbIconSize: @12px;
+@breadcrumbFirstChildPadding: 0 0.469rem 0 0;
 
 /* Divider */
 @dividerSpacing: @5px;
@@ -45,5 +46,4 @@
        States
 --------------------*/
 
-
 @activeFontWeight: @normal;