New COntrol ProgressStepsIndicator

Author: joaojmendes

docs/documentation/docs/controls/ProgressStepsIndicator.md

@@ -0,0 +1,61 @@
+# Progress Steps Indicator
+
+This control shows a progress of steps.
+
+Here is an example of the control in action:
+
+![ProgressStepsIndicator](../assets/ProgressStepsIndicator.png)
+
+ 
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- In your component file, import the `Accordion` control as follows:
+
+```TypeScript
+import { ProgressStepsIndicator } from '"@pnp/spfx-controls-react/lib/ProgressStepsIndicator';
+
+const progressSteps: IStep[] = [
+  { id: 0, title: "Step 1", description: "Step 1 Description" },
+  { id: 1, title: "Step 2", description: "Step 2 Description" },
+  { id: 3, title: "Step 3", description: "Step 3 Description" },
+  { id: 4, title: "Step 4", description: "Step 4 Description" },
+  { id: 5, title: "Step 5", description: "Step 5 Description" },
+  { id: 6, title: "Step 6", description: "Step 6 Description" },
+];
+```
+
+- Use the `ProgressStepsIndicator` control in your code as follows:
+
+```TypeScript
+{
+     <ProgressStepsIndicator steps={progressSteps} currentStep={0} themeVariant={props.themeVariant} />
+}
+```
+
+
+## Implementation
+
+The `ProgressStepsIndicator` control can be configured with the following properties:
+
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| steps | ISteps[] | yes | Perogress Steps | |
+| currentStep | number | yes | index of current step | default is 0|
+| themeVariant | IReadonlyTheme | undefined | no | Theme | |
+ 
+ The `IStep Interface` definition:
+
+```TypeScript
+Interface IStep {
+  id?:number;
+  title:string;
+  description:string;
+}
+```
+
+
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ProgressStepsIndicator)

package-lock.json

@@ -0,0 +1 @@
+export * from './controls/ProgressStepsIndicator';

src/ProgressStepsIndicator.ts

@@ -0,0 +1,9 @@
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+
+import { IStep } from './IStep';
+
+export interface IProgressStepsIndicatorProps {
+  steps?:IStep[];
+  currentStep?:number;
+  themeVariant?: IReadonlyTheme | undefined;
+}

src/controls/ProgressStepsIndicator/IProgressStepsIndicatorProps.ts

@@ -0,0 +1,5 @@
+export interface IStep {
+  id?:number;
+  title:string;
+  description:string;
+}

src/controls/ProgressStepsIndicator/IStep.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+
+import * as strings from 'ControlStrings';
+import {
+  Customizer,
+  Icon,
+  Label,
+  MessageBar,
+  MessageBarType,
+  Stack,
+} from 'office-ui-fabric-react';
+
+import { IProgressStepsIndicatorProps } from './IProgressStepsIndicatorProps';
+import {
+  getProgressStepsIndicatorStyles,
+} from './ProgressStepsIndicatorStyles';
+
+export const ProgressStepsIndicator: React.FunctionComponent<IProgressStepsIndicatorProps> = (
+  props: IProgressStepsIndicatorProps
+) => {
+  const [renderSteps, setRenderSteps] = React.useState<JSX.Element[]>([]);
+  const [renderStepsTitle, setRenderStepsTitle] = React.useState<JSX.Element[]>([]);
+  const { steps, currentStep, themeVariant } = props;
+  const {
+    labelStepTitleCurrentStyle,
+    labelStepTitleStyle,
+    labelStepStyles,
+    stackStepsStyles,
+    componentClasses,
+  } = getProgressStepsIndicatorStyles(themeVariant, currentStep, steps.length);
+
+  React.useEffect(() => {
+    (() => {
+      const _renderSteps: JSX.Element[] = [];
+      const _renderStepTitle: JSX.Element[] = [];
+
+      const _currentStep: number = currentStep ? currentStep : 0;
+      if (steps && steps.length) {
+        steps.map((step, i) => {
+          if (_currentStep > i) {
+            _renderSteps.push(
+              <Stack key={`${i}`} horizontal>
+                <div className={componentClasses.bulletCompleted}>
+                  <Icon iconName={"CheckMark"} />
+                </div>
+              </Stack>
+            );
+
+            _renderStepTitle.push(
+              <Label key={`${i}`} styles={labelStepTitleStyle}>
+                {step.title}
+              </Label>
+            );
+          }
+
+          if (_currentStep === i) {
+            _renderSteps.push(
+              <Stack key={`${i}`} horizontal>
+                <div key={`${i}`} className={componentClasses.bulletCurrent}>
+                  <Label styles={labelStepStyles}>{i + 1}</Label>
+                </div>
+              </Stack>
+            );
+            _renderStepTitle.push(
+              <Label key={`${i}`} styles={labelStepTitleCurrentStyle}>
+                {step.title}
+              </Label>
+            );
+          }
+          if (_currentStep < i) {
+            _renderSteps.push(
+              <div key={`${i}`} className={componentClasses.bullet}>
+                <Label styles={labelStepStyles}>{i + 1}</Label>
+              </div>
+            );
+            _renderStepTitle.push(
+              <Label key={`${i}`} styles={labelStepTitleStyle}>
+                {step.title}
+              </Label>
+            );
+          }
+        });
+      }
+      setRenderSteps(_renderSteps);
+      setRenderStepsTitle(_renderStepTitle);
+    })();
+  }, [steps, currentStep]);
+
+  if (steps && steps.length === 0) {
+    return <MessageBar messageBarType={MessageBarType.info}>{strings.ProgressStepsIndicatorNoSteps}</MessageBar>;
+  }
+
+  return (
+    <Customizer settings={{ theme: props.themeVariant }}>
+      <Stack styles={stackStepsStyles}>
+        <div className={componentClasses.line} />
+        <Stack horizontal horizontalAlign="space-between">
+          {renderSteps}
+        </Stack>
+      </Stack>
+      <Stack horizontal horizontalAlign="space-between" styles={{ root: { marginTop: "7px !important" } }}>
+        {renderStepsTitle}
+      </Stack>
+    </Customizer>
+  );
+};

src/controls/ProgressStepsIndicator/ProgressStepsIndicator.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import {
+  ILabelStyles,
+  IStackStyles,
+  IStyle,
+  mergeStyleSets,
+} from 'office-ui-fabric-react';
+
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+
+export const getProgressStepsIndicatorStyles = (themeVariant: IReadonlyTheme, currentStep?:number, totalSteps?:number ) => {
+
+  const labelStepTitleCurrentStyle: ILabelStyles = {
+    root: {
+      fontWeight: 700,
+      width: 150,
+      textAlign: "center",
+    },
+  };
+
+  const labelStepTitleStyle: ILabelStyles = {
+    root: {
+      width: 150,
+      textAlign: "center",
+    },
+  };
+
+  const labelStepStyles: ILabelStyles = {
+    root: {
+      fontWeight: 400,
+    },
+  };
+
+  const stackStepsStyles: IStackStyles = {
+    root: { marginLeft: 50, marginRight: 50 },
+  };
+
+  const componentClasses = mergeStyleSets({
+    bulletCurrent: {
+      borderStyle: "solid",
+      borderWidth: 2,
+      borderColor: themeVariant?.palette?.themePrimary,
+      width: 34,
+      height: 34,
+      borderRadius: "50%",
+      display: "flex",
+      justifyContent: "center",
+      horizontalAlign: "center",
+      zIndex: 111,
+      backgroundColor: themeVariant?.palette?.neutralLighter,
+      fontSize: 16,
+      alignItems: "center",
+    },
+    bulletCompleted: {
+      cursor: "default",
+      width: 34,
+      height: 34,
+      borderRadius: "50%",
+      display: "flex",
+      justifyContent: "center",
+      horizontalAlign: "center",
+      zIndex: 111,
+      backgroundColor: themeVariant?.palette?.themePrimary,
+      color: themeVariant?.palette?.themeLighter,
+      fontSize: 16,
+      alignItems: "center",
+    },
+    bullet: {
+      borderColor: themeVariant?.palette?.neutralTertiaryAlt,
+      borderStyle: "solid",
+      borderWidth: 2,
+      width: 34,
+      height: 34,
+      borderRadius: "50%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      horizontalAlign: "center",
+      verticalAlign: "center",
+      backgroundColor: themeVariant?.palette?.neutralLight,
+      fontSize: 16,
+      zIndex: 111,
+    },
+    line: {
+      height: 2,
+      backgroundColor: themeVariant?.palette?.neutralQuaternaryAlt,
+      width: "100%",
+      position: "relative",
+      top: 17,
+      zIndex: 0,
+    } as IStyle,
+
+  });
+
+  return {labelStepTitleCurrentStyle,stackStepsStyles,labelStepStyles, labelStepTitleStyle,componentClasses};
+};

src/controls/ProgressStepsIndicator/ProgressStepsIndicatorStyles.ts

@@ -0,0 +1,3 @@
+export * from './ProgressStepsIndicator';
+export { IProgressStepsIndicatorProps } from './IProgressStepsIndicatorProps';
+export { IStep } from './IStep';

src/controls/ProgressStepsIndicator/index.ts

@@ -404,6 +404,7 @@ define([], () => {
     ModernAudioPause: "Pause",
     ModernAudioIncVol: "Increase Volume",
     ModernAudioDecVol: "Decrease Volume",
-    ModernAudioMute: "Mute"
+    ModernAudioMute: "Mute",
+    ProgressStepsIndicatorNoSteps: "No steps",
 };
 });

src/loc/en-us.ts

@@ -1,4 +1,5 @@
 declare interface IControlStrings {
+  ProgressStepsIndicatorNoSteps:string;
   ListItemCommentsLabel: string;
   ListItemCommentsNoCommentsLabel: string;
   ListItemCommentDIalogDeleteSubText: string;