@ultraviolet/plus 0.14.4 → 0.15.1

package/dist/components/Navigation/components/PinnedItems.js

@@ -0,0 +1,144 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Text } from "@ultraviolet/ui";
+import { useCallback } from "react";
+import { useNavigation } from "../NavigationProvider.js";
+import { Item } from "./Item.js";
+const DropableArea = styled.div`
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 0;
+  height: 2px;
+  border-top: 2px solid;
+  border-color: transparent;
+  padding: ${({ theme }) => theme.space["0.5"]} 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: -4px;
+    height: 0px;
+    width: 0px;
+    border: 3px solid;
+    border-color: inherit;
+    border-radius: ${({ theme }) => theme.radii.circle};
+  }
+`;
+const RelativeDiv = styled.div`
+  position: relative;
+`;
+const TextContainer = styled.div`
+  padding: ${({ theme }) => theme.space["1"]} 0;
+  padding-left: ${({ theme }) => theme.space["4"]};
+  margin-left: ${({ theme }) => theme.space["0.5"]};
+`;
+const PinnedItems = ({ toggle = true }) => {
+  const context = useNavigation();
+  if (!context) {
+    throw new Error(
+      "Navigation.PinnedItems can only be used inside a NavigationProvider."
+    );
+  }
+  const { locales, pinnedItems, pinnedFeature, reorderItems, expanded, items } = context;
+  const theme = useTheme();
+  const onDrop = useCallback(
+    (event, index) => {
+      event.preventDefault();
+      if (event?.dataTransfer) {
+        event.currentTarget.style.borderColor = "transparent";
+        const data = JSON.parse(
+          event.dataTransfer.getData("text")
+        );
+        if (data.index === index - 1 || index > data.index) {
+          reorderItems(data.index, index - 1);
+          return;
+        }
+        reorderItems(data.index, index);
+      }
+    },
+    [reorderItems]
+  );
+  const onDragOver = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.currentTarget.style.borderColor = theme.colors.primary.border;
+    },
+    [theme.colors.primary.border]
+  );
+  const onDragLeave = useCallback((event) => {
+    event.preventDefault();
+    event.currentTarget.style.borderColor = "transparent";
+  }, []);
+  if (Object.keys(items).length === 0) {
+    return null;
+  }
+  if (pinnedFeature) {
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+      Item,
+      {
+        label: locales["navigation.pinned.item.group.label"],
+        categoryIcon: "pin",
+        categoryIconVariant: "neutral",
+        toggle,
+        type: "pinnedGroup",
+        id: "pinned-group",
+        children: [
+          pinnedItems.length > 0 ? pinnedItems.map((itemId, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: { position: expanded ? "relative" : void 0 },
+              children: [
+                expanded ? /* @__PURE__ */ jsx(
+                  DropableArea,
+                  {
+                    onDragOver,
+                    onDragLeave,
+                    onDrop: (event) => onDrop(event, index)
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  Item,
+                  {
+                    label: items[itemId]?.label ?? "Unknown navigation item",
+                    type: "pinned",
+                    index,
+                    toggle,
+                    id: itemId,
+                    active: items[itemId]?.active ?? false,
+                    onClick: items[itemId]?.onClick ?? void 0,
+                    hasParents: true
+                  }
+                )
+              ]
+            },
+            itemId
+          )) : /* @__PURE__ */ jsx(TextContainer, { children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              variant: "caption",
+              prominence: "weak",
+              sentiment: "neutral",
+              children: locales["navigation.pinned.item.group.empty"]
+            }
+          ) }),
+          expanded ? /* @__PURE__ */ jsx(RelativeDiv, { style: { position: "relative" }, children: /* @__PURE__ */ jsx(
+            DropableArea,
+            {
+              onDragOver,
+              onDragLeave,
+              onDrop: (event) => onDrop(event, pinnedItems.length)
+            }
+          ) }) : null
+        ]
+      }
+    ) });
+  }
+  return null;
+};
+export {
+  PinnedItems
+};

package/dist/components/Navigation/components/Separator.d.ts

@@ -0,0 +1 @@
+export declare const Separator: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Navigation/components/Separator.js

@@ -0,0 +1,10 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Separator as Separator$1 } from "@ultraviolet/ui";
+const StyledSeparator = styled(Separator$1)`
+  margin: ${({ theme }) => `${theme.space["2"]} -${theme.space["2"]}`};
+`;
+const Separator = () => /* @__PURE__ */ jsx(StyledSeparator, {});
+export {
+  Separator
+};

