Standardize on "tablet" layout breakpoint (#334)

Fixes issue where documentation pages with sidebar appear incorrectly stacked. Consistent with changes proposed in #298 (specifically 24ed561), standardize on the "tablet" breakpoint.

CHANGELOG.md

@@ -5,6 +5,7 @@
 - NPM package is renamed from `identity-style-guide` to `@18f/identity-design-system`. ([#331](https://github.com/18F/identity-design-system/pull/331))
 - Sass artifacts now require Dart Sass. The Ruby Sass and LibSass (C) compilers are no longer supported.
 - To improve performance of the default CSS bundle, responsive utility breakpoints other than `tablet:` have been disabled by default. Previously, `mobile-lg:` and `desktop:` utilities were also enabled. You can restore the original settings by overriding [the `$theme-utility-breakpoints` Sass variable](https://designsystem.digital.gov/documentation/settings/#utilities-settings).
+   - Component styling which previously responded to now-disabled breakpoints have been updated to standardize on the `tablet` breakpoint. This affects `usa-button--wide`, `usa-search--big`, and `usa-intro` CSS classes.
 - Image URLs in stylesheets are no longer processed by `asset-path-if-exists`. For Rails integrations, consider using [the `$theme-image-path` Sass variable](https://designsystem.digital.gov/documentation/settings/#general-settings) in combination with [Sprockets `resolve_assets_in_css_urls` option](https://github.com/rails/sprockets-rails#initializer-options).
 - The deprecated `$image-path` Sass variable setting has been removed. Use `$theme-image-path` instead.
 - The deprecated `alerts/success-badge.svg` image has been removed. Use `alerts/success.svg` instead.

docs/_components/cards.md

@@ -11,11 +11,11 @@ Cards provide a way to separate data in a feed.
 {% capture example %}
 <div class='lg-card'>
   <div class='grid-row flex-row flex-align-end'>
-    <div class='mobile-lg:grid-col-10'>
+    <div class='tablet:grid-col-10'>
       <h1 class='margin-bottom-05'>A card header!</h1>
       <p class='margin-top-05'>Some content for this card!</p>
     </div>
-    <div class='mobile-lg:grid-col-2 text-right'>
+    <div class='tablet:grid-col-2 text-right'>
       <a href='#' class='usa-button usa-button--outline'>Action</a>
     </div>
   </div>

docs/_includes/helpers/unstyled-button.html

@@ -3,7 +3,7 @@
 the purpose of aligning button previews amongst other variants.
 {% endcomment %}
 
-<span class="display-block mobile-lg:display-inline-flex position-relative">
+<span class="display-block tablet:display-inline-flex position-relative">
   <button
     class="usa-button {{ include.extra_classes }}"
     disabled

docs/_layouts/main.html

@@ -8,11 +8,11 @@
 
 {% assign sidenav = site.data.nav[page.sidenav] | default: page.sidenav %}
 
-<main class="usa-layout-docs usa-section" id="main-content">
+<main class="usa-section" id="main-content">
   <div class="grid-container">
     {% if sidenav %}
       <div class="grid-row grid-gap">
-        <aside class="usa-layout-docs__sidenav desktop:grid-col-3">
+        <aside class="display-none tablet:display-block tablet:grid-col-3">
           <nav>
             <ul class="usa-sidenav">
               {%
@@ -25,7 +25,7 @@
           </nav>
         </aside>
 
-        <div class="usa-layout-docs__main desktop:grid-col-9 usa-prose">
+        <div class="tablet:grid-col-9 usa-prose">
           <h1>{{ page.title }}</h1>
 
           {% if page.lead %}
@@ -34,9 +34,22 @@ <h1>{{ page.title }}</h1>
 
           {{ content }}
         </div>
+
+        <aside class="grid-col-3 tablet:display-none padding-top-4">
+          <nav>
+            <ul class="usa-sidenav">
+              {%
+                include nav/list.html
+                links = sidenav
+                li_class = 'usa-sidenav__item'
+                ul_class = 'usa-sidenav__sublist'
+              %}
+            </ul>
+          </nav>
+        </aside>
       </div>
     {% else %}
-      <div class="usa-layout-docs__main usa-prose">
+      <div class="usa-prose">
         <h1 class="usa-display">{{ page.title }}</h1>
 
         {% if page.lead %}

src/scss/components/_buttons.scss

@@ -126,7 +126,7 @@ $button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2);
 }
 
 .usa-button--wide {
-  @include at-media('mobile-lg') {
+  @include at-media('tablet') {
     min-width: 14rem;
   }
 }

src/scss/components/_search.scss

@@ -12,7 +12,7 @@
 
 .usa-search--big [type='submit'],
 .usa-search--big .usa-search__submit {
-  @include at-media('mobile-lg') {
+  @include at-media('tablet') {
     @include u-padding-x(4);
     font-size: font-size($theme-search-font-family, 'lg');
   }

src/scss/components/_typography.scss

@@ -60,7 +60,7 @@
 .usa-intro {
   @include u-font-size('sans', 'md');
 
-  @include at-media('mobile-lg') {
+  @include at-media('tablet') {
     @include u-font-size('sans', $theme-lead-font-size);
   }
 }