Skip to content

Commit

Permalink
Update chip list markup (#129)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahosgood
ahosgood authored May 31, 2024
1 parent 3b264e2 commit 1fa2225
Show file tree
Hide file tree
Showing 67 changed files with 414 additions and 260 deletions.
6 changes: 2 additions & 4 deletions .storybook/storybook.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,13 +252,11 @@
margin-top: 0.5rem;
}

.tna-chip-list {
.tna-dl-chips {
margin-top: 1rem;

flex-wrap: nowrap;
}

.fa-solid {
p .fa-solid {
// margin-left: 0.5rem;

&.light-icon {
Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed

- Theme selector is hidden when forced colors mode is enabled
- The markup for a chip list has been updated

### Deprecated
### Removed
Expand Down
6 changes: 3 additions & 3 deletions src/nationalarchives/components/card/card.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,9 +157,9 @@ Meta.args = {
label: "New",
labelColour: "green",
meta: [
{ text: "24th September 2023", icon: "calendar" },
{ text: "From £16", icon: "ticket" },
{ text: "Online", icon: "location-dot" },
{ title: "Event date", text: "24th September 2023", icon: "calendar" },
{ title: "Cost", text: "From £16", icon: "ticket" },
{ title: "Location", text: "Online", icon: "location-dot" },
],
body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
htmlElement: "article",
Expand Down
4 changes: 2 additions & 2 deletions src/nationalarchives/components/card/fixtures.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"headingLevel": 3,
"body": "<p>Card body</p>"
},
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-s tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-s tna-card__heading\"><p class=\"tna-hgroup__supertitle\">Card supertitle</p><h3 class=\"tna-hgroup__title\">Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
},
{
"name": "heading size",
Expand Down Expand Up @@ -70,7 +70,7 @@
],
"body": "<p>Card body</p>"
},
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta tna-chip-list\"><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</div></li></ul><p>Card body</p></div></div></div>"
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><dl class=\"tna-card__meta tna-dl-chips tna-dl-chips--plain\"><dt></dt><dd class=\"tna-dl-chips__item\"><span class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</span></dd><dt></dt><dd class=\"tna-dl-chips__item\"><span class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</span></dd><dt></dt><dd class=\"tna-dl-chips__item\"><span class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</span></dd></dl><p>Card body</p></div></div></div>"
},
{
"name": "with text",
Expand Down
15 changes: 8 additions & 7 deletions src/nationalarchives/components/card/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
<div class="tna-card__inner">
{%- if params.supertitle %}
<hgroup class="tna-hgroup-{{ params.headingSize or 's' }} tna-card__heading">
<p class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</p>
<h{{ params.headingLevel }} class="tna-hgroup__title">
<span class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</span>
{%- if params.href %}
<a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.title }}</a>
{%- else %}
Expand Down Expand Up @@ -61,18 +61,19 @@
{%- endif %}
<div class="tna-card__body">
{%- if params.meta %}
<ul class="tna-card__meta tna-chip-list">
<dl class="tna-card__meta tna-dl-chips tna-dl-chips--plain">
{%- for item in params.meta %}
<li class="tna-chip-list__item">
<div class="tna-chip tna-chip--plain">
<dt>{{ item.title }}</dt>
<dd class="tna-dl-chips__item">
<span class="tna-chip tna-chip--plain">
{%- if item.icon %}
<i class="fa-solid fa-fw fa-{{ item.icon }}" aria-hidden="true"></i>
{%- endif %}
{{ item.text }}
</div>
</li>
</span>
</dd>
{%- endfor %}
</ul>
</dl>
{%- endif %}
{%- if params.text %}
<p>{{ params.text }}</p>
Expand Down
10 changes: 5 additions & 5 deletions src/nationalarchives/components/checkboxes/fixtures.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
}
]
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
},
{
"name": "small checkboxes",
Expand Down Expand Up @@ -78,7 +78,7 @@
],
"small": true
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-ADM\" value=\"ADM\" name=\"categories\"><label for=\"categories-ADM\" class=\"tna-checkboxes__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-AIR\" value=\"AIR\" name=\"categories\"><label for=\"categories-AIR\" class=\"tna-checkboxes__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-BT\" value=\"BT\" name=\"categories\"><label for=\"categories-BT\" class=\"tna-checkboxes__item-label\">Board of Trade and successors</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-C\" value=\"C\" name=\"categories\"><label for=\"categories-C\" class=\"tna-checkboxes__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-CO\" value=\"CO\" name=\"categories\"><label for=\"categories-CO\" class=\"tna-checkboxes__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-E\" value=\"E\" name=\"categories\"><label for=\"categories-E\" class=\"tna-checkboxes__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-FO\" value=\"FO\" name=\"categories\"><label for=\"categories-FO\" class=\"tna-checkboxes__item-label\">Foreign Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-HO\" value=\"HO\" name=\"categories\"><label for=\"categories-HO\" class=\"tna-checkboxes__item-label\">Home Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-PROB\" value=\"PROB\" name=\"categories\"><label for=\"categories-PROB\" class=\"tna-checkboxes__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-WO\" value=\"WO\" name=\"categories\"><label for=\"categories-WO\" class=\"tna-checkboxes__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-ADM\" value=\"ADM\" name=\"categories\"><label for=\"categories-ADM\" class=\"tna-checkboxes__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-AIR\" value=\"AIR\" name=\"categories\"><label for=\"categories-AIR\" class=\"tna-checkboxes__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-BT\" value=\"BT\" name=\"categories\"><label for=\"categories-BT\" class=\"tna-checkboxes__item-label\">Board of Trade and successors</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-C\" value=\"C\" name=\"categories\"><label for=\"categories-C\" class=\"tna-checkboxes__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-CO\" value=\"CO\" name=\"categories\"><label for=\"categories-CO\" class=\"tna-checkboxes__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-E\" value=\"E\" name=\"categories\"><label for=\"categories-E\" class=\"tna-checkboxes__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-FO\" value=\"FO\" name=\"categories\"><label for=\"categories-FO\" class=\"tna-checkboxes__item-label\">Foreign Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-HO\" value=\"HO\" name=\"categories\"><label for=\"categories-HO\" class=\"tna-checkboxes__item-label\">Home Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-PROB\" value=\"PROB\" name=\"categories\"><label for=\"categories-PROB\" class=\"tna-checkboxes__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-WO\" value=\"WO\" name=\"categories\"><label for=\"categories-WO\" class=\"tna-checkboxes__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></fieldset></div>"
},
{
"name": "checkboxes with a preselected value",
Expand All @@ -104,7 +104,7 @@
}
]
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\" checked><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\" checked><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
},
{
"name": "checkboxes with a hint",
Expand All @@ -130,7 +130,7 @@
}
]
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group\"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
},
{
"name": "checkboxes with an error",
Expand Down Expand Up @@ -158,7 +158,7 @@
}
]
},
"html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group tna-form__group--error\"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
},
{
"name": "inline checkboxes",
Expand Down
3 changes: 2 additions & 1 deletion src/nationalarchives/components/checkboxes/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
{%- if params.inline -%}
{%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
{%- endif -%}
<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
{%- set classes = containerClasses | join(' ') -%}
<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %}{% if classes %} {{ classes }}{% endif %}"{% for attribute, value in params.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
<fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}>
<legend class="tna-form__legend">
<h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
Expand Down
Loading

0 comments on commit 1fa2225

Please sign in to comment.