@pingux/astro 1.1.1-alpha.4 → 1.1.1-alpha.5

package/lib/cjs/components/Link/Link.js

@@ -57,10 +57,17 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
+  var _usePress = (0, _interactions.usePress)({
+    ref: linkRef
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isDisabled: isDisabled,
     isFocused: isFocusVisible,
-    isHovered: isHovered
+    isHovered: isHovered,
+    isPressed: isPressed
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -68,7 +75,7 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames,
     ref: linkRef,
     role: "link"
-  }, others, (0, _utils.mergeProps)(hoverProps, focusProps, linkProps)));
+  }, others, (0, _utils.mergeProps)(hoverProps, focusProps, pressProps, linkProps)));
 });
 Link.propTypes = {
   /** Whether the link is disabled. */
@@ -84,11 +91,15 @@ Link.propTypes = {
   href: _propTypes["default"].string,
 
   /**  Specifies the window where the linked page is loaded */
-  target: _propTypes["default"].string
+  target: _propTypes["default"].string,
+
+  /** The styling variation of the link. */
+  variant: _propTypes["default"].string
 };
 Link.defaultProps = {
   isDisabled: false,
-  as: 'a'
+  as: 'a',
+  variant: 'app'
 };
 Link.displayName = 'Link';
 var _default = Link;

package/lib/cjs/components/Link/Link.stories.js

@@ -12,12 +12,16 @@ exports.Default = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _ = _interopRequireDefault(require("."));
 
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 
+var _links = _interopRequireDefault(require("../../styles/variants/links"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -43,6 +47,12 @@ var _default = {
         type: 'none'
       },
       defaultValue: '_blank'
+    },
+    variant: {
+      control: {
+        type: 'select',
+        options: (0, _keys["default"])(_links["default"])
+      }
     }
   }
 };

package/lib/cjs/styles/theme.js

@@ -75,6 +75,7 @@ var _default = {
   images: _variants.images,
   buttons: _variants.buttons,
   textColors: _text.textColors,
+  links: _variants.links,
   variants: _variants.variants
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/index.js

@@ -17,7 +17,8 @@ _Object$defineProperty(exports, "__esModule", {
 var _exportNames = {
   variants: true,
   buttons: true,
-  images: true
+  images: true,
+  links: true
 };
 
 _Object$defineProperty(exports, "variants", {
@@ -41,12 +42,21 @@ _Object$defineProperty(exports, "images", {
   }
 });
 
+_Object$defineProperty(exports, "links", {
+  enumerable: true,
+  get: function get() {
+    return _links["default"];
+  }
+});
+
 var _variants = _interopRequireDefault(require("./variants"));
 
 var _buttons = _interopRequireDefault(require("./buttons"));
 
 var _images = _interopRequireDefault(require("./images"));
 
+var _links = _interopRequireDefault(require("./links"));
+
 var _text = require("./text");
 
 _forEachInstanceProperty(_context = _Object$keys(_text)).call(_context, function (key) {

package/lib/cjs/styles/variants/links.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var app = {
+  color: 'active',
+  fontFamily: 'standard',
+  fontSize: 'md',
+  textDecoration: 'none',
+  outline: 'none',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': {
+    textDecoration: 'underline'
+  },
+  '&.is-pressed': {
+    color: 'accent.40',
+    textDecoration: 'underline'
+  },
+  '&.is-disabled': {
+    pointerEvents: 'none'
+  }
+};
+
+var web = _objectSpread(_objectSpread({}, app), {}, {
+  textDecoration: 'underline',
+  '&:visited': {
+    color: 'decorative.7'
+  }
+});
+
+var _default = {
+  app: app,
+  web: web
+};
+exports["default"] = _default;

package/lib/cjs/styles/variants/variants.js

@@ -40,7 +40,7 @@ var _images = _interopRequireDefault(require("./images"));
 
 var _imageUpload = _interopRequireDefault(require("./imageUpload"));
 
-var _link = _interopRequireDefault(require("./link"));
+var _links = _interopRequireDefault(require("./links"));
 
 var _listBox = _interopRequireDefault(require("./listBox"));
 
@@ -83,7 +83,7 @@ var _default = _objectSpread(_objectSpread({
   images: _images["default"],
   imageUpload: _imageUpload["default"],
   loader: _loader["default"],
-  link: _link["default"],
+  links: _links["default"],
   listBox: _listBox["default"],
   menu: _menu["default"],
   menuItem: _menuItem["default"],

package/lib/components/Link/Link.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Link as ThemeUILink } from 'theme-ui';
 import { useLink } from '@react-aria/link';
 import { useFocusRing } from '@react-aria/focus';
-import { useHover } from '@react-aria/interactions';
+import { useHover, usePress } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -33,10 +33,17 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
+  var _usePress = usePress({
+    ref: linkRef
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
   var _useStatusClasses = useStatusClasses(className, {
     isDisabled: isDisabled,
     isFocused: isFocusVisible,
-    isHovered: isHovered
+    isHovered: isHovered,
+    isPressed: isPressed
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -44,7 +51,7 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames,
     ref: linkRef,
     role: "link"
-  }, others, mergeProps(hoverProps, focusProps, linkProps)));
+  }, others, mergeProps(hoverProps, focusProps, pressProps, linkProps)));
 });
 Link.propTypes = {
   /** Whether the link is disabled. */
@@ -60,11 +67,15 @@ Link.propTypes = {
   href: PropTypes.string,
 
   /**  Specifies the window where the linked page is loaded */
-  target: PropTypes.string
+  target: PropTypes.string,
+
+  /** The styling variation of the link. */
+  variant: PropTypes.string
 };
 Link.defaultProps = {
   isDisabled: false,
-  as: 'a'
+  as: 'a',
+  variant: 'app'
 };
 Link.displayName = 'Link';
 export default Link;

package/lib/components/Link/Link.stories.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
 import Link from '.';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
+import variants from '../../styles/variants/links';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Link',
@@ -26,6 +28,12 @@ export default {
         type: 'none'
       },
       defaultValue: '_blank'
+    },
+    variant: {
+      control: {
+        type: 'select',
+        options: _Object$keys(variants)
+      }
     }
   }
 };

package/lib/styles/theme.js

@@ -17,7 +17,7 @@ import colors, { accent, line, shadow, focus } from './colors';
 import { fontSizes, fontWeights, textColors } from './text';
 import breakpoints from './breakpoints';
 import forms from './forms';
-import { variants, buttons, text, images } from './variants';
+import { variants, buttons, text, images, links } from './variants';
 export default {
   name: 'Astro',
   space: spacing,
@@ -47,5 +47,6 @@ export default {
   images: images,
   buttons: buttons,
   textColors: textColors,
+  links: links,
   variants: variants
 };

package/lib/styles/variants/index.js

@@ -1,4 +1,5 @@
 export { default as variants } from './variants';
 export { default as buttons } from './buttons';
 export { default as images } from './images';
+export { default as links } from './links';
 export * from './text';

package/lib/styles/variants/links.js

@@ -0,0 +1,46 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var app = {
+  color: 'active',
+  fontFamily: 'standard',
+  fontSize: 'md',
+  textDecoration: 'none',
+  outline: 'none',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': {
+    textDecoration: 'underline'
+  },
+  '&.is-pressed': {
+    color: 'accent.40',
+    textDecoration: 'underline'
+  },
+  '&.is-disabled': {
+    pointerEvents: 'none'
+  }
+};
+
+var web = _objectSpread(_objectSpread({}, app), {}, {
+  textDecoration: 'underline',
+  '&:visited': {
+    color: 'decorative.7'
+  }
+});
+
+export default {
+  app: app,
+  web: web
+};

package/lib/styles/variants/variants.js

@@ -17,7 +17,7 @@ import boxes from './boxes';
 import codeView from './codeView';
 import images from './images';
 import imageUpload from './imageUpload';
-import link from './link';
+import links from './links';
 import listBox from './listBox';
 import loader from './loader';
 import modal from './modal';
@@ -40,7 +40,7 @@ export default _objectSpread(_objectSpread({
   images: images,
   imageUpload: imageUpload,
   loader: loader,
-  link: link,
+  links: links,
   listBox: listBox,
   menu: menu,
   menuItem: menuItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.1.1-alpha.4",
+  "version": "1.1.1-alpha.5",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",

package/lib/cjs/styles/variants/link.js

@@ -1,27 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports["default"] = void 0;
-var link = {
-  color: 'white',
-  fontFamily: 'standard',
-  fontSize: 'md',
-  textDecoration: 'none',
-  outline: 'none',
-  '&.is-hovered': {
-    textDecoration: 'underline'
-  },
-  '&.is-focused': {
-    textDecoration: 'underline'
-  },
-  '&.is-disabled': {
-    pointerEvents: 'none'
-  }
-};
-var _default = link;
-exports["default"] = _default;

package/lib/styles/variants/link.js

@@ -1,17 +0,0 @@
-var link = {
-  color: 'white',
-  fontFamily: 'standard',
-  fontSize: 'md',
-  textDecoration: 'none',
-  outline: 'none',
-  '&.is-hovered': {
-    textDecoration: 'underline'
-  },
-  '&.is-focused': {
-    textDecoration: 'underline'
-  },
-  '&.is-disabled': {
-    pointerEvents: 'none'
-  }
-};
-export default link;