@hero-design/rn 8.11.2 → 8.11.4-rc.1

package/src/theme/global/colors/__tests__/__snapshots__/wallet.spec.ts.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`wallet returns correct theme object 1`] = `
+Object {
+  "archived": "#abacaf",
+  "archivedSurface": "#f1f2f3",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#8999ff",
+  "decorativePrimarySurface": "#e7ebff",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#dce0ff",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#eff0fc",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#737479",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#001f23",
+  "onErrorSurface": "#de350b",
+  "onInfoSurface": "#4568fb",
+  "onPrimary": "#ffffff",
+  "onSecondary": "#ffffff",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ffa234",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#6b77e5",
+  "primary": "#5a68e2",
+  "primaryOutline": "#001f23",
+  "secondary": "#3f499e",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

package/src/theme/global/colors/__tests__/__snapshots__/work.spec.ts.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`work returns correct theme object 1`] = `
+Object {
+  "archived": "#abacaf",
+  "archivedSurface": "#f1f2f3",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#ffd500",
+  "decorativePrimarySurface": "#fff7cc",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#ffffff",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#eaecf0",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#737479",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#001f23",
+  "onErrorSurface": "#de350b",
+  "onInfoSurface": "#4568fb",
+  "onPrimary": "#ffffff",
+  "onSecondary": "#ffffff",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ffa234",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#586a8a",
+  "primary": "#2e456d",
+  "primaryOutline": "#001f23",
+  "secondary": "#627492",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

package/src/theme/global/colors/__tests__/eBens.spec.ts

@@ -0,0 +1,7 @@
+import eBens from '../eBens';
+
+describe('eBens', () => {
+  it('returns correct theme object', () => {
+    expect(eBens).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/__tests__/global.spec.ts

@@ -0,0 +1,7 @@
+import global from '../global';
+
+describe('global', () => {
+  it('returns correct theme object', () => {
+    expect(global).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/__tests__/globalDark.spec.ts

@@ -0,0 +1,7 @@
+import globalDark from '../globalDark';
+
+describe('globalDark', () => {
+  it('returns correct theme object', () => {
+    expect(globalDark).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/__tests__/jobs.spec.ts

@@ -0,0 +1,7 @@
+import jobs from '../jobs';
+
+describe('jobs', () => {
+  it('returns correct theme object', () => {
+    expect(jobs).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/__tests__/swag.spec.ts

@@ -0,0 +1,7 @@
+import swag from '../swag';
+
+describe('swag', () => {
+  it('returns correct theme object', () => {
+    expect(swag).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/__tests__/swagDark.spec.ts

@@ -0,0 +1,7 @@
+import swagDark from '../swagDark';
+
+describe('swagDark', () => {
+  it('returns correct theme object', () => {
+    expect(swagDark).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/__tests__/wallet.spec.ts

@@ -0,0 +1,7 @@
+import wallet from '../wallet';
+
+describe('wallet', () => {
+  it('returns correct theme object', () => {
+    expect(wallet).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/__tests__/work.spec.ts

@@ -0,0 +1,7 @@
+import work from '../work';
+
+describe('work', () => {
+  it('returns correct theme object', () => {
+    expect(work).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/globalDark.ts

@@ -0,0 +1,51 @@
+import { defaultDarkMobilePalette as palette } from '@hero-design/colors';
+import type { GlobalSystemPalette } from './types';
+
+const globalPalette: GlobalSystemPalette = {
+  // Updated 21 / Nov / 22
+  // Surfaces
+  defaultGlobalSurface: palette.maasstrichtBlue,
+  onDefaultGlobalSurface: palette.white,
+  neutralGlobalSurface: palette.maasstrichtBlueLight15,
+  mutedOnDefaultGlobalSurface: palette.maasstrichtBlueLight70,
+  inactiveOnDefaultGlobalSurface: palette.maasstrichtBlueLight60,
+  disabledOnDefaultGlobalSurface: palette.greyDark20,
+  darkGlobalSurface: palette.white,
+  onDarkGlobalSurface: palette.maasstrichtBlue,
+  overlayGlobalSurface: palette.greyDark30,
+
+  // Outlines
+  primaryOutline: palette.white,
+  secondaryOutline: palette.maasstrichtBlueLight10,
+  inactiveOutline: palette.maasstrichtBlueLight60,
+  disabledOutline: palette.greyDark20,
+
+  // Accents
+  error: palette.pastelRed,
+  mutedError: palette.pastelRedLight20,
+  errorSurface: palette.linen,
+  onErrorSurface: palette.vermilion,
+
+  warning: palette.mellowApricot,
+  mutedWarning: palette.mellowApricotLight20,
+  warningSurface: palette.seashell,
+  onWarningSurface: palette.deepSaffron,
+
+  success: palette.emerald,
+  mutedSuccess: palette.emeraldLight20,
+  successSurface: palette.honeydew,
+  onSuccessSurface: palette.pineGreen,
+
+  info: palette.vodka,
+  mutedInfo: palette.vodkaLight20,
+  infoSurface: palette.aliceBlue,
+  onInfoSurface: palette.ultramarineBlue,
+
+  archived: palette.silverChalice,
+  mutedArchived: palette.silverChaliceLight20,
+  archivedSurface: palette.antiFlashWhite,
+  onArchivedSurface: palette.sonicSilver,
+  // End of Updated 21 / Nov / 22
+};
+
+export default globalPalette;

package/src/theme/global/colors/swagDark.ts

@@ -0,0 +1,25 @@
+import { swagDarkPalette as palette } from '@hero-design/colors';
+import type { SystemPalette, BrandSystemPalette } from './types';
+import globalDarkPalette from './globalDark';
+
+const swagDarkBrandSystemPallete: BrandSystemPalette = {
+  primary: palette.mauve,
+  onPrimary: palette.maasstrichtBlue,
+  secondary: palette.mauveLight30,
+  onSecondary: palette.maasstrichtBlue,
+  defaultSurface: palette.maasstrichtBlue,
+  highlightedSurface: palette.scarletGumDark65,
+  pressedSurface: palette.scarletGumLight20,
+
+  decorativePrimary: palette.maasstrichtBlue,
+  decorativePrimarySurface: palette.maasstrichtBlueLight10,
+};
+
+const swagDarkSystemPalette: SystemPalette = {
+  // Global
+  ...globalDarkPalette,
+  // Brand
+  ...swagDarkBrandSystemPallete,
+};
+
+export default swagDarkSystemPalette;

package/src/theme/global/index.ts

@@ -1,5 +1,6 @@
 import { scale as defaultScale } from './scale';
 import swagSystemPalette from './colors/swag';
+import swagDarkSystemPalette from './colors/swagDark';
 import workSystemPalette from './colors/work';
 import jobsSystemPalette from './colors/jobs';
 import walletSystemPalette from './colors/wallet';
@@ -43,6 +44,7 @@ export {
   getGlobalTheme,
   defaultScale,
   swagSystemPalette,
+  swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
   walletSystemPalette,

package/src/theme/index.ts

@@ -3,6 +3,7 @@ import ThemeProvider, { useTheme } from './ThemeProvider';
 import ThemeSwitcher from './ThemeSwitcher';
 import {
   swagSystemPalette,
+  swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
   walletSystemPalette,
@@ -21,6 +22,7 @@ export {
   ThemeSwitcher,
   useTheme,
   swagSystemPalette,
+  swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
   walletSystemPalette,

package/types/components/Carousel/CardCarousel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 export declare type CardCarouselHandles = {
     snapToIndex: (index: number) => void;
 };
@@ -17,9 +17,9 @@ export interface CardCarouselProps {
      */
     onItemIndexChange?: (index: number) => void;
     /**
-     * Carousel data.
+     * Carousel items.
      */
-    items: any[];
+    items: React.ReactNode[];
     /**
      * Indicates hide or show page control.
      */
@@ -36,5 +36,6 @@ export interface CardCarouselProps {
      * Component ref.
      */
     ref?: React.Ref<CardCarouselHandles>;
+    onLayout?: (event: LayoutChangeEvent) => void;
 }
-export declare const CardCarousel: React.ForwardRefExoticComponent<Pick<CardCarouselProps, "style" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<CardCarouselHandles>>;
+export declare const CardCarousel: React.ForwardRefExoticComponent<Pick<CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<CardCarouselHandles>>;

package/types/components/Carousel/index.d.ts

@@ -33,6 +33,6 @@ interface CarouselProps extends ViewProps {
 }
 export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
 declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, ...nativeProps }: CarouselProps) => JSX.Element) & {
-    Card: React.ForwardRefExoticComponent<Pick<import("./CardCarousel").CardCarouselProps, "style" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
+    Card: React.ForwardRefExoticComponent<Pick<import("./CardCarousel").CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
 };
 export default _default;