@patternfly/quickstarts 2.4.1 → 5.0.0-prerelease.0

package/src/controller/QuickStartTasks.scss

@@ -5,16 +5,16 @@
     }
 
     li {
-      &.pf-c-wizard__nav-item {
+      &.pf-v5-c-wizard__nav-item {
         list-style-type: none;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
-        margin-bottom: var(--pf-global--spacer--xs);
+        margin-bottom: var(--pf-v5-global--spacer--xs);
       }
     }
     .pfext-quick-start-task__content {
-      margin-bottom: var(--pf-global--spacer--md);
+      margin-bottom: var(--pf-v5-global--spacer--md);
     }
     // Custom styles on PF React List rendered in custom react renderer
     .task-pflist {
@@ -23,13 +23,13 @@
         margin-bottom: 6px;
       }
       &-subtitle {
-        color: var(--pf-global--Color--200);
+        color: var(--pf-v5-global--Color--200);
         font-size: 16px;
       }
       &-list {
         font-size: 16px;
         &--prereq {
-          padding-left: var(--pf-global--spacer--lg);
+          padding-left: var(--pf-v5-global--spacer--lg);
           li + li {
             margin-top: 4px;
           }
@@ -58,25 +58,25 @@
             }
           }
           &__content {
-            .pf-c-alert {
+            .pf-v5-c-alert {
               // add margins to match design
-              margin: var(--pf-global--spacer--md) 0;
+              margin: var(--pf-v5-global--spacer--md) 0;
             }
-            .pf-c-alert__title {
+            .pf-v5-c-alert__title {
               // remove margins from markdown css
               margin-top: 0;
               margin-bottom: 0;
               // lift PF style specificity to override markdown css
-              font-weight: var(--pf-c-alert__title--FontWeight);
+              font-weight: var(--pf-v5-c-alert__title--FontWeight);
               font-family: inherit;
               line-height: inherit;
-              color: var(--pf-c-alert__title--Color);
+              color: var(--pf-v5-c-alert__title--Color);
               word-break: break-word;
             }
             .task-pflist-list__item__content__note {
-              background-color: var(--pf-global--palette--blue-50);
-              border-color: var(--pf-global--active-color--200);
-              margin: var(--pf-global--spacer--md) 0;
+              background-color: var(--pf-v5-global--palette--blue-50);
+              border-color: var(--pf-v5-global--active-color--200);
+              margin: var(--pf-v5-global--spacer--md) 0;
               &__body {
                 font-size: 14px;
               }

package/src/controller/QuickStartTasks.tsx

@@ -8,13 +8,13 @@ import QuickStartTaskReview from './QuickStartTaskReview';
 
 import './QuickStartTasks.scss';
 
-type QuickStartTaskProps = {
+interface QuickStartTaskProps {
   tasks: QuickStartTask[];
   taskNumber: number;
   allTaskStatuses: QuickStartTaskStatus[];
   onTaskReview: (reviewState: QuickStartTaskStatus) => void;
   onTaskSelect: (activeQuickStartId) => void;
-};
+}
 
 const QuickStartTasks: React.FC<QuickStartTaskProps> = ({
   tasks,

package/src/controller/__tests__/QuickStartTaskHeader.spec.tsx

@@ -23,28 +23,15 @@ describe('QuickStartTaskHeader', () => {
   });
 
   it('should render subtitle for active task', () => {
+    expect(wrapper.find(WizardNavItem).dive().find(Title).length).toBe(1);
     expect(
-      wrapper
-        .find(WizardNavItem)
-        .dive()
-        .find(Title).length,
-    ).toBe(1);
-    expect(
-      wrapper
-        .find(WizardNavItem)
-        .dive()
-        .find('[data-test-id="quick-start-task-subtitle"]')
-        .props().children,
+      wrapper.find(WizardNavItem).dive().find('[data-test-id="quick-start-task-subtitle"]').props()
+        .children,
     ).toEqual([' ', props.subtitle]);
   });
   it('should not render subtitle if task is not active', () => {
     wrapper = shallow(<QuickStartTaskHeader {...props} isActiveTask={false} />);
-    expect(
-      wrapper
-        .find(WizardNavItem)
-        .dive()
-        .find(Title).length,
-    ).toBe(1);
+    expect(wrapper.find(WizardNavItem).dive().find(Title).length).toBe(1);
     expect(
       wrapper
         .find(WizardNavItem)

package/src/styles/_base.scss

@@ -6,7 +6,7 @@
 
   // match pf4 styling / table col head styling
   dt {
-    font-weight: var(--pf-global--FontWeight--bold); }
+    font-weight: var(--pf-v5-global--FontWeight--bold); }
 
   dd {
     margin-bottom: 20px; }
@@ -28,8 +28,8 @@
     margin-right: 7px;
   }
 
-  .pf-c-list {
-    --pf-c-list--PaddingLeft: 20px;
+  .pf-v5-c-list {
+    --pf-v5-c-list--PaddingLeft: 20px;
   }
 }
 
@@ -40,8 +40,8 @@
 .pfext-page-layout__content,
 // catalog item prereq popover
 .pfext-popover__base {
-  --pf-global--FontSize--md: 14px;
-  --pf-global--FontSize--sm: 13px;
+  --pf-v5-global--FontSize--md: 14px;
+  --pf-v5-global--FontSize--sm: 13px;
 
   ul {
       list-style-type: disc;

package/src/styles/_dark-custom-override.scss

@@ -1,4 +1,4 @@
-.pf-theme-dark {
+.pf-v5-theme-dark {
   .pfext-catalog-item-icon__img--large {
     // Not perfect, but gives a better result for colors than just inverting
     // by inverts to switch b/w, then rotates to get colors approximately back
@@ -7,56 +7,56 @@
 
   // duration color was gray on white but on the blue header, only white text works
   .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
-    color: var(--pf-global--Color--light-100);
+    color: var(--pf-v5-global--Color--light-100);
   }
 
   .pfext-quick-start-task-header__subtitle {
-    color: var(--pf-global--palette--black-200) !important;
+    color: var(--pf-v5-global--palette--black-200) !important;
   }
 
   .pfext-quick-start-task-header__task-icon-init {
-    background-color: var(--pf-global--primary-color--300);
+    background-color: var(--pf-v5-global--primary-color--300);
   }
 
   .pfext-quick-start-task-header__tryagain {
-    color: var(--pf-global--palette--black-200) !important;
+    color: var(--pf-v5-global--palette--black-200) !important;
   }
 
-  .pfext-markdown-view pre {
-    background-color: var(--pf-global--BackgroundColor--100);
-    border-color: var(--pf-global--BorderColor--100);
+  .pfext-markdown-view pre:not(.pfext-code-block__pre) {
+    background-color: var(--pf-v5-global--BackgroundColor--100);
+    border-color: var(--pf-v5-global--BorderColor--100);
   }
 
   .pfext-markdown-view code {
-    color: var(--pf-global--Color--100);
-    background-color: var(--pf-global--palette--black-600);
+    color: var(--pf-v5-global--Color--100);
+    background-color: var(--pf-v5-global--palette--black-600);
   }
 
-  .pfext-markdown-view .pf-c-code-block,
-  .pfext-markdown-view .pf-c-code-block code {
-    background-color: var(--pf-global--BackgroundColor--400);
+  .pfext-markdown-view .pf-v5-c-code-block,
+  .pfext-markdown-view .pf-v5-c-code-block code {
+    background-color: var(--pf-v5-global--BackgroundColor--400);
   }
 
-  :where(.pfext-markdown-view) .pf-c-clipboard-copy.pf-m-inline {
-    --pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  :where(.pfext-markdown-view) .pf-v5-c-clipboard-copy.pf-m-inline {
+    --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   }
 
-  // Make the cards light on dark background. It would be better to use pf-c-page__main-section variable but we aren't using a page section here.
+  // Make the cards light on dark background. It would be better to use pf-v5-c-page__main-section variable but we aren't using a page section here.
   .pfext-page-layout__content {
-    background-color: var(--pf-global--BackgroundColor--200);
+    background-color: var(--pf-v5-global--BackgroundColor--200);
   }
 
-  .pfext-quick-start-catalog__gallery-item .pf-c-card {
-    --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  .pfext-quick-start-catalog__gallery-item .pf-v5-c-card {
+    --pf-v5-c-card--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   }
 
   // Alerts currently has the wrong background in the PF dark stylesheet. This can be removed once that is fixed.
-  .pf-c-alert {
-    --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-700);
-    --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-700);
-    --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-700);
-    --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-700);
-    --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-700);
-    --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-700);
-  }
-}
+  .pf-v5-c-alert {
+    --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--palette--black-700);
+    --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-global--palette--black-700);
+    --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--pf-v5-global--palette--black-700);
+    --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-v5-global--palette--black-700);
+    --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-v5-global--palette--black-700);
+    --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--palette--black-700);
+  }
+}

package/src/styles/legacy-bootstrap/_variables.scss

@@ -1,14 +1,14 @@
 // PF4 overrides
 $font-size-base: 14px;
-$font-size-h1: var(--pf-global--FontSize--2xl);
+$font-size-h1: var(--pf-v5-global--FontSize--2xl);
 $font-size-h2: 20px; // must be literal value because of calculation in patternfly/dist/sass/patternfly/_list-view.scss
-$font-size-h3: var(--pf-global--FontSize--lg);
-$font-size-h4: var(--pf-global--FontSize--md);
-$font-size-h5: var(--pf-global--FontSize--md);
-$font-size-h6: var(--pf-global--FontSize--md);
+$font-size-h3: var(--pf-v5-global--FontSize--lg);
+$font-size-h4: var(--pf-v5-global--FontSize--md);
+$font-size-h5: var(--pf-v5-global--FontSize--md);
+$font-size-h6: var(--pf-v5-global--FontSize--md);
 $grid-gutter-width: 30px;
-$headings-font-family: var(--pf-global--FontFamily--heading--sans-serif);
-$headings-font-weight: var(--pf-global--FontWeight--normal);
+$headings-font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
+$headings-font-weight: var(--pf-v5-global--FontWeight--normal);
 
 // PF3 variables
 $color-pf-black:                 #030303 !default;

package/src/styles/patternfly-global.scss

@@ -5,12 +5,12 @@
 // TODO: Investigate if we can remove and/or nest these within patternfly-nested.css
 // what do we really need to expose globally?
 // here are the classes that exist outside the scope of .pfext-quick-start__base:
-// class="pf-c-popover pfext-quick-start__base pf-m-right"
-// class="pf-c-modal-box pfext-modal pfext-quick-start-drawer__modal pfext-quick-start__base pf-m-sm"
-// class="pf-c-backdrop__open"
-// class="pf-c-backdrop"
-// class="pf-l-bullseye"
-// class="pf-c-tooltip pf-m-top pfext-quick-start__base"
+// class="pf-v5-c-popover pfext-quick-start__base pf-m-right"
+// class="pf-v5-c-modal-box pfext-modal pfext-quick-start-drawer__modal pfext-quick-start__base pf-m-sm"
+// class="pf-v5-c-backdrop__open"
+// class="pf-v5-c-backdrop"
+// class="pf-v5-l-bullseye"
+// class="pf-v5-c-tooltip pf-m-top pfext-quick-start__base"
 
 @import '@patternfly/patternfly/sass-utilities/all';
 // gets added globally to :root

package/src/styles/patternfly-nested.scss

@@ -5,7 +5,7 @@
 @import '@patternfly/patternfly/sass-utilities/all';
 
 .pfext-quick-start__base {
-  $pf-global--enable-reset: false;
+  $pf-v5-global--enable-reset: false;
   @import '@patternfly/patternfly/base/common';
   @import '@patternfly/patternfly/utilities/Accessibility/accessibility';
 

package/src/utils/PluralResolver.ts

@@ -1,5 +1,4 @@
 /* eslint-disable */
-// @ts-nocheck
 // https://github.com/i18next/i18next/blob/master/src/PluralResolver.js
 
 const sets = [
@@ -153,16 +152,16 @@ const sets = [
 ];
 
 const _rulesPluralsTypes = {
-  1: function(n) {
+  1: function (n) {
     return Number(n > 1);
   },
-  2: function(n) {
+  2: function (n) {
     return Number(n != 1);
   },
-  3: function(n) {
+  3: function (n) {
     return 0;
   },
-  4: function(n) {
+  4: function (n) {
     return Number(
       n % 10 == 1 && n % 100 != 11
         ? 0
@@ -171,7 +170,7 @@ const _rulesPluralsTypes = {
         : 2,
     );
   },
-  5: function(n) {
+  5: function (n) {
     return Number(
       n == 0
         ? 0
@@ -186,50 +185,50 @@ const _rulesPluralsTypes = {
         : 5,
     );
   },
-  6: function(n) {
+  6: function (n) {
     return Number(n == 1 ? 0 : n >= 2 && n <= 4 ? 1 : 2);
   },
-  7: function(n) {
+  7: function (n) {
     return Number(
       n == 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2,
     );
   },
-  8: function(n) {
+  8: function (n) {
     return Number(n == 1 ? 0 : n == 2 ? 1 : n != 8 && n != 11 ? 2 : 3);
   },
-  9: function(n) {
+  9: function (n) {
     return Number(n >= 2);
   },
-  10: function(n) {
+  10: function (n) {
     return Number(n == 1 ? 0 : n == 2 ? 1 : n < 7 ? 2 : n < 11 ? 3 : 4);
   },
-  11: function(n) {
+  11: function (n) {
     return Number(n == 1 || n == 11 ? 0 : n == 2 || n == 12 ? 1 : n > 2 && n < 20 ? 2 : 3);
   },
-  12: function(n) {
+  12: function (n) {
     return Number(n % 10 != 1 || n % 100 == 11);
   },
-  13: function(n) {
+  13: function (n) {
     return Number(n !== 0);
   },
-  14: function(n) {
+  14: function (n) {
     return Number(n == 1 ? 0 : n == 2 ? 1 : n == 3 ? 2 : 3);
   },
-  15: function(n) {
+  15: function (n) {
     return Number(
       n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2,
     );
   },
-  16: function(n) {
+  16: function (n) {
     return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n !== 0 ? 1 : 2);
   },
-  17: function(n) {
+  17: function (n) {
     return Number(n == 1 || (n % 10 == 1 && n % 100 != 11) ? 0 : 1);
   },
-  18: function(n) {
+  18: function (n) {
     return Number(n == 0 ? 0 : n == 1 ? 1 : 2);
   },
-  19: function(n) {
+  19: function (n) {
     return Number(
       n == 1
         ? 0
@@ -240,13 +239,13 @@ const _rulesPluralsTypes = {
         : 3,
     );
   },
-  20: function(n) {
+  20: function (n) {
     return Number(n == 1 ? 0 : n == 0 || (n % 100 > 0 && n % 100 < 20) ? 1 : 2);
   },
-  21: function(n) {
+  21: function (n) {
     return Number(n % 100 == 1 ? 1 : n % 100 == 2 ? 2 : n % 100 == 3 || n % 100 == 4 ? 3 : 0);
   },
-  22: function(n) {
+  22: function (n) {
     return Number(n == 1 ? 0 : n == 2 ? 1 : (n < 0 || n > 10) && n % 10 == 0 ? 2 : 3);
   },
 };
@@ -265,6 +264,13 @@ function createRules() {
 }
 
 class PluralResolver {
+  options: {
+    simplifyPluralSuffix?: string;
+    compatibilityJSON?: string;
+    prepend?: boolean;
+  };
+  rules: {};
+
   constructor(options = {}) {
     this.options = options;
 

package/src/utils/asciidoc-procedure-parser.ts

@@ -24,10 +24,8 @@ export const ProcQuickStartParser = (
       proc = task;
       answer = {};
     } else {
-      // @ts-ignore
       proc = task.proc;
       answer = task;
-      // @ts-ignore
       delete task.proc;
     }
 
@@ -116,8 +114,8 @@ export const ProcQuickStartParser = (
     );
     answer.review.failedTaskHelp = replaceEnvironmentVariables(
       answer.review.failedTaskHelp ||
-      reviewFailed ||
-      'This task isn’t verified yet. Try the task again.',
+        reviewFailed ||
+        'This task isn’t verified yet. Try the task again.',
     );
     answer.summary = answer.summary || {};
     answer.summary.success = replaceEnvironmentVariables(

package/src/utils/help-topic-context.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HelpTopic } from './help-topic-types';
 
-export type HelpTopicContextValues = {
+export interface HelpTopicContextValues {
   helpTopics?: HelpTopic[];
   setHelpTopics?: React.Dispatch<React.SetStateAction<HelpTopic[]>>;
   activeHelpTopic?: HelpTopic;
@@ -10,7 +10,7 @@ export type HelpTopicContextValues = {
   setFilteredHelpTopics?: React.Dispatch<React.SetStateAction<HelpTopic[]>>;
   loading?: boolean;
   setLoading?: any;
-};
+}
 
 export const HelpTopicContextDefaults = {
   helpTopics: [],
@@ -45,9 +45,7 @@ export const useValuesForHelpTopicContext = (
 
   const setActiveHelpTopicByName = React.useCallback(
     (helpTopicName: string) => {
-      const topic = helpTopics.find((t) => {
-        return t.name === helpTopicName;
-      });
+      const topic = helpTopics.find((t) => t.name === helpTopicName);
       if (!helpTopicName) {
         setActiveHelpTopic(null);
         return;

package/src/utils/help-topic-types.ts

@@ -1,16 +1,16 @@
-export type HelpTopicLink = {
+export interface HelpTopicLink {
   href: string;
   text?: string;
   // open link in new tab
   newTab?: boolean;
   // add PF icon indicating link is external
   isExternal?: boolean;
-};
+}
 
-export type HelpTopic = {
+export interface HelpTopic {
   name: string;
   title: string;
   tags: string[];
   content: string;
   links?: HelpTopicLink[];
-};
+}

package/src/utils/quick-start-context.tsx

@@ -19,9 +19,9 @@ import { getQuickStartStatusCount, getTaskStatusKey } from './quick-start-utils'
 
 const pluralResolver = new PluralResolver({ simplifyPluralSuffix: true });
 
-export type FooterProps = {
+export interface FooterProps {
   show?: boolean;
-};
+}
 
 export const getDefaultQuickStartState = (
   totalTasks?: number,
@@ -39,7 +39,7 @@ export const getDefaultQuickStartState = (
   return defaultQuickStartState;
 };
 
-export type QuickStartContextValues = {
+export interface QuickStartContextValues {
   allQuickStarts?: QuickStart[];
   setAllQuickStarts?: React.Dispatch<React.SetStateAction<QuickStart[]>>;
   activeQuickStartID?: string;
@@ -60,7 +60,7 @@ export type QuickStartContextValues = {
   useQueryParams?: boolean;
   markdown?: {
     extensions?: any[];
-    renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
+    renderExtension?: (docContext: Document, rootSelector: string) => React.ReactNode;
   };
   resourceBundle?: any;
   getResource?: any;
@@ -79,7 +79,7 @@ export type QuickStartContextValues = {
   setLoading?: any;
   alwaysShowTaskReview?: boolean;
   setAlwaysShowTaskReview?: any;
-};
+}
 
 export const QuickStartContextDefaults = {
   allQuickStarts: [],
@@ -150,14 +150,12 @@ export const useValuesForQuickStartContext = (
     });
   };
   const findResource = useCallback(
-    (resource: string, count?: number) => {
-      return getResource(
+    (resource: string, count?: number) => getResource(
         resource,
         count !== undefined ? { count } : null,
         resourceBundle,
         language,
-      );
-    },
+      ),
     [resourceBundle, language],
   );
   const [loading, setLoading] = React.useState(combinedValue.loading);
@@ -468,10 +466,8 @@ export const useValuesForQuickStartContext = (
 export const QuickStartContextProvider: React.FC<{
   children: React.ReactNode;
   value: QuickStartContextValues;
-}> = ({ children, value }) => {
-  return (
+}> = ({ children, value }) => (
     <QuickStartContext.Provider value={useValuesForQuickStartContext(value)}>
       {children}
     </QuickStartContext.Provider>
   );
-};

package/src/utils/quick-start-types.ts

@@ -3,14 +3,14 @@ import {
   ObjectMetadata,
 } from '../ConsoleInternal/module/k8s/types';
 
-export type QuickStart = {
+export interface QuickStart {
   apiVersion?: string;
   kind?: string;
   metadata: ObjectMetadata;
   spec: QuickStartSpec;
-};
+}
 
-export type QuickStartSpec = {
+export interface QuickStartSpec {
   version?: number;
   displayName: string;
   durationMinutes?: number;
@@ -24,24 +24,25 @@ export type QuickStartSpec = {
   accessReviewResources?: AccessReviewResourceAttributes[];
   link?: QuickStartExternal;
   type?: QuickStartType;
-};
+}
 
-export type QuickStartTask = {
+export interface QuickStartTask {
   title?: string;
   description?: string;
   review?: QuickStartTaskReview;
   summary?: QuickStartTaskSummary;
-};
+  proc?: string;
+}
 
-export type QuickStartTaskReview = {
+export interface QuickStartTaskReview {
   instructions?: string;
   failedTaskHelp?: string;
-};
+}
 
-export type QuickStartTaskSummary = {
+export interface QuickStartTaskSummary {
   success?: string;
   failed?: string;
-};
+}
 
 export type AllQuickStartStates = Record<string, QuickStartState>;
 
@@ -61,12 +62,12 @@ export enum QuickStartTaskStatus {
   FAILED = 'Failed',
 }
 
-export type QuickStartExternal = {
+export interface QuickStartExternal {
   href: string;
   text?: string;
-};
+}
 
-export type QuickStartType = {
+export interface QuickStartType {
   text: string;
   color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
-};
+}

package/src/utils/quick-start-utils.ts

@@ -16,8 +16,7 @@ export const getTaskStatusKey = (taskNumber: number): string => `taskStatus${tas
 export const getQuickStartStatusCount = (
   allQuickStartStates: AllQuickStartStates,
   quickStarts: QuickStart[],
-): Record<QuickStartStatus, number> => {
-  return quickStarts.reduce(
+): Record<QuickStartStatus, number> => quickStarts.reduce(
     (totals, item) => {
       totals[getQuickStartStatus(allQuickStartStates, item.metadata.name)]++;
       return totals;
@@ -28,7 +27,6 @@ export const getQuickStartStatusCount = (
       [QuickStartStatus.NOT_STARTED]: 0,
     },
   );
-};
 
 declare const window: Window & {
   SERVER_FLAGS: {
@@ -82,11 +80,9 @@ export const filterQuickStarts = (
   );
 };
 
-export const camelize = (str: string) => {
-  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
+export const camelize = (str: string) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
     if (+match === 0) {
       return '';
     } // or if (/\s+/.test(match)) for white spaces
     return index === 0 ? match.toLowerCase() : match.toUpperCase();
   });
-};