From b814a8188b092d88bc1540e7ca11462e65b65e56 Mon Sep 17 00:00:00 2001 From: Kathryn Beaty Date: Tue, 20 Jun 2023 15:08:31 -0400 Subject: [PATCH] add more admin/auth/ui components icons --- .../admin/components/ExperimentalCallOut.tsx | 7 +- .../RotationDropdown.tsx | 4 +- .../sections/Email/EmailConfigContainer.tsx | 3 +- .../RotateSigningSecretModal.tsx | 3 +- .../Configure/sections/Sites/AddSiteRoute.tsx | 3 +- .../Configure/sections/Sites/SiteRoute.tsx | 3 +- .../RotateSigningSecretModal.tsx | 3 +- .../ModerateSearchBar/ModerateAllOption.tsx | 7 +- .../ModerateSearchBar/SeeAllOption.css | 3 +- .../ModerateSearchBar/SeeAllOption.tsx | 6 +- .../views/AddEmailAddress/AddEmailAddress.css | 4 ++ .../views/AddEmailAddress/AddEmailAddress.tsx | 10 +-- .../UnorderedList/ListItem.css | 2 + .../UnorderedList/ListItem.tsx | 4 +- .../auth/views/SignUp/SignUpWithEmail.tsx | 7 +- .../Stream/CommentForm/CommentForm.tsx | 3 +- .../ui/components/icons/LabFlaskIcon.tsx | 70 +++++++++++++++++++ .../ui/components/icons/StarHalfIcon.tsx | 51 ++++++++++++++ src/core/client/ui/components/icons/index.ts | 2 + .../client/ui/components/v2/AppBar/README.mdx | 11 ++- .../v2/AppNotification/AppNotification.css | 4 ++ .../v2/AppNotification/AppNotification.tsx | 11 +-- .../ui/components/v2/Card/CloseButton.tsx | 6 +- .../ui/components/v2/Message/MessageIcon.tsx | 21 ++++-- .../client/ui/components/v2/Steps/Circle.tsx | 6 +- .../ui/components/v2/TextLink/TextLink.tsx | 6 +- .../ValidationMessage/ValidationMessage.tsx | 3 +- .../v3/ArchivedMarker/ArchivedMarker.css | 2 +- .../v3/ArchivedMarker/ArchivedMarker.tsx | 7 +- .../components/v3/StarRating/StarRating.tsx | 15 ++-- .../v3/StarRating/StarRatingIcon.tsx | 21 +++--- 31 files changed, 228 insertions(+), 80 deletions(-) create mode 100644 src/core/client/ui/components/icons/LabFlaskIcon.tsx create mode 100644 src/core/client/ui/components/icons/StarHalfIcon.tsx diff --git a/src/core/client/admin/components/ExperimentalCallOut.tsx b/src/core/client/admin/components/ExperimentalCallOut.tsx index 1bf40f9e95..c9e387f71c 100644 --- a/src/core/client/admin/components/ExperimentalCallOut.tsx +++ b/src/core/client/admin/components/ExperimentalCallOut.tsx @@ -1,7 +1,8 @@ import { Localized } from "@fluent/react/compat"; import React, { FunctionComponent } from "react"; -import { CallOut, Flex, Icon } from "coral-ui/components/v2"; +import { LabFlaskIcon, SvgIcon } from "coral-ui/components/icons"; +import { CallOut, Flex } from "coral-ui/components/v2"; import styles from "./ExperimentalCallOut.css"; @@ -14,9 +15,7 @@ const ExperimentalCallOut: FunctionComponent = ({ }) => ( - - new_releases - + Experimental Feature diff --git a/src/core/client/admin/routes/Configure/sections/Auth/SSOSigningSecretRotation/RotationDropdown.tsx b/src/core/client/admin/routes/Configure/sections/Auth/SSOSigningSecretRotation/RotationDropdown.tsx index f3eea1458d..afbf5f95e7 100644 --- a/src/core/client/admin/routes/Configure/sections/Auth/SSOSigningSecretRotation/RotationDropdown.tsx +++ b/src/core/client/admin/routes/Configure/sections/Auth/SSOSigningSecretRotation/RotationDropdown.tsx @@ -1,12 +1,12 @@ import { Localized } from "@fluent/react/compat"; import React, { FunctionComponent } from "react"; +import { ArrowsDownIcon, SvgIcon } from "coral-ui/components/icons"; import { Button, ClickOutside, Dropdown, DropdownButton, - Icon, Popover, } from "coral-ui/components/v2"; @@ -61,7 +61,7 @@ const RotationDropDown: FunctionComponent = ({ Rotate - arrow_drop_down + )} diff --git a/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx index 1d1a9914ef..d754b7c295 100644 --- a/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx +++ b/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx @@ -11,6 +11,7 @@ import { withFragmentContainer, } from "coral-framework/lib/relay"; import { GQLSettings } from "coral-framework/schema"; +import { CheckCircleIcon } from "coral-ui/components/icons"; import { AppNotification, Button, CallOut, Flex } from "coral-ui/components/v2"; import { EmailConfigContainer_email } from "coral-admin/__generated__/EmailConfigContainer_email.graphql"; @@ -54,7 +55,7 @@ const EmailConfigContainer: React.FunctionComponent = ({ id="configure-smtp-test-success" vars={{ email: viewer.email }} > - + Test email has been sent to {viewer.email} , diff --git a/src/core/client/admin/routes/Configure/sections/ModerationPhases/ConfigureExternalModerationPhase/RotateSigningSecretModal.tsx b/src/core/client/admin/routes/Configure/sections/ModerationPhases/ConfigureExternalModerationPhase/RotateSigningSecretModal.tsx index 1a2b4e0062..17f5a830dc 100644 --- a/src/core/client/admin/routes/Configure/sections/ModerationPhases/ConfigureExternalModerationPhase/RotateSigningSecretModal.tsx +++ b/src/core/client/admin/routes/Configure/sections/ModerationPhases/ConfigureExternalModerationPhase/RotateSigningSecretModal.tsx @@ -7,6 +7,7 @@ import { useNotification } from "coral-admin/App/GlobalNotification"; import { useCoralContext } from "coral-framework/lib/bootstrap"; import { InvalidRequestError } from "coral-framework/lib/errors"; import { useMutation } from "coral-framework/lib/relay"; +import { CheckCircleIcon } from "coral-ui/components/icons"; import { Button, CallOut, @@ -58,7 +59,7 @@ const RotateWebhookEndpointSigningSecretModal: FunctionComponent = ({ // Post a notification about the successful change. setMessage( - + External moderation phase signing secret has been rotated. Please ensure you update your integrations to use the new secret below. diff --git a/src/core/client/admin/routes/Configure/sections/Sites/AddSiteRoute.tsx b/src/core/client/admin/routes/Configure/sections/Sites/AddSiteRoute.tsx index 04c51378a8..199cadef3a 100644 --- a/src/core/client/admin/routes/Configure/sections/Sites/AddSiteRoute.tsx +++ b/src/core/client/admin/routes/Configure/sections/Sites/AddSiteRoute.tsx @@ -5,6 +5,7 @@ import { graphql } from "react-relay"; import { useNotification } from "coral-admin/App/GlobalNotification"; import { withRouteConfig } from "coral-framework/lib/router"; +import { CheckCircleIcon } from "coral-ui/components/icons"; import { AppNotification } from "coral-ui/components/v2"; import { AddSiteRouteQueryResponse } from "coral-admin/__generated__/AddSiteRouteQuery.graphql"; @@ -31,7 +32,7 @@ const AddSiteRoute: FunctionComponent = (props) => { org: (props.data && props.data.settings.organization.name) ?? "", }} > - + {name} has been added to{" "} {props.data && props.data.settings.organization.name} diff --git a/src/core/client/admin/routes/Configure/sections/Sites/SiteRoute.tsx b/src/core/client/admin/routes/Configure/sections/Sites/SiteRoute.tsx index 90c980b330..c9d559283b 100644 --- a/src/core/client/admin/routes/Configure/sections/Sites/SiteRoute.tsx +++ b/src/core/client/admin/routes/Configure/sections/Sites/SiteRoute.tsx @@ -4,6 +4,7 @@ import { graphql } from "react-relay"; import { useNotification } from "coral-admin/App/GlobalNotification"; import { withRouteConfig } from "coral-framework/lib/router"; +import { CheckCircleIcon } from "coral-ui/components/icons"; import { AppNotification } from "coral-ui/components/v2"; import { SiteRouteQueryResponse } from "coral-admin/__generated__/SiteRouteQuery.graphql"; @@ -22,7 +23,7 @@ const AddSiteRoute: FunctionComponent = ({ data }) => { (name: string) => { setMessage( - + Changes to {name} have been saved diff --git a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/RotateSigningSecretModal.tsx b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/RotateSigningSecretModal.tsx index 6d7029778a..919c3843fb 100644 --- a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/RotateSigningSecretModal.tsx +++ b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/RotateSigningSecretModal.tsx @@ -7,6 +7,7 @@ import { useNotification } from "coral-admin/App/GlobalNotification"; import { useCoralContext } from "coral-framework/lib/bootstrap"; import { InvalidRequestError } from "coral-framework/lib/errors"; import { useMutation } from "coral-framework/lib/relay"; +import { CheckCircleIcon } from "coral-ui/components/icons"; import { Button, CallOut, @@ -58,7 +59,7 @@ const RotateWebhookEndpointSigningSecretModal: FunctionComponent = ({ // Post a notification about the successful change. setMessage( - + Webhook endpoint signing secret has been rotated. Please ensure you update your integrations to use the new secret below. diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx index 0c6436984a..ff988a9efb 100644 --- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx +++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx @@ -2,7 +2,8 @@ import { Localized } from "@fluent/react/compat"; import cn from "classnames"; import React, { FunctionComponent, HTMLAttributes } from "react"; -import { Button, Icon } from "coral-ui/components/v2"; +import { ArrowRightIcon, SvgIcon } from "coral-ui/components/icons"; +import { Button } from "coral-ui/components/v2"; import styles from "./ModerateAllOption.css"; @@ -38,9 +39,7 @@ const ModerateAllOption: FunctionComponent = ({ Moderate all stories - - keyboard_arrow_right - + diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.css b/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.css index e2ca09ff3e..69b3fee720 100644 --- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.css +++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.css @@ -1,4 +1,3 @@ - @import "./variables.css"; .root { @@ -33,7 +32,7 @@ font-weight: var(--font-weight-primary-semi-bold); padding-left: calc(0.5 * var(--mini-unit)); line-height: calc(16em / 13); - margin-top: -2px; color: $story-search-results-see-all-label; + display: flex; } diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.tsx index e8926e1c11..2da6b015ed 100644 --- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.tsx +++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.tsx @@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat"; import cn from "classnames"; import React, { FunctionComponent, HTMLAttributes } from "react"; -import { Icon } from "coral-ui/components/v2"; +import { ArrowRightIcon, SvgIcon } from "coral-ui/components/icons"; import styles from "./SeeAllOption.css"; @@ -30,9 +30,7 @@ const SeeAllOption: FunctionComponent = ({ See all results - - keyboard_arrow_right - + ); diff --git a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css index ad132614ab..bbfb30cce8 100644 --- a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css +++ b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css @@ -38,6 +38,10 @@ margin-bottom: var(--spacing-4); } +.error span { + display: inline-block; +} + .strong { display: inline; diff --git a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx index 1d46b7ec87..f207835a93 100644 --- a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx +++ b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx @@ -16,7 +16,7 @@ import { InvalidRequestError } from "coral-framework/lib/errors"; import { FormError, OnSubmit } from "coral-framework/lib/form"; import { useMutation } from "coral-framework/lib/relay"; import CLASSES from "coral-stream/classes"; -import { Icon } from "coral-ui/components/v2"; +import { AlertCircleIcon, CheckIcon, SvgIcon } from "coral-ui/components/icons"; import { Button, CallOut } from "coral-ui/components/v3"; import SetEmailMutation from "./SetEmailMutation"; @@ -75,7 +75,7 @@ const AddEmailAddressContainer: FunctionComponent = () => { - done}> + }>
Receive updates regarding any changes to your account @@ -83,14 +83,14 @@ const AddEmailAddressContainer: FunctionComponent = () => {
- done}> + }>
Allow you to download your comments.
- done}> + }>
Send comment notifications that you have chosen to @@ -104,7 +104,7 @@ const AddEmailAddressContainer: FunctionComponent = () => { error} + icon={} title={submitError} />
diff --git a/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.css b/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.css index c717baccf9..e5f576fce1 100644 --- a/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.css +++ b/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.css @@ -7,4 +7,6 @@ flex-grow: 0; flex-shrink: 0; width: 20px; + display: flex; + margin-top: var(--spacing-1); } diff --git a/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.tsx b/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.tsx index 5c54a802e8..b2271f2767 100644 --- a/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.tsx +++ b/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from "react"; -import { Icon } from "coral-ui/components/v2"; +import { CheckIcon, SvgIcon } from "coral-ui/components/icons"; import styles from "./ListItem.css"; @@ -17,7 +17,7 @@ const ListItem: FunctionComponent = (props) => ( ); ListItem.defaultProps = { - icon: keyboard_arrow_right, + icon: , }; export default ListItem; diff --git a/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx b/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx index 4ac5dd0195..e034357250 100644 --- a/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx +++ b/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx @@ -6,7 +6,8 @@ import EmailField from "coral-auth/components/EmailField"; import SetPasswordField from "coral-auth/components/SetPasswordField"; import UsernameField from "coral-auth/components/UsernameField"; import { FormError, OnSubmit } from "coral-framework/lib/form"; -import { Flex, Icon } from "coral-ui/components/v2"; +import { EmailIcon, SvgIcon } from "coral-ui/components/icons"; +import { Flex } from "coral-ui/components/v2"; import { Button, CallOut } from "coral-ui/components/v3"; import styles from "./SignUpWithEmail.css"; @@ -51,9 +52,7 @@ const SignUp: FunctionComponent = (props) => { upperCase > - - email - + Sign up with Email diff --git a/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx b/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx index 45798fce5d..6c452669d2 100644 --- a/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx @@ -19,6 +19,7 @@ import { PropTypesOf } from "coral-framework/types"; import CLASSES from "coral-stream/classes"; import { AddIcon, + AlarmClockIcon, AlertCircleIcon, ImageAddIcon, SvgIcon, @@ -400,7 +401,7 @@ const CommentForm: FunctionComponent = ({ className={CLASSES.editComment.remainingTime} fullWidth > - alarm + }} diff --git a/src/core/client/ui/components/icons/LabFlaskIcon.tsx b/src/core/client/ui/components/icons/LabFlaskIcon.tsx new file mode 100644 index 0000000000..22f12b3f3b --- /dev/null +++ b/src/core/client/ui/components/icons/LabFlaskIcon.tsx @@ -0,0 +1,70 @@ +import React, { FunctionComponent } from "react"; + +const LabFlaskIcon: FunctionComponent = () => { + return ( + + + + + + + + + + + + + + + + ); +}; + +export default LabFlaskIcon; diff --git a/src/core/client/ui/components/icons/StarHalfIcon.tsx b/src/core/client/ui/components/icons/StarHalfIcon.tsx new file mode 100644 index 0000000000..ec6f08f80d --- /dev/null +++ b/src/core/client/ui/components/icons/StarHalfIcon.tsx @@ -0,0 +1,51 @@ +import React, { FunctionComponent } from "react"; + +const StarHalfIcon: FunctionComponent = () => { + return ( + + + + + + + + + + ); +}; + +export default StarHalfIcon; diff --git a/src/core/client/ui/components/icons/index.ts b/src/core/client/ui/components/icons/index.ts index 3572e5914e..e024339d03 100644 --- a/src/core/client/ui/components/icons/index.ts +++ b/src/core/client/ui/components/icons/index.ts @@ -36,6 +36,7 @@ export { default as HyperlinkIcon } from "./HyperlinkIcon"; export { default as ImageAddIcon } from "./ImageAddIcon"; export { default as ImageFileLandscapeIcon } from "./ImageFileLandscapeIcon"; export { default as InfoCircleIcon } from "./InfoCircleIcon"; +export { default as LabFlaskIcon } from "./LabFlaskIcon"; export { default as ListBulletsIcon } from "./ListBulletsIcon"; export { default as LockIcon } from "./LockIcon"; export { default as MessagesBubbleSquareIcon } from "./MessagesBubbleSquareIcon"; @@ -58,6 +59,7 @@ export { default as SingleNeutralActionsAddIcon } from "./SingleNeutralActionsAd export { default as SingleNeutralActionsBlockIcon } from "./SingleNeutralActionsBlockIcon"; export { default as SingleNeutralProfilePictureIcon } from "./SingleNeutralProfilePictureIcon"; export { default as StarIcon } from "./StarIcon"; +export { default as StarHalfIcon } from "./StarHalfIcon"; export { default as StopwatchIcon } from "./StopwatchIcon"; export { default as StrikethroughIcon } from "./StrikethroughIcon"; export { default as SvgIcon } from "./SvgIcon"; diff --git a/src/core/client/ui/components/v2/AppBar/README.mdx b/src/core/client/ui/components/v2/AppBar/README.mdx index 673ed272b2..8775d48024 100644 --- a/src/core/client/ui/components/v2/AppBar/README.mdx +++ b/src/core/client/ui/components/v2/AppBar/README.mdx @@ -5,9 +5,14 @@ menu: UI Kit v2 import { Playground } from "docz"; +import { + HistoryIcon, + SingleNeutralProfilePictureIcon, + SvgIcon, +} from "coral-ui/components/icons"; + import { AppBar, Begin, End, Navigation, NavigationItem, Divider } from "./"; import Flex from "../Flex"; -import Icon from "../Icon"; import BaseButton from "../BaseButton"; # AppBar @@ -24,11 +29,11 @@ import BaseButton from "../BaseButton"; - history + - account_box + diff --git a/src/core/client/ui/components/v2/AppNotification/AppNotification.css b/src/core/client/ui/components/v2/AppNotification/AppNotification.css index 79fec503fb..9c3b109399 100644 --- a/src/core/client/ui/components/v2/AppNotification/AppNotification.css +++ b/src/core/client/ui/components/v2/AppNotification/AppNotification.css @@ -13,3 +13,7 @@ .success { background-color: var(--palette-success-300); } + +.icon { + display: flex; +} diff --git a/src/core/client/ui/components/v2/AppNotification/AppNotification.tsx b/src/core/client/ui/components/v2/AppNotification/AppNotification.tsx index 2a3485a487..95c43c9698 100644 --- a/src/core/client/ui/components/v2/AppNotification/AppNotification.tsx +++ b/src/core/client/ui/components/v2/AppNotification/AppNotification.tsx @@ -1,19 +1,20 @@ import cn from "classnames"; -import React, { FunctionComponent } from "react"; +import React, { ComponentType, FunctionComponent } from "react"; -import { Button, ButtonIcon, Flex, Icon } from "coral-ui/components/v2"; +import { SvgIcon } from "coral-ui/components/icons"; +import { Button, ButtonIcon, Flex } from "coral-ui/components/v2"; import styles from "./AppNotification.css"; interface Props { - icon?: string; + Icon?: ComponentType; onClose?: () => void; color?: "success" | "alert" | "mono"; children?: React.ReactNode; } const AppNotification: FunctionComponent = ({ - icon, + Icon, children, onClose, color, @@ -30,7 +31,7 @@ const AppNotification: FunctionComponent = ({ className={styles.inner} > - {icon && {icon}} + {Icon && } {children} {onClose && ( diff --git a/src/core/client/ui/components/v2/Card/CloseButton.tsx b/src/core/client/ui/components/v2/Card/CloseButton.tsx index 75635c446c..3665fd5cd2 100644 --- a/src/core/client/ui/components/v2/Card/CloseButton.tsx +++ b/src/core/client/ui/components/v2/Card/CloseButton.tsx @@ -1,11 +1,11 @@ import React, { FunctionComponent, Ref } from "react"; +import { CloseIcon, SvgIcon } from "coral-ui/components/icons"; import { withForwardRef, withStyles } from "coral-ui/hocs"; import { PropTypesOf } from "coral-ui/types"; import BaseButton from "../BaseButton"; import Flex from "../Flex"; -import Icon from "../Icon"; import styles from "./CloseButton.css"; @@ -29,9 +29,7 @@ const CloseButton: FunctionComponent = (props) => { return ( - - close - + ); diff --git a/src/core/client/ui/components/v2/Message/MessageIcon.tsx b/src/core/client/ui/components/v2/Message/MessageIcon.tsx index 8bbccd7be6..c8d54089a9 100644 --- a/src/core/client/ui/components/v2/Message/MessageIcon.tsx +++ b/src/core/client/ui/components/v2/Message/MessageIcon.tsx @@ -1,9 +1,15 @@ import cn from "classnames"; -import React, { FunctionComponent, HTMLAttributes, Ref } from "react"; - +import React, { + ComponentType, + FunctionComponent, + HTMLAttributes, + Ref, +} from "react"; + +import { SvgIcon } from "coral-ui/components/icons"; import { withForwardRef, withStyles } from "coral-ui/hocs"; -import Icon, { IconProps } from "../Icon"; +import { IconProps } from "../Icon"; import styles from "./MessageIcon.css"; @@ -16,17 +22,18 @@ interface Props extends Omit, "color"> { size?: IconProps["size"]; - /** The name of the icon to render */ - children: string; + Icon: ComponentType; /** Internal: Forwarded Ref */ forwardRef?: Ref; } export const MessageIcon: FunctionComponent = (props) => { - const { classes, className, forwardRef, ...rest } = props; + const { classes, className, forwardRef, Icon, ...rest } = props; const rootClassName = cn(classes.root, className); - return ; + return ( + + ); }; MessageIcon.defaultProps = { diff --git a/src/core/client/ui/components/v2/Steps/Circle.tsx b/src/core/client/ui/components/v2/Steps/Circle.tsx index 9f41f8c78e..93fe43830f 100644 --- a/src/core/client/ui/components/v2/Steps/Circle.tsx +++ b/src/core/client/ui/components/v2/Steps/Circle.tsx @@ -1,7 +1,7 @@ import cn from "classnames"; import React, { FunctionComponent } from "react"; -import Icon from "../Icon"; +import { CheckIcon, SvgIcon } from "coral-ui/components/icons"; import styles from "./Circle.css"; @@ -17,7 +17,9 @@ const Circle: FunctionComponent = ({ active, completed }) => { }); return ( - {completed && done} + {completed && ( + + )} ); }; diff --git a/src/core/client/ui/components/v2/TextLink/TextLink.tsx b/src/core/client/ui/components/v2/TextLink/TextLink.tsx index d913e02653..7d138f899c 100644 --- a/src/core/client/ui/components/v2/TextLink/TextLink.tsx +++ b/src/core/client/ui/components/v2/TextLink/TextLink.tsx @@ -1,7 +1,7 @@ import cn from "classnames"; import React, { AnchorHTMLAttributes, FunctionComponent } from "react"; -import { Icon } from "coral-ui/components/v2"; +import { OpenInNewIcon, SvgIcon } from "coral-ui/components/icons"; import { withStyles } from "coral-ui/hocs"; import styles from "./TextLink.css"; @@ -26,9 +26,7 @@ const TextLinkProps: FunctionComponent = (props) => { > {children} {props.target === "_blank" && ( - - open_in_new - + )} ); diff --git a/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.tsx index 70cc894d18..21a77af08a 100644 --- a/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.tsx +++ b/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.tsx @@ -1,3 +1,4 @@ +import { AlertTriangleIcon } from "coral-ui/components/icons"; import React, { FunctionComponent, ReactNode } from "react"; import Message from "../Message"; @@ -30,7 +31,7 @@ const ValidationMessage: FunctionComponent = ( fullWidth={fullWidth} {...rest} > - warning + {children} ); diff --git a/src/core/client/ui/components/v3/ArchivedMarker/ArchivedMarker.css b/src/core/client/ui/components/v3/ArchivedMarker/ArchivedMarker.css index 2dd5fc5cca..0723aa783d 100644 --- a/src/core/client/ui/components/v3/ArchivedMarker/ArchivedMarker.css +++ b/src/core/client/ui/components/v3/ArchivedMarker/ArchivedMarker.css @@ -1,4 +1,4 @@ .icon { padding-right: var(--spacing-1); padding-bottom: var(--spacing-1); -} \ No newline at end of file +} diff --git a/src/core/client/ui/components/v3/ArchivedMarker/ArchivedMarker.tsx b/src/core/client/ui/components/v3/ArchivedMarker/ArchivedMarker.tsx index 525b84b15e..689c55b736 100644 --- a/src/core/client/ui/components/v3/ArchivedMarker/ArchivedMarker.tsx +++ b/src/core/client/ui/components/v3/ArchivedMarker/ArchivedMarker.tsx @@ -1,16 +1,15 @@ import { Localized } from "@fluent/react/compat"; import React, { FunctionComponent } from "react"; -import { Icon, Marker } from "coral-ui/components/v2"; +import { ArchiveIcon, SvgIcon } from "coral-ui/components/icons"; +import { Marker } from "coral-ui/components/v2"; import styles from "./ArchivedMarker.css"; const ArchivedMarker: FunctionComponent = () => { return ( - - archive - + Archived diff --git a/src/core/client/ui/components/v3/StarRating/StarRating.tsx b/src/core/client/ui/components/v3/StarRating/StarRating.tsx index d80653c758..1e7c0f5476 100644 --- a/src/core/client/ui/components/v3/StarRating/StarRating.tsx +++ b/src/core/client/ui/components/v3/StarRating/StarRating.tsx @@ -18,6 +18,7 @@ import CLASSES from "coral-stream/classes"; import StarRatingIcon from "./StarRatingIcon"; import styles from "./StarRating.css"; +import { StarHalfIcon, StarIcon } from "coral-ui/components/icons"; interface Props { className?: string; @@ -96,6 +97,7 @@ const StarRating: FunctionComponent = ({ const stars = useMemo(() => { const props = { readOnly, + name, onFocus: !readOnly ? onFocus : undefined, onBlur: !readOnly ? onBlur : undefined, @@ -104,19 +106,20 @@ const StarRating: FunctionComponent = ({ }; return STARS.map((star) => { + const starType = + rating >= star ? "full" : rating + 0.5 >= star ? "half" : "empty"; return ( = star - ? "star" - : rating + 0.5 >= star - ? "star_half" - : "star_border" + Icon={ + starType === "full" || starType === "empty" + ? StarIcon + : StarHalfIcon } + filled={starType === "full" || starType === "half"} value={star} {...props} /> diff --git a/src/core/client/ui/components/v3/StarRating/StarRatingIcon.tsx b/src/core/client/ui/components/v3/StarRating/StarRatingIcon.tsx index 6ecdc31c24..c3f49dc7a7 100644 --- a/src/core/client/ui/components/v3/StarRating/StarRatingIcon.tsx +++ b/src/core/client/ui/components/v3/StarRating/StarRatingIcon.tsx @@ -2,25 +2,25 @@ import { Localized } from "@fluent/react/compat"; import cn from "classnames"; import React, { ChangeEventHandler, + ComponentType, FocusEventHandler, FunctionComponent, MouseEventHandler, } from "react"; import CLASSES from "coral-stream/classes"; -import { Icon } from "coral-ui/components/v2"; +import { SvgIcon } from "coral-ui/components/icons"; import styles from "./StarRatingIcon.css"; -type Fill = "star" | "star_half" | "star_border"; - interface Props { id?: string; value: number; checked: boolean; - fill: Fill; + Icon: ComponentType; name?: string; readOnly?: boolean; + filled?: boolean; size?: "xl" | "lg"; onFocus?: FocusEventHandler; onBlur?: FocusEventHandler; @@ -31,9 +31,10 @@ interface Props { const StarRatingIcon: FunctionComponent = ({ id, value, - fill, readOnly = false, size = "lg", + Icon, + filled, ...props }) => { const container = ( @@ -42,18 +43,18 @@ const StarRatingIcon: FunctionComponent = ({ vars={{ value }} attrs={{ "aria-label": true }} > - - {fill} - + /> );