package/dist/components/Navigation/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const NAVIGATION_MIN_WIDTH = 220;
+export declare const NAVIGATION_WIDTH = 280;
+export declare const NAVIGATION_COLLASPED_WIDTH = 67;
+export declare const NAVIGATION_MAX_WIDTH = 320;
+/**
+ * ANIMATIONS
+ */
+export declare const ANIMATION_DURATION = 700;
+export declare const shrinkHeight: import("@emotion/react").Keyframes;
+export declare const groupAnimation: import("@emotion/react").Keyframes;
+export type DragNDropData = {
+    index: number;
+    item: string;
+};

package/dist/components/Navigation/constants.js

@@ -0,0 +1,37 @@
+import { keyframes } from "@emotion/react";
+const NAVIGATION_MIN_WIDTH = 220;
+const NAVIGATION_WIDTH = 280;
+const NAVIGATION_COLLASPED_WIDTH = 67;
+const NAVIGATION_MAX_WIDTH = 320;
+const ANIMATION_DURATION = 700;
+const shrinkHeight = keyframes`
+    0% {
+      max-height: 50px; // this is on purpose higher than the actual height of the item
+    }
+
+    100% {
+      max-height: 32px;
+    }
+`;
+const groupAnimation = keyframes`
+  0% {
+    opacity: 0;
+    max-height: 0;
+    margin-bottom: -8px;
+  }
+
+  100% {
+    opacity: 1;
+    max-height: 40px;
+    margin-bottom: 0;
+  }
+`;
+export {
+  ANIMATION_DURATION,
+  NAVIGATION_COLLASPED_WIDTH,
+  NAVIGATION_MAX_WIDTH,
+  NAVIGATION_MIN_WIDTH,
+  NAVIGATION_WIDTH,
+  groupAnimation,
+  shrinkHeight
+};

package/dist/components/Navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { Navigation } from './Navigation';
+export { NavigationProvider, useNavigation } from './NavigationProvider';

package/dist/components/Navigation/locales/en.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    readonly 'navigation.pin.tooltip': "Pin product";
+    readonly 'navigation.unpin.tooltip': "Unpin product";
+    readonly 'navigation.pin.limit': "You cannot pin more products";
+    readonly 'navigation.pinned.item.group.label': "Pinned items";
+    readonly 'navigation.expand.button': "Expand sidebar";
+    readonly 'navigation.collapse.button': "Collapse sidebar";
+    readonly 'navigation.pinned.item.group.empty': "You have no pinned items.";
+};
+export default _default;

package/dist/components/Navigation/locales/en.js

@@ -0,0 +1,12 @@
+const NavigationLocales = {
+  "navigation.pin.tooltip": "Pin product",
+  "navigation.unpin.tooltip": "Unpin product",
+  "navigation.pin.limit": "You cannot pin more products",
+  "navigation.pinned.item.group.label": "Pinned items",
+  "navigation.expand.button": "Expand sidebar",
+  "navigation.collapse.button": "Collapse sidebar",
+  "navigation.pinned.item.group.empty": "You have no pinned items."
+};
+export {
+  NavigationLocales as default
+};

package/dist/components/SteppedListCard/Step.d.ts

@@ -0,0 +1,17 @@
+type StepProps = {
+    /**
+     * The number of the step, max 5 steps.
+     */
+    stepNumber: number;
+    /**
+     * Title of the step
+     */
+    stepTitle: string;
+    /**
+     * State of the step
+     */
+    completed: boolean;
+    'data-testid'?: string;
+};
+export declare const SteppedList: ({ stepNumber, stepTitle, completed, "data-testid": dataTestId, }: StepProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SteppedListCard/Step.js

@@ -0,0 +1,54 @@
+import { jsx, Fragment } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Text, StepList } from "@ultraviolet/ui";
+import { useContext } from "react";
+import { Data } from "./helper.js";
+const CustomText = styled(Text)`
+  cursor: pointer;
+  transition: text-decoration-color 250ms ease-out;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  text-decoration-color: transparent;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+  }
+  &:active {
+    text-decoration-thickness: 2px;
+  }
+`;
+const SteppedList = ({
+  stepNumber,
+  stepTitle,
+  completed,
+  "data-testid": dataTestId
+}) => {
+  const containerData = useContext(Data);
+  const active = containerData.currentStep === stepNumber;
+  return /* @__PURE__ */ jsx(Fragment, { children: completed ? /* @__PURE__ */ jsx(
+    StepList.Item,
+    {
+      bulletIcon: "check",
+      prominence: active ? "strong" : "default",
+      sentiment: "primary",
+      onClick: () => containerData.setCurrentStep(stepNumber),
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsx(CustomText, { as: "h3", variant: active ? "bodyStrong" : "body", children: stepTitle })
+    }
+  ) : /* @__PURE__ */ jsx(
+    StepList.Item,
+    {
+      bulletText: String(stepNumber),
+      prominence: active ? "strong" : void 0,
+      sentiment: active ? "primary" : void 0,
+      onClick: () => containerData.setCurrentStep(stepNumber),
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsx(CustomText, { as: "h3", variant: active ? "bodyStrong" : "body", children: stepTitle })
+    }
+  ) });
+};
+export {
+  SteppedList
+};

