@invoicebox/ui 0.1.0-alpha.175 → 0.1.0-alpha.177

package/dist/components/common/Dropdown/index.d.ts

@@ -10,5 +10,6 @@ export type TProps = {
     width?: string;
     zIndex?: number;
     onCloseTransitionEnd?: () => void;
+    isTopPosition?: boolean;
 };
 export declare const Dropdown: FC<TProps>;

package/dist/components/common/Dropdown/index.js

@@ -32,7 +32,9 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'auto' : _ref$width,
     zIndex = _ref.zIndex,
-    onCloseTransitionEnd = _ref.onCloseTransitionEnd;
+    onCloseTransitionEnd = _ref.onCloseTransitionEnd,
+    _ref$isTopPosition = _ref.isTopPosition,
+    isTopPosition = _ref$isTopPosition === void 0 ? false : _ref$isTopPosition;
   var palette = (0, _palette.useComponentPalette)('dropdown');
   var position = (0, _react.useRef)({
     isAbove: true,
@@ -95,7 +97,7 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
         belowHeight: belowHeight,
         dropdownIndent: positionVertical
       }) : {
-        isAbove: false,
+        isAbove: isTopPosition,
         translateY: '0px'
       };
     }

package/dist/components/common/Dropdown/index.stories.js

@@ -29,7 +29,8 @@ var args = {
   width: 'auto',
   zIndex: 5,
   onCloseTransitionEnd: (0, _addonActions.action)('closeTransitionEnd'),
-  children: Array(100).fill('children ').join('')
+  children: Array(100).fill('children ').join(''),
+  isTopPosition: false
 };
 var Default = exports.Default = {
   args: _objectSpread(_objectSpread({}, args), {}, {

package/dist/components/common/ReadOnlyLabelValueField/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { TSizes } from '../../form/constants';
+export type TProps = {
+    label: string;
+    value?: string;
+    size?: TSizes;
+};
+export declare const ReadOnlyLabelValueField: FC<TProps>;

package/dist/components/common/ReadOnlyLabelValueField/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReadOnlyLabelValueField = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _constants = require("../../form/constants");
+var _InputLabel = require("../../form/InputLabel");
+var _palette = require("../../../palette");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ReadOnlyLabelValueField = exports.ReadOnlyLabelValueField = function ReadOnlyLabelValueField(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'M' : _ref$size;
+  var _SIZE_PARAMS_MAP$size = _constants.SIZE_PARAMS_MAP[size],
+    paddingBottom = _SIZE_PARAMS_MAP$size.paddingBottom,
+    paddingTop = _SIZE_PARAMS_MAP$size.paddingTop,
+    variant = _SIZE_PARAMS_MAP$size.variant;
+  var palette = (0, _palette.useComponentPalette)('readOnlyLabelValueField');
+  return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
+    label: label
+  }, /*#__PURE__*/_react["default"].createElement(S.Value, {
+    $color: palette.value,
+    $paddingTop: paddingTop,
+    $paddingBottom: paddingBottom,
+    variant: variant
+  }, value));
+};

package/dist/components/common/ReadOnlyLabelValueField/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TProps } from '.';
+declare const meta: Meta<TProps>;
+export default meta;
+export declare const Default: StoryObj<TProps>;

package/dist/components/common/ReadOnlyLabelValueField/index.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/ReadOnlyLabelValueField',
+  component: _.ReadOnlyLabelValueField,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    label: 'Label',
+    value: 'Value',
+    size: 'L'
+  }
+};

package/dist/components/common/ReadOnlyLabelValueField/palette.d.ts

@@ -0,0 +1,5 @@
+import { TAbstractPalette } from '../../../palette';
+export type TReadOnlyLabelValueFieldPalette = {
+    value: string;
+};
+export declare const generateReadOnlyLabelValueFieldPalette: (abstractPalette: TAbstractPalette) => TReadOnlyLabelValueFieldPalette;

package/dist/components/common/ReadOnlyLabelValueField/palette.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateReadOnlyLabelValueFieldPalette = void 0;
+var generateReadOnlyLabelValueFieldPalette = exports.generateReadOnlyLabelValueFieldPalette = function generateReadOnlyLabelValueFieldPalette(abstractPalette) {
+  return {
+    value: abstractPalette.primary
+  };
+};

package/dist/components/common/ReadOnlyLabelValueField/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Value: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
+    $paddingTop: number;
+    $paddingBottom: number;
+    $color: string;
+}>> & string & Omit<import("react").FC<import("../Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common/ReadOnlyLabelValueField/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Value = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Value = exports.Value = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "styles__Value",
+  componentId: "sc-630k3x-0"
+})(["padding-left:20px;padding-right:12px;padding-top:", "px;padding-bottom:", "px;color:", ";"], function (_ref) {
+  var $paddingTop = _ref.$paddingTop;
+  return $paddingTop;
+}, function (_ref2) {
+  var $paddingBottom = _ref2.$paddingBottom;
+  return $paddingBottom;
+}, function (_ref3) {
+  var $color = _ref3.$color;
+  return $color;
+});

package/dist/index.d.ts

