Merge pull request #17 from wintondeshong/master

Refactorings of atom components

Author: wintondeshong

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

@@ -1,14 +1,14 @@
 .c-select {
+    @include icon-fill(get-color-neutral("30"));
     position: relative;
     display: inline-block;
-    @include icon-fill(get-color-neutral("30"));
 
     &:hover {
+        @include icon-fill(get-color-neutral("50"));
+
         select {
             border: 1px solid get-color-neutral("50");
         }
-
-        @include icon-fill(get-color-neutral("50"));
     }
 
     select {

src/atoms/buttons/button.stories.tsx

@@ -14,23 +14,23 @@ export default {
 
 export const buttonDefault = () => (
     <Button
+        accessibleText={text("Accessible Text", "Text for screen reader")}
         onClick={() => {}}
         size={select("size", ButtonSizes, ButtonSizes.Medium)}
-        style={select("style", ButtonStyles, ButtonStyles.Primary)}
-        accessibleText={text("Accessible Text", "Text for screen reader")}>
+        style={select("style", ButtonStyles, ButtonStyles.Primary)}>
         {text("Button Text", "Click Here!")}
     </Button>
 );
 
 export const buttonIcon = () => (
     <Button
+        accessibleText={text("Accessible Text", "Text for screen reader")}
         onClick={() => {}}
         size={select("size", ButtonSizes, ButtonSizes.Medium)}
-        style={select("style", ButtonStyles, ButtonStyles.Primary)}
-        accessibleText={text("Accessible Text", "Text for screen reader")}>
+        style={select("style", ButtonStyles, ButtonStyles.Primary)}>
         <Icon
-            type={select("type", Icons, Icons.Checkmark)}
             size={select("icon size", IconSizes, IconSizes.Large)}
+            type={select("type", Icons, Icons.Checkmark)}
         />
     </Button>
 );

src/atoms/constants/paragraph-sizes.ts

@@ -0,0 +1,7 @@
+export enum ParagraphSizes {
+    Base = "base",
+    Large = "large",
+    Small = "small",
+    XSmall = "xsmall",
+    XLarge = "xlarge",
+}

src/atoms/forms/checkbox-input.stories.tsx

@@ -10,8 +10,8 @@ export default {
 export const checkboxInputKnobs = () => (
     <CheckboxInput
         checked={boolean("Checked", false)}
-        label={text("Label", "Remember Me")}
         disabled={boolean("Disabled", false)}
+        label={text("Label", "Remember Me")}
         onChange={() => {}}
     />
 );

src/atoms/forms/password-input.stories.tsx

@@ -11,11 +11,11 @@ export default {
 export const passwordInputKnobs = () => (
     <PasswordInput
         disabled={boolean("Disabled", false)}
-        onChange={() => {}}
         id={Faker.random.uuid()}
+        isValid={boolean("Is Valid", true)}
         isVisible={boolean("Is Visible", false)}
+        onChange={() => {}}
         placeholder={text("Placeholder", "Please enter password.")}
         value={text("Value", "Password")}
-        isValid={boolean("Is Valid", true)}
     />
 );

src/atoms/forms/submit-button.test.tsx

@@ -5,7 +5,7 @@ import faker from "faker";
 import { ButtonStyles } from "../constants/button-styles";
 
 describe("SubmitButton", () => {
-    test("when default props, renders default buttonText", async () => {
+    test("when default props, renders default buttonText", () => {
         // Arrange
         const expected = "Submit";
 
@@ -15,7 +15,8 @@ describe("SubmitButton", () => {
         // Assert
         expect(getByText(expected)).not.toBeNull();
     });
-    test("when buttonText provided, renders supplied buttonText", async () => {
+
+    test("when buttonText provided, renders supplied buttonText", () => {
         // Arrange
         const expected = faker.random.words();
 
@@ -26,7 +27,7 @@ describe("SubmitButton", () => {
         expect(getByText(expected)).not.toBeNull();
     });
 
-    test("when cssClassName provided, renders with className set", async () => {
+    test("when cssClassName provided, renders with className set", () => {
         // Arrange
         const expected = ButtonStyles.Anchor;
 

src/atoms/forms/submit-button.tsx

@@ -29,7 +29,7 @@ const SubmitButton: React.FC<SubmitButtonProps> = (
             className={props.cssClassName || "c-button"}
             form={props.formId}
             type="submit"
-            value={props.buttonText || "Submit"}
+            value={props.buttonText ?? "Submit"}
         />
     );
 };

src/atoms/forms/text-input-icon.tsx

@@ -24,7 +24,7 @@ const TextInputIcon: React.FC<TextInputIconProps> = (
 ) => {
     return (
         <div className="c-text-input-icon">
-            <Icon type={props.icon} size={props.iconSize || IconSizes.Large} />
+            <Icon type={props.icon} size={props.iconSize ?? IconSizes.Large} />
             <TextInput {...props} />
         </div>
     );

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

@@ -9,11 +9,6 @@ export default {
 
 export const progressBarKnobs = () => (
     <ProgressBar
-        value={number("Progress Percent", 50, {
-            step: 1,
-            min: 0,
-            max: 100,
-        })}
         isErrored={boolean("Is Errored", false)}
         style={optionsKnob(
             "Style",
@@ -24,5 +19,10 @@ export const progressBarKnobs = () => (
             ProgressBarStyles.Thick,
             { display: "radio" }
         )}
+        value={number("Progress Percent", 50, {
+            step: 1,
+            min: 0,
+            max: 100,
+        })}
     />
 );

src/atoms/typography/heading-icon.stories.tsx

@@ -12,7 +12,7 @@ export default {
 };
 
 export const headingIconDefault = () => (
-    <HeadingIcon type={Icons.Plus} priority={2} iconSize={IconSizes.Base}>
+    <HeadingIcon iconSize={IconSizes.Base} priority={2} type={Icons.Plus}>
         Voluptas Expedita Magnam
     </HeadingIcon>
 );
@@ -22,15 +22,15 @@ export const headingIconKnobs = () => {
 
     return (
         <HeadingIcon
-            type={select("type", Icons, Icons.Plus)}
+            iconSize={select("icon size", IconSizes, IconSizes.Large)}
             priority={
                 select(
                     "priority",
                     priorityOptions,
                     HeadingPriority.One
                 ) as HeadingPriority
             }
-            iconSize={select("icon size", IconSizes, IconSizes.Large)}>
+            type={select("type", Icons, Icons.Plus)}>
             Voluptas Expedita Magnam
         </HeadingIcon>
     );