package/dist/components/SteppedListCard/SteppedListContainer.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+type SteppedListContainerProps = {
+    /**
+     * Title of the section, introduces the feature.
+     */
+    header: ReactNode;
+    /**
+     * Text of the tooltip on the hide button
+     */
+    hideTooltipText?: string;
+    /**
+     * Text of the "hide" button
+     */
+    hideText?: string;
+    /**
+     * Text of the "show" button
+     */
+    showText?: string;
+    /**
+     * Text of tooltip on the "show" button
+     */
+    showTooltipText?: string;
+    /**
+     * List of steps
+     */
+    steps: string[];
+    /**
+     * Define here the content of each step
+     */
+    children: ReactNode;
+    /**
+     * Function called when the component is closed. This function will overload the default behavior.
+     */
+    onClickHide?: () => void;
+};
+/**
+ * SteppedListContainer is a component created for guiding users through steps in a structured and linear manner.
+ * It can pass prop "nextStep" to its children.
+ */
+declare const SteppedListContainer: {
+    ({ header, hideTooltipText, hideText, showText, showTooltipText, children, steps, onClickHide, }: SteppedListContainerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Step: ({ subHeader, children, image, stepNumber, }: {
+        subHeader?: ReactNode;
+        children: ReactNode | ((nextStep: (completed: boolean) => void) => ReactNode);
+        image?: ReactNode;
+        stepNumber: number;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export { SteppedListContainer };

package/dist/components/SteppedListCard/SteppedListContainer.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Card, Stack, Row, Text, Button, StepList } from "@ultraviolet/ui";
+import { Children, useState, useMemo } from "react";
+import { SteppedList } from "./Step.js";
+import { SteppedListContent } from "./SteppedListContent.js";
+import { Data } from "./helper.js";
+const StyledCard = styled(Card)`
+  padding: 0;
+`;
+const ContentStack = styled(Stack)`
+  padding: ${({ theme }) => theme.space["3"]};
+  border-right: solid ${({ theme }) => theme.colors.neutral.border} 1px;
+`;
+const SteppedListContainer = ({
+  header,
+  hideTooltipText,
+  hideText = "Hide",
+  showText = "Show",
+  showTooltipText,
+  children,
+  steps,
+  onClickHide
+}) => {
+  const numberOfSteps = Children.count(children);
+  const [currentStep, setCurrentStep] = useState(1);
+  const [hidden, setHidden] = useState(false);
+  const [done, setDone] = useState(Array(steps.length).fill(false));
+  const values = useMemo(
+    () => ({
+      currentStep,
+      setCurrentStep,
+      numberOfSteps,
+      done,
+      setDone,
+      setHidden,
+      onClickHide
+    }),
+    [
+      currentStep,
+      setCurrentStep,
+      numberOfSteps,
+      done,
+      setDone,
+      setHidden,
+      onClickHide
+    ]
+  );
+  const onClickHideButton = () => {
+    if (onClickHide)
+      onClickHide();
+    else
+      setHidden(!hidden);
+  };
+  return /* @__PURE__ */ jsx(Data.Provider, { value: values, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    /* @__PURE__ */ jsxs(Row, { templateColumns: "9fr 1fr", children: [
+      typeof header === "string" ? /* @__PURE__ */ jsx(Text, { as: "h3", variant: "heading", children: header }) : header,
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: onClickHideButton,
+          variant: "ghost",
+          sentiment: "neutral",
+          size: "small",
+          tooltip: hidden ? showTooltipText : hideTooltipText,
+          children: hidden ? showText : hideText
+        }
+      )
+    ] }),
+    hidden ? null : /* @__PURE__ */ jsx(StyledCard, { children: /* @__PURE__ */ jsxs(Row, { templateColumns: "1fr 3fr", children: [
+      /* @__PURE__ */ jsx(ContentStack, { direction: "column", gap: 4, children: /* @__PURE__ */ jsx(StepList, { children: steps.map((step, index) => /* @__PURE__ */ jsx(
+        SteppedList,
+        {
+          stepNumber: index + 1,
+          stepTitle: step,
+          completed: done[index]
+        },
+        step
+      )) }) }),
+      children
+    ] }) })
+  ] }) });
+};
+SteppedListContainer.Step = SteppedListContent;
+export {
+  SteppedListContainer
+};