@@ -29,6 +29,8 @@ export { WarningIcon } from './components/common/WarningIcon';
 export type { TProps as TWarningIconProps } from './components/common/WarningIcon';
 export { Divider } from './components/common/Divider';
 export type { TProps as TDividerProps } from './components/common/Divider';
+export { ReadOnlyLabelValueField } from './components/common/ReadOnlyLabelValueField';
+export type { TProps as TReadOnlyLabelValueFieldProps } from './components/common/ReadOnlyLabelValueField';
 export { SearchInput } from './components/form/SearchInput';
 export type { TProps as TSearchInputProps } from './components/form/SearchInput';
 export { CodeInput } from './components/form/CodeInput';

package/dist/index.js

@@ -171,6 +171,12 @@ Object.defineProperty(exports, "QRCode", {
     return _QRCode.QRCode;
   }
 });
+Object.defineProperty(exports, "ReadOnlyLabelValueField", {
+  enumerable: true,
+  get: function get() {
+    return _ReadOnlyLabelValueField.ReadOnlyLabelValueField;
+  }
+});
 Object.defineProperty(exports, "Scrollbar", {
   enumerable: true,
   get: function get() {
@@ -335,6 +341,7 @@ var _Calendar = require("./components/common/Calendar");
 var _DateInput = require("./components/form/DateInput");
 var _WarningIcon = require("./components/common/WarningIcon");
 var _Divider = require("./components/common/Divider");
+var _ReadOnlyLabelValueField = require("./components/common/ReadOnlyLabelValueField");
 var _SearchInput = require("./components/form/SearchInput");
 var _CodeInput = require("./components/form/CodeInput");
 var _Flag = require("./components/common/Flag");

package/dist/palette/context.d.ts

@@ -24,6 +24,7 @@ import { TEntityAutocompleteOptionsDrawerPalette } from '../components/common/En
 import { TCodeInputPalette } from '../components/form/CodeInput/palette';
 import { TResetButtonPalette } from '../components/form/ResetButton/palette';
 import { TTogglePalette } from '../components/form/Toggle/palette';
+import { TReadOnlyLabelValueFieldPalette } from '../components/common/ReadOnlyLabelValueField/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
@@ -50,6 +51,7 @@ type TContext = {
     codeInput: TCodeInputPalette;
     resetButton: TResetButtonPalette;
     toggle: TTogglePalette;
+    readOnlyLabelValueField: TReadOnlyLabelValueFieldPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -31,6 +31,7 @@ var _palette22 = require("../components/common/EntityAutocompleteOptionsDrawer/p
 var _palette23 = require("../components/form/CodeInput/palette");
 var _palette24 = require("../components/form/ResetButton/palette");
 var _palette25 = require("../components/form/Toggle/palette");
+var _palette26 = require("../components/common/ReadOnlyLabelValueField/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
   invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
@@ -56,5 +57,6 @@ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createCont
   entityAutocompleteOptionsDrawer: (0, _palette22.generateEntityAutocompleteOptionsDrawerPalette)(_constants.defaultAbstractPalette),
   codeInput: (0, _palette23.generateCodeInputPalette)(_constants.defaultAbstractPalette),
   resetButton: (0, _palette24.generateResetButtonPalette)(_constants.defaultAbstractPalette),
-  toggle: (0, _palette25.generateTogglePalette)(_constants.defaultAbstractPalette)
+  toggle: (0, _palette25.generateTogglePalette)(_constants.defaultAbstractPalette),
+  readOnlyLabelValueField: (0, _palette26.generateReadOnlyLabelValueFieldPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.js

@@ -32,6 +32,7 @@ var _palette22 = require("../components/common/EntityAutocompleteOptionsDrawer/p
 var _palette23 = require("../components/form/CodeInput/palette");
 var _palette24 = require("../components/form/ResetButton/palette");
 var _palette25 = require("../components/form/Toggle/palette");
+var _palette26 = require("../components/common/ReadOnlyLabelValueField/palette");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -76,7 +77,8 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
       entityAutocompleteOptionsDrawer: (0, _palette22.generateEntityAutocompleteOptionsDrawerPalette)(mergedAbstractPalette),
       codeInput: (0, _palette23.generateCodeInputPalette)(mergedAbstractPalette),
       resetButton: (0, _palette24.generateResetButtonPalette)(mergedAbstractPalette),
-      toggle: (0, _palette25.generateTogglePalette)(mergedAbstractPalette)
+      toggle: (0, _palette25.generateTogglePalette)(mergedAbstractPalette),
+      readOnlyLabelValueField: (0, _palette26.generateReadOnlyLabelValueFieldPalette)(mergedAbstractPalette)
     };
   }, [mergedSkeletonPalette, mergedAbstractPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {

package/dist/palette/usePalette.d.ts

@@ -24,4 +24,5 @@ export declare const usePalette: () => {
     codeInput: import("../components/form/CodeInput/palette").TCodeInputPalette;
     resetButton: import("../components/form/ResetButton/palette").TResetButtonPalette;
     toggle: import("../components/form/Toggle/palette").TTogglePalette;
+    readOnlyLabelValueField: import("../components/common/ReadOnlyLabelValueField/palette").TReadOnlyLabelValueFieldPalette;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.175",
+    "version": "0.1.0-alpha.177",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {