@micromag/element-button 0.3.813 → 0.3.820

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-element-button-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-clip:padding-box;background-color:hsla(0,0%,100%,.1);border:0;border-radius:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;padding:5px 10px;position:relative}.micromag-element-button-container:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff!important;box-shadow:0 0 2px 0 #fff!important;-webkit-box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff)!important;box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff)!important;outline:2px solid #000!important}.micromag-element-button-container.micromag-element-button-disabled,.micromag-element-button-container:disabled{cursor:auto}.micromag-element-button-border{display:block}
+.micromag-element-button-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-clip:padding-box;background-color:hsla(0,0%,100%,.1);border:0;border-radius:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;padding:5px 10px;position:relative}.micromag-element-button-container:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff!important;box-shadow:0 0 2px 0 #fff!important;-webkit-box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff)!important;box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff)!important;outline:2px solid #000!important}.micromag-element-button-container.micromag-element-button-disabled,.micromag-element-button-container:disabled{cursor:auto}.micromag-element-button-container.micromag-element-button-rich{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelBottom{-ms-flex-direction:column;flex-direction:column}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelTop{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutNoLabel{-ms-flex-direction:row;flex-direction:row}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelLeft{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelOver{position:relative}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelOver .micromag-element-button-text{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.7)),to(transparent));background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);bottom:0;left:0;padding:10px;position:absolute;right:0}.micromag-element-button-emptyButton{padding:10px 5px}.micromag-element-button-border{display:block}.micromag-element-button-visual{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;overflow:auto}.micromag-element-button-video{position:relative!important}

package/es/index.js

@@ -3,16 +3,19 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { Button as Button$1 } from '@micromag/core/components';
+import { Button as Button$1, ScreenElement } from '@micromag/core/components';
 import { getStyleFromText, getStyleFromBox } from '@micromag/core/utils';
+import { FormattedMessage } from 'react-intl';
+import Text from '@micromag/element-text';
+import Visual from '@micromag/element-visual';
 
-var styles = {"container":"micromag-element-button-container"};
+var styles = {"container":"micromag-element-button-container","rich":"micromag-element-button-rich","layoutLabelBottom":"micromag-element-button-layoutLabelBottom","layoutLabelTop":"micromag-element-button-layoutLabelTop","layoutNoLabel":"micromag-element-button-layoutNoLabel","layoutLabelLeft":"micromag-element-button-layoutLabelLeft","layoutLabelOver":"micromag-element-button-layoutLabelOver","text":"micromag-element-button-text","emptyButton":"micromag-element-button-emptyButton","visual":"micromag-element-button-visual","video":"micromag-element-button-video"};
 
-var _excluded = ["textStyle", "buttonStyle", "type", "disabled", "focusable", "inline", "onClick", "children", "className", "withoutExternalBorder", "refButton"],
+var _excluded$1 = ["textStyle", "buttonStyle", "type", "disabled", "focusable", "inline", "onClick", "children", "className", "withoutExternalBorder", "refButton", "style"],
   _excluded2 = ["body"];
-var propTypes = {
+var propTypes$1 = {
   textStyle: PropTypes$1.textStyle,
   buttonStyle: PropTypes$1.boxStyle,
   type: PropTypes.oneOf(['button', 'submit']),
@@ -25,9 +28,10 @@ var propTypes = {
   withoutExternalBorder: PropTypes.bool,
   refButton: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any // eslint-disable-line
-  })])
+  })]),
+  style: PropTypes.object // eslint-disable-line
 };
