@widergy/energy-ui 3.121.2 → 3.122.0

package/dist/components/UTBodyPlaceholder/UTBodyPlaceholder.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Playground = void 0;
+var _utils = require("stories/utils");
+var _constants = require("./constants");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  args: {
+    size: 'large',
+    subtitle: undefined,
+    title: undefined
+  },
+  argTypes: {
+    classNames: {
+      description: 'Clases personalizadas.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(['icon', 'bodyPlaceholderTextContainer', 'bodyPlaceholderText', 'bodyPlaceholder'])
+        }
+      }
+    },
+    size: {
+      control: 'radio',
+      description: 'Tamaño del placeholder.',
+      options: ['large', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'large'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(['large', 'small'])
+        }
+      }
+    },
+    subtitle: {
+      description: 'Subtítulo del placeholder.',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_TEXTS.subtitle
+        }
+      }
+    },
+    title: {
+      description: 'Título del placeholder.',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_TEXTS.title
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    controls: {
+      exclude: ['classNames']
+    },
+    docs: {
+      description: {
+        component: 'Placeholder para el body de componentes que wrappean varios tipos de contenido.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTBodyPlaceholder'
+};
+const Playground = exports.Playground = {
+  name: 'Playground'
+};

package/dist/components/UTBodyPlaceholder/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = exports.DEFAULT_TEXTS = void 0;
+const SIZES = exports.SIZES = {
+  L: 'large',
+  S: 'small'
+};
+const DEFAULT_TEXTS = exports.DEFAULT_TEXTS = {
+  subtitle: 'Reemplazar por otro componente',
+  title: 'Body content'
+};

package/dist/components/UTBodyPlaceholder/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTBodyPlaceholder = _ref => {
+  var _classNames$bodyPlace, _classNames$icon, _classNames$bodyPlace2, _classNames$bodyPlace3, _classNames$bodyPlace4;
+  let {
+    classNames = {},
+    size = _constants.SIZES.L,
+    subtitle = _constants.DEFAULT_TEXTS.subtitle,
+    title = _constants.DEFAULT_TEXTS.title
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.bodyPlaceholder, " ").concat(_stylesModule.default.bodyPlaceholderWidth, " ").concat((_classNames$bodyPlace = classNames.bodyPlaceholder) !== null && _classNames$bodyPlace !== void 0 ? _classNames$bodyPlace : '')
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    className: "".concat(_stylesModule.default.icon, " ").concat((_classNames$icon = classNames.icon) !== null && _classNames$icon !== void 0 ? _classNames$icon : ''),
+    name: "IconReplace",
+    size: 40
+  }), size === _constants.SIZES.L && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.bodyPlaceholderTextContainer, " ").concat((_classNames$bodyPlace2 = classNames.bodyPlaceholderTextContainer) !== null && _classNames$bodyPlace2 !== void 0 ? _classNames$bodyPlace2 : '')
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(_stylesModule.default.bodyPlaceholderText, " ").concat((_classNames$bodyPlace3 = classNames.bodyPlaceholderText) !== null && _classNames$bodyPlace3 !== void 0 ? _classNames$bodyPlace3 : ''),
+    weight: "medium",
+    variant: "subtitle1"
+  }, title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(_stylesModule.default.bodyPlaceholderText, " ").concat((_classNames$bodyPlace4 = classNames.bodyPlaceholderText) !== null && _classNames$bodyPlace4 !== void 0 ? _classNames$bodyPlace4 : ''),
+    variant: "small"
+  }, subtitle)));
+};
+UTBodyPlaceholder.propTypes = {
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  size: _propTypes.string,
+  subtitle: _propTypes.string,
+  title: _propTypes.string
+};
+var _default = exports.default = UTBodyPlaceholder;

package/dist/components/UTBodyPlaceholder/styles.module.scss

@@ -0,0 +1,34 @@
+.bodyPlaceholder {
+  align-items: center;
+  background-color: #7B61FF1A;
+  border: 1px dashed #7B61FF;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  grid-gap: 20px;
+  justify-content: center;
+  padding: 4px;
+}
+
+.bodyPlaceholderWidth {
+  width: fit-content;
+}
+
+.icon {
+  stroke: #7B61FF;
+}
+
+.bodyPlaceholderTextContainer {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+  justify-content: center;
+}
+
+.bodyPlaceholderText {
+  color: #7B61FF !important;
+}

package/dist/components/UTButton/constants.js

@@ -32,14 +32,17 @@ const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
 };
 const COLORS_MAPPER = exports.COLORS_MAPPER = {
   error: _Palette.COLOR_THEMES.error,
+  gray: _Palette.COLOR_THEMES.gray,
   negative: _Palette.COLOR_THEMES.negative,
   primary: _Palette.COLOR_THEMES.accent,
   secondary: _Palette.COLOR_THEMES.neutral,
-  success: _Palette.COLOR_THEMES.success
+  success: _Palette.COLOR_THEMES.success,
+  light: _Palette.COLOR_THEMES.light
 };
 const SHADOW_MAPPER = exports.SHADOW_MAPPER = {
-  [COLORS_MAPPER.error]: 'accentError',
-  [COLORS_MAPPER.negative]: 'accentNeutral',
-  [COLORS_MAPPER.primary]: 'accent',
-  [COLORS_MAPPER.secondary]: 'grayscale'
+  [COLORS_MAPPER.error]: 'semanticError',
+  [COLORS_MAPPER.negative]: 'actionNeutral',
+  [COLORS_MAPPER.primary]: 'actionAccent',
+  [COLORS_MAPPER.secondary]: 'grayscale',
+  [COLORS_MAPPER.gray]: 'grayscale'
 };

