@enact/limestone 1.3.0

package/Icon/Icon.js

@@ -0,0 +1,503 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.IconDecorator = exports.IconBase = exports.Icon = void 0;
+Object.defineProperty(exports, "icons", {
+  enumerable: true,
+  get: function get() {
+    return _IconList["default"];
+  }
+});
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _Icon = require("@enact/ui/Icon");
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _resolution = require("@enact/ui/resolution");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _IconList = _interopRequireDefault(require("./IconList.js"));
+var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
+var _excluded = ["css", "size"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+ * Provides Limestone styled icon components and behaviors.
+ *
+ * @example
+ * <Icon>plus</Icon>
+ *
+ * @module limestone/Icon
+ * @exports Icon
+ * @exports IconBase
+ * @exports IconDecorator
+ * @exports icons
+ */
+/**
+ * Renders a limestone-styled icon without any behavior.
+ *
+ * @class IconBase
+ * @memberof limestone/Icon
+ * @extends ui/Icon.Icon
+ * @ui
+ * @public
+ */
+var IconBase = exports.IconBase = (0, _kind["default"])({
+  name: 'Icon',
+  propTypes: /** @lends limestone/Icon.IconBase.prototype */{
+    /**
+     * The icon content.
+     *
+     * @see {@link ui/Icon.IconBase.children}
+     * @type {String|Object}
+     * @public
+     */
+    children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * The following classes are supported:
+     *
+     * * `icon` - The root component class
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes["default"].object,
+    /**
+     * Flips the icon
+     *
+     * When `'auto'` and `rtl`, the icon is flipped horizontally.
+     *
+     * @type {('auto'|'both'|'horizontal'|'vertical')}
+     * @public
+     */
+    flip: _propTypes["default"].oneOf(['auto', 'both', 'horizontal', 'vertical']),
+    /**
+     * The current locale as a
+     * {@link https://tools.ietf.org/html/rfc5646|BCP 47 language tag}.
+     *
+     * @type {String}
+     * @private
+    */
+    locale: _propTypes["default"].string,
+    /**
+     * Indicates the content's text direction is right-to-left.
+     *
+     * This is set automatically when using {@link ui/Icon.Icon}.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    rtl: _propTypes["default"].bool,
+    /**
+     * The size of the icon.
+     *
+     * A collection of preset sizes is available in addition to a numeric size option.
+     * A number represents the design-time pixel dimensions of the icon. The final value will
+     * automatically adapt to the screen resolutions, as defined in the `screenTypes` file of
+     * this theme.
+     *
+     * @type {('large'|'medium'|'small'|'tiny'|Number)}
+     * @default 'small'
+     * @public
+     */
+    size: _propTypes["default"].oneOfType([_propTypes["default"].oneOf(['large', 'medium', 'small', 'tiny']), _propTypes["default"].number])
+  },
+  defaultProps: {
+    size: 'small'
+  },
+  styles: {
+    css: _IconModule["default"],
+    publicClassNames: ['icon']
+  },
+  computed: {
+    className: function className(_ref) {
+      var size = _ref.size,
+        styler = _ref.styler;
+      return styler.append(typeof size === 'string' ? size : null);
+    },
+    flip: function flip(_ref2) {
+      var children = _ref2.children,
+        _flip = _ref2.flip,
+        locale = _ref2.locale,
+        rtl = _ref2.rtl;
+      if (_flip === 'auto') {
+        if (locale === 'he-IL' && children === 'help') {
+          return null;
+        }
+        return rtl ? 'horizontal' : null;
+      }
+      return _flip;
+    },
+    style: function style(_ref3) {
+      var size = _ref3.size,
+        _style = _ref3.style;
+      return _objectSpread(_objectSpread({}, _style), {}, {
+        '--icon-size': typeof size === 'number' ? (0, _resolution.scaleToRem)(size) : null
+      });
+    }
+  },
+  render: function render(_ref4) {
+    var css = _ref4.css,
+      size = _ref4.size,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+    delete rest.locale;
+    delete rest.rtl;
+    return _Icon.IconBase.inline(_objectSpread(_objectSpread({}, rest), {}, {
+      size: typeof size === 'string' ? size : void 0,
+      css: css,
+      iconList: _IconList["default"]
+    }));
+  }
+});
+
+// Let's find a way to import this list directly, and bonus feature, render our icons in the docs
+// next to their names.
+/**
+ * An object whose keys can be used as the child of an {@link limestone/Icon.Icon|Icon} component.
+ *
+ * List of Icons:
+ * ```
+ * plus
+ * minus
+ * arrowhookleft
+ * arrowhookright
+ * ellipsis
+ * checkmark
+ * triangleup
+ * triangleright
+ * triangledown
+ * triangleleft
+ * arrowupdown
+ * arrowup
+ * arrowupwhite
+ * arrowuphollow
+ * backspace
+ * space
+ * trianglerightwhite
+ * triangleleftwhite
+ * trianglerighthollow
+ * trianglelefthollow
+ * heart
+ * hearthollow
+ * record
+ * circle
+ * stop
+ * square
+ * play
+ * pause
+ * forward
+ * backward
+ * pauseforward
+ * pausebackward
+ * pausejumpforward
+ * pausejumpbackward
+ * jumpforward
+ * jumpbackward
+ * skip
+ * list
+ * arrowlargedown
+ * arrowlargeup
+ * arrowlargeleft
+ * arrowlargeright
+ * arrowsmallup
+ * arrowsmalldown
+ * arrowsmallleft
+ * arrowsmallright
+ * closex
+ * search
+ * chup
+ * chdown
+ * exitfullscreen
+ * fullscreen
+ * trash
+ * star
+ * starhalf
+ * starhollow
+ * gear
+ * plug
+ * lock
+ * music
+ * view360
+ * info
+ * verticalellipsis
+ * arrowcurveright
+ * picture
+ * home
+ * liverecord
+ * liveplay
+ * trashlock
+ * movecursor
+ * repeatone
+ * repeatall
+ * repeatnone
+ * zoomin
+ * zoomout
+ * download
+ * shuffle
+ * shuffleon
+ * notification
+ * voice
+ * soundmute
+ * stargroup
+ * checker
+ * transponder
+ * selected
+ * bgm
+ * bgmoff
+ * playcircle
+ * pausecircle
+ * lockcircle
+ * unlockcircle
+ * powercircle
+ * wifi1
+ * wifi2
+ * wifi3
+ * wifi4
+ * wifilock1
+ * wifilock2
+ * wifilock3
+ * wifilock4
+ * dashboard1
+ * dashboard2
+ * dashboard3
+ * language
+ * rotate
+ * lyrics
+ * screenpower
+ * miniplayer
+ * nowplaying
+ * playspeed
+ * folder
+ * folderupper
+ * support
+ * soundout
+ * mobile
+ * keyboard
+ * mouse
+ * controller
+ * btspeaker
+ * headset
+ * dns
+ * speaker
+ * speakersurround
+ * speakercenter
+ * speakerbass
+ * router
+ * demosync
+ * browser
+ * sound
+ * wisa
+ * demooptions
+ * youtube
+ * ostsearch
+ * shopping
+ * bookmark
+ * eject
+ * power
+ * timer
+ * network
+ * edit
+ * aspectratio
+ * link
+ * light
+ * pointersize
+ * pointerspeed
+ * soundmode
+ * contrast
+ * picturemode
+ * basketball
+ * soccer
+ * baseball
+ * golf
+ * football
+ * hockey
+ * volleyball
+ * cricket
+ * heartadd
+ * heartlist
+ * refresh
+ * help
+ * share
+ * files
+ * scheduler
+ * recording
+ * guide
+ * channel
+ * oneminplay
+ * oneminrecord
+ * fifteenforward
+ * fifteenbackward
+ * liveplayoff
+ * liveplayon
+ * popupscale
+ * arrowrightskip
+ * closedcaption
+ * subtitle
+ * subtitlekr
+ * subtitlecn
+ * samples
+ * googledrive
+ * googlephotos
+ * dlna
+ * replay
+ * usb
+ * ftp
+ * profile
+ * profilecheck
+ * mediaserver
+ * wallpaper
+ * zoom
+ * spanner
+ * bluetooth
+ * moodmode
+ * changepassword
+ * r2rappcall
+ * musicsrc
+ * keymouse
+ * keymousedis
+ * camera
+ * cameradis
+ * gamepad
+ * gamepaddis
+ * wowcast
+ * exclamation
+ * show
+ * hide
+ * wifi15g
+ * wifi25g
+ * wifi35g
+ * wifi45g
+ * wifilock15g
+ * wifilock25g
+ * wifilock35g
+ * wifilock45g
+ * create
+ * background
+ * pen
+ * eraser
+ * mediaplayer
+ * location
+ * exit
+ * movies
+ * mycontents
+ * accessibility
+ * seemore
+ * trailer
+ * onnow
+ * tvguidefvp
+ * pcnotconnected
+ * fileppt
+ * textinput
+ * pagewidth
+ * index
+ * colorpicker
+ * ear
+ * hand
+ * remotecontrol
+ * channelscheduling
+ * smartfunction
+ * appscontents
+ * deviceconnect
+ * move
+ * voiced
+ * auracast
+ * jumpbackward10
+ * jumpforward10
+ * logout
+ * sketch
+ * ai
+ * alert01
+ * alert02
+ * calibration
+ * mypage
+ * moodmaker
+ * check
+ * calendar
+ * antenna
+ * av
+ * component
+ * pcpicture
+ * hdmigeneric
+ * hdmi01
+ * hdmi02
+ * hdmi03
+ * hdmi04
+ * dvd
+ * hdmisub
+ * usbport
+ * vcr
+ * soundshare
+ * remotepc
+ * mobileguide
+ * airplay
+ * musicbt
+ * streamingspeaker
+ * insteon
+ * satellite
+ * scart
+ * settopbox
+ * screenshare
+ * pc
+ * tips
+ * googlehome
+ * thinq
+ * livetv
+ * accessibility2
+ * homehub
+ * otheriot
+ * sitemap
+ * clickapps
+ * history
+ * moreactions
+ * pwreset
+ * dislike
+ * dislikeline
+ * like
+ * likeline
+ * soundbarline
+ * jumpforward
+ * jumpbackward
+ * ```
+ *
+ * @name iconList
+ * @memberof limestone/Icon
+ * @constant
+ * @type {Object}
+ * @public
+ */
+
+/**
+ * Limestone-specific behaviors to apply to {@link limestone/Icon.IconBase|IconBase}.
+ *
+ * @hoc
+ * @memberof limestone/Icon
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var IconDecorator = exports.IconDecorator = (0, _compose["default"])(_Pure["default"], _Skinnable["default"], (0, _I18nDecorator.I18nContextDecorator)({
+  localeProp: 'locale',
+  rtlProp: 'rtl'
+}));
+
+/**
+ * A Limestone-styled icon.
+ *
+ * @class Icon
+ * @memberof limestone/Icon
+ * @extends limestone/Icon.IconBase
+ * @mixes limestone/Icon.IconDecorator
+ * @ui
+ * @public
+ */
+var Icon = exports.Icon = IconDecorator(IconBase);
+var _default = exports["default"] = Icon;

package/Icon/Icon.module.css

@@ -0,0 +1,121 @@
+.icon {
+  background-repeat: no-repeat;
+  text-align: center;
+  position: relative;
+  font-family: "Limestone Icons";
+  margin: 0.5rem;
+  overflow: hidden;
+  width: var(--icon-size, 1.5rem );
+  height: var(--icon-size, 1.5rem );
+  font-size: var(--icon-size, 1.5rem );
+  line-height: var(--icon-size, 1.5rem );
+  background-position: center 0;
+  background-size: var(--icon-size, undefined 1.5rem ) calc(var(--icon-size,  1.5rem ) * 2);
+}
+.icon.large {
+  --icon-size: 1.75rem;
+}
+.icon.medium {
+  --icon-size: 1.625rem;
+}
+.icon.small {
+  --icon-size: 1.5rem;
+}
+.icon.tiny {
+  --icon-size: 1.25rem;
+}
+.icon.dingbat {
+  font-family: "LG Icons";
+}
+.icon:global(.neutral) {
+  color: inherit;
+}
+:global(.enact-a11y-high-contrast) .icon:global(.neutral):global(.highContrast) {
+  color: inherit;
+}
+.icon:global(.light) {
+  color: inherit;
+}
+.icon:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+  color: inherit;
+}
+:global(.green) .icon:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+  color: inherit;
+}
+:global(.orange) .icon:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+  color: inherit;
+}
+:global(.spotlight-input-key) :global(.neutral) :global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.neutral) :global(.spottable):focus .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.neutral) :global(.spottable):active .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) :global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) :global(.spottable):focus .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) :global(.spottable):active .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.spotlight-input-key) :global(.light) :global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.light) :global(.spottable):focus .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.light) :global(.spottable):active .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+:global(.spotlight-input-key) :global(.game) :global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.game) :global(.spottable):focus .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.game) :global(.spottable):active .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.green) :global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.spotlight-input-key) :global(.green) :global(.game) :global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.green) :global(.game) :global(.spottable):focus .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.green) :global(.game) :global(.spottable):active .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.orange) :global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.spotlight-input-key) :global(.orange) :global(.game) :global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.orange) :global(.game) :global(.spottable):focus .icon {
+  background-position: center 100%;
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.orange) :global(.game) :global(.spottable):active .icon {
+  background-position: center 100%;
+  color: inherit;
+}