Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add optional Welsh language support to the Character Count component #1038

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions package/components/character-count/macro-options.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,5 +79,11 @@
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the textarea."
},
{
"name": "welsh",
"type": "boolean",
"required": false,
"description": "If set to true the count message is displayed in Welsh (default is in English)."
}
]
110 changes: 102 additions & 8 deletions src/components/character-count/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ Find out when to use the character count component in your service in the [GOV.U
</div>

<span id="more-detail-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters

You can enter up to 10 characters

</span>
</div>

Expand Down Expand Up @@ -65,7 +67,9 @@ Find out when to use the character count component in your service in the [GOV.U
</div>

<span id="with-hint-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters

You can enter up to 10 characters

</span>
</div>

Expand Down Expand Up @@ -105,7 +109,9 @@ Find out when to use the character count component in your service in the [GOV.U
</div>

<span id="with-default-value-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 100 characters

You can enter up to 100 characters

</span>
</div>

Expand Down Expand Up @@ -147,7 +153,9 @@ Find out when to use the character count component in your service in the [GOV.U
</div>

<span id="exceeding-characters-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters

You can enter up to 10 characters

</span>
</div>

Expand Down Expand Up @@ -185,7 +193,9 @@ Find out when to use the character count component in your service in the [GOV.U
</div>

<span id="custom-rows-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters

You can enter up to 10 characters

</span>
</div>

Expand Down Expand Up @@ -223,7 +233,9 @@ Find out when to use the character count component in your service in the [GOV.U
</div>

<span id="textarea-with-page-heading-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters

You can enter up to 10 characters

</span>
</div>

Expand Down Expand Up @@ -258,7 +270,9 @@ Find out when to use the character count component in your service in the [GOV.U
</div>

<span id="word-count-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 words

You can enter up to 10 words

</span>
</div>

Expand Down Expand Up @@ -292,7 +306,9 @@ Find out when to use the character count component in your service in the [GOV.U
</div>

<span id="with-threshold-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters

You can enter up to 10 characters

</span>
</div>

Expand All @@ -310,6 +326,84 @@ Find out when to use the character count component in your service in the [GOV.U
}
}) }}

### Character count (Cymraeg)

[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/(Cymraeg)/preview)

#### Markup

<div class="govuk-character-count" data-module="character-count" data-maxlength="10" data-welsh="true">

<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label" for="textarea-in-welsh">
Cyfeiriad llawn
</label>

</h1>

<textarea class="govuk-textarea js-character-count " id="textarea-in-welsh" name="address-in-welsh" rows="5"></textarea>
</div>

<span id="textarea-in-welsh-info" class="govuk-hint govuk-character-count__message" aria-live="polite">

Mi cewch cofnodi fyny at 10 cymeriad

</span>
</div>

#### Macro

{% from "character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
"id": "textarea-in-welsh",
"name": "address-in-welsh",
"maxlength": 10,
"welsh": true,
"label": {
"text": "Cyfeiriad llawn",
"isPageHeading": true
}
}) }}

### Character count with word count (Cymraeg)

[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-word-count-(Cymraeg)/preview)

#### Markup

<div class="govuk-character-count" data-module="character-count" data-maxwords="10" data-welsh="true">

<div class="govuk-form-group">
<label class="govuk-label" for="word-count-in-welsh">
Cyfeiriad llawn
</label>

<textarea class="govuk-textarea js-character-count " id="word-count-in-welsh" name="word-count-in-welsh" rows="5"></textarea>
</div>

<span id="word-count-in-welsh-info" class="govuk-hint govuk-character-count__message" aria-live="polite">

Mi cewch cofnodi fyny at 10 gair

</span>
</div>

#### Macro

{% from "character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
"id": "word-count-in-welsh",
"name": "word-count-in-welsh",
"maxwords": 10,
"welsh": true,
"label": {
"text": "Cyfeiriad llawn"
}
}) }}

## Requirements

### Build tool configuration
Expand Down
33 changes: 20 additions & 13 deletions src/components/character-count/character-count.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ function CharacterCount ($module) {

CharacterCount.prototype.defaults = {
characterCountAttribute: 'data-maxlength',
wordCountAttribute: 'data-maxwords'
wordCountAttribute: 'data-maxwords',
welshAttribute: 'data-welsh'
}

// Initialize component
Expand All @@ -26,12 +27,26 @@ CharacterCount.prototype.init = function () {

// Determine the limit attribute (characters or words)
var countAttribute = this.defaults.characterCountAttribute
var units = 'characters'
if (this.options.maxwords) {
countAttribute = this.defaults.wordCountAttribute
units = 'words'
}

// Save the element limit
this.maxLength = $module.getAttribute(countAttribute)
this.rawUnderLimitMessage = 'You have ? ' + units + ' remaining'
this.rawOverLimitMessage = 'You have ? ' + units + ' too many'

if ($module.getAttribute(this.defaults.welshAttribute)) {
units = 'cymeriad'
if (this.options.maxwords) {
units = 'gair'
}

this.rawUnderLimitMessage = 'Mae ganddoch ? ' + units + ' yn weddill'
this.rawOverLimitMessage = 'Mae ganddoch ? ' + units + ' yn ormod'
}

// Check for limit
if (!this.maxLength) {
Expand Down Expand Up @@ -138,6 +153,8 @@ CharacterCount.prototype.updateCountMessage = function () {
var currentLength = this.count(countElement.value)
var maxLength = this.maxLength
var remainingNumber = maxLength - currentLength
var rawUnderLimitMessage = this.rawUnderLimitMessage
var rawOverLimitMessage = this.rawOverLimitMessage

// Set threshold if presented in options
var thresholdPercent = options.threshold ? options.threshold : 0
Expand All @@ -160,18 +177,8 @@ CharacterCount.prototype.updateCountMessage = function () {
}

// Update message
var charVerb = 'remaining'
var charNoun = 'character'
var displayNumber = remainingNumber
if (options.maxwords) {
charNoun = 'word'
}
charNoun = charNoun + ((remainingNumber === -1 || remainingNumber === 1) ? '' : 's')

charVerb = (remainingNumber < 0) ? 'too many' : 'remaining'
displayNumber = Math.abs(remainingNumber)

countMessage.innerHTML = 'You have ' + displayNumber + ' ' + charNoun + ' ' + charVerb
var displayNumber = Math.abs(remainingNumber)
countMessage.innerHTML = remainingNumber < 0 ? rawOverLimitMessage.replace('?', displayNumber) : rawUnderLimitMessage.replace('?', displayNumber)
}

CharacterCount.prototype.handleFocus = function () {
Expand Down
19 changes: 19 additions & 0 deletions src/components/character-count/character-count.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -135,3 +135,22 @@ examples:
threshold: 75
label:
text: Full address

- name: (Cymraeg)
data:
id: textarea-in-welsh
name: address-in-welsh
maxlength: 10
welsh: true
label:
text: Cyfeiriad llawn
isPageHeading: true

- name: with word count (Cymraeg)
data:
id: word-count-in-welsh
name: word-count-in-welsh
maxwords: 10
welsh: true
label:
text: Cyfeiriad llawn
9 changes: 7 additions & 2 deletions src/components/character-count/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
<div class="govuk-character-count" data-module="character-count"
{%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
{%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %}
{%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}>
{%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}
{%- if params.welsh %} data-welsh="{{ params.welsh }}"{% endif %}>
{{ govukTextarea({
id: params.id,
name: params.name,
Expand All @@ -27,6 +28,10 @@
attributes: params.attributes
}) }}
<span id="{{ params.id }}-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to {{ params.maxlength or params.maxwords }} {{'words' if params.maxwords else 'characters' }}
{% if params.welsh %}
Mi cewch cofnodi fyny at {{ params.maxlength or params.maxwords }} {{'gair' if params.maxwords else 'cymeriad' }}
{% else %}
You can enter up to {{ params.maxlength or params.maxwords }} {{'words' if params.maxwords else 'characters' }}
{% endif %}
</span>
</div>
12 changes: 12 additions & 0 deletions src/components/character-count/template.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,18 @@ describe('Character count', () => {
})
})

describe('when it is set to Welsh', () => {
it('renders with welsh data attribute', () => {
const $ = render('character-count', {
id: 'character-count-in-welsh',
welsh: true
})

const $component = $('.govuk-character-count')
expect($component.attr('data-welsh')).toEqual('true')
})
})

describe('with dependant components', () => {
it('have correct nesting order', () => {
const $ = render('character-count', {
Expand Down