224 create new table component

app/assets/javascripts/application.js

@@ -1,4 +1,5 @@
 //= require_directory ./modules
+//= require_directory ./components
 
 //= require govuk_publishing_components/dependencies
 //= require govuk_publishing_components/all_components

app/assets/javascripts/components/mainstream-table.js

@@ -0,0 +1,97 @@
+(function (Modules) {
+  function MainstreamTable ($module) {
+    this.$module = $module
+    this.sectionClass = 'govuk-accordion__section'
+    this.sectionExpandedClass = 'govuk-accordion__section--expanded'
+    this.sectionInnerContentClass = 'govuk-accordion__section-content'
+    this.sectionButton = '.govuk-accordion__section-button'
+    this.sections = this.$module.querySelectorAll('.govuk-accordion__section')
+    this.openSections = 0
+    this.numSections = this.sections.length
+  }
+
+  MainstreamTable.prototype.init = function () {
+    // Add Show/Hide All button to DOM
+    this.$module.querySelector('.govuk-table__header--controls').innerHTML = '<button type="button" class="govuk-accordion__show-all gem-c-accordion__show-all" aria-expanded="false"><span class="govuk-accordion-nav__chevron govuk-accordion-nav__chevron--down"></span><span class="govuk-accordion__show-all-text">Show all</span></button>'
+
+    // Add Event listener for Show All button
+    this.$module.querySelector('.govuk-accordion__show-all').addEventListener('click', this.toggleAllSections.bind(this))
+
+    // Add Event listeners for sections buttons
+    this.setUpSections()
+  }
+
+  // Adds event listeners to set state of the "Show/Hide all" button when section buttons are clicked
+  MainstreamTable.prototype.setUpSections = function () {
+    this.sections.forEach(function (section) {
+      section.querySelector('.govuk-accordion__section-heading').addEventListener('click', function () {
+        if (section.classList.contains('govuk-accordion__section--expanded')) {
+          this.openSections--
+
+          if (this.openSections === this.numSections - 1) {
+            this.toggleShowAllControls()
+          }
+        } else {
+          this.openSections++
+
+          if (this.openSections === this.numSections) {
+            this.toggleShowAllControls()
+          }
+        }
+      }.bind(this))
+    }.bind(this))
+  }
+
+  // Toggles the "Show/Hide all" button
+  MainstreamTable.prototype.toggleShowAllControls = function () {
+    var showAllControls = this.$module.querySelector('.govuk-accordion__show-all')
+
+    if (showAllControls.getAttribute('aria-expanded') === 'true') {
+      showAllControls.querySelector('.govuk-accordion__show-all-text').textContent = 'Show all'
+      showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.remove('govuk-accordion-nav__chevron--up')
+      showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.add('govuk-accordion-nav__chevron--down')
+      showAllControls.setAttribute('aria-expanded', 'false')
+    } else {
+      showAllControls.querySelector('.govuk-accordion__show-all-text').textContent = 'Hide all'
+      showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.remove('govuk-accordion-nav__chevron--down')
+      showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.add('govuk-accordion-nav__chevron--up')
+      showAllControls.setAttribute('aria-expanded', 'true')
+    }
+  }
+
+  MainstreamTable.prototype.toggleAllSections = function () {
+    var controlAllState = this.$module.querySelector('.govuk-accordion__show-all').getAttribute('aria-expanded')
+    var sections = this.$module.querySelectorAll('.' + this.sectionClass)
+
+    // Open and close all sections
+    sections.forEach(function (section) {
+      var button = section.querySelector('button')
+
+      if (section.classList.contains(this.sectionExpandedClass)) {
+        if (controlAllState === 'true') {
+          section.classList.remove(this.sectionExpandedClass)
+          section.querySelector('.' + this.sectionInnerContentClass).hidden = 'until-found'
+          button.querySelector('.govuk-accordion-nav__chevron').classList.add('govuk-accordion-nav__chevron--down')
+          button.querySelector('.govuk-accordion-nav__chevron').classList.remove('govuk-accordion-nav__chevron--up')
+          button.querySelector('.govuk-accordion__section-toggle-text').textContent = 'Show'
+          button.setAttribute('aria-expanded', 'false')
+          this.openSections = 0
+        }
+      } else {
+        if (controlAllState === 'false') {
+          section.classList.add(this.sectionExpandedClass)
+          section.querySelector('.' + this.sectionInnerContentClass).hidden = ''
+          button.querySelector('.govuk-accordion-nav__chevron').classList.remove('govuk-accordion-nav__chevron--down')
+          button.querySelector('.govuk-accordion-nav__chevron').classList.add('govuk-accordion-nav__chevron--up')
+          button.querySelector('.govuk-accordion__section-toggle-text').textContent = 'Hide'
+          button.setAttribute('aria-expanded', 'true')
+          this.openSections = this.numSections
+        }
+      }
+    }.bind(this))
+
+    this.toggleShowAllControls()
+  }
+
+  Modules.MainstreamTable = MainstreamTable
+})(window.GOVUK.Modules)

app/assets/stylesheets/application.scss

@@ -2,4 +2,6 @@ $govuk-page-width: 1140px;
 
 // GOVUK Design System
 @import "govuk_publishing_components/all_components";
-@import "downtimes";
+
+@import "downtimes";
+@import "components/table";

app/assets/stylesheets/components/table.scss

