[MIM-2198] Mim-2198 New part Timeline

src/main/resources/assets/styles/_timeline.scss

@@ -0,0 +1,207 @@
+.ssb-timeline {
+  .title-container {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    margin-top: 4rem;
+    margin-bottom: 5rem;
+
+    .title-ingress-wrapper {
+      grid-column: 2 / span 10;
+
+      .title {
+        display: block;
+        margin: 0 auto;
+      }
+      .ingress {
+        display: block;
+        margin: 0 auto;
+        font-size: 1.25rem;
+      }
+    }
+  }
+
+  .filter-container {
+    display: flex;
+    justify-content: center;
+
+    .filter {
+      display: flex;
+      grid-column: 3 / span 8;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+      margin-bottom: 4rem;
+      width: 740px;
+
+      .ssb-tag {
+        &.active {
+          background: $ssb-dark-5;
+          border: 2px solid $ssb-dark-5;
+          color: $ssb-white;
+        }
+      }
+    }
+  }
+
+  .timeline-container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .timeline {
+    position: relative;
+    padding-left: 20px;
+    width: 740px;
+
+    .circle {
+      width: 16px;
+      height: 16px;
+      background-color: #274247;
+      border-radius: 50%;
+      position: absolute;
+      top: -10px;
+      transform: translateX(-40%);
+    }
+
+    &:before {
+      content: '';
+      width: 4px;
+      height: 100%;
+      background: #274247;
+      position: absolute;
+      top: 0;
+    }
+
+    &:after {
+      content: '';
+      display: block;
+      width: 100%;
+      clear: both;
+    }
+
+    .timeline-elements {
+      padding: 25px 0;
+      list-style: none;
+    }
+
+    .timeline-content {
+      left: -20px;
+      position: relative;
+      margin-bottom: 30px;
+
+      .year {
+        width: 180px;
+        height: 80px;
+        background: #274247;
+        border-radius: 4px;
+        position: absolute;
+        align-content: center;
+
+        &:after {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: -1px;
+          width: 0;
+          height: 0;
+          border-top: 40px solid transparent;
+          border-bottom: 40px solid transparent;
+          border-right: 20px solid #f0f8f9;
+          border-radius: 4px;
+        }
+
+        span {
+          @include roboto-condenced;
+          color: #fff;
+          padding: 20px 40px;
+          font-size: 28px;
+        }
+      }
+
+      .events {
+        padding-top: 90px;
+        width: 100%;
+        min-width: 400px;
+        position: relative;
+
+        .event {
+          margin-bottom: 20px;
+
+          &:first-child {
+            margin-top: 20px;
+          }
+
+          &:last-child {
+            margin-bottom: 80px;
+          }
+
+          .ssb-card {
+            max-width: 400px;
+          }
+        }
+      }
+
+      .event-box {
+        background: #fff;
+        border: 1px solid #274247;
+        border-radius: 8px;
+        display: grid;
+        padding: 20px 40px;
+        width: 100%;
+        .title {
+          @include roboto;
+          font-weight: bold;
+          font-size: 20px;
+        }
+        .text {
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+
+  .button-more {
+    left: -20px;
+    top: -30px;
+    position: relative;
+  }
+
+  @include media-breakpoint-down(lg) {
+    .title-container {
+      display: block;
+      margin-top: 2rem;
+    }
+
+    .filter-container {
+      .filter {
+        margin-top: 3rem;
+        margin-bottom: 4rem;
+      }
+    }
+
+    .timeline-container {
+      justify-content: start;
+    }
+
+    .timeline {
+      padding-left: 10px;
+      width: 100%;
+
+      .timeline-content {
+        width: calc(100% + 10px);
+        left: -10px;
+
+        .events {
+          min-width: 0;
+        }
+
+        .event-box {
+          padding: 20px;
+        }
+      }
+    }
+
+    .button-more {
+      left: -10px;
+    }
+  }
+}

src/main/resources/assets/styles/main.scss

@@ -91,6 +91,7 @@ $container-max-widths: (
 @import './statisticContact';
 @import './popup';
 @import './print';
+@import './timeline';
 
 body {
   -moz-osx-font-smoothing: grayscale;

src/main/resources/index.d.ts

@@ -71,6 +71,7 @@ declare global {
       export type StatisticDescription = _PartComponent<'mimir:statisticDescription'>
       export type SubjectArticleList = _PartComponent<'mimir:subjectArticleList'>
       export type Table = _PartComponent<'mimir:table'>
+      export type Timeline = _PartComponent<'mimir:timeline'>
       export type UpcomingReleases = _PartComponent<'mimir:upcomingReleases'>
       export type Variables = _PartComponent<'mimir:variables'>
       export type VideoEmbed = _PartComponent<'mimir:videoEmbed'>

src/main/resources/lib/types/partTypes/timeline.ts

@@ -0,0 +1,69 @@
+export interface TimelineProps {
+  title: string
+  ingress: string
+  timelineElements: TimelineElement[]
+  showFilter: boolean
+  showMoreButtonText: string
+  countYear: number
+}
+
+export interface TimelineElement {
+  year: string
+  event: TimelineEvent[]
+  //event?: TimelineEvent | TimelineEvent[]
+}
+
+export interface TimelineEvent {
+  eventType: string
+  title: string
+  text?: string
+  directorImage?: string
+  directorImageAltText?: string
+  timelineCategory?: string
+  targetUrl?: string
+}
+export interface SimpleBox {
+  title: string
+  text?: string
+  timelineCategory: string
+  urlContentSelector?: hrefManual | hrefContent
+}
+
+export interface ExpansionBox {
+  title: string
+  text?: string
+  timelineCategory: string
+}
+
+export interface DirectorBox {
+  title: string
+  text?: string
+  directorImage?: string
+  urlContentSelector?: hrefManual | hrefContent
+}
+
+export interface Event {
+  simpleBox?: SimpleBox
+  expansionBox?: ExpansionBox
+  directorBox?: DirectorBox
+  _selected: 'simpleBox' | 'expansionBox' | 'directorBox'
+}
+
+export interface TimelineItemSet {
+  year: string
+  event: Event[]
+}
+
+interface hrefManual {
+  _selected: 'optionLink'
+  optionLink: {
+    link?: string
+  }
+}
+
+interface hrefContent {
+  _selected: 'optionXPContent'
+  optionXPContent: {
+    xpContent?: string
+  }
+}

src/main/resources/site/i18n/phrases.properties

@@ -393,6 +393,7 @@ highcharts.legendLabelNoTitle = Bytt synlighet på serie, {chartTitle}
 
 button.showMore = Vis flere
 button.showAll = Vis alle
+button.showMoreYears = Vis flere år
 methodsAndDocumentation = Metoder og dokumentasjon
 
 nameSearch.title = Navnesøk

src/main/resources/site/i18n/phrases_en.properties

@@ -393,6 +393,7 @@ highcharts.legendLabelNoTitle = Toggle series visibility, {chartTitle}
 
 button.showMore = Show more
 button.showAll = Show all
+button.showMoreYears = Show more years
 methodsAndDocumentation = Methods and documentation
 
 nameSearch.title = Name search

src/main/resources/site/i18n/phrases_nn.properties

@@ -386,6 +386,7 @@ highcharts.legendLabelNoTitle = Bytt synlighet på serie, {chartTitle}
 
 button.showMore = Vis fleire
 button.showAll = Vis alle
+button.showMoreYears = Vis fleire år
 methodsAndDocumentation = Metoder og dokumentasjon
 
 nameSearch.title = Namnsøk

src/main/resources/site/mixins/linkUrlOrContent/linkUrlOrContent.xml

@@ -0,0 +1,33 @@
+<mixin>
+    <display-name>Lenke</display-name>
+    <form>
+      <option-set name="urlContentSelector">
+        <label>Lenke</label>
+        <expanded>false</expanded>
+        <occurrences minimum="0" maximum="1"/>
+        <options minimum="0" maximum="1">
+          <option name="optionLink">
+            <label>URL</label>
+            <items>
+              <input name="link" type="TextLine">
+                  <label>Lenke</label>
+                  <occurrences minimum="0" maximum="1"/>
+              </input>
+            </items>
+          </option>
+          <option name="optionXPContent">
+            <label>XP-innhold</label>
+            <items>
+              <input name="xpContent" type="ContentSelector">
+                <label>Innhold i XP</label>
+                <occurrences minimum="0" maximum="1"/>
+                <config>
+                    <allowPath>${site}</allowPath>
+                </config>
+              </input>
+            </items>
+          </option>
+        </options>
+      </option-set>
+    </form>
+</mixin>

src/main/resources/site/mixins/timelineCategory/timelineCategory.xml

@@ -0,0 +1,14 @@
+<mixin>
+    <display-name>Hendelsestype Tidslinje</display-name>
+    <form>
+        <input name="timelineCategory" type="RadioButton">
+            <label>Hendelsestype</label>
+            <occurrences minimum="1" maximum="1"/>
+            <config>
+                <option value="statistic">Statistikk</option>
+                <option value="aboutSsb">Om SSB</option>
+            </config>
+            <default>aboutSsb</default>
+        </input>
+    </form>
+</mixin>