@hero-design/rn 8.16.1 → 8.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.16.1",
+  "version": "8.17.0",
   "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.16.1",
+    "@hero-design/colors": "8.17.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -32,6 +32,7 @@
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "^1.10.3 | ~2.1.0",
+    "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",
@@ -44,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.16.1",
+    "@hero-design/eslint-plugin": "8.17.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,12 +61,13 @@
     "@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.16.1",
+    "eslint-config-hd": "8.17.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.16.1",
+    "prettier-config-hd": "8.17.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",
+    "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",

package/rollup.config.js

@@ -33,6 +33,7 @@ export default {
     'react-native-webview',
     'react-native-pager-view',
     'react-native-vector-icons',
+    'react-native-linear-gradient',
   ],
   plugins: [
     replace({

package/src/components/Error/index.tsx

@@ -110,8 +110,12 @@ const ErrorPage = ({
     secondaryCtaText && onSecondaryCtaPress !== undefined;
   const showButtonContainer = showCta || showSecondaryCta;
   return (
-    <StyledErrorContainer testID={testID} themeVariant={variant}>
-      <StyledErrorContent {...nativeProps}>
+    <StyledErrorContainer
+      testID={testID}
+      themeVariant={variant}
+      {...nativeProps}
+    >
+      <StyledErrorContent>
         {image && (
           <StyledErrorImageContainer>
             {renderImage(image)}

package/src/components/Skeleton/StyledSkeleton.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/native';
+import Box from '../Box';
+
+type ThemeIntent = 'light' | 'dark';
+type ThemeVariant = 'circular' | 'rectangular' | 'rounded';
+
+const StyledContainer = styled(Box)<{
+  themeIntent: ThemeIntent;
+  themeVariant: ThemeVariant;
+}>(({ theme, themeIntent, themeVariant }) => ({
+  backgroundColor:
+    themeIntent === 'light'
+      ? theme.__hd__.skeleton.colors.lightBackground
+      : theme.__hd__.skeleton.colors.darkBackground,
+  borderRadius: theme.__hd__.skeleton.radii[themeVariant],
+}));
+
+const StyledGradientContainer = styled(Box)<{ themeVariant: ThemeVariant }>(
+  ({ theme, themeVariant }) => ({
+    overflow: 'hidden',
+    borderRadius: theme.__hd__.skeleton.radii[themeVariant],
+  })
+);
+
+export { StyledContainer, StyledGradientContainer };

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

@@ -0,0 +1,498 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skeleton renders correctly by default 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#f6f6f7",
+          "borderRadius": 16,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="light"
+  themeVariant="rounded"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 16,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="rounded"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294375159,
+          4294046451,
+          4294375159,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is dark and variant is circular 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 999,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="dark"
+  themeVariant="circular"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 999,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="circular"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294967295,
+          4294046451,
+          4294967295,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is dark and variant is rectangular 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 0,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="dark"
+  themeVariant="rectangular"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 0,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="rectangular"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294967295,
+          4294046451,
+          4294967295,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is dark and variant is rounded 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 16,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="dark"
+  themeVariant="rounded"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 16,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="rounded"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294967295,
+          4294046451,
+          4294967295,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is light and variant is circular 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#f6f6f7",
+          "borderRadius": 999,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="light"
+  themeVariant="circular"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 999,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="circular"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294375159,
+          4294046451,
+          4294375159,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is light and variant is rectangular 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#f6f6f7",
+          "borderRadius": 0,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="light"
+  themeVariant="rectangular"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 0,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="rectangular"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294375159,
+          4294046451,
+          4294375159,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is light and variant is rounded 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#f6f6f7",
+          "borderRadius": 16,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="light"
+  themeVariant="rounded"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 16,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="rounded"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294375159,
+          4294046451,
+          4294375159,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;

package/src/components/Skeleton/__tests__/index.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Skeleton from '..';
+
+describe('Skeleton', () => {
+  it('renders correctly by default', () => {
+    const { toJSON } = renderWithTheme(<Skeleton />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    variant          | intent
+    ${'circular'}    | ${'light'}
+    ${'circular'}    | ${'dark'}
+    ${'rectangular'} | ${'light'}
+    ${'rectangular'} | ${'dark'}
+    ${'rounded'}     | ${'light'}
+    ${'rounded'}     | ${'dark'}
+  `(
+    'renders correctly when intent is $intent and variant is $variant',
+    ({ variant, intent }) => {
+      const { toJSON } = renderWithTheme(
+        <Skeleton intent={intent} variant={variant} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});