Skip to content

Commit

Permalink
Update type param to variant on various components (#3047)
Browse files Browse the repository at this point in the history
  • Loading branch information
rmccar committed Mar 6, 2024
1 parent 37384e1 commit 0b77bb0
Show file tree
Hide file tree
Showing 58 changed files with 312 additions and 339 deletions.
2 changes: 1 addition & 1 deletion src/components/access-code/_macro.njk
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@

{% if params.securityMessage %}
{% call onsPanel({
"type": "bare",
"variant": "bare",
"iconType": "lock",
"classes": "ons-u-mb-s"
}) %}
Expand Down
10 changes: 4 additions & 6 deletions src/components/access-code/example-access-code-error.njk
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,9 @@ layout: ~

{% block main %}
{% call onsPanel({
title: "There is a problem with this page",
type: "error"
})
%}

"title": "There is a problem with this page",
"variant": "error"
}) %}
{% from "components/list/_macro.njk" import onsList %}
{{
onsList({
Expand Down Expand Up @@ -66,7 +64,7 @@ layout: ~
{% set content %}
<p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
{% call onsPanel({
"type": "warn"
"variant": "warn"
}) %}
Someone in your household must still complete a study using this household access code
{% endcall %}
Expand Down
8 changes: 3 additions & 5 deletions src/components/access-code/example-access-code.njk
Original file line number Diff line number Diff line change
Expand Up @@ -43,18 +43,16 @@ layout: ~
{% set content %}
<p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
{% call onsPanel({
type: "warn"
})
%}
"variant": "warn"
}) %}
Someone in your household must still complete a study using this household access code
{% endcall %}
{% endset %}

{% call onsDetails({
"id": "details",
"title": "Need to answer separately from your household?"
})
%}
}) %}
{{ content | safe }}
{% endcall %}
{% endblock %}
12 changes: 6 additions & 6 deletions src/components/button/_macro.njk
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,12 @@
{% endif -%}
<span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
{%- if iconPosition == "after" %}
{{-
onsIcon({
"iconType": iconType,
"classes": 'ons-u-ml-xs'
})
-}}
{{-
onsIcon({
"iconType": iconType,
"classes": 'ons-u-ml-xs'
})
-}}
{% endif -%}
{% elif iconPosition == "only" -%}
{{-
Expand Down
18 changes: 9 additions & 9 deletions src/components/char-check-limit/_macro-options.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
| Name | Type | Required | Description |
| -------------------------- | ------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type | string | false | Set to “check” to add the character limit checker to the input |
| id | string | true | The HTML `id` of the component |
| limit | integer | true | The maximum number of characters allowed in the input |
| charCountPlural | string | true (unless `type` is set) | The string displayed when multiple characters can be entered before the limit is reached. Set `{x}` in the string to be replaced with the number, for example “You have {x} characters remaining”. |
| charCountSingular | string | true (unless `type` is set) | The string displayed when one more character can be entered before the limit is reached. Set `{x}` in the string to be replaced with the number, for example “You have {x} character remaining”. |
| charCountOverLimitPlural | string | false (unless `type` is set) | The string displayed when multiple characters over the limit have been entered. Set `{x}` in the string to be replaced with the number, for example “{x} characters too many”. |
| charCountOverLimitSingular | string | false (unless `type` is set) | The string displayed when one character over the limit has been entered. Set `{x}` in the string to be replaced with the number, for example “{x} character too many”. |
| Name | Type | Required | Description |
| -------------------------- | ------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| variant | string | false | Set to “check” to add the character limit checker to the input |
| id | string | true | The HTML `id` of the component |
| limit | integer | true | The maximum number of characters allowed in the input |
| charCountPlural | string | true (unless `variant` is set) | The string displayed when multiple characters can be entered before the limit is reached. Set `{x}` in the string to be replaced with the number, for example “You have {x} characters remaining”. |
| charCountSingular | string | true (unless `variant` is set) | The string displayed when one more character can be entered before the limit is reached. Set `{x}` in the string to be replaced with the number, for example “You have {x} character remaining”. |
| charCountOverLimitPlural | string | false (unless `variant` is set) | The string displayed when multiple characters over the limit have been entered. Set `{x}` in the string to be replaced with the number, for example “{x} characters too many”. |
| charCountOverLimitSingular | string | false (unless `variant` is set) | The string displayed when one character over the limit has been entered. Set `{x}` in the string to be replaced with the number, for example “{x} character too many”. |
2 changes: 1 addition & 1 deletion src/components/char-check-limit/_macro.njk
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% macro onsCharLimit(params) %}
{% if params.type == "check" %}
{% if params.variant == "check" %}
{% set content = caller() %}
<span class="ons-js-char-check-input">
{{ content | safe }}
Expand Down
4 changes: 2 additions & 2 deletions src/components/char-check-limit/_macro.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ describe('macro: char-check-limit', () => {
'char-check-limit',
{
...EXAMPLE_CHAR_CHECK_LIMIT,
type: 'check',
variant: 'check',
},
['<p>Test content.</p>'],
),
Expand Down Expand Up @@ -58,7 +58,7 @@ describe('macro: char-check-limit', () => {
'char-check-limit',
{
...EXAMPLE_CHAR_CHECK_LIMIT,
type: 'check',
variant: 'check',
},
['<p>Test content.</p>'],
),
Expand Down
4 changes: 2 additions & 2 deletions src/components/char-check-limit/character-check.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';

const EXAMPLE_INPUT_WITH_CHARACTER_CHECK = {
id: 'search-field',
type: 'number',
variant: 'number',
width: '6',
label: {
text: 'Filter results',
Expand All @@ -24,7 +24,7 @@ const EXAMPLE_CHARACTER_CHECK_WITH_MUTUALLY_EXCLUSIVE = {
id: 'feedback',
name: 'feedback',
width: '30',
legend: 'Feeback legend',
legend: 'Feedback legend',
label: {
text: 'Enter your feedback',
},
Expand Down
12 changes: 5 additions & 7 deletions src/components/details/example-details-with-warning.njk
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@
{% from "components/panel/_macro.njk" import onsPanel %}

{% call onsDetails({
"id": "details-example-with-warning",
"title": "Need to answer separately from your household?"
})
%}
"id": "details-example-with-warning",
"title": "Need to answer separately from your household?"
}) %}

<p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a> to start a separate survey.</p>
{% call onsPanel({
type: "warn"
})
%}
"variant": "warn"
}) %}
Someone in your household must still complete a survey using a household access code
{% endcall %}

Expand Down
2 changes: 1 addition & 1 deletion src/components/error/_macro.njk
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
{% endset %}

{% call onsPanel({
"type": "error",
"variant": "error",
"id": params.id
}) %}
{{ content | safe }}
Expand Down
2 changes: 1 addition & 1 deletion src/components/error/_macro.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ describe('macro: error', () => {
FAKE_NESTED_CONTENT,
);

expect(panelSpy.occurrences[0].type).toBe('error');
expect(panelSpy.occurrences[0].variant).toBe('error');
expect(panelSpy.occurrences[0].id).toBe('example-error');
});

Expand Down
7 changes: 3 additions & 4 deletions src/components/footer/_macro.njk
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,9 @@
<div class="ons-footer__warning">
<div class="ons-container">
{% call onsPanel({
"type": "warn",
"classes": "ons-panel--warn--footer"
})
%}
"variant": "warn",
"classes": "ons-panel--warn--footer"
}) %}
{{ params.footerWarning | safe }}
{% endcall %}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/footer/_macro.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ describe('macro: footer', () => {

expect(panelSpy.occurrences).toContainEqual(
expect.objectContaining({
type: 'warn',
variant: 'warn',
classes: 'ons-panel--warn--footer',
}),
);
Expand Down
30 changes: 15 additions & 15 deletions src/components/helpers/grid.njk
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
{% macro patternLibExampleGrid(params) %}
{% if params.container -%}
<div class="ons-container">
{% endif -%}
{% if params.container -%}
<div class="ons-container">
{% endif -%}

<div class="ons-grid">
{% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
{% for i in range(0, item.repeat | default(1) ) -%}
<div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
<div class="ons-pl-grid-col">{{ item.col }} col</div>
</div>
{%- endfor %}
{%- endfor %}
</div>

{% if params.container -%}
<div class="ons-grid">
{% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
{% for i in range(0, item.repeat | default(1) ) -%}
<div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
<div class="ons-pl-grid-col">{{ item.col }} col</div>
</div>
{%- endfor %}
{%- endfor %}
</div>
{% endif -%}

{% if params.container -%}
</div>
{% endif -%}
{% endmacro %}
45 changes: 22 additions & 23 deletions src/components/input/_macro.njk
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@
"accessiblePlaceholder": params.accessiblePlaceholder,
"inline": params.label.inline
}) }}

