-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* initial version of promo adviser component * bugfix * scss linting * update colours and styling + add tests * Update app/components/calls_to_action/adviser_component.rb Co-authored-by: Gemma Dallman <[email protected]> * remove test CTA, add new CTA, update docs * Update _adviser-promo-degree.html.erb * add classes and support for border to adviser promo, update docs * Update adviser_component.html.erb add promo type --------- Co-authored-by: Gemma Dallman <[email protected]>
- Loading branch information
1 parent
f2a936f
commit b39ec2f
Showing
10 changed files
with
272 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <%= tag.div(class: "adviser--border-top") if border %> | ||
| <%= tag.div class: classes do %> | ||
| <div class="adviser__left"> | ||
| <%= image_pack_tag(image, | ||
| **helpers.image_alt_attribs_for_text(""), | ||
| class: "adviser__image") | ||
| %> | ||
| </div> | ||
|
|
||
| <div class="adviser__right"> | ||
| <h2 class="heading-l"> | ||
| <%= tag.span title if title.present? %> | ||
| </h2> | ||
| <%= tag.p text, class: 'adviser__text' if text.present? %> | ||
| <p></p> | ||
| <%= link_to link_text, link_target, class: "button", role: "button", data: { "promo-type": "adviser" } if link_text.present? && link_target.present? %> | ||
| </div> | ||
| <% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| class CallsToAction::AdviserComponent < ViewComponent::Base | ||
| attr_reader :title, :text, :image, :link_text, :link_target, :classes, :border | ||
|
|
||
| def initialize( | ||
| title: "Get free one-to-one support", | ||
| text: "An adviser with years of teaching experience can help you to become a teacher. Chat by phone, text, or email as little or often as you need.", | ||
| image: "static/images/adviser-black.png", | ||
| link_text: "Find out more about advisers", | ||
| link_target: "/teacher-training-advisers", | ||
| classes: [], | ||
| border: true | ||
| ) | ||
| super | ||
|
|
||
| @title = title | ||
| @text = text | ||
| @image = image | ||
| @link_text = link_text | ||
| @link_target = link_target | ||
| @classes = ["adviser", *classes].compact.join(" ") | ||
| @border = border | ||
| end | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 4 additions & 8 deletions
12
app/views/content/train-to-be-a-teacher/promos/_adviser-promo-degree.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,4 @@ | ||
| <%= render(CallsToAction::Promo::PromoComponent.new) do |promo| %> | ||
| <% promo.with_left_section(classes: %w[tta-background]) %> | ||
| <% promo.with_right_section(heading: "Get free one-to-one support") do %> | ||
| <p>Talk to an adviser with years of teaching experience about your different training and funding options. Chat through phone, text or email, as little or as often as you need.</p> | ||
|
|
||
| <%= link_to("Find out more about advisers", "/teacher-training-advisers", class: "button") %> | ||
| <% end %> | ||
| <% end %> | ||
| <%= render CallsToAction::AdviserComponent.new( | ||
| text: "Talk to an adviser with years of teaching experience about your different training and funding options. Chat through phone, text or email, as little or as often as you need.", | ||
| border: "adviser--border-top" | ||
| ) %> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| .adviser { | ||
| max-width: $content-max-width; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: $indent-amount * .5; | ||
| margin: 0 auto; | ||
| background-color: $grey; | ||
|
|
||
| @include mq($from: tablet) { | ||
| flex-direction: row; | ||
| margin: 0 auto; | ||
| gap: 2 * $indent-amount; | ||
| } | ||
|
|
||
| @include mq($until: tablet) { | ||
| &--border-top { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| @include mq($from: tablet) { | ||
| &--border-top { | ||
| display: block; | ||
| border-top: 1px solid $grey-mid; | ||
| padding-top: 3em; | ||
| margin: 0 auto; | ||
| max-width: $content-max-width; | ||
| } | ||
| } | ||
|
|
||
| &:last-of-type { | ||
| margin-bottom: 3em; | ||
| } | ||
|
|
||
| &__image { | ||
| height: 10em; | ||
| width: auto; | ||
| } | ||
|
|
||
| &__left { | ||
| flex: 0 1 45%; | ||
| padding-block: 2em; | ||
| min-height: 8em; | ||
| background-color: $yellow; | ||
| padding: 1em; | ||
| align-content: center; | ||
| text-align: center; | ||
| } | ||
|
|
||
| &__right { | ||
| flex: 0 1 55%; | ||
| align-items: flex-start; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding-right: $indent-amount; | ||
| padding-bottom: $indent-amount; | ||
|
|
||
| @include mq($until: tablet) { | ||
| padding-left: $indent-amount; | ||
| } | ||
|
|
||
| @include mq($from: tablet) { | ||
| padding-top: $indent-amount; | ||
| } | ||
|
|
||
| p, | ||
| h2 { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| label { | ||
| font-weight: bold; | ||
| display: block; | ||
| } | ||
|
|
||
| label, | ||
| input { | ||
| margin-bottom: .4em; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| require "rails_helper" | ||
|
|
||
| RSpec.describe CallsToAction::AdviserComponent, type: :component do | ||
| let(:title) { "Some Title" } | ||
| let(:text) { "Lorum ipsum dollar" } | ||
| let(:image) { "static/images/adviser-black.png" } | ||
| let(:link_text) { "Find out more about advisers" } | ||
| let(:link_target) { "/somewhere" } | ||
|
|
||
| describe "rendering the component" do | ||
| let(:kwargs) { { title: title, text: text, image: image, link_text: link_text, link_target: link_target } } | ||
| let(:component) { described_class.new(**kwargs) } | ||
|
|
||
| before { render_inline(component) { content } } | ||
|
|
||
| specify "renders the adviser component" do | ||
| expect(page).to have_css(".adviser") | ||
| end | ||
|
|
||
| specify "the image is present" do | ||
| image_element = page.find("img") | ||
|
|
||
| expect(image_element[:src]).to match(Regexp.new(File.basename(image, ".*"))) | ||
| expect(image_element[:alt]).to eql("") | ||
| end | ||
|
|
||
| specify "the title is present" do | ||
| expect(page).to have_css(".heading-l", text: title) | ||
| end | ||
|
|
||
| specify "the text is present" do | ||
| expect(page).to have_css("p.adviser__text", text: text) | ||
| end | ||
|
|
||
| specify "the link is present" do | ||
| expect(page).to have_link(link_text, href: link_target) | ||
| end | ||
|
|
||
| context "when no title is present" do | ||
| let(:kwargs) { { text: text, image: image, link_text: link_text, link_target: link_target } } | ||
|
|
||
| specify "it should use the default title" do | ||
| expect(page).to have_css(".heading-l", text: "Get free one-to-one support") | ||
| end | ||
| end | ||
|
|
||
| context "when no link is present" do | ||
| let(:link_text) { nil } | ||
| let(:link_target) { nil } | ||
|
|
||
| it { expect(page).not_to have_css("a") } | ||
| end | ||
|
|
||
| context "when no text is present" do | ||
| let(:text) { nil } | ||
|
|
||
| specify "no paragraph tag should be rendered" do | ||
| expect(page).not_to have_css("p.adviser__text") | ||
| end | ||
| end | ||
| end | ||
| end |