@ultraviolet/plus 0.5.0 → 0.5.2

package/dist/src/components/EstimateCost/Components/NumberInput.js

@@ -0,0 +1,41 @@
+import { NumberInput as NumberInput$1 } from '@ultraviolet/ui';
+import { useEffect } from 'react';
+import { useOverlay } from '../OverlayContext.js';
+import { ItemResourceName } from '../componentStyle.js';
+import { Regular } from './Regular.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const NumberInput = _ref => {
+  let {
+    amount,
+    minValue = 0,
+    maxValue = 100,
+    getAmountValue,
+    itemCallback
+  } = _ref;
+  const {
+    isOverlay
+  } = useOverlay();
+  useEffect(() => {
+    getAmountValue?.(amount);
+  }, [getAmountValue, amount]);
+  return isOverlay ? jsx(ItemResourceName, {
+    animated: false,
+    children: jsx(Regular, {
+      children: amount
+    })
+  }) : jsx(NumberInput$1, {
+    minValue: minValue,
+    maxValue: maxValue,
+    size: "small",
+    onChange: value => {
+      if (typeof value === 'number' && itemCallback) {
+        itemCallback(value, true);
+        getAmountValue?.(value);
+      }
+    },
+    value: amount
+  });
+};
+
+export { NumberInput };

package/dist/src/components/EstimateCost/Components/Region.js

@@ -0,0 +1,50 @@
+import _styled from '@emotion/styled/base';
+import { useEstimateCost } from '../EstimateCostProvider.js';
+import { Item } from './Item.js';
+import { Strong } from './Strong.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledImage = /*#__PURE__*/_styled("img", {
+  target: "exu7lwu0"
+})("width:15px;margin-right:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";");
+const Region = _ref2 => {
+  let {
+    label,
+    image,
+    shouldBeHidden = false,
+    priceText,
+    animated = false,
+    isFirstElement,
+    isLastElement,
+    productsCallback,
+    iteration,
+    discount
+  } = _ref2;
+  const {
+    locales
+  } = useEstimateCost();
+  return jsx(Item, {
+    label: locales['estimate.cost.region.label'],
+    shouldBeHidden: shouldBeHidden,
+    priceText: priceText,
+    animated: animated,
+    isFirstElement: isFirstElement,
+    isLastElement: isLastElement,
+    productsCallback: productsCallback,
+    iteration: iteration,
+    discount: discount,
+    children: jsxs(Strong, {
+      children: [jsx(StyledImage, {
+        alt: label,
+        src: image
+      }), label]
+    })
+  });
+};
+
+export { Region };

package/dist/src/components/EstimateCost/Components/Regular.js

@@ -0,0 +1,44 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+import { useOverlay } from '../OverlayContext.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledRegular = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['variant', 'isOverlay'].includes(prop),
+  target: "e1l9k4qo0"
+})("display:", _ref => {
+  let {
+    isOverlay
+  } = _ref;
+  return isOverlay ? 'flex' : 'inline-flex';
+}, ";max-width:500px;align-items:center;font-size:16px;color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.textStrong;
+}, ";margin-right:4px;", _ref3 => {
+  let {
+    theme,
+    variant
+  } = _ref3;
+  return variant === 'small' && /*#__PURE__*/css("display:block;font-size:14px;line-height:8px;color:", theme.colors.neutral.text, ";");
+}, ";");
+const Regular = _ref4 => {
+  let {
+    variant = 'normal',
+    isDisabledOnOverlay = false,
+    children = null,
+    className
+  } = _ref4;
+  const {
+    isOverlay
+  } = useOverlay();
+  return !isDisabledOnOverlay || !isOverlay ? jsx(StyledRegular, {
+    className: className,
+    variant: variant,
+    isOverlay: isOverlay,
+    children: children
+  }) : null;
+};
+
+export { Regular };

package/dist/src/components/EstimateCost/Components/Strong.js