@@ -0,0 +1,152 @@
+.mainstream-table {
+  .govuk-accordion__show-all {
+    display: none;
+
+    .js-enabled & {
+      display: block;
+      margin: 0;
+      padding: 0;
+      line-height: 1;
+      float: right;
+    }
+  }
+
+  .govuk-accordion {
+    .js-enabled & {
+      border-bottom: 0;
+    }
+
+    .govuk-accordion__section-heading {
+      button {
+        border: none;
+        padding: 0;
+      }
+    }
+  }
+
+  .govuk-accordion__section-heading-text {
+    display: none;
+
+    .js-enabled & {
+      display: none;
+    }
+  }
+
+  .govuk-table__body {
+    position: relative;
+
+    .title {
+      @include govuk-responsive-margin(0)
+    }
+
+    .updated {
+      @include govuk-responsive-margin(2, "top");
+
+      display: block;
+      color: $govuk-secondary-text-colour;
+    }
+  }
+
+  .govuk-table__row {
+    .govuk-table__cell {
+      .status {
+        display: inline-block;
+        padding: govuk-spacing(1) govuk-spacing(2);
+
+        &--amends-needed {
+          background-color: govuk-tint(govuk-colour("red"), 75%);
+        }
+
+        &--archived {
+          background-color: govuk-tint(govuk-colour("dark-grey"), 85%);
+        }
+
+        &--draft {
+          background-color: govuk-tint(govuk-colour("yellow"), 75%);
+        }
+
+        &--out-for-fact-check {
+          background-color: govuk-tint(govuk-colour("bright-purple"), 85%);
+        }
+
+        &--fact-check-received {
+          background-color: govuk-tint(govuk-colour("red"), 75%);
+        }
+
+        &--ready {
+          background-color: govuk-tint(govuk-colour("blue"), 60%);
+        }
+
+        &--scheduled-for-publishing {
+          background-color: govuk-tint(govuk-colour("turquoise"), 80%);
+        }
+
+        &--published {
+          background-color: govuk-tint(govuk-colour("green"), 80%);
+        }
+
+        &--awaiting-2i {
+          background-color: govuk-tint(govuk-colour("blue"), 70%);
+        }
+
+        &--in-2i {
+          background-color: govuk-tint(govuk-colour("dark-grey"), 85%);
+        }
+      }
+    }
+
+    &:nth-of-type(2) {
+      background: govuk-colour("light-grey");
+
+      .govuk-table__cell {
+        border-bottom: 0;
+        padding: 0 govuk-spacing(2);
+
+        .govuk-accordion__section-content {
+          position: relative;
+
+          & > button {
+            position: absolute;
+            top: govuk-spacing(2);
+            right: 0;
+          }
+        }
+      }
+
+      .govuk-accordion {
+        margin-bottom: 0 !important;
+      }
+
+      .govuk-accordion__section {
+        padding-top: 0;
+      }
+
+      .govuk-summary-list,
+      .gem-c-summary__block {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .govuk-accordion__controls {
+    display: none;
+  }
+
+  .govuk-accordion__section {
+    &.govuk-accordion__section--expanded {
+      border-bottom: 1px solid #b1b4b6;
+    }
+  }
+
+  .govuk-accordion__section-header {
+    position: absolute;
+    top: govuk-spacing(2);
+    right: 0;
+  }
+
+  .govuk-accordion__section-content {
+    .js-enabled & {
+      padding: 0;
+    }
+  }
+}

app/helpers/table_helper.rb

@@ -0,0 +1,67 @@
+module TableHelper
+  # This is part of the Public API of this gem
+  # Any non-backwards compatible changes to the signature will require a major version change
+  def self.helper(context, caption = nil, opt = {})
+    builder = TableBuilder.new(context.tag)
+
+    classes = %w[gem-c-table govuk-table mainstream-table]
+    classes << "govuk-table--sortable" if opt[:sortable]
+
+    caption_classes = %w[govuk-table__caption]
+    caption_classes << opt[:caption_classes] if opt[:caption_classes]
+
+    context.tag.table class: classes, id: opt[:table_id], data: { module: "mainstream-table" } do
+      context.concat context.tag.caption caption, class: caption_classes
+      yield(builder)
+    end
+  end
+
+  class TableBuilder
+    include ActionView::Helpers::UrlHelper
+    include ActionView::Helpers::TagHelper
+
+    attr_reader :tag
+
+    def initialize(tag)
+      @tag = tag
+    end
+
+    def head
+      tag.thead class: "govuk-table__head" do
+        tag.tr class: "govuk-table__row" do
+          yield(self)
+        end
+      end
+    end
+
+    def body
+      tag.tbody class: "govuk-table__body" do
+        yield(self)
+      end
+    end
+
+    def row
+      tag.tr class: "govuk-table__row js-govuk-table__row" do
+        yield(self)
+      end
+    end
+
+    def header(str, opt = {})
+      classes = %w[govuk-table__header]
+      classes << "govuk-table__header--#{opt[:format]}" if opt[:format]
+      classes << "govuk-table__header--active" if opt[:sort_direction]
+      link_classes = %w[app-table__sort-link]
+      link_classes << "app-table__sort-link--#{opt[:sort_direction]}" if opt[:sort_direction]
+      str = link_to str, opt[:href], class: link_classes, data: opt[:data_attributes] if opt[:href]
+      tag.th str, class: classes, scope: opt[:scope] || "col"
+    end
+
+    def cell(str, opt = {})
+      classes = %w[govuk-table__cell]
+      classes << "govuk-table__cell--#{opt[:format]}" if opt[:format]
+      classes << "govuk-table__cell--empty" unless str
+      str ||= "Not set"
+      tag.td str, class: classes, colspan: opt[:colspan]
+    end
+  end
+end