Merge pull request #2207 from NCCE/2860-implement-new-primary-certifi…

…cate-landing-page

New components - For Primary Landing Page

.devcontainer/devcontainer.json

@@ -51,7 +51,7 @@
         "ruby.lint": {
           "rubocop": true
         },
-        "ruby-spec-runner.rspecCommand": "rdebug-ide --skip_wait_for_start --host 0.0.0.0 --port 1235 -- bin/rspec"
+        "ruby-spec-runner.rspecCommand": "bundle exec rdebug-ide --skip_wait_for_start --host 0.0.0.0 --port 1235 -- bin/rspec"
       }
     }
   },

app/components/cms_horizontal_card_component/cms_horizontal_card_component.html.erb

@@ -3,7 +3,7 @@
     <%= content_tag :div, class: wrapper_classes do %>
       <div class="horizontal-card-component__content">
         <h1 class="govuk-heading-m"><%= @title %></h1>
-        <%= render CmsRichTextBlockComponent.new(blocks: @body_blocks, with_wrapper: false) %>
+        <%= render @body_blocks.render %>
         <%= render @icon_block.render if @icon_block%>
       </div>
       <% if @image %>

app/components/cms_numbered_icon_list_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class CmsNumberedIconListComponent < CmsWithAsidesComponent
+  def initialize(title:, title_icon:, points:, aside_sections:)
+    super(aside_sections:)
+    @title = title
+    @title_icon = title_icon
+    @points = points
+  end
+end

app/components/cms_numbered_icon_list_component/cms_numbered_icon_list_component.html.erb

@@ -0,0 +1,21 @@
+<%= render GovGridRowComponent.new(additional_classes: 'cms-numbered-icon-list-components') do |row| %>
+  <%= row.with_column("two-thirds") do %>
+    <div class="cms-numbered-icon-list__header">
+      <%= render SectionTitleWithIconComponent.new(text: @title, icon: @title_icon) %>
+    </div>
+
+    <div>
+      <ol class="numbered-points">
+        <% @points.each do |point| %>
+          <li>
+            <%= render point.render %>
+          </li>
+        <% end %>
+      </ol>
+    </div>
+
+  <% end %>
+  <%= row.with_column("one-third") do %>
+    <%= render_parent %>
+  <% end %>
+<% end %>

app/components/cms_numbered_icon_list_component/cms_numbered_icon_list_component.scss

@@ -0,0 +1,28 @@
+.numbered-points {
+  list-style: none;
+  counter-reset: numbered-points-counter;
+
+  li{
+    counter-increment: numbered-points-counter;
+    position: relative;
+    margin-bottom: 15px;
+    padding-left: 15px
+  }
+
+  li::before {
+    content: counter(numbered-points-counter);
+    font-family: $font-family-body;
+    background: $purple;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: inline-block;
+    line-height: 2rem;
+    color: white;
+    text-align: center;
+    margin-right: 15px;
+    position: absolute;
+    left: -2.5rem;
+    top: calc(50% - 1rem);
+  }
+}

app/components/cms_numeric_card_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class CmsNumericCardComponent < ViewComponent::Base
+  def initialize(title:, text_content:, number:)
+    @title = title
+    @text_content = text_content
+    @number = number
+  end
+end

app/components/cms_numeric_card_component/cms_numeric_card_component.html.erb

@@ -0,0 +1,16 @@
+<div class="numeric-card">
+  <div class="numeric-card__header">
+    <div class="numeric-card__number">
+      <h3 class="govuk-heading-l"><%= @number %>.</h3>
+    </div>
+    <div class="numeric-card__title">
+      <h3 class="govuk-heading-l">
+        <%= @title %>
+      </h3>
+    </div>
+  </div>
+
+  <div class="numeric-card__content">
+    <%= render @text_content.render %>
+  </div>
+</div>

app/components/cms_numeric_card_component/cms_numeric_card_component.scss

@@ -0,0 +1,31 @@
+.numeric-card {
+  box-shadow: 0px 0px 8px 0px #00000040;
+  background-color: white;
+  flex: 1 1 auto;
+  padding: 15px 25px;
+
+  &__header {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+
+    .numeric-card__number {
+      flex: 0 1 auto;
+
+      h3 {
+        margin-bottom: 10px;
+        color: $purple;
+      }
+    }
+
+    .numeric-card__title {
+      flex: 1 1 auto;
+    }
+  }
+
+  &__content {
+    p {
+      font-size: 1.4rem;
+    }
+  }
+}

app/components/cms_page_title_component.rb

@@ -1,8 +1,9 @@
 # frozen_string_literal: true
 
 class CmsPageTitleComponent < ViewComponent::Base
-  def initialize(title:, sub_text: nil)
+  def initialize(title:, sub_text: nil, title_image: nil)
     @title = title
     @sub_text = sub_text
+    @title_image = title_image
   end
 end

app/components/cms_page_title_component/cms_page_title_component.html.erb

@@ -1,13 +1,20 @@
 <%= render GovGridRowComponent.new(background_color: "lime-green", padding: {top: 7, bottom: 7}) do |row| %>
   <%= row.with_column("full") do %>
     <div class="page-title__wrapper">
-      <h1 class="govuk-heading-l page-title__title-text">
-        <%= @title %>
-      </h1>
-      <% if @sub_text %>
-        <p class="govuk-body page-title__sub-text">
-          <%= @sub_text %>
-        </p>
+      <div class="page-title__content">
+        <h1 class="govuk-heading-l page-title__title-text">
+          <%= @title %>
+        </h1>
+        <% if @sub_text %>
+          <p class="govuk-body page-title__sub-text">
+            <%= @sub_text %>
+          </p>
+        <% end %>
+      </div>
+      <% if @title_image %>
+        <div class="page-title__media">
+          <%= render CmsImageComponent.new(@title_image, show_caption: false) %> 
+        </div>
       <% end %>
     </div>
   <% end %>

