feat(toggle-id): adding id to component Toggle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/fluid-react-native",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "private": false,
   "description": "Builders React Native for Fluid Design System",
   "keywords": [

src/components/Toggle/__tests__/Toggle.spec.tsx → src/components/Toggle/__tests__/Toggle.test.tsx

@@ -23,13 +23,14 @@ describe('<ToggleButton />', () => {
   });
 
   it('should trigger onValueChange function when toggle is pressed', () => {
+    const testId = 'toggle_button';
     const { getByTestId } = render(
       <ThemeProvider theme={theme}>
-        <ToggleButton value={false} onValueChange={onPressEvent} />
+        <ToggleButton id={testId} value={false} onValueChange={onPressEvent} />
       </ThemeProvider>,
     );
 
-    const component = getByTestId('toggle_button');
+    const component = getByTestId(testId);
 
     fireEvent(component, 'onValueChange', true);
 
@@ -65,13 +66,19 @@ describe('<ToggleButton />', () => {
   });
 
   it('should render component disabled if disable prop is passed', () => {
+    const testId = 'toggle_button';
     const { getByTestId } = render(
       <ThemeProvider theme={theme}>
-        <ToggleButton value={true} onValueChange={() => {}} isDisabled />
+        <ToggleButton
+          id={testId}
+          value={true}
+          onValueChange={() => {}}
+          isDisabled
+        />
       </ThemeProvider>,
     );
 
-    const component = getByTestId('toggle_button');
+    const component = getByTestId(testId);
 
     expect(component).toHaveProperty(
       ['_fiber', 'memoizedProps', 'disabled'],

src/components/Toggle/__tests__/__snapshots__/Toggle.spec.tsx.snap → src/components/Toggle/__tests__/__snapshots__/Toggle.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`<ToggleButton /> should render component with custom thumb color 1`] =
   onChange={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  onTintColor="#4255EF80"
+  onTintColor="red30"
   style={
     [
       {
@@ -19,21 +19,20 @@ exports[`<ToggleButton /> should render component with custom thumb color 1`] =
           {},
         ],
         {
-          "backgroundColor": "#4444444D",
+          "backgroundColor": "blue4D",
           "borderRadius": 16,
         },
       ],
     ]
   }
-  testID="toggle_button"
   thumbColorProps={
     {
       "falseColor": "blue",
       "trueColor": "red",
     }
   }
   thumbTintColor="red"
-  tintColor="#4444444D"
+  tintColor="#dddddd"
   value={true}
 />
 `;
@@ -63,7 +62,6 @@ exports[`<ToggleButton /> should render component with custom track color 1`] =
       ],
     ]
   }
-  testID="toggle_button"
   thumbTintColor="#4255EF"
   tintColor="blue"
   trackColorProps={
@@ -83,7 +81,7 @@ exports[`<ToggleButton /> should render toggle component 1`] = `
   onChange={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  onTintColor="#4255EF80"
+  onTintColor="#4255EF30"
   style={
     [
       {
@@ -95,15 +93,14 @@ exports[`<ToggleButton /> should render toggle component 1`] = `
           {},
         ],
         {
-          "backgroundColor": "#4444444D",
+          "backgroundColor": "#d1d1d14D",
           "borderRadius": 16,
         },
       ],
     ]
   }
-  testID="toggle_button"
   thumbTintColor="#4255EF"
-  tintColor="#4444444D"
+  tintColor="#dddddd"
   value={true}
 />
 `;

src/components/Toggle/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { SwitchButton } from './styles';
 
-type Props = {
+type ToggleProps = {
+  id?: string;
+  accessibility?: string;
   value: boolean;
   isDisabled?: boolean;
   thumbColor?: {
@@ -15,22 +17,25 @@ type Props = {
   onValueChange(value: boolean): void;
 };
 
-const ToggleButton: React.FC<Props> = ({
+const ToggleButton: React.FC<ToggleProps> = ({
+  id,
   value,
   isDisabled = false,
   thumbColor,
   trackColor,
   onValueChange,
+  accessibility,
   ...rest
 }) => {
   return (
     <SwitchButton
+      accessibility={accessibility}
       value={value}
       onValueChange={onValueChange}
       disabled={isDisabled}
       thumbColorProps={thumbColor}
       trackColorProps={trackColor}
-      testID={'toggle_button'}
+      testID={id}
       {...rest}
     />
   );

src/components/Toggle/styles.ts

@@ -2,9 +2,9 @@ import { SwitchProps } from 'react-native';
 import styled from 'styled-components/native';
 import { ThemeProps, getTheme } from '@platformbuilders/theme-toolkit';
 
-const textColor = getTheme('text.main');
 const primaryMain = getTheme('brand.primary.main');
 const backgroundZ4 = getTheme('background.z4');
+const backgroundZ3 = getTheme('background.z3');
 
 type SwitchInternalProps = {
   thumbColorProps?: {
@@ -19,14 +19,23 @@ type SwitchInternalProps = {
 
 type GeneralProps = SwitchProps & SwitchInternalProps & ThemeProps;
 
-export const SwitchButton = styled.Switch.attrs((props: GeneralProps) => ({
-  thumbColor: props.value
-    ? props.thumbColorProps?.trueColor || primaryMain(props)
-    : props.thumbColorProps?.falseColor || backgroundZ4(props),
-  trackColor: {
-    false: props.trackColorProps?.falseColor || `${textColor(props)}4D`,
-    true: props.trackColorProps?.trueColor || `${primaryMain(props)}80`,
-  },
-  ios_backgroundColor:
-    props.trackColorProps?.falseColor || `${textColor(props)}4D`,
-}))``;
+export const SwitchButton = styled.Switch.attrs((props: GeneralProps) => {
+  const { value, thumbColorProps, trackColorProps } = props;
+  const activeColor = thumbColorProps?.trueColor || primaryMain(props);
+  const inactiveColor = thumbColorProps?.falseColor || backgroundZ4(props);
+  //
+  const falseTrackColor =
+    trackColorProps?.falseColor || `${backgroundZ3(props)}`;
+  const trueTrackColor = trackColorProps?.trueColor || `${activeColor}30`;
+  const iosBackgroundColor =
+    trackColorProps?.falseColor || `${inactiveColor}4D`;
+
+  return {
+    thumbColor: value ? activeColor : inactiveColor,
+    trackColor: {
+      false: falseTrackColor,
+      true: trueTrackColor,
+    },
+    ios_backgroundColor: iosBackgroundColor,
+  };
+})``;