fix: remove default props from yoga/web

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     'import/extensions': 0,
     'react/jsx-props-no-spreading': 'off',
     'react/prop-types': [2, { ignore: ['theme'] }],
+    'react/require-default-props': 'off',
     'import/no-extraneous-dependencies': 0,
     'no-plusplus': 0,
     'no-restricted-globals': 0,

packages/doc/src/components/Clipboard/index.jsx

@@ -40,8 +40,4 @@ Clipboard.propTypes = {
   copyText: string,
 };
 
-Clipboard.defaultProps = {
-  copyText: undefined,
-};
-
 export default Clipboard;

packages/yoga/src/Accordion/web/Accordion.jsx

@@ -202,10 +202,10 @@ const Accordion = ({
   title,
   subtitle,
   children,
-  disabled,
-  expanded,
-  small,
-  hasHorizontalPadding,
+  disabled = false,
+  expanded = false,
+  small = false,
+  hasHorizontalPadding = true,
   ...props
 }) => {
   const [open, setOpen] = useState(expanded);
@@ -272,13 +272,4 @@ Accordion.propTypes = {
   hasHorizontalPadding: bool,
 };
 
-Accordion.defaultProps = {
-  title: undefined,
-  subtitle: undefined,
-  disabled: false,
-  expanded: false,
-  small: false,
-  hasHorizontalPadding: true,
-};
-
 export default Accordion;

packages/yoga/src/Accordion/web/Small.jsx

@@ -8,6 +8,4 @@ function AccordionSmall(props) {
 
 AccordionSmall.propTypes = Accordion.propTypes;
 
-AccordionSmall.defaultProps = Accordion.defaultProps;
-
 export default AccordionSmall;

packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx

@@ -57,7 +57,7 @@ function ActionRequirement(props) {
     checkable,
     illustration,
     list,
-    titleAsTextDisplay,
+    titleAsTextDisplay = false,
   } = props;
 
   let primaryButton;
@@ -106,12 +106,4 @@ ActionRequirement.propTypes = {
   titleAsTextDisplay: bool,
 };
 
-ActionRequirement.defaultProps = {
-  children: undefined,
-  checkable: undefined,
-  illustration: undefined,
-  list: undefined,
-  titleAsTextDisplay: false,
-};
-
 export default ActionRequirement;

packages/yoga/src/AutoComplete/web/AutoComplete.jsx

@@ -153,16 +153,16 @@ const AutoComplete = React.forwardRef(
     {
       className,
       style,
-      full,
-      options,
-      onChange,
-      onClean,
-      onSelect,
+      full = false,
+      options = [],
+      onChange = () => {},
+      onClean = () => {},
+      onSelect = () => {},
       value,
       error,
-      openSuggestionsAriaLabel,
-      closeSuggestionsAriaLabel,
-      shouldFilterOptions,
+      openSuggestionsAriaLabel = 'Open suggestions',
+      closeSuggestionsAriaLabel = 'Close suggestions',
+      shouldFilterOptions = true,
       ...props
     },
     ref,
@@ -333,19 +333,4 @@ AutoComplete.propTypes = {
   shouldFilterOptions: bool,
 };
 
-AutoComplete.defaultProps = {
-  className: undefined,
-  full: false,
-  options: [],
-  style: undefined,
-  onSelect: () => {},
-  onChange: () => {},
-  onClean: () => {},
-  value: undefined,
-  error: undefined,
-  openSuggestionsAriaLabel: 'Open suggestions',
-  closeSuggestionsAriaLabel: 'Close suggestions',
-  shouldFilterOptions: true,
-};
-
 export default AutoComplete;

packages/yoga/src/Avatar/web/Avatar.jsx

@@ -30,7 +30,15 @@ const Content = ({ icon, alt, src, fill, content, stroke }) => {
  */
 const Avatar = forwardRef(
   (
-    { src, alt, fill, stroke, icon = BuildingFilled, children, ...otherProps },
+    {
+      src,
+      alt,
+      fill = 'white',
+      stroke,
+      icon = BuildingFilled,
+      children,
+      ...otherProps
+    },
     ref,
   ) => {
     return (
@@ -68,13 +76,6 @@ Content.propTypes = {
   ...Box.propTypes,
 };
 
-Content.defaultProps = {
-  src: undefined,
-  fill: 'white',
-  alt: undefined,
-  icon: undefined,
-};
-
 Avatar.propTypes = {
   src: string,
   /**  Required if src is true */
@@ -111,14 +112,6 @@ Avatar.propTypes = {
   ...Box.propTypes,
 };
 
-Avatar.defaultProps = {
-  src: undefined,
-  alt: undefined,
-  icon: undefined,
-  fill: 'white',
-  stroke: undefined,
-  ...Box.defaultProps,
-};
 Avatar.displayName = 'Avatar';
 
 export default Avatar;

packages/yoga/src/Avatar/web/AvatarCircle.jsx

@@ -16,8 +16,6 @@ const AvatarCircle = forwardRef(({ src, alt = '', ...props }, ref) => (
 
 AvatarCircle.propTypes = Avatar.propTypes;
 
-AvatarCircle.defaultProps = Avatar.defaultProps;
-
 AvatarCircle.displayName = 'Avatar.Circle';
 
 export default AvatarCircle;

packages/yoga/src/Banner/web/Banner.jsx

@@ -137,11 +137,4 @@ Banner.propTypes = {
   },
 };
 
-Banner.defaultProps = {
-  icon: undefined,
-  variant: 'informative',
-  primaryButton: undefined,
-  secondaryButton: undefined,
-};
-
 export default Banner;

packages/yoga/src/BottomSheet/web/__snapshots__/BottomSheet.test.jsx.snap

@@ -100,7 +100,7 @@ exports[`<BottomSheet /> should match snapshot 1`] = `
 }
 
 .c1 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;

packages/yoga/src/Button/web/Button.jsx

@@ -15,15 +15,15 @@ const SpinnerContainer = styled.div`
 const Button = forwardRef(
   (
     {
-      children,
-      onClick,
-      full,
-      disabled,
-      inverted,
-      small,
-      secondary,
+      children = 'Button',
+      onClick = () => {},
+      full = false,
+      disabled = undefined,
+      inverted = false,
+      small = false,
+      secondary = false,
       icon: Icon,
-      isLoading,
+      isLoading = false,
       ...props
     },
     ref,
@@ -77,20 +77,6 @@ Button.propTypes = {
   href: string,
 };
 
-Button.defaultProps = {
-  ariaLabel: undefined,
-  children: 'Button',
-  disabled: undefined,
-  full: false,
-  inverted: false,
-  isLoading: false,
-  onClick: () => {},
-  small: false,
-  secondary: false,
-  icon: undefined,
-  href: undefined,
-};
-
 Button.displayName = 'Button';
 
 export default Button;

packages/yoga/src/Button/web/Icon.jsx

@@ -38,16 +38,20 @@ const ButtonIcon = forwardRef(
           components: { button },
         },
       },
-      small,
+      small = false,
       disabled,
-      isLoading,
+      isLoading = false,
+      secondary = false,
+      inverted = false,
       ...props
     },
     ref,
   ) => {
     return (
       <IconStyled
         {...props}
+        secondary={secondary}
+        inverted={inverted}
         ref={ref}
         small={small}
         disabled={disabled || isLoading}
@@ -77,15 +81,6 @@ ButtonIcon.propTypes = {
   isLoading: bool,
 };
 
-ButtonIcon.defaultProps = {
-  small: false,
-  disabled: undefined,
-  secondary: false,
-  inverted: false,
-  icon: undefined,
-  isLoading: false,
-};
-
 ButtonIcon.displayName = 'Button.Icon';
 
 export default withTheme(ButtonIcon);

packages/yoga/src/Button/web/Link.jsx

@@ -87,15 +87,21 @@ const Link = styled(Button)`
   }}
 `;
 
-const ButtonLink = forwardRef(({ ...rest }, ref) => {
+const ButtonLink = forwardRef(({ secondary = false, ...rest }, ref) => {
   const props = Object.fromEntries(
     Object.entries(rest).filter(([key]) => key !== 'isLoading'),
   );
 
   const { disabled } = props;
 
   return (
-    <Link {...props} disabled={disabled} aria-disabled={disabled} ref={ref} />
+    <Link
+      {...props}
+      secondary={secondary}
+      disabled={disabled}
+      aria-disabled={disabled}
+      ref={ref}
+    />
   );
 });
 
@@ -107,13 +113,6 @@ ButtonLink.propTypes = {
   icon: oneOfType([node, func]),
 };
 
-ButtonLink.defaultProps = {
-  disabled: undefined,
-  secondary: false,
-  href: undefined,
-  icon: undefined,
-};
-
 ButtonLink.displayName = 'Button.Link';
 
 export default ButtonLink;

packages/yoga/src/Button/web/Text.jsx

@@ -113,7 +113,7 @@ const ButtonText = forwardRef(({ ...rest }, ref) => {
     Object.entries(rest).filter(([key]) => key !== 'isLoading'),
   );
 
-  const { secondary, inverted } = props;
+  const { secondary = false, inverted = false } = props;
 
   return (
     <StyledButton
@@ -130,11 +130,6 @@ ButtonText.propTypes = {
   secondary: bool,
 };
 
-ButtonText.defaultProps = {
-  inverted: false,
-  secondary: false,
-};
-
 ButtonText.displayName = 'Button.Text';
 
 export default ButtonText;

packages/yoga/src/Card/web/Card/Card.jsx

@@ -19,10 +19,10 @@ const CardStyled = styled.section`
   ${
     hasShadow
       ? `
-          padding: 
-            ${card.padding.top}px 
+          padding:
+            ${card.padding.top}px
             ${card.padding.right}px
-            ${card.padding.bottom}px 
+            ${card.padding.bottom}px
             ${card.padding.left}px;
           box-shadow: ${card.elevation};
         `
@@ -54,12 +54,12 @@ const Ribbon = styled(Text.Tiny)`
   margin-left: -${card.padding.left}px;
   margin-bottom: ${card.padding.bottom}px;
 
-  padding: 
+  padding:
     ${spacing.xxxsmall}px
     ${spacing.xsmall}px
     ${spacing.xxxsmall}px
     ${spacing.small}px;
-  
+
   border-top-right-radius: ${card.ribbon.radius}px;
   border-bottom-right-radius: ${card.ribbon.radius}px;
 
@@ -69,16 +69,18 @@ const Ribbon = styled(Text.Tiny)`
   `}
 `;
 
-const Card = React.forwardRef(({ ribbon, children, ...rest }, ref) => (
-  <CardStyled ref={ref} {...rest}>
-    {Object.keys(ribbon).length > 0 && (
-      <Ribbon variant={ribbon.variant} as="span">
-        {ribbon.text}
-      </Ribbon>
-    )}
-    {children}
-  </CardStyled>
-));
+const Card = React.forwardRef(
+  ({ ribbon = {}, children = null, hasShadow = true, ...rest }, ref) => (
+    <CardStyled ref={ref} hasShadow={hasShadow} {...rest}>
+      {Object.keys(ribbon).length > 0 && (
+        <Ribbon variant={ribbon.variant} as="span">
+          {ribbon.text}
+        </Ribbon>
+      )}
+      {children}
+    </CardStyled>
+  ),
+);
 
 Card.propTypes = {
   /** text: the content inside the Card Ribbon.
@@ -113,12 +115,6 @@ Card.propTypes = {
   hasShadow: bool,
 };
 
-Card.defaultProps = {
-  ribbon: {},
-  children: null,
-  hasShadow: true,
-};
-
 Card.displayName = 'Card';
 
 export default Card;

packages/yoga/src/Card/web/Card/__snapshots__/Card.test.jsx.snap

@@ -64,7 +64,7 @@ exports[`<Card /> Snapshots should match snapshot with default Card 1`] = `
 }
 
 .c0 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;

packages/yoga/src/Card/web/PlanCard/Content.jsx

@@ -77,15 +77,15 @@ const EnhancePrice = styled(Text.Medium)`
 
 const PlanCardContent = ({
   title,
-  badgeColor,
-  subtitle,
-  description,
-  currency,
-  suffix,
-  price,
-  period,
-  extra,
-  children,
+  badgeColor = null,
+  subtitle = null,
+  description = null,
+  currency = null,
+  suffix = null,
+  price = null,
+  period = null,
+  extra = null,
+  children = null,
   ...rest
 }) => (
   <Wrapper {...rest}>
@@ -128,18 +128,6 @@ PlanCardContent.propTypes = {
   badgeColor: string,
 };
 
-PlanCardContent.defaultProps = {
-  children: null,
-  description: null,
-  subtitle: null,
-  currency: null,
-  suffix: null,
-  price: null,
-  period: null,
-  extra: null,
-  badgeColor: null,
-};
-
 PlanCardContent.displayName = 'PlanCard.Content';
 
 export default PlanCardContent;

packages/yoga/src/Card/web/PlanCard/List.jsx

@@ -92,9 +92,9 @@ const Button = styled.button`
 const ListItem = withTheme(props => {
   const {
     text,
-    truncate,
+    truncate = true,
     icon: Icon,
-    buttonProps,
+    buttonProps = {},
     theme: yogaTheme,
     children,
     onClick,
@@ -146,12 +146,4 @@ ListItem.propTypes = {
   truncate: bool,
 };
 
-ListItem.defaultProps = {
-  truncate: true,
-  icon: undefined,
-  buttonProps: {},
-  onClick: undefined,
-  children: undefined,
-};
-
 export { List, ListItem };

packages/yoga/src/Card/web/PlanCard/PlanCard.jsx

@@ -111,7 +111,7 @@ const DiscountWrapper = styled(Box).attrs({
   }}
 `;
 
-function PlanCard({ children, discount, variant, ...rest }) {
+function PlanCard({ children, discount, variant = 'deepPurple', ...rest }) {
   const hasDiscount = !!discount;
 
   return (
@@ -135,12 +135,6 @@ PlanCard.propTypes = {
   variant: string,
 };
 
-PlanCard.defaultProps = {
-  children: undefined,
-  discount: undefined,
-  variant: 'deepPurple',
-};
-
 PlanCard.displayName = 'PlanCard';
 
 export default PlanCard;

packages/yoga/src/Checkbox/web/Checkbox.jsx

@@ -240,13 +240,13 @@ const Checkbox = ({
   value,
   label,
   helper,
-  disabled,
-  checked,
+  disabled = false,
+  checked = false,
   error,
   style,
   className,
-  inverted,
-  indeterminate,
+  inverted = false,
+  indeterminate = false,
   ariaLabel,
   theme: {
     yoga: {
@@ -340,20 +340,6 @@ Checkbox.propTypes = {
   ariaLabel: string,
 };
 
-Checkbox.defaultProps = {
-  label: undefined,
-  value: undefined,
-  helper: undefined,
-  checked: false,
-  disabled: false,
-  inverted: false,
-  indeterminate: false,
-  error: undefined,
-  style: undefined,
-  className: undefined,
-  ariaLabel: undefined,
-};
-
 Checkbox.displayName = 'Checkbox';
 
 export default withTheme(Checkbox);

packages/yoga/src/Checkbox/web/Switch.jsx

@@ -124,7 +124,12 @@ const SwitchThumb = styled.span`
 `;
 
 /** Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting. */
-const CheckboxSwitch = ({ checked, disabled, onChange, ...rest }) => (
+const CheckboxSwitch = ({
+  checked = false,
+  disabled = false,
+  onChange = () => {},
+  ...rest
+}) => (
   <SwitchTrack checked={checked} disabled={disabled} {...rest}>
     <SwitchInput
       type="checkbox"
@@ -145,12 +150,6 @@ CheckboxSwitch.propTypes = {
   onChange: func,
 };
 
-CheckboxSwitch.defaultProps = {
-  checked: false,
-  disabled: false,
-  onChange: () => {},
-};
-
 CheckboxSwitch.displayName = 'Checkbox.Switch';
 
 export default CheckboxSwitch;

packages/yoga/src/Chips/web/Chips.jsx

@@ -68,9 +68,9 @@ const Wrapper = styled.button`
         p {
           color: ${colors.white};
         }
-        
+
         background-color: ${colors.secondary};
-        
+
 
         border-color: transparent;
 
@@ -119,10 +119,10 @@ const Chips = React.forwardRef(
   (
     {
       children,
-      selected,
+      selected = false,
       counter,
-      icons,
-      disabled,
+      icons = [],
+      disabled = false,
       onToggle,
       onClick = onToggle,
       theme: {
@@ -193,14 +193,4 @@ Chips.propTypes = {
   onClick: func,
 };
 
-Chips.defaultProps = {
-  children: undefined,
-  selected: false,
-  disabled: false,
-  counter: undefined,
-  icons: [],
-  onToggle: undefined,
-  onClick: undefined,
-};
-
 export default withTheme(Chips);

packages/yoga/src/Datepicker/web/Calendar.jsx

@@ -183,10 +183,10 @@ function Calendar({
   type,
   startDate,
   endDate,
-  onSelectSingle,
-  onSelectRange,
-  disablePastDates,
-  disableFutureDates,
+  onSelectSingle = null,
+  onSelectRange = null,
+  disablePastDates = false,
+  disableFutureDates = false,
   disablePastFrom,
   disableFutureFrom,
 }) {
@@ -433,15 +433,4 @@ Calendar.propTypes = {
   disableFutureFrom: instanceOf(Date),
 };
 
-Calendar.defaultProps = {
-  startDate: undefined,
-  endDate: undefined,
-  onSelectSingle: null,
-  onSelectRange: null,
-  disablePastDates: false,
-  disableFutureDates: false,
-  disablePastFrom: undefined,
-  disableFutureFrom: undefined,
-};
-
 export default Calendar;

packages/yoga/src/Datepicker/web/Datepicker.jsx

@@ -165,23 +165,24 @@ const ErrorWrapper = styled(Text.Small)`
 export const toUTC = date => {
   return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
 };
+
 function Datepicker({
-  fullWidth,
+  fullWidth = false,
   type,
   placeholder,
   startDate,
   endDate,
   onSelectSingle,
-  disabled,
+  disabled = false,
   onSelectRange,
   customOnSelectRange,
-  disablePastDates,
-  disableFutureDates,
+  disablePastDates = false,
+  disableFutureDates = false,
   disablePastFrom,
   disableFutureFrom,
   error,
   onOpen,
-  displayEndDateOnly,
+  displayEndDateOnly = false,
   ...props
 }) {
   const [open, setOpen] = useState();
@@ -351,22 +352,4 @@ Datepicker.propTypes = {
   displayEndDateOnly: bool,
 };
 
-Datepicker.defaultProps = {
-  fullWidth: false,
-  placeholder: undefined,
-  startDate: undefined,
-  endDate: undefined,
-  disabled: false,
-  onSelectSingle: undefined,
-  onSelectRange: undefined,
-  customOnSelectRange: undefined,
-  disablePastDates: false,
-  disableFutureDates: false,
-  disablePastFrom: undefined,
-  disableFutureFrom: undefined,
-  error: undefined,
-  onOpen: undefined,
-  displayEndDateOnly: false,
-};
-
 export default Datepicker;

packages/yoga/src/Dialog/web/Dialog.jsx

@@ -81,12 +81,12 @@ const CloseButton = styled(Button.Icon)`
 const Dialog = React.forwardRef(
   (
     {
-      isOpen,
-      hideCloseButton,
+      isOpen = false,
+      hideCloseButton = false,
       children,
       dialogId,
       onClose,
-      zIndex,
+      zIndex = 3,
       closeLabel,
       className,
       ...props
@@ -182,16 +182,6 @@ Dialog.propTypes = {
   children: node.isRequired,
 };
 
-Dialog.defaultProps = {
-  isOpen: false,
-  hideCloseButton: false,
-  onClose: undefined,
-  closeLabel: undefined,
-  className: undefined,
-  zIndex: 3,
-  dialogId: undefined,
-};
-
 Dialog.displayName = 'Dialog';
 
 export default Dialog;

packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap

@@ -100,7 +100,7 @@ exports[`<Dialog /> should match snapshot 1`] = `
 }
 
 .c1 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;
@@ -410,7 +410,7 @@ exports[`<Dialog /> should match snapshot with close button 1`] = `
 }
 
 .c1 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;

packages/yoga/src/Divider/web/Divider.jsx

@@ -20,21 +20,18 @@ const StyledDivider = styled.hr`
   }}
 `;
 
-const Divider = React.forwardRef(({ vertical, style, ...props }, ref) => {
-  return (
-    <StyledDivider vertical={vertical} ref={ref} style={style} {...props} />
-  );
-});
+const Divider = React.forwardRef(
+  ({ vertical = false, style, ...props }, ref) => {
+    return (
+      <StyledDivider vertical={vertical} ref={ref} style={style} {...props} />
+    );
+  },
+);
 
 Divider.propTypes = {
   /** If this value is defined, the divider will be in vertical if the flexDirection is row type */
   vertical: bool,
   style: shape({}),
 };
 
-Divider.defaultProps = {
-  vertical: false,
-  style: undefined,
-};
-
 export default withTheme(Divider);

packages/yoga/src/Drawer/web/Drawer.jsx

@@ -30,17 +30,13 @@ const StyledDrawer = styled(Dialog)`
   }
 `;
 
-const Drawer = React.forwardRef((props, forwardedRef) => (
-  <StyledDrawer {...props} ref={forwardedRef} />
+const Drawer = React.forwardRef(({ zIndex = 3, ...rest }, forwardedRef) => (
+  <StyledDrawer {...rest} zIndex={zIndex} ref={forwardedRef} />
 ));
 
 Drawer.propTypes = {
   children: node.isRequired,
   zIndex: number,
 };
 
-Drawer.defaultProps = {
-  zIndex: 3,
-};
-
 export default Drawer;

packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap

@@ -89,7 +89,7 @@ exports[`<Drawer /> should match snapshot 1`] = `
 }
 
 .c1 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;

packages/yoga/src/Dropdown/web/Dropdown.jsx

@@ -28,7 +28,7 @@ const Wrapper = styled.div`
     position: relative;
     display: inline-block;
     vertical-align: top;
-    
+
     width: ${full ? '100%' : `${dropdown.width}px`};
   `}
 `;
@@ -270,7 +270,16 @@ const ArrowIcon = styled(({ isOpen, selected, ...props }) => (
 /** Gympass Dropdown is a multiple choice type of menu. */
 const Dropdown = React.forwardRef(
   (
-    { error, label, disabled, full, options, onChange, isMaxHeight, ...rest },
+    {
+      error,
+      label = '',
+      disabled = false,
+      full = false,
+      options,
+      onChange = () => {},
+      isMaxHeight = true,
+      ...rest
+    },
     ref,
   ) => {
     const inputRef = ref || React.useRef(null);
@@ -382,13 +391,4 @@ Dropdown.propTypes = {
   isMaxHeight: bool,
 };
 
-Dropdown.defaultProps = {
-  label: '',
-  error: undefined,
-  full: false,
-  disabled: false,
-  onChange: () => {},
-  isMaxHeight: true,
-};
-
 export default Dropdown;

packages/yoga/src/Feedback/web/Feedback.jsx

@@ -35,7 +35,14 @@ function isChildFromComponent(child, component) {
   return child.type.displayName === component.displayName;
 }
 
-function Feedback({ variant, title, description, children, center, ...props }) {
+function Feedback({
+  variant,
+  title,
+  description,
+  children,
+  center = true,
+  ...props
+}) {
   const iconProps = VARIANT_ICONS[variant];
   let primaryButton;
   let secondaryButton;
@@ -99,10 +106,4 @@ Feedback.propTypes = {
   center: bool,
 };
 
-Feedback.defaultProps = {
-  title: undefined,
-  children: undefined,
-  center: true,
-};
-
 export default Feedback;

packages/yoga/src/Grid/web/Col.jsx

@@ -60,24 +60,4 @@ Col.propTypes = {
   'xxxl-start': number,
 };
 
-Col.defaultProps = {
-  hide: undefined,
-  xxs: undefined,
-  xs: undefined,
-  sm: undefined,
-  md: undefined,
-  lg: undefined,
-  xl: undefined,
-  xxl: undefined,
-  xxxl: undefined,
-  'xxs-start': undefined,
-  'xs-start': undefined,
-  'sm-start': undefined,
-  'md-start': undefined,
-  'lg-start': undefined,
-  'xl-start': undefined,
-  'xxl-start': undefined,
-  'xxxl-start': undefined,
-};
-
 export default Col;

packages/yoga/src/Grid/web/Hide.jsx

@@ -5,8 +5,27 @@ import { media } from '@gympass/yoga-helpers';
 
 const { breakpoints } = tokens;
 
+const defaultProps = {
+  xxs: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  xxl: undefined,
+  xxxl: undefined,
+  'xxs-start': undefined,
+  'xs-start': undefined,
+  'sm-start': undefined,
+  'md-start': undefined,
+  'lg-start': undefined,
+  'xl-start': undefined,
+  'xxl-start': undefined,
+  'xxxl-start': undefined,
+};
+
 const Hide = styled.div`
-  ${props =>
+  ${(props = defaultProps) =>
     Object.keys(props)
       .filter(prop => props[prop] && Object.keys(breakpoints).includes(prop))
       .map(breakpoint => media.hide[breakpoint])}

packages/yoga/src/Header/web/Header.jsx

@@ -26,7 +26,7 @@ const StyledHeader = styled(Box)`
   `}
 `;
 
-const Header = ({ link, logo, children, ...props }) => {
+const Header = ({ link = null, logo = null, children = null, ...props }) => {
   return (
     <StyledHeader
       as="header"
@@ -58,10 +58,4 @@ Header.propTypes = {
   logo: elementType,
 };
 
-Header.defaultProps = {
-  link: null,
-  children: null,
-  logo: null,
-};
-
 export default Header;

packages/yoga/src/Header/web/Logo.jsx

@@ -3,15 +3,11 @@ import { elementType } from 'prop-types';
 
 import GympassLogo from './GympassLogo';
 
-const Logo = ({ customLogo: CustomLogo }) =>
+const Logo = ({ customLogo: CustomLogo = null }) =>
   CustomLogo ? <CustomLogo /> : <GympassLogo />;
 
 Logo.propTypes = {
   customLogo: elementType,
 };
 
-Logo.defaultProps = {
-  customLogo: null,
-};
-
 export default Logo;

packages/yoga/src/Heading/web/Heading.jsx

@@ -6,7 +6,7 @@ import Title from './Title';
 import BackButton from './BackButton';
 import RightButton from './RightButton';
 
-const Heading = ({ children, noPadding, ...props }) => {
+const Heading = ({ children, noPadding = false, ...props }) => {
   let backButton = null;
   let title = null;
   const rightButtons = [];
@@ -46,10 +46,4 @@ Heading.propTypes = {
   bg: PropTypes.string,
 };
 
-Heading.defaultProps = {
-  children: undefined,
-  noPadding: false,
-  bg: undefined,
-};
-
 export default Heading;

packages/yoga/src/Icon/Icon.jsx

@@ -14,7 +14,7 @@ import Box from '../Box';
 
 const Icon = ({
   as: Component,
-  size,
+  size = 12,
   width = size,
   height = size,
   fill,
@@ -139,15 +139,4 @@ Icon.propTypes = {
   size: oneOfType([oneOf(commonSizes), string, number]),
 };
 
-Icon.defaultProps = {
-  fill: undefined,
-  stroke: undefined,
-  title: undefined,
-  description: undefined,
-  ariaLabel: undefined,
-  width: undefined,
-  height: undefined,
-  size: 12,
-};
-
 export default withTheme(Icon);

packages/yoga/src/Input/web/Helper.jsx

@@ -71,14 +71,4 @@ Helper.propTypes = {
   a11yId: string,
 };
 
-Helper.defaultProps = {
-  disabled: undefined,
-  error: undefined,
-  helper: undefined,
-  maxLength: undefined,
-  length: undefined,
-  hideMaxLength: undefined,
-  a11yId: undefined,
-};
-
 export default Helper;

packages/yoga/src/Input/web/Input.jsx

@@ -94,25 +94,25 @@ const LeftElementWrapper = styled.div`
 const Input = React.forwardRef(
   (
     {
-      cleanable,
+      cleanable = true,
       children,
-      disabled,
+      disabled = false,
       error,
-      full,
+      full = false,
       helper,
       label,
       ariaLabel,
       maxLength,
-      readOnly,
+      readOnly = false,
       style,
-      value,
-      onChange,
-      onClean,
-      hideMaxLength,
+      value = '',
+      onChange = () => {},
+      onClean = () => {},
+      hideMaxLength = false,
       rightIcon,
       a11yId,
-      closeAriaLabel,
-      includeAriaAttributes,
+      closeAriaLabel = 'Clear',
+      includeAriaAttributes = true,
       leftElement,
       ...props
     },
@@ -286,29 +286,4 @@ Input.propTypes = {
   leftElement: node,
 };
 
-Input.defaultProps = {
-  className: undefined,
-  children: undefined,
-  cleanable: true,
-  disabled: false,
-  error: undefined,
-  full: false,
-  helper: undefined,
-  label: undefined,
-  ariaLabel: undefined,
-  maxLength: undefined,
-  readOnly: false,
-  style: undefined,
-  value: '',
-  onChange: () => {},
-  onClean: () => {},
-  hideMaxLength: false,
-  placeholder: undefined,
-  rightIcon: undefined,
-  a11yId: undefined,
-  closeAriaLabel: 'Clear',
-  includeAriaAttributes: true,
-  leftElement: undefined,
-};
-
 export default Input;

packages/yoga/src/Input/web/Password.jsx

@@ -81,10 +81,10 @@ const IconWrapper = styled.div`
 `;
 
 const Password = ({
-  disabled,
+  disabled = false,
   style,
   className,
-  full,
+  full = false,
   showPasswordAriaLabel,
   hidePasswordAriaLabel,
   ...props
@@ -151,13 +151,4 @@ Password.propTypes = {
   style: shape({}),
 };
 
-Password.defaultProps = {
-  className: undefined,
-  disabled: false,
-  full: false,
-  style: undefined,
-  showPasswordAriaLabel: undefined,
-  hidePasswordAriaLabel: undefined,
-};
-
 export default Password;

packages/yoga/src/Input/web/Phone.jsx

@@ -25,16 +25,17 @@ const phoneBaseSettings = {
 const Phone = React.forwardRef(
   (
     {
-      defaultCountry,
-      disabled,
-      readOnly,
+      defaultCountry = 'br',
+      disabled = false,
+      readOnly = false,
       error,
-      full,
+      full = false,
       helper,
-      label,
-      placeholder,
-      value,
-      onChange,
+      label = '',
+      placeholder = '+55 (11) 999999999',
+      value = '',
+      onChange = () => {},
+      cleanable = true,
       ...rest
     },
     forwardedRef,
@@ -57,6 +58,7 @@ const Phone = React.forwardRef(
           full,
           helper,
           value,
+          cleanable,
           ...rest,
         }}
         ref={inputRef}
@@ -113,19 +115,4 @@ Phone.propTypes = {
   placeholder: string,
 };
 
-Phone.defaultProps = {
-  className: undefined,
-  cleanable: true,
-  defaultCountry: 'br',
-  disabled: false,
-  error: undefined,
-  full: false,
-  helper: undefined,
-  label: '',
-  readOnly: false,
-  value: '',
-  onChange: () => {},
-  placeholder: '+55 (11) 999999999',
-};
-
 export default Phone;

packages/yoga/src/List/web/List.jsx

@@ -42,20 +42,18 @@ const StyledList = styled.ul`
 /** Lists are a continuous group of text or images. They are composed of items
 containing primary and supplemental actions, which are represented by icons and
 text. */
-const List = React.forwardRef(({ horizontal, divided, ...rest }, ref) => (
-  <StyledList horizontal={horizontal} divided={divided} ref={ref} {...rest} />
-));
+
+const List = React.forwardRef(
+  ({ horizontal = false, divided = true, ...rest }, ref) => (
+    <StyledList horizontal={horizontal} divided={divided} ref={ref} {...rest} />
+  ),
+);
 
 List.propTypes = {
   horizontal: PropTypes.bool,
   divided: PropTypes.bool,
 };
 
-List.defaultProps = {
-  horizontal: false,
-  divided: true,
-};
-
 List.displayName = 'List';
 
 export default List;

packages/yoga/src/Menu/web/Menu.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Root as MenuRoot } from '@radix-ui/react-dropdown-menu';
 import { bool, node } from 'prop-types';
 
-const Menu = ({ children, onMouseHover }) => {
+const Menu = ({ children, onMouseHover = true }) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   function handleOpenMenu() {
@@ -32,10 +32,6 @@ Menu.propTypes = {
   onMouseHover: bool,
 };
 
-Menu.defaultProps = {
-  onMouseHover: true,
-};
-
 Menu.displayName = 'Menu';
 
 export default Menu;

packages/yoga/src/Menu/web/MenuItem.jsx

@@ -77,8 +77,8 @@ const MenuItem = forwardRef(
     {
       icon: Icon,
       href,
-      active,
-      disabled,
+      active = false,
+      disabled = false,
       iconColor,
       iconSize,
       children,
@@ -126,15 +126,6 @@ MenuItem.propTypes = {
   iconSize: string,
 };
 
-MenuItem.defaultProps = {
-  icon: undefined,
-  href: undefined,
-  disabled: false,
-  active: false,
-  iconColor: undefined,
-  iconSize: undefined,
-};
-
 MenuItem.displayName = 'Menu.Item';
 
 export default withTheme(MenuItem);

packages/yoga/src/Menu/web/MenuList.jsx

@@ -32,7 +32,17 @@ const StyledMenuList = styled(MenuListRoot)`
 `;
 
 const MenuList = forwardRef(
-  ({ children, align, alignOffset, side, sideOffset, zIndex }, ref) => {
+  (
+    {
+      children,
+      align = 'start',
+      alignOffset = 0,
+      side = 'bottom',
+      sideOffset = 4,
+      zIndex = 'auto',
+    },
+    ref,
+  ) => {
     return (
       <Portal>
         <StyledMenuList
@@ -72,14 +82,6 @@ MenuList.propTypes = {
   zIndex: string || number,
 };
 
-MenuList.defaultProps = {
-  align: 'start',
-  alignOffset: 0,
-  side: 'bottom',
-  sideOffset: 4,
-  zIndex: 'auto',
-};
-
 MenuList.displayName = 'Menu.List';
 
 export default MenuList;

packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap

@@ -80,6 +80,7 @@ exports[`<Menu /> should match snapshot Menu with a onMouseHover props false 1`]
 
 <div>
   <button
+    aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="menu"
     class="c0"
@@ -179,6 +180,7 @@ exports[`<Menu /> should match snapshot Menu with an align props end 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -279,6 +281,7 @@ exports[`<Menu /> should match snapshot Menu with an align props start 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -379,6 +382,7 @@ exports[`<Menu /> should match snapshot Menu.Item with active 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -479,6 +483,7 @@ exports[`<Menu /> should match snapshot Menu.Item with disabled 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -579,6 +584,7 @@ exports[`<Menu /> should match snapshot Menu.Item with disabled and icon 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -679,6 +685,7 @@ exports[`<Menu /> should match snapshot Menu.Item with icon 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -779,6 +786,7 @@ exports[`<Menu /> should match snapshot Menu.Item with link 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -879,6 +887,7 @@ exports[`<Menu /> should match snapshot in default Menu 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"

packages/yoga/src/Popover/web/Popover.jsx

@@ -12,12 +12,12 @@ const Popover = React.forwardRef(
       children,
       title,
       description,
-      position,
-      width,
-      height,
-      zIndex,
+      position = 'bottom-center',
+      width = 265,
+      height = 200,
+      zIndex = 1,
       a11yId,
-      hover,
+      hover = false,
       ...props
     },
     forwardedRef,
@@ -114,14 +114,4 @@ Popover.propTypes = {
   hover: bool,
 };
 
-Popover.defaultProps = {
-  a11yId: undefined,
-  title: undefined,
-  position: 'bottom-center',
-  width: 265,
-  height: 200,
-  zIndex: 1,
-  hover: false,
-};
-
 export default Popover;

packages/yoga/src/Progress/web/Progress.jsx

@@ -80,8 +80,8 @@ const Wrapper = styled.div`
   width: 100%;
 
   ${({
-    isNumber,
-    align,
+    isNumber = false,
+    align = 'left',
     theme: {
       yoga: { spacing },
     },
@@ -131,16 +131,23 @@ Wrapper.propTypes = {
   isNumber: bool,
 };
 
-Wrapper.defaultProps = {
-  align: 'left',
-  isNumber: false,
-};
-
 /** The Progress is a component used to indicate a progress of an indicator
  * of quantity. The use of labels numeric or alphabetic can increase the user
  * understanding. */
 const Progress = React.forwardRef(
-  ({ label, max, value, variant, ...props }, ref) => {
+  (
+    {
+      label = {
+        value: undefined,
+        placement: 'left',
+      },
+      max = 1,
+      value,
+      variant = 'verve',
+      ...props
+    },
+    ref,
+  ) => {
     const isNumber = !/[a-zA-Z]/g.test(label.value);
 
     return (
@@ -195,14 +202,4 @@ Progress.propTypes = {
   ]),
 };
 
-Progress.defaultProps = {
-  label: {
-    value: undefined,
-    placement: 'left',
-  },
-  max: 1,
-  value: undefined,
-  variant: 'verve',
-};
-
 export default Progress;

packages/yoga/src/RadioGroup/web/Button/RadioButton.jsx

@@ -68,10 +68,10 @@ const ButtonWrapper = styled.div`
     border-color: ${radiogroup.button.border.color};
     border-top-width: ${radiogroup.button.border.width}px;
     border-bottom-width: ${radiogroup.button.border.width}px;
-    
+
     border-left: none;
     border-right: none;
-    
+
     &:first-child {
       border-right-width: 0;
       border-left-width: ${radiogroup.button.border.width}px;
@@ -81,7 +81,7 @@ const ButtonWrapper = styled.div`
       border-top-left-radius: ${radiogroup.button.border.radius}px;
       border-bottom-left-radius: ${radiogroup.button.border.radius}px;
     }
-  
+
     &:last-child {
       border-left-width: 0;
 
@@ -98,7 +98,7 @@ const ButtonWrapper = styled.div`
 /** Radio group allows user to select one option from a set of options. Use
 value on group to set the selected option. */
 const RadioGroupButton = React.forwardRef(
-  ({ children, value, ...rest }, ref) => {
+  ({ children, value = '', ...rest }, ref) => {
     const { name, onChange, small, selectedValue, ...context } =
       useContext(RadioGroupContext);
 
@@ -132,8 +132,4 @@ RadioGroupButton.propTypes = {
   value: oneOfType([string, number]),
 };
 
-RadioGroupButton.defaultProps = {
-  value: '',
-};
-
 export default RadioGroupButton;

packages/yoga/src/RadioGroup/web/Radio/Radio.jsx

@@ -25,7 +25,7 @@ const Radio = styled.span`
       width: ${radio.size}px;
       height: ${radio.size}px;
 
-      border-width: ${radio.size * 0.1}px; 
+      border-width: ${radio.size * 0.1}px;
       border-style: solid;
       border-color: ${radio.backgroundColor};
       border-radius: ${radio.border.radius}px;
@@ -89,28 +89,28 @@ const Wrapper = styled.div`
     ${
       checked
         ? `
-    
+
       &:hover {
         ${Radio} {
           background-color: ${stateColors.hover};
-          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px 
+          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px
             ${stateColors.hover};
         }
       }
-    
+
       &:focus-within {
         ${Radio} {
           z-index: 1;
           background-color: ${stateColors.focusWithin};
-          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px 
+          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px
             ${stateColors.focusWithin};
         }
       }
-    
+
       &:active {
         ${Radio} {
           background-color: ${stateColors.active};
-          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px 
+          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px
             ${stateColors.active};
         }
       }
@@ -125,12 +125,12 @@ const Wrapper = styled.div`
 
           width: ${radiogroup.radio.size * 0.5}px;
           height: ${radiogroup.radio.size * 0.5}px;
-          
+
           border-radius: 100%;
           background-color: ${radiogroup.checked.backgroundColor};
-          
+
           transform: translate(-50%, -50%);
-          
+
           content: '';
         }
       }
@@ -172,8 +172,9 @@ const Wrapper = styled.div`
 
 /** The Radio is a type of selection control that allows the user to select a
  * single option from a list. */
+
 const RadioGroupRadio = React.forwardRef(
-  ({ value, disabled, style, className, ...rest }, ref) => {
+  ({ value = '', disabled = false, style = {}, className, ...rest }, ref) => {
     const { name, onChange, selectedValue, ...context } =
       useContext(RadioGroupContext);
 
@@ -217,11 +218,4 @@ RadioGroupRadio.propTypes = {
   value: oneOfType([string, number]),
 };
 
-RadioGroupRadio.defaultProps = {
-  className: undefined,
-  disabled: false,
-  style: {},
-  value: '',
-};
-
 export default RadioGroupRadio;

packages/yoga/src/RadioGroup/web/RadioGroup.jsx

@@ -17,13 +17,13 @@ const Group = styled.div.attrs({
 `;
 
 const RadioGroup = ({
-  name,
-  onChange,
-  selectedValue,
-  small,
-  full,
-  children,
-  style,
+  name = '',
+  onChange = () => {},
+  selectedValue = '',
+  small = false,
+  full = false,
+  children = null,
+  style = {},
   ...rest
 }) => (
   <RadioGroupContext.Provider
@@ -51,14 +51,4 @@ RadioGroup.propTypes = {
   style: shape({}),
 };
 
-RadioGroup.defaultProps = {
-  name: '',
-  onChange: () => {},
-  selectedValue: '',
-  small: false,
-  full: false,
-  children: null,
-  style: {},
-};
-
 export default RadioGroup;

packages/yoga/src/Rating/web/Rating.jsx

@@ -28,19 +28,22 @@ const RatingWrapper = styled.div`
 /** Use the Rating component to view other people's opinions and experiences. */
 const Rating = ({
   value,
-  max,
-  readOnly,
-  onRate,
-  onMouseOver,
-  onMouseMove,
-  onMouseLeave,
+  max = 5,
+  readOnly = true,
+  onRate = () => {},
+  onMouseOver = () => {},
+  onMouseMove = () => {},
+  onMouseLeave = () => {},
   theme: {
     yoga: {
       colors,
       components: { rating },
     },
   },
-  icon: { type: Icon = StarFilled, size: iconSize = rating.icon.size },
+  icon: { type: Icon = StarFilled, size: iconSize = rating.icon.size } = {
+    type: StarFilled,
+    size: 12,
+  },
   ...rest
 }) => {
   const wrapperRef = useRef(null);
@@ -153,18 +156,4 @@ Rating.propTypes = {
   onMouseLeave: func,
 };
 
-Rating.defaultProps = {
-  value: undefined,
-  icon: {
-    type: StarFilled,
-    size: 12,
-  },
-  max: 5,
-  readOnly: true,
-  onRate: rating => {}, // eslint-disable-line no-unused-vars
-  onMouseOver: () => {},
-  onMouseMove: () => {},
-  onMouseLeave: () => {},
-};
-
 export default withTheme(Rating);

packages/yoga/src/Skeleton/web/Skeleton.jsx

@@ -53,8 +53,8 @@ const StyledSkeleton = styled.div`
   `}
 `;
 
-function Skeleton(props) {
-  return <StyledSkeleton {...props} />;
+function Skeleton({ animation = 'pulse', color = 'primary', ...rest }) {
+  return <StyledSkeleton {...rest} animation={animation} color={color} />;
 }
 
 Skeleton.propTypes = {
@@ -110,10 +110,4 @@ Skeleton.propTypes = {
   animation: oneOf(['pulse', false]),
 };
 
-Skeleton.defaultProps = {
-  variant: undefined,
-  animation: 'pulse',
-  color: 'primary',
-};
-
 export default Skeleton;

packages/yoga/src/Slider/web/Marker.jsx

@@ -33,7 +33,13 @@ const Circle = styled(RCHandle)`
   `}
 `;
 
-const Marker = ({ values, dragging, index, tooltip, ...props }) => {
+const Marker = ({
+  values = [0],
+  dragging = false,
+  index = 0,
+  tooltip,
+  ...props
+}) => {
   const renderTooltip = () => {
     if (!dragging) {
       return false;
@@ -70,11 +76,4 @@ Marker.propTypes = {
   ),
 };
 
-Marker.defaultProps = {
-  values: [0],
-  dragging: false,
-  index: 0,
-  tooltip: undefined,
-};
-
 export default Marker;

packages/yoga/src/Slider/web/Slider.jsx

@@ -36,12 +36,12 @@ reflect a range of values along a bar, from which users may select a single
 value. They are ideal for adjusting settings such as volume, brightness, or
 applying image filters. */
 const Slider = ({
-  snapped,
-  tooltip,
-  values,
-  max,
+  snapped = false,
+  tooltip = [],
+  values = [0],
+  max = 10,
   maxLabel,
-  min,
+  min = 0,
   minLabel,
   theme: {
     yoga: {
@@ -223,16 +223,6 @@ Slider.propTypes = {
   values: arrayOf(number),
 };
 
-Slider.defaultProps = {
-  max: 10,
-  maxLabel: undefined,
-  min: 0,
-  minLabel: undefined,
-  snapped: false,
-  tooltip: [],
-  values: [0],
-};
-
 Slider.displayName = 'Slider';
 
 export default withTheme(Slider);

packages/yoga/src/Slider/web/Tooltip.jsx

@@ -12,7 +12,7 @@ const Wrapper = styled.div`
   transform: translateX(-50%);
 
   ${({
-    hasRibbon,
+    hasRibbon = false,
     theme: {
       yoga: {
         components: { slider },
@@ -33,10 +33,6 @@ Wrapper.propTypes = {
   hasRibbon: bool,
 };
 
-Wrapper.defaultProps = {
-  hasRibbon: false,
-};
-
 const Tip = styled.div`
   position: relative;
   z-index: 3;
@@ -139,7 +135,7 @@ const Description = styled(Text.Body2)`
   `}
 `;
 
-const Tooltip = ({ data, ...props }) =>
+const Tooltip = ({ data = {}, ...props }) =>
   Object.keys(data).length ? (
     <Wrapper hasRibbon={Boolean(data.ribbon)} {...props}>
       {data.ribbon && <Ribbon as="span">{data.ribbon}</Ribbon>}
@@ -163,8 +159,4 @@ Tooltip.propTypes = {
   }),
 };
 
-Tooltip.defaultProps = {
-  data: {},
-};
-
 export default Tooltip;

packages/yoga/src/Snackbar/web/Snackbar.jsx

@@ -64,22 +64,22 @@ const StyledSnackbar = styled.div`
       align-items: center;
       justify-content: space-between;
       box-sizing: border-box;
-  
+
       position: fixed;
       bottom: ${snackbar.position.mobile.bottom}px;
       right: ${snackbar.position.mobile.right}px;
       left: ${snackbar.position.mobile.left}px;
-  
+
       min-width: ${snackbar.minWidth.mobile}px;
       max-width: ${snackbar.maxWidth.default}px;
-  
+
       min-height: ${snackbar.height.min}px;
       max-height: ${snackbar.height.max}px;
-  
+
       padding: ${snackbar.padding.default}px;
-      
+
       border-radius: ${snackbar.border.radius}px;
-  
+
       box-shadow: ${snackbar.shadow.default};
 
       background-color: ${snackbar.variant.color[variant]};
@@ -112,17 +112,17 @@ const AnimatedSnackbar = styled(StyledSnackbar)`
 const Snackbar = React.forwardRef(
   (
     {
-      open,
+      open = false,
       duration,
-      variant,
-      hideIcon,
+      variant = 'success',
+      hideIcon = false,
       message,
       actionLabel,
       onAction,
       onClose,
-      hideCloseButton,
+      hideCloseButton = false,
       ariaLabelClose,
-      dataTestId,
+      dataTestId = 'snackbar',
       theme: {
         yoga: {
           components: { snackbar },
@@ -227,16 +227,4 @@ Snackbar.propTypes = {
   dataTestId: string,
 };
 
-Snackbar.defaultProps = {
-  open: false,
-  duration: undefined,
-  actionLabel: undefined,
-  hideIcon: false,
-  onAction: undefined,
-  variant: 'success',
-  hideCloseButton: false,
-  ariaLabelClose: undefined,
-  dataTestId: 'snackbar',
-};
-
 export default memo(withTheme(Snackbar));

packages/yoga/src/Spinner/web/Spinner.jsx

@@ -50,29 +50,31 @@ const StyledSpinner = styled.span`
   `}
 `;
 
-const Spinner = React.forwardRef(({ size, color, theme }, ref) => {
-  return (
-    <StyledSpinner
-      color={get(theme.yoga.colors, color, color)}
-      size={get(theme.yoga.spacing, size, size)}
-      ref={ref}
-      aria-label="loading-icon"
-    >
-      <span className="spinner">
-        <svg className="circular" viewBox="22 22 44 44">
-          <circle
-            className="path"
-            fill="none"
-            strokeWidth="3.6"
-            cx="44"
-            cy="44"
-            r="20.2"
-          />
-        </svg>
-      </span>
-    </StyledSpinner>
-  );
-});
+const Spinner = React.forwardRef(
+  ({ size = 'medium', color = 'primary', theme }, ref) => {
+    return (
+      <StyledSpinner
+        color={get(theme.yoga.colors, color, color)}
+        size={get(theme.yoga.spacing, size, size)}
+        ref={ref}
+        aria-label="loading-icon"
+      >
+        <span className="spinner">
+          <svg className="circular" viewBox="22 22 44 44">
+            <circle
+              className="path"
+              fill="none"
+              strokeWidth="3.6"
+              cx="44"
+              cy="44"
+              r="20.2"
+            />
+          </svg>
+        </span>
+      </StyledSpinner>
+    );
+  },
+);
 
 const commonSizes = [
   'xxxsmall',
@@ -93,9 +95,4 @@ Spinner.propTypes = {
   color: string,
 };
 
-Spinner.defaultProps = {
-  size: 'medium',
-  color: 'primary',
-};
-
 export default withTheme(Spinner);

packages/yoga/src/Stepper/web/Dots.jsx

@@ -71,7 +71,7 @@ const Wrapper = styled.div`
   justify-content: space-between;
 `;
 
-function Dots({ activeStep, labels, secondary }) {
+function Dots({ activeStep = 0, labels = [], secondary = false }) {
   return (
     <Wrapper>
       {labels.map((label, index) => (
@@ -94,10 +94,4 @@ Dots.propTypes = {
   secondary: bool,
 };
 
-Dots.defaultProps = {
-  activeStep: 0,
-  labels: [],
-  secondary: false,
-};
-
 export default Dots;

packages/yoga/src/Stepper/web/Line.jsx

@@ -35,9 +35,4 @@ Line.propTypes = {
   totalSteps: number,
 };
 
-Line.defaultProps = {
-  activeStep: 0,
-  totalSteps: 0,
-};
-
 export default Line;

packages/yoga/src/Stepper/web/Stepper.jsx

@@ -32,7 +32,7 @@ const LineWrapper = styled.div`
 
 /** Stepper is responsible for the logic that drives a stepped workflow, it
 provides a wizard-like workflow by dividing content into logical steps. */
-function Stepper({ children, activeStep, secondary, ...rest }) {
+function Stepper({ children, activeStep = 0, secondary = false, ...rest }) {
   return (
     <Root {...rest}>
       <LineWrapper>
@@ -65,11 +65,4 @@ Stepper.propTypes = {
   activeStep: limitChildren,
   secondary: bool,
 };
-
-Stepper.defaultProps = {
-  children: undefined,
-  activeStep: 0,
-  secondary: false,
-};
-
 export default Stepper;

packages/yoga/src/Tag/web/Informative.jsx

@@ -29,15 +29,15 @@ const Informative = styled(StyledTag)`
 const TagInformative = ({
   children,
   icon,
-  variant,
+  variant = 'neutral',
   theme: {
     yoga: {
       colors: { text },
       components: { tag },
     },
   },
-  small,
-  ellipsis,
+  small = false,
+  ellipsis = false,
   ...rest
 }) => (
   <Informative variant={variant} small={small} {...rest}>
@@ -66,13 +66,6 @@ TagInformative.propTypes = {
   ellipsis: bool,
 };
 
-TagInformative.defaultProps = {
-  icon: undefined,
-  small: false,
-  variant: 'neutral',
-  ellipsis: false,
-};
-
 TagInformative.displayName = 'Tag.Informative';
 
 export default withTheme(TagInformative);

packages/yoga/src/Tag/web/Tag.jsx

@@ -69,7 +69,13 @@ export const StyledText = styled(Text.Overline)`
 `;
 
 /** Tags should be keywords to categorize or organize an item. */
-const Tag = ({ children, variant, small, ellipsis, ...rest }) => (
+const Tag = ({
+  children,
+  variant = '',
+  small = false,
+  ellipsis = false,
+  ...rest
+}) => (
   <StyledTag variant={variant} small={small} {...rest}>
     <StyledText numberOfLines={ellipsis ? 1 : undefined}>{children}</StyledText>
   </StyledTag>
@@ -85,10 +91,4 @@ Tag.propTypes = {
   ellipsis: bool,
 };
 
-Tag.defaultProps = {
-  variant: '',
-  small: false,
-  ellipsis: false,
-};
-
 export default Tag;

packages/yoga/src/Text/web/Text.jsx

@@ -110,7 +110,21 @@ Black.displayName = 'Text.Black';
 
 const TextRenderer = styledText('p');
 
-const Text = props => <TextRenderer {...props} />;
+const Text = ({
+  inverted = false,
+  fontSize = 'medium',
+  light = false,
+  bold = false,
+  ...rest
+}) => (
+  <TextRenderer
+    {...rest}
+    inverted={inverted}
+    fontSize={fontSize}
+    light={light}
+    bold={bold}
+  />
+);
 
 Text.displayName = 'Text';
 
@@ -184,16 +198,6 @@ Text.propTypes = {
   fontSize: fontSizes,
 };
 
-Text.defaultProps = {
-  inverted: false,
-  variant: undefined,
-  size: undefined,
-  fontSize: 'medium',
-  numberOfLines: undefined,
-  light: false,
-  bold: false,
-};
-
 export {
   TextRenderer,
   Display1,

packages/yoga/src/TextArea/web/TextArea.jsx

@@ -37,16 +37,17 @@ const StyledField = styled(Field)`
 const TextArea = React.forwardRef(
   (
     {
-      disabled,
+      disabled = false,
       error,
-      full,
+      full = false,
       helper,
-      label,
+      label = '',
       maxLength,
       className,
       style,
-      value,
-      onChange,
+      value = '',
+      onChange = () => {},
+      readOnly = false,
       ...props
     },
     ref,
@@ -76,6 +77,7 @@ const TextArea = React.forwardRef(
         >
           <StyledField
             {...props}
+            readOnly={readOnly}
             disabled={disabled}
             full={full}
             label={label}
@@ -129,19 +131,4 @@ TextArea.propTypes = {
   onChange: func,
 };
 
-TextArea.defaultProps = {
-  className: undefined,
-  disabled: false,
-  error: undefined,
-  full: false,
-  helper: undefined,
-  label: '',
-  maxLength: undefined,
-  placeholder: undefined,
-  readOnly: false,
-  style: undefined,
-  value: '',
-  onChange: () => {},
-};
-
 export default TextArea;

packages/yoga/src/Theme/Provider/Provider.jsx

@@ -54,16 +54,12 @@ const getTheme = ({ locale, theme }) => {
 };
 
 /** This component provides a theme to all React components underneath itself via the context API. */
-const Provider = ({ locale, theme, ...rest }) => (
+const Provider = ({ locale = 'pt-BR', theme, ...rest }) => (
   <ThemeProvider theme={{ yoga: getTheme({ locale, theme }) }} {...rest} />
 );
 
 Provider.propTypes = {
   locale: PropTypes.string,
 };
 
-Provider.defaultProps = {
-  locale: 'pt-BR',
-};
-
 export default Provider;