package/dist/components/SteppedListCard/SteppedListContent.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type SteppedListContentProps = {
+    subHeader?: ReactNode;
+    children: ((nextStep: (completed: boolean) => void) => ReactNode) | ReactNode;
+    image?: ReactNode;
+    stepNumber: number;
+};
+export declare const SteppedListContent: ({ subHeader, children, image, stepNumber, }: SteppedListContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SteppedListCard/SteppedListContent.js

@@ -0,0 +1,43 @@
+import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Stack, Text } from "@ultraviolet/ui";
+import { useContext } from "react";
+import { Data, nextStep } from "./helper.js";
+const StyledContent = styled(Stack)`
+  padding: ${({ theme }) => theme.space["3"]};
+  padding-top: ${({ theme }) => theme.space["4"]};
+`;
+const StyledImage = styled.div`
+  display: flex;
+  justify-content: right;
+`;
+const StyledSubHeader = styled.div`
+  margin-bottom: ${({ theme }) => theme.space["3"]};
+`;
+const SteppedListContent = ({
+  subHeader,
+  children,
+  image,
+  stepNumber
+}) => {
+  const containerData = useContext(Data);
+  return /* @__PURE__ */ jsx(Fragment, { children: stepNumber === containerData.currentStep ? /* @__PURE__ */ jsxs(StyledContent, { children: [
+    /* @__PURE__ */ jsx(StyledSubHeader, { children: typeof subHeader === "string" ? /* @__PURE__ */ jsx(Text, { as: "h3", variant: "headingSmallStrong", children: subHeader }) : subHeader }),
+    typeof children === "function" ? children(
+      (completed) => nextStep({
+        completed,
+        setCompleted: containerData.setDone,
+        done: containerData.done,
+        stepNumber,
+        setCurrentStep: containerData.setCurrentStep,
+        numberOfSteps: containerData.numberOfSteps,
+        setHidden: containerData.setHidden,
+        onClickHide: containerData.onClickHide
+      })
+    ) : children,
+    /* @__PURE__ */ jsx(StyledImage, { children: image })
+  ] }) : null });
+};
+export {
+  SteppedListContent
+};

package/dist/components/SteppedListCard/helper.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+type ContextType = {
+    currentStep: number;
+    setCurrentStep: React.Dispatch<React.SetStateAction<number>>;
+    numberOfSteps: number;
+    done: boolean[];
+    setDone: React.Dispatch<React.SetStateAction<boolean[]>>;
+    setHidden: React.Dispatch<React.SetStateAction<boolean>>;
+    onClickHide?: () => void;
+};
+export declare const Data: import("react").Context<ContextType>;
+type NextStepProps = {
+    completed: boolean;
+    setCompleted: React.Dispatch<React.SetStateAction<boolean[]>>;
+    stepNumber: number;
+    setCurrentStep: React.Dispatch<React.SetStateAction<number>>;
+    numberOfSteps: number;
+    setHidden: React.Dispatch<React.SetStateAction<boolean>>;
+    done: boolean[];
+    onClickHide?: () => void;
+};
+/**
+ * Go to next step with or without validation of the current step
+ * Close the component for the last step
+ */
+export declare const nextStep: ({ completed, setCompleted, stepNumber, setCurrentStep, numberOfSteps, setHidden, done, onClickHide, }: NextStepProps) => void;
+export {};

package/dist/components/SteppedListCard/helper.js

@@ -0,0 +1,39 @@
+import { createContext } from "react";
+const Data = createContext({
+  currentStep: 1,
+  setCurrentStep: () => {
+  },
+  numberOfSteps: 1,
+  done: [false, false, false, false, false],
+  setDone: () => {
+  },
+  setHidden: () => {
+  },
+  onClickHide: () => {
+  }
+});
+const nextStep = ({
+  completed,
+  setCompleted,
+  stepNumber,
+  setCurrentStep,
+  numberOfSteps,
+  setHidden,
+  done,
+  onClickHide
+}) => {
+  const tempDone = done.map(
+    (item, index) => index === stepNumber - 1 ? completed : item
+  );
+  setCompleted(tempDone);
+  if (numberOfSteps > stepNumber)
+    setCurrentStep(stepNumber + 1);
+  else if (onClickHide)
+    onClickHide();
+  else
+    setHidden(true);
+};
+export {
+  Data,
+  nextStep
+};

package/dist/components/SteppedListCard/index.d.ts

@@ -0,0 +1 @@
+export { SteppedListContainer } from './SteppedListContainer';

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export { ContentCard } from './ContentCard';
+export { ContentCardGroup } from './ContentCardGroup';
+export { CodeEditor } from './CodeEditor';
+export { EstimateCost, estimateCostDefaultLocales } from './EstimateCost';
+export { CustomerSatisfaction } from './CustomerSatisfaction';
+export { Conversation } from './Conversation';
+export { Navigation, NavigationProvider, useNavigation } from './Navigation';
+export { FAQ } from './FAQ';
+export { SteppedListContainer } from './SteppedListCard';