@@ -0,0 +1,37 @@
+import _styled from '@emotion/styled/base';
+import { Regular } from './Regular.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledStrong = /*#__PURE__*/_styled(Regular, {
+  shouldForwardProp: prop => !['variant'].includes(prop),
+  target: "e1bhvxf60"
+})("display:inline-flex;align-items:center;font-size:", _ref => {
+  let {
+    variant
+  } = _ref;
+  return variant === 'big' ? 24 : 16;
+}, "px;", _ref2 => {
+  let {
+    variant
+  } = _ref2;
+  return variant === 'capitalized' ? `text-transform: capitalize;` : '';
+}, " color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.textStrong;
+}, ";font-weight:500;margin-right:4px;");
+const Strong = _ref4 => {
+  let {
+    variant = 'normal',
+    children = null,
+    isDisabledOnOverlay = false
+  } = _ref4;
+  return jsx(StyledStrong, {
+    variant: variant,
+    isDisabledOnOverlay: isDisabledOnOverlay,
+    children: children
+  });
+};
+
+export { Strong, StyledStrong };

package/dist/src/components/EstimateCost/Components/Unit.js

@@ -0,0 +1,61 @@
+import _styled from '@emotion/styled/base';
+import { TextInput } from '@ultraviolet/ui';
+import { useState, useEffect } from 'react';
+import { useOverlay } from '../OverlayContext.js';
+import { ItemResourceName } from '../componentStyle.js';
+import { Regular } from './Regular.js';
+import { jsx } 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 StyledTextInput = /*#__PURE__*/_styled(TextInput, {
+  target: "e1pr25uw0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "l1y63n",
+  styles: "input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}input[type='number']{-moz-appearance:textfield;}"
+} : {
+  name: "l1y63n",
+  styles: "input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}input[type='number']{-moz-appearance:textfield;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Unit = _ref => {
+  let {
+    amount,
+    itemCallback,
+    getAmountValue,
+    unit
+  } = _ref;
+  const {
+    isOverlay
+  } = useOverlay();
+  const [capacity, setCapacity] = useState(amount === 0 ? undefined : amount);
+  useEffect(() => {
+    itemCallback?.(capacity, true);
+    getAmountValue?.(capacity);
+  }, [getAmountValue, itemCallback, capacity]);
+  return isOverlay ? jsx(ItemResourceName, {
+    animated: false,
+    children: jsx(Regular, {
+      children: capacity
+    })
+  }) :
+  // 120px is arbitrary, just to avoid full width input (ugly) nor too small input.
+  jsx("div", {
+    style: {
+      width: '120px'
+    },
+    children: jsx(StyledTextInput, {
+      type: "number",
+      size: "small",
+      unit: unit,
+      placeholder: "00",
+      name: "capacity",
+      value: capacity?.toString(),
+      onChange: capacityText => {
+        setCapacity(Number(capacityText) < 0 ? 0 : Number(capacityText));
+        getAmountValue?.(capacity);
+      }
+    })
+  });
+};
+
+export { Unit };

package/dist/src/components/EstimateCost/Components/UnitInput.js

@@ -0,0 +1,122 @@
+import _styled from '@emotion/styled/base';
+import { Stack, TextInput, SelectInput } from '@ultraviolet/ui';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const sizesHeight = {
+  large: 48,
+  medium: 40,
+  small: 32
+};
+const CustomTextInput = /*#__PURE__*/_styled(TextInput, {
+  target: "epio27v1"
+})("input{border-radius:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.radii.default;
+}, " 0 0 ", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.radii.default;
+}, ";min-width:60px;border-right:0;&:hover,&:focus{text-decoration:none;border-right-width:1px;border-right-style:solid;border-color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.primary.borderWeak;
+}, ";}}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}input[type='number']{-moz-appearance:textfield;}");
+const CustomSelectInput = /*#__PURE__*/_styled(SelectInput, {
+  target: "epio27v0"
+})(_ref4 => {
+  let {
+    width
+  } = _ref4;
+  return width && `width: ${width}px;`;
+}, " ", _ref5 => {
+  let {
+    height
+  } = _ref5;
+  return height && `height: ${height}px;`;
+}, " &:hover,&:focus{text-decoration:none;border-color:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.primary.borderWeak;
+}, ";box-shadow:none;}");
+const customSelectStyle = height => () => ({
+  control: {
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0,
+    boxShadow: 'none',
+    height,
+    minHeight: height
+  },
+  singleValue: {
+    marginTop: 0
+  }
+});
+const UnitInput = _ref7 => {
+  let {
+    name = '',
+    maxValue = 99999,
+    minValue = 1,
+    size = 'medium',
+    placeholder = '0',
+    onChange,
+    onChangeUnitValue,
+    value,
+    unitValue,
+    textBoxWidth = 100,
+    selectInputWidth = 200,
+    disabled = false,
+    options,
+    className,
+    notice,
+    label,
+    required,
+    valueError,
+    unitError,
+    type = 'number',
+    'data-testid': dataTestId
+  } = _ref7;
+  return jsxs(Stack, {
+    direction: "row",
+    "data-testid": dataTestId,
+    children: [jsx(CustomTextInput, {
+      height: sizesHeight[size],
+      width: textBoxWidth,
+      type: type,
+      name: `${name}-value`,
+      max: maxValue,
+      min: minValue,
+      required: required,
+      value: value,
+      placeholder: placeholder,
+      onChange: input => {
+        const numericValue = input ? parseInt(input, 10) : minValue;
+        onChange(numericValue);
+      },
+      className: className,
+      disabled: disabled,
+      notice: notice,
+      label: label,
+      error: valueError
+    }), jsx(CustomSelectInput, {
+      width: selectInputWidth,
+      noTopLabel: true,
+      height: sizesHeight[size],
+      id: `${name}-unit`,
+      name: `${name}-unit`,
+      onChange: newValue => {
+        onChangeUnitValue(newValue.value);
+      },
+      error: unitError,
+      value: options.find(option => option.value === unitValue) || options[0],
+      options: options,
+      customStyle: customSelectStyle(sizesHeight[size]),
+      disabled: disabled || options.length === 1
+    })]
+  });
+};
+
+export { UnitInput, sizesHeight };

