Skip to content

Commit

Permalink
Migrate custom BEM to getBEM syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
@anselmbradford
anselmbradford committed Mar 27, 2024
1 parent bf34d97 commit 1262d34
Show file tree
Hide file tree
Showing 136 changed files with 2,623 additions and 2,473 deletions.
2 changes: 1 addition & 1 deletion docs/_includes/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<hr>

<div class="block block__sub ds-footer_content">
<div class="block block--sub ds-footer_content">
<p>
<small>
We need your help keeping the Design System accurate and up-to-date!
Expand Down
12 changes: 6 additions & 6 deletions docs/_includes/redirect-banner.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<div
id="redirect-banner"
class="block block__flush-top block__flush-bottom block__padded-top u-hidden"
class="block block--flush-top block--flush-bottom block--padded-top u-hidden"
>
<div class="m-global-banner">
<div class="wrapper wrapper__match-content">
<div class="m-notification m-notification__warning m-notification__visible">
<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">
<div class="h4 m-notification_message">
<div class="wrapper wrapper--match-content">
<div class="m-notification m-notification--warning m-notification--visible">
<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">
<div class="h4 m-notification__message">
You’ve been redirected to this website from
<span data-redirect="source-name"></span>.
</div>
<p class="m-notification_explanation">
<p class="m-notification__explanation">
The website you were trying to visit has been deprecated.
Future updates will happen here.
</p>
Expand Down
24 changes: 12 additions & 12 deletions docs/_includes/sidebar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@

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

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

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

{% if page.section == first_level_slug or page == blank %}
{% if first.nav-items.size > 0 %}
<ul class="m-list m-list__links">
<ul class="m-list m-list--links">
{% for link in first.nav-items %}
<li class="m-list_item">
<a class="m-list_link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
<li class="m-list__item">
<a class="m-list__link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
</li>
{% endfor %}
</ul>
Expand All @@ -28,21 +28,21 @@
<div class="ds-nav ds-nav-2">
<div class="h5">{{ second.heading }}</div>
{% if second.nav-items.size > 0 %}
<ul class="m-list m-list__links">
<ul class="m-list m-list--links">
{% for link in second.nav-items %}
<li class="m-list_item">
<a class="m-list_link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
<li class="m-list__item">
<a class="m-list__link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% for third in second.third-level %}
<div class="ds-nav ds-nav-3">
<div class="h6">{{ third.heading }}</div>
<ul class="m-list m-list__links">
<ul class="m-list m-list--links">
{% for link in third.nav-items %}
<li class="m-list_item">
<a class="m-list_link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
<li class="m-list__item">
<a class="m-list__link" href="{{ first_level_slug | relative_url }}/{{ link.page | slugify }}">{{ link.page }}</a>
</li>
{% endfor %}
</ul>
Expand Down
48 changes: 24 additions & 24 deletions docs/_includes/variation-content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ <h1 class="component-header u-mb30">
{% endfor %}

{%- if jump_links %}
<ul class="m-list m-list__horizontal m-list__horizontal-spaced">
<ul class="m-list m-list--horizontal m-list--horizontal-spaced">
{% for jump_link in jump_links %}
<li class="m-list_item">
<a class="m-list_link" href="#{{ jump_link | slugify }}">
<li class="m-list__item">
<a class="m-list__link" href="#{{ jump_link | slugify }}">
{{- jump_link -}}
</a>
</li>
Expand Down Expand Up @@ -137,8 +137,8 @@ <h3>
{% assign variation_slug = variation_slug | strip | slugify | truncate: 40, '' %}

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

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

{% if page.use_cases and page.use_cases != '' %}
<h2 id="use-cases">Use cases</h2>
<div class="content_line content_line__wide u-mb20"></div>
<div class="content__line content__line__wide u-mb20"></div>
<p>
{{ page.use_cases | markdownify }}
</p>
{% endif %}

{% if page.guidelines and page.guidelines != '' %}
<h2 id="guidelines">Guidelines</h2>
<div class="content_line content_line__wide u-mb20"></div>
<div class="content__line content__line__wide u-mb20"></div>
<p>
{{ page.guidelines | markdownify }}
</p>
{% endif %}

{% if page.behavior and page.behavior != '' %}
<h2 id="behavior">Behavior</h2>
<div class="content_line content_line__wide u-mb20"></div>
<div class="content__line content__line__wide u-mb20"></div>
<p>
{{ page.behavior | markdownify }}
</p>
{% endif %}

{% if page.restrictions and page.restrictions != empty %}
<h2 id="restrictions">Restrictions</h2>
<div class="content_line content_line__wide u-mb20"></div>
<div class="content__line content__line__wide u-mb20"></div>
<div class="content-l component-restrictions">
{% for restriction in page.restrictions %}
{% if restriction.restrictions_do and restriction.restrictions_do != '' %}
<div class="content-l_col content-l_col-1-2">
<div class="content-l__col content-l__col-1-2">
<div class="block
block__flush-top
block__flush-bottom
block__padded-bottom">
block--flush-top
block--flush-bottom
block--padded-bottom">
<header class="component-restrictions_heading-do">
<h3>
{% include icons/approved-round.svg %}
Expand All @@ -282,11 +282,11 @@ <h3>
</div>
{% endif %}
{% if restriction.restrictions_do_not and restriction.restrictions_do_not != '' %}
<div class="content-l_col content-l_col-1-2">
<div class="content-l__col content-l__col-1-2">
<div class="block
block__flush-top
block__flush-bottom
block__padded-bottom">
block--flush-top
block--flush-bottom
block--padded-bottom">
<header class="component-restrictions_heading-donot">
<h3>
{% include icons/error-round.svg %}
Expand All @@ -308,7 +308,7 @@ <h3>
{% if page.accessibility and page.accessibility != '' %}
<section class="sticky-header u-mb45">
<h2 id="accessibility">Accessibility</h2>
<div class="content_line content_line__wide u-mb20"></div>
<div class="content__line content__line__wide u-mb20"></div>
<p>
{{ page.accessibility | markdownify }}
</p>
Expand All @@ -318,7 +318,7 @@ <h2 id="accessibility">Accessibility</h2>
{% if page.research and page.research != '' %}
<section class="sticky-header u-mb45">
<h2 id="research">Research</h2>
<div class="content_line content_line__wide u-mb20"></div>
<div class="content__line content__line__wide u-mb20"></div>
<p>
{{ page.research | markdownify }}
</p>
Expand All @@ -327,11 +327,11 @@ <h2 id="research">Research</h2>