app/components/cms_page_title_component/cms_page_title_component.scss

@@ -1,7 +1,8 @@
 .page-title {
   &__wrapper {
     background-color: $white;
-    padding: 10px;
+    display: flex;
+    flex-direction: row;
   }
 
   &__title-text {
@@ -13,4 +14,27 @@
     margin-top: 10px;
     margin-bottom: 0;
   }
+
+  &__content {
+    padding: 30px;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  &__media {
+    flex: 0 1 30%;
+
+    .cms-image {
+      width: 100%;
+      height: 100%;
+
+       img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+       }
+    }
+  }
 }

app/components/cms_split_horizontal_card_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class CmsSplitHorizontalCardComponent < ViewComponent::Base
+  delegate :cms_color_theme_class, to: :helpers
+
+  def initialize(card_content:, aside_content:, aside_icon: nil, aside_title: nil, section_title: nil, color_theme: nil, background_color: nil)
+    @card_content = card_content
+    @aside_content = aside_content
+    @aside_icon = aside_icon
+    @aside_title = aside_title
+    @section_title = section_title
+    @color_theme = color_theme
+    @background_color = background_color
+  end
+
+  def wrapper_classes
+    classes = ["cms-split-horizontal-card"]
+    classes << "#{@background_color}-bg" if @background_color
+    classes
+  end
+
+  def left_card_classes
+    classes = ["split-horizontal-card"]
+    classes << cms_color_theme_class(@color_theme, "left") if @color_theme
+    classes
+  end
+end

app/components/cms_split_horizontal_card_component/cms_split_horizontal_card_component.html.erb

@@ -0,0 +1,22 @@
+<%= render GovGridRowComponent.new(additional_classes: wrapper_classes) do |row|  %>
+  <%= row.with_column("full") do %>
+    <% if @section_title %>
+      <h2 class="govuk-heading-m"><%= @section_title %></h2>
+    <% end %>
+    <div class="tc-row">
+
+      <div class="tc-row-two-thirds">
+        <%= content_tag :div, class: left_card_classes do %>
+          <%= render @card_content.render %>
+        <% end %>
+      </div>
+
+      <div class="tc-row-one-third">
+        <div class="split-horizontal-card">
+          <%= render SectionTitleWithIconComponent.new(text: @aside_title, icon: @aside_icon, text_size: :small) %>
+          <%= render @aside_content.render %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>

app/components/cms_split_horizontal_card_component/cms_split_horizontal_card_component.scss

@@ -0,0 +1,9 @@
+.cms-split-horizontal-card {
+  .split-horizontal-card {
+    height: calc(100% - 40px);
+    background-color: #ffffff;
+    padding: 20px;
+    border-width: 10px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+  }
+}

app/components/cms_testimonial_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class CmsTestimonialComponent < ViewComponent::Base
+  def initialize(name:, job_title:, avatar:, quote:)
+    @name = name
+    @job_title = job_title
+    @avatar = avatar
+    @quote = quote
+  end
+end

app/components/cms_testimonial_component/cms_testimonial_component.html.erb

@@ -0,0 +1,18 @@
+<div class="cms-testimonial"> 
+  <div class="cms-testimonial__quote"> 
+    <%= render @quote.render %>
+  </div>
+  <div class="cms-testimonial__bio">
+    <div class="cms-testimonial__bio-avatar">
+      <%= render CmsImageComponent.new(@avatar) if @avatar %>
+    </div>
+    <div class="cms-testimonial__bio-content">
+      <span class="name">
+        <%= @name %>
+      </span>
+      <span class="job-title">
+        <%= @job_title %>
+      </span>
+    </div>
+  </div>
+</div>

app/components/cms_testimonial_component/cms_testimonial_component.scss

@@ -0,0 +1,51 @@
+
+.cms-testimonial {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 calc(100%/3);
+
+  &__quote {
+    flex: 1 1 auto;
+    padding: 20px;
+    box-shadow: 0px 0px 8px 0px #00000040;
+    border-radius: 10px;
+    background-color: white;
+  }
+
+  &__bio {
+    flex: 0 1 68px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    margin-top: 10px;
+    margin-right: 12px;
+
+    &-avatar {
+      img {
+        width: 48px;
+        height: 48px;
+        border-radius: 48px;
+        object-position: center;
+        object-fit: cover;
+        border: 2px solid $orange;
+        margin: 10px 0;
+      }
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      .name {
+        @include govuk-font($size: 16, $weight: bold);
+      }
+
+      .job-title {
+        @include govuk-font($size: 16);
+        color: $grey-storm;
+      }
+    }
+  }
+}

app/components/cms_testimonial_row_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class CmsTestimonialRowComponent < ViewComponent::Base
+  def initialize(title:, testimonials:, background_color:)
+    @title = title
+    @testimonials = testimonials
+    @background_color = background_color
+  end
+
+  def wrapper_classes
+    classes = ["cms-testimonial-row"]
+    classes << "#{@background_color}-bg" if @background_color
+    classes
+  end
+end

app/components/cms_testimonial_row_component/cms_testimonial_row_component.html.erb

@@ -0,0 +1,14 @@
+<%= render GovGridRowComponent.new(additional_classes: wrapper_classes) do |row| %>
+  <%= row.with_column("full") do %>
+    <% if @title %>
+      <h1 class="govuk-heading-m"><%= @title %></h1>
+    <% end %>
+
+    <div class="cms-testimonials-row">
+      <% @testimonials.each do |testimonial| %>
+       <%= render testimonial.render %>
+      <% end %>
+    </div>
+
+  <% end %>
+<% end %>