Merge pull request #4399 from alphagov/chat-entry-component-design-ch…

…anges Chat entry component design changes
alphagov · Nov 14, 2024 · bb69878 · bb69878
2 parents 31e4a9e + 3efae98
commit bb69878
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@
 
 ## Unreleased
 
+* Chat entry component design changes ([PR #4399](https://github.com/alphagov/govuk_publishing_components/pull/4399))
+
 ## 45.3.0
 
 * Enhance Youtube without cookies ([PR #4388](https://github.com/alphagov/govuk_publishing_components/pull/4388))

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chat-entry.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chat-entry.scss
@@ -3,6 +3,8 @@
 .gem-c-chat-entry {
   display: flex;
   align-items: flex-start;
+  background-color: govuk-tint(govuk-colour("blue"), 90%);
+  padding: govuk-spacing(4);
 }
 
 .gem-c-chat-entry--border-top {
@@ -17,14 +19,9 @@
 
 .gem-c-chat-entry__image {
   flex-shrink: 0;
-  height: 104px;
+  height: 40px;
   margin-right: govuk-spacing(3);
-  width: 104px;
-
-  @include govuk-media-query($from: tablet) {
-    height: 80px;
-    width: 80px;
-  }
+  width: 40px;
 }
 
 .gem-c-chat-entry__heading {

diff --git a/app/views/govuk_publishing_components/components/_chat_entry.html.erb b/app/views/govuk_publishing_components/components/_chat_entry.html.erb
@@ -28,22 +28,17 @@
 %>
 
 <%= tag.div(**component_helper.all_attributes) do %>
-  <svg class="gem-c-chat-entry__image" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-    <rect width="100%" height="100%" fill="#D2E2F1" />
-    <path d="M37.5733 65.7452L51.6131 77.9999H27.9707L37.5733 65.7452Z" fill="#1D70B8" />
-    <path d="M52 78C66.3594 78 78 66.3594 78 52C78 37.6406 66.3594 26 52 26C37.6406 26 26 37.6406 26 52C26 66.3594 37.6406 78 52 78Z" fill="#1D70B8" />
-    <mask id="mask0_48346_4836" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="40" y="58" width="24" height="10">
-      <rect x="41.2962" y="59.1165" width="21.4029" height="6.98153" fill="#D9D9D9" stroke="#F499BE" stroke-width="1.89313" />
+  <svg class="gem-c-chat-entry__image" width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+    <path d="M11.5713 39.7452L25.6112 51.9999H1.96875L11.5713 39.7452Z" fill="#1D70B8"/>
+    <path d="M26 52C40.3594 52 52 40.3594 52 26C52 11.6406 40.3594 0 26 0C11.6406 0 0 11.6406 0 26C0 40.3594 11.6406 52 26 52Z" fill="#1D70B8"/>
+    <mask id="mask0_51852_3730" maskUnits="userSpaceOnUse" x="14" y="32" width="24" height="10">
+      <rect x="15.2981" y="33.1165" width="21.4029" height="6.98153" fill="#D9D9D9" stroke="#F499BE" stroke-width="1.89313"/>
     </mask>
-    <g mask="url(#mask0_48346_4836)">
-      <path
-        d="M46.5668 60.156C47.8844 63.1549 51.3835 64.518 54.3824 63.2004C57.3813 61.8829 58.7443 58.3837 57.4268 55.3848C56.1093 52.3859 52.6101 51.0229 49.6112 52.3404C46.6123 53.658 45.2493 57.1571 46.5668 60.156Z"
-        stroke="#F499BE"
-        stroke-width="4.43733"
-      />
+    <g mask="url(#mask0_51852_3730)">
+      <path d="M20.5707 34.156C21.8883 37.1549 25.3874 38.518 28.3863 37.2004C31.3852 35.8829 32.7482 32.3837 31.4307 29.3848C30.1132 26.3859 26.614 25.0229 23.6151 26.3404C20.6162 27.658 19.2532 31.1571 20.5707 34.156Z" stroke="#F499BE" stroke-width="4.43733"/>
     </g>
-    <path d="M43.3401 39.3198L50.2778 51.515H36.4023L43.3401 39.3198Z" fill="#FFDD00" />
-    <circle cx="60.2488" cy="45.4078" r="6.10621" fill="#F47738" />
+    <path d="M17.3401 13.3198L24.2778 25.515H10.4023L17.3401 13.3198Z" fill="#FFDD00"/>
+    <circle cx="34.2507" cy="19.4078" r="6.10621" fill="#F47738"/>
   </svg>
 
   <div class="gem-c-chat-entry__description">

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -38,8 +38,8 @@ en:
       accessibility_link: Skip to "%{chart_heading}" data table
       accessibility_heading: Data table for "%{chart_heading}"
     chat_entry:
-      heading: Try GOV.UK Chat
-      description: Sign up to GOV.UK’s experimental new AI tool and find answers to your business questions
+      heading: Ask GOV.UK Chat
+      description: Get quick, tailored answers to your business questions with GOV.UK’s new AI tool
     checkboxes:
       or: or
     contents_list:

diff --git a/spec/components/chat_entry_spec.rb b/spec/components/chat_entry_spec.rb
@@ -9,8 +9,8 @@ def component_name
     render_component({})
 
     assert_select ".gem-c-chat-entry"
-    assert_select "h2.gem-c-chat-entry__heading [href]", href: "/chat", text: "Try GOV.UK Chat"
-    assert_select ".gem-c-chat-entry__description .govuk-body", text: "Sign up to GOV.UK’s experimental new AI tool and find answers to your business questions"
+    assert_select "h2.gem-c-chat-entry__heading [href]", href: "/chat", text: "Ask GOV.UK Chat"
+    assert_select ".gem-c-chat-entry__description .govuk-body", text: "Get quick, tailored answers to your business questions with GOV.UK’s new AI tool"
   end
 
   it "renders the chat entry component with a custom href, heading and description" do
@@ -30,7 +30,7 @@ def component_name
       heading_level: 3,
     })
 
-    assert_select "h3.gem-c-chat-entry__heading [href]", href: "/chat", text: "Try GOV.UK Chat"
+    assert_select "h3.gem-c-chat-entry__heading [href]", href: "/chat", text: "Ask GOV.UK Chat"
   end
 
   it "renders the chat entry component with a border top" do