Merge pull request #133 from pxblue/dev

Publish v1.3.0

.circleci/config.yml

@@ -83,66 +83,24 @@ jobs:
             at: .
         - run:
             name: Authenticate with registry
-            command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
+            command:  |
+              echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
+              echo "//registry.yarnpkg.com/:_authToken=$NPM_TOKEN" >> ~/.npmrc
         - run:
             name: Publish @pxblue/icons
-            command:  |
-              MASTER_VERSION=`node -p "require('./package.json').version"`
-              NPM_LATEST_VERSION=`npm show @pxblue/icons version`
-              if ! [ $MASTER_VERSION == $NPM_LATEST_VERSION ];
-              then
-                  npm publish
-              else
-                  echo "Latest version is already published."
-              fi
+            command: yarn publish:package -b $CIRCLE_BRANCH
         - run:
             name: Publish @pxblue/symbols
-            command:  |
-              cd symbols
-              MASTER_VERSION=`node -p "require('./package.json').version"`
-              NPM_LATEST_VERSION=`npm show @pxblue/symbols version`
-              if ! [ $MASTER_VERSION == $NPM_LATEST_VERSION ];
-              then
-                  npm publish
-              else
-                  echo "Latest version is already published."
-              fi
+            command: cd symbols &&  yarn publish:package -b $CIRCLE_BRANCH
         - run:
             name: Publish @pxblue/icons-svg
-            command:  |
-              cd svg
-              MASTER_VERSION=`node -p "require('./package.json').version"`
-              NPM_LATEST_VERSION=`npm show @pxblue/icons-svg version`
-              if ! [ $MASTER_VERSION == $NPM_LATEST_VERSION ];
-              then
-                  npm publish
-              else
-                  echo "Latest version is already published."
-              fi
+            command: cd svg && yarn publish:package -b $CIRCLE_BRANCH
         - run:
             name: Publish @pxblue/ng-progress-icons
-            command:  |
-              cd progress/angular/dist
-              MASTER_VERSION=`node -p "require('./package.json').version"`
-              NPM_LATEST_VERSION=`npm show @pxblue/ng-progress-icons version`
-              if ! [ $MASTER_VERSION == $NPM_LATEST_VERSION ];
-              then
-                  npm publish
-              else
-                  echo "Latest version is already published."
-              fi
+            command: cd progress/angular/components && yarn publish:package -b $CIRCLE_BRANCH
         - run:
             name: Publish @pxblue/react-progress-icons
-            command:  |
-              cd progress/react/icons
-              MASTER_VERSION=`node -p "require('./package.json').version"`
-              NPM_LATEST_VERSION=`npm show @pxblue/react-progress-icons version`
-              if ! [ $MASTER_VERSION == $NPM_LATEST_VERSION ];
-              then
-                  npm publish
-              else
-                  echo "Latest version is already published."
-              fi
+            command: cd progress/react/icons && yarn publish:package -b $CIRCLE_BRANCH
 workflows:
   version: 2
   icons:
@@ -155,3 +113,4 @@ workflows:
             branches:
               only:
                 - master
+                - dev

CHANGELOG.md

@@ -1,27 +1,34 @@
 # Changelog
 
-## v1.2.0
+## v1.3.0 (June 23, 2021)
 
 ### Added
 
--   Brand logos: Amazon, Amazon Alexa, Apple, and Google.
+-   Device icons: Battery Large, Battery Large Outline, Battery Large Reset, Battery Large Reset Outline and Battery Large Showing Terminals
+-   General icons: Technician
+
+## v1.2.0 (March 25, 2021)
+
+### Added
+
+-   Brand logos: Amazon, Amazon Alexa, Apple Logo and Google.
 -   Industrial icons: Pressure and Pressure Alt.
 -   System icon: Face ID.
 
-## v1.1.2
+## v1.1.2 (January 11, 2021)
 
 ### Fixed
 
 -   Mildly crooked vector path in Department and Departments icons
 -   Wrong ratio in the Eaton logos
 
-## v1.1.1
+## v1.1.1 (December 10, 2020)
 
 ### Fixed
 
 -   Missing icon metadata in the index file
 
