Add ability to put class names on label and progress element

.eslintrc

@@ -1,3 +1,5 @@
 {
-	"extends": ["@kev_nz/eslint-config"]
-}
+  "extends": [
+    "@kev_nz"
+  ]
+}

.vscode/settings.json

@@ -1,12 +1,70 @@
 {
-  "eslint.packageManager": "yarn",
+  "workbench.colorCustomizations": {
+    "titleBar.activeBackground": "#61dafb",
+    "titleBar.inactiveBackground": "#61dafbcc",
+    "titleBar.border": "#33373f",
+    "activityBar.foreground": "#282c34",
+    "activityBar.background": "#61dafb",
+    "tab.activeBorder": "#61dafb",
+    "titleBar.activeForeground": "#34495e"
+  },
+  "files.autoSaveDelay": 800,
   "eslint.autoFixOnSave": true,
   "editor.formatOnSave": true,
   "[javascript]": {
     "editor.formatOnSave": false
   },
-  "workbench.colorCustomizations": {
-    "titleBar.activeBackground": "#0668fa",
-    "titleBar.inactiveBackground": "#165681cc"
-  }
+  "vsicons.presets.jsOfficial": true,
+  "vsicons.presets.jsonOfficial": true,
+  "vsicons.associations.folders": [
+    {
+      "icon": "view",
+      "extensions": [
+        "ui"
+      ],
+      "filename": true,
+      "format": "svg"
+    },
+    {
+      "icon": "helper",
+      "extensions": [
+        "tasks"
+      ],
+      "filename": true,
+      "format": "svg"
+    },
+    {
+      "icon": "video",
+      "extensions": [
+        "casting"
+      ],
+      "filename": true,
+      "format": "svg"
+    },
+    {
+      "icon": "db",
+      "extensions": [
+        "queries",
+        "migrations"
+      ],
+      "filename": true,
+      "format": "svg"
+    },
+    {
+      "icon": "api",
+      "extensions": [
+        "core"
+      ],
+      "filename": true,
+      "format": "svg"
+    },
+    {
+      "icon": "component",
+      "extensions": [
+        "features"
+      ],
+      "filename": true,
+      "format": "svg"
+    }
+  ]
 }

src/progress/index.js

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react'
+import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import useFormElement from '../utils/use-form-element'
 
@@ -7,21 +8,51 @@ import useFormElement from '../utils/use-form-element'
  *
  */
 const Progress = forwardRef(
-  ({ name, initialValue, label, type, ...otherProps }, ref) => {
+  (
+    {
+      name,
+      initialValue,
+      label,
+      type,
+      className,
+      labelClassName,
+      progressClassName,
+      ...otherProps
+    },
+    ref
+  ) => {
     const { id, value, handleChange, inputRef } = useFormElement(
       initialValue,
       ref
     )
+    const labelStyleProp =
+      labelClassName === ''
+        ? {}
+        : {
+            className: labelClassName,
+          }
+    const progressStyleProp =
+      progressClassName === ''
+        ? {}
+        : {
+            className: progressClassName,
+          }
+    const hasLabel = label.length > 0
 
     return (
-      <div className="rfe-form__row rfe-progress">
-        <label htmlFor={id}>{label || ''}</label>
+      <div className={classNames(`rfe-form__row`, 'rfe-progress', className)}>
+        {hasLabel && (
+          <label htmlFor={id} {...labelStyleProp}>
+            {label || ''}
+          </label>
+        )}
         <progress
           id={id}
           ref={inputRef}
           name={name}
           onChange={handleChange}
           value={value}
+          {...progressStyleProp}
           {...otherProps}
         />
       </div>
@@ -37,10 +68,16 @@ Progress.propTypes = {
   name: PropTypes.string,
   initialValue: PropTypes.number,
   label: PropTypes.string,
+  className: PropTypes.string,
+  progressClassName: PropTypes.string,
+  labelClassName: PropTypes.string,
 }
 
 Progress.defaultProps = {
   name: 'Progress',
   initialValue: '',
   label: 'Progress Label:',
+  className: '',
+  progressClassName: '',
+  labelClassName: '',
 }

src/row/index.js

@@ -1,9 +1,4 @@
-import React, {
-  createRef,
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-} from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { childMapper, formElementMapper } from '../utils/children'