@ultraviolet/ui 1.23.0 → 1.24.0

package/dist/index.d.ts

@@ -2344,12 +2344,14 @@ type StepperProps = {
     selected?: number;
     children: ReactNode[];
     className?: string;
+    labelPosition?: 'bottom' | 'right';
+    size?: 'small' | 'medium';
     'data-testid'?: string;
 };
 /**
  * Stepper component to show the progress of a process in a linear way.
  */
-declare const Stepper: ({ children, selected, animated, className, "data-testid": dataTestId, }: StepperProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Stepper: ({ children, selected, animated, className, labelPosition, size, "data-testid": dataTestId, }: StepperProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SwitchButtonProps = {
     name: string;

package/dist/src/components/Stepper/index.js

@@ -7,6 +7,10 @@ import { Text } from '../Text/index.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 LINE_HEIGHT_SIZES = {
+  small: 2,
+  medium: 4
+};
 const loadingAnimation = keyframes`
   from {
     width: 0;
@@ -16,7 +20,7 @@ const loadingAnimation = keyframes`
   }
 `;
 const StyledStepContainer = /*#__PURE__*/_styled("div", {
-  target: "e19ft7rb3"
+  target: "e19ft7rb4"
 })(process.env.NODE_ENV === "production" ? {
   name: "b8wmnj",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:flex-start"
@@ -26,99 +30,128 @@ const StyledStepContainer = /*#__PURE__*/_styled("div", {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "e19ft7rb2"
+  target: "e19ft7rb3"
 })("margin-top:", _ref => {
   let {
     theme
   } = _ref;
   return theme.space['1'];
 }, ";");
+const StyledBullet = /*#__PURE__*/_styled(Bullet, {
+  target: "e19ft7rb2"
+})("margin-top:", _ref2 => {
+  let {
+    theme,
+    size
+  } = _ref2;
+  return size === 'small' ? theme.space['0.5'] : 0;
+}, ";");
 const loadingStyle = /*#__PURE__*/css("animation:", loadingAnimation, " 1s linear infinite;");
 const StyledLine = /*#__PURE__*/_styled("div", {
   target: "e19ft7rb1"
-})("border-radius:", _ref2 => {
+})("border-radius:", _ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   return theme.radii.default;
-}, ";flex-grow:1;border-radius:", _ref3 => {
+}, ";flex-grow:1;border-radius:", _ref4 => {
   let {
     theme
-  } = _ref3;
+  } = _ref4;
   return theme.radii.default;
-}, ";background-color:", _ref4 => {
+}, ";background-color:", _ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme.colors.neutral.backgroundStrong;
-}, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", _ref5 => {
+}, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.radii.default;
-}, ";background-color:", _ref6 => {
+}, ";background-color:", _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.colors.primary.backgroundStrong;
-}, ";", _ref7 => {
+}, ";", _ref8 => {
   let {
     temporal
-  } = _ref7;
+  } = _ref8;
   return temporal === 'previous' && `width: 100%;`;
-}, " ", _ref8 => {
+}, " ", _ref9 => {
   let {
     temporal,
     animated
-  } = _ref8;
+  } = _ref9;
   return temporal === 'current' && animated && loadingStyle;
 }, ";}");
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "e19ft7rb0"
-})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.space['1'];
-}, ";", StyledStepContainer, "{width:", _ref10 => {
+})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", _ref10 => {
   let {
     theme
   } = _ref10;
-  return theme.space['4'];
-}, ";white-space:nowrap;}", StyledLine, "{height:", _ref11 => {
+  return theme.space['1'];
+}, ";gap:", _ref11 => {
   let {
-    theme
+    theme,
+    labelPosition,
+    size
   } = _ref11;
-  return theme.space['0.5'];
-}, ";margin-top:", _ref12 => {
+  return size === 'medium' && labelPosition === 'bottom' ? theme.space['0'] : theme.space['1'];
+}, ";", StyledStepContainer, "{display:flex;flex-direction:", _ref12 => {
   let {
-    theme
+    labelPosition
   } = _ref12;
+  return labelPosition === 'bottom' ? 'column' : 'row';
+}, ";align-items:", _ref13 => {
+  let {
+    labelPosition
+  } = _ref13;
+  return labelPosition === 'bottom' ? 'center' : 'baseline';
+}, ";gap:", _ref14 => {
+  let {
+    theme,
+    labelPosition
+  } = _ref14;
+  return labelPosition === 'bottom' ? theme.space['0.5'] : theme.space['1'];
+}, ";white-space:nowrap;}", StyledLine, "{height:", _ref15 => {
+  let {
+    size
+  } = _ref15;
+  return LINE_HEIGHT_SIZES[size];
+}, "px;margin-top:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
   return theme.space['2'];
-}, ";margin-bottom:", _ref13 => {
+}, ";margin-bottom:", _ref17 => {
   let {
     theme
-  } = _ref13;
+  } = _ref17;
   return theme.space['2'];
 }, ";}");
-const StepperNumbers = _ref14 => {
+const StepperNumbers = _ref18 => {
   let {
     temporal,
     children,
-    CurrentStep
-  } = _ref14;
+    CurrentStep,
+    size = 'medium'
+  } = _ref18;
   return jsxs(StyledStepContainer, {
-    children: [jsx(Bullet, {
+    children: [jsx(StyledBullet, {
       sentiment: temporal === 'next' ? 'neutral' : 'primary',
       ...(temporal === 'previous' ? {
         icon: 'check'
       } : {
         text: CurrentStep.toString()
       }),
-      prominence: temporal !== 'current' ? 'default' : 'strong'
+      prominence: temporal !== 'current' ? 'default' : 'strong',
+      size: size
     }), jsx(StyledText, {
       as: "span",
-      variant: "bodySmall",
+      variant: size === 'medium' ? 'body' : 'bodySmall',
       prominence: temporal === 'next' ? 'weak' : 'default',
       children: children
     })]
@@ -127,18 +160,22 @@ const StepperNumbers = _ref14 => {
 /**
  * Stepper component to show the progress of a process in a linear way.
  */
-const Stepper = _ref15 => {
+const Stepper = _ref19 => {
   let {
     children,
     selected = 0,
     animated = false,
     className,
+    labelPosition = 'bottom',
+    size = 'medium',
     'data-testid': dataTestId
-  } = _ref15;
+  } = _ref19;
   const lastStep = Children.count(children) - 1;
   return jsx(StyledContainer, {
     className: className,
     "data-testid": dataTestId,
+    labelPosition: labelPosition,
+    size: size,
     children: flattenChildren(children).map((child, index) => {
       const getTemporal = () => {
         if (selected > index) return 'previous';
@@ -153,6 +190,7 @@ const Stepper = _ref15 => {
           children: [jsx(StepperNumbers, {
             CurrentStep: index + 1,
             temporal: temporal,
+            size: size,
             children: child
           }), isNotLast ? jsx(StyledLine, {
             temporal: temporal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {