slippers-ui - npm Package Compare versions

Comparing version 0.7.8 to 0.8.0-alpha

package.json

 {
   "name": "slippers-ui",
-  "version": "0.7.8",
+  "version": "0.8.0-alpha",
   "description": "GitLab Marketing Design System",
@@ -27,3 +27,3 @@ "homepage": "https://gitlab-com.gitlab.io/marketing/inbound-marketing/slippers-ui/",
   "scripts": {
-    "start": "concurrently \"yarn storybook:quiet\" \"yarn watch:css\" -p \"[{name}]\" -n \"Storybook,PostCSS\" -c \"bgBlue.bold,bgMagenta.bold\"",
+    "start": "concurrently --kill-others \"yarn storybook:quiet\" \"yarn watch:css\" -p \"[{name}]\" -n \"Storybook,PostCSS\" -c \"bgBlue.bold,bgMagenta.bold\"",
     "storybook": "start-storybook -s ./src/static -p 6006",
@@ -34,2 +34,3 @@ "storybook:quiet": "start-storybook -s ./src/static -p 6006 --quiet",
     "build:storybook": "build-storybook -s ./src/static",
+    "build:tailwind-viewer": "tailwind-config-viewer export ./storybook-static/tailwind",
     "build": "NODE_ENV=production vue-cli-service build --target lib --name slippersComponents src/main.js && NODE_ENV=production postcss src/styles/styles.css --output dist/compiled.css",
@@ -41,3 +42,4 @@ "lint": "vue-cli-service lint",
     "prettier:check": "prettier --check \"**/*.{js,vue,css}\"",
-    "lefthook": "lefthook"
+    "lefthook": "lefthook",
+    "serve:tailwind-viewer": "tailwind-config-viewer -o"
   },
@@ -82,2 +84,3 @@ "publishConfig": {
     "style-loader": "^2.0.0",
+    "tailwind-config-viewer": "^1.5.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
@@ -84,0 +87,0 @@ "vue-loader": "^15.9.6",

README.md

@@ -19,7 +19,7 @@ # Slippers Marketing Design System
 1. [Releases](https://gitlab-com.gitlab.io/marketing/inbound-marketing/slippers-ui/?path=/story/releases--page)
-1. [Tailwind CSS](https://gitlab-com.gitlab.io/marketing/inbound-marketing/slippers-ui/?path=/story/tailwind--page)
+1. [Tailwind CSS](https://gitlab-com.gitlab.io/marketing/inbound-marketing/slippers-ui/?path=/story/tailwind-css--page)
 
 ## Storybook Notes
 
-[Storybook](https://storybook.js.org/) is our isolated UI to code environment for creating anything from blocks and components to layouts and webpages. We are using Vue as our front-end framework for achieving this. The main concept behind storybook is:
+[Storybook](https://storybook.js.org/) is our isolated UI to code environment for creating anything from blocks and components to layouts and webpages. We are using Vue as our front-end framework for achieving this. The main workflow behind using storybook is:
 
@@ -36,3 +36,3 @@ 1. Authoring a Vue component
 
-Slippers is build with [VueCLI](https://cli.vuejs.org/guide/), [Storybook](https://storybook.js.org/), and [TailwindCSS](https://tailwindcss.com/).
+Slippers is build with [VueCLI](https://cli.vuejs.org/guide/), [Storybook](https://storybook.js.org/), and [TailwindCSS](https://tailwindcss.com/). TailwindCSS has been configured as [PostCSS plugin](https://postcss.org/). 
 
@@ -47,3 +47,4 @@ ### Requirements
 1. `yarn` to install `storybook`, `tailwindcss`, and their dependencies
-1. `yarn start` to watch for changes within `vue` files within `./stories` directory on port 6006
+1. `yarn start` to watch for changes within `vue` files within `./stories` directory on port 60061
+1. To view a webpage of the local customized TailwindCSS Config, run `yarn view:tailwind` on port 3000
 
@@ -50,0 +51,0 @@ ## Building for production

No alert changes

Improved metrics

Total package byte prevSize

154573

increased by1.07%

Lines of code

3371

increased by1.97%

Number of lines in readme file

111

increased by0.91%

Worsened metrics

Dev dependency count

38

increased by2.7%

No dependency changes