Key Milestones

<div class="key-milestones js-key-milestones">
    <div class="key-milestones__title-group">
        <div class="key-milestones__title-group__main">
            <h2 class="key-milestones__component-title">Key Milestones</h2>
        </div>
        <div class="key-milestones__title-group__actions">
            <a href="#" class="btn btn-link js-toggle" data-active-content="See less <i class='fa fa-minus'></i>"
                >See all
                <i class="fa fa-plus"></i>
            </a>
        </div>
    </div>
    <div class="key-milestones__items">
        <div class="key-milestones__item">
            <div class="key-milestones__date">
                <div class="key-milestones__date-main">MMM DD</div>
                <div class="key-milestones__date-sub">Q3 2021</div>
            </div>
            <div class="key-milestones__body">
                <div class="key-milestones__title">Upcoming milestone title goes here lorem ipsum dolor sit amet consectetur adipisicing elit aperiam, error</div>
                <div class="key-milestones__actions">
                    <a href="#" class="key-milestones__action">Optional link to guidance / related document</a>
                </div>
            </div>
        </div>

        <div class="key-milestones__item">
            <div class="key-milestones__date">
                <div class="key-milestones__date-main">MMM DD</div>
                <div class="key-milestones__date-sub">Q3 2021</div>
            </div>
            <div class="key-milestones__body">
                <div class="key-milestones__title">Upcoming milestone title goes here</div>
                <div class="key-milestones__actions">
                    <a href="#" class="key-milestones__action">Optional link to guidance / related document</a>
                </div>
            </div>
        </div>
    </div>

    <div class="key-milestones__addt js-key-milestones__addt">
        <div class="key-milestones__items">
            <div class="key-milestones__item">
                <div class="key-milestones__date">
                    <div class="key-milestones__date-main">MMM DD</div>
                    <div class="key-milestones__date-sub">Q3 2021</div>
                </div>
                <div class="key-milestones__body">
                    <div class="key-milestones__title">Upcoming milestone title goes here lorem ipsum dolor sit amet consectetur adipisicing elit aperiam, error</div>
                    <div class="key-milestones__actions">
                        <a href="#" class="key-milestones__action">Optional link to guidance / related document</a>
                    </div>
                </div>
            </div>

            <div class="key-milestones__item">
                <div class="key-milestones__date">
                    <div class="key-milestones__date-main">MMM DD</div>
                    <div class="key-milestones__date-sub">Q3 2021</div>
                </div>
                <div class="key-milestones__body">
                    <div class="key-milestones__title">Upcoming milestone title goes here</div>
                    <div class="key-milestones__actions">
                        <a href="#" class="key-milestones__action">Optional link to guidance / related document</a>
                    </div>
                </div>
            </div>

            <div class="key-milestones__item">
                <div class="key-milestones__date">
                    <div class="key-milestones__date-main">MMM DD</div>
                    <div class="key-milestones__date-sub">Q3 2021</div>
                </div>
                <div class="key-milestones__body">
                    <div class="key-milestones__title">Upcoming milestone title goes here lorem ipsum dolor sit amet consectetur adipisicing elit aperiam, error</div>
                    <div class="key-milestones__actions">
                        <a href="#" class="key-milestones__action">Optional link to guidance / related document</a>
                    </div>
                </div>
            </div>

            <div class="key-milestones__item">
                <div class="key-milestones__date">
                    <div class="key-milestones__date-main">MMM DD</div>
                    <div class="key-milestones__date-sub">Q3 2021</div>
                </div>
                <div class="key-milestones__body">
                    <div class="key-milestones__title">Upcoming milestone title goes here lorem ipsum dolor sit amet consectetur adipisicing elit aperiam, error</div>
                    <div class="key-milestones__actions">
                        <a href="#" class="key-milestones__action">Optional link to guidance / related document</a>
                    </div>
                </div>
            </div>

            <div class="key-milestones__item">
                <div class="key-milestones__date">
                    <div class="key-milestones__date-main">MMM DD</div>
                    <div class="key-milestones__date-sub">Q3 2021</div>
                </div>
                <div class="key-milestones__body">
                    <div class="key-milestones__title">Upcoming milestone title goes here</div>
                    <div class="key-milestones__actions">
                        <a href="#" class="key-milestones__action">Optional link to guidance / related document</a>
                    </div>
                </div>
            </div>

            <div class="key-milestones__item">
                <div class="key-milestones__date">
                    <div class="key-milestones__date-main">MMM DD</div>
                    <div class="key-milestones__date-sub">Q3 2021</div>
                </div>
                <div class="key-milestones__body">
                    <div class="key-milestones__title">Upcoming milestone title goes here lorem ipsum dolor sit amet consectetur adipisicing elit aperiam, error</div>
                    <div class="key-milestones__actions">
                        <a href="#" class="key-milestones__action">Optional link to guidance / related document</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.key-milestones {
  background-color: $color-base-grey;
  padding: 1.6rem 2.4rem;
  margin-bottom: 2.4rem;
  margin-left: auto;
  max-width: 96rem;
  position: relative;

  @media (min-width: $breakpoint-desktop) {
    padding-left: 9.6rem;

    &::before,
    &::after {
      position: absolute;
      z-index: 1;
      content: "";
      width: 3.2rem;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba($color-blue-medium, 0.3);
    }

    &::after {
      left: 3.2rem;
      background-color: rgba($color-blue-medium, 0.7);
    }
  }
}

.key-milestones__title-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}

.key-milestones__title-group__main {
  flex: 1;
}

.key-milestones__title-group__actions {
  align-self: flex-end;
}

.key-milestones__component-title {
  @include typeHeadline(true);
  color: $color-blue-medium;
  text-transform: uppercase;
}

.key-milestones__items {
  display: grid;
  gap: 2.4rem 3.2rem;

  @media (min-width: $breakpoint-desktop) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.key-milestones__item {
  display: flex;
}

.key-milestones__date {
  padding-right: 1.6rem;
}

.key-milestones__date-main {
  @include typeHeadline(true);
}

.key-milestones__date-sub {
  @include typeSubheader(true);
}

.key-milestones__body {
  flex: 1;
}

.key-milestones__title {
  @include typeBody(true);
  margin-bottom: 0.4rem;
}

.key-milestones__action {
  @include typeSmall(true);
}

.key-milestones__addt {
  display: none;

  &.is-active {
    display: block;
  }

  .key-milestones__items {
    margin-top: 2.4rem;
  }
}

$(function () {
  const $component = $(".js-key-milestones");
  const $toggle = $component.find(".js-toggle");

  $toggle.each(function () {
    const $toggle = $(this);
    const activeContent = $toggle.data("active-content");
    const inactiveContent = $toggle.html();
    const $view = $(".js-key-milestones__addt");

    $toggle.on("click", function (e) {
      e.preventDefault();
      $view.toggleClass("is-active");
      $toggle.toggleClass("is-active");

      if (activeContent) {
        $toggle.html(function () {
          return $toggle.hasClass("is-active") ? activeContent : inactiveContent;
        });
      }
    });
  });
});