refactor(timeline): update after removing timeline addon

src/customizations/components/theme/Timeline/Timeline.js

@@ -46,7 +46,7 @@ function Timeline({
   const height = isMobile ? `${lineHeight * 350}px` : `${lineHeight * 250}px`;
 
   return (
-    <div>
+    <div className="eea timeline">
       <div
         className="Timeline-line"
         style={{ height, background: lineColor }}

src/customizations/components/theme/Timeline/Timeline.stories.js

@@ -17,11 +17,7 @@ function TimelineEEA({ items }) {
   );
 }
 
-const Template = (args) => (
-  <div className="eea-timeline">
-    <Timeline {...args}></Timeline>
-  </div>
-);
+const Template = (args) => <Timeline {...args}></Timeline>;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -116,11 +112,7 @@ Default.argTypes = {
   },
 };
 
-export const Multiple = (args) => (
-  <div className="eea-timeline">
-    <TimelineEEA {...args}></TimelineEEA>
-  </div>
-);
+export const Multiple = (args) => <TimelineEEA {...args}></TimelineEEA>;
 
 Multiple.args = {
   items: [

theme/themes/eea/extras/timeline.less

@@ -0,0 +1,225 @@
+@type: 'extra';
+@element: 'timeline';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Timeline
+*******************************/
+
+.eea.timeline {
+    text-align: @timelineAlign;
+
+    i.icon {
+      box-shadow: none !important;
+    }
+
+    .ui.grid .row .column {
+      .card {
+        border: @timelineBorder;
+        box-shadow: @timelineBoxShadow;
+      }
+
+      .content .ui.divider {
+        display: none;
+      }
+
+      .content .label {
+        padding: 0.5rem;
+        border-radius: @defaultBorderRadius;
+        font-size: @relative14px;
+      }
+
+      .content .header {
+        min-width: 132px;
+      }
+    }
+
+    .Timeline-line {
+      background: @silverGray !important;
+    }
+  }
+
+  .eea.timeline .ui.cards > .card > .content > .header:not(.ui),
+  .eea.timeline .ui.card > .content > .header:not(.ui) {
+    overflow: unset;
+    text-overflow: unset;
+  }
+
+  /* Timeline Colors */
+  .eea.timeline .ui.grid .row .column {
+    i.icon.blue {
+      background-color: @timelineBlue !important;
+    }
+
+    .blue .content .label {
+      background-color: @timelineBlue;
+      color: @white;
+    }
+
+    i.icon.green {
+      background-color: @timelineGreen !important;
+    }
+
+    .green .content .label {
+      background-color: @timelineGreen;
+      color: @white;
+    }
+
+    i.icon.grey {
+      background-color: @timelineGrey !important;
+    }
+
+    .grey .content .label {
+      background-color: @timelineGrey;
+      color: @white;
+    }
+
+    i.icon.orange {
+      background-color: @timelineOrange !important;
+    }
+
+    .orange .content .label {
+      background-color: @timelineOrange;
+      color: @white;
+    }
+
+    i.icon.red {
+      background-color: @timelineRed !important;
+    }
+
+    .red .content .label {
+      background-color: @timelineRed;
+      color: @white;
+    }
+
+    i.icon.yellow {
+      background-color: @timelineYellow !important;
+    }
+
+    .yellow .content .label {
+      background-color: @timelineYellow;
+      color: @white;
+    }
+
+    i.icon.yellow {
+      background-color: @timelineYellow !important;
+    }
+
+    .yellow .content .label {
+      background-color: @timelineYellow;
+      color: @white;
+    }
+
+    i.icon.olive {
+      background-color: @timelineOlive !important;
+    }
+
+    .olive .content .label {
+      background-color: @timelineOlive;
+      color: @white;
+    }
+
+    i.icon.teal {
+      background-color: @timelineTeal !important;
+    }
+
+    .teal .content .label {
+      background-color: @timelineTeal;
+      color: @white;
+    }
+
+    i.icon.violet {
+      background-color: @timelineViolet !important;
+    }
+
+    .violet .content .label {
+      background-color: @timelineViolet;
+      color: @white;
+    }
+
+    i.icon.purple {
+      background-color: @timelinePurple !important;
+    }
+
+    .purple .content .label {
+      background-color: @timelinePurple;
+      color: @white;
+    }
+
+    i.icon.pink {
+      background-color: @timelinePink !important;
+    }
+
+    .pink .content .label {
+      background-color: @timelinePink;
+      color: @white;
+    }
+
+    i.icon.brown {
+      background-color: @timelineBrown !important;
+    }
+
+    .brown .content .label {
+      background-color: @timelineBrown;
+      color: @white;
+    }
+  }
+
+  /* Timiline responsiveness and general fixes */
+  .eea.timeline {
+    max-width: 500px;
+  }
+
+  .Timeline-line {
+    display: none;
+  }
+
+  .eea.timeline .ui.grid .row {
+    padding-bottom: 0;
+  }
+
+  .eea.timeline .ui.grid .row > div:nth-child(1),
+  .eea.timeline .ui.grid .row > div:nth-child(4),
+  .eea.timeline .ui.grid .row > div:nth-child(5) {
+    display: none;
+  }
+
+  /* Content column */
+  .eea.timeline .ui.grid .row > div:nth-child(2) {
+    width: 80% !important;
+
+    .card {
+      margin-top: 7px;
+    }
+  }
+
+  /* Icon and line column */
+  .eea.timeline .ui.grid .row > div:nth-child(3) {
+    width: 20% !important;
+  }
+
+  /* Custom vertical line */
+  .eea.timeline .ui.grid .row > div:nth-child(3):after {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    border-left: 2px solid @silverGray;
+    content: '';
+    transform: translate(-50%);
+  }
+
+  /* Icon resizing on mobile */
+  @media only screen and (max-width: @mobileBreakpoint) {
+    .eea.timeline .ui.grid .row > div:nth-child(3) i.icon {
+      font-size: 1.2rem;
+    }
+
+    .eea.timeline .ui.grid .row > div:nth-child(2) {
+      .card {
+        margin-top: 0;
+      }
+    }
+  }

theme/themes/eea/extras/timeline.variables

@@ -0,0 +1,21 @@
+/*******************************
+            Timeline
+*******************************/
+
+@timelineAlign: center;
+@timelineBoxShadow: @eeaGlobalShadow;
+@timelineBorder: none;
+
+/* Colors */
+@timelineBlue   : @darkCerulean;
+@timelineGreen  : @pineGreen;
+@timelineGrey   : @midGray;
+@timelineRed    : @red;
+@timelineOrange : @orange;
+@timelineYellow : @yellow;
+@timelineOlive  : @olive;
+@timelineTeal   : @teal;
+@timelineViolet : @violet;
+@timelinePurple : @purple;
+@timelinePink   : @pink;
+@timelineBrown  : @brown;