style: allow customization of system 'Banner' icons through CSS varia…

…bles (#858)

* style: allow customization of system 'Banner' icons through CSS variables

* chore: bump version to 27.1.0

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# 27.1.0
+
+-   [Feat] Expose CSS variables for customizng the icon color of the `Banner` component system types.
+
 # 27.0.1
 
 -   [Docs] Document the `maxLength` prop for the `TextField` component.

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "27.0.1",
+    "version": "27.1.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

src/icons/banner-icon.module.css

@@ -0,0 +1,32 @@
+:root {
+    --reactist-banner-info-icon-color: #316fea;
+    --reactist-banner-upgrade-icon-color: #f48318;
+    --reactist-banner-experiment-icon-color: #f48318;
+    --reactist-banner-warning-icon-color: #eb8909;
+    --reactist-banner-error-icon-color: #dc4c3e;
+    --reactist-banner-success-icon-color: #058527;
+}
+
+.info {
+    color: var(--reactist-banner-info-icon-color);
+}
+
+.upgrade {
+    color: var(--reactist-banner-upgrade-icon-color);
+}
+
+.experiment {
+    color: var(--reactist-banner-experiment-icon-color);
+}
+
+.warning {
+    color: var(--reactist-banner-warning-icon-color);
+}
+
+.error {
+    color: var(--reactist-banner-error-icon-color);
+}
+
+.success {
+    color: var(--reactist-banner-success-icon-color);
+}

src/icons/banner-icon.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import type { SystemBannerType } from '../banner/banner'
 
+import styles from './banner-icon.module.css'
+
 const bannerIconForType: Record<SystemBannerType, typeof BannerInfoIcon> = {
     info: BannerInfoIcon,
     upgrade: BannerUpgradeIcon,
@@ -12,14 +14,16 @@ const bannerIconForType: Record<SystemBannerType, typeof BannerInfoIcon> = {
 
 function BannerIcon({ type, ...props }: JSX.IntrinsicElements['svg'] & { type: SystemBannerType }) {
     const Icon = bannerIconForType[type]
-    return Icon ? <Icon {...props} data-testid={`banner-icon-${type}`} aria-hidden /> : null
+    return Icon ? (
+        <Icon {...props} data-testid={`banner-icon-${type}`} className={styles[type]} aria-hidden />
+    ) : null
 }
 
 function BannerInfoIcon(props: JSX.IntrinsicElements['svg']) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" {...props}>
             <path
-                fill="#316FEA"
+                fill="currentColor"
                 fillRule="evenodd"
                 d="M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.75 1.94a.75.75 0 0 0 0 1.5h1.25v3.5h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13V11a.752.752 0 0 0-.75-.75h-2Z"
                 clipRule="evenodd"
@@ -32,7 +36,7 @@ function BannerUpgradeIcon(props: JSX.IntrinsicElements['svg']) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" {...props}>
             <path
-                fill="#F48318"
+                fill="currentColor"
                 fillRule="evenodd"
                 d="M13.974 4.226a2.485 2.485 0 0 0-3.948 0 2.485 2.485 0 0 1-2.304.954A2.485 2.485 0 0 0 4.93 7.972a2.485 2.485 0 0 1-.954 2.304 2.485 2.485 0 0 0 0 3.948 2.485 2.485 0 0 1 .954 2.304 2.485 2.485 0 0 0 2.792 2.792 2.485 2.485 0 0 1 2.304.954 2.485 2.485 0 0 0 3.948 0 2.485 2.485 0 0 1 2.304-.954 2.485 2.485 0 0 0 2.792-2.792 2.485 2.485 0 0 1 .954-2.304 2.485 2.485 0 0 0 0-3.948 2.485 2.485 0 0 1-.954-2.304 2.485 2.485 0 0 0-2.792-2.792 2.485 2.485 0 0 1-2.304-.954ZM11.228 7.08c-.297-.581-1.177-.345-1.144.306l.125 2.437a.605.605 0 0 1-.635.635l-2.437-.125c-.651-.033-.887.847-.306 1.144l2.172 1.11c.32.163.428.567.233.868L7.91 15.503c-.355.548.289 1.192.837.837l2.047-1.326a.605.605 0 0 1 .868.233l1.11 2.172c.297.581 1.177.345 1.144-.306l-.125-2.437a.605.605 0 0 1 .635-.635l2.437.125c.651.033.887-.847.306-1.144l-2.172-1.11a.605.605 0 0 1-.233-.868l1.326-2.047c.355-.548-.289-1.192-.837-.837l-2.047 1.326a.605.605 0 0 1-.868-.233l-1.11-2.172Z"
                 clipRule="evenodd"
@@ -49,7 +53,7 @@ function BannerExperimentIcon(props: JSX.IntrinsicElements['svg']) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none" {...props}>
             <path
-                fill="#F48318"
+                fill="currentColor"
                 fillRule="evenodd"
                 d="M12 3.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-3 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H14v4.333a2 2 0 0 0 .4 1.2l4.4 5.867a1 1 0 0 1-.8 1.6H6a1 1 0 0 1-.8-1.6l4.4-5.867a2 2 0 0 0 .4-1.2V8.25h-.5a.5.5 0 0 1-.5-.5Zm1.5-2.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-4 3v4.333a3 3 0 0 1-.6 1.8l-.752 1.003c.11.078.245.16.403.226.41.173.985.253 1.682-.188.808-.51 1.547-.67 2.142-.674l-.275-.367a3 3 0 0 1-.6-1.8V8.25h-2Z"
                 clipRule="evenodd"
@@ -62,7 +66,7 @@ function BannerWarningIcon(props: JSX.IntrinsicElements['svg']) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" {...props}>
             <path
-                fill="#EB8909"
+                fill="currentColor"
                 fillRule="evenodd"
                 d="m10.272 5.212-7.018 12.03a2 2 0 0 0 1.728 3.008h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 8.75h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.028Z"
                 clipRule="evenodd"
@@ -75,7 +79,7 @@ function BannerErrorIcon(props: JSX.IntrinsicElements['svg']) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" {...props}>
             <path
-                fill="#DC4C3E"
+                fill="currentColor"
                 fillRule="evenodd"
                 d="M12.987 2.5a2.07 2.07 0 0 0-1.974 0L4.048 6.287A1.989 1.989 0 0 0 3 8.032v7.436c0 .725.401 1.393 1.048 1.745L11.013 21a2.07 2.07 0 0 0 1.974 0l6.965-3.787A1.989 1.989 0 0 0 21 15.468V8.032c0-.725-.401-1.393-1.048-1.745L12.987 2.5ZM12 7.25a.987.987 0 0 1 .986 1.014l-.001.027-.236 4.25c-.053.945-1.445.945-1.498 0l-.236-4.25a.987.987 0 0 1 .93-1.04h.028L12 7.25Zm1 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 clipRule="evenodd"
@@ -88,7 +92,7 @@ function BannerSuccessIcon(props: JSX.IntrinsicElements['svg']) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" {...props}>
             <path
-                fill="#058527"
+                fill="currentColor"
                 fillRule="evenodd"
                 d="M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z"
                 clipRule="evenodd"