{% if page.related_items and page.related_items != '' %}
<section class="content-l u-mb45">
<div class="content-l_col content-l_col-1">
<div class="content-l__col content-l__col-1">
<div>
<section>
<h2 id="related-items">Related Items</h2>
<div class="content_line__wide content_line u-mb20"></div>
<div class="content__line__wide content__line u-mb20"></div>
{{ page.related_items | markdownify }}
</section>
</div>
Expand All @@ -350,11 +350,11 @@ <h2 id="related-items">Related Items</h2>
and page.url != 'guidelines/index'
%}
<section class="content-l u-mb45">
<div class="content-l_col content-l_col-1">
<div class="content-l__col content-l__col-1">
<div>
<section>
<h2 id="latest-updates">Latest Updates</h2>
<div class="content_line__wide content_line u-mb20"></div>
<div class="content__line__wide content__line u-mb20"></div>
<strong>Page last edited:</strong>
{% assign file_url_path = page.path | split: '/' | last %}
{% assign page_collection_name = 'pages' %}
Expand All @@ -375,4 +375,4 @@ <h2 id="latest-updates">Latest Updates</h2>

</div>

</section><!-- .content_main -->
</section><!-- .content__main -->
4 changes: 2 additions & 2 deletions docs/_layouts/homepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
layout: default
---
<main class="content" id="main" role="main">
<div class="content_wrapper">
<div class="content__wrapper">
{% include generic-content.html %}
</div>
<div class="o-editor_link" id="edit-page">
<a class="a-btn" href="
{{- '/admin/#/collections/special-pages/entries/home' | relative_url
-}}" title="Edit this page in Netlify CMS">
<span class="a-btn_text">Edit page</span>
<span class="a-btn_icon">{% include icons/edit.svg %}</span>
<span class="a-btn__icon">{% include icons/edit.svg %}</span>
</a>
</div>
</main>
4 changes: 2 additions & 2 deletions docs/_layouts/variation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
href="#"
title="Show all details">
<span class="a-btn_text">Show all details</span>
<span class="a-btn_icon">{% include icons/lightbulb.svg %}</span>
<span class="a-btn__icon">{% include icons/lightbulb.svg %}</span>
</a>
</div>

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

Expand Down
10 changes: 5 additions & 5 deletions docs/assets/css/color-swatches.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@
.swatch {
margin-left: 0;

&_field {
&__field {
height: 5em;
}

&__primary &_field {
&--primary &__field {
height: 10em;
}

&_head {
&__head {
margin: 0.25em 0;
}

&_table {
&__table {
width: 100%;
}

Expand All @@ -40,7 +40,7 @@
text-align: left;
}

&_field__green {
&__field--green {
background: var(--green);
}
}
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/css/footer.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
.ds-footer {
padding-bottom: 30px;

&_content {
&__content {
max-width: 41.875rem;
}

Expand Down
2 changes: 1 addition & 1 deletion docs/assets/css/hero.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
margin-bottom: 0.2em;
font-size: 1.25em;

.a-link_text {
.a-link__text {
font-weight: 500;
}
}
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/css/layout.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Taken from enhancements/layout.less in cfgov-refresh

.wrapper__match-content {
.wrapper--match-content {
// Tablet and above.
.respond-to-min(@bp-sm-min, {
max-width: @grid_wrapper-width - ( @grid_gutter-width * 2 );
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/css/netlify.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
display: inline;
}

.a-btn_icon {
.a-btn__icon {
padding-left: 0.6875em;
border-left: 1px solid #80b9e7;
margin-left: 0.4375em;
Expand Down
4 changes: 2 additions & 2 deletions docs/assets/css/sidebar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
display: none;
}

.ds-nav-container > .m-list > .m-list_item {
.ds-nav-container > .m-list > .m-list__item {
margin-bottom: 15px;
}

Expand Down Expand Up @@ -89,7 +89,7 @@
}
}

.ds-nav > .m-list > .m-list_item {
.ds-nav > .m-list > .m-list__item {
margin-left: 10px;
}
});
4 changes: 2 additions & 2 deletions docs/assets/css/skip-nav.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
.skip-nav {
position: relative;

&_link {
&__link {
position: absolute;
top: auto;
left: -10000px;
Expand Down Expand Up @@ -42,7 +42,7 @@
background 0.2s linear;
}

&__flush-left:focus {
&--flush-left:focus {
left: 0;
}
}
Expand Down
Loading

0 comments on commit 1262d34

Please sign in to comment.