package/dist/src/components/EstimateCost/Components/Zone.js

@@ -0,0 +1,50 @@
+import _styled from '@emotion/styled/base';
+import { useEstimateCost } from '../EstimateCostProvider.js';
+import { Item } from './Item.js';
+import { Strong } from './Strong.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledImage = /*#__PURE__*/_styled("img", {
+  target: "e24b3x10"
+})("width:15px;margin-right:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";");
+const Zone = _ref2 => {
+  let {
+    label,
+    image,
+    shouldBeHidden = false,
+    priceText,
+    animated = false,
+    isFirstElement,
+    isLastElement,
+    productsCallback,
+    iteration,
+    discount
+  } = _ref2;
+  const {
+    locales
+  } = useEstimateCost();
+  return jsx(Item, {
+    label: locales['estimate.cost.az.label'],
+    shouldBeHidden: shouldBeHidden,
+    priceText: priceText,
+    animated: animated,
+    isFirstElement: isFirstElement,
+    isLastElement: isLastElement,
+    productsCallback: productsCallback,
+    iteration: iteration,
+    discount: discount,
+    children: jsxs(Strong, {
+      children: [jsx(StyledImage, {
+        alt: label,
+        src: image
+      }), label]
+    })
+  });
+};
+
+export { Zone };

package/dist/src/components/EstimateCost/EstimateCost.js

@@ -0,0 +1,126 @@
+import _styled from '@emotion/styled/base';
+import { Text } from '@ultraviolet/ui';
+import { Children } from 'react';
+import { Item } from './Components/Item.js';
+import { LineThrough } from './Components/LineThrough.js';
+import { NumberInput } from './Components/NumberInput.js';
+import { Region } from './Components/Region.js';
+import { Regular } from './Components/Regular.js';
+import { Strong } from './Components/Strong.js';
+import { Unit } from './Components/Unit.js';
+import { Zone } from './Components/Zone.js';
+import { EstimateCostContent } from './EstimateCostContent.js';
+import { EstimateCostProvider } from './EstimateCostProvider.js';
+import { useOverlay } from './OverlayContext.js';
+import EstimateCostLocales from './locales/en.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const MaxWidthText = /*#__PURE__*/_styled(Text, {
+  target: "e13v5qur1"
+})("max-width:", _ref => {
+  let {
+    maxWidth
+  } = _ref;
+  return maxWidth;
+}, "px;");
+const DEFAULT_UNIT_LIST = ['hours', 'days', 'months'];
+const EstimateCost = _ref2 => {
+  let {
+    description,
+    alert,
+    alertVariant = 'warning',
+    defaultTimeUnit = 'hours',
+    timeUnits = DEFAULT_UNIT_LIST,
+    hideOverlay = false,
+    disableOverlayLeft = false,
+    disableOverlayRight = false,
+    hideTimeUnit = false,
+    hideTotal = false,
+    discount = 0,
+    OverlayRight,
+    OverlayLeft,
+    isBeta = false,
+    commitmentFees,
+    commitmentFeesContent,
+    monthlyFees,
+    monthlyFeesLabel,
+    monthlyFeesContent,
+    overlayUnit = 'hours',
+    children = null,
+    locales = EstimateCostLocales,
+    numberLocales = 'en-EN',
+    currency = 'EUR'
+  } = _ref2;
+  return jsx(EstimateCostProvider, {
+    locales: locales,
+    currency: currency,
+    numberLocales: numberLocales,
+    children: jsx(EstimateCostContent, {
+      description: description,
+      alert: alert,
+      alertVariant: alertVariant,
+      defaultTimeUnit: defaultTimeUnit,
+      timeUnits: timeUnits,
+      hideOverlay: hideOverlay,
+      disableOverlayLeft: disableOverlayLeft,
+      disableOverlayRight: disableOverlayRight,
+      hideTimeUnit: hideTimeUnit,
+      hideTotal: hideTotal,
+      discount: discount,
+      OverlayRight: OverlayRight,
+      OverlayLeft: OverlayLeft,
+      isBeta: isBeta,
+      commitmentFees: commitmentFees,
+      commitmentFeesContent: commitmentFeesContent,
+      monthlyFees: monthlyFees,
+      monthlyFeesLabel: monthlyFeesLabel,
+      monthlyFeesContent: monthlyFeesContent,
+      overlayUnit: overlayUnit,
+      locales: locales,
+      children: children
+    })
+  });
+};
+EstimateCost.LineThrough = LineThrough;
+EstimateCost.Item = Item;
+EstimateCost.NumberInput = NumberInput;
+EstimateCost.Unit = Unit;
+EstimateCost.Strong = Strong;
+EstimateCost.Regular = Regular;
+EstimateCost.Image = /*#__PURE__*/_styled("img", {
+  target: "e13v5qur0"
+})("width:15px;margin-right:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['1'];
+}, ";");
+EstimateCost.Region = Region;
+EstimateCost.Zone = Zone;
+const Ellipsis = _ref4 => {
+  let {
+    children,
+    maxWidth = 350,
+    'data-testid': dataTestId
+  } = _ref4;
+  const {
+    isOverlay
+  } = useOverlay();
+  const text = Children.toArray(children).join('').toString();
+  return jsx("div", {
+    style: {
+      display: !isOverlay ? 'inline-flex' : undefined
+    },
+    "data-testid": dataTestId,
+    children: jsx(MaxWidthText, {
+      as: "p",
+      oneLine: true,
+      variant: "bodyStrong",
+      maxWidth: isOverlay ? 200 : maxWidth,
+      children: text
+    })
+  });
+};
+EstimateCost.Ellipsis = Ellipsis;
+
+export { EstimateCost };