From 3df6e536ea8752eec12b46f350943048eee45158 Mon Sep 17 00:00:00 2001 From: baarkerlounger Date: Tue, 30 Nov 2021 17:23:52 +0000 Subject: [PATCH] View component init --- Gemfile | 1 + Gemfile.lock | 1 + .../tab_navigation_component.html.erb | 13 ++++ app/components/tab_navigation_component.rb | 13 ++++ app/javascript/styles/_tab-navigation.scss | 76 +++++++++++++++++++ app/javascript/styles/application.scss | 1 + app/views/organisations/_details.html.erb | 8 ++ app/views/organisations/show.html.erb | 36 +-------- 8 files changed, 117 insertions(+), 32 deletions(-) create mode 100644 app/components/tab_navigation_component.html.erb create mode 100644 app/components/tab_navigation_component.rb create mode 100644 app/javascript/styles/_tab-navigation.scss create mode 100644 app/views/organisations/_details.html.erb diff --git a/Gemfile b/Gemfile index 303014731..e274a06c1 100644 --- a/Gemfile +++ b/Gemfile @@ -35,6 +35,7 @@ gem "json-schema" gem "devise" gem "turbo-rails", "~> 0.8" gem "uk_postcode" +gem "view_component" group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console diff --git a/Gemfile.lock b/Gemfile.lock index b64e1380e..b986e007b 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -438,6 +438,7 @@ DEPENDENCIES turbo-rails (~> 0.8) tzinfo-data uk_postcode + view_component web-console (>= 4.1.0) webpacker (~> 5.0) diff --git a/app/components/tab_navigation_component.html.erb b/app/components/tab_navigation_component.html.erb new file mode 100644 index 000000000..a3f4f20fc --- /dev/null +++ b/app/components/tab_navigation_component.html.erb @@ -0,0 +1,13 @@ + diff --git a/app/components/tab_navigation_component.rb b/app/components/tab_navigation_component.rb new file mode 100644 index 000000000..82b16468e --- /dev/null +++ b/app/components/tab_navigation_component.rb @@ -0,0 +1,13 @@ +class TabNavigationComponent < ViewComponent::Base + attr_reader :items + + def initialize(items:) + @items = items + end + + def strip_query(url) + url = Addressable::URI.parse(url) + url.query_values = nil + url.to_s + end +end diff --git a/app/javascript/styles/_tab-navigation.scss b/app/javascript/styles/_tab-navigation.scss new file mode 100644 index 000000000..ea3e85de6 --- /dev/null +++ b/app/javascript/styles/_tab-navigation.scss @@ -0,0 +1,76 @@ +.app-tab-navigation { + @include govuk-font(19, $weight: bold); + @include govuk-responsive-margin(6, "bottom"); +} + +.app-tab-navigation__list { + @include govuk-clearfix; + // left: govuk-spacing(-3); + list-style: none; + margin: 0; + padding: 0; + position: relative; + // right: govuk-spacing(-3); + width: calc(100% + #{govuk-spacing(6)}); + + @include govuk-media-query($from: tablet) { + box-shadow: inset 0 -1px 0 $govuk-border-colour; + } +} + +.app-tab-navigation__item { + box-sizing: border-box; + display: block; + line-height: 40px; + height: 40px; + padding: 0 govuk-spacing(3); + + @include govuk-media-query($from: tablet) { + box-shadow: none; + display: block; + float: left; + line-height: 50px; + height: 50px; + padding: 0 govuk-spacing(3); + position: relative; + } +} + +.app-tab-navigation__item--current { + @include govuk-media-query($until: tablet) { + border-left: 4px solid $govuk-link-colour; + padding-left: 11px; + } + + @include govuk-media-query($from: tablet) { + border-bottom: 4px solid $govuk-link-colour; + padding-left: govuk-spacing(3); + } +} + +.app-tab-navigation__link { + @include govuk-link-common; + @include govuk-link-style-no-visited-state; + @include govuk-link-style-no-underline; + @include govuk-typography-weight-bold; + + &:not(:focus):hover { + color: $govuk-link-colour; + } + + // Extend the touch area of the link to the list + &:after { + bottom: 0; + content: ""; + left: 0; + position: absolute; + right: 0; + top: 0; + } +} + +.app-tab-navigation__item--current .app-tab-navigation__link { + &:hover { + text-decoration: none; + } +} diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index 7e1158bd7..a5eda4f44 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -12,6 +12,7 @@ $govuk-image-url-function: frontend-image-url; @import "~govuk-frontend/govuk/all"; @import '_task-list'; +@import '_tab-navigation'; $govuk-global-styles: true; diff --git a/app/views/organisations/_details.html.erb b/app/views/organisations/_details.html.erb new file mode 100644 index 000000000..106d6316d --- /dev/null +++ b/app/views/organisations/_details.html.erb @@ -0,0 +1,8 @@ +<%= govuk_summary_list do |summary_list| %> + <% @organisation.display_attributes.each do |attr, val| %> + <%= summary_list.row do |row| + row.key { attr.to_s.humanize } + row.value { simple_format(val, {}, wrapper_tag: "div") } + end %> + <% end %> +<% end %> diff --git a/app/views/organisations/show.html.erb b/app/views/organisations/show.html.erb index fb8073e36..193c702bc 100644 --- a/app/views/organisations/show.html.erb +++ b/app/views/organisations/show.html.erb @@ -9,35 +9,7 @@ Your Organisation -<%= govuk_tabs(title: "Your Organisation") do |component| %> - <%= component.tab(label: "Details") do |tab| %> - <%= govuk_summary_list do |summary_list| %> - <% @organisation.display_attributes.each do |attr, val| %> - <%= summary_list.row do |row| - row.key { attr.to_s.humanize } - row.value { simple_format(val, {}, wrapper_tag: "div") } - end %> - <% end %> - <% end %> - <% end %> - <%= component.tab(label: "Users") do |tab| %> - <%= govuk_table do |table| %> - <%= table.head do |head| %> - <%= head.row do |row| - row.cell(header: true, text: "Name and email adress") - row.cell(header: true, text: "Organisation and role") - row.cell(header: true, text: "Last logged in") - end %> - <% end %> - <% @organisation.users.each do |user| %> - <%= table.body do |body| %> - <%= body.row do |row| - row.cell(text: simple_format(user.name_email_display, {}, wrapper_tag: "div")) - row.cell(text: simple_format(user.org_role_display, {}, wrapper_tag: "div")) - row.cell(text: user.last_sign_in_at_display ) - end %> - <% end %> - <% end %> - <% end %> - <% end %> -<% end %> +<%= render TabNavigationComponent.new(items: [ + { name: t('Details'), partial: '_details' }, + { name: t('Users'), url: '#' }, +]) %>