diff --git a/src/extensions/surveys.tsx b/src/extensions/surveys.tsx index c44fb5f6a..44b073bfa 100644 --- a/src/extensions/surveys.tsx +++ b/src/extensions/surveys.tsx @@ -12,11 +12,22 @@ import { } from '../posthog-surveys-types' import { window as _window, document as _document } from '../utils/globals' -import { style, getTextColor, defaultSurveyAppearance, sendSurveyEvent } from './surveys/surveys-utils' +import { style, defaultSurveyAppearance, sendSurveyEvent } from './surveys/surveys-utils' +import { useContrastingTextColor } from './surveys/hooks/useContrastingTextColor' import * as Preact from 'preact' import { createWidgetShadow } from './surveys-widget' import { useState, useEffect, useRef } from 'preact/hooks' import { _isArray, _isNull, _isNumber } from '../utils/type-utils' +import { BottomSection } from './surveys/components/BottomSection' +import { + cancelSVG, + checkSVG, + dissatisfiedEmoji, + neutralEmoji, + satisfiedEmoji, + veryDissatisfiedEmoji, + verySatisfiedEmoji, +} from './surveys/icons' // We cast the types here which is dangerous but protected by the top level generateSurveys call const window = _window as Window & typeof globalThis @@ -148,47 +159,6 @@ export function Cancel({ onClick }: { onClick: () => void }) { ) } -export function BottomSection({ - text, - submitDisabled, - appearance, - onSubmit, - link, -}: { - text: string - submitDisabled: boolean - appearance: SurveyAppearance - onSubmit: () => void - link?: string | null -}) { - const { textColor, ref } = useContrastingTextColor({ appearance }) - - return ( -
-
- -
- {!appearance.whiteLabel && ( - - )} -
- ) -} - export function PostHogLogo({ backgroundColor }: { backgroundColor?: string }) { const { textColor, ref } = useContrastingTextColor({ appearance: { backgroundColor } }) @@ -766,119 +736,6 @@ const questionTypeMap = ( return mapping[question.type] } -export function useContrastingTextColor(options: { appearance: SurveyAppearance; defaultTextColor?: string }): { - ref: Preact.RefObject - textColor: string -} { - const ref = useRef(null) - const [textColor, setTextColor] = useState(options.defaultTextColor ?? 'white') - - // TODO: useContext to get the background colors instead of querying the DOM - useEffect(() => { - if (ref.current) { - const color = getTextColor(ref.current) - setTextColor(color) - } - }, [options.appearance]) - - return { - ref, - textColor, - } -} - -export const satisfiedEmoji = ( - - - -) -export const neutralEmoji = ( - - - -) -export const dissatisfiedEmoji = ( - - - -) -export const veryDissatisfiedEmoji = ( - - - -) -export const verySatisfiedEmoji = ( - - - -) -export const cancelSVG = ( - - - -) -export const posthogLogo = ( - - - - - - - - - - - - - - - - - - - - -) -export const checkSVG = ( - - - -) - const threeScaleEmojis = [dissatisfiedEmoji, neutralEmoji, dissatisfiedEmoji] const fiveScaleEmojis = [veryDissatisfiedEmoji, dissatisfiedEmoji, neutralEmoji, satisfiedEmoji, verySatisfiedEmoji] const fiveScaleNumbers = [1, 2, 3, 4, 5] diff --git a/src/extensions/surveys/components/BottomSection.tsx b/src/extensions/surveys/components/BottomSection.tsx new file mode 100644 index 000000000..82eb73852 --- /dev/null +++ b/src/extensions/surveys/components/BottomSection.tsx @@ -0,0 +1,46 @@ +import * as Preact from 'preact' +import { window } from '../../../utils/globals' + +import { SurveyAppearance } from '../../../posthog-surveys-types' + +import { useContrastingTextColor } from '../hooks/useContrastingTextColor' +import { PostHogLogo } from './PostHogLogo' + +export function BottomSection({ + text, + submitDisabled, + appearance, + onSubmit, + link, +}: { + text: string + submitDisabled: boolean + appearance: SurveyAppearance + onSubmit: () => void + link?: string | null +}) { + const { textColor, ref } = useContrastingTextColor({ appearance }) + + return ( +
+
+ +
+ {!appearance.whiteLabel && } +
+ ) +} diff --git a/src/extensions/surveys/components/PostHogLogo.tsx b/src/extensions/surveys/components/PostHogLogo.tsx new file mode 100644 index 000000000..ce73124ce --- /dev/null +++ b/src/extensions/surveys/components/PostHogLogo.tsx @@ -0,0 +1,20 @@ +import { useContrastingTextColor } from '../hooks/useContrastingTextColor' +import * as Preact from 'preact' +import { IconPosthogLogo } from '../icons' + +export function PostHogLogo({ backgroundColor }: { backgroundColor?: string }) { + const { textColor, ref } = useContrastingTextColor({ appearance: { backgroundColor } }) + + return ( + } + style={{ backgroundColor: backgroundColor, color: textColor }} + className="footer-branding" + > + Survey by {IconPosthogLogo} + + ) +} diff --git a/src/extensions/surveys/hooks/useContrastingTextColor.ts b/src/extensions/surveys/hooks/useContrastingTextColor.ts new file mode 100644 index 000000000..3b27e5ead --- /dev/null +++ b/src/extensions/surveys/hooks/useContrastingTextColor.ts @@ -0,0 +1,25 @@ +import { useEffect, useRef, useState } from 'preact/hooks' +import { SurveyAppearance } from '../../../posthog-surveys-types' +import * as Preact from 'preact' +import { getTextColor } from '../surveys-utils' + +export function useContrastingTextColor(options: { appearance: SurveyAppearance; defaultTextColor?: string }): { + ref: Preact.RefObject + textColor: string +} { + const ref = useRef(null) + const [textColor, setTextColor] = useState(options.defaultTextColor ?? 'white') + + // TODO: useContext to get the background colors instead of querying the DOM + useEffect(() => { + if (ref.current) { + const color = getTextColor(ref.current) + setTextColor(color) + } + }, [options.appearance]) + + return { + ref, + textColor, + } +} diff --git a/src/extensions/surveys/icons.tsx b/src/extensions/surveys/icons.tsx new file mode 100644 index 000000000..b294e6246 --- /dev/null +++ b/src/extensions/surveys/icons.tsx @@ -0,0 +1,91 @@ +export const satisfiedEmoji = ( + + + +) +export const neutralEmoji = ( + + + +) +export const dissatisfiedEmoji = ( + + + +) +export const veryDissatisfiedEmoji = ( + + + +) +export const verySatisfiedEmoji = ( + + + +) +export const cancelSVG = ( + + + +) +export const IconPosthogLogo = ( + + + + + + + + + + + + + + + + + + + + +) +export const checkSVG = ( + + + +) diff --git a/tsconfig.json b/tsconfig.json index 8c211704e..243e5ee0d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,5 +24,6 @@ "jsxFactory": "h", "jsxFragmentFactory": "Fragment" }, - "include": ["src/*.ts*"] + "include": ["src/*.ts*"], + "exclude": ["src/__tests__/**/*.ts*"] }