@equinor/amplify-component-lib 9.3.4 → 9.3.5
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/dist/atoms/style/colors.d.ts +1 -1
- package/dist/atoms/style/colors.js +1 -1
- package/dist/atoms/utils/tutorials.d.ts +4 -1
- package/dist/atoms/utils/tutorials.js +1 -1
- package/dist/molecules/RichTextEditor/RichTextEditor.d.ts +1 -3
- package/dist/molecules/RichTextEditor/RichTextEditor.js +1 -1
- package/dist/molecules/RichTextEditor/RichTextEditor.styles.js +1 -0
- package/dist/molecules/RichTextEditor/index.js +1 -1
- package/dist/molecules/Select/Select.js +1 -1
- package/dist/molecules/Select/Select.styles.js +27 -27
- package/dist/providers/TutorialHighlightingProvider/TutorialHighlightingProviderInner.js +3 -3
- package/dist/providers/TutorialHighlightingProvider/TutorialPopover/TutorialPopover.js +13 -7
- package/dist/providers/TutorialHighlightingProvider/TutorialPopover/hooks/useTutorialPopoverPosition.d.ts +18 -0
- package/dist/providers/TutorialHighlightingProvider/TutorialPopover/hooks/useTutorialPopoverPosition.js +1 -0
- package/package.json +1 -1
|
@@ -458,4 +458,4 @@ export declare const colors: {
|
|
|
458
458
|
};
|
|
459
459
|
};
|
|
460
460
|
export declare const VARIANT_COLORS: Record<Variants, string>;
|
|
461
|
-
export declare const
|
|
461
|
+
export declare const VARIANT_HELPER_TEXT_COLORS: Record<Variants, string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{tokens as a}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";const{colors:r}=a,i={...r,ui:{...r.ui,background__light_medium:{rgba:"var(--amplify_ui_background_light_medium, rgba(235, 235, 235, 1))"},background__heavy:{rgba:"var(--amplify_ui_background_heavy, rgba(189, 189, 189, 1))"}},interactive:{...r.interactive,primary__pressed:{rgba:"var(--amplify_interactive_primary_pressed, rgba(19, 46, 49, 1))"}},dataviz:{darkblue:{default:"var(--amplify_dataviz_darkblue_default, rgba(0, 71, 153, 1))",darker:"var(--amplify_dataviz_darkblue_darker, rgba(4, 48, 98, 1))",lighter:"var(--amplify_dataviz_darkblue_lighter, rgba(191, 220, 252, 1))"},lightblue:{default:"var(--amplify_dataviz_lightblue_default, rgba(133, 208, 250, 1))",darker:"var(--amplify_dataviz_lightblue_darker, rgba(35, 170, 246, 1))",lighter:"var(--amplify_dataviz_lightblue_lighter, rgba(211, 238, 253, 1))"},lightgreen:{default:"var(--amplify_dataviz_lightgreen_default, rgba(10, 194, 154, 1))",darker:"var(--amplify_dataviz_lightgreen_darker, rgba(8, 145, 115, 1))",lighter:"var(--amplify_dataviz_lightgreen_lighter, rgba(220, 241, 236, 1))"},darkgreen:{default:"var(--amplify_dataviz_darkgreen_default, rgba(0, 102, 76, 1))",darker:"var(--amplify_dataviz_darkgreen_darker, rgba(0, 61, 46, 1))",lighter:"var(--amplify_dataviz_darkgreen_lighter, rgba(200, 237, 227, 1))"},darkpink:{default:"var(--amplify_dataviz_darkpink_default, rgba(169, 30, 88, 1))",darker:"var(--amplify_dataviz_darkpink_darker, rgba(135, 18, 67, 1))",lighter:"var(--amplify_dataviz_darkpink_lighter, rgba(252, 212, 229, 1))"},lightpink:{default:"var(--amplify_dataviz_lightpink_default, rgba(255, 128, 138, 1))",darker:"var(--amplify_dataviz_lightpink_darker, rgba(225, 81, 93, 1))",lighter:"var(--amplify_dataviz_lightpink_lighter, rgba(255, 219, 222, 1))"},darkyellow:{default:"var(--amplify_dataviz_darkyellow_default, rgba(160, 112, 28, 1))",darker:"var(--amplify_dataviz_darkyellow_darker, rgba(121, 85, 21, 1))",lighter:"var(--amplify_dataviz_darkyellow_lighter, rgba(244, 226, 195, 1))"},lightyellow:{default:"var(--amplify_dataviz_lightyellow_default, rgba(253, 203, 53, 1))",darker:"var(--amplify_dataviz_lightyellow_darker, rgba(227, 171, 2, 1))",lighter:"var(--amplify_dataviz_lightyellow_lighter, rgba(255, 240, 194, 1))"},darkpurple:{default:"var(--amplify_dataviz_darkpurple_default, rgba(147, 20, 219, 1))",darker:"var(--amplify_dataviz_darkpurple_darker, rgba(97, 1, 152, 1))",lighter:"var(--amplify_dataviz_darkpurple_lighter, rgba(232, 209, 246, 1))"},lightpurple:{default:"var(--amplify_dataviz_lightpurple_default, rgba(186, 153, 255, 1))",darker:"var(--amplify_dataviz_lightpurple_darker, rgba(155, 89, 242, 1))",lighter:"var(--amplify_dataviz_lightpurple_lighter, rgba(234, 224, 255, 1))"},darkgray:{default:"var(--amplify_dataviz_darkgray_default, rgba(122, 122, 122,1))",darker:"var(--amplify-dataviz_darkgray_darker, rgba(86, 86, 86,1))",lighter:"var(--amplify-dataviz_darkgray_lighter, rgba(173, 173, 173, 1))"},lightgray:{default:"var(--amplify_dataviz_lightgray_default, rgba(144, 155, 162, 1))",darker:"var(--amplify_dataviz_lightgray_darker, rgba(91, 102, 108, 1))",lighter:"var(--amplify_dataviz_lightgray_lighter, rgba(194, 200, 204, 1))"}}},e={warning:i.interactive.warning__resting.rgba,error:i.interactive.danger__resting.rgba,success:i.interactive.success__resting.rgba,dirty:i.infographic.substitute__blue_ocean.rgba},l={warning:i.interactive.warning__hover.rgba,error:i.interactive.danger__hover.rgba,success:i.interactive.success__hover.rgba,dirty:i.infographic.substitute__blue_ocean.rgba};export{e as VARIANT_COLORS,l as
|
|
1
|
+
import{tokens as a}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";const{colors:r}=a,i={...r,ui:{...r.ui,background__light_medium:{rgba:"var(--amplify_ui_background_light_medium, rgba(235, 235, 235, 1))"},background__heavy:{rgba:"var(--amplify_ui_background_heavy, rgba(189, 189, 189, 1))"}},interactive:{...r.interactive,primary__pressed:{rgba:"var(--amplify_interactive_primary_pressed, rgba(19, 46, 49, 1))"}},dataviz:{darkblue:{default:"var(--amplify_dataviz_darkblue_default, rgba(0, 71, 153, 1))",darker:"var(--amplify_dataviz_darkblue_darker, rgba(4, 48, 98, 1))",lighter:"var(--amplify_dataviz_darkblue_lighter, rgba(191, 220, 252, 1))"},lightblue:{default:"var(--amplify_dataviz_lightblue_default, rgba(133, 208, 250, 1))",darker:"var(--amplify_dataviz_lightblue_darker, rgba(35, 170, 246, 1))",lighter:"var(--amplify_dataviz_lightblue_lighter, rgba(211, 238, 253, 1))"},lightgreen:{default:"var(--amplify_dataviz_lightgreen_default, rgba(10, 194, 154, 1))",darker:"var(--amplify_dataviz_lightgreen_darker, rgba(8, 145, 115, 1))",lighter:"var(--amplify_dataviz_lightgreen_lighter, rgba(220, 241, 236, 1))"},darkgreen:{default:"var(--amplify_dataviz_darkgreen_default, rgba(0, 102, 76, 1))",darker:"var(--amplify_dataviz_darkgreen_darker, rgba(0, 61, 46, 1))",lighter:"var(--amplify_dataviz_darkgreen_lighter, rgba(200, 237, 227, 1))"},darkpink:{default:"var(--amplify_dataviz_darkpink_default, rgba(169, 30, 88, 1))",darker:"var(--amplify_dataviz_darkpink_darker, rgba(135, 18, 67, 1))",lighter:"var(--amplify_dataviz_darkpink_lighter, rgba(252, 212, 229, 1))"},lightpink:{default:"var(--amplify_dataviz_lightpink_default, rgba(255, 128, 138, 1))",darker:"var(--amplify_dataviz_lightpink_darker, rgba(225, 81, 93, 1))",lighter:"var(--amplify_dataviz_lightpink_lighter, rgba(255, 219, 222, 1))"},darkyellow:{default:"var(--amplify_dataviz_darkyellow_default, rgba(160, 112, 28, 1))",darker:"var(--amplify_dataviz_darkyellow_darker, rgba(121, 85, 21, 1))",lighter:"var(--amplify_dataviz_darkyellow_lighter, rgba(244, 226, 195, 1))"},lightyellow:{default:"var(--amplify_dataviz_lightyellow_default, rgba(253, 203, 53, 1))",darker:"var(--amplify_dataviz_lightyellow_darker, rgba(227, 171, 2, 1))",lighter:"var(--amplify_dataviz_lightyellow_lighter, rgba(255, 240, 194, 1))"},darkpurple:{default:"var(--amplify_dataviz_darkpurple_default, rgba(147, 20, 219, 1))",darker:"var(--amplify_dataviz_darkpurple_darker, rgba(97, 1, 152, 1))",lighter:"var(--amplify_dataviz_darkpurple_lighter, rgba(232, 209, 246, 1))"},lightpurple:{default:"var(--amplify_dataviz_lightpurple_default, rgba(186, 153, 255, 1))",darker:"var(--amplify_dataviz_lightpurple_darker, rgba(155, 89, 242, 1))",lighter:"var(--amplify_dataviz_lightpurple_lighter, rgba(234, 224, 255, 1))"},darkgray:{default:"var(--amplify_dataviz_darkgray_default, rgba(122, 122, 122,1))",darker:"var(--amplify-dataviz_darkgray_darker, rgba(86, 86, 86,1))",lighter:"var(--amplify-dataviz_darkgray_lighter, rgba(173, 173, 173, 1))"},lightgray:{default:"var(--amplify_dataviz_lightgray_default, rgba(144, 155, 162, 1))",darker:"var(--amplify_dataviz_lightgray_darker, rgba(91, 102, 108, 1))",lighter:"var(--amplify_dataviz_lightgray_lighter, rgba(194, 200, 204, 1))"}}},e={warning:i.interactive.warning__resting.rgba,error:i.interactive.danger__resting.rgba,success:i.interactive.success__resting.rgba,dirty:i.infographic.substitute__blue_ocean.rgba},l={warning:i.interactive.warning__hover.rgba,error:i.interactive.danger__hover.rgba,success:i.interactive.success__hover.rgba,dirty:i.infographic.substitute__blue_ocean.rgba};export{e as VARIANT_COLORS,l as VARIANT_HELPER_TEXT_COLORS,i as colors};
|
|
@@ -7,4 +7,7 @@ export declare function highlightTutorialElementID(tutorialId: string, stepNum:
|
|
|
7
7
|
export interface TutorialHighlight extends Pick<DOMRect, 'top' | 'left' | 'height' | 'width'> {
|
|
8
8
|
id: string;
|
|
9
9
|
}
|
|
10
|
-
export declare function getHighlightElementBoundingBox(tutorialId: string, stepNum: number
|
|
10
|
+
export declare function getHighlightElementBoundingBox(tutorialId: string, stepNum: number, windowSize: {
|
|
11
|
+
width: number;
|
|
12
|
+
height: number;
|
|
13
|
+
}): TutorialHighlight | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(t,e){if(e<0)throw new Error(`[TutorialHighlightingProvider]: stepNum must be greater than or equal to 0, received ${e}`);return`sam-tutorial-${t}-${e}`}function e(e,o){const n=t(e,o),
|
|
1
|
+
function t(t,e){if(e<0)throw new Error(`[TutorialHighlightingProvider]: stepNum must be greater than or equal to 0, received ${e}`);return`sam-tutorial-${t}-${e}`}function e(e,o,i){const n=t(e,o),r=document.getElementById(n);if(!r)return void console.warn(`[TutorialHighlightingProvider]: Element with ID ${n} not found`);const h=r.getBoundingClientRect(),l=document.getElementById("content").scrollTop;return(h.top<=0||h.left<=0||h.bottom>=i.height||h.right>=i.width)&&r.scrollIntoView({behavior:"smooth",block:"center"}),{id:e,top:h.top-5+l,left:h.left-5,width:h.width+10,height:h.height+10}}export{e as getHighlightElementBoundingBox,t as highlightTutorialElementID};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { ImageExtensionFnProps, RichTextEditorFeatures } from './RichTextEditor.types';
|
|
3
3
|
import { Variants } from '../../atoms/types/variants';
|
|
4
4
|
export interface RichTextEditorProps extends ImageExtensionFnProps {
|
|
@@ -21,7 +21,6 @@ export interface RichTextEditorProps extends ImageExtensionFnProps {
|
|
|
21
21
|
label?: string;
|
|
22
22
|
meta?: string;
|
|
23
23
|
helperText?: string;
|
|
24
|
-
helperIcon?: ReactNode;
|
|
25
24
|
}
|
|
26
25
|
/**
|
|
27
26
|
*
|
|
@@ -45,6 +44,5 @@ export interface RichTextEditorProps extends ImageExtensionFnProps {
|
|
|
45
44
|
* @param label - Label text at top left
|
|
46
45
|
* @param meta - Meta text at top right
|
|
47
46
|
* @param helperText - Helper text bottom left
|
|
48
|
-
* @param helperIcon - Icon / element to be placed before helper text
|
|
49
47
|
*/
|
|
50
48
|
export declare const RichTextEditor: FC<RichTextEditorProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useMemo as o}from"react";import{Typography as t,Icon as a}from"@equinor/eds-core-react";import{thumbs_up as n,warning_outlined as i,error_outlined as m}from"@equinor/eds-icons";import{AmplifyBar as d}from"./MenuBar/MenuBar.js";import{EditorProvider as s}from"./EditorProvider.js";import{Wrapper as g,LabelWrapper as l,EditorStyling as c,EditorContent as h,HelperWrapper as u}from"./RichTextEditor.styles.js";import{VARIANT_COLORS as p,VARIANT_HELPER_TEXT_COLORS as v,colors as f}from"../../atoms/style/colors.js";import{getFeatures as I}from"../../atoms/utils/richtext.js";const x=({value:x,onChange:R,onImageUpload:$,onImageRead:b,onImageRemove:j,onRemovedImagesChange:U,placeholder:w,features:B,extendFeatures:C,removeFeatures:F,padding:H="md",maxHeight:y,minHeight:E,lightBackground:_,border:k=!0,highlighted:q=!1,variant:M,label:T,meta:z,helperText:P})=>{if(j&&U)throw new Error("onImageRemove and onRemovedImagesChange cannot be used together");const A=I({features:B,extendFeatures:C,removeFeatures:F,onImageUpload:$}),D=o((()=>{switch(M){case"error":return m;case"warning":return i;case"success":return n}}),[M]);return e(s,{content:x,onUpdate:R,features:A,placeholder:w,onImageUpload:$,onImageRead:b,onImageRemove:j,onRemovedImagesChange:U,children:o=>r(g,{children:[T&&r(l,{children:[e(t,{variant:"label",group:"input",children:T}),z&&e(t,{variant:"helper",group:"input",children:z})]}),r(c,{"data-testid":"richtext-editor",$border:k,$padding:H,$lightBackground:_,$highlighted:q,$variant:M,children:[e(d,{editor:o,features:A,onImageUpload:$}),e(h,{editor:o,$maxHeight:y,$minHeight:E})]}),P&&r(u,{children:[D&&M?e(a,{data:D,size:16,color:p[M]}):null,e(t,{variant:"helper",group:"input",color:M?v[M]:f.text.static_icons__tertiary.rgba,children:P})]})]})})};export{x as RichTextEditor};
|
|
@@ -147,6 +147,7 @@ import{EditorContent as t}from"@tiptap/react";import{shape as e,typography as o}
|
|
|
147
147
|
}
|
|
148
148
|
`,p=a.div`
|
|
149
149
|
display: flex;
|
|
150
|
+
gap: ${n.small};
|
|
150
151
|
padding-left: ${n.small};
|
|
151
152
|
margin-top: ${n.small};
|
|
152
153
|
`;export{d as EditorContent,l as EditorStyling,p as HelperWrapper,g as LabelWrapper,s as Wrapper};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{AmplifyBar as r}from"./MenuBar/MenuBar.js";import{EditorProvider as t}from"./EditorProvider.js";import{EditorContent as o,EditorStyling as i}from"./RichTextEditor.styles.js";import{RichTextDisplay as e}from"../RichTextDisplay/RichTextDisplay.js";import"react/jsx-runtime";import"@equinor/eds-core-react";import"../../atoms/style/colors.js";import"./RichTextEditor.types.js";const s={Styling:i,Provider:t,Content:o,Display:e,Bar:r};export{s as RichText};
|
|
1
|
+
import{AmplifyBar as r}from"./MenuBar/MenuBar.js";import{EditorProvider as t}from"./EditorProvider.js";import{EditorContent as o,EditorStyling as i}from"./RichTextEditor.styles.js";import{RichTextDisplay as e}from"../RichTextDisplay/RichTextDisplay.js";import"react/jsx-runtime";import"react";import"@equinor/eds-core-react";import"@equinor/eds-icons";import"../../atoms/style/colors.js";import"./RichTextEditor.types.js";const s={Styling:i,Provider:t,Content:o,Display:e,Bar:r};export{s as RichText};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as o,useMemo as n}from"react";import{Label as r,CircularProgress as l,Icon as a}from"@equinor/eds-core-react";import{thumbs_up as i,
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as o,useMemo as n}from"react";import{Label as r,CircularProgress as l,Icon as a}from"@equinor/eds-core-react";import{thumbs_up as i,warning_outlined as c,error_outlined as s,arrow_drop_up as d,arrow_drop_down as m,clear as u}from"@equinor/eds-icons";import{tokens as h}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{useSelect as p}from"../../atoms/hooks/useSelect.js";import{GroupedSelectMenu as g}from"./GroupedSelectMenu.js";import{ListSelectMenu as b}from"./ListSelectMenu.js";import{ValueText as f,ComboBoxChip as v,Wrapper as y,Container as x,Section as C,PlaceholderText as S,ClearButton as I,HelperWrapper as O,StyledMenu as k}from"./Select.styles.js";import{useOutsideClick as w}from"../../node_modules/@equinor/eds-utils/dist/esm/hooks/useOutsideClick.js";const{colors:D}=h,R=h=>{const{clearable:R=!0,loading:$=!1,disabled:j=!1,lightBackground:V=!1,underlineHighlight:B=!1,sortValues:F=!0,placeholder:K="Select...",label:T,helperText:_,showHelperIcon:q=!0,meta:z,id:A=`amplify-combobox-${T}`,variant:H,inDialog:W=!1,onSearchFilter:M,"data-testid":E}=h,{handleOnAddItem:G,handleOnClear:L,handleOnItemKeyDown:N,handleOnItemSelect:J,handleOnSearchChange:P,handleOnSearchKeyDown:Q,handleToggleOpen:U,itemRefs:X,search:Y,selectedValues:Z,handleOnClose:ee,handleOnOpen:te,handleOnRemoveItem:oe,open:ne,searchRef:re,tryingToRemoveItem:le}=p({...h,clearable:R,loading:$,disabled:j,lightBackground:V,underlineHighlight:B,sortValues:F,placeholder:K}),ae=o(null),ie=o(null),ce=n((()=>!!T||!!z),[T,z]),se=n((()=>!!_),[_]),de=n((()=>{if(q)switch(H){case"error":return s;case"warning":return c;case"success":return i}}),[q,H]);w(ie.current,(e=>{W&&ne&&e.target&&ae.current&&ie.current&&!ae.current.contains(e.target)&&!ie.current?.contains(e.target)&&ee()}));const me=n((()=>"value"in h&&h.value?e(f,{children:h.value.label}):Z.map((t=>"customValueComponent"in h&&h.customValueComponent?e(h.customValueComponent,{item:t,onDelete:()=>oe(t),tryingToRemove:void 0!==le&&le.value===t.value},t.value):e(v,{"data-testid":"amplify-combobox-chip",className:"amplify-combo-box-chip",onDelete:()=>oe(t),$tryingToRemove:le?.value===t.value,$lightBackground:V,children:t.label},t.value)))),[Z,le,V,h,oe]);return t("div",{children:[ce&&e(r,{label:T,meta:z,htmlFor:A}),t(y,{children:[t(x,{"data-testid":E||"combobox-container",ref:ae,onClick:te,"aria-expanded":ne,$variant:H,$lightBackground:V,children:[t(C,{children:[""===Y&&0===Z.length&&e(S,{children:K}),(""===Y||"values"in h&&Z.length>0)&&me,e("input",{id:A,disabled:j||$,ref:re,type:"search",role:"combobox",value:Y,autoComplete:"off",onChange:P,onKeyDownCapture:Q})]}),$?e(l,{size:16}):e(a,{onClick:U,data:ne?d:m,color:D.interactive.primary__resting.rgba}),R&&Z.length>0&&!$&&e(I,{id:"clear",variant:"ghost_icon",onClick:L,"data-testid":"clearBtn",children:e(a,{data:u,size:18})})]}),se&&t(O,{$variant:H,children:[de&&e(a,{data:de,size:16}),e(r,{label:_,htmlFor:A})]})]}),ne&&e(k,{ref:ie,open:!0,id:"combobox-menu",anchorEl:ae.current,onClose:ee,placement:"bottom",style:{width:`${ae.current?.clientWidth}px`,maxWidth:`${ae.current?.clientWidth}px`},children:"groups"in h&&h.groups?e(g,{...h,search:Y,itemRefs:X,onItemSelect:J,onItemKeyDown:N,onSearchFilter:M}):e(b,{...h,search:Y,itemRefs:X,onAddItem:h.onAddItem?G:void 0,onItemSelect:J,onItemKeyDown:N,onSearchFilter:M})})]})};export{R as Select};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";export{Button}from"@equinor/eds-core-react";import{animation as a}from"../../atoms/style/animation.js";import{
|
|
1
|
+
import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";export{Button}from"@equinor/eds-core-react";import{animation as a}from"../../atoms/style/animation.js";import{VARIANT_HELPER_TEXT_COLORS as i,VARIANT_COLORS as o,colors as n}from"../../atoms/style/colors.js";import{spacings as s}from"../../atoms/style/spacings.js";import{Chip as l}from"../Chip/Chip.js";import d,{css as c}from"styled-components";const p=d.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
gap: ${s.small};
|
|
@@ -17,7 +17,7 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
|
|
|
17
17
|
}
|
|
18
18
|
> svg {
|
|
19
19
|
flex-shrink: 0;
|
|
20
|
-
fill: ${
|
|
20
|
+
fill: ${o[t]};
|
|
21
21
|
}
|
|
22
22
|
`:""}
|
|
23
23
|
`,b=d.div`
|
|
@@ -31,31 +31,31 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
|
|
|
31
31
|
box-shadow ${a.transitionMS};
|
|
32
32
|
&:hover:not(:has(input:disabled)) {
|
|
33
33
|
cursor: pointer;
|
|
34
|
-
background: ${
|
|
34
|
+
background: ${n.ui.background__light_medium.rgba};
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
${({$variant:t})=>t?"dirty"===t?c`
|
|
38
|
-
box-shadow: inset 0 -2px 0 0 ${
|
|
38
|
+
box-shadow: inset 0 -2px 0 0 ${o[t]};
|
|
39
39
|
&:hover {
|
|
40
|
-
box-shadow: inset 0 -2px 0 0 ${
|
|
40
|
+
box-shadow: inset 0 -2px 0 0 ${o[t]};
|
|
41
41
|
}
|
|
42
42
|
`:c`
|
|
43
|
-
outline: 1px solid ${
|
|
43
|
+
outline: 1px solid ${o[t]};
|
|
44
44
|
&:hover {
|
|
45
|
-
box-shadow: inset 0 -1px 0 0 ${
|
|
45
|
+
box-shadow: inset 0 -1px 0 0 ${o[t]};
|
|
46
46
|
}
|
|
47
47
|
`:c`
|
|
48
|
-
box-shadow: inset 0 -1px 0 0 ${
|
|
48
|
+
box-shadow: inset 0 -1px 0 0 ${n.text.static_icons__tertiary.rgba};
|
|
49
49
|
&:hover {
|
|
50
50
|
box-shadow: inset 0 -2px 0 0
|
|
51
|
-
${
|
|
51
|
+
${n.text.static_icons__tertiary.rgba};
|
|
52
52
|
}
|
|
53
53
|
`}
|
|
54
54
|
|
|
55
|
-
${({$lightBackground:t})=>t?`background-color: ${
|
|
55
|
+
${({$lightBackground:t})=>t?`background-color: ${n.ui.background__default.rgba}`:`background-color: ${n.ui.background__light.rgba}`};
|
|
56
56
|
|
|
57
57
|
&[aria-expanded='true'] {
|
|
58
|
-
box-shadow: inset 0 -2px 0 0 ${
|
|
58
|
+
box-shadow: inset 0 -2px 0 0 ${n.interactive.primary__resting.rgba};
|
|
59
59
|
}
|
|
60
60
|
&:has(input:disabled) {
|
|
61
61
|
outline: none;
|
|
@@ -68,7 +68,7 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
|
|
|
68
68
|
> svg:not([role='progressbar']) {
|
|
69
69
|
cursor: pointer;
|
|
70
70
|
&:hover {
|
|
71
|
-
background: ${
|
|
71
|
+
background: ${n.interactive.primary__hover_alt.rgba};
|
|
72
72
|
border-radius: 50%;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
@@ -78,13 +78,13 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
|
|
|
78
78
|
box-shadow: none;
|
|
79
79
|
> svg:not([role='progressbar']) {
|
|
80
80
|
cursor: not-allowed;
|
|
81
|
-
fill: ${
|
|
81
|
+
fill: ${n.interactive.disabled__text.rgba};
|
|
82
82
|
&:hover {
|
|
83
83
|
background: transparent;
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
> label {
|
|
87
|
-
color: ${
|
|
87
|
+
color: ${n.interactive.disabled__text.rgba};
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
|
|
@@ -105,7 +105,7 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
|
|
|
105
105
|
flex-grow: 1;
|
|
106
106
|
padding: 0;
|
|
107
107
|
font-family: 'Equinor', sans-serif;
|
|
108
|
-
color: ${
|
|
108
|
+
color: ${n.text.static_icons__default.rgba};
|
|
109
109
|
outline: none;
|
|
110
110
|
border: none;
|
|
111
111
|
}
|
|
@@ -120,14 +120,14 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
|
|
|
120
120
|
}
|
|
121
121
|
&:has(input:disabled) {
|
|
122
122
|
> p {
|
|
123
|
-
color: ${
|
|
123
|
+
color: ${n.interactive.disabled__text.rgba};
|
|
124
124
|
}
|
|
125
125
|
> .amplify-combo-box-chip {
|
|
126
126
|
cursor: not-allowed;
|
|
127
|
-
background: ${
|
|
128
|
-
color: ${
|
|
127
|
+
background: ${n.interactive.disabled__fill.rgba};
|
|
128
|
+
color: ${n.interactive.disabled__text.rgba};
|
|
129
129
|
> svg {
|
|
130
|
-
fill: ${
|
|
130
|
+
fill: ${n.interactive.disabled__text.rgba};
|
|
131
131
|
&:hover {
|
|
132
132
|
cursor: not-allowed;
|
|
133
133
|
background: none;
|
|
@@ -143,7 +143,7 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
|
|
|
143
143
|
width: 24px;
|
|
144
144
|
height: 24px;
|
|
145
145
|
svg {
|
|
146
|
-
fill: ${
|
|
146
|
+
fill: ${n.text.static_icons__secondary.rgba};
|
|
147
147
|
}
|
|
148
148
|
&:after {
|
|
149
149
|
width: 24px;
|
|
@@ -151,7 +151,7 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
|
|
|
151
151
|
left: 0;
|
|
152
152
|
}
|
|
153
153
|
`,m=d(l)`
|
|
154
|
-
background: ${({$tryingToRemove:t,$lightBackground:e})=>t?
|
|
154
|
+
background: ${({$tryingToRemove:t,$lightBackground:e})=>t?n.interactive.primary__hover_alt.rgba:e?n.ui.background__light.rgba:n.ui.background__default.rgba} !important;
|
|
155
155
|
`,x=d(e.Item)`
|
|
156
156
|
flex-grow: 1;
|
|
157
157
|
${({$paddedLeft:t})=>t&&"margin-left: 36px"};
|
|
@@ -163,18 +163,18 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
|
|
|
163
163
|
}
|
|
164
164
|
|
|
165
165
|
&:hover {
|
|
166
|
-
background: ${
|
|
166
|
+
background: ${n.interactive.primary__hover_alt.rgba};
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
&:focus-visible {
|
|
170
|
-
outline: 2px dashed ${
|
|
170
|
+
outline: 2px dashed ${n.interactive.primary__resting.rgba};
|
|
171
171
|
}
|
|
172
172
|
|
|
173
173
|
${({$selected:t})=>t?c`
|
|
174
|
-
background: ${
|
|
174
|
+
background: ${n.interactive.primary__selected_highlight.rgba};
|
|
175
175
|
|
|
176
176
|
&:hover {
|
|
177
|
-
background: ${
|
|
177
|
+
background: ${n.interactive.primary__selected_hover.rgba};
|
|
178
178
|
}
|
|
179
179
|
`:""}}
|
|
180
180
|
`,_=d.hr`
|
|
@@ -183,14 +183,14 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
|
|
|
183
183
|
width: ${s.x_large};
|
|
184
184
|
`,$=d(r)`
|
|
185
185
|
position: absolute;
|
|
186
|
-
color: ${
|
|
186
|
+
color: ${n.text.static_icons__tertiary.rgba};
|
|
187
187
|
top: calc(50%);
|
|
188
188
|
transform: translate(0, -50%);
|
|
189
189
|
`,f=d($)`
|
|
190
190
|
white-space: nowrap;
|
|
191
191
|
overflow: hidden;
|
|
192
192
|
text-overflow: ellipsis;
|
|
193
|
-
color: ${
|
|
193
|
+
color: ${n.text.static_icons__default.rgba};
|
|
194
194
|
max-width: 100%;
|
|
195
195
|
`,v=d(r)`
|
|
196
196
|
margin: ${s.medium};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as t,Fragment as i,jsx as e}from"react/jsx-runtime";import{useMemo as
|
|
1
|
+
import{jsxs as t,Fragment as i,jsx as e}from"react/jsx-runtime";import{useState as r,useEffect as n,useMemo as o}from"react";import{useTutorials as s}from"@equinor/subsurface-app-management";import{useReversedScrollY as h}from"./hooks/useReversedScrollY.js";import{TutorialPopover as d}from"./TutorialPopover/TutorialPopover.js";import{TUTORIAL_HIGHLIGHT_ANIMATION_PROPS as l}from"./TutorialHighlightingProvider.constants.js";import"../../atoms/style/colors.js";import{spacings as a}from"../../atoms/style/spacings.js";import{getHighlightElementBoundingBox as m}from"../../atoms/utils/tutorials.js";import{motion as c}from"framer-motion";import p from"styled-components";const g=p.svg`
|
|
2
2
|
position: fixed;
|
|
3
3
|
top: 0;
|
|
4
4
|
left: 0;
|
|
@@ -7,7 +7,7 @@ import{jsxs as t,Fragment as i,jsx as e}from"react/jsx-runtime";import{useMemo a
|
|
|
7
7
|
z-index: 9999999;
|
|
8
8
|
background: none;
|
|
9
9
|
pointer-events: none;
|
|
10
|
-
`,
|
|
10
|
+
`,f=p.div`
|
|
11
11
|
position: fixed;
|
|
12
12
|
top: 0;
|
|
13
13
|
left: 0;
|
|
@@ -21,4 +21,4 @@ import{jsxs as t,Fragment as i,jsx as e}from"react/jsx-runtime";import{useMemo a
|
|
|
21
21
|
height: 100vh;
|
|
22
22
|
background: none;
|
|
23
23
|
pointer-events: none;
|
|
24
|
-
`,
|
|
24
|
+
`,u=({children:a})=>{const{activeTutorial:p,activeStep:u,unseenTutorialsOnThisPage:w}=s(),v=h(),[$,j]=r({width:window.innerWidth,height:window.innerHeight});n((()=>{const t=()=>{j({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)}),[]);const x=p?[p]:w,y=o((()=>{if(p&&void 0!==u){if(!p.steps[u].highlightElement)return[];const t=m(p.id,u,$);return t?[t]:[]}return w.map((t=>{if(t.steps.at(0)?.highlightElement)return m(t.id,0,$)})).filter((t=>void 0!==t))}),[u,p,w,$]);return x.length>0?t(i,{children:[a,e(f,{children:x.map((t=>{const i=y.find((i=>i.id===t.id));return e(d,{isHighlighting:y.length>0,...t,...i},t.id)}))}),t(g,{children:[t("mask",{id:"tutorials-rectangles",children:[e("rect",{width:"100%",height:"100%",fill:"white"}),e(c.g,{style:{translateY:v},children:y.map((t=>e(c.path,{"data-testid":`tutorial-mask-${t.id}`,initial:{opacity:0,d:`M ${t.left} ${t.top} h ${t.width} v ${t.height} h -${t.width} Z`},animate:{opacity:1,d:`M ${t.left} ${t.top} h ${t.width} v ${t.height} h -${t.width} Z`},fill:"black"},t.id)))})]}),e(c.rect,{width:"100%",height:"100%",fill:"rgba(111, 111, 111, 0.35)",mask:"url(#tutorials-rectangles)",...l})]})]}):e(i,{children:a})};export{u as TutorialHighlightingProviderInner};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as t,jsx as i,Fragment as
|
|
1
|
+
import{jsxs as t,jsx as i,Fragment as e}from"react/jsx-runtime";import{useState as o}from"react";import{Card as r,Icon as n,Typography as a,Button as l}from"@equinor/eds-core-react";import{info_circle as h}from"@equinor/eds-icons";import{useTutorials as s,useTutorialStepImage as m}from"@equinor/subsurface-app-management";import{useTutorialHighlighting as d}from"../TutorialHighlightingProvider.js";import{TUTORIAL_HIGHLIGHT_ANIMATION_PROPS as g}from"../TutorialHighlightingProvider.constants.js";import{StepIndicator as c}from"./StepIndicator.js";import{elevation as p}from"../../../atoms/style/index.js";import{useTutorialPopoverPosition as u}from"./hooks/useTutorialPopoverPosition.js";import{motion as f}from"framer-motion";import v,{css as $}from"styled-components";import{spacings as x}from"../../../atoms/style/spacings.js";import{colors as y}from"../../../atoms/style/colors.js";const b=v(f(r))`
|
|
2
2
|
width: 360px;
|
|
3
3
|
padding: ${x.medium};
|
|
4
4
|
background: ${y.infographic.primary__moss_green_13.rgba};
|
|
@@ -19,18 +19,24 @@ import{jsxs as t,jsx as i,Fragment as o}from"react/jsx-runtime";import{Card as r
|
|
|
19
19
|
max-height: 170px;
|
|
20
20
|
object-fit: contain;
|
|
21
21
|
}
|
|
22
|
-
${({$highlightingElement:t})=>t
|
|
22
|
+
${({$highlightingElement:t,$highlightDirection:i})=>t&&$`
|
|
23
23
|
transform: translateX(-50%);
|
|
24
24
|
&:before {
|
|
25
25
|
z-index: -1;
|
|
26
26
|
content: '';
|
|
27
27
|
width: 32px;
|
|
28
|
-
height:
|
|
28
|
+
height: 32px;
|
|
29
29
|
background: ${y.infographic.primary__moss_green_13.rgba};
|
|
30
30
|
position: absolute;
|
|
31
|
-
top
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
${"top"===i||"bottom"===i?$`
|
|
32
|
+
left: 50%;
|
|
33
|
+
${i}: 0;
|
|
34
|
+
transform: translate(-50%, 0) rotate(45deg);
|
|
35
|
+
`:$`
|
|
36
|
+
top: 50%;
|
|
37
|
+
${i}: 0;
|
|
38
|
+
transform: translate(0, -50%) rotate(45deg);
|
|
39
|
+
`}
|
|
34
40
|
}
|
|
35
41
|
`}
|
|
36
42
|
`,_=v.div`
|
|
@@ -42,4 +48,4 @@ import{jsxs as t,jsx as i,Fragment as o}from"react/jsx-runtime";import{Card as r
|
|
|
42
48
|
margin-right: auto;
|
|
43
49
|
}
|
|
44
50
|
}
|
|
45
|
-
`,k=({isHighlighting:r,id:p,top:
|
|
51
|
+
`,k=({isHighlighting:r,id:p,top:f,left:v,width:$,height:x,name:k,steps:j})=>{const{customStepContent:w}=d(),{activeTutorial:T,activeStep:C,skipTutorial:S,startTutorial:D,goToNextStep:P,goToPreviousStep:E}=s(),{data:H}=m(T?.steps.at(C)?.imgUrl??void 0),[q,I]=o(void 0),{style:z,highlightingElement:N,highlightDirection:A}=u({top:f,left:v,width:$,height:x,popoverSize:q}),B=t=>{I(t?{width:t.clientWidth,height:t.clientHeight}:void 0)},F=()=>{S(p)},U=()=>{D(p)};if(void 0!==C&&j[C].custom&&!w[j[C].id])throw new Error(`[TutorialHighlightingProvider]: Custom step content not found, tutorial ID: ${p}, step ID: ${j[C].id}`);return!N&&r?null:t(b,T&&void 0!==C?{ref:B,style:{...z,width:j[C].custom?"auto":void 0},$highlightDirection:A,$highlightingElement:N,...g,children:[j[C].custom?w[j[C].id]:t(e,{children:[t("header",{children:[i(n,{data:h,color:y.interactive.primary__resting.rgba}),i(a,{variant:"h6",children:j[C]?.title})]}),i(a,{variant:"body_short",children:j[C]?.body}),H?i("img",{src:H,alt:j[C].title}):null]}),t(_,{children:[i(l,{variant:"outlined",disabled:0===C,onClick:E,children:"Back"}),i(l,{variant:"ghost",onClick:F,children:"Cancel"}),i(l,{onClick:P,children:C===j.length-1?"Finish":"Next"})]}),i(c,{stepAmount:j.length})]}:{ref:B,style:{...z},$highlightingElement:N,$highlightDirection:A,...g,children:[t("header",{children:[i(n,{data:h,color:y.interactive.primary__resting.rgba}),i(a,{variant:"h6",children:k})]}),t(_,{children:[i(l,{variant:"ghost",onClick:F,children:"Skip"}),i(l,{onClick:U,children:"Start tour"})]})]})};export{k as TutorialPopover};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { MotionStyle } from 'framer-motion';
|
|
2
|
+
interface UseTutorialPopoverPositionArgs {
|
|
3
|
+
top?: number;
|
|
4
|
+
left?: number;
|
|
5
|
+
width?: number;
|
|
6
|
+
height?: number;
|
|
7
|
+
popoverSize?: {
|
|
8
|
+
width: number;
|
|
9
|
+
height: number;
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
export interface UseTutorialPopoverPositionReturn {
|
|
13
|
+
style: MotionStyle;
|
|
14
|
+
highlightingElement: boolean;
|
|
15
|
+
highlightDirection: 'top' | 'bottom' | 'left' | 'right';
|
|
16
|
+
}
|
|
17
|
+
export declare function useTutorialPopoverPosition({ top, left, width, height, popoverSize, }: UseTutorialPopoverPositionArgs): UseTutorialPopoverPositionReturn;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useReversedScrollY as t}from"../../hooks/useReversedScrollY.js";import{useTransform as i}from"framer-motion";const o=16;function e({top:e,left:h,width:n,height:r,popoverSize:l}){const d=t();let g=e&&r?e+r+o:void 0,s=h&&n?h+n/2:void 0;const p=!!g&&!!s;let w="top";l&&e&&r&&g&&g+l.height>window.innerHeight&&(g=e-l.height-r-40,w="bottom"),e&&r&&h&&n&&l&&s&&s-l.width/2<0&&(s=h+n+l.width/2+o,g=e-l.height/2-4,w="left"),e&&r&&h&&n&&l&&s&&s+l.width>window.innerWidth&&(s=h-l.width/2-o,g=e-l.height/2-4,w="right");const m=i(d,(t=>p&&g?t+g:null));return{style:{position:p?"absolute":void 0,top:m,left:s},highlightingElement:p,highlightDirection:w}}export{e as useTutorialPopoverPosition};
|