{% endif %}

{% if params.prefix or params.suffix %}
Expand Down Expand Up @@ -103,16 +102,16 @@
{% elif params.searchButton %}
<span class="ons-grid--flex ons-input_search-button{% if params.label.description %} ons-input--with-text-description{% endif %}">
{% if params.accessiblePlaceholder %}
{{ onsLabel({
"for": params.id,
"id": params.label.id,
"text": params.label.text,
"classes": params.label.classes,
"attributes": params.label.attributes,
"accessiblePlaceholder": params.accessiblePlaceholder,
"inline": params.label.inline
}) }}
{% endif %}
{{ onsLabel({
"for": params.id,
"id": params.label.id,
"text": params.label.text,
"classes": params.label.classes,
"attributes": params.label.attributes,
"accessiblePlaceholder": params.accessiblePlaceholder,
"inline": params.label.inline
}) }}
{% endif %}

{{ input | safe }}
{%- set buttonLabel -%}
Expand All @@ -138,23 +137,23 @@
</span>
{% else %}
{% if params.accessiblePlaceholder %}
<span class="ons-grid--flex {% if params.label.description %} ons-input--with-text-description{% endif %}">
<span class="ons-grid--flex {% if params.label.description %} ons-input--with-text-description{% endif %}">
{% if params.accessiblePlaceholder %}
{{ onsLabel({
"for": params.id,
"id": params.label.id,
"text": params.label.text,
"classes": params.label.classes,
"attributes": params.label.attributes,
"accessiblePlaceholder": params.accessiblePlaceholder,
"inline": params.label.inline
}) }}
"for": params.id,
"id": params.label.id,
"text": params.label.text,
"classes": params.label.classes,
"attributes": params.label.attributes,
"accessiblePlaceholder": params.accessiblePlaceholder,
"inline": params.label.inline
}) }}
{% endif %}
{% endif %}
{{ input | safe }}
{% if params.accessiblePlaceholder %}
</span>
{% endif %}
</span>
{% endif %}
{% endif %}
{% endset %}

