Merge pull request #200 from MaibornWolff/#198-controls-improvements

#198 controls improvements
MaibornWolff · Jul 26, 2023 · c2b104e · c2b104e
2 parents a20b6d1 + d7930a9
commit c2b104e
Show file tree

Hide file tree

Showing 27 changed files with 4,697 additions and 4,159 deletions.
diff --git a/mwui-stencil/package.json b/mwui-stencil/package.json
@@ -43,7 +43,8 @@
     "@stencil/react-output-target": "^0.4.0",
     "@stencil/vue-output-target": "^0.8.6",
     "@storybook/web-components": "^7.0.26",
-    "prettier": "^2.7.1"
+    "prettier": "^2.7.1",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

diff --git a/mwui-stencil/src/components.d.ts b/mwui-stencil/src/components.d.ts
@@ -11,24 +11,28 @@ import { Size } from "./shared/models/enums/size.enum";
 import { ButtonVariant } from "./components/mw-button/models/enums/button-variant.enum";
 import { ButtonSize } from "./components/mw-button/models/enums/button-size.enum";
 import { Target } from "./components/mw-button/models/enums/button-target.enum";
+import { PositionEnum } from "./shared/models/enums/position.enum";
 import { SrcSetItem } from "./components/mw-img/mw-img";
 import { LoginLayout } from "./components/mw-login/models/enums/login-layout.enum";
 import { LoginFormData } from "./components/mw-login/models/interfaces/login-form-data";
 import { PopoverPlacement } from "./components/mw-popover/mw-popover";
 import { ModalSize } from "./components/mw-modal/models/enums/modal-size.enum";
 import { PopoverPlacement as PopoverPlacement1 } from "./components/mw-popover/mw-popover";
+import { LayoutDirectionEnum } from "./shared/models/enums/layout-direction.enum";
 export { AriaRolesEnum } from "./shared/models/enums/aria-roles.enum";
 export { AppBarPosition } from "./components/mw-app-bar/mw-app-bar";
 export { Size } from "./shared/models/enums/size.enum";
 export { ButtonVariant } from "./components/mw-button/models/enums/button-variant.enum";
 export { ButtonSize } from "./components/mw-button/models/enums/button-size.enum";
 export { Target } from "./components/mw-button/models/enums/button-target.enum";
+export { PositionEnum } from "./shared/models/enums/position.enum";
 export { SrcSetItem } from "./components/mw-img/mw-img";
 export { LoginLayout } from "./components/mw-login/models/enums/login-layout.enum";
 export { LoginFormData } from "./components/mw-login/models/interfaces/login-form-data";
 export { PopoverPlacement } from "./components/mw-popover/mw-popover";
 export { ModalSize } from "./components/mw-modal/models/enums/modal-size.enum";
 export { PopoverPlacement as PopoverPlacement1 } from "./components/mw-popover/mw-popover";
+export { LayoutDirectionEnum } from "./shared/models/enums/layout-direction.enum";
 export namespace Components {
   interface MwAppBar {
     /**
@@ -281,6 +285,10 @@ export namespace Components {
      * Label to be displayed
      */
     label?: string;
+    /**
+     * Dictates on which side of checkbox the label is placed
+     */
+    labelPosition?: PositionEnum;
     /**
      * Name of checkbox input
      */
@@ -663,13 +671,17 @@ export namespace Components {
      */
     checked?: boolean;
     /**
-     * Visually and functionally disbale radio button
+     * Visually and functionally disable radio button
      */
     disabled?: boolean;
     /**
      * Label to be displayed
      */
     label?: string;
+    /**
+     * Dictates on which side of checkbox the label is placed
+     */
+    labelPosition?: PositionEnum;
     /**
      * Analog to HTML 'name' attribute used to group radios for unique selection
      */
@@ -685,9 +697,17 @@ export namespace Components {
   }
   interface MwRadioGroup {
     /**
-     * current value of the radio-group
+     * Dictates the flex direction of the group
+     */
+    direction?: LayoutDirectionEnum;
+    /**
+     * Current value of the radio-group
      */
     value?: string | number;
+    /**
+     * Dictates whether group should flex-wrap
+     */
+    wrap?: boolean;
   }
   interface MwSlider {
     /**
@@ -752,6 +772,14 @@ export namespace Components {
      * Fixed label to be displayed next to the toggle switch
      */
     label?: string;
+    /**
+     * Dictates on which side of checkbox the label is placed
+     */
+    labelPosition?: PositionEnum;
+    /**
+     * Name of switch input
+     */
+    name?: string;
     /**
      * Label to be shown when switch state is unchecked. Overrides label prop
      */
@@ -1472,6 +1500,10 @@ declare namespace LocalJSX {
      * Label to be displayed
      */
     label?: string;
+    /**
+     * Dictates on which side of checkbox the label is placed
+     */
+    labelPosition?: PositionEnum;
     /**
      * Name of checkbox input
      */
@@ -1890,13 +1922,17 @@ declare namespace LocalJSX {
      */
     checked?: boolean;
     /**
-     * Visually and functionally disbale radio button
+     * Visually and functionally disable radio button
      */
     disabled?: boolean;
     /**
      * Label to be displayed
      */
     label?: string;
+    /**
+     * Dictates on which side of checkbox the label is placed
+     */
+    labelPosition?: PositionEnum;
     /**
      * Analog to HTML 'name' attribute used to group radios for unique selection
      */
@@ -1911,14 +1947,22 @@ declare namespace LocalJSX {
     value?: string;
   }
   interface MwRadioGroup {
+    /**
+     * Dictates the flex direction of the group
+     */
+    direction?: LayoutDirectionEnum;
     /**
      * Event emitted when radioGroup value changes (after radio selection)
      */
     onRadioChange?: (event: MwRadioGroupCustomEvent<{ value?: string | number }>) => void;
     /**
-     * current value of the radio-group
+     * Current value of the radio-group
      */
     value?: string | number;
+    /**
+     * Dictates whether group should flex-wrap
+     */
+    wrap?: boolean;
   }
   interface MwSlider {
     /**
@@ -1983,6 +2027,14 @@ declare namespace LocalJSX {
      * Fixed label to be displayed next to the toggle switch
      */
     label?: string;
+    /**
+     * Dictates on which side of checkbox the label is placed
+     */
+    labelPosition?: PositionEnum;
+    /**
+     * Name of switch input
+     */
+    name?: string;
     /**
      * Label to be shown when switch state is unchecked. Overrides label prop
      */

diff --git a/mwui-stencil/src/components/mw-checkbox/mw-checkbox.css b/mwui-stencil/src/components/mw-checkbox/mw-checkbox.css
diff --git a/mwui-stencil/src/components/mw-checkbox/mw-checkbox.docs.mdx b/mwui-stencil/src/components/mw-checkbox/mw-checkbox.docs.mdx
@@ -39,3 +39,7 @@ import * as MwCheckbox from "./mw-checkbox.stories.ts";
 ### Disabled/Checked
 
 <Canvas of={MwCheckbox.DisabledChecked} />
+
+### Label on the left
+
+<Canvas of={MwCheckbox.WithLeftLabel} />