Skip to content

Commit

Permalink
replace classes
Browse files Browse the repository at this point in the history
  • Loading branch information
Dilwoar Hussain committed Feb 4, 2021
1 parent b9d1a81 commit 8317225
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 54 deletions.
10 changes: 5 additions & 5 deletions app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
this.$downButtons = this.$module.querySelectorAll('.js-reorderable-list-down')

this.sortable = window.Sortable.create(this.$module, { // eslint-disable-line new-cap
chosenClass: 'app-c-reorderable-list__item--chosen',
dragClass: 'app-c-reorderable-list__item--drag',
chosenClass: 'gem-c-reorderable-list__item--chosen',
dragClass: 'gem-c-reorderable-list__item--drag',
onSort: function () {
this.updateOrderIndexes()
this.triggerEvent(this.$module, 'reorder-drag')
Expand Down Expand Up @@ -48,7 +48,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
}

ReorderableList.prototype.onClickUpButton = function (e) {
var item = e.target.closest('.app-c-reorderable-list__item')
var item = e.target.closest('.gem-c-reorderable-list__item')
var previousItem = item.previousElementSibling
if (item && previousItem) {
item.parentNode.insertBefore(item, previousItem)
Expand All @@ -66,7 +66,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
}

ReorderableList.prototype.onClickDownButton = function (e) {
var item = e.target.closest('.app-c-reorderable-list__item')
var item = e.target.closest('.gem-c-reorderable-list__item')
var nextItem = item.nextElementSibling
if (item && nextItem) {
item.parentNode.insertBefore(item, nextItem.nextElementSibling)
Expand All @@ -84,7 +84,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
}

ReorderableList.prototype.updateOrderIndexes = function () {
var $orderInputs = this.$module.querySelectorAll('.app-c-reorderable-list__actions input')
var $orderInputs = this.$module.querySelectorAll('.gem-c-reorderable-list__actions input')
$orderInputs.forEach(function (input, index) {
input.setAttribute('value', index + 1)
})
Expand Down
44 changes: 22 additions & 22 deletions app/assets/stylesheets/govuk_publishing_components/components/_reorderable-list.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.app-c-reorderable-list {
.gem-c-reorderable-list {
@include govuk-font(19, bold);

list-style-type: none;
Expand All @@ -12,25 +12,25 @@
}
}

.app-c-reorderable-list--numeric-list {
.gem-c-reorderable-list--numeric-list {
list-style-type: decimal;
padding-left: govuk-spacing(4);
}

.app-c-reorderable-list__item {
.gem-c-reorderable-list__item {
margin-bottom: govuk-spacing(3);
}

.app-c-reorderable-list__item--border {
.gem-c-reorderable-list__item--border {
border: 1px solid $govuk-border-colour;
padding: govuk-spacing(3);
}

.app-c-reorderable-list__item--border-bottom {
.gem-c-reorderable-list__item--border-bottom {
border-bottom: 1px solid $govuk-border-colour;
}

.app-c-reorderable-list__item--chosen {
.gem-c-reorderable-list__item--chosen {
background-color: govuk-colour('light-grey');
outline: 2px dotted $govuk-border-colour;

Expand All @@ -39,11 +39,11 @@
}
}

.app-c-reorderable-list__item--drag {
.gem-c-reorderable-list__item--drag {
background-color: govuk-colour('white');
list-style-type: none;

.app-c-reorderable-list__actions {
.gem-c-reorderable-list__actions {
visibility: hidden;
}

Expand All @@ -52,7 +52,7 @@
}
}

.app-c-reorderable-list__wrapper {
.gem-c-reorderable-list__wrapper {
display: block;

@include govuk-media-query($from: desktop) {
Expand All @@ -61,28 +61,28 @@
}
}

.app-c-reorderable-list__content,
.app-c-reorderable-list__actions {
.gem-c-reorderable-list__content,
.gem-c-reorderable-list__actions {
margin-bottom: govuk-spacing(2);
}

.app-c-reorderable-list__content {
.gem-c-reorderable-list__content {
@include govuk-media-query($from: desktop) {
flex: 0 1 auto;
min-width: 70%;
}
}

.app-c-reorderable-list__title {
.gem-c-reorderable-list__title {
margin: 0;
}

.app-c-reorderable-list__description {
.gem-c-reorderable-list__description {
@include govuk-font(16, regular);
margin: 0;
}

.app-c-reorderable-list__actions {
.gem-c-reorderable-list__actions {
display: block;

@include govuk-media-query($from: desktop) {
Expand All @@ -96,32 +96,32 @@
}

.js-enabled {
.app-c-reorderable-list__item {
.gem-c-reorderable-list__item {
@include govuk-media-query($from: desktop) {
cursor: move;
}
}

.app-c-reorderable-list__actions .govuk-form-group {
.gem-c-reorderable-list__actions .govuk-form-group {
display: none;
}

.app-c-reorderable-list__actions .gem-c-button {
.gem-c-reorderable-list__actions .gem-c-button {
display: inline-block;
margin-left: govuk-spacing(3);
width: 80px;
}

.app-c-reorderable-list__actions .gem-c-button:first-of-type {
.gem-c-reorderable-list__actions .gem-c-button:first-of-type {
margin-left: 0;

@include govuk-media-query($from: desktop) {
margin-left: govuk-spacing(3);
}
}

.app-c-reorderable-list__item:first-child .gem-c-button:first-of-type,
.app-c-reorderable-list__item:last-child .gem-c-button:last-of-type {
.gem-c-reorderable-list__item:first-child .gem-c-button:first-of-type,
.gem-c-reorderable-list__item:last-child .gem-c-button:last-of-type {
display: none;

@include govuk-media-query($from: desktop) {
Expand All @@ -130,7 +130,7 @@
}
}

.app-c-reorderable-list__item:first-child .gem-c-button:last-of-type {
.gem-c-reorderable-list__item:first-child .gem-c-button:last-of-type {
margin-left: 0;

@include govuk-media-query($from: desktop) {
Expand Down
20 changes: 10 additions & 10 deletions app/views/govuk_publishing_components/components/_reorderable_list.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@
border ||= false
border_bottom ||= false

classes = %w(app-c-reorderable-list)
classes << "app-c-reorderable-list--numeric-list" if numeric_list
classes = %w(gem-c-reorderable-list)
classes << "gem-c-reorderable-list--numeric-list" if numeric_list

list_item_classes = %w(app-c-reorderable-list__item)
list_item_classes << "app-c-reorderable-list__item--border" if border && !border_bottom
list_item_classes << "app-c-reorderable-list__item--border-bottom" if border_bottom
list_item_classes = %w(gem-c-reorderable-list__item)
list_item_classes << "gem-c-reorderable-list__item--border" if border && !border_bottom
list_item_classes << "gem-c-reorderable-list__item--border-bottom" if border_bottom
%>

<%= tag.ol class: classes, data: data_attributes do %>
<% items.each_with_index do |item, index| %>
<%= tag.li class: list_item_classes do %>
<%= tag.div class: "app-c-reorderable-list__wrapper" do %>
<%= tag.div class: "app-c-reorderable-list__content" do %>
<%= tag.p item[:title], class: "app-c-reorderable-list__title" %>
<%= tag.p item[:description], class: "app-c-reorderable-list__description" %>
<%= tag.div class: "gem-c-reorderable-list__wrapper" do %>
<%= tag.div class: "gem-c-reorderable-list__content" do %>
<%= tag.p item[:title], class: "gem-c-reorderable-list__title" %>
<%= tag.p item[:description], class: "gem-c-reorderable-list__description" %>
<% end %>
<%= tag.div class: "app-c-reorderable-list__actions" do %>
<%= tag.div class: "gem-c-reorderable-list__actions" do %>
<%= render "govuk_publishing_components/components/input", {
label: {
text: sanitize("Position<span class='govuk-visually-hidden'> for #{item[:title]}</span>")
Expand Down
34 changes: 17 additions & 17 deletions spec/javascripts/components/reorderable-list-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,25 @@ describe('Reorderable list component', function () {
beforeEach(function () {
container = document.createElement('div')
container.innerHTML =
'<ol class="app-c-reorderable-list" data-module="reorderable-list">' +
'<li class="app-c-reorderable-list__item">' +
'<div class="app-c-reorderable-list__wrapper">' +
'<div class="app-c-reorderable-list__content">' +
'<p class="app-c-reorderable-list__title">First attachment</p>' +
'<ol class="gem-c-reorderable-list" data-module="reorderable-list">' +
'<li class="gem-c-reorderable-list__item">' +
'<div class="gem-c-reorderable-list__wrapper">' +
'<div class="gem-c-reorderable-list__content">' +
'<p class="gem-c-reorderable-list__title">First attachment</p>' +
'</div>' +
'<div class="app-c-reorderable-list__actions">' +
'<div class="gem-c-reorderable-list__actions">' +
'<input name="new_order[]" value="1" class="gem-c-input govuk-input govuk-input--width-2" id="input-278a8924" type="text">' +
'<button type="button" class="js-reorderable-list-up">Up</button>' +
'<button type="button" class="js-reorderable-list-down">Down</button>' +
'</div>' +
'</div>' +
'</li>' +
'<li class="app-c-reorderable-list__item">' +
'<div class="app-c-reorderable-list__wrapper">' +
'<div class="app-c-reorderable-list__content">' +
'<p class="app-c-reorderable-list__title">Second attachment</p>' +
'<li class="gem-c-reorderable-list__item">' +
'<div class="gem-c-reorderable-list__wrapper">' +
'<div class="gem-c-reorderable-list__content">' +
'<p class="gem-c-reorderable-list__title">Second attachment</p>' +
'</div>' +
'<div class="app-c-reorderable-list__actions">' +
'<div class="gem-c-reorderable-list__actions">' +
'<input name="new_order[]" value="2" class="gem-c-input govuk-input govuk-input--width-2" id="input-278a8924" type="text">' +
'<button type="button" class="js-reorderable-list-up">Up</button>' +
'<button type="button" class="js-reorderable-list-down">Down</button>' +
Expand Down Expand Up @@ -126,8 +126,8 @@ describe('Reorderable list component', function () {
})

it('should swaps current item with next item', function () {
var firstItemTitle = document.querySelector('li:nth-child(1) .app-c-reorderable-list__title').textContent
var secondItemTitle = document.querySelector('li:nth-child(2) .app-c-reorderable-list__title').textContent
var firstItemTitle = document.querySelector('li:nth-child(1) .gem-c-reorderable-list__title').textContent
var secondItemTitle = document.querySelector('li:nth-child(2) .gem-c-reorderable-list__title').textContent
expect(firstItemTitle).toEqual('Second attachment')
expect(secondItemTitle).toEqual('First attachment')
})
Expand Down Expand Up @@ -156,8 +156,8 @@ describe('Reorderable list component', function () {
})

it('should swaps current item with next item', function () {
var firstItemTitle = document.querySelector('li:nth-child(1) .app-c-reorderable-list__title').textContent
var secondItemTitle = document.querySelector('li:nth-child(2) .app-c-reorderable-list__title').textContent
var firstItemTitle = document.querySelector('li:nth-child(1) .gem-c-reorderable-list__title').textContent
var secondItemTitle = document.querySelector('li:nth-child(2) .gem-c-reorderable-list__title').textContent
expect(firstItemTitle).toEqual('Second attachment')
expect(secondItemTitle).toEqual('First attachment')
})
Expand Down Expand Up @@ -186,8 +186,8 @@ describe('Reorderable list component', function () {
})

it('should swaps current item with previous item', function () {
var firstItemTitle = document.querySelector('li:nth-child(1) .app-c-reorderable-list__title').textContent
var secondItemTitle = document.querySelector('li:nth-child(2) .app-c-reorderable-list__title').textContent
var firstItemTitle = document.querySelector('li:nth-child(1) .gem-c-reorderable-list__title').textContent
var secondItemTitle = document.querySelector('li:nth-child(2) .gem-c-reorderable-list__title').textContent
expect(firstItemTitle).toEqual('Second attachment')
expect(secondItemTitle).toEqual('First attachment')
})
Expand Down

0 comments on commit 8317225

Please sign in to comment.