Skip to content

Commit 1262d34

Browse files
anselmbradfordanselmbradford
committed
Migrate custom BEM to getBEM syntax
1 parent bf34d97 commit 1262d34

File tree

136 files changed

+2623
-2473
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

136 files changed

+2623
-2473
lines changed

‎docs/_includes/footer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<hr>
44

5-
<div class="block block__sub ds-footer_content">
5+
<div class="block block--sub ds-footer_content">
66
<p>
77
<small>
88
We need your help keeping the Design System accurate and up-to-date!

‎docs/_includes/redirect-banner.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<div
22
id="redirect-banner"
3-
class="block block__flush-top block__flush-bottom block__padded-top u-hidden"
3+
class="block block--flush-top block--flush-bottom block--padded-top u-hidden"
44
>
55
<div class="m-global-banner">
6-
<div class="wrapper wrapper__match-content">
7-
<div class="m-notification m-notification__warning m-notification__visible">
8-
<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__warning-round" viewBox="0 0 17 20.4"><path d="M16.406 10.283a7.917 7.917 0 1 1-7.917-7.917 7.916 7.916 0 0 1 7.917 7.917zM9.48 14.367a1.003 1.003 0 1 0-1.004 1.003 1.003 1.003 0 0 0 1.004-1.003zM7.697 11.53a.792.792 0 0 0 1.583 0V5.262a.792.792 0 0 0-1.583 0z"/></svg> <div class="m-notification_content">
9-
<div class="h4 m-notification_message">
6+
<div class="wrapper wrapper--match-content">
7+
<div class="m-notification m-notification--warning m-notification--visible">
8+
<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__warning-round" viewBox="0 0 17 20.4"><path d="M16.406 10.283a7.917 7.917 0 1 1-7.917-7.917 7.916 7.916 0 0 1 7.917 7.917zM9.48 14.367a1.003 1.003 0 1 0-1.004 1.003 1.003 1.003 0 0 0 1.004-1.003zM7.697 11.53a.792.792 0 0 0 1.583 0V5.262a.792.792 0 0 0-1.583 0z"/></svg> <div class="m-notification__content">
9+
<div class="h4 m-notification__message">
1010
You’ve been redirected to this website from
1111
<span data-redirect="source-name"></span>.
1212
</div>
13-
<p class="m-notification_explanation">
13+
<p class="m-notification__explanation">
1414
The website you were trying to visit has been deprecated.
1515
Future updates will happen here.
1616
</p>

‎docs/_includes/sidebar.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@
44

55
<summary class="h4">Navigation</summary>
66

7-
<ul class="m-list m-list__links">
7+
<ul class="m-list m-list--links">
88
{% for first in site.data.side-navigation.first-level %}
99
{% assign first_level_slug = first.heading | slugify %}
10-
<li class="m-list_item">
10+
<li class="m-list__item">
1111

1212
<div class="ds-nav ds-nav-1">
1313
<div class="h4">
14-
<a class="m-list_link" href="{{ first_level_slug | relative_url }}">{{ first.heading }}</a>
14+
<a class="m-list__link" href="{{ first_level_slug | relative_url }}">{{ first.heading }}</a>
1515
</div>
1616

1717
{% if page.section == first_level_slug or page == blank %}
1818
{% if first.nav-items.size > 0 %}
19-
<ul class="m-list m-list__links">
19+
<ul class="m-list m-list--links">
2020
{% for link in first.nav-items %}
21-
<li class="m-list_item">
22-
<a class="m-list_link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
21+
<li class="m-list__item">
22+
<a class="m-list__link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
2323
</li>
2424
{% endfor %}
2525
</ul>
@@ -28,21 +28,21 @@
2828
<div class="ds-nav ds-nav-2">
2929
<div class="h5">{{ second.heading }}</div>
3030
{% if second.nav-items.size > 0 %}
31-
<ul class="m-list m-list__links">
31+
<ul class="m-list m-list--links">
3232
{% for link in second.nav-items %}
33-
<li class="m-list_item">
34-
<a class="m-list_link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
33+
<li class="m-list__item">
34+
<a class="m-list__link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
3535
</li>
3636
{% endfor %}
3737
</ul>
3838
{% endif %}
3939
{% for third in second.third-level %}
4040
<div class="ds-nav ds-nav-3">
4141
<div class="h6">{{ third.heading }}</div>
42-
<ul class="m-list m-list__links">
42+
<ul class="m-list m-list--links">
4343
{% for link in third.nav-items %}
44-
<li class="m-list_item">
45-
<a class="m-list_link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
44+
<li class="m-list__item">
45+
<a class="m-list__link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
4646
</li>
4747
{% endfor %}
4848
</ul>

‎docs/_includes/variation-content.html‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ <h1 class="component-header u-mb30">
4545
{% endfor %}
4646

