@nib-styles/v2-typography - npm Package Compare versions

Comparing version 4.0.0-fluid.1 to 4.0.0

component.json

 {
   "name": "v2-typography",
   "styles": [
-    "dist/compiled.css"
+    "dist/component.css"
   ],
@@ -9,2 +9,2 @@ "dependencies": {
   }
-}
+}

package.json

 {
   "name": "@nib-styles/v2-typography",
-  "version": "4.0.0-fluid.1",
+  "version": "4.0.0",
   "repository": {
@@ -13,8 +13,9 @@ "type": "git",
   "devDependencies": {
-    "sass-composer": "2.0.0-beta12"
+    "sass-composer": "2.0.0-beta14"
   },
   "scripts": {
-    "build": "sass-composer compiled.scss -o dist/compiled.css",
-    "example.build": "sass-composer example/index.scss -o example/build.css"
+    "build:dist": "sass-composer compiled.scss -o dist/component.css",
+    "build:example": "sass-composer example/example.scss -o example/example.bundle.css",
+    "build": "npm run build:dist && npm run build:example"
   }
-}
+}

README.md

 # @nib-styles/v2-typography
 
-Typography styles and mixins for nib. See the [nib-pattern-library](https://nib-pattern-library.firebaseapp.com/pages/typography.html) for usage.
+nib styled typography
 
-## Build
+## Installation
 
-    npm run build
-    
-For older projects not using scss. To see an example:
+    npm install --save @nib-styles/v2-typography
 
-    npm run example.build
+**Note**: Requires `Opens Sans` and `Roboto` fonts from Google Fonts:
 
+```html
+<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:300,700' />
+```
 
-## Using mixins
+## Usage
 
-Mixins allow us to have fewer classes on html elements, without needing to rewrite styles. For the typography mixins we have left behind the `v2-` prefix. 
+### Using mixins
 
-There are mixins for titles, copy and links. For lists and utils you will need to use the compiled classes ***(see below)***
+```scss
+@import "@nib-styles/v2-typography";
 
-### @include title($size: (1-4), $color: (grey/green/white), $pad: (false/true));
+.product {
 
-Mixin equivalent of `.v2-title`, plus `.v2-title--1/2/3/4`, plus new capability to adjust colour (grey default) and add padding (false by default)
+  &__title {
+    @include title(2, $color: 'grey', $padding: true)
+  }
 
-### @include link($color: (inherit/green/grey/white));
+  &__description {
+    @include copy($color: 'grey', $padding: true)
+  }
 
-Mixin equivalent of `.v2-link`, plus optional `.v2-link--green/grey/white`
+  &__link {
+    @include link($color: 'green')
+  }
 
-### @include copy;
+}
+```
 
-Mixin equivalent of `.v2-copy` class.
+```html
+<div class="product">
+    <h2 class="product__title">Top</h2>
+    <p class="product__description">
+      The best hospital cover you can get.
+      <a class="product__link">Join now!</a>
+    </p>
+</div>
+```
 
-### @include paragraph;
+### Using compiled classes
 
-Mixin equivalent of `.v2-paragraph` class.
+```scss
+@import "@nib-styles/v2-typography/compiled";
+```
 
-CSS:
+```html
+<div class="v2-article">
+    <h2 class="v2-title v2-title--2 v2-title--grey">Top</h2>
+    <p class="v2-copy">
+      The best hospital cover you can get.
+      <a class="v2-link v2-link--green">Join now!</a>
+    </p>
+</div>
+```
 
-    @import "@nib-styles/v2-typography";
-    
-    .box {
-      @include copy;
-    }
-    .custom-title {
-      @include title($size: 1, $color: green, $pad: false);
-      transform: rotate(180deg);
-    }
-    .custom-subheading {
-      @include title(2, white, true);
-      background: $green--elizabeth;
-    }
-    .custom-paragraph {
-      @include paragraph;
-      text-align: right;
-    }
-    .custom-link {
-      @include link(green);
-    }
+## Mixins
 
-HTML:
+```scss
+@include title($size, $color : null, $padding : false)
+```
 
-    <div class="box">
-      <h1 class="custom-title">A mixed in heading</h1>
-      <h3 class="custom-subheading">Lorem ipsum</h3>
-      <p class="custom-paragraph">Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felibitur vit risus i.</p>
-    </div>
-    
-## Using compiled classes
+- `$size` Required. An integer from `1-4`.
 
-CSS:
+- `$color` Optional. May be `grey`, `green` or `white`. If no color is provided the title will inherit the color from its parent element.
 
-    @import "@nib-styles/v2-typography/dist/compiled";
+- `$padding` Optional. If `true` an amount of top and bottom margin is applied.
 
+```scss
+@include copy($size : null, $color : null, $padding : false)
+```
 
-HTML:
+- `$size` Optional. May be `small` or `large`.
 
-    <div class="v2-article v2-copy">
-      <h1 class="v2-title v2-title--3">Page title</h1>
-      <p class="v2-paragraph">This is a paragraph with a <a class="v2-link" href="#">link</a>.</p>
-      <ul class="v2-list v2-list--copy">
-        <li class="v2-list--item">One</li>
-        <li class="v2-list--item">Two</li>
-        <li class="v2-list--item">Three</li>
-      </ul>
-    </div>
-    
+- `$color` Optional. May be `grey`, `green` or `white`. If no color is provided the title will inherit the color from its parent element.
 
-## Fluid Type Setting
+ `$padding` Optional. If `true` an amount of top and bottom margin is applied.
 
-Fluidly set the type size between a specified min and max font size, over a specified viewport size range.
 
-Current settings:
+```scss
+@include link($color : null)
+```
 
-- `min-font`: 14px
-- `max-font`: 20px
-- `min-width`: 400px
-- `max-width`: 1200px
+- `$color` Optional. May be `grey` or `white`. If no color is provided the title will inherit the color from its parent element.
 
-This means that at screen sizes at or below 400px wide, the font will be 14px. Over 1200px and the font will be fixed at 20px. In between the font will be somewhere in between.
+## Changelog
 
-NB: These values are yet to be ratified by the designers.
+### v4.0.0
 
-## Modular Scale
+- break: `copy()` color defaults to inherit
+- break: `title()`, `copy()` and `link()` mixins error if they receive an invalid param
+- add: `copy()` size configurable via mixin
+- add: `$font-body` and `$font-title` variables
+- fix/break: `link()`/`.v2-link` now has font specified so it doesn't have to be inside a `v2-copy` block
+- fix: `title()` padding should be dependent on the title size
+- fix: issues with mixins comparing strings and color names
+- fix: documentation
 
-Headings 1-4 and paragraph text obey a [perfect fourth](http://www.modularscale.com/?16&px&1.333&web&text) modular scale. All sizes must be specified relative to the root element using rems in order to follow the scale.
-
-
-## Changelog
-
 ### v2.3.0
@@ -116,5 +114,1 @@
 - Setting `color: inherit` on `.v2-link` by default
-
-## To do
-
-- List mixins

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

24703

decreased by-64.39%

Number of package files

14

decreased by-44%

Lines of code

147

decreased by-22.63%

Number of lines in readme file

114

decreased by-5%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes