@unimelb/pattern-lib-vue - npm Package Compare versions

Comparing version 3.5.8 to 4.0.0

package.json

 {
   "name": "@unimelb/pattern-lib-vue",
   "description": "A complete design system for the University of Melbourne.",
-  "version": "3.5.8",
+  "version": "4.0.0",
   "repository": {
@@ -27,3 +27,3 @@ "type": "git",
     "start:lib": "webpack-dev-server --port 7003 --config targets/lib/webpack.config.js",
-    "lint": "yarn run lint:js && yarn run lint:css",
+    "lint": "yarn lint:js && yarn lint:js --fix && yarn lint:css && yarn lint:css --fix",
     "lint:css": "stylelint \".storybook/**/*.css\" \"components/**/*.css\" \"targets/**/*.css\"",
@@ -38,2 +38,3 @@ "lint:js": "eslint \"*.js\" \".storybook/**/*.{js,vue}\" \"components/**/*.{js,vue}\" \"targets/**/*.js\"",
     "photoswipe": "^4.1.2",
+    "semver": "^5.6.0",
     "vue": "2.5.16",
@@ -40,0 +41,0 @@ "vue-progressive-image": "3.1.0",

README.md

@@ -9,2 +9,4 @@ # Pattern Library
 
+- [Development Preview](https://dev--pattern-lib-unimelb.netlify.com/) (Netlify deploy from `dev` branch)
+- [Production](https://pattern-lib-unimelb.netlify.com/) (Netlify deploy from `master` branch)
 
@@ -18,3 +20,2 @@ ## Getting started
 
-
 ```bash
@@ -27,3 +28,3 @@ # 1. Clone the repository.
 
-# 3. Copy the env file. 
+# 3. Copy the env file.
 cp .env.example .env
@@ -34,3 +35,3 @@
 
-# 5. Read the documentation linked below for "Setup and development".
+# 5. Read the documentation linked below.
 ```
@@ -40,2 +41,4 @@
 
+- [Contributing Guidelines](CONTRIBUTING.md)
+
 Storybook is the main development environment.
@@ -46,3 +49,2 @@
 
-
 ### Generator
@@ -56,4 +58,7 @@
 ```
+
 You will then be asked for the name of the component, this will be used to create a new folder with a minimal component layout and story
 
+> **Note**: Always remember to add the new component to the file `index.js` inside of the folders `target/lib` and `target/vue`, that way the component will be exportable to `Matrix CMS` via `CDN` and `Vue` via `NPM`.
+
 ```bash
@@ -63,6 +68,31 @@ # Generate a new view component
 ```
+
 You will need to select the component from the list of folders, then confirm the selection by selecting `choose this directory`. You will then be asked to give the story a name.
 
-> **Note** This requires some special comments are added in the stories/index.js file. If it doesn't work make sure the comments are the same as in the template directory
+> **Note**: This requires some special comments are added in the `stories/index.js` file. If it doesn't work make sure the comments are the same as in the template directory.
 
+### Using a component in CMS
+
+In Storybook: When adding the "how to use a component" documentation, add a description that clearly shows that ( in the CMS environment) a component must be used in the way of closing the tag explicitly, as shown in the folllowing example:
+
+## Do not:
+
+(In the CMS, self closing tags won't load the component:)
+
+```bash
+# self close the components
+<my-new-component/>
+```
+
+## Do
+
+(To be compatible with CMS, call the component this way:)
+
+```bash
+# explicity closing
+<my-new-component></my-new-component>
+```
+
+> **Note**: Matrix CMS can only use the components in that way and must be in the `target/lib` folder as well. You can self-close a component when importing it in a parent component in the pattern-lib context. The rule described above applies just when the component is called in the CMS context. ie. footer component, which is used like this in CMS: `<page-footer></page-footer>` instead of `<page-footer />`.
+
 ### Targets
@@ -107,3 +137,2 @@
 
-
 ## Release process
@@ -130,2 +159,4 @@
 
+**See more Notes about the release process in the release.md section in docs:**
+[Docs section](https://github.com/unimelb/pattern-lib/tree/master/docs)
 
@@ -147,6 +178,14 @@ ## Deployment
 
-
 ## Testing
 
+### How could you test before going live?
+
+> The `dev` branch is set up into `Semaphore CI` to deploy into the AWS S3 Bucket in a folder called `latest` where the `CMS` team can appoint to `latest` and test it out before go to `production`.
+
+> Each `pull request` that is opened, also is automatically generated a comment with a preview link to test it.
+
+> **Note**: Always check the `Semaphore CI` check into your `pull request` and make sure is building properly, before merge into `dev`.
+
 Supported browsers:
+
 - last two versions of Chrome, Firefox and Edge
@@ -160,2 +199,3 @@ - IE 11
 Recommended mobile devices for testing:
+
 - iPhone 4S
@@ -166,3 +206,2 @@ - iPhone 6
 
-
 ## Developer documentation
@@ -172,6 +211,8 @@
 - [Icons](docs/icons.md) - how to add new icons, and how to use icons in CSS and Vue components
+- [Contributing](CONTRIBUTING.md) - how to get involved and contribute code
 
 ## Example websites
 
-- The following UoM websites are using these components on the new Squiz CMS (Gen 2). Documentation on how to use these components in Edit+ [Gen 2 documentation](https://matrix-cms.unimelb.edu.au/web/mce) 
+- The following UoM websites are using these components on the new Squiz CMS (Gen 2). Documentation on how to use these components in Edit+ [Gen 2 documentation](https://matrix-cms.unimelb.edu.au/web/mce)
+
 - [University Home Page](https://unimelb.edu.au)
@@ -178,0 +219,0 @@ - [About Us](https://about.unimelb.edu.au)

No alert changes

Improved metrics

Total package byte prevSize

209296

increased by6.35%

Lines of code

650

increased by5.01%

Number of lines in readme file

208

increased by24.55%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedsemver@^5.6.0

• + Addedsemver@5.7.2(transitive)