feat: add new elevation tokens (#1178)

razorpay · May 24, 2023 · 16d0e9e · 16d0e9e
1 parent d61e202
commit 16d0e9e
Show file tree

Hide file tree

Showing 117 changed files with 3,193 additions and 822 deletions.
diff --git a/.changeset/rich-ways-hug.md b/.changeset/rich-ways-hug.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": minor
+---
+
+feat: add new `elevation` tokens
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,5 +1,5 @@
 {
-  "node": "14",
+  "node": "18",
   "packages": ["packages/blade"],
   "//": "we don't want to build since post install and prepublish our build automatically runs",
   "buildCommand": false,

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,6 +2,10 @@
  * @type {import("eslint").Linter.Config}
  */
 module.exports = {
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    requireConfigFile: false,
+  },
   extends: [
     'kentcdodds',
     'kentcdodds/react',
@@ -14,7 +18,6 @@ module.exports = {
     'max-lines-per-function': 'off',
     'max-lines': 'off',
     'no-console': 'off',
-    'import/no-cycle': 'error',
     'react-native-a11y/has-accessibility-hint': 'off',
     // need to turn this off because this rule is also being triggered on the web files as well
     'react-native-a11y/has-valid-accessibility-descriptors': 'off',
@@ -45,6 +48,9 @@ module.exports = {
           "Please define componentId using `assignWithoutSideEffects` instead. This will make sure the code doesn't create side-effects and tree-shaking continues to work",
       },
     ],
+    'react/display-name': 'off',
+    'import/no-named-as-default': 'off',
+    'import/no-cycle': ['error', { maxDepth: '∞' }],
   },
   env: {
     browser: true,
@@ -125,6 +131,7 @@ module.exports = {
       ],
       plugins: ['@typescript-eslint', 'jsx-a11y', 'no-only-tests'],
       rules: {
+        'import/no-cycle': ['error', { maxDepth: '∞' }],
         'react/jsx-uses-react': 'off',
         'react/react-in-jsx-scope': 'off',
         'no-use-before-define': 'off',
@@ -173,6 +180,7 @@ module.exports = {
             patterns: ['!lodash/*'],
           },
         ],
+        'react/display-name': 'off',
       },
     },
     {

diff --git a/.github/workflows/blade-chromatic.yml b/.github/workflows/blade-chromatic.yml
@@ -17,7 +17,7 @@ jobs:
       - name: Use Node v14
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 18.12.1
       - name: Setup Cache & Install Dependencies
         uses: bahmutov/npm-install@v1
         with:

diff --git a/.github/workflows/blade-tokens-upload.yml b/.github/workflows/blade-tokens-upload.yml
@@ -22,7 +22,7 @@ jobs:
       - name: Use Node v14
         uses: actions/setup-node@v2
         with:
-          node-version: 14.19.0
+          node-version: 18.12.1
       - name: Setup Cache & Install Dependencies
         uses: bahmutov/npm-install@v1
         with:

diff --git a/.github/workflows/blade-validate.yml b/.github/workflows/blade-validate.yml
@@ -15,7 +15,7 @@ jobs:
       - name: Use Node v14
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 18.12.1
       - name: Setup Cache & Install Dependencies
         uses: bahmutov/npm-install@v1
         with:

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -20,7 +20,7 @@ jobs:
       - name: Use Node v14
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18.12.1
       - name: Setup Cache & Install Dependencies
         uses: bahmutov/npm-install@v1
         with:

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.1",
   "license": "MIT",
   "engines": {
-    "node": ">=14.18.0"
+    "node": ">=18.12.1"
   },
   "workspaces": {
     "packages": [
@@ -26,27 +26,29 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@babel/core": "7.21.8",
+    "@babel/eslint-parser": "7.21.8",
     "@changesets/cli": "2.24.1",
     "@types/jest": "26.0.23",
     "@types/react": "17.0.4",
     "@types/react-native": "0.64.4",
     "@types/styled-components": "5.1.25",
     "@types/styled-components-react-native": "5.1.3",
-    "@typescript-eslint/eslint-plugin": "4.22.0",
-    "@typescript-eslint/parser": "4.22.0",
+    "@typescript-eslint/eslint-plugin": "5.59.6",
+    "@typescript-eslint/parser": "5.59.6",
     "chalk": "4.1.1",
-    "eslint": "7.25.0",
+    "eslint": "8.40.0",
     "eslint-config-kentcdodds": "18.0.0",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-import-resolver-typescript": "3.1.3",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-import-resolver-typescript": "3.5.5",
     "eslint-plugin-babel": "5.3.1",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-mdx": "1.16.0",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-react": "7.23.2",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-react-native-a11y": "3.2.1",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-mdx": "2.1.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-native-a11y": "3.3.0",
     "eslint-plugin-no-only-tests": "3.1.0",
     "figures": "3.2.0",
     "husky": "4.2.3",

diff --git a/packages/blade/.storybook/react/preview.js b/packages/blade/.storybook/react/preview.js
@@ -27,10 +27,10 @@ export const parameters = {
         [
           'Colors',
           'Typography',
-          'Breakpoints',
+          'Elevation',
           'Border',
           'Spacing',
-          'Shadows',
+          'Breakpoints',
           'Motion',
           'CSS Variables',
         ],

diff --git a/packages/blade/docs/tokens/Border.stories.mdx b/packages/blade/docs/tokens/Border.stories.mdx
@@ -51,19 +51,19 @@ export const Border = () => {
                     style={{
                       width: '64px',
                       height: '64px',
-                      backgroundColor: '#e8e8eb',
+                      backgroundColor: 'hsla(220, 30%, 96%, 1)',
                       borderRadius: `${value}`,
-                      border: '1px solid #c2c2c2',
+                      border: '1px solid hsla(216, 15%, 54%, 0.18)',
                     }}
                   />
                 ) : (
                   <div
                     style={{
                       width: '96px',
                       height: '64px',
-                      backgroundColor: '#e8e8eb',
+                      backgroundColor: 'hsla(220, 30%, 96%, 1)',
                       borderRadius: `${value}px`,
-                      border: '1px solid #c2c2c2',
+                      border: '1px solid hsla(216, 15%, 54%, 0.18)',
                     }}
                   />
                 )}
@@ -84,9 +84,9 @@ export const Border = () => {
                   style={{
                     width: '64px',
                     height: '64px',
-                    backgroundColor: '#e8e8eb',
+                    backgroundColor: 'hsla(220, 30%, 96%, 1)',
                     borderRadius: `4px`,
-                    border: `${value}px solid #c2c2c2`,
+                    border: `${value}px solid hsla(216, 15%, 54%, 0.18)`,
                   }}
                 />
               </td>

diff --git a/packages/blade/docs/tokens/Elevation.stories.mdx b/packages/blade/docs/tokens/Elevation.stories.mdx
@@ -0,0 +1,71 @@
+import { Meta, DocsContainer } from '@storybook/addon-docs';
+import { useTheme, BladeProvider } from '../../src/components';
+import { paymentTheme, bankingTheme } from '../../src/tokens';
+
+<Meta
+  title="Tokens/Elevation"
+  parameters={{
+    docs: {
+      container: ({ children, context }) => {
+        const getThemeTokens = () => {
+          if (context.globals.themeTokenName === 'paymentTheme') {
+            return paymentTheme;
+          }
+          if (context.globals.themeTokenName === 'bankingTheme') {
+            return bankingTheme;
+          }
+          return null;
+        };
+        return (
+          <DocsContainer context={context}>
+            <BladeProvider
+              key={`${context.globals.themeTokenName}-${context.globals.colorScheme}`}
+              themeTokens={getThemeTokens()}
+              colorScheme={context.globals.colorScheme}
+            >
+              {children}
+            </BladeProvider>
+          </DocsContainer>
+        );
+      },
+    },
+  }}
+/>
+
+# 🪞 Elevation
+
+export const Border = () => {
+  const { theme } = useTheme();
+  console.log(theme.colors.surface.text);
+  return (
+    <table>
+      <tbody>
+        {Object.entries(theme.elevation).map(([key, value]) => (
+          <tr
+            key={key}
+            style={{
+              backgroundColor: theme.colors.surface.background.level1.lowContrast,
+            }}
+          >
+            <td
+              style={{ color: theme.colors.surface.text.normal.lowContrast }}
+            >{`theme.elevation.${key}`}</td>
+            <td style={{ padding: '20px' }}>
+              <div
+                style={{
+                  width: '100px',
+                  height: '100px',
+                  backgroundColor: '#fff',
+                  borderRadius: '8px',
+                  boxShadow: `${value}`,
+                }}
+              />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+<Border />
diff --git a/packages/blade/jest-preprocess.js b/packages/blade/jest-preprocess.js
@@ -1,3 +1,3 @@
-const babelOptions = require('./.babelrc.js');
+const babelOptions = require('./.babelrc');
 
 module.exports = require('babel-jest').createTransformer(babelOptions);
diff --git a/packages/blade/package.json b/packages/blade/package.json
@@ -4,7 +4,7 @@
   "version": "8.1.0",
   "license": "MIT",
   "engines": {
-    "node": ">=14.18.0"
+    "node": ">=18.12.1"
   },
   "bin": {
     "migrate-typography": "./codemods/migrate-typography/cli.js"
@@ -89,8 +89,8 @@
     "react-native:storybook:ios": "yarn react-native:get-stories && FRAMEWORK=REACT_NATIVE react-native run-ios",
     "react-native:storybook:start": "yarn react-native:get-stories && FRAMEWORK=REACT_NATIVE react-native start --reset-cache",
     "react": "yarn run react:storybook",
-    "react:storybook": "FRAMEWORK=REACT start-storybook -c ./.storybook/react -p 9009",
-    "react:storybook:build": "FRAMEWORK=REACT build-storybook -c ./.storybook/react -o storybook-site",
+    "react:storybook": "NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT start-storybook -c ./.storybook/react -p 9009",
+    "react:storybook:build": "NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT build-storybook -c ./.storybook/react -o storybook-site",
     "test:react": "FRAMEWORK=REACT jest -c ./jest.web.config.js",
     "test:react-native": "FRAMEWORK=REACT_NATIVE jest -c ./jest.native.config.js",
     "start:ios": "run-p react-native:storybook:start react-native:storybook:ios",

diff --git a/packages/blade/src/_helpers/types.ts b/packages/blade/src/_helpers/types.ts
@@ -1,8 +1,7 @@
 import type React from 'react';
 import type { ViewStyle } from 'react-native';
 import type { CSSObject } from 'styled-components';
-import type { Spacing } from '~tokens/global';
-import type { EasingFunctionFactory } from '~tokens/global/motion';
+import type { Spacing, EasingFunctionFactory } from '~tokens/global';
 import type { Platform } from '~utils';
 
 /**

diff --git a/packages/blade/src/components/ActionList/ActionList.tsx b/packages/blade/src/components/ActionList/ActionList.tsx
@@ -7,9 +7,9 @@ import { ActionListBox } from './ActionListBox';
 import { componentIds } from './componentIds';
 import { useDropdown } from '~components/Dropdown/useDropdown';
 import { assignWithoutSideEffects, makeAccessible, metaAttribute, MetaConstants } from '~utils';
-import { useTheme } from '~components/BladeProvider';
 import { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';
 import type { TestID } from '~src/_helpers/types';
+import type { SurfaceLevels } from '~tokens/theme/theme';
 
 type ActionListContextProp = Pick<ActionListProps, 'surfaceLevel'>;
 const ActionListContext = React.createContext<ActionListContextProp>({ surfaceLevel: 2 });
@@ -29,7 +29,7 @@ type ActionListProps = {
   /**
    * Decides the backgroundColor of ActionList
    */
-  surfaceLevel?: 2 | 3;
+  surfaceLevel?: Exclude<SurfaceLevels, 1>;
 } & TestID;
 
 /**
@@ -86,7 +86,6 @@ const _ActionList = ({ children, surfaceLevel = 2, testID }: ActionListProps): J
     hasFooterAction,
   } = useDropdown();
 
-  const { theme } = useTheme();
   const { isInBottomSheet } = useBottomSheetContext();
 
   const {
@@ -131,7 +130,6 @@ const _ActionList = ({ children, surfaceLevel = 2, testID }: ActionListProps): J
         <StyledActionList
           isInBottomSheet={isInBottomSheet}
           surfaceLevel={surfaceLevel}
-          elevation={isInBottomSheet ? undefined : theme.shadows.androidElevation.level[2]}
           id={`${dropdownBaseId}-actionlist`}
           {...makeAccessible({
             role: actionListContainerRole,

diff --git a/packages/blade/src/components/ActionList/ActionListItem.tsx b/packages/blade/src/components/ActionList/ActionListItem.tsx
@@ -19,7 +19,7 @@ import type { Feedback } from '~tokens/theme/theme';
 import { Text } from '~components/Typography';
 import { isReactNative, makeAccessible, makeSize, metaAttribute, MetaConstants } from '~utils';
 import { Checkbox } from '~components/Checkbox';
-import size from '~tokens/global/size';
+import { size } from '~tokens/global';
 import type { DropdownProps } from '~components/Dropdown';
 import type { StringChildrenType, TestID } from '~src/_helpers/types';
 import { assignWithoutSideEffects } from '~src/utils/assignWithoutSideEffects';

diff --git a/packages/blade/src/components/ActionList/ActionListItemAsset.native.tsx b/packages/blade/src/components/ActionList/ActionListItemAsset.native.tsx
@@ -1,7 +1,7 @@
 import { Image } from 'react-native';
 import type { ImageSourcePropType } from 'react-native';
 import { componentIds } from './componentIds';
-import size from '~tokens/global/size';
+import { size } from '~tokens/global';
 import { assignWithoutSideEffects } from '~src/utils/assignWithoutSideEffects';
 
 type ActionListItemAssetProps = {

diff --git a/packages/blade/src/components/ActionList/ActionListItemAsset.web.tsx b/packages/blade/src/components/ActionList/ActionListItemAsset.web.tsx
@@ -1,5 +1,5 @@
 import { componentIds } from './componentIds';
-import size from '~tokens/global/size';
+import { size } from '~tokens/global';
 import { assignWithoutSideEffects } from '~src/utils/assignWithoutSideEffects';
 
 type ActionListItemAssetProps = {