4747
{%- if jump_links %}
48-
<ul class="m-list m-list__horizontal m-list__horizontal-spaced">
48+
<ul class="m-list m-list--horizontal m-list--horizontal-spaced">
4949
{% for jump_link in jump_links %}
50-
<li class="m-list_item">
51-
<a class="m-list_link" href="#{{ jump_link | slugify }}">
50+
<li class="m-list__item">
51+
<a class="m-list__link" href="#{{ jump_link | slugify }}">
5252
{{- jump_link -}}
5353
</a>
5454
</li>
@@ -137,8 +137,8 @@ <h3>
137137
{% assign variation_slug = variation_slug | strip | slugify | truncate: 40, '' %}
138138

139139
<div class="a-toggle_code">
140-
<button href="#{{ variation_slug }}-{{ forloop.index }}" class="a-btn a-btn__link" data-toggle-details="show">Show details</button>
141-
<button href="#{{ variation_slug }}-{{ forloop.index }}" class="a-btn a-btn__link u-hidden" data-toggle-details="hide">Hide details</button>
140+
<button href="#{{ variation_slug }}-{{ forloop.index }}" class="a-btn a-btn--link" data-toggle-details="show">Show details</button>
141+
<button href="#{{ variation_slug }}-{{ forloop.index }}" class="a-btn a-btn--link u-hidden" data-toggle-details="hide">Hide details</button>
142142
</div>
143143

144144
<div class="m-tabs u-hidden" id="{{ variation_slug }}-{{ forloop.index }}">
@@ -236,39 +236,39 @@ <h4 class="variation-specs-title">Specs</h4>
236236

237237
{% if page.use_cases and page.use_cases != '' %}
238238
<h2 id="use-cases">Use cases</h2>
239-
<div class="content_line content_line__wide u-mb20"></div>
239+
<div class="content__line content__line__wide u-mb20"></div>
240240
<p>
241241
{{ page.use_cases | markdownify }}
242242
</p>
243243
{% endif %}
244244

245245
{% if page.guidelines and page.guidelines != '' %}
246246
<h2 id="guidelines">Guidelines</h2>
247-
<div class="content_line content_line__wide u-mb20"></div>
247+
<div class="content__line content__line__wide u-mb20"></div>
248248
<p>
249249
{{ page.guidelines | markdownify }}
250250
</p>
251251
{% endif %}
252252

253253
{% if page.behavior and page.behavior != '' %}
254254
<h2 id="behavior">Behavior</h2>
255-
<div class="content_line content_line__wide u-mb20"></div>
255+
<div class="content__line content__line__wide u-mb20"></div>
256256
<p>
257257
{{ page.behavior | markdownify }}
258258
</p>
259259
{% endif %}
260260

261261
{% if page.restrictions and page.restrictions != empty %}
262262
<h2 id="restrictions">Restrictions</h2>
263-
<div class="content_line content_line__wide u-mb20"></div>
263+
<div class="content__line content__line__wide u-mb20"></div>
264264
<div class="content-l component-restrictions">
265265
{% for restriction in page.restrictions %}
266266
{% if restriction.restrictions_do and restriction.restrictions_do != '' %}
267-
<div class="content-l_col content-l_col-1-2">
267+
<div class="content-l__col content-l__col-1-2">
268268
<div class="block
269-
block__flush-top
270-
block__flush-bottom
271-
block__padded-bottom">
269+
block--flush-top
270+
block--flush-bottom
271+
block--padded-bottom">
272272
<header class="component-restrictions_heading-do">
273273
<h3>
274274
{% include icons/approved-round.svg %}
@@ -282,11 +282,11 @@ <h3>
282282
</div>
283283
{% endif %}
284284
{% if restriction.restrictions_do_not and restriction.restrictions_do_not != '' %}
285-
<div class="content-l_col content-l_col-1-2">
285+
<div class="content-l__col content-l__col-1-2">
286286
<div class="block
287-
block__flush-top
288-
block__flush-bottom
289-
block__padded-bottom">
287+
block--flush-top
288+
block--flush-bottom
289+
block--padded-bottom">
290290
<header class="component-restrictions_heading-donot">
291291
<h3>
292292
{% include icons/error-round.svg %}
@@ -308,7 +308,7 @@ <h3>
308308
{% if page.accessibility and page.accessibility != '' %}
309309
<section class="sticky-header u-mb45">
310310
<h2 id="accessibility">Accessibility</h2>
311-
<div class="content_line content_line__wide u-mb20"></div>
311+
<div class="content__line content__line__wide u-mb20"></div>
312312
<p>
313313
{{ page.accessibility | markdownify }}
314314
</p>
@@ -318,7 +318,7 @@ <h2 id="accessibility">Accessibility</h2>
318318
{% if page.research and page.research != '' %}
319319
<section class="sticky-header u-mb45">
320320
<h2 id="research">Research</h2>
321-
<div class="content_line content_line__wide u-mb20"></div>
321+
<div class="content__line content__line__wide u-mb20"></div>
322322
<p>
323323
{{ page.research | markdownify }}
324324
</p>
@@ -327,11 +327,11 @@ <h2 id="research">Research</h2>
327327

