@equinor/amplify-component-lib 9.15.3-beta.1 → 9.16.0-beta.0

package/dist/providers/TutorialHighlightingProvider/TutorialPopover/StepIndicator.js

@@ -1,20 +0,0 @@
-import{animation as e}from"../../../atoms/style/animation.js";import{colors as t}from"../../../atoms/style/colors.js";import{spacings as n}from"../../../atoms/style/spacings.js";import{shape as r}from"../../../atoms/style/index.js";import i from"styled-components";import{jsx as a}from"react/jsx-runtime";import{useTutorials as o}from"@equinor/subsurface-app-management";const s=i.div`
-  display: grid;
-  gap: ${n.x_small};
-`,c=i.span`
-  overflow: hidden;
-  height: 4px;
-  width: 100%;
-  background: ${t.interactive.tutorial__inactive_step.rgba};
-  border-radius: ${r.rounded.borderRadius};
-  position: relative;
-  &:after {
-    content: '';
-    position: absolute;
-    background: ${t.interactive.tutorial__active_step.rgba};
-    width: 100%;
-    height: 100%;
-    transition: left ${e.transitionMS};
-    left: calc(${({$index:e,$activeIndex:t})=>(t-e)*100}%);
-  }
-`,l=({stepAmount:e})=>{let{activeStep:t}=o();return a(s,{style:{gridTemplateColumns:`repeat(${e}, 1fr)`},children:Array.from({length:e}).map((e,n)=>a(c,{$index:n,$activeIndex:t},n))})};export{l as StepIndicator};

package/dist/providers/TutorialHighlightingProvider/TutorialPopover/TutorialPopover.js

