Add Radio Group component docs, mobile example and web example

Author: maurobender

docs/docs/components/checkbox.md

@@ -1,4 +1,5 @@
-import { Checkbox, HStack } from '@amalgama/react-native-ui-kit'
+import { Checkbox, HStack, Icon } from '@amalgama/react-native-ui-kit'
+import Feather from 'react-native-vector-icons/Feather';
 import CodePreview from '@site/src/components/CodePreview';
 import ExampleCheckbox from '@site/src/components/ExampleCheckbox';
 import ExampleCheckboxGroup from '@site/src/components/ExampleCheckboxGroup';
@@ -39,7 +40,7 @@ const App = () => {
 
 ### Props
 
-### selected
+#### selected
 If the checkbox is selected or not.
 
 | TYPE | REQUIRED | DEFAULT |
@@ -58,7 +59,7 @@ If the checkbox is selected or not.
 <Checkbox selected />
 ```
 
-### indeterminated
+#### indeterminated
 If the checkbox is indeterminated or not. This is usually used for lists of checkboxes when some of their children are checked but not all of them. This is only a visual state, it only changes the checkbox icon.
 
 | TYPE | REQUIRED | DEFAULT |
@@ -73,7 +74,7 @@ If the checkbox is indeterminated or not. This is usually used for lists of chec
 <Checkbox indeterminated />
 ```
 
-### label
+#### label
 Shows a label text next to the checkbox icon.
 
 | TYPE   | REQUIRED |
@@ -88,7 +89,7 @@ Shows a label text next to the checkbox icon.
 <Checkbox label="Checkbox" />
 ```
 
-### value
+#### value
 If the checkbox is inside a `Checkbox.Group` this prop indicates the value for it.
 
 | TYPE   | REQUIRED |
@@ -99,7 +100,7 @@ If the checkbox is inside a `Checkbox.Group` this prop indicates the value for i
 If the `Checkbox` is inside a `Checkbox.Group` this prop is required and will throw an `Exception` if not set.
 :::
 
-### disabled
+#### disabled
 If the checkbox is disabled or not.
 
 | TYPE | REQUIRED | DEFAULT |
@@ -120,7 +121,7 @@ If the checkbox is disabled or not.
 <Checkbox disabled indeterminated />
 ```
 
-### onPress
+#### onPress
 Invoked when the checkbox is pressed.
 
 | TYPE     | REQUIRED |
@@ -135,6 +136,63 @@ Invoked when the checkbox is pressed.
 <Checkbox onPress={ () => { window.alert( 'The checkbox was pressed!' ) } }/>
 ```
 
+#### checkedIcon
+An icon component to show when the checkbox is selected. The default value is the `box-checked` icon from the `UIKitIcon` icons package.
+
+<CodePreview>
+	<Checkbox
+		selected
+		checkedIcon={<Icon as={Feather}  name="x-square" />}
+	/>
+</CodePreview>
+
+```jsx
+import Feather from 'react-native-vector-icons/Feather';
+
+<Checkbox
+	selected
+	checkedIcon={<Icon as={Feather}  name="x-square" />}
+/>
+```
+
+#### uncheckedIcon
+
+An icon component to show when the checkbox is unselected. The default value is the `box-unchecked` icon from the `UIKitIcon` icons package.
+
+<CodePreview>
+	<Checkbox
+		uncheckedIcon={<Icon as={Feather}  name="square" />}
+	/>
+</CodePreview>
+
+```jsx
+import Feather from 'react-native-vector-icons/Feather';
+
+<Checkbox
+	uncheckedIcon={<Icon as={Feather}  name="square" />}
+/>
+```
+
+#### indeterminatedIcon
+
+An icon component to show when the checkbox is inditerminated. The default value is the `box-indeterminated` icon from the `UIKitIcon` icons package.
+
+<CodePreview>
+	<Checkbox
+		indeterminated
+		indeterminatedIcon={<Icon as={Feather}  name="minus-square" />}
+	/>
+</CodePreview>
+
+```jsx
+import EvilIcons from 'react-native-vector-icons/Feather';
+
+<Checkbox
+	indeterminated
+	indeterminatedIcon={<Icon as={Feather}  name="minus-square" />}
+/>
+```
+
 ## CheckboxGroup
 
 ### Examples
@@ -167,22 +225,22 @@ const ExampleCheckboxGroup = () => {
 
 ### Props
 
-### value
+#### value
 A list containing the selected checkbox values.
 
 | TYPE     | REQUIRED | DEFAULT |
 | ---------| -------- | ------- |
 | string[] | No       | []      |
 
 
-### onChange
+#### onChange
 Invoked when the group selection changes (because a new option was selected or a previous one was unselected) with the selected option values.
 
 | TYPE     | REQUIRED |
 | -------- | -------- |
 | function | No       |
 
-### disabled
+#### disabled
 If the checkbox is disabled or not.
 
 | TYPE | REQUIRED | DEFAULT |

docs/docs/components/radio.md

@@ -1,7 +1,8 @@
-import {Radio, HStack} from '@amalgama/react-native-ui-kit'
-import {UIKitIcon} from '@amalgama/react-native-ui-kit/'
+import {Radio, HStack, Icon} from '@amalgama/react-native-ui-kit'
+import Feather from 'react-native-vector-icons/Feather';
 import CodePreview from '@site/src/components/CodePreview'
 import ExampleRadio from '@site/src/components/ExampleRadio'
+import ExampleRadioGroup from '@site/src/components/ExampleRadioGroup'
 import {useState} from 'react'
 
 # Radio
@@ -14,14 +15,32 @@ To add the `Radio` component to your project you can import it as follows:
 import {Radio} from '@amalgama/react-native-ui-kit'; 
 ```
 
-## Examples
+## Standalone
+
+### Example
 <CodePreview>
 	<ExampleRadio/>
 </CodePreview>
 
-## Props
+```jsx
+import { Radio } from '@amalgama/react-native-ui-kit';
+import React, { useState } from 'react';
+
+const ExampleRadio = () => {
+	const [ isSelected, setSelected ] = useState( false );
+
+	return (
+		<Radio
+			selected={ isSelected }
+			onPress={ () => { setSelected( prev => !prev ); } }
+		/>
+	);
+};
+```
+
+### Props
 
-### selected
+#### selected
 If the Radio is selected or not.
 
 | TYPE | REQUIRED | DEFAULT |
@@ -35,7 +54,12 @@ If the Radio is selected or not.
 	</HStack>
 </CodePreview>
 
-### disabled
+```jsx
+<Radio />
+<Radio selected />
+```
+
+#### disabled
 If the Radio is disabled or not.
 
 | TYPE | REQUIRED | DEFAULT |
@@ -45,12 +69,16 @@ If the Radio is disabled or not.
 <CodePreview>
 	<HStack>
 		<Radio disabled />
-		<Radio selected disabled />
+		<Radio disabled selected />
 	</HStack>
 </CodePreview>
 
+```jsx
+<Radio disabled />
+<Radio disabled selected />
+```
 
-### onPress
+#### onPress
 Invoked when the Radio is pressed.
 
 | TYPE     | REQUIRED |
@@ -65,7 +93,7 @@ Invoked when the Radio is pressed.
 <Radio onPress={ () => { window.alert( 'The Radio was pressed!' ) } }/>
 ```
 
-### label
+#### label
 Shows a label text next to the radio button icon.
 
 | TYPE   | REQUIRED |
@@ -80,25 +108,133 @@ Shows a label text next to the radio button icon.
 <Radio label="Radio" />
 ```
 
-### selectedIcon
+#### value
+If the radio is inside a `Radio.Group` this prop indicates the value for it.
+
+| TYPE   | REQUIRED |
+| ------ | -------- |
+| string | No       |
+
+:::caution
+If the `Radio` is inside a `Radio.Group` this prop is required and will throw an `Exception` if not set.
+:::
+
+#### selectedIcon
 An icon component to show when the radio is selected. The default value is the `circle-filled` icon from the `UIKitIcon` icons package.
 
+<CodePreview>
+	<Radio
+		selected
+		__icon={{ style: { paddingTop: '1px' } }}
+		selectedIcon={<Icon as={Feather}  name="check-circle" />}
+	/>
+</CodePreview>
+
 ```jsx
-import { UIKitIcon, Icon } from '@amalgama/react-native-ui-kit';
+import Feather from 'react-native-vector-icons/Feather';
 
 <Radio
-	selectedIcon={<Icon as={UIKitIcon}  name="plus" />}
+	selected
+	selectedIcon={<Icon as={Feather}  name="check-circle" />}
 />
 ```
 
-### unselectedIcon
+#### unselectedIcon
 
 An icon component to show when the radio is unselected. The default value is the `circle` icon from the `UIKitIcon` icons package.
 
+<CodePreview>
+	<Radio
+		__icon={{ style: { paddingTop: '1px' } }}
+		unselectedIcon={<Icon as={Feather}  name="circle" />}
+	/>
+</CodePreview>
+
 ```jsx
-import { UIKitIcon, Icon } from '@amalgama/react-native-ui-kit';
+import Feather from 'react-native-vector-icons/Feather';
 
 <Radio
-	unselectedIcon={<Icon as={UIKitIcon}  name="plus" />}
+	unselectedIcon={<Icon as={Feather}  name="circle" />}
 />
 ```
+
+## RadioGroup
+
+### Example
+<CodePreview>
+    <ExampleRadioGroup />
+</CodePreview> 
+
+```jsx
+import React, { useState } from 'react';
+import { Radio, Text, VStack } from '@amalgama/react-native-ui-kit';
+
+const ExampleRadioGroup = () => {
+	const [ value, setValue ] = useState();
+
+	return (
+		<VStack>
+			<Text variant="sh1">What is your favorite coding language?</Text>
+			<Radio.Group value={value} onChange={setValue}>
+				<Radio value="js" label="Javascript" />
+				<Radio value="ts" label="Typescript" />
+				<Radio value="rb" label="Ruby" />
+				<Radio value="python" label="Python" />
+				<Radio value="c" label="C" />
+				<Radio value="cpp" label="C++" />
+			</Radio.Group>
+		</VStack>
+	);
+};
+```
+
+### Props
+
+#### value
+A list containing the selected checkbox values.
+
+| TYPE     | REQUIRED | DEFAULT |
+| ---------| -------- | ------- |
+| string[] | No       | []      |
+
+
+#### onChange
+Invoked when the group selection changes (because a new option was selected or a previous one was unselected) with the selected option values.
+
+| TYPE     | REQUIRED |
+| -------- | -------- |
+| function | No       |
+
+#### disabled
+If the checkbox is disabled or not.
+
+| TYPE | REQUIRED | DEFAULT |
+| ---- | -------- | ------- |
+| bool | No       | false   |
+
+<CodePreview>
+	<ExampleRadioGroup disabled />
+</CodePreview>
+
+```jsx
+import React, { useState } from 'react';
+import { Radio, Text, VStack } from '@amalgama/react-native-ui-kit';
+
+const ExampleRadioGroup = () => {
+	const [ value, setValue ] = useState();
+
+	return (
+		<VStack>
+			<Text variant="sh1">What is your favorite coding language?</Text>
+			<Radio.Group disabled value={value} onChange={setValue}>
+				<Radio value="js" label="Javascript" />
+				<Radio value="ts" label="Typescript" />
+				<Radio value="rb" label="Ruby" />
+				<Radio value="python" label="Python" />
+				<Radio value="c" label="C" />
+				<Radio value="cpp" label="C++" />
+			</Radio.Group>
+		</VStack>
+	);
+};
+```