Added atoms progress bar

Author: wintondeshong

src/assets/scss/6-components/atoms/__atoms.scss

@@ -4,6 +4,7 @@
 @import "buttons";
 @import "checkbox-button";
 @import "labels";
+@import "progress-bar";
 @import "radios";
 @import "selects";
 @import "text-input-icon";

src/assets/scss/6-components/atoms/_progress-bar.scss

@@ -0,0 +1,43 @@
+.c-progress-bar {
+    width: 100%;
+    height: rem(6px);
+    border-radius: $border-radius-small;
+    border: 1px solid get-color-neutral("50");
+    background-color: get-color-neutral("30");
+
+    &.-thick {
+        height: rem(24px);
+
+        .c-progress-bar__bar {
+            height: rem(22px);
+        }
+    }
+
+    &.-error {
+        .c-progress-bar__bar {
+            background-color: get-color-status("error");
+        }
+    }
+
+    &__bar {
+        height: rem(4px);
+        border-top-left-radius: $border-radius-small;
+        border-bottom-left-radius: $border-radius-small;
+        background-color: get-color-status("success");
+
+        /**
+         * generate classes -w-0, -w-1, -w-2, etc. up to -w-100
+         * to set the width to the progress percentage
+         */
+        @for $i from 0 through 100 {
+            &.-w-#{$i} {
+                width: #{$i}#{unquote("%")};
+
+                @if ($i >= 100) {
+                    border-top-right-radius: $border-radius-small;
+                    border-bottom-right-radius: $border-radius-small;
+                }
+            }
+        }
+    }
+}

src/atoms/forms/input-character-count.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { number } from "@storybook/addon-knobs";
+import { InputCharacterCount } from "./input-character-count";
+
+export default {
+    component: InputCharacterCount,
+    title: "Atoms | Forms / Input Character Count",
+};
+
+export const inputCharacterCountKnobs = () => (
+    <InputCharacterCount
+        currentLength={number("Current Length", 5)}
+        maxLength={number("Max Length", 100)}
+    />
+);

src/atoms/forms/input-character-count.test.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+describe("InputCharacterCount", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/12", () => {});
+});

src/atoms/forms/input-character-count.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+// -------------------------------------------------------------------------------------------------
+// #region Interfaces
+// -------------------------------------------------------------------------------------------------
+
+export interface InputCharacterCountProps {
+    currentLength: number;
+    maxLength: number;
+}
+
+// #endregion Interfaces
+
+// -------------------------------------------------------------------------------------------------
+// #region Component
+// -------------------------------------------------------------------------------------------------
+
+const InputCharacterCount: React.FC<InputCharacterCountProps> = (
+    props: InputCharacterCountProps
+) => {
+    return (
+        <div className="c-form-field__bottom__character-count">
+            {props.currentLength}/{props.maxLength}
+        </div>
+    );
+};
+
+// #endregion Component
+
+// -------------------------------------------------------------------------------------------------
+// #region Exports
+// -------------------------------------------------------------------------------------------------
+
+export { InputCharacterCount };
+
+// #endregion Exports

src/atoms/progress-bar/progress-bar.stories.tsx

@@ -0,0 +1,28 @@
+import { boolean, number, optionsKnob } from "@storybook/addon-knobs";
+import { ProgressBar, ProgressBarStyles } from "./progress-bar";
+import React from "react";
+
+export default {
+    component: ProgressBar,
+    title: "Atoms | Progress / Progress Bar",
+};
+
+export const progressBarKnobs = () => (
+    <ProgressBar
+        value={number("Progress Percent", 50, {
+            step: 1,
+            min: 0,
+            max: 100,
+        })}
+        isErrored={boolean("Is Errored", false)}
+        style={optionsKnob(
+            "Style",
+            {
+                thick: ProgressBarStyles.Thick,
+                thin: ProgressBarStyles.Thin,
+            },
+            ProgressBarStyles.Thick,
+            { display: "radio" }
+        )}
+    />
+);

src/atoms/progress-bar/progress-bar.test.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+describe("ProgressBar", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/13", () => {});
+});

src/atoms/progress-bar/progress-bar.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { StringUtils } from "andculturecode-javascript-core";
+
+// -------------------------------------------------------------------------------------------------
+// #region Enums
+// -------------------------------------------------------------------------------------------------
+
+export enum ProgressBarStyles {
+    Thick = "-thick",
+    Thin = "-thin",
+}
+
+// #endregion Enums
+
+// -------------------------------------------------------------------------------------------------
+// #region Interfaces
+// -------------------------------------------------------------------------------------------------
+
+interface ProgressBarProps {
+    cssClassName?: string;
+    isErrored?: boolean;
+    style?: ProgressBarStyles;
+    value: number;
+}
+
+// #endregion Interfaces
+
+// -------------------------------------------------------------------------------------------------
+// #region Component
+// -------------------------------------------------------------------------------------------------
+
+const ProgressBar: React.FC<ProgressBarProps> = (props: ProgressBarProps) => {
+    const CSS_CLASS_NAME = "c-progress-bar";
+    const classNames = [CSS_CLASS_NAME];
+
+    if (StringUtils.hasValue(props.cssClassName)) {
+        classNames.push(props.cssClassName!);
+    }
+
+    if (props.style != null) {
+        classNames.push(props.style);
+    }
+
+    if (props.isErrored) {
+        classNames.push("-error");
+    }
+
+    // value must be an integer 0 < value < 100
+    let value = Math.round(props.value);
+
+    if (value < 0) {
+        value = 0;
+    }
+
+    if (value > 100) {
+        value = 100;
+    }
+
+    return (
+        <div className={classNames.join(" ")}>
+            <div className={`${CSS_CLASS_NAME}__bar -w-${value}`} />
+        </div>
+    );
+};
+
+// #endregion Component
+
+// -------------------------------------------------------------------------------------------------
+// #region Exports
+// -------------------------------------------------------------------------------------------------
+
+export { ProgressBar };
+
+// #endregion Exports

src/index.ts

@@ -5,20 +5,20 @@
 export { Anchor } from "./atoms/anchors/anchor";
 export { AnchorWithIcon } from "./atoms/anchors/anchor-with-icon";
 export { Button } from "./atoms/buttons/button";
+export { Icon } from "./atoms/icons/icon";
+export { ProgressBar } from "./atoms/progress-bar/progress-bar";
 
 // Forms
 export { CheckboxButton } from "./atoms/forms/checkbox-button";
 export { CheckboxInput } from "./atoms/forms/checkbox-input";
+export { InputCharacterCount } from "./atoms/forms/input-character-count";
 export { PasswordInput } from "./atoms/forms/password-input";
 export { Select } from "./atoms/forms/select";
 export { SubmitButton } from "./atoms/forms/submit-button";
 export { TextArea } from "./atoms/forms/text-area";
 export { TextInput } from "./atoms/forms/text-input";
 export { TextInputIcon } from "./atoms/forms/text-input-icon";
 
-// Icons
-export { Icon } from "./atoms/icons/icon";
-
 // #endregion Atoms
 
 // -----------------------------------------------------------------------------------------