@cfpb/cfpb-layout - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

package.json

 {
   "name": "@cfpb/cfpb-layout",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Design System layouts",
-  "less": "src/cfpb-layout.less",
-  "style": "cfpb-layout.css",
   "publishConfig": {
@@ -11,4 +9,4 @@ "access": "public"
   "dependencies": {
-    "@cfpb/cfpb-core": "^1.2.0",
-    "@cfpb/cfpb-grid": "^1.2.0"
+    "@cfpb/cfpb-core": "^2.0.0",
+    "@cfpb/cfpb-grid": "^2.0.0"
   },
@@ -18,4 +16,4 @@ "keywords": [
   ],
-  "gitHead": "e5f32a579d08f238eed2b9eafa5ad63f8af25870",
+  "gitHead": "0f3ed73e97374097ad75bd83df2d9c45e01d131f",
   "type": "module"
 }

usage.md

@@ -64,3 +64,3 @@ A set of HTML and CSS layout helpers.
 
-Color variables referenced in comments are from [@cfpb/cfpb-core's brand-colors.less](https://github.com/cfpb/design-system/blob/main/packages/cfpb-core/src/brand-colors.less).
+Color variables referenced in comments are from [@cfpb/cfpb-core's brand-colors.scss](https://github.com/cfpb/design-system/blob/main/packages/cfpb-core/src/brand-colors.scss).
 
@@ -82,7 +82,7 @@ ```
 
-// .grid__column__top-divider
-@grid__column__top-divider:  var(--gray-40);
+// .u-grid-column__top-divider
+@u-grid-column__top-divider:  var(--gray-40);
 
-// .grid__column__left-divider
-@grid__column__left-divider: var(--gray-40);
+// .u-grid-column__left-divider
+@u-grid-column__left-divider: var(--gray-40);
 
@@ -133,3 +133,3 @@ // Hero variables
     </section>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <section class="content__main">
@@ -149,3 +149,3 @@ Main content area
     </section>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <section class="content__main">
@@ -173,3 +173,3 @@ Main content area
     <div class="content__line"></div>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar">
@@ -198,3 +198,3 @@ Section navigation
     <div class="content__line"></div>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar">
@@ -236,3 +236,3 @@ Section navigation
     <div class="content__line"></div>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <section class="content__main">
@@ -261,3 +261,3 @@ <h2>Main content area</h2>
     <div class="content__line"></div>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <section class="content__main">
@@ -291,3 +291,3 @@ <h2>Main content area</h2>
     <div class="content__line"></div>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar content--flush-bottom">
@@ -318,3 +318,3 @@ Side with no bottom padding...
     <div class="content__line"></div>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar content--flush-bottom">
@@ -352,3 +352,3 @@ Side with no bottom padding...
     <div class="content__line"></div>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar content--flush-top-on-small">
@@ -371,3 +371,3 @@ Side with no top padding on small screens...
     <div class="content__line"></div>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar content--flush-top-on-small">
@@ -397,3 +397,3 @@ Side with no top padding on small screens...
     <div class="content__line"></div>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar content--flush-all-on-small">
@@ -416,3 +416,3 @@ Side with no padding or border-based gutters on small screens...
     <div class="content__line"></div>
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar content--flush-all-on-small">
@@ -847,3 +847,3 @@ Side with no padding or border-based gutters on small screens...
 <main class="content content--1-3" role="main">
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar">
@@ -863,3 +863,3 @@ Section navigation
 <main class="content content--1-3" role="main">
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar">
@@ -883,3 +883,3 @@ Section navigation
 <main class="content content--1-3" role="main">
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar">
@@ -899,3 +899,3 @@ Section navigation
 <main class="content content--1-3" role="main">
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar">
@@ -938,3 +938,3 @@ Section navigation
 <main class="content content--1-3" role="main">
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar">
@@ -954,3 +954,3 @@ Section navigation
 <main class="content content--1-3" role="main">
-    <div class="content__wrapper">
+    <div class="wrapper">
         <aside class="content__sidebar">
@@ -1126,13 +1126,13 @@ Section navigation
   // Creates a column that spans 6 out of 12 columns.
-  .grid__column(6, 12);
+  .u-grid-column(6, 12);
 
   // Add a top divider only at screen 599px and smaller.
-  .respond-to-max(599px {
-        .grid__column--top-divider();
-    });
+  @include respond-to-max(vars-breakpoints.599px) {
+    .u-grid-column--top-divider();
+  }
 
   // Add a left divider only at screen 600px and larger.
-  .respond-to-min(600px, {
-        .grid__column--left-divider();
-    });
+  @include respond-to-min(vars-breakpoints.600px) {
+    .u-grid-column--left-divider();
+  }
 }
@@ -1139,0 +1139,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

288003

increased by77.89%

Number of package files

23

increased by53.33%

Lines of code

138

increased by68.29%

Dependency changes

• + Added@cfpb/cfpb-core@2.0.0(transitive)

• + Added@cfpb/cfpb-grid@2.0.0(transitive)

• - Removed@cfpb/cfpb-core@1.2.0(transitive)

• - Removed@cfpb/cfpb-grid@1.2.0(transitive)

• Updated@cfpb/cfpb-core@^2.0.0

• Updated@cfpb/cfpb-grid@^2.0.0