-var defaultProps = {
+var defaultProps$1 = {
   textStyle: null,
   buttonStyle: null,
   type: 'button',
@@ -38,7 +42,8 @@ var defaultProps = {
   children: null,
   className: null,
   withoutExternalBorder: true,
-  refButton: null
+  refButton: null,
+  style: null
 };
 var Button = function Button(_ref) {
   var textStyle = _ref.textStyle,
@@ -52,8 +57,10 @@ var Button = function Button(_ref) {
     className = _ref.className,
     withoutExternalBorder = _ref.withoutExternalBorder,
     refButton = _ref.refButton,
-    buttonProps = _objectWithoutProperties(_ref, _excluded);
-  var finalStyles = null;
+    style = _ref.style,
+    buttonProps = _objectWithoutProperties(_ref, _excluded$1);
+  var finalStyles = style;
+
   // eslint-disable-next-line no-unused-vars
   var _ref2 = buttonProps || {};
     _ref2.body;
@@ -88,7 +95,145 @@ var Button = function Button(_ref) {
     withoutBootstrapStyles: true
   }, otherProps), children);
 };
-Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
+Button.propTypes = propTypes$1;
+Button.defaultProps = defaultProps$1;
+
+var _excluded = ["label", "visual", "visualWidth", "labelBoxStyle", "textStyle", "buttonStyle", "resolution", "shouldLoad", "layout", "type", "disabled", "focusable", "inline", "onClick", "className", "textClassName", "visualClassName", "imageClassName", "videoClassName", "withoutExternalBorder", "refButton", "children"];
+var propTypes = {
+  label: PropTypes$1.textElement,
+  visual: PropTypes$1.media,
+  visualWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  labelBoxStyle: PropTypes$1.boxStyle,
+  textStyle: PropTypes$1.textStyle,
+  buttonStyle: PropTypes$1.boxStyle,
+  resolution: PropTypes.number,
+  shouldLoad: PropTypes.bool,
+  layout: PropTypes.oneOf(['label-bottom', 'label-top', 'no-label', 'label-over', 'label-right']),
+  type: PropTypes.oneOf(['button', 'submit']),
+  disabled: PropTypes.bool,
+  focusable: PropTypes.bool,
+  inline: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  textClassName: PropTypes.string,
+  imageClassName: PropTypes.string,
+  videoClassName: PropTypes.string,
+  visualClassName: PropTypes.string,
+  withoutExternalBorder: PropTypes.bool,
+  refButton: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
+  })]),
+  children: PropTypes.node
+};
+var defaultProps = {
+  label: null,
+  visual: null,
+  visualWidth: null,
+  labelBoxStyle: null,
+  textStyle: null,
+  buttonStyle: null,
+  resolution: null,
+  shouldLoad: true,
+  layout: 'label-bottom',
+  type: 'button',
+  disabled: false,
+  focusable: true,
+  inline: false,
+  onClick: null,
+  className: null,
+  textClassName: null,
+  imageClassName: null,
+  videoClassName: null,
+  visualClassName: null,
+  withoutExternalBorder: true,
+  refButton: null,
+  children: null
+};
+var RichButton = function RichButton(_ref) {
+  var label = _ref.label,
+    visual = _ref.visual,
+    visualWidth = _ref.visualWidth,
+    labelBoxStyle = _ref.labelBoxStyle,
+    textStyle = _ref.textStyle,
+    buttonStyle = _ref.buttonStyle,
+    resolution = _ref.resolution,
+    shouldLoad = _ref.shouldLoad,
+    layout = _ref.layout,
+    type = _ref.type,
+    disabled = _ref.disabled,
+    focusable = _ref.focusable,
+    inline = _ref.inline,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    textClassName = _ref.textClassName,
+    visualClassName = _ref.visualClassName,
+    imageClassName = _ref.imageClassName,
+    videoClassName = _ref.videoClassName,
+    withoutExternalBorder = _ref.withoutExternalBorder,
+    refButton = _ref.refButton,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var Tag = useMemo(function () {
+    switch (type) {
+      case 'submit':
+        return Button;
+      case 'button':
+        return Button;
+      default:
+        return 'div';
+    }
+  }, [type]);
+  var _ref2 = visual || {},
+    _ref2$url = _ref2.url,
+    visualUrl = _ref2$url === void 0 ? null : _ref2$url;
+  var hasVisual = visualUrl !== null;
+  var _ref3 = label || {},
+    _ref3$body = _ref3.body,
+    body = _ref3$body === void 0 ? null : _ref3$body;
+  var hasBody = body !== null && body.trim() !== '';
+  var showLabel = layout !== 'no-label';
+  var defaultWidth = (layout === 'label-left' || layout === 'label-right') && hasBody && hasVisual ? '30%' : '100%';
+  var finalLayout = hasVisual ? layout : null;
+
+  // console.log('finalLayout', finalLayout);
+
+  return /*#__PURE__*/React.createElement(Tag, Object.assign({
+    type: type,
+    textStyle: textStyle,
+    buttonStyle: buttonStyle,
+    disabled: disabled,
+    focusable: focusable,
+    inline: inline,
+    onClick: onClick,
+    className: classNames([styles.container, styles.rich, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.layoutLabelBottom, finalLayout === 'label-bottom'), styles.layoutLabelTop, finalLayout === 'label-top'), styles.layoutNoLabel, finalLayout === 'no-label'), styles.layoutLabelOver, finalLayout === 'label-over'), styles.layoutLabelLeft, finalLayout === 'label-left'), className, className !== null)]),
+    withoutExternalBorder: withoutExternalBorder,
+    refButton: refButton
+  }, otherProps), /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "button",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "bv3rRe",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Button"
+      }]
+    }),
+    emptyClassName: styles.emptyButton,
+    isEmpty: !hasVisual && !hasBody
+  }, hasVisual ? /*#__PURE__*/React.createElement(Visual, {
+    media: visual,
+    width: visualWidth || defaultWidth,
+    resolution: resolution,
+    shouldLoad: shouldLoad,
+    className: classNames([styles.visual, _defineProperty({}, visualClassName, visualClassName !== null)]),
+    imageClassName: classNames([styles.image, _defineProperty({}, imageClassName, imageClassName !== null)]),
+    videoClassName: classNames([styles.video, _defineProperty({}, videoClassName, videoClassName !== null)])
+  }) : null, hasBody && showLabel ? /*#__PURE__*/React.createElement(Text, Object.assign({
+    boxStyle: labelBoxStyle
+  }, label, {
+    className: classNames([styles.text, _defineProperty({}, textClassName, textClassName !== null)])
+  })) : null, children));
+};
+RichButton.propTypes = propTypes;
+RichButton.defaultProps = defaultProps;
 
-export { Button as default };
+export { RichButton, Button as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-button",
-    "version": "0.3.813",
+    "version": "0.3.820",
     "private": false,
     "description": "",
     "keywords": [
@@ -59,7 +59,9 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.813",
+        "@micromag/core": "^0.3.820",
+        "@micromag/element-text": "^0.3.820",
+        "@micromag/element-visual": "^0.3.820",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^6.6.4",
@@ -69,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "24f52ddea5f0ee918f594af86c3c8fd2e1b6f289"
+    "gitHead": "c4ef0ae4055720a367551328e824ad3b111e4c9f"
 }