[Fix] Checkbox and Field with button

src/atoms/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap

@@ -35,38 +35,6 @@ exports[`Checkbox renders 1`] = `
   cursor: pointer;
 }
 
-.c2:checked:not(:disabled)[aria-checked='true'] ~ span {
-  background-color: #35E0AD;
-  border-color: #2AB38A;
-}
-
-.c2:checked:not(:disabled)[aria-checked='true'] ~ span:after {
-  display: block;
-}
-
-.c2:checked:disabled[aria-checked='true'] ~ span {
-  border-color: transparent;
-  background-color: #E3E3E8;
-  color: #ABACBA;
-}
-
-.c2:checked:disabled[aria-checked='true'] ~ span:after {
-  display: block;
-}
-
-.c2:not(:checked):disabled ~ span {
-  border-color: #E3E3E8;
-  background-color: #ffffff;
-}
-
-.c2:hover:not(:disabled) {
-  border-color: #4329A6;
-}
-
-.c2:hover:not(:disabled):checked ~ span {
-  border-color: #2AB38A;
-}
-
 .c3 {
   position: absolute;
   top: 0;

src/atoms/checkbox/index.tsx

@@ -6,7 +6,7 @@ import {
   Checkmark,
 } from './styles';
 
-interface Props {
+export interface CheckboxProps {
   value: string;
   label?: string | React.ReactNode;
   checked?: boolean | undefined;
@@ -30,7 +30,7 @@ const Checkbox = ({
   style,
   dataTestId,
   required = false,
-}: Props) => {
+}: CheckboxProps) => {
   const checkedRef = useRef<boolean>(checked);
   const [isChecked, setIsChecked] = useState(checked);
 

stories/atoms/checkbox.stories.tsx → src/atoms/checkbox/stories/checkbox.stories.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import { Checkbox } from '../../src';
+import Checkbox, { CheckboxProps } from '..';
 
 export default {
   title: 'Components/Atoms/Checkbox',
   component: Checkbox,
 };
 
-export const CheckboxSimpleComponent = args => <Checkbox {...args} />;
+export const CheckboxSimpleComponent = (args: CheckboxProps) => (
+  <Checkbox {...args} />
+);
 
 CheckboxSimpleComponent.storyName = 'Simple';
 CheckboxSimpleComponent.args = {
@@ -19,7 +21,7 @@ CheckboxSimpleComponent.args = {
   onChange: () => {},
 };
 
-export const CheckboxNodeComponent = args => (
+export const CheckboxNodeComponent = (args: CheckboxProps) => (
   <Checkbox
     label={[
       'I agree with ',

src/atoms/checkbox/styles.tsx

@@ -45,42 +45,6 @@ export const CheckboxInput = styled.input<CheckboxWrapperProps>`
   left: 0;
   opacity: 0;
   cursor: pointer;
-
-  &:checked:not(:disabled)[aria-checked='true'] ~ span {
-    background-color: ${props =>
-      props.error ? field.errorBackgroundColor : field.successBackgroundColor};
-    border-color: ${props =>
-      props.error ? field.errorBorderColor : field.successBorderColor};
-
-    &:after {
-      display: block;
-    }
-  }
-
-  &:checked:disabled[aria-checked='true'] ~ span {
-    border-color: transparent;
-    background-color: ${field.disabledBackgroundColor};
-    color: ${field.disabledColor};
-
-    &:after {
-      display: block;
-    }
-  }
-
-  &:not(:checked):disabled ~ span {
-    border-color: ${field.disabledBackgroundColor};
-    background-color: ${field.backgroundColor};
-  }
-
-  &:hover:not(:disabled) {
-    border-color: ${props =>
-      props.error ? field.errorBorderColor : field.activeBorderColor};
-
-    &:checked ~ span {
-      border-color: ${props =>
-        props.error ? field.errorBorderColor : field.successBorderColor};
-    }
-  }
 `;
 
 export const Checkmark = styled.span<CheckboxErrorProps>`

src/atoms/error-field/index.tsx

@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import * as Styles from './styles';
 import { ErrorFieldColor } from './types';
 
-interface ErrorFieldProps {
+export interface ErrorFieldProps {
   color?: ErrorFieldColor;
   error: string;
   className?: string;

stories/atoms/error-field.stories.tsx → src/atoms/error-field/stories/error-field.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ErrorField } from '../../src';
+import ErrorField, { ErrorFieldProps } from '..';
 
 export default {
   title: 'Components/Atoms/ErrorField',
@@ -14,15 +14,19 @@ export default {
   },
 };
 
-export const ErrorComponent = args => <ErrorField {...args} />;
+export const ErrorComponent = (args: ErrorFieldProps) => (
+  <ErrorField {...args} />
+);
 
 ErrorComponent.storyName = 'Error';
 ErrorComponent.args = {
   error: 'Please insert valid name',
   color: 'red',
 };
 
-export const SuccessComponent = args => <ErrorField {...args} />;
+export const SuccessComponent = (args: ErrorFieldProps) => (
+  <ErrorField {...args} />
+);
 
 SuccessComponent.storyName = 'Success';
 SuccessComponent.args = {

src/atoms/spinner/index.tsx

@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { colors } from '../../ions/variables';
 import * as Styles from './styles';
 
-interface SpinnerProps {
+export interface SpinnerProps {
   fill?: string;
   size?: string;
   className?: string;

stories/atoms/spinner.stories.tsx → src/atoms/spinner/stories/spinner.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Spinner } from '../../src';
+import Spinner, { SpinnerProps } from '..';
 
 export default {
   title: 'Components/Atoms/Spinner',
@@ -9,7 +9,7 @@ export default {
   },
 };
 
-export const SpinnerComponent = args => <Spinner {...args} />;
+export const SpinnerComponent = (args: SpinnerProps) => <Spinner {...args} />;
 
 SpinnerComponent.storyName = 'Spinner';
 

src/atoms/text-field/index.tsx

@@ -3,7 +3,7 @@ import { ErrorField } from '../..';
 import * as Styles from './styles';
 import { TextFieldType } from './types';
 
-interface TextFieldProps {
+export interface TextFieldProps {
   type?: TextFieldType;
   error?: string;
   icon?: string;

stories/atoms/text-field.stories.tsx → src/atoms/text-field/stories/text-field.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TextField } from '../../src';
-import icons from '../../src/ions/icons';
+import TextField, { TextFieldProps } from '..';
+import icons from '../../../ions/icons';
 
 export default {
   title: 'Components/Atoms/TextField',
@@ -21,7 +21,7 @@ export default {
   },
 };
 
-export const TextComponent = args => <TextField {...args} />;
+export const TextComponent = (args: TextFieldProps) => <TextField {...args} />;
 
 TextComponent.storyName = 'Text';
 TextComponent.args = {
@@ -34,7 +34,9 @@ TextComponent.args = {
   required: false,
 };
 
-export const TextDefaultComponent = args => <TextField {...args} />;
+export const TextDefaultComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 TextDefaultComponent.storyName = 'Default Value';
 TextDefaultComponent.args = {
@@ -46,7 +48,9 @@ TextDefaultComponent.args = {
   disabled: false,
 };
 
-export const DisabledComponent = args => <TextField {...args} />;
+export const DisabledComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 DisabledComponent.storyName = 'Disabled';
 DisabledComponent.args = {
@@ -58,7 +62,9 @@ DisabledComponent.args = {
   disabled: true,
 };
 
-export const TextFullBorderComponent = args => <TextField {...args} />;
+export const TextFullBorderComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 TextFullBorderComponent.storyName = 'Full Border';
 TextFullBorderComponent.args = {
@@ -69,7 +75,9 @@ TextFullBorderComponent.args = {
   disabled: false,
 };
 
-export const TextIconComponent = args => <TextField {...args} />;
+export const TextIconComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 TextIconComponent.storyName = 'W/ Icon';
 TextIconComponent.args = {
@@ -81,7 +89,7 @@ TextIconComponent.args = {
   disabled: false,
 };
 
-export const UrlComponent = args => <TextField {...args} />;
+export const UrlComponent = (args: TextFieldProps) => <TextField {...args} />;
 
 UrlComponent.storyName = 'URL';
 UrlComponent.args = {
@@ -92,7 +100,9 @@ UrlComponent.args = {
   disabled: false,
 };
 
-export const PasswordComponent = args => <TextField {...args} />;
+export const PasswordComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 PasswordComponent.storyName = 'Password';
 PasswordComponent.args = {
@@ -103,7 +113,7 @@ PasswordComponent.args = {
   disabled: false,
 };
 
-export const DateComponent = args => <TextField {...args} />;
+export const DateComponent = (args: TextFieldProps) => <TextField {...args} />;
 
 DateComponent.storyName = 'Date';
 DateComponent.args = {
@@ -113,7 +123,7 @@ DateComponent.args = {
   disabled: false,
 };
 
-export const TimeComponent = args => <TextField {...args} />;
+export const TimeComponent = (args: TextFieldProps) => <TextField {...args} />;
 
 TimeComponent.storyName = 'Time';
 TimeComponent.args = {
@@ -123,7 +133,9 @@ TimeComponent.args = {
   disabled: false,
 };
 
-export const NumberComponent = args => <TextField {...args} />;
+export const NumberComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 NumberComponent.storyName = 'Number';
 NumberComponent.args = {
@@ -136,7 +148,9 @@ NumberComponent.args = {
   disabled: false,
 };
 
-export const TextErrorComponent = args => <TextField {...args} />;
+export const TextErrorComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 TextErrorComponent.storyName = 'Error';
 TextErrorComponent.args = {

src/molecules/actions-menu/index.tsx

@@ -4,14 +4,14 @@ import { Button } from '../..';
 import { ActionMenu } from './types';
 import * as Styles from './styles';
 
-interface ActionsMenuListInterface<T> {
+export interface ActionsMenuListInterface<T> {
   actions: ActionMenu<T>[];
   data?: any;
   rowIndex?: number;
   handleOptionClick?: () => void;
 }
 
-interface ActionsMenuInterface<T> {
+export interface ActionsMenuInterface<T> {
   className?: string;
   ariaLabel?: string;
   actions: ActionMenu<T>[];

stories/molecules/actions-menu.stories.tsx → src/molecules/actions-menu/stories/actions-menu.stories.tsx

@@ -1,13 +1,26 @@
 import React from 'react';
-import { ActionsMenu } from '../../src';
+import ActionsMenu, {
+  ActionsMenuInterface,
+  ActionsMenuListInterface,
+} from '..';
 
 export default {
   title: 'Components/Molecules/ActionsMenu',
   component: ActionsMenu,
   argTypes: {},
 };
 
-export const ActionsMenuOpenComponent = args => <ActionsMenu {...args} />;
+type MyActionsMenuListInterface = ActionsMenuListInterface<{
+  id: string;
+  type: string;
+  value: string;
+  url: string | null;
+  action: () => void;
+}>;
+
+export const ActionsMenuOpenComponent = (
+  args: ActionsMenuInterface<MyActionsMenuListInterface>
+) => <ActionsMenu {...args} />;
 
 const actions = [
   {
@@ -40,7 +53,15 @@ ActionsMenuOpenComponent.args = {
   startsOpen: true,
 };
 
-export const ActionsMenuClosedComponent = args => <ActionsMenu {...args} />;
+export const ActionsMenuClosedComponent = (
+  args: ActionsMenuInterface<MyActionsMenuListInterface>
+) => <ActionsMenu {...args} />;
+
+ActionsMenuClosedComponent.storyName = 'Closed';
+ActionsMenuClosedComponent.args = {
+  ...ActionsMenuOpenComponent.args,
+  startsOpen: false,
+};
 
 ActionsMenuClosedComponent.storyName = 'Closed';
 ActionsMenuClosedComponent.args = {