From 84903c1e5182124b1bb618b7d8754cb70d0a6647 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 23 Feb 2022 18:11:37 +0100 Subject: feat: improve Ackee tracking (#11) * build(deps): add use-ackee hook package * chore: create a context provider for Ackee The provider allows users to change the 'detailed' settings. * chore: add a select menu to choose which info to share with Ackee * chore: add a tooltip for askee settings * chore: replace default select styles with custom styles * chore: register user choice in localstorage * chore: replace Matomo with Ackee in legal notice --- .../Buttons/ButtonHelp/ButtonHelp.module.scss | 52 ++++++++++ src/components/Buttons/ButtonHelp/ButtonHelp.tsx | 41 ++++++++ src/components/Buttons/index.tsx | 3 +- src/components/Form/Label/Label.module.scss | 22 ++++ src/components/Form/Label/Label.tsx | 24 +++++ src/components/Form/Select/Select.module.scss | 23 +++++ src/components/Form/Select/Select.tsx | 56 +++++++++++ src/components/Form/index.tsx | 4 +- .../Settings/AckeeSelect/AckeeSelect.module.scss | 6 ++ .../Settings/AckeeSelect/AckeeSelect.tsx | 83 +++++++++++++++ src/components/Settings/Settings.tsx | 2 + src/components/Tooltip/Tooltip.module.scss | 111 +++++++++++++++++++++ src/components/Tooltip/Tooltip.tsx | 57 +++++++++++ 13 files changed, 482 insertions(+), 2 deletions(-) create mode 100644 src/components/Buttons/ButtonHelp/ButtonHelp.module.scss create mode 100644 src/components/Buttons/ButtonHelp/ButtonHelp.tsx create mode 100644 src/components/Form/Label/Label.module.scss create mode 100644 src/components/Form/Label/Label.tsx create mode 100644 src/components/Form/Select/Select.module.scss create mode 100644 src/components/Form/Select/Select.tsx create mode 100644 src/components/Settings/AckeeSelect/AckeeSelect.module.scss create mode 100644 src/components/Settings/AckeeSelect/AckeeSelect.tsx create mode 100644 src/components/Tooltip/Tooltip.module.scss create mode 100644 src/components/Tooltip/Tooltip.tsx (limited to 'src/components') diff --git a/src/components/Buttons/ButtonHelp/ButtonHelp.module.scss b/src/components/Buttons/ButtonHelp/ButtonHelp.module.scss new file mode 100644 index 0000000..b2a05d7 --- /dev/null +++ b/src/components/Buttons/ButtonHelp/ButtonHelp.module.scss @@ -0,0 +1,52 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.icon { + color: var(--color-primary-dark); + font-weight: 600; +} + +.active { + .icon { + color: var(--color-fg-inverted); + } +} + +.wrapper { + width: fun.convert-px(44); + height: fun.convert-px(44); + background: var(--color-bg); + border: fun.convert-px(3) solid var(--color-primary-dark); + border-radius: 50%; + box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow); + transition: all 0.3s ease-in-out 0s; + + @include mix.pointer("fine") { + width: fun.convert-px(30); + height: fun.convert-px(30); + line-height: 1; + } + + &:hover, + &:focus { + border-color: var(--color-primary-light); + color: var(--color-primary-light); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow-light), + fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3) + var(--color-shadow-light); + transform: scale(1.1); + + .icon { + transform: scale(1.1); + } + } + + &.active { + background: var(--color-primary); + } +} diff --git a/src/components/Buttons/ButtonHelp/ButtonHelp.tsx b/src/components/Buttons/ButtonHelp/ButtonHelp.tsx new file mode 100644 index 0000000..252e58c --- /dev/null +++ b/src/components/Buttons/ButtonHelp/ButtonHelp.tsx @@ -0,0 +1,41 @@ +import { SetStateAction } from 'react'; +import { useIntl } from 'react-intl'; +import styles from './ButtonHelp.module.scss'; + +const ButtonHelp = ({ + showHelp, + setShowHelp, + title, +}: { + showHelp: boolean; + setShowHelp: (value: SetStateAction) => void; + title?: string; +}) => { + const intl = useIntl(); + + const handleClick = () => { + setShowHelp((prev) => !prev); + }; + + const activeModifier = showHelp ? styles.active : ''; + + return ( + + ); +}; + +export default ButtonHelp; diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx index 5c034ad..9b4b756 100644 --- a/src/components/Buttons/index.tsx +++ b/src/components/Buttons/index.tsx @@ -2,5 +2,6 @@ import Button from './Button/Button'; import ButtonLink from './ButtonLink/ButtonLink'; import ButtonToolbar from './ButtonToolbar/ButtonToolbar'; import ButtonSubmit from './ButtonSubmit/ButtonSubmit'; +import ButtonHelp from './ButtonHelp/ButtonHelp'; -export { Button, ButtonLink, ButtonToolbar, ButtonSubmit }; +export { Button, ButtonHelp, ButtonLink, ButtonToolbar, ButtonSubmit }; diff --git a/src/components/Form/Label/Label.module.scss b/src/components/Form/Label/Label.module.scss new file mode 100644 index 0000000..c527b16 --- /dev/null +++ b/src/components/Form/Label/Label.module.scss @@ -0,0 +1,22 @@ +@use "@styles/abstracts/functions" as fun; + +.regular { + display: block; + color: var(--color-primary-darker); + font-size: var(--font-size-sm); + font-variant: small-caps; + font-weight: 600; +} + +.settings { + --icon-size: #{fun.convert-px(25)}; + --toggle-width: #{fun.convert-px(45)}; + --toggle-height: calc(var(--toggle-width) / 2); + + display: inline-flex; + align-items: center; +} + +.required { + color: var(--color-secondary); +} diff --git a/src/components/Form/Label/Label.tsx b/src/components/Form/Label/Label.tsx new file mode 100644 index 0000000..baedff0 --- /dev/null +++ b/src/components/Form/Label/Label.tsx @@ -0,0 +1,24 @@ +import styles from './Label.module.scss'; + +type LabelKind = 'regular' | 'settings'; + +const Label = ({ + body, + htmlFor, + required = false, + kind = 'regular', +}: { + body: string; + htmlFor: string; + required?: boolean; + kind?: LabelKind; +}) => { + return ( + + ); +}; + +export default Label; diff --git a/src/components/Form/Select/Select.module.scss b/src/components/Form/Select/Select.module.scss new file mode 100644 index 0000000..d4a40eb --- /dev/null +++ b/src/components/Form/Select/Select.module.scss @@ -0,0 +1,23 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + padding: fun.convert-px(3) var(--spacing-xs); + background: var(--color-bg-tertiary); + border: fun.convert-px(2) solid var(--color-border); + box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow); + cursor: pointer; + transition: all 0.3s ease-in-out 0s; + + &:hover { + box-shadow: fun.convert-px(4) fun.convert-px(4) 0 fun.convert-px(1) + var(--color-shadow); + transform: translate(#{fun.convert-px(-2)}, #{fun.convert-px(-2)}); + } + + &:focus { + background: var(--color-bg); + border-color: var(--color-primary); + box-shadow: 0 0 0 0 var(--color-shadow); + transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)}); + } +} diff --git a/src/components/Form/Select/Select.tsx b/src/components/Form/Select/Select.tsx new file mode 100644 index 0000000..feab991 --- /dev/null +++ b/src/components/Form/Select/Select.tsx @@ -0,0 +1,56 @@ +import { ChangeEvent, ReactElement, SetStateAction } from 'react'; +import styles from './Select.module.scss'; + +type SelectOptions = { + id: string; + name: string; + value: string; +}; + +const Select = ({ + options, + id, + name, + value, + setValue, + required = false, + label, +}: { + options: SelectOptions[]; + id: string; + name: string; + value: string; + setValue: (value: SetStateAction) => void; + required?: boolean; + label?: ReactElement; +}) => { + const getOptions = () => { + return options.map((option) => ( + + )); + }; + + const handleChange = (event: ChangeEvent) => { + setValue(event.target.value); + }; + + return ( + <> + {label} + + + ); +}; + +export default Select; diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx index 0908e9b..cbe1ec4 100644 --- a/src/components/Form/index.tsx +++ b/src/components/Form/index.tsx @@ -1,7 +1,9 @@ import Form from './Form'; import FormItem from './FormItem/FormItem'; import Input from './Input/Input'; +import Label from './Label/Label'; +import Select from './Select/Select'; import TextArea from './TextArea/TextArea'; import Toggle from './Toggle/Toggle'; -export { Form, FormItem, Input, TextArea, Toggle }; +export { Form, FormItem, Input, Label, Select, TextArea, Toggle }; diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.module.scss b/src/components/Settings/AckeeSelect/AckeeSelect.module.scss new file mode 100644 index 0000000..b145761 --- /dev/null +++ b/src/components/Settings/AckeeSelect/AckeeSelect.module.scss @@ -0,0 +1,6 @@ +.wrapper { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: var(--spacing-xs); +} diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.tsx b/src/components/Settings/AckeeSelect/AckeeSelect.tsx new file mode 100644 index 0000000..58fc994 --- /dev/null +++ b/src/components/Settings/AckeeSelect/AckeeSelect.tsx @@ -0,0 +1,83 @@ +import { Label, Select } from '@components/Form'; +import Tooltip from '@components/Tooltip/Tooltip'; +import { LocalStorage } from '@services/local-storage'; +import { useAckeeTracker } from '@utils/providers/ackee'; +import { useEffect, useState } from 'react'; +import { useIntl } from 'react-intl'; +import styles from './AckeeSelect.module.scss'; + +const AckeeSelect = () => { + const intl = useIntl(); + const options = [ + { + id: 'partial', + name: intl.formatMessage({ + defaultMessage: 'Partial', + description: 'AckeeSelect: partial option name', + }), + value: 'partial', + }, + { + id: 'full', + name: intl.formatMessage({ + defaultMessage: 'Full', + description: 'AckeeSelect: full option name', + }), + value: 'full', + }, + ]; + const [value, setValue] = useState('full'); + const { setDetailed } = useAckeeTracker(); + + useEffect(() => { + setDetailed(value === 'full'); + }, [setDetailed, value]); + + useEffect(() => { + const initialState = LocalStorage.get('ackee-tracking'); + if (initialState) setValue(initialState); + }, []); + + useEffect(() => { + LocalStorage.set('ackee-tracking', `${value}`); + }, [value]); + + const label = ( +