Expand All @@ -163,7 +162,7 @@
{% call onsCharLimit({
"id": params.id ~ "-check",
"limit": params.charCheckLimit.limit,
"type": "check",
"variant": "check",
"charCountSingular": params.charCheckLimit.charCountSingular,
"charCountPlural": params.charCheckLimit.charCountPlural,
"charCountOverLimitSingular": params.charCheckLimit.charCountOverLimitSingular,
Expand Down
2 changes: 1 addition & 1 deletion src/components/input/_macro.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -617,7 +617,7 @@ describe('macro: input', () => {
expect(charCheckLimitSpy.occurrences).toContainEqual({
id: 'example-id-check',
limit: 200,
type: 'check',
variant: 'check',
charCountSingular: 'You have {x} character remaining',
charCountPlural: 'You have {x} characters remaining',
charCountOverLimitSingular: '{x} character too many',
Expand Down
2 changes: 1 addition & 1 deletion src/components/message/_macro-options.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
| Name | Type | Required | Description |
| -------------- | ------ | -------- | ---------------------------------------------------------------------- |
| type | string | true | Set to “sent” or “received” to style message type |
| variant | string | true | Set to “sent” or “received” to style message variant |
| id | string | false | The HTML `id` of the message header metadata element |
| fromLabel | string | true | Label for the “From” prefix in the message header metadata element |
| fromValue | string | true | Value of the “From” sender name in the message header metadata element |
Expand Down
34 changes: 17 additions & 17 deletions src/components/message/_macro.njk
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
{%- macro onsMessage(params) -%}
<div class="ons-message ons-message--{{ params.type }}">
<div class="ons-message__head">
<dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %}>
<div class="ons-message__sender">
<dt class="ons-message__term ons-u-fw-b">{{ params.fromLabel }}:</dt>
<dd class="ons-message__value ons-u-fw-b" {% if params.fromId %} id="{{ params.fromId }}"{% endif %} {% if params.fromName %} name="{{ params.fromName }}"{% endif %}>{{ params.fromValue }}</dd>
<div class="ons-message ons-message--{{ params.variant }}">
<div class="ons-message__head">
<dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %}>
<div class="ons-message__sender">
<dt class="ons-message__term ons-u-fw-b">{{ params.fromLabel }}:</dt>
<dd class="ons-message__value ons-u-fw-b" {% if params.fromId %} id="{{ params.fromId }}"{% endif %} {% if params.fromName %} name="{{ params.fromName }}"{% endif %}>{{ params.fromValue }}</dd>
</div>
<div class="ons-message__timestamp">
<dt class="ons-message__term ons-u-fs-s">{{ params.sentLabel }}:</dt>
<dd class="ons-message__value ons-u-fs-s" {% if params.sentId %} id="{{ params.sentId }}"{% endif %} {% if params.sentName %} name="{{ params.sentName }}"{% endif %}>{{ params.sentValue }}</dd>
</div>
</dl>
{% if params.unreadLink %}
<a class="ons-message__unread-link" {% if params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %} href="{{ params.unreadLink }}">{{ params.unreadLinkText }}</a>
{% endif %}
</div>
<div class="ons-message__timestamp">
<dt class="ons-message__term ons-u-fs-s">{{ params.sentLabel }}:</dt>
<dd class="ons-message__value ons-u-fs-s" {% if params.sentId %} id="{{ params.sentId }}"{% endif %} {% if params.sentName %} name="{{ params.sentName }}"{% endif %}>{{ params.sentValue }}</dd>
<div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %}>
{{ caller() }}
</div>
</dl>
{% if params.unreadLink %}
<a class="ons-message__unread-link" {% if params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %} href="{{ params.unreadLink }}">{{ params.unreadLinkText }}</a>
{% endif %}
</div>
<div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %}>
{{ caller() }}
</div>
</div>
{%- endmacro -%}
6 changes: 3 additions & 3 deletions src/components/message/_macro.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import axe from '../../tests/helpers/axe';
import { renderComponent } from '../../tests/helpers/rendering';

const EXAMPLE_MESSAGE_MINIMAL = {
type: 'sent',
variant: 'sent',
fromLabel: 'From',
fromValue: 'Example Sender',
sentLabel: 'Date sent',
Expand Down Expand Up @@ -35,13 +35,13 @@ describe('macro: message', () => {
it.each([
['sent', 'ons-message--sent'],
['received', 'ons-message--received'],
])('has appropriate class for provided `type` (%s -> %s)', (type, expectedClass) => {
])('has appropriate class for provided `variant` (%s -> %s)', (variant, expectedClass) => {
const $ = cheerio.load(
renderComponent(
'message',
{
...EXAMPLE_MESSAGE_MINIMAL,
type,
variant,
},
['Message content...'],
),
Expand Down
Loading

0 comments on commit 0b77bb0

Please sign in to comment.