328328
{% if page.related_items and page.related_items != '' %}
329329
<section class="content-l u-mb45">
330-
<div class="content-l_col content-l_col-1">
330+
<div class="content-l__col content-l__col-1">
331331
<div>
332332
<section>
333333
<h2 id="related-items">Related Items</h2>
334-
<div class="content_line__wide content_line u-mb20"></div>
334+
<div class="content__line__wide content__line u-mb20"></div>
335335
{{ page.related_items | markdownify }}
336336
</section>
337337
</div>
@@ -350,11 +350,11 @@ <h2 id="related-items">Related Items</h2>
350350
and page.url != 'guidelines/index'
351351
%}
352352
<section class="content-l u-mb45">
353-
<div class="content-l_col content-l_col-1">
353+
<div class="content-l__col content-l__col-1">
354354
<div>
355355
<section>
356356
<h2 id="latest-updates">Latest Updates</h2>
357-
<div class="content_line__wide content_line u-mb20"></div>
357+
<div class="content__line__wide content__line u-mb20"></div>
358358
<strong>Page last edited:</strong>
359359
{% assign file_url_path = page.path | split: '/' | last %}
360360
{% assign page_collection_name = 'pages' %}
@@ -375,4 +375,4 @@ <h2 id="latest-updates">Latest Updates</h2>
375375

376376
</div>
377377

378-
</section><!-- .content_main -->
378+
</section><!-- .content__main -->

‎docs/_layouts/homepage.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
layout: default
33
---
44
<main class="content" id="main" role="main">
5-
<div class="content_wrapper">
5+
<div class="content__wrapper">
66
{% include generic-content.html %}
77
</div>
88
<div class="o-editor_link" id="edit-page">
99
<a class="a-btn" href="
1010
{{- '/admin/#/collections/special-pages/entries/home' | relative_url
1111
-}}" title="Edit this page in Netlify CMS">
1212
<span class="a-btn_text">Edit page</span>
13-
<span class="a-btn_icon">{% include icons/edit.svg %}</span>
13+
<span class="a-btn__icon">{% include icons/edit.svg %}</span>
1414
</a>
1515
</div>
1616
</main>

‎docs/_layouts/variation.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
href="#"
1717
title="Show all details">
1818
<span class="a-btn_text">Show all details</span>
19-
<span class="a-btn_icon">{% include icons/lightbulb.svg %}</span>
19+
<span class="a-btn__icon">{% include icons/lightbulb.svg %}</span>
2020
</a>
2121
</div>
2222

@@ -27,7 +27,7 @@
2727
href="/design-system/updating-this-website?page={{ page.title | url_encode }}"
2828
title="Edit this page in Netlify CMS">
2929
<span class="a-btn_text">Edit page</span>
30-
<span class="a-btn_icon">{% include icons/edit.svg %}</span>
30+
<span class="a-btn__icon">{% include icons/edit.svg %}</span>
3131
</a>
3232
</div>
3333

‎docs/assets/css/color-swatches.less‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,19 @@
1212
.swatch {
1313
margin-left: 0;
1414

15-
&_field {
15+
&__field {
1616
height: 5em;
1717
}
1818

19-
&__primary &_field {
19+
&--primary &__field {
2020
height: 10em;
2121
}
2222

23-
&_head {
23+
&__head {
2424
margin: 0.25em 0;
2525
}
2626

27-
&_table {
27+
&__table {
2828
width: 100%;
2929
}
3030

@@ -40,7 +40,7 @@
4040
text-align: left;
4141
}
4242

43-
&_field__green {
43+
&__field--green {
4444
background: var(--green);
4545
}
4646
}

‎docs/assets/css/footer.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
.ds-footer {
66
padding-bottom: 30px;
77

8-
&_content {
8+
&__content {
99
max-width: 41.875rem;
1010
}
1111

‎docs/assets/css/hero.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
margin-bottom: 0.2em;
3636
font-size: 1.25em;
3737

38-
.a-link_text {
38+
.a-link__text {
3939
font-weight: 500;
4040
}
4141
}

‎docs/assets/css/layout.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Taken from enhancements/layout.less in cfgov-refresh
22

3-
.wrapper__match-content {
3+
.wrapper--match-content {
44
// Tablet and above.
55
.respond-to-min(@bp-sm-min, {
66
max-width: @grid_wrapper-width - ( @grid_gutter-width * 2 );

0 commit comments

Comments
 (0)