@madgex/design-system 5.11.1 → 5.11.3

package/src/helpers/edited-text/edited-text.njk

@@ -60,6 +60,8 @@
 <article style="margin: 2rem 0;">
   <h4>Iframes and media objects</h4>
   <div class="mds-edited-text">
-    <iframe src="https://player.vimeo.com/video/76979871" title="Embedded Video: The New Vimeo Player (You Know, For Videos)" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+    <p>
+      <iframe src="https://player.vimeo.com/video/76979871" title="Embedded Video: The New Vimeo Player (You Know, For Videos)" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+    </p>
   </div>
 </article>

package/src/layout/grid/README.md

@@ -40,7 +40,7 @@ You can use `space-around` or `space-between` by adding the classes `mds-grid-ar
 
 For smaller (half width) gutters `mds-grid-small` can be used on the row element.
 
-I you want a column to only be as wide as it's content needs it to be, and allows other columns to grow to fill the remaining space use `.mds-grid-fit-content`.
+If you want a column to only be as wide as it's content needs it to be, and allows other columns to grow to fill the remaining space use `.mds-grid-fit-content` (also has breakpoint versions e.g. `.mds-grid-fit-content-md` )
 
 ### Reordering and Reversing
 

package/src/layout/grid/grid.njk

@@ -61,4 +61,11 @@
         <div class="mds-grid-col"><span>Column</span></div>
         <div class="mds-grid-col mds-grid-fit-content"><span class="mds-whitespace-nowrap">with content fit</span></div>
     </div>
+        <h2>With different breakpoints</h2>
+    <div class="mds-grid-row">
+        <div class="mds-grid-col"><span>Column</span></div>
+        <div class="mds-grid-col mds-grid-fit-content-lg"><span class="mds-whitespace-nowrap">with content fit lg</span></div>
+        <div class="mds-grid-col mds-grid-fit-content-md"><span class="mds-whitespace-nowrap">with content fit md</span></div>
+    </div>
+    <hr>
 </div>

package/src/scss/core/_grid.scss

@@ -414,6 +414,10 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-last-sm {
     order: 1;
   }
+  .mds-grid-fit-content-sm {
+    flex-grow: 0;
+    flex-basis: auto;
+  }
 }
 
 @media only screen and (min-width: $mds-size-breakpoint-md) {
@@ -605,6 +609,11 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-last-md {
     order: 1;
   }
+
+  .mds-grid-fit-content-md {
+    flex-grow: 0;
+    flex-basis: auto;
+  }
 }
 
 @media only screen and (min-width: $mds-size-breakpoint-lg) {
@@ -796,6 +805,11 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-last-lg {
     order: 1;
   }
+
+  .mds-grid-fit-content-lg {
+    flex-grow: 0;
+    flex-basis: auto;
+  }
 }
 
 @media only screen and (min-width: $mds-size-breakpoint-xl) {
@@ -987,4 +1001,8 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-last-xl {
     order: 1;
   }
-}
+  .mds-grid-fit-content-xl {
+    flex-grow: 0;
+    flex-basis: auto;
+  }
+}

package/tasks/svgsprite.js

@@ -63,8 +63,11 @@ async function createSvgStack() {
 
           return fs.mkdir(path.resolve(__dirname, '../dist/assets'), { recursive: true }, async () => {
             icons.push({ name: fileName });
-            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.svg')}`, sprites);
-            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons-inline.svg')}`, inlineSprites);
+            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.svg')}`, sprites.toString());
+            fs.writeFileSync(
+              `${path.resolve(__dirname, '../dist/assets', 'icons-inline.svg')}`,
+              inlineSprites.toString()
+            );
             fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.json')}`, JSON.stringify(icons));
           });
         })