-## v1.1.0
+## v1.1.0 (September 30, 2020)
 
 ### Added
 
@@ -32,7 +39,7 @@
 -   PPE icons for Hearing Protection, Safety Boot, Safety Glasses, and Distance Apart.
 -   Device icons for AMI Gateway, IPPE Vibrate, IPPE Vibrate Off, IPPE Vibrate Outlined, and Device Activating.
 
-## v1.0.26
+## v1.0.26 (July 2, 2020)
 
 ### Changed
 
@@ -42,7 +49,7 @@
 
 -   Fixed a few alignment and color issues
 
-## v1.0.24
+## v1.0.24 (September 27, 2019)
 
 ### Added
 

CODEOWNERS

@@ -0,0 +1 @@
+* @huayunh @joebochill @emclaug2

PUBLISHING.md

@@ -1,29 +1,43 @@
 # Publishing Instructions
 
-To update the version @pxblue/icons version number, edit the version in `package.json`. 
-To update the version @pxblue/symbols version number, edit the version in `symbols/package.json`. 
-To update the version @pxblue/icons-svg version number, edit the version in `svg/package.json`. 
+## Automatic Publishing
 
-To publish a new package through NPM, run the following commands from the root folder: 
+This package is published to NPM automatically by CircleCI when code is merged into the `dev` or `master` branches. To publish a new version, simply update the version in `package.json` and merge your code into the appropriate branch.
+- The `dev` branch will publish versions marked as `alpha` or `beta`.
+- The `master` branch will publish any version (`alpha`, `beta`, or `latest`).
+  In both cases, the code will only be published if the version number differs from the current version published under the respective dist tag.
+
+## Manually Publishing
+
+If you need to publish a package manually, you can run the following commands from the root folder:
 
 ### @pxblue/icons
 ```
 yarn build:all
-npm publish --tag <alpha | beta>
+yarn publish:package
 ```
 
 ### @pxblue/icons-svg
 ```
 yarn build:all
 cd svg
-npm publish --tag <alpha | beta>
+yarn publish:package
 ```
 
 ### @pxblue/symbols
 ```
 yarn build:all
 cd symbols
-npm publish --tag <alpha | beta>
+yarn publish:package
+```
+
+The publishing script will look at the version in the `package.json` and automatically determine whether to publish an alpha, beta, or latest package.
+
+For this command to work, you must have an NPM token configured in your environment variables or you can perform a login prior to executing the publish command via:
+
+```sh
+yarn build 
+npm adduser && yarn publish:package
 ```
 
-> The above commands should only be run for `alpha` or `beta` packages.  This repo's CircleCI will automatically publish latest packages from the master branch. 
+> Publishing manually should only be done for `alpha` or `beta` packages. The command will work for `latest` packages, but this should be avoided except in rare situations where the automatic publishing functionality is not working in CircleCI.

design/META.json

@@ -2169,6 +2169,60 @@
             "tags": ["pressure", "gauge", "psi", "pipe"],
             "author": "Eric Atha (PX Blue)",
             "size": 24
+        },
+        {
+            "name": "Battery Large Reset",
+            "filename": "battery_large_reset.svg",
+            "family": ["Devices"],
+            "style": "baseline",
+            "tags": ["battery", "test", "reset", "large battery", "lead acid", "batteries"],
+            "author": "Huayun Huang (PX Blue)",
+            "size": 24
+        },
+        {
+            "name": "Battery Large Reset Outline",
+            "filename": "battery_large_reset_outline.svg",
+            "family": ["Devices"],
+            "style": "baseline",
+            "tags": ["battery", "test", "reset", "outline", "large battery", "lead acid", "batteries"],
+            "author": "Amy Deng (PX Blue)",
+            "size": 24
+        },
+        {
+            "name": "Battery Large Showing Terminals",
+            "filename": "battery_large_showing_terminals.svg",
+            "family": ["Devices"],
+            "style": "baseline",
+            "tags": ["battery", "terminal", "terminals", "large battery", "lead acid", "batteries"],
+            "author": "Amy Deng (PX Blue)",
+            "size": 24
+        },
+        {
+            "name": "Battery Large",
+            "filename": "battery_large.svg",
+            "family": ["Devices"],
+            "style": "baseline",
+            "tags": ["battery", "large battery", "lead acid", "batteries"],
+            "author": "Huayun Huang (PX Blue)",
+            "size": 24
+        },
+        {
+            "name": "Battery Large Outline",
+            "filename": "battery_large_outline.svg",
+            "family": ["Devices"],
+            "style": "baseline",
+            "tags": ["battery", "large battery", "lead acid", "batteries"],
+            "author": "Huayun Huang (PX Blue)",
+            "size": 24
+        },
+        {
+            "name": "Technician",
+            "filename": "technician.svg",
+            "family": ["General"],
+            "style": "baseline",
+            "tags": ["technician", "electrician", "service", "person", "account hard hat"],
+            "author": "Austin Andrews, materialdesignicons.com",
+            "size": 24
         }
     ]
 }

