@bikdotai/bik-component-library 0.0.744-beta.1 → 0.0.744-beta.10
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/cjs/assets/icons/ActiveChecklistIcon.d.ts +3 -0
- package/dist/cjs/assets/icons/ActiveChecklistIcon.js +1 -0
- package/dist/cjs/assets/icons/CheckIndicatorIcon.d.ts +1 -0
- package/dist/cjs/assets/icons/CheckIndicatorIcon.js +1 -0
- package/dist/cjs/assets/icons/CompletedChecklistIcon.d.ts +3 -0
- package/dist/cjs/assets/icons/CompletedChecklistIcon.js +1 -0
- package/dist/cjs/assets/icons/CustomiseIcon.d.ts +7 -0
- package/dist/cjs/assets/icons/EnableIcon.d.ts +7 -0
- package/dist/cjs/assets/icons/GoLiveIcon.d.ts +7 -0
- package/dist/cjs/assets/icons/InactiveChecklistIcon.d.ts +3 -0
- package/dist/cjs/assets/icons/InactiveChecklistIcon.js +1 -0
- package/dist/cjs/assets/icons/NudgesIcon.d.ts +7 -0
- package/dist/cjs/assets/icons/OrderTrackingIcon.d.ts +7 -0
- package/dist/cjs/assets/icons/ProgressBadgeIcon.d.ts +3 -0
- package/dist/cjs/assets/icons/ShoppingIcon.d.ts +7 -0
- package/dist/cjs/assets/icons/SmallCheckIcon.d.ts +3 -0
- package/dist/cjs/assets/icons/SmallCheckIcon.js +1 -0
- package/dist/cjs/assets/icons/SupportIcon.d.ts +7 -0
- package/dist/cjs/assets/icons/TrainingIcon.d.ts +7 -0
- package/dist/cjs/components/BikGiftedChat/Bubble/Bubble.d.ts +5 -0
- package/dist/cjs/components/BikGiftedChat/Bubble/Bubble.js +1 -0
- package/dist/cjs/components/BikGiftedChat/Bubble/types.d.ts +25 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/Day.d.ts +15 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/Day.js +1 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.d.ts +5 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/messageHelpers.d.ts +6 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/messageHelpers.js +1 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/scrollHooks.d.ts +10 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/scrollHooks.js +1 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/types.d.ts +153 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/types.js +1 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/utils.d.ts +22 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/utils.js +1 -0
- package/dist/cjs/components/BikGiftedChat/index.d.ts +5 -0
- package/dist/cjs/components/BikGiftedChat/types.d.ts +24 -0
- package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.d.ts +10 -0
- package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.js +1 -0
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.d.ts +67 -0
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.js +1 -0
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.d.ts +30 -0
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.js +133 -0
- package/dist/cjs/components/ProgressChecklist/ProgressStepper.d.ts +14 -0
- package/dist/cjs/components/ProgressChecklist/ProgressStepper.js +1 -0
- package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.d.ts +19 -0
- package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.js +1 -0
- package/dist/cjs/components/ProgressChecklist/index.d.ts +2 -0
- package/dist/cjs/components/QueryBuilder/helpers/MetaCustomProcessor.d.ts +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/constants/dimensions.d.ts +25 -99
- package/dist/cjs/components/feature-announcements/constants/dimensions.js +1 -1
- package/dist/cjs/components/feature-announcements/styles/joyride.styles.d.ts +2 -2
- package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.d.ts +2 -18
- package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.js +1 -1
- package/dist/cjs/components/feature-announcements/types/feature.types.d.ts +0 -13
- package/dist/cjs/components/feature-announcements/types/props.types.d.ts +2 -12
- package/dist/cjs/components/post-live-checklist/PostLiveChecklist.d.ts +23 -0
- package/dist/cjs/components/post-live-checklist/PostLiveChecklist.js +1 -0
- package/dist/cjs/components/post-live-checklist/PostLiveChecklist.stories.d.ts +12 -0
- package/dist/cjs/components/post-live-checklist/index.d.ts +2 -0
- package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.d.ts +10 -0
- package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.js +1 -0
- package/dist/cjs/components/post-live-checklist-item/index.d.ts +1 -0
- package/dist/cjs/hooks/useWindowSize.d.ts +2 -0
- package/dist/cjs/hooks/useWindowSize.js +1 -0
- package/dist/cjs/index.d.ts +4 -0
- package/dist/cjs/index.js +1 -1
- package/dist/esm/assets/icons/ActiveChecklistIcon.d.ts +3 -0
- package/dist/esm/assets/icons/ActiveChecklistIcon.js +1 -0
- package/dist/esm/assets/icons/CheckIndicatorIcon.d.ts +1 -0
- package/dist/esm/assets/icons/CheckIndicatorIcon.js +1 -0
- package/dist/esm/assets/icons/CompletedChecklistIcon.d.ts +3 -0
- package/dist/esm/assets/icons/CompletedChecklistIcon.js +1 -0
- package/dist/esm/assets/icons/CustomiseIcon.d.ts +7 -0
- package/dist/esm/assets/icons/EnableIcon.d.ts +7 -0
- package/dist/esm/assets/icons/GoLiveIcon.d.ts +7 -0
- package/dist/esm/assets/icons/InactiveChecklistIcon.d.ts +3 -0
- package/dist/esm/assets/icons/InactiveChecklistIcon.js +1 -0
- package/dist/esm/assets/icons/NudgesIcon.d.ts +7 -0
- package/dist/esm/assets/icons/OrderTrackingIcon.d.ts +7 -0
- package/dist/esm/assets/icons/ProgressBadgeIcon.d.ts +3 -0
- package/dist/esm/assets/icons/ShoppingIcon.d.ts +7 -0
- package/dist/esm/assets/icons/SmallCheckIcon.d.ts +3 -0
- package/dist/esm/assets/icons/SmallCheckIcon.js +1 -0
- package/dist/esm/assets/icons/SupportIcon.d.ts +7 -0
- package/dist/esm/assets/icons/TrainingIcon.d.ts +7 -0
- package/dist/esm/components/BikGiftedChat/Bubble/Bubble.d.ts +5 -0
- package/dist/esm/components/BikGiftedChat/Bubble/Bubble.js +1 -0
- package/dist/esm/components/BikGiftedChat/Bubble/types.d.ts +25 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/Day.d.ts +15 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/Day.js +1 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.d.ts +5 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/messageHelpers.d.ts +6 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/messageHelpers.js +1 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/scrollHooks.d.ts +10 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/scrollHooks.js +1 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/types.d.ts +153 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/types.js +1 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/utils.d.ts +22 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/utils.js +1 -0
- package/dist/esm/components/BikGiftedChat/index.d.ts +5 -0
- package/dist/esm/components/BikGiftedChat/types.d.ts +24 -0
- package/dist/esm/components/ProgressChecklist/MultiChecklistItem.d.ts +10 -0
- package/dist/esm/components/ProgressChecklist/MultiChecklistItem.js +1 -0
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.d.ts +67 -0
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.js +1 -0
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.style.d.ts +30 -0
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.style.js +133 -0
- package/dist/esm/components/ProgressChecklist/ProgressStepper.d.ts +14 -0
- package/dist/esm/components/ProgressChecklist/ProgressStepper.js +1 -0
- package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.d.ts +19 -0
- package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.js +1 -0
- package/dist/esm/components/ProgressChecklist/index.d.ts +2 -0
- package/dist/esm/components/QueryBuilder/helpers/MetaCustomProcessor.d.ts +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/constants/dimensions.d.ts +25 -99
- package/dist/esm/components/feature-announcements/constants/dimensions.js +1 -1
- package/dist/esm/components/feature-announcements/styles/joyride.styles.d.ts +2 -2
- package/dist/esm/components/feature-announcements/styles/majorPopup.styles.d.ts +2 -18
- package/dist/esm/components/feature-announcements/styles/majorPopup.styles.js +1 -1
- package/dist/esm/components/feature-announcements/types/feature.types.d.ts +0 -13
- package/dist/esm/components/feature-announcements/types/props.types.d.ts +2 -12
- package/dist/esm/components/post-live-checklist/PostLiveChecklist.d.ts +23 -0
- package/dist/esm/components/post-live-checklist/PostLiveChecklist.js +1 -0
- package/dist/esm/components/post-live-checklist/PostLiveChecklist.stories.d.ts +12 -0
- package/dist/esm/components/post-live-checklist/index.d.ts +2 -0
- package/dist/esm/components/post-live-checklist-item/PostLiveChecklistItem.d.ts +10 -0
- package/dist/esm/components/post-live-checklist-item/PostLiveChecklistItem.js +1 -0
- package/dist/esm/components/post-live-checklist-item/index.d.ts +1 -0
- package/dist/esm/hooks/useWindowSize.d.ts +2 -0
- package/dist/esm/hooks/useWindowSize.js +1 -0
- package/dist/esm/index.d.ts +4 -0
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { IMessage } from '../types';
|
|
3
|
+
export declare const BOTTOM_THRESHOLD = 100;
|
|
4
|
+
export declare const TOP_THRESHOLD = 600;
|
|
5
|
+
export declare const SCROLL_IDLE_MS = 300;
|
|
6
|
+
export declare const Constants: {
|
|
7
|
+
readonly ChatActivity: {
|
|
8
|
+
readonly Category: {
|
|
9
|
+
readonly ACTIVITY: "ACTIVITY";
|
|
10
|
+
readonly MESSAGE: "MESSAGE";
|
|
11
|
+
};
|
|
12
|
+
readonly Type: {
|
|
13
|
+
readonly PRIVATE_NOTE: "PRIVATE_NOTE";
|
|
14
|
+
readonly CALL: "CALL";
|
|
15
|
+
readonly AUTOMATION: "AUTOMATION";
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export declare const isSameDay: (a?: IMessage, b?: IMessage) => boolean;
|
|
20
|
+
export declare const normalizeRef: <T>(ref: import("react").Ref<T> | undefined, fallback: import("react").RefObject<T>) => import("react").MutableRefObject<T | null>;
|
|
21
|
+
export declare const isScrollAtBottom: (el: HTMLDivElement | null) => boolean;
|
|
22
|
+
export declare const isStringifiedArray: (value: any) => [boolean, [] | null];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{isSameDay as t}from"date-fns";const r=100,e=600,n=300,c={ChatActivity:{Category:{ACTIVITY:"ACTIVITY",MESSAGE:"MESSAGE"},Type:{PRIVATE_NOTE:"PRIVATE_NOTE",CALL:"CALL",AUTOMATION:"AUTOMATION"}}},A=(r,e)=>!(!(null==r?void 0:r.createdAt)||!(null==e?void 0:e.createdAt))&&t(new Date(r.createdAt),new Date(e.createdAt)),o=(t,r)=>{if(!t)return r;if("object"==typeof t&&null!==t&&"current"in t)return t;if("function"==typeof t){const e={current:r.current};return t(r.current),e}return r},i=t=>{if(!t)return!1;const{scrollTop:r,scrollHeight:e,clientHeight:n}=t;return r+n>=e-100},u=t=>{try{const r="string"==typeof t?JSON.parse(t):t;return[Array.isArray(r),r]}catch(t){return[!1,null]}};export{r as BOTTOM_THRESHOLD,c as Constants,n as SCROLL_IDLE_MS,e as TOP_THRESHOLD,A as isSameDay,i as isScrollAtBottom,u as isStringifiedArray,o as normalizeRef};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export type { IMessage, User, LeftRightStyle } from './types';
|
|
2
|
+
export { default as BikGiftedChat } from './GiftedChat/GiftedChat';
|
|
3
|
+
export { Bubble } from './Bubble/Bubble';
|
|
4
|
+
export type { BubbleProps } from './Bubble/types';
|
|
5
|
+
export type { GiftedChatProps, DayProps, AvatarProps as GiftedChatAvatarProps, ListViewProps, ScrollState, } from './GiftedChat/types';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export interface User {
|
|
2
|
+
_id: string | number;
|
|
3
|
+
name?: string;
|
|
4
|
+
avatar?: string | number;
|
|
5
|
+
[key: string]: any;
|
|
6
|
+
}
|
|
7
|
+
export interface IMessage<TUser extends User = User> {
|
|
8
|
+
_id: string | number;
|
|
9
|
+
text: string;
|
|
10
|
+
createdAt: Date | number | string;
|
|
11
|
+
user: TUser;
|
|
12
|
+
image?: string;
|
|
13
|
+
video?: string;
|
|
14
|
+
audio?: string;
|
|
15
|
+
system?: boolean;
|
|
16
|
+
sent?: boolean;
|
|
17
|
+
received?: boolean;
|
|
18
|
+
pending?: boolean;
|
|
19
|
+
[key: string]: any;
|
|
20
|
+
}
|
|
21
|
+
export interface LeftRightStyle<T> {
|
|
22
|
+
left?: T;
|
|
23
|
+
right?: T;
|
|
24
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { MultiChecklistItemType } from './ProgressChecklist';
|
|
3
|
+
interface MultiChecklistItemProps {
|
|
4
|
+
item: MultiChecklistItemType;
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
isOpen?: boolean;
|
|
7
|
+
onToggle?: (open: boolean) => void;
|
|
8
|
+
}
|
|
9
|
+
declare const MultiChecklistItem: React.FC<MultiChecklistItemProps>;
|
|
10
|
+
export default MultiChecklistItem;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{BikAccordion as o}from"../accordion/Accordion.js";import i from"./SimpleChecklistItem.js";const r=r=>{let{item:t,children:c,isOpen:n,onToggle:s}=r;const d="boolean"==typeof n?n:!!t.isActive,a=e(i,{header:t.header,subheader:t.subheader,icon:t.icon,activeIcon:t.activeIcon,completedIcon:t.completedIcon,isCompleted:t.isCompleted,isActive:t.isActive,tag:t.tag});return e(o,Object.assign({header:a,headerStyles:{height:"auto",cursor:"pointer"},onToggleAccordion:s||(()=>{}),isOpen:d,skipHoverHeader:!0,showBorders:!0,borderRadius:"8px"},{children:c?e("div",Object.assign({style:{border:"none",padding:16}},{children:c})):null}))};export{r as default};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ALERT_TYPES } from '../alerts';
|
|
3
|
+
export interface ChecklistItemType {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
completed?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface SingleChecklistItemType {
|
|
10
|
+
id: string;
|
|
11
|
+
header: string;
|
|
12
|
+
subheader: string;
|
|
13
|
+
icon?: React.ReactNode;
|
|
14
|
+
activeIcon?: React.ReactNode;
|
|
15
|
+
completedIcon?: React.ReactNode;
|
|
16
|
+
isActive?: boolean;
|
|
17
|
+
isCompleted?: boolean;
|
|
18
|
+
onSetup?: () => void;
|
|
19
|
+
alertText?: string | React.ReactNode;
|
|
20
|
+
alertType?: ALERT_TYPES;
|
|
21
|
+
tag?: {
|
|
22
|
+
tagText: string | number;
|
|
23
|
+
variant?: 'regular' | 'circle' | 'compressed';
|
|
24
|
+
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
25
|
+
theme?: 'light' | 'dark';
|
|
26
|
+
};
|
|
27
|
+
type: 'single';
|
|
28
|
+
buttonType?: 'primary' | 'secondary' | 'tertiary';
|
|
29
|
+
buttonText?: string;
|
|
30
|
+
buttonDisabled?: boolean;
|
|
31
|
+
hideRedirectButton?: boolean;
|
|
32
|
+
}
|
|
33
|
+
export interface MultiChecklistItemType {
|
|
34
|
+
id: string;
|
|
35
|
+
header: string;
|
|
36
|
+
subheader?: string;
|
|
37
|
+
icon?: React.ReactNode;
|
|
38
|
+
activeIcon?: React.ReactNode;
|
|
39
|
+
completedIcon?: React.ReactNode;
|
|
40
|
+
isActive?: boolean;
|
|
41
|
+
isCompleted?: boolean;
|
|
42
|
+
onSetup?: () => void;
|
|
43
|
+
tag?: {
|
|
44
|
+
tagText: string | number;
|
|
45
|
+
variant?: 'regular' | 'circle' | 'compressed';
|
|
46
|
+
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
47
|
+
theme?: 'light' | 'dark';
|
|
48
|
+
};
|
|
49
|
+
type: 'multiple';
|
|
50
|
+
alertType?: ALERT_TYPES;
|
|
51
|
+
steps?: Array<{
|
|
52
|
+
id?: string;
|
|
53
|
+
text: string;
|
|
54
|
+
onClick?: () => void;
|
|
55
|
+
isCompleted?: boolean;
|
|
56
|
+
}>;
|
|
57
|
+
buttonType?: 'primary' | 'secondary' | 'tertiary';
|
|
58
|
+
}
|
|
59
|
+
export interface ProgressChecklistProps {
|
|
60
|
+
header?: string;
|
|
61
|
+
subheader?: string;
|
|
62
|
+
items?: Array<SingleChecklistItemType | MultiChecklistItemType>;
|
|
63
|
+
progressBarColor?: string;
|
|
64
|
+
headerAction?: React.ReactNode;
|
|
65
|
+
}
|
|
66
|
+
declare const ProgressChecklist: React.FC<ProgressChecklistProps>;
|
|
67
|
+
export default ProgressChecklist;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i,useEffect as s}from"react";import{COLORS as r}from"../../constants/Theme.js";import{ActiveChecklistIcon as l}from"../../assets/icons/ActiveChecklistIcon.js";import{CompletedChecklistIcon as n}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as o}from"../../assets/icons/InactiveChecklistIcon.js";import{SmallCheckIcon as c}from"../../assets/icons/SmallCheckIcon.js";import{Alert as d}from"../alerts/Alert.js";import{ALERT_TYPES as a,CONTENT_POSITION as p}from"../alerts/AlertHelper.js";import{Button as m}from"../button/Button.js";import{ProgressBarV2 as g,ProgressBarType as h}from"../progress-bar-v2/ProgressBarV2.js";import{Tag as u}from"../tag/Tag.js";import{TitleMedium as f,BodySecondary as b,TitleSmall as y}from"../TypographyStyle.js";import v from"./MultiChecklistItem.js";import{ProgressChecklistContainer as j,HeaderSection as x,ProgressBarSection as C,SingleChecklistItem as T,SingleChecklistMainRow as I,SingleChecklistIconWrapper as A,SingleChecklistContent as k,SingleChecklistHeader as O,SingleChecklistSubheader as S,SingleChecklistActionWrapper as P,SingleChecklistAlertRow as B}from"./ProgressChecklist.style.js";import $ from"./ProgressStepper.js";const w=w=>{let{header:D,subheader:N,items:R=[],progressBarColor:V,headerAction:W}=w;const[L,M]=i(R);s((()=>{M(R)}),[R]);const E=L.filter((e=>e.isCompleted)).length,G=L.length,H=G>0?E/G*100:0;return e(j,{children:[e(x,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[t(f,{children:D}),W&&t("div",{children:W})]})),t(b,Object.assign({color:r.content.secondary},{children:N}))]}),e(C,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[t("div",Object.assign({style:{flex:1}},{children:t(g,{progress:Math.round(H),type:h.LINE,matchParentWidth:!0,showProgress:!1,color:null!=V?V:r.background.positive.vibrant,progressBarThickness:12})})),t("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e(y,Object.assign({style:{color:r.content.secondary,textAlign:"right"}},{children:[E," / ",G]}))}))]})),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:L.map((i=>{var s,r,g,h,f,b,y,j;if("single"===i.type)return e(T,Object.assign({isActive:i.isActive||!1},{children:[e(I,{children:[t(A,{children:i.isCompleted?null!==(s=i.completedIcon)&&void 0!==s?s:t(n,{}):i.isActive?null!==(r=i.activeIcon)&&void 0!==r?r:t(l,{}):null!==(g=i.icon)&&void 0!==g?g:t(o,{})}),e(k,{children:[e("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[t(O,Object.assign({completed:!!i.isCompleted,isActive:!!i.isActive},{children:i.header})),(null===(h=i.tag)||void 0===h?void 0:h.tagText)&&t(u,{tagText:i.tag.tagText,variant:i.tag.variant,type:i.tag.type,theme:i.tag.theme})]})),t(S,{children:i.subheader})]}),i.isCompleted&&!i.hideRedirectButton&&t("div",Object.assign({onClick:i.onSetup,style:{cursor:"pointer"}},{children:t(c,{style:{marginLeft:"12px"}})})),!i.isCompleted&&i.isActive&&t(P,{children:t(m,{buttonText:null!==(f=i.buttonText)&&void 0!==f?f:"Setup",buttonType:null!==(b=i.buttonType)&&void 0!==b?b:"primary",onClick:i.onSetup,disabled:null!==(y=i.buttonDisabled)&&void 0!==y&&y})})]}),i.alertText&&t(B,{children:t(d,{text:i.alertText,type:null!==(j=i.alertType)&&void 0!==j?j:a.WARNING,contentPosition:p.START})})]}),i.id);if("multiple"===i.type){const e=i.steps&&i.steps.length>0?i.steps.map(((e,t)=>{var s;return{id:null!==(s=e.id)&&void 0!==s?s:`${i.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${i.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${i.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${i.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return t(v,Object.assign({item:i},{children:t($,{steps:e})}),i.id)}}))}))]})};export{w as default};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export declare const ProgressChecklistContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const HeaderSection: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const ProgressBarSection: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const ChecklistItemsSection: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const ChecklistItem: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
completed?: boolean | undefined;
|
|
7
|
+
}, never>;
|
|
8
|
+
export declare const ChecklistCheckbox: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
9
|
+
export declare const ChecklistItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const ChecklistItemText: import("styled-components").StyledComponent<"p", any, {
|
|
11
|
+
completed?: boolean | undefined;
|
|
12
|
+
}, never>;
|
|
13
|
+
export declare const ChecklistItemDescription: import("styled-components").StyledComponent<"p", any, {
|
|
14
|
+
completed?: boolean | undefined;
|
|
15
|
+
}, never>;
|
|
16
|
+
export declare const SingleChecklistItem: import("styled-components").StyledComponent<"div", any, {
|
|
17
|
+
isActive: boolean;
|
|
18
|
+
}, never>;
|
|
19
|
+
export declare const SingleChecklistMainRow: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
20
|
+
export declare const SingleChecklistIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
21
|
+
export declare const SingleChecklistContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
22
|
+
export declare const SingleChecklistHeader: import("styled-components").StyledComponent<"div", any, {
|
|
23
|
+
completed?: boolean | undefined;
|
|
24
|
+
isActive?: boolean | undefined;
|
|
25
|
+
}, never>;
|
|
26
|
+
export declare const SingleChecklistSubheader: import("styled-components").StyledComponent<"div", any, {
|
|
27
|
+
isActive?: boolean | undefined;
|
|
28
|
+
}, never>;
|
|
29
|
+
export declare const SingleChecklistActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
30
|
+
export declare const SingleChecklistAlertRow: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const o=e.div`
|
|
2
|
+
border-radius: 8px;
|
|
3
|
+
border: 1px solid #e0e0e0;
|
|
4
|
+
padding: 24px;
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
gap: 10px;
|
|
8
|
+
background: ${i.surface.standard};
|
|
9
|
+
|
|
10
|
+
.accordion__overview {
|
|
11
|
+
padding: 16px !important;
|
|
12
|
+
border-bottom: none;
|
|
13
|
+
}
|
|
14
|
+
`,r=e.div`
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
gap: 8px;
|
|
18
|
+
`,t=e.div`
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: row;
|
|
21
|
+
gap: 12px;
|
|
22
|
+
`;e.div`
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
gap: 16px;
|
|
26
|
+
overflow-y: auto;
|
|
27
|
+
flex: 1;
|
|
28
|
+
|
|
29
|
+
&::-webkit-scrollbar {
|
|
30
|
+
width: 6px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&::-webkit-scrollbar-track {
|
|
34
|
+
background: transparent;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&::-webkit-scrollbar-thumb {
|
|
38
|
+
background: ${i.stroke.primary};
|
|
39
|
+
border-radius: 3px;
|
|
40
|
+
}
|
|
41
|
+
`,e.div`
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: flex-start;
|
|
44
|
+
gap: 12px;
|
|
45
|
+
padding: 12px;
|
|
46
|
+
background: ${e=>e.completed?"#F0F7F4":i.surface.standard};
|
|
47
|
+
border: 1px solid
|
|
48
|
+
${e=>e.completed?"#D4E9E3":i.stroke.primary};
|
|
49
|
+
border-radius: 6px;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
transition: all 0.2s ease;
|
|
52
|
+
|
|
53
|
+
&:hover {
|
|
54
|
+
background: ${e=>e.completed?"#E8F4F0":i.background.base};
|
|
55
|
+
}
|
|
56
|
+
`,e.input`
|
|
57
|
+
width: 18px;
|
|
58
|
+
height: 18px;
|
|
59
|
+
margin-top: 2px;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
flex-shrink: 0;
|
|
62
|
+
`,e.div`
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-direction: column;
|
|
65
|
+
gap: 4px;
|
|
66
|
+
flex: 1;
|
|
67
|
+
`,e.p`
|
|
68
|
+
margin: 0;
|
|
69
|
+
font-size: 14px;
|
|
70
|
+
font-weight: 500;
|
|
71
|
+
line-height: 20px;
|
|
72
|
+
color: ${e=>e.completed?i.content.secondary:i.content.primary};
|
|
73
|
+
text-decoration: ${e=>e.completed?"line-through":"none"};
|
|
74
|
+
`,e.p`
|
|
75
|
+
margin: 0;
|
|
76
|
+
font-size: 12px;
|
|
77
|
+
font-weight: 400;
|
|
78
|
+
line-height: 16px;
|
|
79
|
+
color: ${i.content.secondary};
|
|
80
|
+
opacity: ${e=>e.completed?.6:1};
|
|
81
|
+
`;const n=e.div`
|
|
82
|
+
border-radius: 8px;
|
|
83
|
+
border: 1px solid
|
|
84
|
+
${e=>e.isActive?i.stroke.primary:"#E0E0E0"};
|
|
85
|
+
padding: 16px;
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-direction: column;
|
|
88
|
+
gap: 12px;
|
|
89
|
+
background: ${i.surface.standard};
|
|
90
|
+
transition: all 0.2s ease;
|
|
91
|
+
|
|
92
|
+
&:hover {
|
|
93
|
+
border-color: ${e=>e.isActive?i.stroke.primary:"#D0D0D0"};
|
|
94
|
+
}
|
|
95
|
+
`,p=e.div`
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
gap: 16px;
|
|
99
|
+
width: 100%;
|
|
100
|
+
`,a=e.div`
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
flex-shrink: 0;
|
|
105
|
+
`,d=e.div`
|
|
106
|
+
display: flex;
|
|
107
|
+
flex-direction: column;
|
|
108
|
+
gap: 4px;
|
|
109
|
+
flex: 1;
|
|
110
|
+
`,l=e.div`
|
|
111
|
+
font-size: 16px;
|
|
112
|
+
font-weight: 600;
|
|
113
|
+
line-height: 24px;
|
|
114
|
+
color: ${e=>e.completed?i.background.positive.vibrant:e.isActive?i.content.primary:i.content.placeholder} !important;
|
|
115
|
+
margin: 0;
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: row;
|
|
118
|
+
gap: 12px;
|
|
119
|
+
`,c=e.div`
|
|
120
|
+
font-size: 14px;
|
|
121
|
+
font-weight: 400;
|
|
122
|
+
line-height: 20px;
|
|
123
|
+
color: ${e=>e.isActive?i.content.secondary:i.content.placeholder};
|
|
124
|
+
margin: 0;
|
|
125
|
+
`,s=e.div`
|
|
126
|
+
display: flex;
|
|
127
|
+
align-items: center;
|
|
128
|
+
gap: 8px;
|
|
129
|
+
flex-shrink: 0;
|
|
130
|
+
`,x=e.div`
|
|
131
|
+
width: 100%;
|
|
132
|
+
margin-top: 8px;
|
|
133
|
+
`;export{r as HeaderSection,t as ProgressBarSection,o as ProgressChecklistContainer,s as SingleChecklistActionWrapper,x as SingleChecklistAlertRow,d as SingleChecklistContent,l as SingleChecklistHeader,a as SingleChecklistIconWrapper,n as SingleChecklistItem,p as SingleChecklistMainRow,c as SingleChecklistSubheader};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface StepItem {
|
|
3
|
+
id?: string;
|
|
4
|
+
text: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
isCompleted?: boolean;
|
|
8
|
+
}
|
|
9
|
+
interface ProgressStepperProps {
|
|
10
|
+
steps?: StepItem[];
|
|
11
|
+
onStepClick?: (id: string) => void;
|
|
12
|
+
}
|
|
13
|
+
declare const _default: React.NamedExoticComponent<ProgressStepperProps>;
|
|
14
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i,{useState as n}from"react";import{COLORS as l}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";const o=o=>{let{steps:s=[],onStepClick:r}=o;var a,c;const h=s.length>0?s:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[p,g]=n(null!==(c=null===(a=h[0])||void 0===a?void 0:a.id)&&void 0!==c?c:null);return e("div",Object.assign({style:{paddingLeft:52}},{children:e("div",Object.assign({style:{margin:0,padding:0,display:"flex",flexDirection:"column",gap:12}},{children:h.map(((n,o)=>{var s,a,c,v,u,x,m;return t(i.Fragment,{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var i;const l=0===o||!0===(null===(i=h[o-1])||void 0===i?void 0:i.isCompleted),d=!0===n.isCompleted;return e("div",d?Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:t("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",fill:"#EFE6F9"}),e("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",stroke:"#4B1583"}),e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.8047 7.52851C18.0651 7.78886 18.0651 8.21097 17.8047 8.47132L10.4714 15.8047C10.2111 16.065 9.78894 16.065 9.5286 15.8047L6.19526 12.4713C5.93491 12.211 5.93491 11.7889 6.19526 11.5285C6.45561 11.2682 6.87772 11.2682 7.13807 11.5285L10 14.3904L16.8619 7.52851C17.1223 7.26816 17.5444 7.26816 17.8047 7.52851Z",fill:"#4B1583"})]}))}):Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:l?"#4B1583":"transparent",color:l?"#FFFFFF":"#BDBDBD",border:"1px solid "+(l?"#4B1583":"#E0E0E0"),fontSize:12,lineHeight:"12px",flex:"0 0 24px"},"aria-hidden":!0},{children:e("span",Object.assign({style:{fontSize:12,fontWeight:500}},{children:o+1}))}))})(),e("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(a=null!==(s=n.label)&&void 0!==s?s:n.text)&&void 0!==a?a:`step ${o+1}`}`},{children:e(d,{buttonText:null!==(v=null!==(c=n.label)&&void 0!==c?c:n.text)&&void 0!==v?v:`Step ${o+1}`,buttonType:"text",buttonTextColor:n.isCompleted?l.text.secondary:0===o||!0===(null===(u=h[o-1])||void 0===u?void 0:u.isCompleted)?l.stroke.brand:l.content.inactive,matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,t;g(null!==(e=n.id)&&void 0!==e?e:p),n.isCompleted||0!==o&&!0!==(null===(t=h[o-1])||void 0===t?void 0:t.isCompleted)||(n.onClick?n.onClick():n.id&&(null==r||r(n.id)))}})})),!n.isCompleted&&(0===o||!0===(null===(x=h[o-1])||void 0===x?void 0:x.isCompleted))&&e("div",Object.assign({style:{width:20,height:20,display:"flex",alignItems:"center",justifyContent:"center"},"aria-hidden":!0},{children:e("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.83333 6.66667C5.3731 6.66667 5 6.29357 5 5.83333C5 5.3731 5.3731 5 5.83333 5H14.1667C14.6269 5 15 5.3731 15 5.83333V14.1667C15 14.6269 14.6269 15 14.1667 15C13.7064 15 13.3333 14.6269 13.3333 14.1667V7.84518L6.42259 14.7559C6.09715 15.0814 5.56951 15.0814 5.24408 14.7559C4.91864 14.4305 4.91864 13.9028 5.24408 13.5774L12.1548 6.66667H5.83333Z",fill:"#4B1583"})}))}))]})),o!==h.length-1&&e("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(m=n.id)&&void 0!==m?m:`step-${o}`)}))}))}))};var s=i.memo(o);export{s as default};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface TagProps {
|
|
3
|
+
tagText: string | number;
|
|
4
|
+
variant?: 'regular' | 'circle' | 'compressed';
|
|
5
|
+
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
6
|
+
theme?: 'light' | 'dark';
|
|
7
|
+
}
|
|
8
|
+
interface SimpleChecklistItemProps {
|
|
9
|
+
header: string;
|
|
10
|
+
subheader?: string;
|
|
11
|
+
icon?: React.ReactNode;
|
|
12
|
+
activeIcon?: React.ReactNode;
|
|
13
|
+
completedIcon?: React.ReactNode;
|
|
14
|
+
isActive?: boolean;
|
|
15
|
+
isCompleted?: boolean;
|
|
16
|
+
tag?: TagProps;
|
|
17
|
+
}
|
|
18
|
+
declare const SimpleChecklistItem: React.FC<SimpleChecklistItemProps>;
|
|
19
|
+
export default SimpleChecklistItem;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ActiveChecklistIcon as i}from"../../assets/icons/ActiveChecklistIcon.js";import{CompletedChecklistIcon as s}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as c}from"../../assets/icons/InactiveChecklistIcon.js";import{Tag as n}from"../tag/Tag.js";import{SingleChecklistMainRow as r,SingleChecklistIconWrapper as l,SingleChecklistContent as o,SingleChecklistHeader as a,SingleChecklistSubheader as m}from"./ProgressChecklist.style.js";const d=d=>{let{header:h,subheader:p,icon:g,activeIcon:v,completedIcon:j,isActive:f,isCompleted:u,tag:I}=d;return e("div",{children:t(r,{children:[e(l,{children:u?null!=j?j:e(s,{}):f?null!=v?v:e(i,{}):null!=g?g:e(c,{})}),t(o,{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e(a,Object.assign({completed:u,isActive:f},{children:h})),(null==I?void 0:I.tagText)&&e(n,{tagText:I.tagText,variant:I.variant,type:I.type,theme:I.theme})]})),p&&e(m,Object.assign({isActive:f},{children:p}))]})]})})};export{d as default};
|
|
@@ -36,7 +36,7 @@ export declare class MetaCustomProcessor {
|
|
|
36
36
|
value: {
|
|
37
37
|
operator: string;
|
|
38
38
|
dataType: import("../types").QueryBuilderConnectorType;
|
|
39
|
-
value?: string | number | string[] | number[] | Date
|
|
39
|
+
value?: string | number | Date | string[] | number[] | Date[] | undefined;
|
|
40
40
|
};
|
|
41
41
|
key: string;
|
|
42
42
|
refresh?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as n,useRef as s,useEffect as o}from"react";import{TEXT as r}from"./constants/index.js";import{getMajorPopupStyles as i}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as a}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as l,calculateCloseTransform as c,executeAfterAnimation as u}from"./utils/animationHelpers.js";import{findWhatsNewButton as g}from"./utils/elementHelpers.js";const b=b=>{let{feature:p,currentIndex:m,totalFeatures:d,onSkip:j,onExplore:v,onPrevious:y,onNext:O,setIsClosing:T}=b;const[h,E]=n(!1),[f,B]=n(!1),[I,x]=n(""),P=s(null);o((()=>{h&&B(!0)}),[h]);const C=i(f,I);return t("div",Object.assign({ref:P,style:C.container},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{l(P.current);const e=g();if(e&&P.current){const t=c(P.current,e);x(t)}else x("scale(0)");null==T||T(!0),E(!0),u(t)})(j)},style:C.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,C.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,C.skipButton.base)},{children:r.SKIP_BUTTON})),e("div",Object.assign({style:C.imageContainer},{children:p.displayImage?e("img",{src:p.displayImage,alt:p.title,style:C.image,onError:t=>{p.image&&(t.target.src=p.image)}}):e("div",Object.assign({style:C.imagePlaceholder},{children:r.FEATURE_PREVIEW_PLACEHOLDER}))})),t("div",Object.assign({style:C.contentContainer},{children:[t("div",{children:[e("h3",Object.assign({style:C.title},{children:p.title})),e("div",{style:C.content,dangerouslySetInnerHTML:{__html:a(p.content||p.body||"")}}),e("button",Object.assign({onClick:()=>{v(),l(P.current);const t=g();if(t&&P.current){const e=c(P.current,t);x(e)}else x("scale(0)");null==T||T(!0),E(!0)},style:C.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,C.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,C.exploreButton.base)},{children:p.buttonText||r.DEFAULT_BUTTON_TEXT}))]}),d>1&&t("div",Object.assign({style:C.navigationContainer},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),y()},disabled:0===m,style:C.navigationButton(0===m).base,onMouseEnter:t=>{0!==m&&Object.assign(t.currentTarget.style,C.navigationButton(!1).hover)},onMouseLeave:t=>{0!==m&&Object.assign(t.currentTarget.style,C.navigationButton(!1).base)}},{children:r.NAVIGATION_PREVIOUS})),e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),O()},disabled:m===d-1,style:C.navigationButton(m===d-1).base,onMouseEnter:t=>{m!==d-1&&Object.assign(t.currentTarget.style,C.navigationButton(!1).hover)},onMouseLeave:t=>{m!==d-1&&Object.assign(t.currentTarget.style,C.navigationButton(m===d-1).base)}},{children:r.NAVIGATION_NEXT}))]}))]}))]}))};export{b as default};
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Popup dimension constants
|
|
3
|
+
*/
|
|
1
4
|
export declare const POPUP_DIMENSIONS: {
|
|
2
5
|
readonly MAJOR: {
|
|
3
|
-
readonly
|
|
4
|
-
readonly
|
|
5
|
-
readonly imageWidth:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
readonly width: 959;
|
|
7
|
+
readonly height: 274;
|
|
8
|
+
readonly imageWidth: 480;
|
|
9
|
+
readonly imageHeight: 274;
|
|
10
|
+
readonly imageInnerWidth: 464;
|
|
11
|
+
readonly imageInnerHeight: 258;
|
|
12
|
+
readonly imagePlaceholderWidth: 290;
|
|
13
|
+
readonly imagePlaceholderHeight: 258;
|
|
10
14
|
};
|
|
11
15
|
readonly MINOR: {
|
|
12
16
|
readonly width: 519;
|
|
@@ -16,41 +20,20 @@ export declare const POPUP_DIMENSIONS: {
|
|
|
16
20
|
readonly badgeHeight: 27;
|
|
17
21
|
};
|
|
18
22
|
};
|
|
19
|
-
export declare const TEXT_LIMITS: {
|
|
20
|
-
readonly MAJOR: {
|
|
21
|
-
readonly TITLE: {
|
|
22
|
-
readonly MAX_LINES: 2;
|
|
23
|
-
};
|
|
24
|
-
readonly CONTENT: {
|
|
25
|
-
readonly MAX_LINES: 4;
|
|
26
|
-
readonly MAX_CHARS: 360;
|
|
27
|
-
readonly CHARS_PER_LINE: 72;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
23
|
/**
|
|
32
24
|
* Spacing constants
|
|
33
25
|
*/
|
|
34
26
|
export declare const SPACING: {
|
|
35
27
|
readonly MAJOR: {
|
|
36
|
-
readonly
|
|
37
|
-
readonly
|
|
38
|
-
readonly
|
|
39
|
-
readonly
|
|
40
|
-
readonly
|
|
41
|
-
readonly
|
|
42
|
-
readonly
|
|
43
|
-
readonly
|
|
44
|
-
readonly
|
|
45
|
-
readonly imagePadding: "0px";
|
|
46
|
-
readonly titlePadding: "0 0 0px 0";
|
|
47
|
-
readonly buttonMarginTop: "0px";
|
|
48
|
-
readonly skipButtonPadding: "2px 4px";
|
|
49
|
-
readonly skipButtonTop: "8px";
|
|
50
|
-
readonly skipButtonRight: "8px";
|
|
51
|
-
readonly navigationBottom: "0px";
|
|
52
|
-
readonly navigationRight: "0px";
|
|
53
|
-
readonly navigationGap: "4px";
|
|
28
|
+
readonly contentMargin: "0 8px 0 0";
|
|
29
|
+
readonly imagePadding: "8px";
|
|
30
|
+
readonly titlePadding: "36px 0 0 0";
|
|
31
|
+
readonly buttonMarginTop: "16px";
|
|
32
|
+
readonly skipButtonTop: "10px";
|
|
33
|
+
readonly skipButtonRight: "10px";
|
|
34
|
+
readonly navigationBottom: "16px";
|
|
35
|
+
readonly navigationRight: "16px";
|
|
36
|
+
readonly navigationGap: "8px";
|
|
54
37
|
};
|
|
55
38
|
readonly MINOR: {
|
|
56
39
|
readonly imageMargin: "13px 10px 13px 10px";
|
|
@@ -60,71 +43,14 @@ export declare const SPACING: {
|
|
|
60
43
|
readonly actionsGap: "16px";
|
|
61
44
|
};
|
|
62
45
|
};
|
|
46
|
+
/**
|
|
47
|
+
* Border radius constants
|
|
48
|
+
*/
|
|
63
49
|
export declare const BORDER_RADIUS: {
|
|
64
|
-
readonly POPUP: "
|
|
65
|
-
readonly IMAGE: "
|
|
50
|
+
readonly POPUP: "4px";
|
|
51
|
+
readonly IMAGE: "4px";
|
|
66
52
|
readonly BUTTON: "4px";
|
|
67
53
|
readonly VIDEO_MODAL: "12px";
|
|
68
54
|
readonly CLOSE_BUTTON: "50%";
|
|
69
55
|
readonly SPOTLIGHT: "8px";
|
|
70
56
|
};
|
|
71
|
-
/**
|
|
72
|
-
* Design tokens - Colors
|
|
73
|
-
*/
|
|
74
|
-
export declare const DESIGN_COLORS: {
|
|
75
|
-
readonly BACKGROUND: {
|
|
76
|
-
readonly SURFACE: "#212121";
|
|
77
|
-
readonly IMAGE: "#F0F0F0";
|
|
78
|
-
};
|
|
79
|
-
readonly TEXT: {
|
|
80
|
-
readonly PRIMARY: "#FFFFFF";
|
|
81
|
-
readonly SECONDARY: "rgba(255, 255, 255, 0.8)";
|
|
82
|
-
readonly TERTIARY: "#BDBDBD";
|
|
83
|
-
};
|
|
84
|
-
readonly BUTTON: {
|
|
85
|
-
readonly PRIMARY_TEXT: "#FEC02D";
|
|
86
|
-
readonly PRIMARY_BORDER: "#FEC02D";
|
|
87
|
-
};
|
|
88
|
-
readonly ICON: {
|
|
89
|
-
readonly DISABLED: "rgba(255, 255, 255, 0.3)";
|
|
90
|
-
readonly ENABLED: "#FFFFFF";
|
|
91
|
-
};
|
|
92
|
-
};
|
|
93
|
-
/**
|
|
94
|
-
* Design tokens - Typography
|
|
95
|
-
*/
|
|
96
|
-
export declare const DESIGN_TYPOGRAPHY: {
|
|
97
|
-
readonly SKIP_BUTTON: {
|
|
98
|
-
readonly fontSize: "14px";
|
|
99
|
-
readonly fontWeight: "600";
|
|
100
|
-
readonly lineHeight: "20px";
|
|
101
|
-
readonly fontFamily: "Inter, sans-serif";
|
|
102
|
-
};
|
|
103
|
-
readonly TITLE: {
|
|
104
|
-
readonly fontSize: "14px";
|
|
105
|
-
readonly fontWeight: "600";
|
|
106
|
-
readonly lineHeight: "20px";
|
|
107
|
-
readonly fontFamily: "Inter, sans-serif";
|
|
108
|
-
};
|
|
109
|
-
readonly CONTENT: {
|
|
110
|
-
readonly fontSize: "12px";
|
|
111
|
-
readonly fontWeight: "400";
|
|
112
|
-
readonly lineHeight: "16px";
|
|
113
|
-
readonly fontFamily: "Inter, sans-serif";
|
|
114
|
-
};
|
|
115
|
-
readonly BUTTON: {
|
|
116
|
-
readonly fontSize: "14px";
|
|
117
|
-
readonly fontWeight: "600";
|
|
118
|
-
readonly lineHeight: "20px";
|
|
119
|
-
readonly fontFamily: "Inter, sans-serif";
|
|
120
|
-
};
|
|
121
|
-
};
|
|
122
|
-
/**
|
|
123
|
-
* Design tokens - Dimensions
|
|
124
|
-
*/
|
|
125
|
-
export declare const DESIGN_DIMENSIONS: {
|
|
126
|
-
readonly IMAGE_HEIGHT: 224;
|
|
127
|
-
readonly NAVIGATION_BUTTON_SIZE: 24;
|
|
128
|
-
readonly BUTTON_HEIGHT: 32;
|
|
129
|
-
readonly BUTTON_PADDING_HORIZONTAL: "12px";
|
|
130
|
-
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const
|
|
1
|
+
const i={MAJOR:{width:959,height:274,imageWidth:480,imageHeight:274,imageInnerWidth:464,imageInnerHeight:258,imagePlaceholderWidth:290,imagePlaceholderHeight:258},MINOR:{width:519,height:160,imageWidth:235,imageHeight:134,badgeHeight:27}},t={MAJOR:{contentMargin:"0 8px 0 0",imagePadding:"8px",titlePadding:"36px 0 0 0",buttonMarginTop:"16px",skipButtonTop:"10px",skipButtonRight:"10px",navigationBottom:"16px",navigationRight:"16px",navigationGap:"8px"},MINOR:{imageMargin:"13px 10px 13px 10px",contentMargin:"13px 13px 13px 3px",actionsBottom:"13px",actionsRight:"10px",actionsGap:"16px"}},p={POPUP:"4px",IMAGE:"4px",BUTTON:"4px",VIDEO_MODAL:"12px",CLOSE_BUTTON:"50%",SPOTLIGHT:"8px"};export{p as BORDER_RADIUS,i as POPUP_DIMENSIONS,t as SPACING};
|
|
@@ -27,7 +27,7 @@ export declare const minorStepStyles: {
|
|
|
27
27
|
tooltip: {
|
|
28
28
|
padding: number;
|
|
29
29
|
backgroundColor: string;
|
|
30
|
-
borderRadius: "
|
|
30
|
+
borderRadius: "4px";
|
|
31
31
|
border: string;
|
|
32
32
|
filter: string;
|
|
33
33
|
boxShadow: string;
|
|
@@ -101,7 +101,7 @@ export declare const getMinorJoyrideStyles: (isClosing: boolean) => {
|
|
|
101
101
|
tooltip: {
|
|
102
102
|
padding: number;
|
|
103
103
|
backgroundColor: string;
|
|
104
|
-
borderRadius: "
|
|
104
|
+
borderRadius: "4px";
|
|
105
105
|
border: string;
|
|
106
106
|
filter: string;
|
|
107
107
|
boxShadow: string;
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
|
-
|
|
3
|
-
export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string, ratio?: '16:9' | '1:1' | '4:3', padding?: string, primaryButtonStyle?: ButtonStyle, secondaryButtonStyle?: ButtonStyle) => {
|
|
2
|
+
export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string) => {
|
|
4
3
|
container: CSSProperties;
|
|
5
|
-
headerContainer: CSSProperties;
|
|
6
|
-
contentWrapper: CSSProperties;
|
|
7
4
|
skipButton: {
|
|
8
5
|
base: CSSProperties;
|
|
9
6
|
hover: CSSProperties;
|
|
@@ -11,29 +8,16 @@ export declare const getMajorPopupStyles: (startAnimation: boolean, transform: s
|
|
|
11
8
|
imageContainer: CSSProperties;
|
|
12
9
|
image: CSSProperties;
|
|
13
10
|
imagePlaceholder: CSSProperties;
|
|
14
|
-
videoOverlay: CSSProperties;
|
|
15
|
-
playIcon: CSSProperties;
|
|
16
11
|
contentContainer: CSSProperties;
|
|
17
|
-
skipButtonContainer: CSSProperties;
|
|
18
12
|
title: CSSProperties;
|
|
19
13
|
content: CSSProperties;
|
|
20
|
-
actionsWrapper: CSSProperties;
|
|
21
|
-
buttonsGroup: CSSProperties;
|
|
22
14
|
exploreButton: {
|
|
23
15
|
base: CSSProperties;
|
|
24
16
|
hover: CSSProperties;
|
|
25
17
|
};
|
|
26
|
-
secondaryButton: {
|
|
27
|
-
base: CSSProperties;
|
|
28
|
-
hover: CSSProperties;
|
|
29
|
-
};
|
|
30
18
|
navigationContainer: CSSProperties;
|
|
31
19
|
navigationButton: (disabled: boolean) => {
|
|
32
20
|
base: CSSProperties;
|
|
33
|
-
hover:
|
|
34
|
-
backgroundColor: string;
|
|
35
|
-
} | {
|
|
36
|
-
backgroundColor?: undefined;
|
|
37
|
-
};
|
|
21
|
+
hover: CSSProperties;
|
|
38
22
|
};
|
|
39
23
|
};
|