@ultraviolet/plus 0.8.6 → 0.9.0

package/dist/index.d.ts

@@ -390,4 +390,52 @@ type FAQProps = {
 };
 declare const FAQ: ({ productIconName, illustrationText, title, description, notes, }: FAQProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-export { CodeEditor, ContentCard, ContentCardGroup, Conversation, CustomerSatisfaction, EstimateCost, FAQ, _default as estimateCostDefaultLocales };
+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): _emotion_react_jsx_runtime.JSX.Element;
+    Step: ({ subHeader, children, image, stepNumber, }: {
+        subHeader?: ReactNode;
+        children: ReactNode | ((nextStep: (completed: boolean) => void) => ReactNode);
+        image?: ReactNode;
+        stepNumber: number;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+};
+
+export { CodeEditor, ContentCard, ContentCardGroup, Conversation, CustomerSatisfaction, EstimateCost, FAQ, SteppedListContainer, _default as estimateCostDefaultLocales };

package/dist/src/components/SteppedListCard/Step.js

@@ -0,0 +1,53 @@
+import _styled from '@emotion/styled/base';
+import { Text, StepList } from '@ultraviolet/ui';
+import { useContext } from 'react';
+import { Data } from './helper.js';
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const CustomText = /*#__PURE__*/_styled(Text, {
+  target: "ehxefxd0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1buwj38",
+  styles: "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;}"
+} : {
+  name: "1buwj38",
+  styles: "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;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const SteppedList = ({
+  stepNumber,
+  stepTitle,
+  completed,
+  'data-testid': dataTestId
+}) => {
+  const containerData = useContext(Data);
+  const active = containerData.currentStep === stepNumber;
+  return jsx(Fragment, {
+    children: completed ? jsx(StepList.Item, {
+      bulletIcon: "check",
+      prominence: active ? 'strong' : 'default',
+      sentiment: "primary",
+      onClick: () => containerData.setCurrentStep(stepNumber),
+      "data-testid": dataTestId,
+      children: jsx(CustomText, {
+        as: "h3",
+        variant: active ? 'bodyStrong' : 'body',
+        children: stepTitle
+      })
+    }) : jsx(StepList.Item, {
+      bulletText: String(stepNumber),
+      prominence: active ? 'strong' : undefined,
+      sentiment: active ? 'primary' : undefined,
+      onClick: () => containerData.setCurrentStep(stepNumber),
+      "data-testid": dataTestId,
+      children: jsx(CustomText, {
+        as: "h3",
+        variant: active ? 'bodyStrong' : 'body',
+        children: stepTitle
+      })
+    })
+  });
+};
+
+export { SteppedList };

package/dist/src/components/SteppedListCard/SteppedListContainer.js

@@ -0,0 +1,96 @@
+import _styled from '@emotion/styled/base';
+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';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StyledCard = /*#__PURE__*/_styled(Card, {
+  target: "ebhkk9t1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1hcx8jb",
+  styles: "padding:0"
+} : {
+  name: "1hcx8jb",
+  styles: "padding:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const ContentStack = /*#__PURE__*/_styled(Stack, {
+  target: "ebhkk9t0"
+})("padding:", ({
+  theme
+}) => theme.space['3'], ";border-right:solid ", ({
+  theme
+}) => theme.colors.neutral.border, " 1px;");
+/**
+ * SteppedListContainer is a component created for guiding users through steps in a structured and linear manner.
+ * It can pass prop "nextStep" to its children.
+ */
+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 jsx(Data.Provider, {
+    value: values,
+    children: jsxs(Stack, {
+      gap: 3,
+      children: [jsxs(Row, {
+        templateColumns: "9fr 1fr",
+        children: [typeof header === 'string' ? jsx(Text, {
+          as: "h3",
+          variant: "heading",
+          children: header
+        }) : header, jsx(Button, {
+          onClick: onClickHideButton,
+          variant: "ghost",
+          sentiment: "neutral",
+          size: "small",
+          tooltip: hidden ? showTooltipText : hideTooltipText,
+          children: hidden ? showText : hideText
+        })]
+      }), hidden ? null : jsx(StyledCard, {
+        children: jsxs(Row, {
+          templateColumns: "1fr 3fr",
+          children: [jsx(ContentStack, {
+            direction: "column",
+            gap: 4,
+            children: jsx(StepList, {
+              children: steps.map((step, index) => jsx(SteppedList, {
+                stepNumber: index + 1,
+                stepTitle: step,
+                completed: done[index]
+              }, step))
+            })
+          }), children]
+        })
+      })]
+    })
+  });
+};
+SteppedListContainer.Step = SteppedListContent;
+
+export { SteppedListContainer };

