@pingux/astro 1.1.1-alpha.2 → 1.2.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/Link/Link.js +15 -4
- package/lib/cjs/components/Link/Link.stories.js +10 -0
- package/lib/cjs/styles/theme.js +1 -0
- package/lib/cjs/styles/variants/index.js +11 -1
- package/lib/cjs/styles/variants/links.js +67 -0
- package/lib/cjs/styles/variants/variants.js +2 -2
- package/lib/cjs/utils/devUtils/constants/animals.js +11 -0
- package/lib/cjs/utils/devUtils/constants/firstNames.js +11 -0
- package/lib/cjs/utils/devUtils/createMockData.js +96 -0
- package/lib/components/Link/Link.js +16 -5
- package/lib/components/Link/Link.stories.js +8 -0
- package/lib/styles/theme.js +2 -1
- package/lib/styles/variants/index.js +1 -0
- package/lib/styles/variants/links.js +46 -0
- package/lib/styles/variants/variants.js +2 -2
- package/lib/utils/devUtils/constants/animals.js +1 -0
- package/lib/utils/devUtils/constants/firstNames.js +1 -0
- package/lib/utils/devUtils/createMockData.js +68 -0
- package/package.json +1 -1
- package/lib/cjs/styles/variants/link.js +0 -27
- package/lib/styles/variants/link.js +0 -17
@@ -57,10 +57,17 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
57
57
|
hoverProps = _useHover.hoverProps,
|
58
58
|
isHovered = _useHover.isHovered;
|
59
59
|
|
60
|
+
var _usePress = (0, _interactions.usePress)({
|
61
|
+
ref: linkRef
|
62
|
+
}),
|
63
|
+
pressProps = _usePress.pressProps,
|
64
|
+
isPressed = _usePress.isPressed;
|
65
|
+
|
60
66
|
var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
|
61
67
|
isDisabled: isDisabled,
|
62
68
|
isFocused: isFocusVisible,
|
63
|
-
isHovered: isHovered
|
69
|
+
isHovered: isHovered,
|
70
|
+
isPressed: isPressed
|
64
71
|
}),
|
65
72
|
classNames = _useStatusClasses.classNames;
|
66
73
|
|
@@ -68,7 +75,7 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
68
75
|
className: classNames,
|
69
76
|
ref: linkRef,
|
70
77
|
role: "link"
|
71
|
-
}, others, (0, _utils.mergeProps)(hoverProps, focusProps, linkProps)));
|
78
|
+
}, others, (0, _utils.mergeProps)(hoverProps, focusProps, pressProps, linkProps)));
|
72
79
|
});
|
73
80
|
Link.propTypes = {
|
74
81
|
/** Whether the link is disabled. */
|
@@ -84,11 +91,15 @@ Link.propTypes = {
|
|
84
91
|
href: _propTypes["default"].string,
|
85
92
|
|
86
93
|
/** Specifies the window where the linked page is loaded */
|
87
|
-
target: _propTypes["default"].string
|
94
|
+
target: _propTypes["default"].string,
|
95
|
+
|
96
|
+
/** The styling variation of the link. */
|
97
|
+
variant: _propTypes["default"].string
|
88
98
|
};
|
89
99
|
Link.defaultProps = {
|
90
100
|
isDisabled: false,
|
91
|
-
as: 'a'
|
101
|
+
as: 'a',
|
102
|
+
variant: 'app'
|
92
103
|
};
|
93
104
|
Link.displayName = 'Link';
|
94
105
|
var _default = Link;
|
@@ -12,12 +12,16 @@ exports.Default = exports["default"] = void 0;
|
|
12
12
|
|
13
13
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
14
14
|
|
15
|
+
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
|
16
|
+
|
15
17
|
var _react = _interopRequireDefault(require("react"));
|
16
18
|
|
17
19
|
var _ = _interopRequireDefault(require("."));
|
18
20
|
|
19
21
|
var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
|
20
22
|
|
23
|
+
var _links = _interopRequireDefault(require("../../styles/variants/links"));
|
24
|
+
|
21
25
|
var _react2 = require("@emotion/react");
|
22
26
|
|
23
27
|
var _default = {
|
@@ -43,6 +47,12 @@ var _default = {
|
|
43
47
|
type: 'none'
|
44
48
|
},
|
45
49
|
defaultValue: '_blank'
|
50
|
+
},
|
51
|
+
variant: {
|
52
|
+
control: {
|
53
|
+
type: 'select',
|
54
|
+
options: (0, _keys["default"])(_links["default"])
|
55
|
+
}
|
46
56
|
}
|
47
57
|
}
|
48
58
|
};
|
package/lib/cjs/styles/theme.js
CHANGED
@@ -17,7 +17,8 @@ _Object$defineProperty(exports, "__esModule", {
|
|
17
17
|
var _exportNames = {
|
18
18
|
variants: true,
|
19
19
|
buttons: true,
|
20
|
-
images: true
|
20
|
+
images: true,
|
21
|
+
links: true
|
21
22
|
};
|
22
23
|
|
23
24
|
_Object$defineProperty(exports, "variants", {
|
@@ -41,12 +42,21 @@ _Object$defineProperty(exports, "images", {
|
|
41
42
|
}
|
42
43
|
});
|
43
44
|
|
45
|
+
_Object$defineProperty(exports, "links", {
|
46
|
+
enumerable: true,
|
47
|
+
get: function get() {
|
48
|
+
return _links["default"];
|
49
|
+
}
|
50
|
+
});
|
51
|
+
|
44
52
|
var _variants = _interopRequireDefault(require("./variants"));
|
45
53
|
|
46
54
|
var _buttons = _interopRequireDefault(require("./buttons"));
|
47
55
|
|
48
56
|
var _images = _interopRequireDefault(require("./images"));
|
49
57
|
|
58
|
+
var _links = _interopRequireDefault(require("./links"));
|
59
|
+
|
50
60
|
var _text = require("./text");
|
51
61
|
|
52
62
|
_forEachInstanceProperty(_context = _Object$keys(_text)).call(_context, function (key) {
|
@@ -0,0 +1,67 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
6
|
+
|
7
|
+
_Object$defineProperty2(exports, "__esModule", {
|
8
|
+
value: true
|
9
|
+
});
|
10
|
+
|
11
|
+
exports["default"] = void 0;
|
12
|
+
|
13
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
|
14
|
+
|
15
|
+
var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
|
16
|
+
|
17
|
+
var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
|
18
|
+
|
19
|
+
var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
|
20
|
+
|
21
|
+
var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
|
22
|
+
|
23
|
+
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
|
24
|
+
|
25
|
+
var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
|
26
|
+
|
27
|
+
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
|
28
|
+
|
29
|
+
var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
30
|
+
|
31
|
+
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; }
|
32
|
+
|
33
|
+
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; }
|
34
|
+
|
35
|
+
var app = {
|
36
|
+
color: 'active',
|
37
|
+
fontFamily: 'standard',
|
38
|
+
fontSize: 'md',
|
39
|
+
textDecoration: 'none',
|
40
|
+
outline: 'none',
|
41
|
+
'&.is-hovered': {
|
42
|
+
textDecoration: 'underline'
|
43
|
+
},
|
44
|
+
'&.is-focused': {
|
45
|
+
textDecoration: 'underline'
|
46
|
+
},
|
47
|
+
'&.is-pressed': {
|
48
|
+
color: 'accent.40',
|
49
|
+
textDecoration: 'underline'
|
50
|
+
},
|
51
|
+
'&.is-disabled': {
|
52
|
+
pointerEvents: 'none'
|
53
|
+
}
|
54
|
+
};
|
55
|
+
|
56
|
+
var web = _objectSpread(_objectSpread({}, app), {}, {
|
57
|
+
textDecoration: 'underline',
|
58
|
+
'&:visited': {
|
59
|
+
color: 'decorative.7'
|
60
|
+
}
|
61
|
+
});
|
62
|
+
|
63
|
+
var _default = {
|
64
|
+
app: app,
|
65
|
+
web: web
|
66
|
+
};
|
67
|
+
exports["default"] = _default;
|
@@ -40,7 +40,7 @@ var _images = _interopRequireDefault(require("./images"));
|
|
40
40
|
|
41
41
|
var _imageUpload = _interopRequireDefault(require("./imageUpload"));
|
42
42
|
|
43
|
-
var
|
43
|
+
var _links = _interopRequireDefault(require("./links"));
|
44
44
|
|
45
45
|
var _listBox = _interopRequireDefault(require("./listBox"));
|
46
46
|
|
@@ -83,7 +83,7 @@ var _default = _objectSpread(_objectSpread({
|
|
83
83
|
images: _images["default"],
|
84
84
|
imageUpload: _imageUpload["default"],
|
85
85
|
loader: _loader["default"],
|
86
|
-
|
86
|
+
links: _links["default"],
|
87
87
|
listBox: _listBox["default"],
|
88
88
|
menu: _menu["default"],
|
89
89
|
menuItem: _menuItem["default"],
|
@@ -0,0 +1,11 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
+
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
|
9
|
+
exports["default"] = void 0;
|
10
|
+
var _default = ['Aardvark', 'Albatross', 'Alligator', 'Alpaca', 'Ant', 'Anteater', 'Antelope', 'Ape', 'Armadillo', 'Donkey', 'Baboon', 'Badger', 'Barracuda', 'Bat', 'Bear', 'Beaver', 'Bee', 'Bison', 'Boar', 'Buffalo', 'Butterfly', 'Camel', 'Capybara', 'Caribou', 'Cassowary', 'Cat', 'Caterpillar', 'Cattle', 'Chamois', 'Cheetah', 'Chicken', 'Chimpanzee', 'Chinchilla', 'Chough', 'Clam', 'Cobra', 'Cockroach', 'Cod', 'Cormorant', 'Coyote', 'Crab', 'Crane', 'Crocodile', 'Crow', 'Curlew', 'Deer', 'Dinosaur', 'Dog', 'Dogfish', 'Dolphin', 'Dotterel', 'Dove', 'Dragonfly', 'Duck', 'Dugong', 'Dunlin', 'Eagle', 'Echidna', 'Eel', 'Eland', 'Elephant', 'Elk', 'Emu', 'Falcon', 'Ferret', 'Finch', 'Fish', 'Flamingo', 'Fly', 'Fox', 'Frog', 'Gaur', 'Gazelle', 'Gerbil', 'Giraffe', 'Gnat', 'Gnu', 'Goat', 'Goldfinch', 'Goldfish', 'Goose', 'Gorilla', 'Goshawk', 'Grasshopper', 'Grouse', 'Guanaco', 'Gull', 'Hamster', 'Hare', 'Hawk', 'Hedgehog', 'Heron', 'Herring', 'Hippopotamus', 'Hornet', 'Horse', 'Human', 'Hummingbird', 'Hyena', 'Ibex', 'Ibis', 'Jackal', 'Jaguar', 'Jay', 'Jellyfish', 'Kangaroo', 'Kingfisher', 'Koala', 'Kookabura', 'Kouprey', 'Kudu', 'Lapwing', 'Lark', 'Lemur', 'Leopard', 'Lion', 'Llama', 'Lobster', 'Locust', 'Loris', 'Louse', 'Lyrebird', 'Magpie', 'Mallard', 'Manatee', 'Mandrill', 'Mantis', 'Marten', 'Meerkat', 'Mink', 'Mole', 'Mongoose', 'Monkey', 'Moose', 'Mosquito', 'Mouse', 'Mule', 'Narwhal', 'Newt', 'Nightingale', 'Octopus', 'Okapi', 'Opossum', 'Oryx', 'Ostrich', 'Otter', 'Owl', 'Oyster', 'Panther', 'Parrot', 'Partridge', 'Peafowl', 'Pelican', 'Penguin', 'Pheasant', 'Pig', 'Pigeon', 'Pony', 'Porcupine', 'Porpoise', 'Quail', 'Quelea', 'Quetzal', 'Rabbit', 'Raccoon', 'Rail', 'Ram', 'Rat', 'Raven', 'Red deer', 'Red panda', 'Reindeer', 'Rhinoceros', 'Rook', 'Salamander', 'Salmon', 'Sand Dollar', 'Sandpiper', 'Sardine', 'Scorpion', 'Seahorse', 'Seal', 'Shark', 'Sheep', 'Shrew', 'Skunk', 'Snail', 'Snake', 'Sparrow', 'Spider', 'Spoonbill', 'Squid', 'Squirrel', 'Starling', 'Stingray', 'Stinkbug', 'Stork', 'Swallow', 'Swan', 'Tapir', 'Tarsier', 'Termite', 'Tiger', 'Toad', 'Trout', 'Turkey', 'Turtle', 'Viper', 'Vulture', 'Wallaby', 'Walrus', 'Wasp', 'Weasel', 'Whale', 'Wildcat', 'Wolf', 'Wolverine', 'Wombat', 'Woodcock', 'Woodpecker', 'Worm', 'Wren', 'Yak', 'Zebra'];
|
11
|
+
exports["default"] = _default;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
+
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
|
9
|
+
exports["default"] = void 0;
|
10
|
+
var _default = ['Michael', 'Christopher', 'Jessica', 'Matthew', 'Ashley', 'Jennifer', 'Joshua', 'Amanda', 'Daniel', 'David', 'James', 'Robert', 'John', 'Joseph', 'Andrew', 'Ryan', 'Brandon', 'Jason', 'Justin', 'Sarah', 'William', 'Jonathan', 'Stephanie', 'Brian', 'Nicole', 'Nicholas', 'Anthony', 'Heather', 'Eric', 'Elizabeth', 'Adam', 'Megan', 'Melissa', 'Kevin', 'Steven', 'Thomas', 'Timothy', 'Christina', 'Kyle', 'Rachel', 'Laura', 'Lauren', 'Amber', 'Brittany', 'Danielle', 'Richard', 'Kimberly', 'Jeffrey', 'Amy', 'Crystal', 'Michelle', 'Tiffany', 'Jeremy', 'Benjamin', 'Mark', 'Emily', 'Aaron', 'Charles', 'Rebecca', 'Jacob', 'Stephen', 'Patrick', 'Sean', 'Erin', 'Zachary', 'Jamie', 'Kelly', 'Samantha', 'Nathan', 'Sara', 'Dustin', 'Paul', 'Angela', 'Tyler', 'Scott', 'Katherine', 'Andrea', 'Gregory', 'Erica', 'Mary', 'Travis', 'Lisa', 'Kenneth', 'Bryan', 'Lindsey', 'Kristen', 'Jose', 'Alexander', 'Jesse', 'Katie', 'Lindsay', 'Shannon', 'Vanessa', 'Courtney', 'Christine', 'Alicia', 'Cody', 'Allison', 'Bradley', 'Samuel'];
|
11
|
+
exports["default"] = _default;
|
@@ -0,0 +1,96 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
6
|
+
|
7
|
+
_Object$defineProperty2(exports, "__esModule", {
|
8
|
+
value: true
|
9
|
+
});
|
10
|
+
|
11
|
+
exports["default"] = void 0;
|
12
|
+
|
13
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
|
14
|
+
|
15
|
+
var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
|
16
|
+
|
17
|
+
var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
|
18
|
+
|
19
|
+
var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
|
20
|
+
|
21
|
+
var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
|
22
|
+
|
23
|
+
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
|
24
|
+
|
25
|
+
var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
|
26
|
+
|
27
|
+
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
|
28
|
+
|
29
|
+
var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
|
30
|
+
|
31
|
+
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
32
|
+
|
33
|
+
var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
|
34
|
+
|
35
|
+
var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
36
|
+
|
37
|
+
var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
|
38
|
+
|
39
|
+
var _uuid = require("uuid");
|
40
|
+
|
41
|
+
var _animals = _interopRequireDefault(require("./constants/animals"));
|
42
|
+
|
43
|
+
var _firstNames = _interopRequireDefault(require("./constants/firstNames"));
|
44
|
+
|
45
|
+
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; }
|
46
|
+
|
47
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context4; (0, _forEach["default"])(_context4 = ownKeys(Object(source))).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
|
48
|
+
|
49
|
+
function createMockData(length, objectScheme) {
|
50
|
+
var mockDataBase = {
|
51
|
+
animal: _animals["default"],
|
52
|
+
firstName: _firstNames["default"]
|
53
|
+
};
|
54
|
+
var itemsNumber = {
|
55
|
+
animal: 0,
|
56
|
+
firstName: 0
|
57
|
+
};
|
58
|
+
|
59
|
+
var getPropValue = function getPropValue(valueType) {
|
60
|
+
if (valueType === 'id') {
|
61
|
+
return (0, _uuid.v4)();
|
62
|
+
}
|
63
|
+
|
64
|
+
var valueNumber = itemsNumber[valueType];
|
65
|
+
var propValue = mockDataBase[valueType][valueNumber];
|
66
|
+
itemsNumber[valueType] += 1;
|
67
|
+
return propValue;
|
68
|
+
};
|
69
|
+
|
70
|
+
var generateObject = function generateObject() {
|
71
|
+
var entries = (0, _entries["default"])(objectScheme);
|
72
|
+
|
73
|
+
var reducer = function reducer(previousValue, currentValue) {
|
74
|
+
var fieldName = currentValue[0];
|
75
|
+
var fieldValue = getPropValue(currentValue[1]);
|
76
|
+
return _objectSpread(_objectSpread({}, previousValue), {}, (0, _defineProperty3["default"])({}, fieldName, fieldValue));
|
77
|
+
};
|
78
|
+
|
79
|
+
return (0, _reduce["default"])(entries).call(entries, reducer, {});
|
80
|
+
};
|
81
|
+
|
82
|
+
var generateDataArr = function generateDataArr() {
|
83
|
+
var _context, _context2;
|
84
|
+
|
85
|
+
return (0, _map["default"])(_context = (0, _fill["default"])(_context2 = Array(length)).call(_context2, undefined)).call(_context, function () {
|
86
|
+
return generateObject();
|
87
|
+
});
|
88
|
+
};
|
89
|
+
|
90
|
+
return generateDataArr();
|
91
|
+
}
|
92
|
+
|
93
|
+
var _default = createMockData; // usage(delete this comment as soon as we used this function in a few stories so we have examples):
|
94
|
+
// const mockData = createMockData(100, { name: 'animal', id: 'id' });
|
95
|
+
|
96
|
+
exports["default"] = _default;
|
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
|
|
5
5
|
import { Link as ThemeUILink } from 'theme-ui';
|
6
6
|
import { useLink } from '@react-aria/link';
|
7
7
|
import { useFocusRing } from '@react-aria/focus';
|
8
|
-
import { useHover } from '@react-aria/interactions';
|
8
|
+
import { useHover, usePress } from '@react-aria/interactions';
|
9
9
|
import { mergeProps } from '@react-aria/utils';
|
10
10
|
import { usePropWarning, useStatusClasses } from '../../hooks';
|
11
11
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
@@ -33,10 +33,17 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
33
33
|
hoverProps = _useHover.hoverProps,
|
34
34
|
isHovered = _useHover.isHovered;
|
35
35
|
|
36
|
+
var _usePress = usePress({
|
37
|
+
ref: linkRef
|
38
|
+
}),
|
39
|
+
pressProps = _usePress.pressProps,
|
40
|
+
isPressed = _usePress.isPressed;
|
41
|
+
|
36
42
|
var _useStatusClasses = useStatusClasses(className, {
|
37
43
|
isDisabled: isDisabled,
|
38
44
|
isFocused: isFocusVisible,
|
39
|
-
isHovered: isHovered
|
45
|
+
isHovered: isHovered,
|
46
|
+
isPressed: isPressed
|
40
47
|
}),
|
41
48
|
classNames = _useStatusClasses.classNames;
|
42
49
|
|
@@ -44,7 +51,7 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
44
51
|
className: classNames,
|
45
52
|
ref: linkRef,
|
46
53
|
role: "link"
|
47
|
-
}, others, mergeProps(hoverProps, focusProps, linkProps)));
|
54
|
+
}, others, mergeProps(hoverProps, focusProps, pressProps, linkProps)));
|
48
55
|
});
|
49
56
|
Link.propTypes = {
|
50
57
|
/** Whether the link is disabled. */
|
@@ -60,11 +67,15 @@ Link.propTypes = {
|
|
60
67
|
href: PropTypes.string,
|
61
68
|
|
62
69
|
/** Specifies the window where the linked page is loaded */
|
63
|
-
target: PropTypes.string
|
70
|
+
target: PropTypes.string,
|
71
|
+
|
72
|
+
/** The styling variation of the link. */
|
73
|
+
variant: PropTypes.string
|
64
74
|
};
|
65
75
|
Link.defaultProps = {
|
66
76
|
isDisabled: false,
|
67
|
-
as: 'a'
|
77
|
+
as: 'a',
|
78
|
+
variant: 'app'
|
68
79
|
};
|
69
80
|
Link.displayName = 'Link';
|
70
81
|
export default Link;
|
@@ -1,7 +1,9 @@
|
|
1
1
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
2
3
|
import React from 'react';
|
3
4
|
import Link from '.';
|
4
5
|
import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
|
6
|
+
import variants from '../../styles/variants/links';
|
5
7
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
6
8
|
export default {
|
7
9
|
title: 'Link',
|
@@ -26,6 +28,12 @@ export default {
|
|
26
28
|
type: 'none'
|
27
29
|
},
|
28
30
|
defaultValue: '_blank'
|
31
|
+
},
|
32
|
+
variant: {
|
33
|
+
control: {
|
34
|
+
type: 'select',
|
35
|
+
options: _Object$keys(variants)
|
36
|
+
}
|
29
37
|
}
|
30
38
|
}
|
31
39
|
};
|
package/lib/styles/theme.js
CHANGED
@@ -17,7 +17,7 @@ import colors, { accent, line, shadow, focus } from './colors';
|
|
17
17
|
import { fontSizes, fontWeights, textColors } from './text';
|
18
18
|
import breakpoints from './breakpoints';
|
19
19
|
import forms from './forms';
|
20
|
-
import { variants, buttons, text, images } from './variants';
|
20
|
+
import { variants, buttons, text, images, links } from './variants';
|
21
21
|
export default {
|
22
22
|
name: 'Astro',
|
23
23
|
space: spacing,
|
@@ -47,5 +47,6 @@ export default {
|
|
47
47
|
images: images,
|
48
48
|
buttons: buttons,
|
49
49
|
textColors: textColors,
|
50
|
+
links: links,
|
50
51
|
variants: variants
|
51
52
|
};
|
@@ -0,0 +1,46 @@
|
|
1
|
+
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
2
|
+
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
3
|
+
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
4
|
+
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
5
|
+
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
6
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
7
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
8
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
9
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
10
|
+
|
11
|
+
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; }
|
12
|
+
|
13
|
+
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; }
|
14
|
+
|
15
|
+
var app = {
|
16
|
+
color: 'active',
|
17
|
+
fontFamily: 'standard',
|
18
|
+
fontSize: 'md',
|
19
|
+
textDecoration: 'none',
|
20
|
+
outline: 'none',
|
21
|
+
'&.is-hovered': {
|
22
|
+
textDecoration: 'underline'
|
23
|
+
},
|
24
|
+
'&.is-focused': {
|
25
|
+
textDecoration: 'underline'
|
26
|
+
},
|
27
|
+
'&.is-pressed': {
|
28
|
+
color: 'accent.40',
|
29
|
+
textDecoration: 'underline'
|
30
|
+
},
|
31
|
+
'&.is-disabled': {
|
32
|
+
pointerEvents: 'none'
|
33
|
+
}
|
34
|
+
};
|
35
|
+
|
36
|
+
var web = _objectSpread(_objectSpread({}, app), {}, {
|
37
|
+
textDecoration: 'underline',
|
38
|
+
'&:visited': {
|
39
|
+
color: 'decorative.7'
|
40
|
+
}
|
41
|
+
});
|
42
|
+
|
43
|
+
export default {
|
44
|
+
app: app,
|
45
|
+
web: web
|
46
|
+
};
|
@@ -17,7 +17,7 @@ import boxes from './boxes';
|
|
17
17
|
import codeView from './codeView';
|
18
18
|
import images from './images';
|
19
19
|
import imageUpload from './imageUpload';
|
20
|
-
import
|
20
|
+
import links from './links';
|
21
21
|
import listBox from './listBox';
|
22
22
|
import loader from './loader';
|
23
23
|
import modal from './modal';
|
@@ -40,7 +40,7 @@ export default _objectSpread(_objectSpread({
|
|
40
40
|
images: images,
|
41
41
|
imageUpload: imageUpload,
|
42
42
|
loader: loader,
|
43
|
-
|
43
|
+
links: links,
|
44
44
|
listBox: listBox,
|
45
45
|
menu: menu,
|
46
46
|
menuItem: menuItem,
|
@@ -0,0 +1 @@
|
|
1
|
+
export default ['Aardvark', 'Albatross', 'Alligator', 'Alpaca', 'Ant', 'Anteater', 'Antelope', 'Ape', 'Armadillo', 'Donkey', 'Baboon', 'Badger', 'Barracuda', 'Bat', 'Bear', 'Beaver', 'Bee', 'Bison', 'Boar', 'Buffalo', 'Butterfly', 'Camel', 'Capybara', 'Caribou', 'Cassowary', 'Cat', 'Caterpillar', 'Cattle', 'Chamois', 'Cheetah', 'Chicken', 'Chimpanzee', 'Chinchilla', 'Chough', 'Clam', 'Cobra', 'Cockroach', 'Cod', 'Cormorant', 'Coyote', 'Crab', 'Crane', 'Crocodile', 'Crow', 'Curlew', 'Deer', 'Dinosaur', 'Dog', 'Dogfish', 'Dolphin', 'Dotterel', 'Dove', 'Dragonfly', 'Duck', 'Dugong', 'Dunlin', 'Eagle', 'Echidna', 'Eel', 'Eland', 'Elephant', 'Elk', 'Emu', 'Falcon', 'Ferret', 'Finch', 'Fish', 'Flamingo', 'Fly', 'Fox', 'Frog', 'Gaur', 'Gazelle', 'Gerbil', 'Giraffe', 'Gnat', 'Gnu', 'Goat', 'Goldfinch', 'Goldfish', 'Goose', 'Gorilla', 'Goshawk', 'Grasshopper', 'Grouse', 'Guanaco', 'Gull', 'Hamster', 'Hare', 'Hawk', 'Hedgehog', 'Heron', 'Herring', 'Hippopotamus', 'Hornet', 'Horse', 'Human', 'Hummingbird', 'Hyena', 'Ibex', 'Ibis', 'Jackal', 'Jaguar', 'Jay', 'Jellyfish', 'Kangaroo', 'Kingfisher', 'Koala', 'Kookabura', 'Kouprey', 'Kudu', 'Lapwing', 'Lark', 'Lemur', 'Leopard', 'Lion', 'Llama', 'Lobster', 'Locust', 'Loris', 'Louse', 'Lyrebird', 'Magpie', 'Mallard', 'Manatee', 'Mandrill', 'Mantis', 'Marten', 'Meerkat', 'Mink', 'Mole', 'Mongoose', 'Monkey', 'Moose', 'Mosquito', 'Mouse', 'Mule', 'Narwhal', 'Newt', 'Nightingale', 'Octopus', 'Okapi', 'Opossum', 'Oryx', 'Ostrich', 'Otter', 'Owl', 'Oyster', 'Panther', 'Parrot', 'Partridge', 'Peafowl', 'Pelican', 'Penguin', 'Pheasant', 'Pig', 'Pigeon', 'Pony', 'Porcupine', 'Porpoise', 'Quail', 'Quelea', 'Quetzal', 'Rabbit', 'Raccoon', 'Rail', 'Ram', 'Rat', 'Raven', 'Red deer', 'Red panda', 'Reindeer', 'Rhinoceros', 'Rook', 'Salamander', 'Salmon', 'Sand Dollar', 'Sandpiper', 'Sardine', 'Scorpion', 'Seahorse', 'Seal', 'Shark', 'Sheep', 'Shrew', 'Skunk', 'Snail', 'Snake', 'Sparrow', 'Spider', 'Spoonbill', 'Squid', 'Squirrel', 'Starling', 'Stingray', 'Stinkbug', 'Stork', 'Swallow', 'Swan', 'Tapir', 'Tarsier', 'Termite', 'Tiger', 'Toad', 'Trout', 'Turkey', 'Turtle', 'Viper', 'Vulture', 'Wallaby', 'Walrus', 'Wasp', 'Weasel', 'Whale', 'Wildcat', 'Wolf', 'Wolverine', 'Wombat', 'Woodcock', 'Woodpecker', 'Worm', 'Wren', 'Yak', 'Zebra'];
|
@@ -0,0 +1 @@
|
|
1
|
+
export default ['Michael', 'Christopher', 'Jessica', 'Matthew', 'Ashley', 'Jennifer', 'Joshua', 'Amanda', 'Daniel', 'David', 'James', 'Robert', 'John', 'Joseph', 'Andrew', 'Ryan', 'Brandon', 'Jason', 'Justin', 'Sarah', 'William', 'Jonathan', 'Stephanie', 'Brian', 'Nicole', 'Nicholas', 'Anthony', 'Heather', 'Eric', 'Elizabeth', 'Adam', 'Megan', 'Melissa', 'Kevin', 'Steven', 'Thomas', 'Timothy', 'Christina', 'Kyle', 'Rachel', 'Laura', 'Lauren', 'Amber', 'Brittany', 'Danielle', 'Richard', 'Kimberly', 'Jeffrey', 'Amy', 'Crystal', 'Michelle', 'Tiffany', 'Jeremy', 'Benjamin', 'Mark', 'Emily', 'Aaron', 'Charles', 'Rebecca', 'Jacob', 'Stephen', 'Patrick', 'Sean', 'Erin', 'Zachary', 'Jamie', 'Kelly', 'Samantha', 'Nathan', 'Sara', 'Dustin', 'Paul', 'Angela', 'Tyler', 'Scott', 'Katherine', 'Andrea', 'Gregory', 'Erica', 'Mary', 'Travis', 'Lisa', 'Kenneth', 'Bryan', 'Lindsey', 'Kristen', 'Jose', 'Alexander', 'Jesse', 'Katie', 'Lindsay', 'Shannon', 'Vanessa', 'Courtney', 'Christine', 'Alicia', 'Cody', 'Allison', 'Bradley', 'Samuel'];
|
@@ -0,0 +1,68 @@
|
|
1
|
+
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
2
|
+
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
3
|
+
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
4
|
+
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
5
|
+
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
6
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
7
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
8
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
9
|
+
import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
|
10
|
+
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
11
|
+
import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
|
12
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
13
|
+
import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
|
14
|
+
|
15
|
+
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; }
|
16
|
+
|
17
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
18
|
+
|
19
|
+
import { v4 as uuid } from 'uuid';
|
20
|
+
import animals from './constants/animals';
|
21
|
+
import firstNames from './constants/firstNames';
|
22
|
+
|
23
|
+
function createMockData(length, objectScheme) {
|
24
|
+
var mockDataBase = {
|
25
|
+
animal: animals,
|
26
|
+
firstName: firstNames
|
27
|
+
};
|
28
|
+
var itemsNumber = {
|
29
|
+
animal: 0,
|
30
|
+
firstName: 0
|
31
|
+
};
|
32
|
+
|
33
|
+
var getPropValue = function getPropValue(valueType) {
|
34
|
+
if (valueType === 'id') {
|
35
|
+
return uuid();
|
36
|
+
}
|
37
|
+
|
38
|
+
var valueNumber = itemsNumber[valueType];
|
39
|
+
var propValue = mockDataBase[valueType][valueNumber];
|
40
|
+
itemsNumber[valueType] += 1;
|
41
|
+
return propValue;
|
42
|
+
};
|
43
|
+
|
44
|
+
var generateObject = function generateObject() {
|
45
|
+
var entries = _Object$entries(objectScheme);
|
46
|
+
|
47
|
+
var reducer = function reducer(previousValue, currentValue) {
|
48
|
+
var fieldName = currentValue[0];
|
49
|
+
var fieldValue = getPropValue(currentValue[1]);
|
50
|
+
return _objectSpread(_objectSpread({}, previousValue), {}, _defineProperty({}, fieldName, fieldValue));
|
51
|
+
};
|
52
|
+
|
53
|
+
return _reduceInstanceProperty(entries).call(entries, reducer, {});
|
54
|
+
};
|
55
|
+
|
56
|
+
var generateDataArr = function generateDataArr() {
|
57
|
+
var _context, _context2;
|
58
|
+
|
59
|
+
return _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = Array(length)).call(_context2, undefined)).call(_context, function () {
|
60
|
+
return generateObject();
|
61
|
+
});
|
62
|
+
};
|
63
|
+
|
64
|
+
return generateDataArr();
|
65
|
+
}
|
66
|
+
|
67
|
+
export default createMockData; // usage(delete this comment as soon as we used this function in a few stories so we have examples):
|
68
|
+
// const mockData = createMockData(100, { name: 'animal', id: 'id' });
|
package/package.json
CHANGED
@@ -1,27 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
-
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
6
|
-
value: true
|
7
|
-
});
|
8
|
-
|
9
|
-
exports["default"] = void 0;
|
10
|
-
var link = {
|
11
|
-
color: 'white',
|
12
|
-
fontFamily: 'standard',
|
13
|
-
fontSize: 'md',
|
14
|
-
textDecoration: 'none',
|
15
|
-
outline: 'none',
|
16
|
-
'&.is-hovered': {
|
17
|
-
textDecoration: 'underline'
|
18
|
-
},
|
19
|
-
'&.is-focused': {
|
20
|
-
textDecoration: 'underline'
|
21
|
-
},
|
22
|
-
'&.is-disabled': {
|
23
|
-
pointerEvents: 'none'
|
24
|
-
}
|
25
|
-
};
|
26
|
-
var _default = link;
|
27
|
-
exports["default"] = _default;
|
@@ -1,17 +0,0 @@
|
|
1
|
-
var link = {
|
2
|
-
color: 'white',
|
3
|
-
fontFamily: 'standard',
|
4
|
-
fontSize: 'md',
|
5
|
-
textDecoration: 'none',
|
6
|
-
outline: 'none',
|
7
|
-
'&.is-hovered': {
|
8
|
-
textDecoration: 'underline'
|
9
|
-
},
|
10
|
-
'&.is-focused': {
|
11
|
-
textDecoration: 'underline'
|
12
|
-
},
|
13
|
-
'&.is-disabled': {
|
14
|
-
pointerEvents: 'none'
|
15
|
-
}
|
16
|
-
};
|
17
|
-
export default link;
|