Socket
Socket
Sign inDemoInstall

@khanacademy/wonder-blocks-link

Package Overview
Dependencies
Maintainers
1
Versions
287
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@khanacademy/wonder-blocks-link - npm Package Compare versions

Comparing version 2.0.4 to 3.0.0

41

components/link-core.js

@@ -38,2 +38,3 @@ // @flow

light,
visitable,
pressed,

@@ -46,3 +47,3 @@ style,

const linkStyles = _generateStyles(kind, light);
const linkStyles = _generateStyles(kind, light, visitable);

@@ -85,4 +86,4 @@ const defaultStyles = [

const _generateStyles = (kind, light) => {
const buttonType = kind + light.toString();
const _generateStyles = (kind, light, visitable) => {
const buttonType = kind + light.toString() + visitable.toString();
if (styles[buttonType]) {

@@ -96,2 +97,6 @@ return styles[buttonType];

if (visitable && (kind !== "primary" || (kind === "primary" && light))) {
throw new Error("Only primary (not light) link is visitable");
}
const {blue, purple, white, offBlack, offBlack32} = Color;

@@ -102,8 +107,22 @@ const linkPurple = mix(fade(offBlack, 0.08), purple);

kind === "primary" ? (light ? white : blue) : offBlack;
const defaultVisited = visitable
? {
":visited": {
color: linkPurple,
},
}
: {};
const activeVisited = visitable
? {
":visited": {
color: mix(offBlack32, linkPurple),
},
}
: {};
const newStyles = {
default: {
color: defaultTextColor,
":visited": {
color: light ? defaultTextColor : linkPurple,
},
...defaultVisited,
},

@@ -113,5 +132,3 @@ focus: {

color: light ? white : blue,
":visited": {
color: light ? white : linkPurple,
},
...defaultVisited,
},

@@ -121,7 +138,3 @@ active: {

textDecoration: "underline currentcolor solid",
":visited": {
color: light
? mix(fade(blue, 0.32), white)
: mix(offBlack32, linkPurple),
},
...activeVisited,
},

@@ -128,0 +141,0 @@ };

7

components/link.js

@@ -37,2 +37,8 @@ // @flow

/**
* Whether the link should change color once it's visited.
* secondary or primary (light) links are not allowed to be visitable.
*/
visitable: boolean,
/**
* Test ID used for e2e testing.

@@ -109,2 +115,3 @@ */

light: false,
visitable: false,
};

@@ -111,0 +118,0 @@

2

components/link.md

@@ -13,3 +13,3 @@ Link example:

</Link> is used here with a lighter text.</span> We also have a
<Link href="#">Visited Link</Link> friend.
<Link href="#" visitable={true}>Visitable Primary Link</Link> friend.
</p>

@@ -16,0 +16,0 @@ <p style={{backgroundColor: Color.darkBlue, color: Color.white64, padding: 10}}>

55

custom-snapshot.test.js

@@ -27,27 +27,32 @@ // @flow

for (const light of kind === "primary" ? [true, false] : [false]) {
for (const state of ["focused", "hovered", "pressed"]) {
const stateProps = {
focused: state === "focused",
hovered: state === "hovered",
pressed: state === "pressed",
};
test(`kind:${kind} href:${href} light:${String(
light,
)} ${state}`, () => {
const tree = renderer
.create(
<LinkCore
href="#"
kind={kind}
caret={false}
light={light}
{...stateProps}
{...defaultHandlers}
>
Click me
</LinkCore>,
)
.toJSON();
expect(tree).toMatchSnapshot();
});
for (const visitable of kind === "primary" && !light
? [true, false]
: [false]) {
for (const state of ["focused", "hovered", "pressed"]) {
const stateProps = {
focused: state === "focused",
hovered: state === "hovered",
pressed: state === "pressed",
};
test(`kind:${kind} href:${href} light:${String(
light,
)} visitable:${String(visitable)} ${state}`, () => {
const tree = renderer
.create(
<LinkCore
href="#"
kind={kind}
caret={false}
light={light}
visitable={visitable}
{...stateProps}
{...defaultHandlers}
>
Click me
</LinkCore>,
)
.toJSON();
expect(tree).toMatchSnapshot();
});
}
}

@@ -54,0 +59,0 @@ }

316

dist/es/index.js

@@ -8,107 +8,191 @@ import React__default, { Component, createElement } from 'react';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
return obj;
}
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_defineProperty(target, key, source[key]);
});
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
const StyledAnchor = addStyle("a");
const StyledLink = addStyle(Link);
class LinkCore extends React__default.Component {
render() {
const _this$props = this.props,
caret = _this$props.caret,
children = _this$props.children,
skipClientNav = _this$props.skipClientNav,
focused = _this$props.focused,
hovered = _this$props.hovered,
href = _this$props.href,
kind = _this$props.kind,
light = _this$props.light,
visitable = _this$props.visitable,
pressed = _this$props.pressed,
style = _this$props.style,
testId = _this$props.testId,
handlers = _objectWithoutProperties(_this$props, ["caret", "children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId"]);
render() {
const _props = this.props,
{
caret, // eslint-disable-line no-unused-vars
children,
skipClientNav,
focused,
hovered,
href,
kind,
light,
pressed,
style,
testId
} = _props,
handlers = _objectWithoutProperties(_props, ["caret", "children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "pressed", "style", "testId"]);
const { router } = this.context;
const router = this.context.router;
const linkStyles = _generateStyles(kind, light);
const linkStyles = _generateStyles(kind, light, visitable);
const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && linkStyles.default, pressed ? linkStyles.active : (hovered || focused) && linkStyles.focus];
const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && linkStyles.default, pressed ? linkStyles.active : (hovered || focused) && linkStyles.focus];
const commonProps = _extends({
"data-test-id": testId,
style: [defaultStyles, style]
}, handlers);
const commonProps = _objectSpread({
"data-test-id": testId,
style: [defaultStyles, style]
}, handlers);
return router && !skipClientNav ? React__default.createElement(
StyledLink,
_extends({}, commonProps, { to: href }),
children
) : React__default.createElement(
StyledAnchor,
_extends({}, commonProps, { href: href }),
children
);
}
return router && !skipClientNav ? React__default.createElement(StyledLink, _extends({}, commonProps, {
to: href
}), children) : React__default.createElement(StyledAnchor, _extends({}, commonProps, {
href: href
}), children);
}
}
LinkCore.contextTypes = { router: PropTypes.any };
_defineProperty(LinkCore, "contextTypes", {
router: PropTypes.any
});
const styles = {};
const sharedStyles = StyleSheet.create({
shared: {
cursor: "pointer",
textDecoration: "none",
outline: "none"
}
shared: {
cursor: "pointer",
textDecoration: "none",
outline: "none"
}
});
const _generateStyles = (kind, light) => {
const buttonType = kind + light.toString();
if (styles[buttonType]) {
return styles[buttonType];
}
const _generateStyles = (kind, light, visitable) => {
const buttonType = kind + light.toString() + visitable.toString();
if (kind === "secondary" && light) {
throw new Error("Secondary Light links are not supported");
}
if (styles[buttonType]) {
return styles[buttonType];
}
const { blue, purple, white, offBlack, offBlack32 } = Color;
const linkPurple = mix(fade(offBlack, 0.08), purple);
if (kind === "secondary" && light) {
throw new Error("Secondary Light links are not supported");
}
const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
const newStyles = {
default: {
color: defaultTextColor,
":visited": {
color: light ? defaultTextColor : linkPurple
}
},
focus: {
textDecoration: "underline currentcolor solid",
color: light ? white : blue,
":visited": {
color: light ? white : linkPurple
}
},
active: {
color: light ? mix(fade(blue, 0.32), white) : mix(offBlack32, blue),
textDecoration: "underline currentcolor solid",
":visited": {
color: light ? mix(fade(blue, 0.32), white) : mix(offBlack32, linkPurple)
}
}
};
if (visitable && (kind !== "primary" || kind === "primary" && light)) {
throw new Error("Only primary (not light) link is visitable");
}
styles[buttonType] = StyleSheet.create(newStyles);
return styles[buttonType];
const blue = Color.blue,
purple = Color.purple,
white = Color.white,
offBlack = Color.offBlack,
offBlack32 = Color.offBlack32;
const linkPurple = mix(fade(offBlack, 0.08), purple);
const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
const defaultVisited = visitable ? {
":visited": {
color: linkPurple
}
} : {};
const activeVisited = visitable ? {
":visited": {
color: mix(offBlack32, linkPurple)
}
} : {};
const newStyles = {
default: _objectSpread({
color: defaultTextColor
}, defaultVisited),
focus: _objectSpread({
textDecoration: "underline currentcolor solid",
color: light ? white : blue
}, defaultVisited),
active: _objectSpread({
color: light ? mix(fade(blue, 0.32), white) : mix(offBlack32, blue),
textDecoration: "underline currentcolor solid"
}, activeVisited)
};
styles[buttonType] = StyleSheet.create(newStyles);
return styles[buttonType];
};
var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
/**

@@ -132,43 +216,37 @@ * Reusable link component.

class Link$1 extends Component {
render() {
const _this$props = this.props,
onClick = _this$props.onClick,
href = _this$props.href,
skipClientNav = _this$props.skipClientNav,
children = _this$props.children,
sharedProps = _objectWithoutProperties(_this$props, ["onClick", "href", "skipClientNav", "children"]);
render() {
const _props = this.props,
{
onClick,
href,
skipClientNav,
children
} = _props,
sharedProps = _objectWithoutProperties$1(_props, ["onClick", "href", "skipClientNav", "children"]);
const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
return createElement(ClickableBehavior, {
disabled: false,
onClick: onClick,
href: href,
role: "link"
}, (state, handlers) => {
return createElement(LinkCore, _extends({}, sharedProps, state, handlers, {
skipClientNav: skipClientNav,
href: href
}), children);
});
}
const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
return createElement(
ClickableBehavior,
{
disabled: false,
onClick: onClick,
href: href,
role: "link"
},
(state, handlers) => {
return createElement(
LinkCore,
_extends$1({}, sharedProps, state, handlers, {
skipClientNav: skipClientNav,
href: href
}),
children
);
}
);
}
}
Link$1.defaultProps = {
caret: false,
kind: "primary",
light: false
};
Link$1.contextTypes = { router: PropTypes.any };
_defineProperty(Link$1, "defaultProps", {
caret: false,
kind: "primary",
light: false,
visitable: false
});
_defineProperty(Link$1, "contextTypes", {
router: PropTypes.any
});
export default Link$1;

377

dist/index.js

@@ -85,3 +85,3 @@ module.exports =

/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 8);
/******/ return __webpack_require__(__webpack_require__.s = 6);
/******/ })

