monday-ui-style - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

package.json

 {
   "name": "monday-ui-style",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Monday UI CSS Foundations",
@@ -13,3 +13,4 @@ "main": "dist/index.css",
     "css-minify": "cleancss --level 1 --format breaksWith=lf --output dist/index.min.css dist/index.css",
-    "build": "npm run compile-styles && npm run css-minify"
+    "build": "npm run compile-styles && npm run css-minify",
+    "plop": "plop"
   },
@@ -41,4 +42,5 @@ "peerDependencies": {
     "node-sass": "^4.14.1",
+    "plop": "^2.7.4",
     "prettier": "^2.0.5"
   }
 }

README.md

 # monday.com UI styles
-This package includes all of the styling foundations of monday.com
-Theme definition, colors, shadows, dimensions, icons, etc.
 
-Although we are using React this library will try to stay framework agnostic, we are exposing here the foundations of our design system so they could be used regardless the framework/environment you are using. 
+> This package includes all of the styling foundations of monday.com
+> Theme definition, colors, shadows, dimensions, icons, etc.
 
+Although we are using React in our product this library will try to stay framework agnostic, we are exposing here the foundations of our design system so they could be used regardless the framework/environment you are using.
+
 ## Installation
+
 ```
-npm install monday-ui-style
+npm install monday-ui-style --save
 ```
 
 ## Usage
-__Styles__: Import the css file in order to have the css variables exposed on the root level
-``` scss
+
+**Styles**: Import the css file in order to have the css variables exposed on the root level
+
+```scss
 @import "~monday-ui-style/dist/index.min.css";
 ```
 
-__Icons__: We expose each icon's SVG from the dist files so you could use them in your app.
-``` javascript
+or if you want to import it in you JS files
+
+```javascript
+import "monday-ui-style/dist/index.min.css";
+```
+
+**Icons**: We expose each icon's SVG from the dist files so you could use them in your app.
+
+```javascript
 import IconName from "monday-ui-style/src/Icons/IconName.svg";
 ```
 
+## Icons
 
-## Adding a new icon
-When adding a new icon please make sure of the following
-- We don't have a similar icon - if so either replace the icon or make sure that we need another version of it
-- Make sure to switch all fill/stroke.. colors to `currentColor`as we want to inherit the color of the font (we are not doing so automatically to leave the option to preserve svg with colors) 
-- Update the [metadata file](./src/Icons/iconsMetaData.js) for that icon
+### Adding a new icon
 
+When adding a new icon please make sure that there isn't a similar icon - if so either replace the icon or make sure that we need another version of it
 
-### New icon request
+### Icon colors
+
+We want to support the ability for the svg icon to adapt the css `color` attribute therefore we when adding an icon
+all of the colors in the SVG should be `currentColor`.
+
+In some rare occasions when you want to preserve a color within the icon please consider the following:
+
+- `currentColor` might change according to position and theming
+- this is an open source library so brand colors might change
+- please be aware that we will add a monochrome version of that icon as well
+
+### Metadata file
+
+We are maintaining a metadata file on the icons, it helps our icon library to be more readable and search able when you want to search for a relevant icon
+
+When adding a new icon please run `npm run plop` and fill in the relevant information
+
+## New icon request
+
 If you want us to create a non existing monday.com style icon open a PR with please see the [guidelines](ICON_REQUEST.md)
-

src/Icons/iconsMetaData.js

 export const iconsMetaData = [
+  // DO NOT REMOVE THIS FOLLOWING LINE!
+  // plop_marker:icon_metadata
   {
-    name: "Group",
-    file: "Group.svg",
-    description: "Adding a group to a board",
+      name: "Bolt",
+      file: "Bolt.svg",
+      description: "Bolt",
+      tags: "Bolt, Lightning, Quick"
   },
+
   {
-    name: "Close",
-    file: "Close.svg",
-    description: "Close",
+      name: "ArrowUP",
+      file: "ArrowUP.svg",
+      description: "Arrow up",
+      tags: "Arrow, Up"
   },
+
   {
-    name: "Search Thin",
-    file: "SearchThin.svg",
-    description: "Search Items",
+      name: "ArrowRight",
+      file: "ArrowRight.svg",
+      description: "Arrow Right",
+      tags: "Arrow, Right"
   },
+
   {
-    name: "Question",
-    file: "Question.svg",
-    description: "Add a question",
+      name: "ArrowLeft",
+      file: "ArrowLeft.svg",
+      description: "Arrow Left",
+      tags: "Arrow, Left"
   },
+
+  {
+      name: "ArrowDown",
+      file: "ArrowDown.svg",
+      description: "Arrow Down",
+      tags: "Arrow, Down"
+  },
+
+  {
+      name: "Close",
+      file: "Close.svg",
+      description: "Close",
+      tags: "Close, X"
+  },
+
+  {
+      name: "ChevronUP",
+      file: "ChevronUP.svg",
+      description: "Chevron Up Arrow",
+      tags: "Chevron, Arrow, Up"
+  },
+
+  {
+      name: "ChevronRight",
+      file: "ChevronRight.svg",
+      description: "Chevron Right Arrow",
+      tags: "Chevron, Arrow, Right"
+  },
+
+  {
+      name: "ChevronDown",
+      file: "ChevronDown.svg",
+      description: "Chevron Down Arrow",
+      tags: "Chevron, Arrow, Down"
+  },
+
+  {
+      name: "ChevronLeft",
+      file: "ChevronLeft.svg",
+      description: "Chevron Arrow",
+      tags: "Chevron, Arrow, Left"
+  },
+
+  {
+      name: "Inbox",
+      file: "Inbox.svg",
+      description: "Inbox",
+      tags: "Inbox, Incoming, Mail"
+  },
+
+  {
+      name: "Favorites",
+      file: "Favorites.svg",
+      description: "Favorites",
+      tags: "Favorites, Star, Bookmark"
+  },
+
+  {
+      name: "CloseSmall",
+      file: "CloseSmall.svg",
+      description: "Close Icon",
+      tags: "Close, X, No"
+  },
+
+  {
+      name: "MyWeek",
+      file: "MyWeek.svg",
+      description: "My Week",
+      tags: "Calendar, Week, My"
+  },
+
+  {
+      name: "MenuVertical",
+      file: "MenuVertical.svg",
+      description: "Vertical Menu Dots",
+      tags: "Dots, Menu, Vertical, 3 Dots"
+  },
+
+  {
+      name: "Menu",
+      file: "Menu.svg",
+      description: "Menu Icon ",
+      tags: "3 Dots, Dots, Menu"
+  },
+
+  {
+      name: "InviteUsers",
+      file: "InviteUsers.svg",
+      description: "Invite Users",
+      tags: "Users, Invite, Invitation"
+  },
+
+  {
+      name: "NavigationArrowLeft",
+      file: "NavigationArrowLeft.svg",
+      description: "Navigation, Arrow, Left",
+      tags: "Navigation, Arrow, Left"
+  },
+
+  {
+      name: "NavigationArrowRight",
+      file: "NavigationArrowRight.svg",
+      description: "Navigation Arrow Right",
+      tags: "Navigation, Arrow, Right"
+  },
+
+  {
+      name: "NavigationArrowDown",
+      file: "NavigationArrowDown.svg",
+      description: "Navigation Arrow Down",
+      tags: "Navigation, Arrow, Down"
+  },
+
+  {
+      name: "NavigationArrowUp",
+      file: "NavigationArrowUp.svg",
+      description: "Navigation Arrow",
+      tags: "Navigation, Arrow, Up"
+  },
+
+  {
+      name: "Notification",
+      file: "Notification.svg",
+      description: "Bell for notifications",
+      tags: "Notifications, Reminders, Bell"
+  },
+
+  {
+      name: "Search",
+      file: "Search.svg",
+      description: "Magnifier Glass",
+      tags: "Search, Find, Zoom"
+  },
+
+  {
+      name: "Talk",
+      file: "Talk.svg",
+      description: "Talk Bubble",
+      tags: "Chat, Bubble, Talk, Post, Comment"
+  },
+
+  {
+      name: "Workspaces",
+      file: "Workspaces.svg",
+      description: "Workspaces Icon",
+      tags: "Workspaces"
+  },
+
 ];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58625

increased by84.45%

Number of package files

41

increased by115.79%

Lines of code

388

increased by51.56%

Number of lines in readme file

60

increased by76.47%

Worsened metrics

Dev dependency count

4

increased by33.33%

No dependency changes