@@ -1,75 +0,0 @@
-import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}from"../../../atoms/style/spacings.js";import{elevation as n}from"../../../atoms/style/index.js";import{TUTORIAL_HIGHLIGHT_ANIMATION_PROPS as r}from"../TutorialHighlightingProvider.constants.js";import{useTutorialPopoverPosition as i}from"./hooks/useTutorialPopoverPosition.js";import{StepIndicator as a}from"./StepIndicator.js";import{useTutorialHighlighting as o}from"../TutorialHighlightingProvider.js";import{useState as s}from"react";import{Button as c,Card as l,Icon as u,Typography as d}from"@equinor/eds-core-react";import f,{css as p}from"styled-components";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{info_circle as _}from"@equinor/eds-icons";import{motion as v}from"framer-motion";import{useTutorialStepImage as y,useTutorials as b}from"@equinor/subsurface-app-management";function x(e){switch(e){case`top`:return p`
-        left: 50%;
-        top: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `;case`top-right`:return p`
-        right: 0;
-        top: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `;case`right`:return p`
-        right: 0;
-        top: 50%;
-        transform: translate(0, -50%) rotate(45deg);
-      `;case`bottom-right`:return p`
-        right: 0;
-        bottom: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `;case`bottom`:return p`
-        left: 50%;
-        bottom: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `;case`bottom-left`:return p`
-        left: 24px;
-        bottom: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `;case`left`:return p`
-        left: 0;
-        top: 50%;
-        transform: translate(0, -50%) rotate(45deg);
-      `;case`top-left`:return p`
-        left: 24px;
-        top: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `}}const S=f(v(l))`
-  width: 360px;
-  padding: ${t.medium};
-  background: ${e.ui.background__tutorial_card.rgba};
-  display: flex;
-  flex-direction: column;
-  gap: ${t.medium};
-  transition:
-    top 400ms,
-    left 400ms;
-  box-shadow: ${n.above_scrim};
-  pointer-events: auto;
-  > header {
-    display: flex;
-    gap: ${t.small};
-    align-items: center;
-  }
-  > img {
-    max-height: 170px;
-    object-fit: contain;
-  }
-  ${({$highlightingElement:t,$caretPosition:n})=>t&&p`
-      transform: translateX(-50%);
-      &:before {
-        z-index: -1;
-        content: '';
-        width: 32px;
-        height: 32px;
-        background: ${e.ui.background__tutorial_card.rgba};
-        position: absolute;
-        ${x(n)}
-      }
-    `}
-`,C=f.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: ${t.small};
-  &:has(> :last-child:nth-child(3)) {
-    > button:first-child {
-      margin-right: auto;
-    }
-  }
-`,w=({contentRef:t,isHighlighting:n,id:l,top:f,left:p,width:v,height:x,name:w,steps:T})=>{let{customStepContent:E}=o(),{activeTutorial:D,activeStep:O,skipTutorial:k,startTutorial:A,goToNextStep:j,goToPreviousStep:M}=b(),{data:N}=y(D?.steps.at(O)?.imgUrl??void 0),[P,F]=s(void 0),{style:I,highlightingElement:L,caretPosition:R}=i({contentRef:t,top:f,left:p,width:v,height:x,popoverSize:P}),z=e=>{if(!e){F(void 0);return}F({width:e.clientWidth,height:e.clientHeight})},B=()=>{k(l)},V=()=>{A(l)};if(O!==void 0&&T[O].custom&&!E[T[O].id])throw Error(`[TutorialHighlightingProvider]: Custom step content not found, tutorial ID: ${l}, step ID: ${T[O].id}`);return!L&&n?null:!D||O===void 0?g(S,{ref:z,style:{...I},$highlightingElement:L,$caretPosition:R,...r,children:[g(`header`,{children:[h(u,{data:_,color:e.interactive.primary__resting.rgba}),h(d,{variant:`h6`,children:w})]}),g(C,{children:[h(c,{variant:`ghost`,onClick:B,children:`Skip`}),h(c,{onClick:V,children:`Start tour`})]})]}):g(S,{ref:z,style:{...I,width:T[O].custom?`auto`:void 0},$caretPosition:R,$highlightingElement:L,...r,children:[T[O].custom?E[T[O].id]:g(m,{children:[g(`header`,{children:[h(u,{data:_,color:e.interactive.primary__resting.rgba}),h(d,{variant:`h6`,children:T[O]?.title})]}),h(d,{variant:`body_short`,children:T[O]?.body}),N?h(`img`,{src:N,alt:T[O].title}):null]}),g(C,{children:[h(c,{variant:`outlined`,disabled:O===0,onClick:M,children:`Back`}),h(c,{variant:`ghost`,onClick:B,children:`Cancel`}),h(c,{onClick:j,children:O===T.length-1?`Finish`:`Next`})]}),h(a,{stepAmount:T.length})]})};export{w as TutorialPopover};

package/dist/providers/TutorialHighlightingProvider/TutorialPopover/hooks/useTutorialPopoverPosition.js

@@ -1 +0,0 @@
-import{useReversedScrollY as e}from"../../hooks/useReversedScrollY.js";import{useTransform as t}from"framer-motion";function n({top:n,left:r,width:i,height:a,popoverSize:o,contentRef:s}){let c=e(s),l=n&&a?n+a+16:void 0,u=r&&i?r+i/2:void 0,d=!!l&&!!u,f=`top`,p=(o?.width??0)/2+16,m=window.innerWidth-16,h=window.innerHeight-16,g=n!==void 0&&a!==void 0&&r!==void 0&&i!==void 0&&u!==void 0&&o!==void 0&&u<o.width/2,_=n!==void 0&&a!==void 0&&r!==void 0&&i!==void 0&&u!==void 0&&o!==void 0&&u+o.width>window.innerWidth;g?(u=r+i+o.width/2+16,l=n-o.height/2-16/4,f=`left`):_&&(u=r-o.width/2-16,l=n-o.height/2-16/4,f=`right`);let v=n!==void 0&&a!==void 0&&l!==void 0&&o!==void 0&&n+a/2+o.height>=window.innerHeight,y=n!==void 0&&a!==void 0&&l!==void 0&&o!==void 0&&l<o.height;y?l=n+a+16:v&&(l=n-o.height-a-32),g&&(y||v)?u=r+o?.width/2:_&&(y||v)&&(u=r+i-o?.width/2),y&&g?f=`top-left`:y&&_&&(f=`top-right`),v&&g?f=`bottom-left`:v&&_?f=`bottom-right`:v&&(f=`bottom`);let b=t(c,e=>{if(!d||!l)return null;let t=e+l;return t<32?32:t>h?h:t});return u&&u<p?u=p:u&&u>m&&(u=m),{style:{position:d?`absolute`:void 0,top:b,left:u},highlightingElement:d,caretPosition:f}}export{n as useTutorialPopoverPosition};

package/dist/providers/TutorialHighlightingProvider/hooks/useReversedScrollY.js

@@ -1 +0,0 @@
-import{useScroll as e,useTransform as t}from"framer-motion";function n(n){let{scrollY:r}=e({container:n});return t(r,e=>e>0?e*-1:0)}export{n as useReversedScrollY};