@@ -93,3 +93,3 @@ /************************************************************************/

module.exports = require("@khanacademy/wonder-blocks-core");
module.exports = require("@khanacademy/wonder-blocks-color");

@@ -100,3 +100,3 @@ /***/ }),

module.exports = require("prop-types");
module.exports = require("react");

@@ -107,3 +107,3 @@ /***/ }),

module.exports = require("react");
module.exports = require("@khanacademy/wonder-blocks-core");

@@ -114,3 +114,3 @@ /***/ }),

module.exports = require("@khanacademy/wonder-blocks-color");
module.exports = require("prop-types");

@@ -121,3 +121,3 @@ /***/ }),

module.exports = require("react-router-dom");
module.exports = require("aphrodite");

@@ -128,204 +128,163 @@ /***/ }),

module.exports = require("aphrodite");
module.exports = require("react-router-dom");
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(1);
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
Object.defineProperty(exports, "__esModule", {
value: true
});
// EXTERNAL MODULE: external "prop-types"
var external_prop_types_ = __webpack_require__(3);
var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
var wonder_blocks_core_ = __webpack_require__(2);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
// EXTERNAL MODULE: external "aphrodite"
var external_aphrodite_ = __webpack_require__(4);
var _react = __webpack_require__(2);
// EXTERNAL MODULE: external "react-router-dom"
var external_react_router_dom_ = __webpack_require__(5);
var _react2 = _interopRequireDefault(_react);
// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
var wonder_blocks_color_ = __webpack_require__(0);
var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
var _aphrodite = __webpack_require__(5);
// CONCATENATED MODULE: ./packages/wonder-blocks-link/components/link-core.js
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var _reactRouterDom = __webpack_require__(4);
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
var _propTypes = __webpack_require__(1);
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
var _propTypes2 = _interopRequireDefault(_propTypes);
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var _wonderBlocksCore = __webpack_require__(0);
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _wonderBlocksColor = __webpack_require__(3);
var _wonderBlocksColor2 = _interopRequireDefault(_wonderBlocksColor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
const StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a");
const StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]);
class link_core_LinkCore extends external_react_default.a.Component {
render() {
const _this$props = this.props,
caret = _this$props.caret,
children = _this$props.children,
skipClientNav = _this$props.skipClientNav,
focused = _this$props.focused,
hovered = _this$props.hovered,
href = _this$props.href,
kind = _this$props.kind,
light = _this$props.light,
visitable = _this$props.visitable,
pressed = _this$props.pressed,
style = _this$props.style,
testId = _this$props.testId,
handlers = _objectWithoutProperties(_this$props, ["caret", "children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId"]);
var StyledAnchor = (0, _wonderBlocksCore.addStyle)("a");
var StyledLink = (0, _wonderBlocksCore.addStyle)(_reactRouterDom.Link);
const router = this.context.router;
var LinkCore = function (_React$Component) {
_inherits(LinkCore, _React$Component);
const linkStyles = _generateStyles(kind, light, visitable);
function LinkCore() {
_classCallCheck(this, LinkCore);
const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && linkStyles.default, pressed ? linkStyles.active : (hovered || focused) && linkStyles.focus];
return _possibleConstructorReturn(this, (LinkCore.__proto__ || Object.getPrototypeOf(LinkCore)).apply(this, arguments));
}
const commonProps = _objectSpread({
"data-test-id": testId,
style: [defaultStyles, style]
}, handlers);
_createClass(LinkCore, [{
key: "render",
value: function render() {
var _props = this.props,
caret = _props.caret,
children = _props.children,
skipClientNav = _props.skipClientNav,
focused = _props.focused,
hovered = _props.hovered,
href = _props.href,
kind = _props.kind,
light = _props.light,
pressed = _props.pressed,
style = _props.style,
testId = _props.testId,
handlers = _objectWithoutProperties(_props, ["caret", "children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "pressed", "style", "testId"]);
return router && !skipClientNav ? external_react_default.a.createElement(StyledLink, _extends({}, commonProps, {
to: href
}), children) : external_react_default.a.createElement(StyledAnchor, _extends({}, commonProps, {
href: href
}), children);
}
var router = this.context.router;
}
_defineProperty(link_core_LinkCore, "contextTypes", {
router: external_prop_types_default.a.any
});
var linkStyles = _generateStyles(kind, light);
const styles = {};
const sharedStyles = external_aphrodite_["StyleSheet"].create({
shared: {
cursor: "pointer",
textDecoration: "none",
outline: "none"
}
});
var defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && linkStyles.default, pressed ? linkStyles.active : (hovered || focused) && linkStyles.focus];
const _generateStyles = (kind, light, visitable) => {
const buttonType = kind + light.toString() + visitable.toString();
var commonProps = _extends({
"data-test-id": testId,
style: [defaultStyles, style]
}, handlers);
if (styles[buttonType]) {
return styles[buttonType];
}
return router && !skipClientNav ? _react2.default.createElement(
StyledLink,
_extends({}, commonProps, { to: href }),
children
) : _react2.default.createElement(
StyledAnchor,
_extends({}, commonProps, { href: href }),
children
);
}
}]);
if (kind === "secondary" && light) {
throw new Error("Secondary Light links are not supported");
}
return LinkCore;
}(_react2.default.Component);
if (visitable && (kind !== "primary" || kind === "primary" && light)) {
throw new Error("Only primary (not light) link is visitable");
}
LinkCore.contextTypes = { router: _propTypes2.default.any };
exports.default = LinkCore;
var styles = {};
var sharedStyles = _aphrodite.StyleSheet.create({
shared: {
cursor: "pointer",
textDecoration: "none",
outline: "none"
const blue = wonder_blocks_color_default.a.blue,
purple = wonder_blocks_color_default.a.purple,
white = wonder_blocks_color_default.a.white,
offBlack = wonder_blocks_color_default.a.offBlack,
offBlack32 = wonder_blocks_color_default.a.offBlack32;
const linkPurple = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(offBlack, 0.08), purple);
const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
const defaultVisited = visitable ? {
":visited": {
color: linkPurple
}
});
var _generateStyles = function _generateStyles(kind, light) {
var buttonType = kind + light.toString();
if (styles[buttonType]) {
return styles[buttonType];
} : {};
const activeVisited = visitable ? {
":visited": {
color: Object(wonder_blocks_color_["mix"])(offBlack32, linkPurple)
}
if (kind === "secondary" && light) {
throw new Error("Secondary Light links are not supported");
}
var blue = _wonderBlocksColor2.default.blue,
purple = _wonderBlocksColor2.default.purple,
white = _wonderBlocksColor2.default.white,
offBlack = _wonderBlocksColor2.default.offBlack,
offBlack32 = _wonderBlocksColor2.default.offBlack32;
var linkPurple = (0, _wonderBlocksColor.mix)((0, _wonderBlocksColor.fade)(offBlack, 0.08), purple);
var defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
var newStyles = {
default: {
color: defaultTextColor,
":visited": {
color: light ? defaultTextColor : linkPurple
}
},
focus: {
textDecoration: "underline currentcolor solid",
color: light ? white : blue,
":visited": {
color: light ? white : linkPurple
}
},
active: {
color: light ? (0, _wonderBlocksColor.mix)((0, _wonderBlocksColor.fade)(blue, 0.32), white) : (0, _wonderBlocksColor.mix)(offBlack32, blue),
textDecoration: "underline currentcolor solid",
":visited": {
color: light ? (0, _wonderBlocksColor.mix)((0, _wonderBlocksColor.fade)(blue, 0.32), white) : (0, _wonderBlocksColor.mix)(offBlack32, linkPurple)
}
}
};
styles[buttonType] = _aphrodite.StyleSheet.create(newStyles);
return styles[buttonType];
} : {};
const newStyles = {
default: _objectSpread({
color: defaultTextColor
}, defaultVisited),
focus: _objectSpread({
textDecoration: "underline currentcolor solid",
color: light ? white : blue
}, defaultVisited),
active: _objectSpread({
color: light ? Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(blue, 0.32), white) : Object(wonder_blocks_color_["mix"])(offBlack32, blue),
textDecoration: "underline currentcolor solid"
}, activeVisited)
};
styles[buttonType] = external_aphrodite_["StyleSheet"].create(newStyles);
return styles[buttonType];
};
// CONCATENATED MODULE: ./packages/wonder-blocks-link/components/link.js
function link_extends() { link_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return link_extends.apply(this, arguments); }
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
function link_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = link_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
"use strict";
function link_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function link_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(2);
var React = _interopRequireWildcard(_react);
var _propTypes = __webpack_require__(1);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _wonderBlocksCore = __webpack_require__(0);
var _linkCore = __webpack_require__(6);
var _linkCore2 = _interopRequireDefault(_linkCore);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**

@@ -348,77 +307,43 @@ * Reusable link component.

*/
var Link = function (_React$Component) {
_inherits(Link, _React$Component);
class link_Link extends external_react_["Component"] {
render() {
const _this$props = this.props,
onClick = _this$props.onClick,
href = _this$props.href,
skipClientNav = _this$props.skipClientNav,
children = _this$props.children,
sharedProps = link_objectWithoutProperties(_this$props, ["onClick", "href", "skipClientNav", "children"]);
function Link() {
_classCallCheck(this, Link);
const ClickableBehavior = Object(wonder_blocks_core_["getClickableBehavior"])(href, skipClientNav, this.context.router);
return external_react_["createElement"](ClickableBehavior, {
disabled: false,
onClick: onClick,
href: href,
role: "link"
}, (state, handlers) => {
return external_react_["createElement"](link_core_LinkCore, link_extends({}, sharedProps, state, handlers, {
skipClientNav: skipClientNav,
href: href
}), children);
});
}
return _possibleConstructorReturn(this, (Link.__proto__ || Object.getPrototypeOf(Link)).apply(this, arguments));
}
}
_createClass(Link, [{
key: "render",
value: function render() {
var _props = this.props,
onClick = _props.onClick,
href = _props.href,
skipClientNav = _props.skipClientNav,
children = _props.children,
sharedProps = _objectWithoutProperties(_props, ["onClick", "href", "skipClientNav", "children"]);
link_defineProperty(link_Link, "defaultProps", {
caret: false,
kind: "primary",
light: false,
visitable: false
});
var ClickableBehavior = (0, _wonderBlocksCore.getClickableBehavior)(href, skipClientNav, this.context.router);
return React.createElement(
ClickableBehavior,
{
disabled: false,
onClick: onClick,
href: href,
role: "link"
},
function (state, handlers) {
return React.createElement(
_linkCore2.default,
_extends({}, sharedProps, state, handlers, {
skipClientNav: skipClientNav,
href: href
}),
children
);
}
);
}
}]);
return Link;
}(React.Component);
Link.defaultProps = {
caret: false,
kind: "primary",
light: false
};
Link.contextTypes = { router: _propTypes2.default.any };
exports.default = Link;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
link_defineProperty(link_Link, "contextTypes", {
router: external_prop_types_default.a.any
});
exports.default = undefined;
// CONCATENATED MODULE: ./packages/wonder-blocks-link/index.js
/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "default", function() { return link_Link; });
var _link = __webpack_require__(7);
var _link2 = _interopRequireDefault(_link);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _link2.default;
/***/ })
/******/ ]);

5

generated-snapshot.test.js

@@ -33,3 +33,6 @@ // This file is auto-generated by gen-snapshot-tests.js

We also have a
<Link href="#">Visited Link</Link> friend.
<Link href="#" visitable={true}>
Visitable Primary Link
</Link>{" "}
friend.
</p>

@@ -36,0 +39,0 @@ <p

6

package.json
{
"name": "@khanacademy/wonder-blocks-link",
"version": "2.0.4",
"version": "3.0.0",
"design": "v1",

@@ -18,4 +18,4 @@ "publishConfig": {

"dependencies": {
"@khanacademy/wonder-blocks-color": "^1.0.9",
"@khanacademy/wonder-blocks-core": "^1.2.2"
"@khanacademy/wonder-blocks-color": "^1.0.10",
"@khanacademy/wonder-blocks-core": "^1.2.3"
},

@@ -22,0 +22,0 @@ "peerDependencies": {

__snapshots__/custom-snapshot.test.js.snap

Sorry, the diff of this file is not supported yet

__snapshots__/generated-snapshot.test.js.snap

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc