Merge pull request #76 from sebgroup/develop

Bug fixes and improvements

README.md

@@ -45,8 +45,8 @@ This project uses proper `ts-linting` and our lints are based on `tslint:latest`
 1. Development: `npm start`
 2. Check for Lint-ing rules, Compile components and Create Docs folder: `npm run build`
 3. Build and create the Documentation pages only: `npm run docs`
-4. To run the unit tests, run: `npm run test`
-5. To run a unit test for a specific component you have to pass the name of the component in `comp` variable, run: `npm run test --comp=Button`
+4. To run the unit tests, run: `npm test`
+5. To run a unit test for a specific component you have to pass the name of the component in `comp` variable, run: `npm test Button`. It can also be chained with multiple specific components, e.g. `npm test Button RadioGroup`
 
 ## Usage
 

develop/components/pages/ButtonPage.tsx

@@ -10,22 +10,22 @@ const mysvg: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
 
 const ButtonPage: React.FunctionComponent = () => {
     const themeList: Array<RadioListModel<ButtonTheme>> = [
-        { group: "theme", label: "Primary", value: "primary" },
-        { group: "theme", label: "Secondary", value: "secondary" },
-        { group: "theme", label: "Alternative", value: "alternative" },
-        { group: "theme", label: "Danger", value: "danger" },
-        { group: "theme", label: "Ghost-dark", value: "ghost-dark" },
-        { group: "theme", label: "Ghost-light", value: "ghost-light" },
-        { group: "theme", label: "Anchor", value: "anchor" },
+        { label: "Primary", value: "primary" },
+        { label: "Secondary", value: "secondary" },
+        { label: "Alternative", value: "alternative" },
+        { label: "Danger", value: "danger" },
+        { label: "Ghost-dark", value: "ghost-dark" },
+        { label: "Ghost-light", value: "ghost-light" },
+        { label: "Anchor", value: "anchor" },
     ];
     const iconPositionList: Array<RadioListModel<ButtonIconPosition>> = [
-        { group: "icon-position", label: "Right", value: "right" },
-        { group: "icon-position", label: "Left", value: "left" },
+        { label: "Right", value: "right" },
+        { label: "Left", value: "left" },
     ];
     const sizeList: Array<RadioListModel<ButtonSizes>> = [
-        { group: "size", label: "Small", value: "sm" },
-        { group: "size", label: "Medium", value: "md" },
-        { group: "size", label: "Large", value: "lg" },
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" },
     ];
     const [theme, setTheme] = React.useState<ButtonTheme>("primary");
     const [iconPosition, setIconPosition] = React.useState<ButtonIconPosition>("right");
@@ -76,7 +76,13 @@ const ButtonPage: React.FunctionComponent = () => {
                     <div className="row">
                         <div className="col">
                             <p>Themes</p>
-                            <RadioGroup list={themeList} value={theme} onChange={(e) => setTheme(e.currentTarget.value as ButtonTheme)} condensed />
+                            <RadioGroup
+                                name="theme"
+                                list={themeList}
+                                value={theme}
+                                onChange={(e) => setTheme(e.currentTarget.value as ButtonTheme)}
+                                condensed
+                            />
                         </div>
                         <div className="col">
                             <p>Options</p>
@@ -89,7 +95,7 @@ const ButtonPage: React.FunctionComponent = () => {
                                     list={iconPositionList}
                                     value={iconPosition}
                                     condensed
-                                    name="icon"
+                                    name="icon-position"
                                     onChange={(e) => setIconPosition(e.target.value as ButtonIconPosition)}
                                 />
                             }
@@ -100,7 +106,7 @@ const ButtonPage: React.FunctionComponent = () => {
                                     list={sizeList}
                                     value={size}
                                     condensed
-                                    name="size"
+                                    name="icon-size"
                                     onChange={(e) => setSize(e.target.value as ButtonSizes)}
                                 />
                             }

develop/components/pages/RadioGroupPage.tsx

@@ -49,9 +49,9 @@ const RadioGroupPage: React.FunctionComponent = () => {
 };
 
 const radioList: Array<RadioListModel> = [
-    { value: "first", group: "my-group", label: "Radio 1", },
-    { value: "second", group: "my-group", label: "Radio 2", description: "Some description" },
-    { value: "third", group: "my-group", label: "Radio 3", description: "Disabled", disabled: true },
+    { value: "first", label: "Radio 1", },
+    { value: "second", label: "Radio 2", description: "Some description" },
+    { value: "third", label: "Radio 3", description: "Disabled", disabled: true },
 ];
 
 export default RadioGroupPage;