package/dist/components/UTButton/stories/UTButton.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTButtonStories from './UTButton.stories.js';
+
+<Meta of={UTButtonStories} />
+
+<Title>UTButton</Title>
+
+<Description of={UTButtonStories} />
+
+<Canvas of={UTButtonStories.Playground} withToolbar />
+
+<ArgTypes exclude={['classes']} />

package/dist/components/UTButton/stories/UTButton.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Playground = void 0;
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTButton',
+  component: _.default,
+  args: {
+    children: undefined,
+    classNames: undefined,
+    count: undefined,
+    Icon: undefined,
+    onClick: undefined,
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS,
+    options: {
+      storySort: {
+        method: 'alphabetical'
+      }
+    }
+  }
+};
+const Playground = exports.Playground = {
+  args: {
+    children: 'Button'
+  },
+  name: 'Playground'
+};

package/dist/components/UTButton/stories/UTButtonAdornments.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconPlacementRight = exports.IconPlacementLeft = exports.IconOnly = exports.CountOnly = exports.CountAndIcon = void 0;
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTButton/Adornments',
+  component: _.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const IconPlacementLeft = exports.IconPlacementLeft = {
+  args: {
+    children: 'Icon Placement Left',
+    Icon: 'IconArrowLeft',
+    iconPlacement: 'left'
+  }
+};
+const IconPlacementRight = exports.IconPlacementRight = {
+  args: {
+    children: 'Icon Placement Right',
+    Icon: 'IconArrowRight',
+    iconPlacement: 'right'
+  }
+};
+const IconOnly = exports.IconOnly = {
+  args: {
+    Icon: 'IconSearch'
+  }
+};
+const CountAndIcon = exports.CountAndIcon = {
+  args: {
+    count: 7,
+    Icon: 'IconBell'
+  }
+};
+const CountOnly = exports.CountOnly = {
+  args: {
+    count: 5
+  }
+};

package/dist/components/UTButton/stories/UTButtonColorThemes.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Success = exports.Secondary = exports.Negative = exports.Gray = exports.Error = void 0;
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTButton/Color Themes',
+  component: _.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const Error = exports.Error = {
+  args: {
+    children: 'Error Color Theme',
+    colorTheme: 'error'
+  }
+};
+const Gray = exports.Gray = {
+  args: {
+    children: 'Gray Color Theme',
+    colorTheme: 'gray'
+  }
+};
+const Negative = exports.Negative = {
+  args: {
+    children: 'Negative Color Theme',
+    colorTheme: 'negative'
+  }
+};
+const Secondary = exports.Secondary = {
+  args: {
+    children: 'Secondary Color Theme',
+    colorTheme: 'secondary'
+  }
+};
+const Success = exports.Success = {
+  args: {
+    children: 'Success Color Theme',
+    colorTheme: 'success'
+  }
+};

package/dist/components/UTButton/stories/UTButtonSizes.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Small = exports.Medium = exports.Large = void 0;
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTButton/Sizes',
+  component: _.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const Small = exports.Small = {
+  args: {
+    children: 'Small Size',
+    size: 'small'
+  }
+};
+const Medium = exports.Medium = {
+  args: {
+    children: 'Medium Size',
+    size: 'medium'
+  }
+};
+const Large = exports.Large = {
+  args: {
+    children: 'Large Size',
+    size: 'large'
+  }
+};

package/dist/components/UTButton/stories/UTButtonStates.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Loading = exports.Disabled = void 0;
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTButton/States',
+  component: _.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const Disabled = exports.Disabled = {
+  args: {
+    children: 'Disabled',
+    disabled: true
+  }
+};
+const Loading = exports.Loading = {
+  args: {
+    children: 'Loading',
+    loading: true
+  }
+};

package/dist/components/UTButton/stories/UTButtonVariants.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = exports.Shadow = exports.Semitransparent = exports.Outlined = exports.Filled = void 0;
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const COMMON_PROPS = {
+  count: 3,
+  Icon: 'IconPencil'
+};
+var _default = exports.default = {
+  title: 'Energy-UI/UTButton/Variants',
+  component: _.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const Filled = exports.Filled = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Filled Variant',
+    variant: 'filled'
+  }
+};
+const Semitransparent = exports.Semitransparent = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Semitransparent Variant',
+    variant: 'semitransparent'
+  }
+};
+const Outlined = exports.Outlined = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Outlined Variant',
+    variant: 'outlined'
+  }
+};
+const Shadow = exports.Shadow = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Shadow Variant',
+    variant: 'shadow'
+  }
+};
+const Text = exports.Text = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Text Variant',
+    variant: 'text'
+  }
+};