@dpc-sdp/ripple-global - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0-alpha.1

package.json

 {
   "name": "@dpc-sdp/ripple-global",
-  "version": "0.1.0",
+  "version": "1.0.0-alpha.1",
   "description": "Ripple global style",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "main": "./index.js",
+  "dependencies": {
+    "masonry-layout": "^4.2.1",
+    "moment": "^2.22.1",
+    "object-fit-images": "^3.2.3",
+    "vue-focus": "^2.1.0",
+    "vue-social-sharing": "^2.3.3"
   },
   "peerDependencies": {
-    "vue": "^2.5.2"
+    "vue": "^2.5.16"
   }
 }

README.md

@@ -1,11 +0,93 @@
-# RplTheme
+# @dpc-sdp/ripple-global
 
+The core module all SDP Ripple modules depend on.
+
 ## Install
+`npm install @dpc-sdp/ripple-global --save`
 
-`npm install @dpc-sdp/ripple-theme --save`
+### Nuxt.js
 
+For **Nuxt** app, register RplGlobal plugin by adding `plugins/ripple.js` file:
+```
+import Vue from 'vue'
+import RplGlobal from '@dpc-sdp/ripple-global'
+
+const rplOptions = {
+  nuxt: true
+}
+
+Vue.use(RplGlobal, rplOptions)
+```
+
+Then add `plugins/ripple.js` to plugins section of **nuxt.config.js**:
+```
+{
+  plugins: [
+    '~/plugins/ripple'
+  ]
+}
+```
+
+### Others
+
+If you are not using **Nuxt**, register RplGlobal plugin in your app entry point:
+
+```
+import Vue from 'vue'
+import RplGlobal from '@dpc-sdp/ripple-global'
+
+Vue.use(RplGlobal)
+```
+
 ## Usage
+In Sass:
+```scss
+@import "~@dpc-sdp/ripple-global/style"
 ```
-import RplTheme from '@dpc-sdp/ripple-theme'
 
+### Typography
+
+The `$rpl-typography` variable can be overridden to define font rules for
+multiple typesets with multiple breakpoints.
+
+Example:
+```scss
+$rpl-typography: (
+  // Define a typeset with a rule.
+  'heading': ('xl', 1.5em, 'bold', true),
+  'body': ('m', 1.2em, 'regular'),
+
+  // Define a typeset with breakpoints.
+  'heading_responsive': (
+    'xs': ('s', 1em, 'bold', true),
+    'm': ('m', 1.1em, 'bold', true),
+    'l': ('l', 1.2em, 'bold', true),
+    'xl': ('xl', 1.2em, 'regular', true),
+  )
+);
 ```
+
+A rule consists of:
+
+`('font_size', line_height, 'weight', show_background)`
+
+* `font_size` - String - a value from the `$rpl-font-sizes` list.
+* `line_height` - CSS rule - a value for line-height.
+* `weight` - String - a value from the `$rpl-fonts` list.
+* `show_background` - Optional Boolean - display a background. Expects inner HTML wrapped in a span.
+
+A typeset name (e.g. `'heading'`) can be assigned a rule or a list of breakpoints with rules.
+
+A breakpoint list should include `xs` to ensure font rules are defined for mobile size.
+
+Typesets can be added to CSS selectors with the `rpl_typography()` mixin.
+
+```scss
+.responsive-header {
+  @include rpl_typography('heading_responsive');
+}
+
+body {
+  @include rpl_typography('body');
+}
+```

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1519788

increased by209237.19%

Number of package files

77

increased by1440%

Lines of code

375

increased byInfinity%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

94

increased by683.33%

Worsened metrics

Dependency count

6

increased by500%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedmasonry-layout@^4.2.1

• + Addedmoment@^2.22.1

• + Addedobject-fit-images@^3.2.3

• + Addedvue-focus@^2.1.0

• + Addedvue-social-sharing@^2.3.3

• + Addeddesandro-matches-selector@2.0.2(transitive)

• + Addedev-emitter@1.1.1(transitive)

• + Addedfizzy-ui-utils@2.0.7(transitive)

• + Addedget-size@2.0.3(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedmasonry-layout@4.2.2(transitive)

• + Addedmoment@2.30.1(transitive)

• + Addedobject-fit-images@3.2.4(transitive)

• + Addedoutlayer@2.1.1(transitive)

• + Addedvue-focus@2.1.0(transitive)

• + Addedvue-social-sharing@2.4.7(transitive)