@fluentui-react-native/experimental-shadow 0.2.0 → 0.2.3

package/lib-commonjs/__tests__/Shadow.test.js

@@ -25,19 +25,100 @@ var Shadow_1 = require("../Shadow");
 var renderer = __importStar(require("react-test-renderer"));
 var test_tools_1 = require("@fluentui-react-native/test-tools");
 describe('Shadow component tests', function () {
-    it('Shadow default', function () {
+    it('Shadow (depth=2)', function () {
         var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, null,
-            React.createElement(react_native_1.Text, null, "Shadow default test")))
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow2" },
+            React.createElement(react_native_1.Text, null, "Shadow (depth=2) ")))
             .toJSON();
         expect(tree).toMatchSnapshot();
     });
+    it('Shadow (depth=4)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow4" },
+            React.createElement(react_native_1.Text, null, "Shadow (depth=4)")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Shadow (depth=8)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow8" },
+            React.createElement(react_native_1.Text, null, "Shadow (depth=8) ")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Shadow (depth=16)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow16" },
+            React.createElement(react_native_1.Text, null, "Shadow (depth=16)")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Shadow (depth=28)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow28" },
+            React.createElement(react_native_1.Text, null, "Shadow (depth=28) ")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Shadow (depth=64)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow64" },
+            React.createElement(react_native_1.Text, null, "Shadow (depth=64)")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=2)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow2brand" },
+            React.createElement(react_native_1.Text, null, "Brand shadow (depth=2)")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=4)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow4brand" },
+            React.createElement(react_native_1.Text, null, "Brand shadow (depth=4)")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=8)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow8brand" },
+            React.createElement(react_native_1.Text, null, "Brand shadow (depth=8)")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=16)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow16brand" },
+            React.createElement(react_native_1.Text, null, "Brand shadow (depth=16)")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=28)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow28brand" },
+            React.createElement(react_native_1.Text, null, "Brand shadow (depth=28)")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=64)', function () {
+        var tree = renderer
+            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow64brand" },
+            React.createElement(react_native_1.Text, null, "Brand shadow (depth=64)")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Shadow simple rendering does not invalidate styling', function () {
+        (0, test_tools_1.checkRenderConsistency)(function () { return (React.createElement(Shadow_1.Shadow, { depth: "shadow2" },
+            React.createElement(react_native_1.Text, null, "Shadow render test"))); }, 2);
+    });
     it('Shadow simple rendering does not invalidate styling', function () {
-        (0, test_tools_1.checkRenderConsistency)(function () { return (React.createElement(Shadow_1.Shadow, null,
+        (0, test_tools_1.checkRenderConsistency)(function () { return (React.createElement(Shadow_1.Shadow, { depth: "shadow2" },
             React.createElement(react_native_1.Text, null, "Shadow render test"))); }, 2);
     });
     it('Shadow re-renders correctly', function () {
-        (0, test_tools_1.checkReRender)(function () { return (React.createElement(Shadow_1.Shadow, null,
+        (0, test_tools_1.checkReRender)(function () { return (React.createElement(Shadow_1.Shadow, { depth: "shadow2" },
             React.createElement(react_native_1.Text, null, "Shadow render twice test"))); }, 2);
     });
 });

package/lib-commonjs/__tests__/Shadow.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,6CAAoC;AACpC,oCAAmC;AACnC,4DAAgD;AAChD,gEAA0F;AAE1F,QAAQ,CAAC,wBAAwB,EAAE;IACjC,EAAE,CAAC,gBAAgB,EAAE;QACnB,IAAM,IAAI,GAAG,QAAQ;aAClB,MAAM,CACL,oBAAC,eAAM;YACL,oBAAC,mBAAI,8BAA2B,CACzB,CACV;aACA,MAAM,EAAE,CAAC;QACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE;QACxD,IAAA,mCAAsB,EACpB,cAAM,OAAA,CACJ,oBAAC,eAAM;YACL,oBAAC,mBAAI,6BAA0B,CACxB,CACV,EAJK,CAIL,EACD,CAAC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE;QAChC,IAAA,0BAAa,EACX,cAAM,OAAA,CACJ,oBAAC,eAAM;YACL,oBAAC,mBAAI,mCAAgC,CAC9B,CACV,EAJK,CAIL,EACD,CAAC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/index.d.ts

@@ -1,3 +1,4 @@
 export { Shadow } from './Shadow';
 export { ShadowDepth, ShadowProps } from './Shadow.types';
+export { getShadowTokenStyleSet } from './shadowStyle';
 //# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC"}

package/lib-commonjs/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Shadow = void 0;
+exports.getShadowTokenStyleSet = exports.Shadow = void 0;
 var Shadow_1 = require("./Shadow");
 Object.defineProperty(exports, "Shadow", { enumerable: true, get: function () { return Shadow_1.Shadow; } });
+var shadowStyle_1 = require("./shadowStyle");
+Object.defineProperty(exports, "getShadowTokenStyleSet", { enumerable: true, get: function () { return shadowStyle_1.getShadowTokenStyleSet; } });
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AAEf,6CAAuD;AAA9C,qHAAA,sBAAsB,OAAA"}

package/lib-commonjs/shadowStyle.d.ts

@@ -0,0 +1,25 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { ShadowDepth } from './Shadow.types';
+export declare const getShadowTokenStyleSet: typeof getShadowTokenStyleSetWorker;
+declare function getShadowTokenStyleSetWorker(t: Theme, depth: ShadowDepth): {
+    key: {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+    };
+    ambient: {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+    };
+};
+export {};
+//# sourceMappingURL=shadowStyle.d.ts.map

package/lib-commonjs/shadowStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAW,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EA+BjE"}

package/lib-commonjs/shadowStyle.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getShadowTokenStyleSet = void 0;
+var framework_1 = require("@fluentui-react-native/framework");
+exports.getShadowTokenStyleSet = (0, framework_1.memoize)(getShadowTokenStyleSetWorker);
+function getShadowTokenStyleSetWorker(t, depth) {
+    if (!depth) {
+        return {
+            key: emptyShadowStyle,
+            ambient: emptyShadowStyle,
+        };
+    }
+    var keyShadow = t.shadows[depth.toString()].key;
+    var ambientShadow = t.shadows[depth.toString()].ambient;
+    return {
+        key: {
+            shadowColor: shadowColorFromRGBAColor(keyShadow.color),
+            shadowOpacity: shadowOpacityFromRGBAColor(keyShadow.color),
+            shadowRadius: keyShadow.blur,
+            shadowOffset: {
+                width: keyShadow.x,
+                height: keyShadow.y,
+            },
+        },
+        ambient: {
+            shadowColor: shadowColorFromRGBAColor(ambientShadow.color),
+            shadowOpacity: shadowOpacityFromRGBAColor(ambientShadow.color),
+            shadowRadius: ambientShadow.blur,
+            shadowOffset: {
+                width: ambientShadow.x,
+                height: ambientShadow.y,
+            },
+        },
+    };
+}
+var shadowColorFromRGBAColor = function (rgbaColor) {
+    return rgbaColor.toString().substring(0, 7);
+};
+var shadowOpacityFromRGBAColor = function (rgbaColor) {
+    var opacityAsHex = '0x' + rgbaColor.toString().substring(7);
+    var opacityAsDecimal = Number(opacityAsHex) / 255.0;
+    // Round to two decimal places
+    return Math.round(opacityAsDecimal * 100) / 100;
+};
+var emptyShadowStyle = {
+    shadowColor: '000000',
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    shadowOffset: {
+        width: 0,
+        height: 0,
+    },
+};
+//# sourceMappingURL=shadowStyle.js.map

package/lib-commonjs/shadowStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAAkE;AAIrD,QAAA,sBAAsB,GAAG,IAAA,mBAAO,EAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,CAAQ,EAAE,KAAkB;IAChE,IAAI,CAAC,KAAK,EAAE;QACV,OAAO;YACL,GAAG,EAAE,gBAAgB;YACrB,OAAO,EAAE,gBAAgB;SAC1B,CAAC;KACH;IAED,IAAM,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC;IAClD,IAAM,aAAa,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC;IAE1D,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI;YAC5B,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI;YAChC,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC;AAEF,IAAM,gBAAgB,GAAG;IACvB,WAAW,EAAE,QAAQ;IACrB,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE;QACZ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-shadow",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "A cross-platform Shadow component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,6 +21,9 @@
     "url": "https://github.com/microsoft/fluentui-react-native.git",
     "directory": "packages/experimental/Shadow"
   },
+  "dependencies": {
+    "@fluentui-react-native/framework": "0.7.32"
+  },
   "devDependencies": {
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
     "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",

package/src/Shadow.tsx

@@ -1,31 +1,24 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import { ShadowProps } from './Shadow.types';
+import { ShadowProps, shadowName } from './Shadow.types';
+import { useFluentTheme, mergeProps, stagedComponent } from '@fluentui-react-native/framework';
+import { getShadowTokenStyleSet } from './shadowStyle';
 
-export const Shadow: React.FunctionComponent<ShadowProps> = (props: ShadowProps) => {
-  const noOffset = { width: 0, height: 0 };
-  const neutralShadowAmbient = { shadowOffset: noOffset, shadowOpacity: 0.12, shadowRadius: 2 };
-  const neutralShadowAmbientDarker = { shadowOffset: noOffset, shadowOpacity: 0.2, shadowRadius: 8 };
-  const ambientShadow = {
-    '2': neutralShadowAmbient,
-    '4': neutralShadowAmbient,
-    '8': neutralShadowAmbient,
-    '16': neutralShadowAmbient,
-    '28': neutralShadowAmbientDarker,
-    '64': neutralShadowAmbientDarker,
-  };
-  const keyShadow = {
-    '2': { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.14, shadowRadius: 2 },
-    '4': { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.14, shadowRadius: 4 },
-    '8': { shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.14, shadowRadius: 8 },
-    '16': { shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.14, shadowRadius: 16 },
-    '28': { shadowOffset: { width: 0, height: 14 }, shadowOpacity: 0.24, shadowRadius: 28 },
-    '64': { shadowOffset: { width: 0, height: 32 }, shadowOpacity: 0.24, shadowRadius: 64 },
+export const Shadow = stagedComponent((props: ShadowProps) => {
+  const theme = useFluentTheme();
+
+  return (final: ShadowProps, children: React.ReactNode) => {
+    const shadowTokenStyleSet = getShadowTokenStyleSet(theme, props.depth);
+    const mergedProps = mergeProps(final, { style: shadowTokenStyleSet.key });
+
+    return (
+      <View style={shadowTokenStyleSet.ambient}>
+        <View {...mergedProps}>{children}</View>
+      </View>
+    );
   };
+});
+
+Shadow.displayName = shadowName;
 
-  return (
-    <View style={ambientShadow[props.depth]}>
-      <View style={keyShadow[props.depth]}>{props.children}</View>
-    </View>
-  );
-};
+export default Shadow;

package/src/Shadow.types.ts

@@ -1,6 +1,20 @@
 import { ViewProps } from 'react-native';
 
-export type ShadowDepth = '2' | '4' | '8' | '16' | '28' | '64';
+export const shadowName = 'Shadow';
+
+export type ShadowDepth =
+  | 'shadow2'
+  | 'shadow4'
+  | 'shadow8'
+  | 'shadow16'
+  | 'shadow28'
+  | 'shadow64'
+  | 'shadow2brand'
+  | 'shadow4brand'
+  | 'shadow8brand'
+  | 'shadow16brand'
+  | 'shadow28brand'
+  | 'shadow64brand';
 
 export interface ShadowProps extends ViewProps {
   depth?: ShadowDepth;

package/src/__tests__/Shadow.test.tsx

@@ -5,21 +5,153 @@ import * as renderer from 'react-test-renderer';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 
 describe('Shadow component tests', () => {
-  it('Shadow default', () => {
+  it('Shadow (depth=2)', () => {
     const tree = renderer
       .create(
-        <Shadow>
-          <Text>Shadow default test</Text>
+        <Shadow depth="shadow2">
+          <Text>Shadow (depth=2) </Text>
         </Shadow>,
       )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
 
+  it('Shadow (depth=4)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow4">
+          <Text>Shadow (depth=4)</Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Shadow (depth=8)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow8">
+          <Text>Shadow (depth=8) </Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Shadow (depth=16)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow16">
+          <Text>Shadow (depth=16)</Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Shadow (depth=28)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow28">
+          <Text>Shadow (depth=28) </Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Shadow (depth=64)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow64">
+          <Text>Shadow (depth=64)</Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Brand shadow (depth=2)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow2brand">
+          <Text>Brand shadow (depth=2)</Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Brand shadow (depth=4)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow4brand">
+          <Text>Brand shadow (depth=4)</Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Brand shadow (depth=8)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow8brand">
+          <Text>Brand shadow (depth=8)</Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Brand shadow (depth=16)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow16brand">
+          <Text>Brand shadow (depth=16)</Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Brand shadow (depth=28)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow28brand">
+          <Text>Brand shadow (depth=28)</Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Brand shadow (depth=64)', () => {
+    const tree = renderer
+      .create(
+        <Shadow depth="shadow64brand">
+          <Text>Brand shadow (depth=64)</Text>
+        </Shadow>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Shadow simple rendering does not invalidate styling', () => {
+    checkRenderConsistency(
+      () => (
+        <Shadow depth="shadow2">
+          <Text>Shadow render test</Text>
+        </Shadow>
+      ),
+      2,
+    );
+  });
+
   it('Shadow simple rendering does not invalidate styling', () => {
     checkRenderConsistency(
       () => (
-        <Shadow>
+        <Shadow depth="shadow2">
           <Text>Shadow render test</Text>
         </Shadow>
       ),
@@ -30,7 +162,7 @@ describe('Shadow component tests', () => {
   it('Shadow re-renders correctly', () => {
     checkReRender(
       () => (
-        <Shadow>
+        <Shadow depth="shadow2">
           <Text>Shadow render twice test</Text>
         </Shadow>
       ),