CSS Styling

- Refactored styling to be done via CSS variables rather than JavaScript during initialization
- Added CSS variable knobs to the demo page

Author: torrobinson

.github/workflows/npm_publish.yml

@@ -7,8 +7,6 @@ on:
   # Triggers the workflow on push or pull request events but only for the master branch
   push:
     branches: [ master ]
-  pull_request:
-    branches: [ master ]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

README.md

@@ -10,11 +10,12 @@ A web component for displaying the steps of a process and letting users move bet
 
 ### CDN
 
-Use the built file from npm from https://unpkg.com/progress-steps-webcomponent@latest
+Use the built files from npm from https://unpkg.com/progress-steps-webcomponent@latest
 
 ```html
-<!-- For example -->
-<script src="https://unpkg.com/progress-steps-webcomponent@latest"></script>
+<!-- For example, use a CDN and replace 'latest' with your intended version -->
+<link rel="stylesheet" href="https://unpkg.com/progress-steps-webcomponent@latest/dist/progress-steps.min.css"/>
+<script src="https://unpkg.com/progress-steps-webcomponent@latest/dist/progress-steps.min.js"></script>
 ```
 
 ### Manual
@@ -26,7 +27,7 @@ npm i
 npm run build
 ```
 
-And use the `dist/progress-steps.min.js` file
+And use the `dist/progress-steps.min.js` and `dist/progress-steps.min.css` files
 
 ## Configuration
 
@@ -94,53 +95,56 @@ myStepper.init({
 
 ### Styling
 
-Styling can be overridden by passing in CSS values to the `style` object. All options are entirely optional.
-The most commonly overridden value would be that of the color that the bar fills up with, `progressFillColor`
-
-```js
-myStepper.init({
-	steps: [
-		...
-	],
-	style: {
-		// The width of each step icon
-		stepWidth: 20,
-		// The font size of the step number and label
-		fontSize: 12,
-		// The border radius of the step icon
-		borderRadius: '25%',
-		// The thickness of the line/progress bar/borders
-		lineThickness: 2,
-		// The animation speed of the progress bar filling up
-		animationSpeed: '500ms',
-		// Whether or not to show labels or not
-		showLabels: true,
-		// The vertical margin of the labels, if shown
-		labelSpacing: 5,
-		// The font weight to use on step labels
-		stepLabelFontWeight: 'normal',
-		// The font color of step labels that are before the current step
-		previousLabelFontColor: 'red',
-		// The font color of the current step label
-		currentLabelFontColor: 'blue',
-		// The font weight of the current step label
-		currentStepLabelFontWeight: 'bold',
-		// The font color of step labels that are after the current step
-		futureLabelFontColor: 'green',
-		// The font color of step labels that are disabled
-		disabledLabelFontColor: 'maroon',
-		// The color to fill up, left-to-right, as steps are set to active
-		progressFillColor: '#cf78d9',
-		// The default color of the unfilled section of line and steps after the active step
-		progressUnfilledColor: '#d5dce2',
-		// The font color of the step icon that is currently active
-		currentStepFontColor: 'white',
-		// The fill-color for step icons that are after the current active step
-		futureStepFillColor: 'orange',
-		// The font color of the disabled steps
-		disabledStepFontColor: 'red',
-		// The fill-color for disabled step icons
-		disabledStepFillColor: 'blue'
-	},
-});
-```
+Styling defaults can be overridden by overriding CSS variables on your component instance:
+
+```css
+/* Ugly but complete style override demonstrating all the style components */
+#my-steps{
+	/* The color to fill up, left-to-right, as steps are set to active */
+	--progress-fill-color: #cf78d9;
+	/* The default color of the unfilled section of line and steps after the active step */
+	--progress-unfilled-color: purple;
+
+	/* The width of each step icon */
+	--step-width: 20px;
+	/* The font size of the step number and label */
+	--font-size: 12px;
+	/* The border radius of the step icon */
+	--step-border-radius: 25%;
+	/* The thickness of the line/progress bar/borders */
+	--line-thickness: 3px;
+
+	/* The animation speed of the progress bar filling up */
+	--animation-speed: 500ms;
+	/* Display attribute of the step labels. Show: 'inline-block', hide: 'none' */
+	--step-label-display: 'inline-block';
+	/* The vertical margin of the labels, if shown */
+	--step-label-spacing: 5px;
+	/* The font weight to use on step labels */
+	--step-label-font-weight: normal;
+
+	/* The font color of the step icon that is currently active */
+	--current-step-font-color: red;
+	/* The font color of the current step label */
+	--current-label-font-color: blue;
+	/* The font weight of the current step label */
+	--current-label-font-weight: bold;
+
+	/* The font color of step labels that are before the current step */
+	--previous-label-font-color: red;
+	/* The font color of the step icons that are before the current step */
+	--previous-step-font-color: pink;
+
+	/* The fill-color for step icons that are after the current active step */
+	--future-step-fill-color: orange;
+	/* The font color of step labels that are after the current step */
+	--future-label-font-color: green;
+
+	/* The font color of step labels that are disabled */
+	--disabled-label-font-color: maroon;
+	/* The font color of the disabled steps */
+	--disabled-step-font-color: red;
+	/* The fill-color for disabled step icons */
+	--disabled-step-fill-color: blue;
+}
+```

build.js

@@ -1,14 +1,15 @@
 // Requires
 var fs = require('fs');
 var UglifyJS = require('uglify-js');
+var UglifyCSS = require('uglifycss');
 
 // Vars
 var scriptFileName = 'progress-steps';
 var dir = __dirname;
 var sourceFolder = dir + '/src/';
 var distFolder = dir + '/dist/';
 
-// Minification
+// JS Minification
 var code = fs.readFileSync(sourceFolder + scriptFileName + '.js', 'utf8');
 var uglifiedCode = UglifyJS.minify(code, {
 	mangle: {
@@ -17,6 +18,12 @@ var uglifiedCode = UglifyJS.minify(code, {
 	nameCache: {},
 }).code;
 
+// CSS Minification
+var css = fs.readFileSync(sourceFolder + scriptFileName + '.css', 'utf8');
+var uglifiedCss = UglifyCSS.processString(css, {
+});
+
+
 // Create dist folder if not exists
 if (!fs.existsSync(distFolder)) {
 	fs.mkdirSync(distFolder);
@@ -34,3 +41,16 @@ fs.writeFile(
 		}
 	}
 );
+
+// Create the CSS
+fs.writeFile(
+	distFolder + scriptFileName + '.min.css',
+	uglifiedCss,
+	function (err) {
+		if (err) {
+			console.log(err);
+		} else {
+			console.log('Minified css saved');
+		}
+	}
+);