design/README.md

@@ -1,6 +1,6 @@
 # Power Xpert Blue Icons
 
-This repository contains icon files for Power Xpert Blue. These icons are grouped into 'family' folders of related icons. Family folders follow a similar naming convention to Material Design, e.g., **Status** and **Devices**. Each icon should be available as a clean, minified SVG file. You may optionally include a source (AI) file for the icon as well - it may be beneficial to group families of icons into a single AI file.
+This repository contains icon files for Power Xpert Blue. These icons are grouped into 'family' folders of related icons. Family folders follow a similar naming convention to Material Design, e.g., **Status** and **Devices**. Each icon should be available as a clean, minified SVG file. You may optionally include a source (AI) file for the icon as well - it may be beneficial to group families of icons into a single AI file. Each icon SVG file will need converted to PNG icons files so the icons are available in two formats.
 
 ## Icon Approval
 
@@ -45,6 +45,48 @@ Select the following options from the export dialog:
 
 Icon SVGs should follow the naming convention of just using an icon name (e.g. `device`). If the name of an icon has more than one word, the name must have an underscore between each word (e.g. `battery_full`). Do not use dashes. Do not use prefixes or suffixes - these will be automatically applied as part of the build process.
 
+## PNG Icons
+
+Power Xpert Blue offers matching PNG icons for each SVG icon in this repository, located in the PNG folders. Each SVG icon is converted to PNG format in four colors and two sizes of 24dp and 48dp.
+
+Colors:
+```
+Blue 500 #007bc1
+Black 500 #424e54
+Gray 500 #727e84
+White 50 #ffffff
+```
+Size:
+```
+24dp and 48dp
+```
+
+PNG icons can be created using your favorite tool of choice or if you're comfortable you can choose to use the NPM package and the steps below. For complete usage and documentation look at [convert-svg-to-png](https://www.npmjs.com/package/convert-svg-to-png) page.
+
+## Installation
+
+```
+yarn global add convert-svg-to-png
+```
+## Convert-SVG-To-PNG cli quick steps
+First change the default SVG icon colors.
+- Update the path to include ```<path fill="your-hex-color"```
+- Find and replace in your IDE works for this or your favorite tool.
+- Caution that some SVG's have multiple paths and can require addtional fill colors.
+
+To create PNG icons from existing SVG icons in the same directory at a height and width of 24dp.
+
+Convert one specific SVG icon to a PNG icon.
+- Open terminal and change directories to the location of SVG files.
+- Run ```convert-svg-to-png <file-name>.svg --height 24 --width 24 --scale 1```
+- The original SVG icon file will not be changed and new file with the same name will be created in PNG format.
+- Copy the new PNG icon file to the corresponding PNG folder in this repository. 
+
+Convert all SVG icons to PNG icons.
+- Open terminal and change directories to the location of SVG files.
+- Run ```convert-svg-to-png *.svg --height 24 --width 24 --scale 1```
+- The original SVG icon files will not be changed and new files with the same name will be created in PNG format.
+- Copy the new PNG icon files to the corresponding PNG folder in this repository.
 
 ## Git Steps for Designers
 The following instructions are for individuals who are comfortable working with GitHub and the command line on their computer. If you prefer, you can send new icons directly to the PX Blue team via email and we will take care of this part of the process for you.