@hero-design/rn 8.21.0 → 8.22.0-alpha.0

package/lib/index.js

@@ -944,13 +944,18 @@ var BASE_COLORS = {
   aliceBlue: '#ecf0ff',
   antiFlashWhite: '#f1f2f3',
   apple: '#e3602a',
+  bigStone: '#344348',
   blue1: '#5a68e2',
   blue: '#1dbeee',
+  blueOblivion: '#23438f',
+  blazingBonfire: '#ffa234',
   cornflowerBlue: '#5d80f0',
   currant: '#48000a',
   darkBlue: '#25006e',
   deepSaffron: '#ffa234',
+  deepIntoTheJungle: '#004e48',
   emerald: '#5ace7d',
+  flagstone: '#acacaf',
   frenchSky: '#8999ff',
   gold: '#ffd500',
   green: '#01b39c',
@@ -958,13 +963,17 @@ var BASE_COLORS = {
   grotesqueGreen: '#6af293',
   hitPink: '#ffad79',
   honeydew: '#f0fef4',
+  indianDance: '#f89076',
   jordyBlue: '#92abfc',
   linen: '#fcebe7',
   maasstrichtBlue: '#001f23',
   mauve: '#c38cee',
+  moussaka: '#6f2a17',
   mellowApricot: '#ffbe71',
+  mintLeaf: '#01cbb0',
   nightBlue: '#353957',
   pastelRed: '#f46363',
+  pastelBlue: '#a1b5fc',
   paua: '#130066',
   peach: '#f8ac7d',
   pineGreen: '#017d6d',
@@ -982,6 +991,8 @@ var BASE_COLORS = {
   violet1: '#8505a2',
   violet: '#7622d7',
   vodka: '#b5c3fd',
+  theatreGold: '#a56822',
+  uniformGreen: '#4d4628',
   yellow: '#fadb14'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
@@ -1152,13 +1163,19 @@ var palette$8 = {
 var aliceBlue = colorScales.aliceBlue,
   antiFlashWhite = colorScales.antiFlashWhite,
   apple$2 = colorScales.apple,
+  blazingBonfire = colorScales.blazingBonfire,
+  bigStone = colorScales.bigStone,
+  flagstone = colorScales.flagstone,
   deepSaffron$1 = colorScales.deepSaffron,
+  deepIntoTheJungle = colorScales.deepIntoTheJungle,
   emerald$1 = colorScales.emerald,
   grey$3 = colorScales.grey,
   honeydew$2 = colorScales.honeydew,
+  indianDance = colorScales.indianDance,
   linen$2 = colorScales.linen,
   maasstrichtBlue$2 = colorScales.maasstrichtBlue,
   mellowApricot = colorScales.mellowApricot,
+  moussaka = colorScales.moussaka,
   pastelRed$1 = colorScales.pastelRed,
   pineGreen$1 = colorScales.pineGreen,
   seashell$2 = colorScales.seashell,
@@ -1166,7 +1183,12 @@ var aliceBlue = colorScales.aliceBlue,
   sonicSilver$1 = colorScales.sonicSilver,
   ultramarineBlue$1 = colorScales.ultramarineBlue,
   vermilion$1 = colorScales.vermilion,
-  vodka = colorScales.vodka;
+  vodka = colorScales.vodka,
+  theatreGold = colorScales.theatreGold,
+  uniformGreen = colorScales.uniformGreen,
+  mintLeaf = colorScales.mintLeaf,
+  blueOblivion = colorScales.blueOblivion,
+  pastelBlue = colorScales.pastelBlue;
 var palette$7 = {
   black: '#000000',
   white: '#ffffff',
@@ -1191,17 +1213,29 @@ var palette$7 = {
   pastelRedLight20: pastelRed$1.lighten20,
   mellowApricot: mellowApricot.base,
   mellowApricotLight20: mellowApricot.lighten20,
+  moussaka: moussaka.base,
   emerald: emerald$1.base,
   emeraldLight20: emerald$1.lighten20,
   emeraldDark20: emerald$1.darken20,
   vodka: vodka.base,
   vodkaLight20: vodka.lighten20,
   vermilion: vermilion$1.base,
+  vermilionLight20: vermilion$1.lighten20,
+  vermilionDark10: vermilion$1.darken10,
   deepSaffron: deepSaffron$1.base,
   deepSaffronDark20: deepSaffron$1.darken20,
+  indianDance: indianDance.base,
+  theatreGold: theatreGold.base,
+  theatreGoldLight20: theatreGold.lighten20,
   pineGreen: pineGreen$1.base,
+  pineGreenLight20: pineGreen$1.lighten20,
+  pineGreenDark10: pineGreen$1.darken10,
   ultramarineBlue: ultramarineBlue$1.base,
+  ultramarineBlueLight20: ultramarineBlue$1.lighten20,
+  ultramarineBlueDark10: ultramarineBlue$1.darken10,
   sonicSilver: sonicSilver$1.base,
+  sonicSilverLight50: sonicSilver$1.lighten45,
+  sonicSilverDark10: sonicSilver$1.darken10,
   linen: linen$2.base,
   seashell: seashell$2.base,
   honeydew: honeydew$2.base,
@@ -1209,7 +1243,15 @@ var palette$7 = {
   antiFlashWhite: antiFlashWhite.base,
   apple: apple$2.base,
   silverChalice: silverChalice.base,
-  silverChaliceLight20: silverChalice.lighten20
+  silverChaliceLight20: silverChalice.lighten20,
+  uniformGreen: uniformGreen.base,
+  blazingBonfire: blazingBonfire.base,
+  deepIntoTheJungle: deepIntoTheJungle.base,
+  mintLeaf: mintLeaf.base,
+  blueOblivion: blueOblivion.base,
+  pastelBlue: pastelBlue.base,
+  bigStone: bigStone.base,
+  flagstone: flagstone.base
 };
 var currant$1 = colorScales.currant,
   sonicSilver = colorScales.sonicSilver,
@@ -11018,6 +11060,7 @@ var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
 });
 var StyledCarouselImage = index$a(Image)(function () {
   return {
+    flexGrow: 2,
     flex: 1,
     width: '100%',
     resizeMode: 'contain'
@@ -11038,8 +11081,7 @@ var StyledCustomSizeCarouselImage = index$a(Image)(function (_ref3) {
 var StyledCarouselContentWrapper = index$a(Box)(function (_ref4) {
   var width = _ref4.width;
   return {
-    width: width,
-    minHeight: scale(250)
+    width: width
   };
 });
 var StyledCarouselFooterWrapper = index$a(reactNative.View)(function (_ref5) {
@@ -11368,7 +11410,7 @@ var Carousel = function Carousel(_ref) {
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'bottom' : _ref$pageControlPosit,
     nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
-  useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition !== 'bottom');
+  useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var carouselRef = React.useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
     _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.21.0",
+  "version": "8.22.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Carousel/StyledCarousel.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/native';
 import Typography from '../Typography';
 import Image from '../Image';
 import Box from '../Box';
-import { scale } from '../../utils/scale';
 import PageControl from '../PageControl';
 
 const StyledBackDrop = styled(View)<{
@@ -31,6 +30,7 @@ const StyledCarouselHeading = styled(Typography.Text)(({ theme }) => ({
 }));
 
 const StyledCarouselImage = styled(Image)(() => ({
+  flexGrow: 2,
   flex: 1,
   width: '100%',
   resizeMode: 'contain',
@@ -51,7 +51,6 @@ const StyledCarouselContentWrapper = styled(Box)<{
   width: number;
 }>(({ width }) => ({
   width,
-  minHeight: scale(250),
 }));
 
 const StyledCarouselFooterWrapper = styled(View)(({ theme }) => ({

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

@@ -156,6 +156,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   Array [
                     Object {
                       "flex": 1,
+                      "flexGrow": 2,
                       "resizeMode": "contain",
                       "width": "100%",
                     },
@@ -175,7 +176,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -275,6 +275,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   Array [
                     Object {
                       "flex": 1,
+                      "flexGrow": 2,
                       "resizeMode": "contain",
                       "width": "100%",
                     },
@@ -294,7 +295,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -437,7 +437,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -561,7 +560,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -992,6 +990,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   Array [
                     Object {
                       "flex": 1,
+                      "flexGrow": 2,
                       "resizeMode": "contain",
                       "width": "100%",
                     },
@@ -1011,7 +1010,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -1111,6 +1109,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   Array [
                     Object {
                       "flex": 1,
+                      "flexGrow": 2,
                       "resizeMode": "contain",
                       "width": "100%",
                     },
@@ -1130,7 +1129,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -1273,7 +1271,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -1397,7 +1394,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -1681,6 +1677,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   Array [
                     Object {
                       "flex": 1,
+                      "flexGrow": 2,
                       "resizeMode": "contain",
                       "width": "100%",
                     },
@@ -1700,7 +1697,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -1800,6 +1796,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   Array [
                     Object {
                       "flex": 1,
+                      "flexGrow": 2,
                       "resizeMode": "contain",
                       "width": "100%",
                     },
@@ -1819,7 +1816,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -1962,7 +1958,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -2086,7 +2081,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,

package/src/components/Carousel/index.tsx

@@ -94,7 +94,7 @@ const Carousel = ({
   );
   useDeprecation(
     `The use of 'pageControlPosition == bottom' has been deprecated`,
-    pageControlPosition !== 'bottom'
+    pageControlPosition === 'bottom'
   );
   const carouselRef = useRef<FlatList>(null);