@oanda/labs-widget-common 1.0.246 → 1.0.248
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1956 -0
- package/dist/main/components/Disclaimer/Disclaimer.js +5 -1
- package/dist/main/components/Disclaimer/Disclaimer.js.map +1 -1
- package/dist/module/components/Disclaimer/Disclaimer.js +6 -2
- package/dist/module/components/Disclaimer/Disclaimer.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Disclaimer/Disclaimer.tsx +4 -1
|
@@ -25,6 +25,10 @@ const Disclaimer = _ref => {
|
|
|
25
25
|
theme
|
|
26
26
|
} = (0, _providers.useLayoutProvider)();
|
|
27
27
|
const isDark = theme === _types.Theme.Dark;
|
|
28
|
+
const {
|
|
29
|
+
size
|
|
30
|
+
} = (0, _providers.useLayoutProvider)();
|
|
31
|
+
const isDesktop = size === _types.Size.DESKTOP;
|
|
28
32
|
const [isLogoHovered, setIsLogoHovered] = (0, _react.useState)(false);
|
|
29
33
|
const [isInfoHovered, setIsInfoHovered] = (0, _react.useState)(false);
|
|
30
34
|
if (!logoLink && !text) {
|
|
@@ -37,7 +41,7 @@ const Disclaimer = _ref => {
|
|
|
37
41
|
role: "presentation",
|
|
38
42
|
onClick: () => isClickable && window.open(logoLink, '_blank')
|
|
39
43
|
}, children, text && _react.default.createElement("div", {
|
|
40
|
-
className: (0, _tailwind.cn)('lw-absolute lw-right-0 lw-top-0 lw-z-30 lw-flex lw-h-full lw-items-center lw-bg-border-primary lw-bg-opacity-90 lw-p-3 lw-text-sm lw-text-text-primary lw-delay-150 lw-duration-150 lw-ease-in-out', isInfoHovered && 'lw-opacity-100', !isInfoHovered && 'lw-opacity-0 lw-pointer-events-none'),
|
|
44
|
+
className: (0, _tailwind.cn)('lw-absolute lw-right-0 lw-top-0 lw-z-30 lw-flex lw-h-full lw-items-center lw-bg-border-primary lw-bg-opacity-90 lw-p-3 lw-text-sm lw-text-text-primary lw-delay-150 lw-duration-150 lw-ease-in-out', !isDesktop && 'lw-leading-[14px] lw-text-[11px] lw-p-[4px]', isInfoHovered && 'lw-opacity-100', !isInfoHovered && 'lw-opacity-0 lw-pointer-events-none'),
|
|
41
45
|
onBlur: () => setIsInfoHovered(false),
|
|
42
46
|
onMouseOut: () => setIsInfoHovered(false)
|
|
43
47
|
}, text), _react.default.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Disclaimer.js","names":["_react","_interopRequireWildcard","require","_images","_providers","_tailwind","_types","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Disclaimer","_ref","children","logoLink","brandingSpace","fitContent","linkArea","text","isSlim","infoButtonPosition","theme","useLayoutProvider","isDark","Theme","Dark","isLogoHovered","setIsLogoHovered","useState","isInfoHovered","setIsInfoHovered","isClickable","createElement","className","cn","role","onClick","window","open","onBlur","onMouseOut","onFocus","onMouseOver","stopPropagation","OandaLogoDark","OandaLogoLight","exports"],"sources":["../../../../src/components/Disclaimer/Disclaimer.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport React, { useState } from 'react';\n\nimport { OandaLogoDark, OandaLogoLight } from '../../images';\nimport { useLayoutProvider } from '../../providers';\nimport { cn } from '../../tailwind';\nimport type { RenderComponentParams } from '../../types';\nimport { Theme } from '../../types';\n\ntype DisclaimerProps = PropsWithChildren &\n Omit<RenderComponentParams, 'Component'> & {\n text?: string;\n isSlim?: boolean;\n infoButtonPosition?: 'left' | 'top';\n };\n\nexport const Disclaimer: FC<DisclaimerProps> = ({\n children,\n logoLink,\n brandingSpace,\n fitContent = false,\n linkArea = 'full',\n text,\n isSlim,\n infoButtonPosition = 'top',\n}) => {\n const { theme } = useLayoutProvider();\n const isDark = theme === Theme.Dark;\n\n const [isLogoHovered, setIsLogoHovered] = useState(false);\n const [isInfoHovered, setIsInfoHovered] = useState(false);\n\n if (!logoLink && !text) {\n return children;\n }\n\n const isClickable = linkArea === 'full';\n\n return (\n <div\n className={cn(\n 'lw-relative lw-overflow-hidden',\n isClickable && 'lw-cursor-pointer',\n brandingSpace && brandingSpace === 'vertical' ? 'lw-pb-12' : 'lw-pb-0',\n !!fitContent && 'lw-w-fit'\n )}\n data-testid=\"disclaimer-wrapper\"\n role=\"presentation\"\n onClick={() => isClickable && window.open(logoLink, '_blank')}\n >\n {children}\n {text && (\n <div\n className={cn(\n 'lw-absolute lw-right-0 lw-top-0 lw-z-30 lw-flex lw-h-full lw-items-center lw-bg-border-primary lw-bg-opacity-90 lw-p-3 lw-text-sm lw-text-text-primary lw-delay-150 lw-duration-150 lw-ease-in-out',\n isInfoHovered && 'lw-opacity-100',\n !isInfoHovered && 'lw-opacity-0 lw-pointer-events-none'\n )}\n onBlur={() => setIsInfoHovered(false)}\n onMouseOut={() => setIsInfoHovered(false)}\n >\n {text}\n </div>\n )}\n <div\n className={cn(\n 'lw-absolute lw-bottom-3 lw-right-0 lw-z-20 lw-flex lw-transition lw-delay-100 lw-duration-300 lw-ease-in-out',\n logoLink &&\n !isLogoHovered &&\n infoButtonPosition === 'left' &&\n 'lw-translate-x-[55px]',\n isSlim && 'lw-bottom-[6px]',\n !isSlim && 'lw-bottom-2',\n infoButtonPosition === 'left' && 'lw-flex-row lw-items-center',\n infoButtonPosition === 'top' && 'lw-flex-col lw-items-end'\n )}\n >\n {text && (\n <div\n className={cn(\n 'lw-flex lw-h-[20px] lw-w-[20px] lw-items-center lw-justify-center lw-rounded-full lw-border lw-border-border-primary lw-pb-0.5 lw-text-sm lw-font-bold lw-text-text-secondary lw-shadow-basic',\n isDark && 'lw-bg-dark-blue',\n !isDark && 'lw-bg-bg-primary',\n infoButtonPosition === 'top' && 'lw-mr-1',\n infoButtonPosition === 'top' && !!logoLink && 'lw-mb-3',\n infoButtonPosition === 'left' && 'lw-mr-2 '\n )}\n onFocus={() => setIsInfoHovered(true)}\n onMouseOver={() => setIsInfoHovered(true)}\n >\n i\n </div>\n )}\n {logoLink && (\n <div\n className={cn(\n 'lw-cursor-pointer lw-rounded-l-full lw-bg-bg-primary lw-shadow-basic',\n infoButtonPosition === 'top' &&\n 'lw-transition lw-delay-100 lw-duration-300 lw-ease-in-out',\n !isLogoHovered &&\n infoButtonPosition === 'top' &&\n 'lw-translate-x-[55px]'\n )}\n data-testid=\"disclaimer-wrapper-logo\"\n role=\"presentation\"\n onBlur={() => setIsLogoHovered(false)}\n onClick={(e) => {\n e.stopPropagation();\n window.open(logoLink, '_blank');\n }}\n onFocus={() => setIsLogoHovered(true)}\n onMouseOut={() => setIsLogoHovered(false)}\n onMouseOver={() => setIsLogoHovered(true)}\n >\n {isDark ? (\n <OandaLogoDark data-testid=\"disclaimer-wrapper-logo-dark\" />\n ) : (\n <OandaLogoLight data-testid=\"disclaimer-wrapper-logo-light\" />\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;
|
|
1
|
+
{"version":3,"file":"Disclaimer.js","names":["_react","_interopRequireWildcard","require","_images","_providers","_tailwind","_types","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Disclaimer","_ref","children","logoLink","brandingSpace","fitContent","linkArea","text","isSlim","infoButtonPosition","theme","useLayoutProvider","isDark","Theme","Dark","size","isDesktop","Size","DESKTOP","isLogoHovered","setIsLogoHovered","useState","isInfoHovered","setIsInfoHovered","isClickable","createElement","className","cn","role","onClick","window","open","onBlur","onMouseOut","onFocus","onMouseOver","stopPropagation","OandaLogoDark","OandaLogoLight","exports"],"sources":["../../../../src/components/Disclaimer/Disclaimer.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport React, { useState } from 'react';\n\nimport { OandaLogoDark, OandaLogoLight } from '../../images';\nimport { useLayoutProvider } from '../../providers';\nimport { cn } from '../../tailwind';\nimport type { RenderComponentParams } from '../../types';\nimport { Size, Theme } from '../../types';\n\ntype DisclaimerProps = PropsWithChildren &\n Omit<RenderComponentParams, 'Component'> & {\n text?: string;\n isSlim?: boolean;\n infoButtonPosition?: 'left' | 'top';\n };\n\nexport const Disclaimer: FC<DisclaimerProps> = ({\n children,\n logoLink,\n brandingSpace,\n fitContent = false,\n linkArea = 'full',\n text,\n isSlim,\n infoButtonPosition = 'top',\n}) => {\n const { theme } = useLayoutProvider();\n const isDark = theme === Theme.Dark;\n const { size } = useLayoutProvider();\n const isDesktop = size === Size.DESKTOP;\n\n const [isLogoHovered, setIsLogoHovered] = useState(false);\n const [isInfoHovered, setIsInfoHovered] = useState(false);\n\n if (!logoLink && !text) {\n return children;\n }\n\n const isClickable = linkArea === 'full';\n\n return (\n <div\n className={cn(\n 'lw-relative lw-overflow-hidden',\n isClickable && 'lw-cursor-pointer',\n brandingSpace && brandingSpace === 'vertical' ? 'lw-pb-12' : 'lw-pb-0',\n !!fitContent && 'lw-w-fit'\n )}\n data-testid=\"disclaimer-wrapper\"\n role=\"presentation\"\n onClick={() => isClickable && window.open(logoLink, '_blank')}\n >\n {children}\n {text && (\n <div\n className={cn(\n 'lw-absolute lw-right-0 lw-top-0 lw-z-30 lw-flex lw-h-full lw-items-center lw-bg-border-primary lw-bg-opacity-90 lw-p-3 lw-text-sm lw-text-text-primary lw-delay-150 lw-duration-150 lw-ease-in-out',\n !isDesktop && 'lw-leading-[14px] lw-text-[11px] lw-p-[4px]',\n isInfoHovered && 'lw-opacity-100',\n !isInfoHovered && 'lw-opacity-0 lw-pointer-events-none'\n )}\n onBlur={() => setIsInfoHovered(false)}\n onMouseOut={() => setIsInfoHovered(false)}\n >\n {text}\n </div>\n )}\n <div\n className={cn(\n 'lw-absolute lw-bottom-3 lw-right-0 lw-z-20 lw-flex lw-transition lw-delay-100 lw-duration-300 lw-ease-in-out',\n logoLink &&\n !isLogoHovered &&\n infoButtonPosition === 'left' &&\n 'lw-translate-x-[55px]',\n isSlim && 'lw-bottom-[6px]',\n !isSlim && 'lw-bottom-2',\n infoButtonPosition === 'left' && 'lw-flex-row lw-items-center',\n infoButtonPosition === 'top' && 'lw-flex-col lw-items-end'\n )}\n >\n {text && (\n <div\n className={cn(\n 'lw-flex lw-h-[20px] lw-w-[20px] lw-items-center lw-justify-center lw-rounded-full lw-border lw-border-border-primary lw-pb-0.5 lw-text-sm lw-font-bold lw-text-text-secondary lw-shadow-basic',\n isDark && 'lw-bg-dark-blue',\n !isDark && 'lw-bg-bg-primary',\n infoButtonPosition === 'top' && 'lw-mr-1',\n infoButtonPosition === 'top' && !!logoLink && 'lw-mb-3',\n infoButtonPosition === 'left' && 'lw-mr-2 '\n )}\n onFocus={() => setIsInfoHovered(true)}\n onMouseOver={() => setIsInfoHovered(true)}\n >\n i\n </div>\n )}\n {logoLink && (\n <div\n className={cn(\n 'lw-cursor-pointer lw-rounded-l-full lw-bg-bg-primary lw-shadow-basic',\n infoButtonPosition === 'top' &&\n 'lw-transition lw-delay-100 lw-duration-300 lw-ease-in-out',\n !isLogoHovered &&\n infoButtonPosition === 'top' &&\n 'lw-translate-x-[55px]'\n )}\n data-testid=\"disclaimer-wrapper-logo\"\n role=\"presentation\"\n onBlur={() => setIsLogoHovered(false)}\n onClick={(e) => {\n e.stopPropagation();\n window.open(logoLink, '_blank');\n }}\n onFocus={() => setIsLogoHovered(true)}\n onMouseOut={() => setIsLogoHovered(false)}\n onMouseOver={() => setIsLogoHovered(true)}\n >\n {isDark ? (\n <OandaLogoDark data-testid=\"disclaimer-wrapper-logo-dark\" />\n ) : (\n <OandaLogoLight data-testid=\"disclaimer-wrapper-logo-light\" />\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
|
|
2
2
|
import { OandaLogoDark, OandaLogoLight } from '../../images';
|
|
3
3
|
import { useLayoutProvider } from '../../providers';
|
|
4
4
|
import { cn } from '../../tailwind';
|
|
5
|
-
import { Theme } from '../../types';
|
|
5
|
+
import { Size, Theme } from '../../types';
|
|
6
6
|
export const Disclaimer = _ref => {
|
|
7
7
|
let {
|
|
8
8
|
children,
|
|
@@ -18,6 +18,10 @@ export const Disclaimer = _ref => {
|
|
|
18
18
|
theme
|
|
19
19
|
} = useLayoutProvider();
|
|
20
20
|
const isDark = theme === Theme.Dark;
|
|
21
|
+
const {
|
|
22
|
+
size
|
|
23
|
+
} = useLayoutProvider();
|
|
24
|
+
const isDesktop = size === Size.DESKTOP;
|
|
21
25
|
const [isLogoHovered, setIsLogoHovered] = useState(false);
|
|
22
26
|
const [isInfoHovered, setIsInfoHovered] = useState(false);
|
|
23
27
|
if (!logoLink && !text) {
|
|
@@ -30,7 +34,7 @@ export const Disclaimer = _ref => {
|
|
|
30
34
|
role: "presentation",
|
|
31
35
|
onClick: () => isClickable && window.open(logoLink, '_blank')
|
|
32
36
|
}, children, text && React.createElement("div", {
|
|
33
|
-
className: cn('lw-absolute lw-right-0 lw-top-0 lw-z-30 lw-flex lw-h-full lw-items-center lw-bg-border-primary lw-bg-opacity-90 lw-p-3 lw-text-sm lw-text-text-primary lw-delay-150 lw-duration-150 lw-ease-in-out', isInfoHovered && 'lw-opacity-100', !isInfoHovered && 'lw-opacity-0 lw-pointer-events-none'),
|
|
37
|
+
className: cn('lw-absolute lw-right-0 lw-top-0 lw-z-30 lw-flex lw-h-full lw-items-center lw-bg-border-primary lw-bg-opacity-90 lw-p-3 lw-text-sm lw-text-text-primary lw-delay-150 lw-duration-150 lw-ease-in-out', !isDesktop && 'lw-leading-[14px] lw-text-[11px] lw-p-[4px]', isInfoHovered && 'lw-opacity-100', !isInfoHovered && 'lw-opacity-0 lw-pointer-events-none'),
|
|
34
38
|
onBlur: () => setIsInfoHovered(false),
|
|
35
39
|
onMouseOut: () => setIsInfoHovered(false)
|
|
36
40
|
}, text), React.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Disclaimer.js","names":["React","useState","OandaLogoDark","OandaLogoLight","useLayoutProvider","cn","Theme","Disclaimer","_ref","children","logoLink","brandingSpace","fitContent","linkArea","text","isSlim","infoButtonPosition","theme","isDark","Dark","isLogoHovered","setIsLogoHovered","isInfoHovered","setIsInfoHovered","isClickable","createElement","className","role","onClick","window","open","onBlur","onMouseOut","onFocus","onMouseOver","e","stopPropagation"],"sources":["../../../../src/components/Disclaimer/Disclaimer.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport React, { useState } from 'react';\n\nimport { OandaLogoDark, OandaLogoLight } from '../../images';\nimport { useLayoutProvider } from '../../providers';\nimport { cn } from '../../tailwind';\nimport type { RenderComponentParams } from '../../types';\nimport { Theme } from '../../types';\n\ntype DisclaimerProps = PropsWithChildren &\n Omit<RenderComponentParams, 'Component'> & {\n text?: string;\n isSlim?: boolean;\n infoButtonPosition?: 'left' | 'top';\n };\n\nexport const Disclaimer: FC<DisclaimerProps> = ({\n children,\n logoLink,\n brandingSpace,\n fitContent = false,\n linkArea = 'full',\n text,\n isSlim,\n infoButtonPosition = 'top',\n}) => {\n const { theme } = useLayoutProvider();\n const isDark = theme === Theme.Dark;\n\n const [isLogoHovered, setIsLogoHovered] = useState(false);\n const [isInfoHovered, setIsInfoHovered] = useState(false);\n\n if (!logoLink && !text) {\n return children;\n }\n\n const isClickable = linkArea === 'full';\n\n return (\n <div\n className={cn(\n 'lw-relative lw-overflow-hidden',\n isClickable && 'lw-cursor-pointer',\n brandingSpace && brandingSpace === 'vertical' ? 'lw-pb-12' : 'lw-pb-0',\n !!fitContent && 'lw-w-fit'\n )}\n data-testid=\"disclaimer-wrapper\"\n role=\"presentation\"\n onClick={() => isClickable && window.open(logoLink, '_blank')}\n >\n {children}\n {text && (\n <div\n className={cn(\n 'lw-absolute lw-right-0 lw-top-0 lw-z-30 lw-flex lw-h-full lw-items-center lw-bg-border-primary lw-bg-opacity-90 lw-p-3 lw-text-sm lw-text-text-primary lw-delay-150 lw-duration-150 lw-ease-in-out',\n isInfoHovered && 'lw-opacity-100',\n !isInfoHovered && 'lw-opacity-0 lw-pointer-events-none'\n )}\n onBlur={() => setIsInfoHovered(false)}\n onMouseOut={() => setIsInfoHovered(false)}\n >\n {text}\n </div>\n )}\n <div\n className={cn(\n 'lw-absolute lw-bottom-3 lw-right-0 lw-z-20 lw-flex lw-transition lw-delay-100 lw-duration-300 lw-ease-in-out',\n logoLink &&\n !isLogoHovered &&\n infoButtonPosition === 'left' &&\n 'lw-translate-x-[55px]',\n isSlim && 'lw-bottom-[6px]',\n !isSlim && 'lw-bottom-2',\n infoButtonPosition === 'left' && 'lw-flex-row lw-items-center',\n infoButtonPosition === 'top' && 'lw-flex-col lw-items-end'\n )}\n >\n {text && (\n <div\n className={cn(\n 'lw-flex lw-h-[20px] lw-w-[20px] lw-items-center lw-justify-center lw-rounded-full lw-border lw-border-border-primary lw-pb-0.5 lw-text-sm lw-font-bold lw-text-text-secondary lw-shadow-basic',\n isDark && 'lw-bg-dark-blue',\n !isDark && 'lw-bg-bg-primary',\n infoButtonPosition === 'top' && 'lw-mr-1',\n infoButtonPosition === 'top' && !!logoLink && 'lw-mb-3',\n infoButtonPosition === 'left' && 'lw-mr-2 '\n )}\n onFocus={() => setIsInfoHovered(true)}\n onMouseOver={() => setIsInfoHovered(true)}\n >\n i\n </div>\n )}\n {logoLink && (\n <div\n className={cn(\n 'lw-cursor-pointer lw-rounded-l-full lw-bg-bg-primary lw-shadow-basic',\n infoButtonPosition === 'top' &&\n 'lw-transition lw-delay-100 lw-duration-300 lw-ease-in-out',\n !isLogoHovered &&\n infoButtonPosition === 'top' &&\n 'lw-translate-x-[55px]'\n )}\n data-testid=\"disclaimer-wrapper-logo\"\n role=\"presentation\"\n onBlur={() => setIsLogoHovered(false)}\n onClick={(e) => {\n e.stopPropagation();\n window.open(logoLink, '_blank');\n }}\n onFocus={() => setIsLogoHovered(true)}\n onMouseOut={() => setIsLogoHovered(false)}\n onMouseOver={() => setIsLogoHovered(true)}\n >\n {isDark ? (\n <OandaLogoDark data-testid=\"disclaimer-wrapper-logo-dark\" />\n ) : (\n <OandaLogoLight data-testid=\"disclaimer-wrapper-logo-light\" />\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":"AACA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,aAAa,EAAEC,cAAc,QAAQ,cAAc;AAC5D,SAASC,iBAAiB,QAAQ,iBAAiB;AACnD,SAASC,EAAE,QAAQ,gBAAgB;AAEnC,SAASC,KAAK,QAAQ,aAAa;
|
|
1
|
+
{"version":3,"file":"Disclaimer.js","names":["React","useState","OandaLogoDark","OandaLogoLight","useLayoutProvider","cn","Size","Theme","Disclaimer","_ref","children","logoLink","brandingSpace","fitContent","linkArea","text","isSlim","infoButtonPosition","theme","isDark","Dark","size","isDesktop","DESKTOP","isLogoHovered","setIsLogoHovered","isInfoHovered","setIsInfoHovered","isClickable","createElement","className","role","onClick","window","open","onBlur","onMouseOut","onFocus","onMouseOver","e","stopPropagation"],"sources":["../../../../src/components/Disclaimer/Disclaimer.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport React, { useState } from 'react';\n\nimport { OandaLogoDark, OandaLogoLight } from '../../images';\nimport { useLayoutProvider } from '../../providers';\nimport { cn } from '../../tailwind';\nimport type { RenderComponentParams } from '../../types';\nimport { Size, Theme } from '../../types';\n\ntype DisclaimerProps = PropsWithChildren &\n Omit<RenderComponentParams, 'Component'> & {\n text?: string;\n isSlim?: boolean;\n infoButtonPosition?: 'left' | 'top';\n };\n\nexport const Disclaimer: FC<DisclaimerProps> = ({\n children,\n logoLink,\n brandingSpace,\n fitContent = false,\n linkArea = 'full',\n text,\n isSlim,\n infoButtonPosition = 'top',\n}) => {\n const { theme } = useLayoutProvider();\n const isDark = theme === Theme.Dark;\n const { size } = useLayoutProvider();\n const isDesktop = size === Size.DESKTOP;\n\n const [isLogoHovered, setIsLogoHovered] = useState(false);\n const [isInfoHovered, setIsInfoHovered] = useState(false);\n\n if (!logoLink && !text) {\n return children;\n }\n\n const isClickable = linkArea === 'full';\n\n return (\n <div\n className={cn(\n 'lw-relative lw-overflow-hidden',\n isClickable && 'lw-cursor-pointer',\n brandingSpace && brandingSpace === 'vertical' ? 'lw-pb-12' : 'lw-pb-0',\n !!fitContent && 'lw-w-fit'\n )}\n data-testid=\"disclaimer-wrapper\"\n role=\"presentation\"\n onClick={() => isClickable && window.open(logoLink, '_blank')}\n >\n {children}\n {text && (\n <div\n className={cn(\n 'lw-absolute lw-right-0 lw-top-0 lw-z-30 lw-flex lw-h-full lw-items-center lw-bg-border-primary lw-bg-opacity-90 lw-p-3 lw-text-sm lw-text-text-primary lw-delay-150 lw-duration-150 lw-ease-in-out',\n !isDesktop && 'lw-leading-[14px] lw-text-[11px] lw-p-[4px]',\n isInfoHovered && 'lw-opacity-100',\n !isInfoHovered && 'lw-opacity-0 lw-pointer-events-none'\n )}\n onBlur={() => setIsInfoHovered(false)}\n onMouseOut={() => setIsInfoHovered(false)}\n >\n {text}\n </div>\n )}\n <div\n className={cn(\n 'lw-absolute lw-bottom-3 lw-right-0 lw-z-20 lw-flex lw-transition lw-delay-100 lw-duration-300 lw-ease-in-out',\n logoLink &&\n !isLogoHovered &&\n infoButtonPosition === 'left' &&\n 'lw-translate-x-[55px]',\n isSlim && 'lw-bottom-[6px]',\n !isSlim && 'lw-bottom-2',\n infoButtonPosition === 'left' && 'lw-flex-row lw-items-center',\n infoButtonPosition === 'top' && 'lw-flex-col lw-items-end'\n )}\n >\n {text && (\n <div\n className={cn(\n 'lw-flex lw-h-[20px] lw-w-[20px] lw-items-center lw-justify-center lw-rounded-full lw-border lw-border-border-primary lw-pb-0.5 lw-text-sm lw-font-bold lw-text-text-secondary lw-shadow-basic',\n isDark && 'lw-bg-dark-blue',\n !isDark && 'lw-bg-bg-primary',\n infoButtonPosition === 'top' && 'lw-mr-1',\n infoButtonPosition === 'top' && !!logoLink && 'lw-mb-3',\n infoButtonPosition === 'left' && 'lw-mr-2 '\n )}\n onFocus={() => setIsInfoHovered(true)}\n onMouseOver={() => setIsInfoHovered(true)}\n >\n i\n </div>\n )}\n {logoLink && (\n <div\n className={cn(\n 'lw-cursor-pointer lw-rounded-l-full lw-bg-bg-primary lw-shadow-basic',\n infoButtonPosition === 'top' &&\n 'lw-transition lw-delay-100 lw-duration-300 lw-ease-in-out',\n !isLogoHovered &&\n infoButtonPosition === 'top' &&\n 'lw-translate-x-[55px]'\n )}\n data-testid=\"disclaimer-wrapper-logo\"\n role=\"presentation\"\n onBlur={() => setIsLogoHovered(false)}\n onClick={(e) => {\n e.stopPropagation();\n window.open(logoLink, '_blank');\n }}\n onFocus={() => setIsLogoHovered(true)}\n onMouseOut={() => setIsLogoHovered(false)}\n onMouseOver={() => setIsLogoHovered(true)}\n >\n {isDark ? (\n <OandaLogoDark data-testid=\"disclaimer-wrapper-logo-dark\" />\n ) : (\n <OandaLogoLight data-testid=\"disclaimer-wrapper-logo-light\" />\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oanda/labs-widget-common",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.248",
|
|
4
4
|
"description": "Labs Widget Common",
|
|
5
5
|
"main": "dist/main/index.js",
|
|
6
6
|
"module": "dist/module/index.js",
|
|
@@ -21,5 +21,5 @@
|
|
|
21
21
|
"tailwind-merge": "2.2.2",
|
|
22
22
|
"usehooks-ts": "3.0.2"
|
|
23
23
|
},
|
|
24
|
-
"gitHead": "
|
|
24
|
+
"gitHead": "dcad1de042c138f3f1e81f203cae76e4c3a24741"
|
|
25
25
|
}
|
|
@@ -5,7 +5,7 @@ import { OandaLogoDark, OandaLogoLight } from '../../images';
|
|
|
5
5
|
import { useLayoutProvider } from '../../providers';
|
|
6
6
|
import { cn } from '../../tailwind';
|
|
7
7
|
import type { RenderComponentParams } from '../../types';
|
|
8
|
-
import { Theme } from '../../types';
|
|
8
|
+
import { Size, Theme } from '../../types';
|
|
9
9
|
|
|
10
10
|
type DisclaimerProps = PropsWithChildren &
|
|
11
11
|
Omit<RenderComponentParams, 'Component'> & {
|
|
@@ -26,6 +26,8 @@ export const Disclaimer: FC<DisclaimerProps> = ({
|
|
|
26
26
|
}) => {
|
|
27
27
|
const { theme } = useLayoutProvider();
|
|
28
28
|
const isDark = theme === Theme.Dark;
|
|
29
|
+
const { size } = useLayoutProvider();
|
|
30
|
+
const isDesktop = size === Size.DESKTOP;
|
|
29
31
|
|
|
30
32
|
const [isLogoHovered, setIsLogoHovered] = useState(false);
|
|
31
33
|
const [isInfoHovered, setIsInfoHovered] = useState(false);
|
|
@@ -53,6 +55,7 @@ export const Disclaimer: FC<DisclaimerProps> = ({
|
|
|
53
55
|
<div
|
|
54
56
|
className={cn(
|
|
55
57
|
'lw-absolute lw-right-0 lw-top-0 lw-z-30 lw-flex lw-h-full lw-items-center lw-bg-border-primary lw-bg-opacity-90 lw-p-3 lw-text-sm lw-text-text-primary lw-delay-150 lw-duration-150 lw-ease-in-out',
|
|
58
|
+
!isDesktop && 'lw-leading-[14px] lw-text-[11px] lw-p-[4px]',
|
|
56
59
|
isInfoHovered && 'lw-opacity-100',
|
|
57
60
|
!isInfoHovered && 'lw-opacity-0 lw-pointer-events-none'
|
|
58
61
|
)}
|