Merge pull request #1963 from cfpb/ans_bem_fixes

BEM fixes

Author: anselmbradford

docs/pages/fieldsets.md

@@ -23,7 +23,7 @@ variation_groups:
           <legend class="a-legend">
 
           Basic legend
-              <small class="a-label__helper a-label__helper__block">Use block helper text for instructions</small>
+              <small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
           </legend>
               <div class="o-form__group">
                   <fieldset class="o-form__fieldset">
@@ -46,7 +46,7 @@ variation_groups:
           <legend class="a-legend">
 
           Basic legend
-              <small class="a-label__helper a-label__helper__block">Use block helper text for instructions</small>
+              <small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
           </legend>
               <div class="o-form__group">
                   <fieldset class="o-form__fieldset">
@@ -74,7 +74,7 @@ variation_groups:
           <legend class="a-legend">
 
           Basic legend
-              <small class="a-label__helper a-label__helper__block">Use block helper text for instructions</small>
+              <small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
           </legend>
               <div class="o-form__group">
                   <fieldset class="o-form__fieldset">
@@ -104,7 +104,7 @@ variation_groups:
           <legend class="a-legend">
 
           Basic legend
-              <small class="a-label__helper a-label__helper__block">Use block helper text for instructions</small>
+              <small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
           </legend>
 
                           <div class="m-form-field m-form-field--radio m-form-field--lg-target">

docs/pages/helper-text.md

@@ -8,7 +8,7 @@ variation_groups:
           <label class="a-label a-label--heading" for="helper-block-example">
 
           Label
-              <small class="a-label__helper a-label__helper__block">Use block helper text for instructions</small>
+              <small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
           </label>
 
 

docs/pages/heroes.md

@@ -160,7 +160,7 @@ variation_groups:
         variation_implementation: >+
           #### Bleeding illustrations
 
-          When using an illustration that bleeds top to bottom at larger screen sizes, add the `__bleeding` modifier to the hero and add an additional `m-hero_bleeding-image` as a sibling to `m-hero__image`.
+          When using an illustration that bleeds top to bottom at larger screen sizes, add the `--bleeding` modifier to the hero and add an additional `m-hero__bleeding-image` as a sibling to `m-hero__image`.
 
 
           #### Customizing illustrations

docs/pages/variables.md

@@ -290,8 +290,8 @@ variation_groups:
           // Headings
 
           // .a-heading__icon
-          @heading__icon:             var(--black);
-          @heading__icon__hover:      @link-text-hover;
+          @heading-icon:              var(--black);
+          @heading-icon-hover:        @link-text-hover;
 
           // Headers
 

packages/cfpb-forms/usage.md

@@ -153,13 +153,13 @@ Appears with labels and label headings.
 
 <label class="a-label a-label--heading">
     A label heading
-    <small class="a-label__helper a-label__helper__block">Helper text</small>
+    <small class="a-label__helper a-label__helper--block">Helper text</small>
 </label>
 
 ```html
 <label class="a-label a-label--heading">
   A label heading
-  <small class="a-label__helper a-label__helper__block">Helper text</small>
+  <small class="a-label__helper a-label__helper--block">Helper text</small>
 </label>
 ```
 

packages/cfpb-layout/usage.md

@@ -612,7 +612,7 @@ overlapping since they will span the height of the entire `.content-l` element.
         <br>
         Half-width column (spans 6/12 columns)
     </div>
-    <div class="content-l__col content-l__col-1-2 content-l__col__before-divider">
+    <div class="content-l__col content-l__col-1-2">
         <img src="https://dummyimage.com/600x320/addc91/101820" alt="Placeholder image">
         <br>
         Half-width column (spans 6/12 columns)
@@ -623,10 +623,10 @@ overlapping since they will span the height of the entire `.content-l` element.
     <div class="content-l__col content-l__col-1-3">
         Third-width column (spans 4/12 columns)
     </div>
-    <div class="content-l__col content-l__col-1-3 content-l__col__before-divider">
+    <div class="content-l__col content-l__col-1-3">
         Third-width column (spans 4/12 columns)
     </div>
-    <div class="content-l__col content-l__col-1-3 content-l__col__before-divider">
+    <div class="content-l__col content-l__col-1-3">
         Third-width column (spans 4/12 columns)
     </div>
 </div>
@@ -638,24 +638,24 @@ overlapping since they will span the height of the entire `.content-l` element.
         <br>
         Half-width column (spans 6/12 columns)
     </div>
-    <div class="content-l__col content-l__col-1-2 content-l__col__before-divider">
+    <div class="content-l__col content-l__col-1-2">
         <img src="https://dummyimage.com/600x320/addc91/101820" alt="Placeholder image">
         <br>
         Half-width column (spans 6/12 columns)
     </div>
 </div>
 <br>
 <!-- Starting a new .content-l so that the dividers from
-     .content-l__col.content-l__col-1-2.content-l__col__before-divider
+     .content-l__col.content-l__col-1-2
      won't overlap the .content-l__col-1-3 columns. -->
 <div class="content-l">
     <div class="content-l__col content-l__col-1-3">
         Third-width column (spans 4/12 columns)
     </div>
-    <div class="content-l__col content-l__col-1-3 content-l__col__before-divider">
+    <div class="content-l__col content-l__col-1-3">
         Third-width column (spans 4/12 columns)
     </div>
-    <div class="content-l__col content-l__col-1-3 content-l__col__before-divider">
+    <div class="content-l__col content-l__col-1-3">
         Third-width column (spans 4/12 columns)
     </div>
 </div>

packages/cfpb-typography/src/atoms/headings.less

@@ -1,10 +1,10 @@
 .a-heading__icon {
   .heading-4();
 
-  color: @heading__icon;
+  color: @heading-icon;
 
   a& {
-    .u-link--colors( @heading__icon, @heading__icon__hover );
+    .u-link--colors( @heading-icon, @heading-icon-hover );
 
     border-width: 0;
   }

packages/cfpb-typography/src/cfpb-typography.less

@@ -34,8 +34,8 @@
 // Headings
 
 // .a-heading__icon
-@heading__icon: var(--black);
-@heading__icon__hover: @link-text-hover;
+@heading-icon: var(--black);
+@heading-icon-hover: @link-text-hover;
 
 // Headers
 

packages/cfpb-typography/usage.md

@@ -57,8 +57,8 @@ Color variables referenced in comments are from [@cfpb/cfpb-core's brand-colors.
 // Headings
 
 // .a-heading__icon
-@heading__icon:             var(--black);
-@heading__icon__hover:      @link-text-hover;
+@heading-icon:              var(--black);
+@heading-icon-hover:        @link-text-hover;
 
 // Headers