feat(alertv2): updated Alert and Warning for AlertV2

ZopaPublic · Jul 31, 2024 · c1c217f · c1c217f
1 parent 9ed44de
commit c1c217f
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -1,40 +1,19 @@
 {
-  "name": "@zopauk/react-components",
-  "sideEffects": false,
-  "description": "Shared react styled components for all the Zopa projects.",
-  "version": "5.61.0",
-  "license": "MIT",
   "author": "Zopa Ltd <frontend-opensource@zopa.com> (https://zopa.com)",
-  "main": "cjs/src/index.js",
-  "module": "es/src/index.js",
-  "types": "types/index.d.ts",
-  "files": [
-    "/es",
-    "/cjs",
-    "/types",
-    "/src"
+  "browserslist": [
+    "cover 95% in GB",
+    "not ie <=11",
+    "not safari <11",
+    "not ios <11",
+    "not dead"
   ],
-  "scripts": {
-    "commit": "git-cz",
-    "dev": "NODE_ENV=development styleguidist server",
-    "dev:code": "concurrently --kill-others-on-fail \"pnpm:compile:code:dev -- -w \" \"pnpm compile:types -- -w\"",
-    "build": "NODE_ENV=production styleguidist build",
-    "compile": "pnpm compile:clean; pnpm compile:types && pnpm compile:code",
-    "compile:code": "rollup --config etc/rollup/config.mjs",
-    "compile:code:dev": "pnpm compile:code --watch",
-    "compile:types:dev": "pnpm compile:types --watch",
-    "sync": "concurrently pnpm:compile:code:dev pnpm:compile:types:dev",
-    "compile:clean": "rm -rf es cjs types",
-    "compile:types": "tsc --p ./tsconfig.types.json --incremental false",
-    "dev:zrc": "concurrently pnpm:compile:code:dev pnpm:compile:types:dev",
-    "test": "react-scripts test",
-    "format": "prettier -l --write \"**/*.{ts,tsx,js,jsx,json,less,css,md}\"",
-    "format:fix": "pnpm format --write",
-    "lint": "eslint 'src/**/*.{ts,tsx}'",
-    "lint:fix": "pnpm lint --fix",
-    "typecheck": "tsc --noEmit",
-    "release": "changeset publish",
-    "prepare": "husky install"
+  "bugs": {
+    "url": "https://github.com/zopaUK/react-components/issues"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
@@ -61,14 +40,7 @@
     "tippy.js": "^6.2.7",
     "util-deprecate": "^1.0.2"
   },
-  "peerDependencies": {
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@types/styled-components": ">=5.1.25",
-    "react": ">=16.8.1",
-    "react-dom": ">=16.8.1",
-    "styled-components": ">=4.4.0",
-    "typescript": ">=3.x"
-  },
+  "description": "Shared react styled components for all the Zopa projects.",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@commitlint/cli": "17.3.0",
@@ -136,37 +108,65 @@
     "webpack": "^5.73.0",
     "webpack-dev-server": "^4.9.1"
   },
-  "browserslist": [
-    "cover 95% in GB",
-    "not ie <=11",
-    "not safari <11",
-    "not ios <11",
-    "not dead"
+  "files": [
+    "/es",
+    "/cjs",
+    "/types",
+    "/src"
   ],
+  "homepage": "https://github.com/zopaUK/react-components#readme",
   "jest": {
     "collectCoverageFrom": [
       "src/components/**/*.{ts,tsx}"
     ]
   },
-  "config": {
-    "commitizen": {
-      "path": "cz-conventional-changelog"
-    }
+  "license": "MIT",
+  "main": "cjs/src/index.js",
+  "module": "es/src/index.js",
+  "name": "@zopauk/react-components",
+  "packageManager": "pnpm@9.1.4",
+  "peerDependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@types/styled-components": ">=5.1.25",
+    "react": ">=16.8.1",
+    "react-dom": ">=16.8.1",
+    "styled-components": ">=4.4.0",
+    "typescript": ">=3.x"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ZopaPublic/react-components.git"
   },
-  "bugs": {
-    "url": "https://github.com/zopaUK/react-components/issues"
-  },
-  "homepage": "https://github.com/zopaUK/react-components#readme",
-  "publishConfig": {
-    "access": "public"
-  },
   "resolutions": {
     "@types/react": "^17",
     "@types/react-dom": "^17"
   },
-  "packageManager": "pnpm@9.1.4"
+  "scripts": {
+    "build": "NODE_ENV=production styleguidist build",
+    "commit": "git-cz",
+    "compile": "pnpm compile:clean; pnpm compile:types && pnpm compile:code",
+    "compile:clean": "rm -rf es cjs types",
+    "compile:code": "rollup --config etc/rollup/config.mjs",
+    "compile:code:dev": "pnpm compile:code --watch",
+    "compile:types": "tsc --p ./tsconfig.types.json --incremental false",
+    "compile:types:dev": "pnpm compile:types --watch",
+    "dev": "NODE_ENV=development styleguidist server",
+    "dev:code": "concurrently --kill-others-on-fail \"pnpm:compile:code:dev -- -w \" \"pnpm compile:types -- -w\"",
+    "dev:zrc": "concurrently pnpm:compile:code:dev pnpm:compile:types:dev",
+    "format": "prettier -l --write \"**/*.{ts,tsx,js,jsx,json,less,css,md}\"",
+    "format:fix": "pnpm format --write",
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:fix": "pnpm lint --fix",
+    "prepare": "husky install",
+    "release": "changeset publish",
+    "sync": "concurrently pnpm:compile:code:dev pnpm:compile:types:dev",
+    "test": "react-scripts test",
+    "typecheck": "tsc --noEmit"
+  },
+  "sideEffects": false,
+  "types": "types/index.d.ts",
+  "version": "5.61.0"
 }
diff --git a/src/components/atoms/Alert/Alert.tsx b/src/components/atoms/Alert/Alert.tsx
@@ -5,10 +5,11 @@ import { IconLookup, findIconDefinition } from '@fortawesome/fontawesome-svg-cor
 import Icon from '../Icon/Icon';
 import { colors, typography } from '../../../constants';
 import { useThemeContext } from '../../styles/Theme';
-import ExclamationIcon from '../../styles/icons/exclamation';
+import CircleExclamationIcon from '../../styles/icons/circleExclamation';
 import Button from '../Button/Button';
 import HiddenText from '../HiddenText/HiddenText';
 import InfoCircleIcon from '../../styles/icons/infoCircle';
+import TriangleExclamationIcon from '../../styles/icons/triangleExclamation';
 
 export type Severity = 'info' | 'alert' | 'warning' | 'success' | 'brand';
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -88,11 +89,16 @@ const Alert = ({
     }
   }
 
+  const iconMap = {
+    'circle-exclamation': CircleExclamationIcon,
+    'triangle-exclamation': TriangleExclamationIcon,
+    'info-circle': InfoCircleIcon,
+  };
+
   if (customVariant) {
-    if (customVariant.iconName === 'exclamation') {
-      CustomIcon = <ExclamationIcon color={customVariant.color} />;
-    } else if (customVariant.iconName === 'info-circle') {
-      CustomIcon = <InfoCircleIcon color={customVariant.color} />;
+    const IconComponent = iconMap[customVariant.iconName];
+    if (IconComponent) {
+      CustomIcon = <IconComponent color={customVariant.color} />;
     } else {
       throw new Error(`Unknown custom icon name: ${customVariant.iconName}`);
     }

diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -16,7 +16,7 @@ import { Severity } from '../../atoms/Alert/Alert';
 import { spacing } from '../../../constants';
 import { ProductTemplateV2 } from '../../templates/ProductTemplate/ProductTemplate/ProductTemplateV2';
 
-export type CustomIconVariant = 'exclamation' | 'info-circle';
+export type CustomIconVariant = 'circle-exclamation' | 'info-circle' | 'triangle-exclamation';
 
 export interface ButtonTheme {
   text: string;

diff --git a/src/components/styles/icons/circleExclamation.tsx b/src/components/styles/icons/circleExclamation.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface CircleExclamationProps {
+  color: string;
+}
+const CircleExclamationIconWrapper = styled.div`
+  width: 22.5px;
+  height: 22.5px;
+`;
+
+function CircleExclamationIcon({ color }: CircleExclamationProps) {
+  return (
+    <CircleExclamationIconWrapper>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path
+          fill={color}
+          d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
+        />
+      </svg>
+    </CircleExclamationIconWrapper>
+  );
+}
+
+export default CircleExclamationIcon;
diff --git a/src/components/styles/icons/exclamation.tsx b/src/components/styles/icons/exclamation.tsx
diff --git a/src/components/styles/icons/triangleExclamation.tsx b/src/components/styles/icons/triangleExclamation.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface TriangleExclamationProps {
+  color: string;
+}
+const TriangleExclamationIconWrapper = styled.div`
+  width: 22.5px;
+  height: 22.5px;
+`;
+
+function TriangleExclamationIcon({ color }: TriangleExclamationProps) {
+  return (
+    <TriangleExclamationIconWrapper>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path
+          fill={color}
+          d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+        />
+      </svg>
+    </TriangleExclamationIconWrapper>
+  );
+}
+
+export default TriangleExclamationIcon;