feat: global navigation and styling (#124)

Co-authored-by: Gabriel Tiburcio <[email protected]> Co-authored-by: Gary Kaganas <[email protected]>
mParticle · Mar 13, 2024 · 7863d9a · 7863d9a
1 parent 8b66a3a
commit 7863d9a
Show file tree

Hide file tree

Showing 65 changed files with 1,967 additions and 981 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
@@ -2,6 +2,7 @@ module.exports = {
   env: {
     browser: true,
     es2024: true,
+    jest: true
   },
   settings: {
     react: {
@@ -103,18 +104,18 @@ module.exports = {
           'NavigationIcon',
           'NavigationList',
           'WorkspaceSelector',
-          'WorkspaceSearchLabel',
-          'WorkspaceSignoutLabel',
-          'WorkspaceInputLabel',
+          'WorkspaceNoResults',
+          'WorkspaceSignout',
         ],
       },
     ],
     '@typescript-eslint/strict-boolean-expressions': 'off',
     '@typescript-eslint/consistent-type-definitions': 'off',
     '@typescript-eslint/no-use-before-define': ['error', { allowNamedExports: true, functions: false }],
+    "@typescript-eslint/promise-function-async": "warn",
     'react/react-in-jsx-scope': 'off',
     'import/no-duplicates': 'off',
-    'react/jsx-boolean-value': ['always'], 
+    'react/jsx-boolean-value': 'warn'
   },
   globals: {
     React: true,

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -4,15 +4,9 @@ on:
   workflow_dispatch:
 
 jobs:
-  # release is done from main branch.
-  confirm-public-repo-main-branch:
-    name: 'Confirm release is run from public/main branch'
-    uses: mParticle/mparticle-workflows/.github/workflows/sdk-release-repo-branch-check.yml@main
-
   release:
     name: Perform Release
     runs-on: ubuntu-latest
-    needs: confirm-public-repo-main-branch
 
     env:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -27,7 +21,6 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          ref: main
 
       - name: Import GPG Key
         uses: crazy-max/ghaction-import-gpg@v4
@@ -39,7 +32,7 @@ jobs:
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
-        with: 
+        with:
           node-version: 'latest'
 
       - name: Install Dependencies
@@ -57,4 +50,4 @@ jobs:
         if: failure()
         with:
           name: npm-logs
-          path: ~/.npm/_logs
+          path: ~/.npm/_logs
diff --git a/.gitignore b/.gitignore
@@ -89,7 +89,6 @@ out
 
 # Nuxt.js build / generate output
 .nuxt
-dist
 
 # Gatsby files
 .cache/
@@ -138,4 +137,6 @@ out/
 test/reports
 test/test-bundle.js.map
 test/stub/test-stub-bundle.js
+
+dist/
 **/dist
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,3 @@
+node_modules/
+dist/
+src/styles/_variables.css
diff --git a/.stylelintrc b/.stylelintrc
@@ -6,6 +6,7 @@
     "stylelint-no-indistinguishable-colors"
   ],
   "rules": {
+    "selector-class-pattern": null,
     "block-no-empty": true,
     "comment-no-empty": true,
     "no-duplicate-selectors": true,

diff --git a/design/GlobalToken.json b/design/GlobalToken.json
@@ -108,7 +108,7 @@
     "value": "cubic-bezier(0.23, 1, 0.32, 1)"
   },
   "borderRadius": {
-    "value": "6px"
+    "value": "8px"
   },
   "sizeUnit": {
     "value": "4px"
@@ -143,6 +143,12 @@
   "controlOutline": {
     "value": "rgba(0.21176470816135406, 0, 0.8196078538894653, 0.10000000149011612)"
   },
+  "colorWarningOutline": {
+    "value": "#fffbe6"
+  },
+  "colorErrorOutline": {
+    "value": "#fff1f0"
+  },
   "controlItemBgHover": {
     "value": "#f8f6fb"
   },
@@ -191,9 +197,90 @@
   "colorSplit": {
     "value": "#eceae9"
   },
+  "colorPrimaryBg": {
+    "value": "#f8f6fb"
+  },
+  "colorPrimaryBgHover": {
+    "value": "#ebe8f8"
+  },
+  "colorPrimaryBorder": {
+    "value": "#c3aeff"
+  },
+  "colorPrimaryBorderHover": {
+    "value": "#ab8eff"
+  },
+  "colorPrimaryHover": {
+    "value": "#ab8eff"
+  },
+  "colorPrimaryActive": {
+    "value": "#8255ff"
+  },
+  "colorPrimaryTextHover": {
+    "value": "#5f29f8"
+  },
+  "colorPrimaryText": {
+    "value": "#2c00aa"
+  },
+  "colorPrimaryTextActive": {
+    "value": "#20007a"
+  },
+  "colorSuccessHover": {
+    "value": "#73d13d"
+  },
+  "colorSuccessTextHover": {
+    "value": "#237804"
+  },
+  "colorSuccessText": {
+    "value": "#135200"
+  },
+  "colorSuccessTextActive": {
+    "value": "#092b00"
+  },
+  "colorWarningHover": {
+    "value": "#ffc53d"
+  },
+  "colorWarningTextHover": {
+    "value": "#ad6800"
+  },
+  "colorWarningText": {
+    "value": "#874d00"
+  },
+  "colorWarningTextActive": {
+    "value": "#613400"
+  },
+  "colorErrorBg": {
+    "value": "#fff1f0"
+  },
+  "colorErrorBgHover": {
+    "value": "#ffccc7"
+  },
+  "colorErrorBorder": {
+    "value": "#ffa39e"
+  },
+  "colorErrorBorderHover": {
+    "value": "#ff7875"
+  },
+  "colorErrorHover": {
+    "value": "#ff4d4f"
+  },
+  "colorErrorActive": {
+    "value": "#cf1322"
+  },
+  "colorErrorTextHover": {
+    "value": "#a8071a"
+  },
+  "colorErrorText": {
+    "value": "#820014"
+  },
+  "colorErrorTextActive": {
+    "value": "#5c0011"
+  },
   "colorBgMask": {
     "value": "#babbb5"
   },
+  "borderRadiusLG": {
+    "value": "16px"
+  },
   "mpBrandPrimary.1": {
     "value": "#f8f6fb"
   },
@@ -1046,33 +1133,6 @@
   "colorBgBlur": {
     "value": "transparent"
   },
-  "colorPrimaryBg": {
-    "value": "#f1e6ff"
-  },
-  "colorPrimaryBgHover": {
-    "value": "#c8a3ff"
-  },
-  "colorPrimaryBorder": {
-    "value": "#a677f7"
-  },
-  "colorPrimaryBorderHover": {
-    "value": "#804beb"
-  },
-  "colorPrimaryHover": {
-    "value": "#5b23de"
-  },
-  "colorPrimaryActive": {
-    "value": "#2800ab"
-  },
-  "colorPrimaryTextHover": {
-    "value": "#5b23de"
-  },
-  "colorPrimaryText": {
-    "value": "#3600d1"
-  },
-  "colorPrimaryTextActive": {
-    "value": "#2800ab"
-  },
   "colorSuccessBg": {
     "value": "#f6ffed"
   },
@@ -1085,48 +1145,9 @@
   "colorSuccessBorderHover": {
     "value": "#95de64"
   },
-  "colorSuccessHover": {
-    "value": "#95de64"
-  },
   "colorSuccessActive": {
     "value": "#389e0d"
   },
-  "colorSuccessTextHover": {
-    "value": "#73d13d"
-  },
-  "colorSuccessText": {
-    "value": "#52c41a"
-  },
-  "colorSuccessTextActive": {
-    "value": "#389e0d"
-  },
-  "colorErrorBg": {
-    "value": "#fff1f0"
-  },
-  "colorErrorBgHover": {
-    "value": "#ffccc7"
-  },
-  "colorErrorBorder": {
-    "value": "#ffa39e"
-  },
-  "colorErrorBorderHover": {
-    "value": "#ff7875"
-  },
-  "colorErrorHover": {
-    "value": "#ff4d4f"
-  },
-  "colorErrorActive": {
-    "value": "#cf1322"
-  },
-  "colorErrorTextHover": {
-    "value": "#ff4d4f"
-  },
-  "colorErrorText": {
-    "value": "#f5222d"
-  },
-  "colorErrorTextActive": {
-    "value": "#cf1322"
-  },
   "colorWarningBg": {
     "value": "#fffbe6"
   },
@@ -1139,21 +1160,9 @@
   "colorWarningBorderHover": {
     "value": "#ffd666"
   },
-  "colorWarningHover": {
-    "value": "#ffd666"
-  },
   "colorWarningActive": {
     "value": "#d48806"
   },
-  "colorWarningTextHover": {
-    "value": "#ffc53d"
-  },
-  "colorWarningText": {
-    "value": "#faad14"
-  },
-  "colorWarningTextActive": {
-    "value": "#d48806"
-  },
   "colorInfoBg": {
     "value": "#e6f4ff"
   },
@@ -1296,13 +1305,10 @@
     "value": "2px"
   },
   "borderRadiusSM": {
-    "value": "4px"
-  },
-  "borderRadiusLG": {
-    "value": "8px"
+    "value": "6px"
   },
   "borderRadiusOuter": {
-    "value": "4px"
+    "value": "6px"
   },
   "colorFillContent": {
     "value": "#ebe8f8"
@@ -1352,12 +1358,6 @@
   "colorIconHover": {
     "value": "#0f0e0e"
   },
-  "colorErrorOutline": {
-    "value": "rgba(255, 22, 5, 0.06)"
-  },
-  "colorWarningOutline": {
-    "value": "rgba(255, 215, 5, 0.1)"
-  },
   "fontSizeIcon": {
     "value": "12px"
   },