diff --git a/src/assets/icons/gear-fill.svg b/src/assets/icons/gear-fill.svg new file mode 100644 index 00000000..d62099f4 --- /dev/null +++ b/src/assets/icons/gear-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/stories/profile-modal/_types.tsx b/src/stories/profile-modal/_types.tsx index e6750c4f..57c876f8 100644 --- a/src/stories/profile-modal/_types.tsx +++ b/src/stories/profile-modal/_types.tsx @@ -1,4 +1,4 @@ -import { LiHTMLAttributes } from "react"; +import { InputHTMLAttributes, LiHTMLAttributes } from "react"; import { NextItemArgs } from "../dropdowns/menu/_types"; import { ModalArgs } from "../modals/_types"; @@ -50,4 +50,20 @@ export interface UserMenuArgs extends LiHTMLAttributes { onLogout: () => void; onCopyEmail?: () => void; chatSupport?: boolean; + settingValue?: number; + i18n?: { + settingsTitle?: string; + settingsIntroText?: string; + settingsOutroText?: { + paragraph_1: string; + paragraph_2?: string; + paragraph_3?: string; + }; + settingsToggle?: { + title: string; + on: string; + off: string; + }; + }; + onSetSettings: (value: number) => void; } diff --git a/src/stories/profile-modal/UserContainer.tsx b/src/stories/profile-modal/components/UserContainer.tsx similarity index 82% rename from src/stories/profile-modal/UserContainer.tsx rename to src/stories/profile-modal/components/UserContainer.tsx index fc01a8b1..6d2aac95 100644 --- a/src/stories/profile-modal/UserContainer.tsx +++ b/src/stories/profile-modal/components/UserContainer.tsx @@ -1,10 +1,10 @@ import styled from "styled-components"; -import { Avatar } from "../avatar"; -import { theme } from "../theme"; -import { flexColumnCenter } from "../theme/mixins"; -import { MD, SM } from "../typography/typescale"; -import { getInitials } from "./utils"; -import { UserProfileProps } from "./_types"; +import { Avatar } from "../../avatar"; +import { theme } from "../../theme"; +import { flexColumnCenter } from "../../theme/mixins"; +import { MD, SM } from "../../typography/typescale"; +import { getInitials } from "../utils"; +import { UserProfileProps } from "../_types"; import { retrieveComponentStyles } from "@zendeskgarden/react-theming"; const ProfileContainer = styled.div` diff --git a/src/stories/profile-modal/menuItem.tsx b/src/stories/profile-modal/components/menuItem.tsx similarity index 92% rename from src/stories/profile-modal/menuItem.tsx rename to src/stories/profile-modal/components/menuItem.tsx index 21a3f9f4..1a5c1b8e 100644 --- a/src/stories/profile-modal/menuItem.tsx +++ b/src/stories/profile-modal/components/menuItem.tsx @@ -1,10 +1,10 @@ import styled from "styled-components"; import { MenuItemIcon, StyledMenuItemIcon } from "./menuItemIcon"; -import { flexCenter, flexStart } from "../theme/mixins"; +import { flexCenter, flexStart } from "../../theme/mixins"; -import { theme } from "../theme"; -import { MenuItemProps } from "./_types"; -import { getColor } from "../theme/utils"; +import { theme } from "../../theme"; +import { MenuItemProps } from "../_types"; +import { getColor } from "../../theme/utils"; export interface IStyledItemProps { isFocused?: boolean; diff --git a/src/stories/profile-modal/menuItemIcon.tsx b/src/stories/profile-modal/components/menuItemIcon.tsx similarity index 84% rename from src/stories/profile-modal/menuItemIcon.tsx rename to src/stories/profile-modal/components/menuItemIcon.tsx index ce34a6b6..8c805e82 100644 --- a/src/stories/profile-modal/menuItemIcon.tsx +++ b/src/stories/profile-modal/components/menuItemIcon.tsx @@ -1,7 +1,7 @@ import styled from "styled-components"; -import { theme } from "../theme"; +import { theme } from "../../theme"; -import { ReactComponent as ChevronIcon } from "../../assets/icons/chevron-right-stroke.svg"; +import { ReactComponent as ChevronIcon } from "../../../assets/icons/chevron-right-stroke.svg"; interface IStyledItemIconProps { isCompact?: boolean; diff --git a/src/stories/profile-modal/previousMenuButton.tsx b/src/stories/profile-modal/components/previousMenuButton.tsx similarity index 70% rename from src/stories/profile-modal/previousMenuButton.tsx rename to src/stories/profile-modal/components/previousMenuButton.tsx index 2d1a1922..a0264ec7 100644 --- a/src/stories/profile-modal/previousMenuButton.tsx +++ b/src/stories/profile-modal/components/previousMenuButton.tsx @@ -1,7 +1,7 @@ -import { ReactComponent as ChevronIcon } from "../../assets/icons/chevron-left-stroke.svg"; -import { Button } from "../buttons/button"; +import { ReactComponent as ChevronIcon } from "../../../assets/icons/chevron-left-stroke.svg"; +import { Button } from "../../buttons/button"; import styled from "styled-components"; -import { ButtonArgs } from "../buttons/button/_types"; +import { ButtonArgs } from "../../buttons/button/_types"; const StyledButton = styled(Button)` color: ${(props) => props.theme.palette.grey[800]}; diff --git a/src/stories/profile-modal/index.stories.tsx b/src/stories/profile-modal/index.stories.tsx index eb870cef..7328054b 100644 --- a/src/stories/profile-modal/index.stories.tsx +++ b/src/stories/profile-modal/index.stories.tsx @@ -3,9 +3,9 @@ import { ComponentMeta, Story } from "@storybook/react"; import { Col } from "../grid/col"; import { Row } from "../grid/row"; -import { ProfileModalArgs, UserMenuArgs } from "./_types"; import { ProfileModal } from "."; -import { ToastProvider, useToast, Notification } from "../notifications"; +import { Notification, ToastProvider, useToast } from "../notifications"; +import { ProfileModalArgs, UserMenuArgs } from "./_types"; const languages = { en: { @@ -28,12 +28,8 @@ const csm = { // picture: "https://placeimg.com/300/300/animal", }; -const ProfileModalComponent = ({ - menuArgs, - ...args -}: ProfileModalArgs) => { +const ProfileModalComponent = ({ menuArgs, ...args }: ProfileModalArgs) => { const { addToast } = useToast(); - return ( { alert("Copied to clipboard!"); }, + i18n: { + settingsTitle: "Notifications settings", + settingsIntroText: "Manage the notifications we send you by email.", + settingsOutroText: { + paragraph_1: "By turning on notifications, you will be updated on:", + paragraph_2: + "a comment, a campaign starting, a campaign ending, a mention and an invitation", + paragraph_3: + "By turning off notifications, you will be only updated on mentions and invitations.", + }, + settingsToggle: { + title: "Allow notifications", + on: "Yes", + off: "No", + }, + }, + settingValue: 0, + onSetSettings: (value: number) => { + alert(value === 1 ? "Notifications enabled" : "Notifications disabled"); + }, }; export const Default = Template.bind({}); diff --git a/src/stories/profile-modal/helpMenuItem.tsx b/src/stories/profile-modal/items/helpMenuItem.tsx similarity index 82% rename from src/stories/profile-modal/helpMenuItem.tsx rename to src/stories/profile-modal/items/helpMenuItem.tsx index 4b3bdc5b..e9ce6022 100644 --- a/src/stories/profile-modal/helpMenuItem.tsx +++ b/src/stories/profile-modal/items/helpMenuItem.tsx @@ -1,20 +1,20 @@ -import { MenuItem } from "./menuItem"; -import { ReactComponent as QuestionMark } from "../../assets/icons/question-mark.svg"; -import { ReactComponent as CopyIcon } from "../../assets/icons/copy.svg"; -import { ReactComponent as InfoFill } from "../../assets/icons/info-fill.svg"; -import { PreviousButton } from "./previousMenuButton"; -import { Separator } from "../dropdowns/menu"; -import { Paragraph } from "../typography/paragraph"; -import { MD, SM } from "../typography/typescale"; -import { Avatar } from "../avatar"; +import { MenuItem } from "../components/menuItem"; +import { ReactComponent as QuestionMark } from "../../../assets/icons/question-mark.svg"; +import { ReactComponent as CopyIcon } from "../../../assets/icons/copy.svg"; +import { ReactComponent as InfoFill } from "../../../assets/icons/info-fill.svg"; +import { PreviousButton } from "../components/previousMenuButton"; +import { Separator } from "../../dropdowns/menu"; +import { Paragraph } from "../../typography/paragraph"; +import { MD, SM } from "../../typography/typescale"; +import { Avatar } from "../../avatar"; import styled from "styled-components"; -import { theme } from "../theme"; -import { flexCenter } from "../theme/mixins"; -import { Button } from "../buttons/button"; -import { Anchor } from "../buttons/anchor"; -import { MenuItemProps } from "./_types"; -import { getInitials } from "./utils"; -import { getColor } from "../theme/utils"; +import { theme } from "../../theme"; +import { flexCenter } from "../../theme/mixins"; +import { Button } from "../../buttons/button"; +import { Anchor } from "../../buttons/anchor"; +import { MenuItemProps } from "../_types"; +import { getInitials } from "../utils"; +import { getColor } from "../../theme/utils"; interface HelpItemProps extends MenuItemProps { title: string; diff --git a/src/stories/profile-modal/languageMenuItem.tsx b/src/stories/profile-modal/items/languageMenuItem.tsx similarity index 72% rename from src/stories/profile-modal/languageMenuItem.tsx rename to src/stories/profile-modal/items/languageMenuItem.tsx index cb2002b7..f5d2a453 100644 --- a/src/stories/profile-modal/languageMenuItem.tsx +++ b/src/stories/profile-modal/items/languageMenuItem.tsx @@ -1,17 +1,17 @@ -import { MenuItem, MenuItemBody } from "./menuItem"; +import { MenuItem, MenuItemBody } from "../components/menuItem"; -import { ReactComponent as CheckIcon } from "../../assets/icons/check-lg.svg"; -import { ReactComponent as EmptyIcon } from "../../assets/icons/empty.svg"; -import { ReactComponent as TranslationIcon } from "../../assets/icons/translation-exists.svg"; -import { PreviousButton } from "./previousMenuButton"; -import { Separator } from "../dropdowns/menu"; -import { MD } from "../typography/typescale"; +import { ReactComponent as CheckIcon } from "../../../assets/icons/check-lg.svg"; +import { ReactComponent as EmptyIcon } from "../../../assets/icons/empty.svg"; +import { ReactComponent as TranslationIcon } from "../../../assets/icons/translation-exists.svg"; +import { PreviousButton } from "../components/previousMenuButton"; +import { Separator } from "../../dropdowns/menu"; +import { MD } from "../../typography/typescale"; import styled from "styled-components"; -import { theme } from "../theme"; -import { flexStart } from "../theme/mixins"; -import { Button } from "../buttons/button"; -import { Language, MenuItemProps } from "./_types"; -import { Span } from "../typography/span"; +import { theme } from "../../theme"; +import { flexStart } from "../../theme/mixins"; +import { Button } from "../../buttons/button"; +import { Language, MenuItemProps } from "../_types"; +import { Span } from "../../typography/span"; interface LanguagesProps extends MenuItemProps { title: string; diff --git a/src/stories/profile-modal/items/settingsMenuItem.tsx b/src/stories/profile-modal/items/settingsMenuItem.tsx new file mode 100644 index 00000000..4aee235a --- /dev/null +++ b/src/stories/profile-modal/items/settingsMenuItem.tsx @@ -0,0 +1,118 @@ +import { Paragraph } from "@zendeskgarden/react-notifications"; +import { MenuItemProps } from "../_types"; +import { PreviousButton } from "../components/previousMenuButton"; +import { ReactComponent as GearIcon } from "../../../assets/icons/gear-fill.svg"; +import styled from "styled-components"; +import { Separator } from "../../dropdowns/menu"; +import { Toggle } from "../../forms/toggle"; +import { MenuItem } from "../components/menuItem"; +import { theme } from "../../theme"; +import { Field } from "../../forms/field"; +import { Label } from "../../label"; +import { useState } from "react"; +import { MD, SM } from "../../typography/typescale"; + +interface SettingsProps extends MenuItemProps { + settingValue?: number; + + onSetSettings?: (value: number) => void; + i18n?: { + settingsTitle?: string; + settingsIntroText?: string; + settingsOutroText?: { + paragraph_1?: string; + paragraph_2?: string; + paragraph_3?: string; + }; + settingsToggle?: { + title: string; + on: string; + off: string; + }; + }; +} + +const StyledBody = styled.div` + margin: ${({ theme }) => theme.space.base * 6}px + ${({ theme }) => theme.space.base * 4}px; +`; + +const TriggerTitle = styled(MD)` + color: ${({ theme }) => theme.palette.blue[700]}; + margin-bottom: ${({ theme }) => theme.space.xs}; +`; + +const SettingsIntroText = styled(Paragraph)` + margin-bottom: ${({ theme }) => theme.space.md}; +`; + +const SettingsOutroText = styled(Paragraph)` + display: flex; + flex-direction: column; + margin-top: ${({ theme }) => theme.space.md}; +`; + +export const SettingsItem = (props: SettingsProps) => { + const [value, setValue] = useState(props.settingValue || 0); + + const onToggleSettings = (value: number) => { + setValue(value); + props.onSetSettings && props.onSetSettings(value); + }; + + const content = ( + <> + props.setActive("")} isBasic> + {props.i18n?.settingsTitle ?? "Notifications Settings"} + + + + {props.i18n && props.i18n.settingsIntroText && ( + + {props.i18n.settingsIntroText} + + )} + + + {props.i18n?.settingsToggle?.title ?? "Allow notifications"} + + onToggleSettings(value === 1 ? 0 : 1)} + > + + + + {props.i18n && props.i18n.settingsOutroText && ( + <> + + {props.i18n.settingsOutroText.paragraph_1} + {props.i18n.settingsOutroText.paragraph_2} + + + {props.i18n.settingsOutroText.paragraph_3} + + + )} + + + ); + + return ( + <> + } + > + {props.title} + + + ); +}; diff --git a/src/stories/profile-modal/userMenu.tsx b/src/stories/profile-modal/userMenu.tsx index 13a4e8b6..6fd8c1c9 100644 --- a/src/stories/profile-modal/userMenu.tsx +++ b/src/stories/profile-modal/userMenu.tsx @@ -3,14 +3,15 @@ import { UserMenuArgs } from "./_types"; import { ReactComponent as ExitIcon } from "../../assets/icons/exit.svg"; import { ReactComponent as ThumbsUp } from "../../assets/icons/thumbs-up.svg"; import { ReactComponent as LockIcon } from "../../assets/icons/lock-locked-fill.svg"; -import { MenuItem, MenuItemBody } from "./menuItem"; +import { MenuItem, MenuItemBody } from "./components/menuItem"; import styled from "styled-components"; -import { HelpItem } from "./helpMenuItem"; -import { LanguageItem } from "./languageMenuItem"; +import { HelpItem } from "./items/helpMenuItem"; +import { LanguageItem } from "./items/languageMenuItem"; import { theme } from "../theme"; import { Separator } from "../dropdowns/menu"; import { MD } from "../typography/typescale"; -import { UserContainer } from "./UserContainer"; +import { UserContainer } from "./components/UserContainer"; +import { SettingsItem } from "./items/settingsMenuItem"; const StyledList = styled.ul` padding: 0; @@ -61,6 +62,19 @@ export const UserMenu = (props: UserMenuArgs) => { onCopyEmail={props?.onCopyEmail} chatSupport={props?.chatSupport} /> + toggleItem(i)} + title={props.i18n?.settingsTitle || "Notifications Settings"} + settingValue={props.settingValue} + i18n={{ + settingsIntroText: props.i18n?.settingsIntroText, + settingsOutroText: props.i18n?.settingsOutroText, + settingsToggle: props.i18n?.settingsToggle, + }} + onSetSettings={props.onSetSettings} + />