package/dist/src/components/SteppedListCard/SteppedListContent.js

@@ -0,0 +1,61 @@
+import _styled from '@emotion/styled/base';
+import { Text, Stack } from '@ultraviolet/ui';
+import { useContext } from 'react';
+import { Data, nextStep } from './helper.js';
+import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StyledContent = /*#__PURE__*/_styled(Stack, {
+  target: "erw7ck2"
+})("padding:", ({
+  theme
+}) => theme.space['3'], ";padding-top:", ({
+  theme
+}) => theme.space['4'], ";");
+const StyledImage = /*#__PURE__*/_styled("div", {
+  target: "erw7ck1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "r4f2yk",
+  styles: "display:flex;justify-content:right"
+} : {
+  name: "r4f2yk",
+  styles: "display:flex;justify-content:right",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledSubHeader = /*#__PURE__*/_styled("div", {
+  target: "erw7ck0"
+})("margin-bottom:", ({
+  theme
+}) => theme.space['3'], ";");
+const SteppedListContent = ({
+  subHeader,
+  children,
+  image,
+  stepNumber
+}) => {
+  const containerData = useContext(Data);
+  return jsx(Fragment, {
+    children: stepNumber === containerData.currentStep ? jsxs(StyledContent, {
+      children: [jsx(StyledSubHeader, {
+        children: typeof subHeader === 'string' ? 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, jsx(StyledImage, {
+        children: image
+      })]
+    }) : null
+  });
+};
+
+export { SteppedListContent };

package/dist/src/components/SteppedListCard/helper.js

@@ -0,0 +1,31 @@
+import { createContext } from 'react';
+
+const Data = /*#__PURE__*/createContext({
+  currentStep: 1,
+  setCurrentStep: () => {},
+  numberOfSteps: 1,
+  done: [false, false, false, false, false],
+  setDone: () => {},
+  setHidden: () => {},
+  onClickHide: () => {}
+});
+/**
+ * Go to next step with or without validation of the current step
+ * Close the component for the last step
+ */
+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/src/index.js

@@ -6,3 +6,4 @@ export { default as estimateCostDefaultLocales } from './components/EstimateCost
 export { CustomerSatisfaction } from './components/CustomerSatisfaction/index.js';
 export { Conversation } from './components/Conversation/index.js';
 export { FAQ } from './components/FAQ/index.js';
+export { SteppedListContainer } from './components/SteppedListCard/SteppedListContainer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/plus",
-  "version": "0.8.6",
+  "version": "0.9.0",
   "description": "Ultraviolet Plus",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -47,7 +47,8 @@
     "@types/react-dom": "18.2.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "@ultraviolet/icons": "2.9.3"
+    "@ultraviolet/icons": "2.9.3",
+    "@ultraviolet/illustrations": "1.6.1"
   },
   "dependencies": {
     "@uiw/codemirror-extensions-langs": "4.21.24",
@@ -56,7 +57,7 @@
     "react-flatten-children": "1.1.2",
     "react-intersection-observer": "9.8.1",
     "@ultraviolet/themes": "1.9.0",
-    "@ultraviolet/ui": "1.40.1"
+    "@ultraviolet/ui": "1.41.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",