Use prefix/suffix styles from govuk-frontend

Use govuk-frontend styles [1] as they've been moved upstream [2]

[1] https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/input/_index.scss#L94-L177
[2] alphagov/govuk-frontend#1816

app/assets/stylesheets/govuk_publishing_components/components/_input.scss

@@ -18,49 +18,3 @@
     padding-left: govuk-spacing(6);
   }
 }
-
-.gem-c-input__wrapper {
-  display: flex;
-  display: -ms-flexbox;
-
-  .gem-c-input {
-    display: inline-block;
-    flex: 0 1 auto;
-  }
-
-  .gem-c-input:focus {
-    z-index: 1; // increase z-index on focus so it appears over the suffix
-  }
-}
-
-.gem-c-input__prefix,
-.gem-c-input__suffix {
-  @include govuk-font($size: 19);
-
-  background-color: govuk-colour("light-grey", $legacy: "grey-3");
-  border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-  box-sizing: border-box;
-  cursor: default; // emphasise non-editable status of prefixes and suffixes
-  display: inline-block;
-  flex: 0 0 auto;
-  height: 40px;
-  margin-top: 0;
-  min-width: 40px;
-  padding: govuk-spacing(1);
-  text-align: center;
-  white-space: nowrap;
-  width: auto;
-
-  @if $govuk-typography-use-rem {
-    height: govuk-px-to-rem(40px);
-    min-width: govuk-px-to-rem(40px);
-  }
-}
-
-.gem-c-input__prefix {
-  border-right: 0;
-}
-
-.gem-c-input__suffix {
-  border-left: 0;
-}

app/views/govuk_publishing_components/components/_input.html.erb

@@ -107,17 +107,17 @@
   %>
 
   <% if prefix && suffix %>
-    <%= tag.div class: "gem-c-input__wrapper" do %>
+    <%= tag.div class: "govuk-input__wrapper" do %>
       <% # The line below relies on in-line styling for legacy browsers and it's whitespace-sensitive %>
-      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
+      <%= tag.span prefix, class: "govuk-input__prefix", aria: { hidden: true } %><%= input_tag %><%= tag.span suffix, class: "govuk-input__suffix", aria: { hidden: true } %>
     <% end %>
   <% elsif prefix %>
-    <%= tag.div class: "gem-c-input__wrapper" do %>
-      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %>
+    <%= tag.div class: "govuk-input__wrapper" do %>
+      <%= tag.span prefix, class: "govuk-input__prefix", aria: { hidden: true } %><%= input_tag %>
     <% end %>
   <% elsif suffix %>
-    <%= tag.div class: "gem-c-input__wrapper" do %>
-      <%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
+    <%= tag.div class: "govuk-input__wrapper" do %>
+      <%= input_tag %><%= tag.span suffix, class: "govuk-input__suffix", aria: { hidden: true } %>
     <% end %>
   <% else %>
     <%= input_tag %>

spec/components/input_spec.rb

@@ -241,8 +241,8 @@ def component_name
       name: "cost-per-item",
       prefix: "£",
     )
-    assert_select ".gem-c-input__wrapper .gem-c-input[name=cost-per-item]"
-    assert_select ".gem-c-input__wrapper .gem-c-input__prefix[aria-hidden=true]", text: "£"
+    assert_select ".govuk-input__wrapper .gem-c-input[name=cost-per-item]"
+    assert_select ".govuk-input__wrapper .govuk-input__prefix[aria-hidden=true]", text: "£"
   end
 
   it "renders text input with suffix" do
@@ -251,7 +251,7 @@ def component_name
       name: "lead-times",
       suffix: "days",
     )
-    assert_select ".gem-c-input__wrapper .gem-c-input[name=lead-times]"
-    assert_select ".gem-c-input__wrapper .gem-c-input__suffix[aria-hidden=true]", text: "days"
+    assert_select ".govuk-input__wrapper .gem-c-input[name=lead-times]"
+    assert_select ".govuk-input__wrapper .govuk-input__suffix[aria-hidden=true]", text: "days"
   end
 end