@madgex/design-system 1.18.1 → 1.20.1

package/README.md

@@ -4,12 +4,14 @@ A work-in progress Design System for building a UI for Madgex products.
 
 ## Usage
 
-NOTE: Right now you'll need to be authenticated on npm under the Madgex account.
+Available on NPM as [@madgex/design-system](https://www.npmjs.com/package/@madgex/design-system).
 
 ```bash
 npm install @madgex/design-system --save
 ```
 
+**NOTE**: Right now you'll need to be authenticated on npm under the Madgex account.
+
 ## Importing styles
 
 You'll need to import the Madgex DS styles into your project scss file.

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2019 08:20:29 GMT
+ * Generated on Wed, 31 Jul 2019 10:24:25 GMT
  */
 
 :root {

package/dist/_tokens/js/_tokens-module.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2019 08:20:29 GMT
+ * Generated on Wed, 31 Jul 2019 10:24:25 GMT
  */
 
 module.exports = {

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Tue, 30 Jul 2019 08:20:29 GMT
+  Generated on Wed, 31 Jul 2019 10:24:25 GMT
 */
 
 $mds-color-brand-1-base: #1b75bb !default;

package/dist/css/index.css

@@ -1,6 +1,6 @@
 /*
   Do not edit directly
-  Generated on Tue, 30 Jul 2019 08:20:29 GMT
+  Generated on Wed, 31 Jul 2019 10:24:25 GMT
 */
 html,
 body,
@@ -1451,6 +1451,10 @@ body {
   border: 1px solid #dddddd;
 }
 
+.mds-card > *:last-child {
+  margin-bottom: 0;
+}
+
 .mds-card--highlighted {
   background: #f8f8f8;
 }

package/docs/01-index.njk

@@ -2,9 +2,9 @@
 title: Madgex Design System
 ---
 
-This is your index page. You can edit its contents at `docs/01-index.hbs`
+<span class="badge">v{{ pkg.version }}</span>
 
-v{{ pkg.version }}
+{{ pkgReadme | safe }}
 
 <!--
 ```

package/fractal-theme/assets/css/styles.css

@@ -1,3 +1,24 @@
+.badge {
+  color: #fff;
+  background-color: #14f;
+
+  padding-right: 0.6em;
+  padding-left: 0.6em;
+  border-radius: 10rem;
+
+  display: inline-block;
+  padding: 0.25em 0.4em;
+  font-size: 75%;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
 .colors {
   width: 100%;
 }

package/fractal.js

@@ -1,5 +1,6 @@
 const fractal = (module.exports = require('@frctl/fractal').create()); // eslint-disable-line
 const path = require('path');
+const fs = require('fs');
 
 const mandelbrot = require('@frctl/mandelbrot');
 const nunjucks = require('@frctl/nunjucks')({
@@ -26,6 +27,12 @@ const pkg = require(path.join(__dirname, 'package.json')); // eslint-disable-lin
 const tokens = require('./dist/_tokens/js/_tokens-module');
 const icons = require('./dist/assets/icons.json');
 
+// import README.MD into homepage docs
+let pkgReadme = fs.readFileSync(path.join(__dirname, 'README.md'), 'utf8');
+pkgReadme = pkgReadme.split('\n');
+pkgReadme.shift(0); // drop first line (h1)
+pkgReadme = pkgReadme.join('\n');
+
 /**
  * Metadata
  */
@@ -51,6 +58,7 @@ fractal.docs.set('ext', '.njk'); // default is '.md'
 fractal.docs.set('path', path.join(__dirname, 'docs'));
 fractal.docs.set('default.context', {
   pkg,
+  pkgReadme,
   tokens,
   icons,
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.18.1",
+  "version": "1.20.1",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/card/card.scss

@@ -1,6 +1,10 @@
 .mds-card {
   padding: ($mds-size-baseline * 3) ($mds-size-baseline * 4);
   border: $mds-size-border-width solid $mds-color-border;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
 }
 .mds-card--highlighted {
   background: $mds-color-neutral-lightest;