@hero-design/rn 8.0.0-4 → 8.0.0-5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.0.0-4",
+  "version": "8.0.0-5",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.0.0-4",
+    "@hero-design/colors": "8.0.0-5",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.12"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.0.0-4",
+    "@hero-design/eslint-plugin": "8.0.0-5",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.0.0-4",
+    "eslint-config-hd": "8.0.0-5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.0.0-4",
+    "prettier-config-hd": "8.0.0-5",
     "react": "17.0.2",
     "react-native": "0.65.1",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Alert/StyledAlert.tsx

@@ -4,10 +4,9 @@ import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 
 const Container = styled(View)<{
-  themeVariant: 'default' | 'round';
   themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
-}>(({ theme, themeVariant = 'default', themeIntent }) => ({
-  borderRadius: themeVariant === 'round' ? theme.__hd__.alert.radii.default : 0,
+}>(({ theme, themeIntent }) => ({
+  borderRadius: theme.__hd__.alert.radii.default,
   backgroundColor: theme.__hd__.alert.colors[themeIntent],
   minHeight: theme.__hd__.alert.sizes.height,
   flexDirection: 'row',

package/src/components/Alert/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
     Array [
       Object {
         "backgroundColor": "#b5c3fd",
-        "borderRadius": 0,
+        "borderRadius": 16,
         "flexDirection": "row",
         "minHeight": 48,
       },
@@ -14,7 +14,6 @@ exports[`Alert Icon render custom icon correctly 1`] = `
     ]
   }
   themeIntent="info"
-  themeVariant="default"
 >
   <View
     showDivider={false}
@@ -100,7 +99,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
     Array [
       Object {
         "backgroundColor": "#f46363",
-        "borderRadius": 0,
+        "borderRadius": 16,
         "flexDirection": "row",
         "minHeight": 48,
       },
@@ -108,7 +107,6 @@ exports[`Alert renders correctly when intent is error 1`] = `
     ]
   }
   themeIntent="error"
-  themeVariant="default"
 >
   <View
     showDivider={true}
@@ -250,7 +248,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
     Array [
       Object {
         "backgroundColor": "#b5c3fd",
-        "borderRadius": 0,
+        "borderRadius": 16,
         "flexDirection": "row",
         "minHeight": 48,
       },
@@ -258,7 +256,6 @@ exports[`Alert renders correctly when intent is info 1`] = `
     ]
   }
   themeIntent="info"
-  themeVariant="default"
 >
   <View
     showDivider={true}
@@ -400,7 +397,7 @@ exports[`Alert renders correctly when intent is notification 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
-        "borderRadius": 0,
+        "borderRadius": 16,
         "flexDirection": "row",
         "minHeight": 48,
       },
@@ -408,7 +405,6 @@ exports[`Alert renders correctly when intent is notification 1`] = `
     ]
   }
   themeIntent="notification"
-  themeVariant="default"
 >
   <View
     showDivider={true}
@@ -523,7 +519,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
     Array [
       Object {
         "backgroundColor": "#5ace7d",
-        "borderRadius": 0,
+        "borderRadius": 16,
         "flexDirection": "row",
         "minHeight": 48,
       },
@@ -531,7 +527,6 @@ exports[`Alert renders correctly when intent is success 1`] = `
     ]
   }
   themeIntent="success"
-  themeVariant="default"
 >
   <View
     showDivider={true}
@@ -673,7 +668,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffbe71",
-        "borderRadius": 0,
+        "borderRadius": 16,
         "flexDirection": "row",
         "minHeight": 48,
       },
@@ -681,7 +676,6 @@ exports[`Alert renders correctly when intent is warning 1`] = `
     ]
   }
   themeIntent="warning"
-  themeVariant="default"
 >
   <View
     showDivider={true}

package/src/components/Alert/index.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import type { ReactElement } from 'react';
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 import Icon from '../Icon';
 import Typography from '../Typography';
 import {
@@ -10,8 +11,6 @@ import {
   IconContainer,
   TextContainer,
 } from './StyledAlert';
-import type { IconName } from '../Icon';
-import { useDeprecation } from '../../utils/hooks';
 
 const getIntentIcon = (
   intent: 'success' | 'info' | 'warning' | 'error' | 'notification'
@@ -61,11 +60,6 @@ interface AlertProps {
    * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
    */
   onClose?: () => void;
-  /**
-   * @deprecated
-   * Use rounded variant.
-   */
-  variant?: 'default' | 'round';
   /**
    * Addtional style.
    */
@@ -82,25 +76,11 @@ const Alert = ({
   title,
   intent = 'info',
   onClose,
-  variant: _variant,
   style,
   testID,
 }: AlertProps): JSX.Element => {
-  const variant: AlertProps['variant'] =
-    _variant === undefined ? 'default' : _variant;
-
-  useDeprecation(
-    "Alert's variant prop will be removed in the next major release. Rounded will be the only variant available.",
-    _variant !== undefined
-  );
-
   return (
-    <Container
-      themeVariant={variant}
-      themeIntent={intent}
-      style={style}
-      testID={testID}
-    >
+    <Container themeIntent={intent} style={style} testID={testID}>
       <ContentContainer showDivider={!!onClose}>
         {icon !== null ? (
           <AlertIcon icon={icon || getIntentIcon(intent)} />

package/src/components/Box/__tests__/__snapshots__/index.spec.tsx.snap

@@ -74,16 +74,7 @@ exports[`Box map prop to valid property and correct color from theme 2`] = `
   borderTopColor="danger"
   style={
     Array [
-      Object {
-        "backgroundColor": "#de350b",
-        "borderBottomColor": "#de350b",
-        "borderColor": "#de350b",
-        "borderEndColor": "#de350b",
-        "borderLeftColor": "#de350b",
-        "borderRightColor": "#de350b",
-        "borderStartColor": "#de350b",
-        "borderTopColor": "#de350b",
-      },
+      Object {},
       undefined,
     ]
   }
@@ -130,16 +121,7 @@ exports[`Box map prop to valid property and correct color from theme 4`] = `
   borderTopColor="backgroundDark"
   style={
     Array [
-      Object {
-        "backgroundColor": "#001f23",
-        "borderBottomColor": "#001f23",
-        "borderColor": "#001f23",
-        "borderEndColor": "#001f23",
-        "borderLeftColor": "#001f23",
-        "borderRightColor": "#001f23",
-        "borderStartColor": "#001f23",
-        "borderTopColor": "#001f23",
-      },
+      Object {},
       undefined,
     ]
   }
@@ -551,9 +533,7 @@ exports[`Box map prop with shortcut name to valid property and correct color fro
   bgColor="danger"
   style={
     Array [
-      Object {
-        "backgroundColor": "#de350b",
-      },
+      Object {},
       undefined,
     ]
   }
@@ -579,9 +559,7 @@ exports[`Box map prop with shortcut name to valid property and correct color fro
   bgColor="backgroundDark"
   style={
     Array [
-      Object {
-        "backgroundColor": "#001f23",
-      },
+      Object {},
       undefined,
     ]
   }

package/src/components/Button/Button.tsx

@@ -1,16 +1,15 @@
-import React from 'react';
 import type { ReactChild } from 'react';
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 import LoadingIndicator from './LoadingIndicator';
+import type { Intent, ThemeVariant } from './StyledButton';
 import {
   StyledButtonContainer,
-  StyledButtonText,
-  StyledButtonIconWrapper,
   StyledButtonIcon,
+  StyledButtonIconWrapper,
+  StyledButtonText,
 } from './StyledButton';
-import type { IconName } from '../Icon';
-import type { Intent, ThemeVariant } from './StyledButton';
-import { useDeprecation } from '../../utils/hooks';
 
 export interface ButtonProps {
   /**
@@ -59,9 +58,8 @@ export interface ButtonProps {
   text: ReactChild;
   /**
    * Button type.
-   * basic-transparent is deprecated and will be removed in the next major release.
    */
-  variant?: 'basic-transparent' | 'filled' | 'outlined' | 'text';
+  variant?: 'filled' | 'outlined' | 'text';
 }
 
 const FILLED_VARIANTS = {
@@ -83,12 +81,10 @@ const TEXT_VARIANTS = {
 } as const;
 
 export const getThemeVariant = (
-  variant: 'basic-transparent' | 'filled' | 'outlined' | 'text',
+  variant: 'filled' | 'outlined' | 'text',
   intent: Intent
 ): ThemeVariant => {
   switch (variant) {
-    case 'basic-transparent':
-      return variant;
     case 'filled':
       return FILLED_VARIANTS[intent];
     case 'outlined':
@@ -114,11 +110,6 @@ const Button = ({
 }: ButtonProps): JSX.Element => {
   const themeVariant = getThemeVariant(variant, intent);
 
-  useDeprecation(
-    "Button's basic-transparent variant is deprecated and will be removed in the next major release.\nPlease use other variants instead.",
-    variant === 'basic-transparent'
-  );
-
   return (
     <StyledButtonContainer
       accessibilityHint={accessibilityHint}

package/src/components/Button/StyledButton.tsx

@@ -8,7 +8,6 @@ import Typography from '../Typography';
 type Intent = 'primary' | 'secondary' | 'danger';
 
 type ThemeVariant =
-  | 'basic-transparent'
   | 'filled-primary'
   | 'filled-secondary'
   | 'filled-danger'
@@ -19,35 +18,6 @@ type ThemeVariant =
   | 'text-secondary'
   | 'text-danger';
 
-const genBasicTransparentContainerStyles = (
-  theme: Theme,
-  disabled: boolean
-): ReactNativeStyle => {
-  const borderColorStyling = () => {
-    if (disabled) {
-      return {
-        borderColor: theme.__hd__.button.colors.disabledBorder,
-      };
-    }
-
-    return { borderColor: theme.__hd__.button.colors.invertedText };
-  };
-
-  return {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding:
-      theme.__hd__.button.space.buttonPadding -
-      theme.__hd__.button.borderWidth.default,
-    borderWidth: theme.__hd__.button.borderWidth.default,
-    borderRadius: theme.__hd__.button.radii.default,
-    backgroundColor: 'transparent',
-    ...borderColorStyling(),
-  };
-};
-
 const genFilledContainerStyles = (
   theme: Theme,
   intent: Intent,
@@ -153,8 +123,6 @@ const StyledButtonContainer = styled(TouchableOpacity)<{
   themeVariant: ThemeVariant;
 }>(({ disabled = false, themeVariant, theme }) => {
   switch (themeVariant) {
-    case 'basic-transparent':
-      return genBasicTransparentContainerStyles(theme, disabled);
     case 'filled-primary':
       return genFilledContainerStyles(theme, 'primary', disabled);
     case 'filled-secondary':
@@ -186,14 +154,6 @@ const StyledButtonText = styled(Typography.Text)<{
 }>(({ disabled, themeVariant, theme }) => {
   const themeStyling = () => {
     switch (themeVariant) {
-      case 'basic-transparent':
-        return {
-          fontSize: theme.__hd__.button.fontSize.default,
-          lineHeight: theme.__hd__.button.lineHeight.default,
-          color: disabled
-            ? theme.__hd__.button.colors.disabledText
-            : theme.__hd__.button.colors.invertedText,
-        };
       case 'filled-primary':
       case 'filled-secondary':
       case 'filled-danger':
@@ -241,12 +201,6 @@ const StyledButtonIcon = styled(Icon)<{
 }>(({ disabled, themeVariant, theme }) => {
   const themeStyling = () => {
     switch (themeVariant) {
-      case 'basic-transparent':
-        return {
-          color: disabled
-            ? theme.__hd__.button.colors.disabledText
-            : theme.__hd__.button.colors.invertedText,
-        };
       case 'filled-primary':
       case 'filled-secondary':
       case 'filled-danger':

package/src/components/Button/__tests__/Button.spec.tsx

@@ -79,17 +79,16 @@ describe('Button', () => {
 
 describe('getThemeVariant', () => {
   it.each`
-    variant                | intent         | themeVariant
-    ${'basic-transparent'} | ${'primary'}   | ${'basic-transparent'}
-    ${'filled'}            | ${'primary'}   | ${'filled-primary'}
-    ${'filled'}            | ${'secondary'} | ${'filled-secondary'}
-    ${'filled'}            | ${'danger'}    | ${'filled-danger'}
-    ${'outlined'}          | ${'primary'}   | ${'outlined-primary'}
-    ${'outlined'}          | ${'secondary'} | ${'outlined-secondary'}
-    ${'outlined'}          | ${'danger'}    | ${'outlined-danger'}
-    ${'text'}              | ${'primary'}   | ${'text-primary'}
-    ${'text'}              | ${'secondary'} | ${'text-secondary'}
-    ${'text'}              | ${'danger'}    | ${'text-danger'}
+    variant       | intent         | themeVariant
+    ${'filled'}   | ${'primary'}   | ${'filled-primary'}
+    ${'filled'}   | ${'secondary'} | ${'filled-secondary'}
+    ${'filled'}   | ${'danger'}    | ${'filled-danger'}
+    ${'outlined'} | ${'primary'}   | ${'outlined-primary'}
+    ${'outlined'} | ${'secondary'} | ${'outlined-secondary'}
+    ${'outlined'} | ${'danger'}    | ${'outlined-danger'}
+    ${'text'}     | ${'primary'}   | ${'text-primary'}
+    ${'text'}     | ${'secondary'} | ${'text-secondary'}
+    ${'text'}     | ${'danger'}    | ${'text-danger'}
   `('returns $themeVariant', ({ variant, intent, themeVariant }) => {
     expect(getThemeVariant(variant, intent)).toBe(themeVariant);
   });

package/src/components/Button/__tests__/StyledButton.spec.tsx

@@ -13,7 +13,6 @@ import {
 describe('StyledButtonContainer', () => {
   it.each`
     themeVariant
-    ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
     ${'filled-danger'}
@@ -47,7 +46,6 @@ describe('StyledButtonContainer', () => {
 describe('StyledButtonText', () => {
   it.each`
     themeVariant
-    ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
     ${'filled-danger'}
@@ -93,7 +91,6 @@ describe('StyledButtonIconWrapper', () => {
 describe('StyledButtonIcon', () => {
   it.each`
     themeVariant
-    ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
     ${'filled-danger'}

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -1,39 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledButtonContainer has basic-transparent style 1`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  nativeID="animatedComponent"
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "transparent",
-      "borderColor": "#ffffff",
-      "borderRadius": 32,
-      "borderWidth": 2,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "opacity": 1,
-      "padding": 14,
-      "width": "100%",
-    }
-  }
->
-  <Text>
-    Title
-  </Text>
-</View>
-`;
-
 exports[`StyledButtonContainer has filled-danger style 1`] = `
 <View
   accessible={true}
@@ -354,29 +320,6 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has basic-transparent style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
 exports[`StyledButtonIcon has filled-danger style 1`] = `
 <HeroIcon
   name="bell"
@@ -641,40 +584,6 @@ exports[`StyledButtonIconWrapper has right style 1`] = `
 />
 `;
 
-exports[`StyledButtonText has basic-transparent style 1`] = `
-<Text
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
-          "lineHeight": 24,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="basic-transparent"
->
-  Example
-</Text>
-`;
-
 exports[`StyledButtonText has filled-danger style 1`] = `
 <Text
   style={

package/src/components/Card/StyledCard.tsx

@@ -2,10 +2,8 @@ import { View } from 'react-native';
 import styled from '@emotion/native';
 
 const StyledCard = styled(View)<{
-  themeVariant: 'basic' | 'data';
   themeIntent?: 'primary' | 'success' | 'warning';
-}>(({ themeVariant, theme, themeIntent }) => ({
-  ...(themeVariant === 'data' && { flexDirection: 'row' }),
+}>(({ theme, themeIntent }) => ({
   ...(themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent],
   }),
@@ -13,11 +11,4 @@ const StyledCard = styled(View)<{
   overflow: 'hidden',
 }));
 
-// DEPRECATED
-const LeftDataCard = styled(View)(({ theme }) => ({
-  backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
-  width: theme.__hd__.card.sizes.indicatorWidth,
-  height: '100%',
-}));
-
-export { StyledCard, LeftDataCard };
+export { StyledCard };

package/src/components/Card/__tests__/StyledCard.spec.tsx

@@ -1,22 +1,10 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledCard, LeftDataCard } from '../StyledCard';
+import { StyledCard } from '../StyledCard';
 
 describe('StyledCard', () => {
   it('renders correct basic style', () => {
-    const { toJSON } = renderWithTheme(<StyledCard themeVariant="basic" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correct data style', () => {
-    const { toJSON } = renderWithTheme(<StyledCard themeVariant="data" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('LeftDataCard', () => {
-  it('renders correctly', () => {
-    const { toJSON } = renderWithTheme(<LeftDataCard />);
+    const { toJSON } = renderWithTheme(<StyledCard />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/src/components/Card/__tests__/__snapshots__/StyledCard.spec.tsx.snap

@@ -1,20 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LeftDataCard renders correctly 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "backgroundColor": "#401960",
-        "height": "100%",
-        "width": 16,
-      },
-      undefined,
-    ]
-  }
-/>
-`;
-
 exports[`StyledCard renders correct basic style 1`] = `
 <View
   style={
@@ -26,22 +11,5 @@ exports[`StyledCard renders correct basic style 1`] = `
       undefined,
     ]
   }
-  themeVariant="basic"
-/>
-`;
-
-exports[`StyledCard renders correct data style 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "borderRadius": 12,
-        "flexDirection": "row",
-        "overflow": "hidden",
-      },
-      undefined,
-    ]
-  }
-  themeVariant="data"
 />
 `;