Merge pull request #1059 from db-ui/1057-checkbox-power-app-component

feat(power apps): added checkbox component

Author: mfranzke

build-power-apps/DBUI/DBUI.cdsproj

@@ -49,6 +49,7 @@
     <ProjectReference Include="..\input\DBInput.pcfproj" />
     <ProjectReference Include="..\alert\DBAlert.pcfproj" />
     <ProjectReference Include="..\link\DBLink.pcfproj" />
+    <ProjectReference Include="..\checkbox\DBCheckbox.pcfproj" />
     <ProjectReference Include="..\radio\DBRadio.pcfproj" />
     <ProjectReference Include="..\infotext\DBInfotext.pcfproj" />
   </ItemGroup>

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -14,9 +14,18 @@ useMetadata({
 	isAttachedToShadowDom: true,
 	component: {
 		// MS Power Apps
-		includeIcon: false,
+		includeIcon: true,
 		hasDisabledProp: true,
-		properties: []
+		properties: [
+			// jscpd:ignore-start
+			{ name: 'children', type: 'SingleLine.Text' },
+			{ name: 'name', type: 'SingleLine.Text' },
+			// { name: 'checked', type: 'TwoOptions' },
+			{ name: 'value', type: 'SingleLine.Text', onChange: 'value' }, // $event.target["value"|"checked"|...]
+			// { name: 'disabled', type: 'TwoOptions' },
+			{ name: 'id', type: 'SingleLine.Text' }
+			// jscpd:ignore-end
+		]
 	}
 });
 

packages/components/src/components/checkbox/checkbox.scss

@@ -26,6 +26,11 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height));
 	height: $font-size-height;
 	justify-content: center;
 
+	// TODO: probably extract this to an overwrite or external file
+	// workarounds for power apps
+	width: auto;
+	padding: 0;
+
 	// We need to reset the general icons margin, as we want to use it in a tiny space
 	&:checked,
 	&:indeterminate {