@wireapp/react-ui-kit 8.17.3 → 8.17.4
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/package.json +2 -7
- package/src/Form/Button.js +8 -8
- package/src/Form/Button.js.map +1 -1
- package/src/Form/ButtonLink.js +7 -7
- package/src/Form/ButtonLink.js.map +1 -1
- package/src/Form/Checkbox.js +19 -19
- package/src/Form/Checkbox.js.map +1 -1
- package/src/Form/CodeInput.js +13 -9
- package/src/Form/CodeInput.js.map +1 -1
- package/src/Form/DropFileInput.js +15 -10
- package/src/Form/DropFileInput.js.map +1 -1
- package/src/Form/ErrorMessage.js +8 -8
- package/src/Form/ErrorMessage.js.map +1 -1
- package/src/Form/Form.js +3 -3
- package/src/Form/Form.js.map +1 -1
- package/src/Form/Input.js +16 -10
- package/src/Form/Input.js.map +1 -1
- package/src/Form/InputBlock.js +6 -27
- package/src/Form/InputBlock.js.map +1 -1
- package/src/Form/InputLabel.js +6 -5
- package/src/Form/InputLabel.js.map +1 -1
- package/src/Form/InputSubmitCombo.js +10 -10
- package/src/Form/InputSubmitCombo.js.map +1 -1
- package/src/Form/RangeInput.js +7 -6
- package/src/Form/RangeInput.js.map +1 -1
- package/src/Form/RangeInput.styles.js +3 -4
- package/src/Form/RangeInput.styles.js.map +1 -1
- package/src/Form/RoundIconButton.js +8 -7
- package/src/Form/RoundIconButton.js.map +1 -1
- package/src/Form/Select.js +8 -7
- package/src/Form/Select.js.map +1 -1
- package/src/Form/SelectComponents.js +9 -8
- package/src/Form/SelectComponents.js.map +1 -1
- package/src/Form/SelectStyles.js +2 -3
- package/src/Form/SelectStyles.js.map +1 -1
- package/src/Form/ShakeBox.js +8 -25
- package/src/Form/ShakeBox.js.map +1 -1
- package/src/Form/Switch.js +6 -6
- package/src/Form/Switch.js.map +1 -1
- package/src/Form/TextArea.js +5 -5
- package/src/Form/TextArea.js.map +1 -1
- package/src/Form/Tooltip.js +6 -5
- package/src/Form/Tooltip.js.map +1 -1
- package/src/GlobalStyle.js +3 -3
- package/src/GlobalStyle.js.map +1 -1
- package/src/Icon/AddPeopleIcon.js +4 -26
- package/src/Icon/AddPeopleIcon.js.map +1 -1
- package/src/Icon/ArchiveIcon.js +2 -24
- package/src/Icon/ArchiveIcon.js.map +1 -1
- package/src/Icon/ArrowDown.js +5 -24
- package/src/Icon/ArrowDown.js.map +1 -1
- package/src/Icon/ArrowIcon.js +5 -5
- package/src/Icon/ArrowIcon.js.map +1 -1
- package/src/Icon/AttachmentIcon.js +2 -24
- package/src/Icon/AttachmentIcon.js.map +1 -1
- package/src/Icon/AudioVideoIcon.js +2 -24
- package/src/Icon/AudioVideoIcon.js.map +1 -1
- package/src/Icon/BlockIcon.js +2 -24
- package/src/Icon/BlockIcon.js.map +1 -1
- package/src/Icon/Brand/AndroidIcon.js +2 -24
- package/src/Icon/Brand/AndroidIcon.js.map +1 -1
- package/src/Icon/Brand/AppleIcon.js +2 -24
- package/src/Icon/Brand/AppleIcon.js.map +1 -1
- package/src/Icon/Brand/ChromeIcon.js +2 -24
- package/src/Icon/Brand/ChromeIcon.js.map +1 -1
- package/src/Icon/Brand/FacebookIcon.js +2 -24
- package/src/Icon/Brand/FacebookIcon.js.map +1 -1
- package/src/Icon/Brand/GitHubIcon.js +2 -24
- package/src/Icon/Brand/GitHubIcon.js.map +1 -1
- package/src/Icon/Brand/LinkedInIcon.js +2 -24
- package/src/Icon/Brand/LinkedInIcon.js.map +1 -1
- package/src/Icon/Brand/LinuxIcon.js +2 -24
- package/src/Icon/Brand/LinuxIcon.js.map +1 -1
- package/src/Icon/Brand/MicrosoftIcon.js +2 -24
- package/src/Icon/Brand/MicrosoftIcon.js.map +1 -1
- package/src/Icon/Brand/TwitterIcon.js +2 -24
- package/src/Icon/Brand/TwitterIcon.js.map +1 -1
- package/src/Icon/CallIcon.js +2 -24
- package/src/Icon/CallIcon.js.map +1 -1
- package/src/Icon/CamIcon.js +2 -24
- package/src/Icon/CamIcon.js.map +1 -1
- package/src/Icon/CameraIcon.js +4 -26
- package/src/Icon/CameraIcon.js.map +1 -1
- package/src/Icon/CheckIcon.js +2 -24
- package/src/Icon/CheckIcon.js.map +1 -1
- package/src/Icon/CheckRoundIcon.js +2 -24
- package/src/Icon/CheckRoundIcon.js.map +1 -1
- package/src/Icon/ChevronIcon.js +5 -5
- package/src/Icon/ChevronIcon.js.map +1 -1
- package/src/Icon/CloseIcon.js +2 -24
- package/src/Icon/CloseIcon.js.map +1 -1
- package/src/Icon/CopyIcon.js +2 -24
- package/src/Icon/CopyIcon.js.map +1 -1
- package/src/Icon/DeviceIcon.js +2 -24
- package/src/Icon/DeviceIcon.js.map +1 -1
- package/src/Icon/DownloadIcon.js +2 -24
- package/src/Icon/DownloadIcon.js.map +1 -1
- package/src/Icon/EditDocumentIcon.js +4 -26
- package/src/Icon/EditDocumentIcon.js.map +1 -1
- package/src/Icon/EditIcon.js +2 -24
- package/src/Icon/EditIcon.js.map +1 -1
- package/src/Icon/EnterIcon.js +2 -24
- package/src/Icon/EnterIcon.js.map +1 -1
- package/src/Icon/ErrorIcon.js +2 -24
- package/src/Icon/ErrorIcon.js.map +1 -1
- package/src/Icon/FileIcon.js +2 -24
- package/src/Icon/FileIcon.js.map +1 -1
- package/src/Icon/GifIcon.js +2 -24
- package/src/Icon/GifIcon.js.map +1 -1
- package/src/Icon/GridIcon.js +4 -26
- package/src/Icon/GridIcon.js.map +1 -1
- package/src/Icon/GroupIcon.js +2 -24
- package/src/Icon/GroupIcon.js.map +1 -1
- package/src/Icon/HangupIcon.js +2 -24
- package/src/Icon/HangupIcon.js.map +1 -1
- package/src/Icon/HideIcon.js +2 -24
- package/src/Icon/HideIcon.js.map +1 -1
- package/src/Icon/ImageIcon.js +2 -24
- package/src/Icon/ImageIcon.js.map +1 -1
- package/src/Icon/InfoIcon.js +2 -24
- package/src/Icon/InfoIcon.js.map +1 -1
- package/src/Icon/InviteIcon.js +2 -24
- package/src/Icon/InviteIcon.js.map +1 -1
- package/src/Icon/LeaveIcon.js +2 -24
- package/src/Icon/LeaveIcon.js.map +1 -1
- package/src/Icon/LinkIcon.js +4 -26
- package/src/Icon/LinkIcon.js.map +1 -1
- package/src/Icon/ListIcon.js +2 -24
- package/src/Icon/ListIcon.js.map +1 -1
- package/src/Icon/LockIcon.js +2 -24
- package/src/Icon/LockIcon.js.map +1 -1
- package/src/Icon/MessageIcon.js +2 -24
- package/src/Icon/MessageIcon.js.map +1 -1
- package/src/Icon/MinusIcon.js +2 -24
- package/src/Icon/MinusIcon.js.map +1 -1
- package/src/Icon/MoreIcon.js +2 -24
- package/src/Icon/MoreIcon.js.map +1 -1
- package/src/Icon/MuteIcon.js +2 -24
- package/src/Icon/MuteIcon.js.map +1 -1
- package/src/Icon/NotificationIcon.js +2 -24
- package/src/Icon/NotificationIcon.js.map +1 -1
- package/src/Icon/NotificationOffIcon.js +2 -24
- package/src/Icon/NotificationOffIcon.js.map +1 -1
- package/src/Icon/OptionsIcon.js +2 -24
- package/src/Icon/OptionsIcon.js.map +1 -1
- package/src/Icon/PeopleIcon.js +4 -26
- package/src/Icon/PeopleIcon.js.map +1 -1
- package/src/Icon/PingIcon.js +2 -24
- package/src/Icon/PingIcon.js.map +1 -1
- package/src/Icon/PlaneIcon.js +2 -24
- package/src/Icon/PlaneIcon.js.map +1 -1
- package/src/Icon/PlusIcon.js +2 -24
- package/src/Icon/PlusIcon.js.map +1 -1
- package/src/Icon/ProfileIcon.js +2 -24
- package/src/Icon/ProfileIcon.js.map +1 -1
- package/src/Icon/RecordBoldIcon.js +5 -5
- package/src/Icon/RecordBoldIcon.js.map +1 -1
- package/src/Icon/RecordIcon.js +2 -24
- package/src/Icon/RecordIcon.js.map +1 -1
- package/src/Icon/RecordPendingIcon.js +2 -24
- package/src/Icon/RecordPendingIcon.js.map +1 -1
- package/src/Icon/ReloadIcon.js +2 -24
- package/src/Icon/ReloadIcon.js.map +1 -1
- package/src/Icon/SVGIcon.js +6 -5
- package/src/Icon/SVGIcon.js.map +1 -1
- package/src/Icon/ScreenshareIcon.js +2 -24
- package/src/Icon/ScreenshareIcon.js.map +1 -1
- package/src/Icon/SearchIcon.js +2 -24
- package/src/Icon/SearchIcon.js.map +1 -1
- package/src/Icon/ServicesIcon.js +2 -24
- package/src/Icon/ServicesIcon.js.map +1 -1
- package/src/Icon/SettingsIcon.js +2 -24
- package/src/Icon/SettingsIcon.js.map +1 -1
- package/src/Icon/ShowIcon.js +2 -24
- package/src/Icon/ShowIcon.js.map +1 -1
- package/src/Icon/SignIcon.js +2 -24
- package/src/Icon/SignIcon.js.map +1 -1
- package/src/Icon/SpeakerIcon.js +2 -24
- package/src/Icon/SpeakerIcon.js.map +1 -1
- package/src/Icon/SupportIcon.js +2 -24
- package/src/Icon/SupportIcon.js.map +1 -1
- package/src/Icon/TeamIcon.js +2 -24
- package/src/Icon/TeamIcon.js.map +1 -1
- package/src/Icon/TimedIcon.js +2 -24
- package/src/Icon/TimedIcon.js.map +1 -1
- package/src/Icon/TrashCrossIcon.js +2 -24
- package/src/Icon/TrashCrossIcon.js.map +1 -1
- package/src/Icon/TrashIcon.js +2 -24
- package/src/Icon/TrashIcon.js.map +1 -1
- package/src/Icon/TriangleIcon.js +5 -5
- package/src/Icon/TriangleIcon.js.map +1 -1
- package/src/Icon/UploadIcon.js +2 -24
- package/src/Icon/UploadIcon.js.map +1 -1
- package/src/Icon/WireIcon.js +2 -24
- package/src/Icon/WireIcon.js.map +1 -1
- package/src/Identity/Animation.js +18 -17
- package/src/Identity/Animation.js.map +1 -1
- package/src/Identity/Avatar.js +10 -27
- package/src/Identity/Avatar.js.map +1 -1
- package/src/Identity/AvatarGrid.js +8 -7
- package/src/Identity/AvatarGrid.js.map +1 -1
- package/src/Identity/Logo.js +7 -7
- package/src/Identity/Logo.js.map +1 -1
- package/src/Identity/colors-v2.js +2 -3
- package/src/Identity/colors-v2.js.map +1 -1
- package/src/Identity/colors.js +11 -6
- package/src/Identity/colors.js.map +1 -1
- package/src/Identity/motions.js +6 -7
- package/src/Identity/motions.js.map +1 -1
- package/src/Layout/Box.js +3 -24
- package/src/Layout/Box.js.map +1 -1
- package/src/Layout/Column.js +6 -27
- package/src/Layout/Column.js.map +1 -1
- package/src/Layout/Container.js +10 -31
- package/src/Layout/Container.js.map +1 -1
- package/src/Layout/Content.js +3 -24
- package/src/Layout/Content.js.map +1 -1
- package/src/Layout/FlexBox.js +3 -24
- package/src/Layout/FlexBox.js.map +1 -1
- package/src/Layout/Footer.js +1 -1
- package/src/Layout/Footer.js.map +1 -1
- package/src/Layout/Header.js +3 -24
- package/src/Layout/Header.js.map +1 -1
- package/src/Layout/MatchMedia.js +17 -35
- package/src/Layout/MatchMedia.js.map +1 -1
- package/src/Layout/Spacer.js +1 -1
- package/src/Layout/Spacer.js.map +1 -1
- package/src/Layout/StyledApp.js +6 -5
- package/src/Layout/StyledApp.js.map +1 -1
- package/src/Layout/Theme.js +7 -7
- package/src/Layout/Theme.js.map +1 -1
- package/src/Layout/headerMenu/HeaderMenu.js +13 -8
- package/src/Layout/headerMenu/HeaderMenu.js.map +1 -1
- package/src/Layout/headerMenu/HeaderSubMenu.js +10 -9
- package/src/Layout/headerMenu/HeaderSubMenu.js.map +1 -1
- package/src/Layout/headerMenu/MenuContent.js +4 -5
- package/src/Layout/headerMenu/MenuContent.js.map +1 -1
- package/src/Layout/headerMenu/MenuItems.js +5 -26
- package/src/Layout/headerMenu/MenuItems.js.map +1 -1
- package/src/Layout/headerMenu/MenuLink.js +10 -10
- package/src/Layout/headerMenu/MenuLink.js.map +1 -1
- package/src/Layout/headerMenu/MenuOpenButton.js +6 -27
- package/src/Layout/headerMenu/MenuOpenButton.js.map +1 -1
- package/src/Layout/headerMenu/MenuScrollableItems.js +5 -26
- package/src/Layout/headerMenu/MenuScrollableItems.js.map +1 -1
- package/src/Layout/headerMenu/MenuSubLink.js +6 -7
- package/src/Layout/headerMenu/MenuSubLink.js.map +1 -1
- package/src/Menu/MenuModal.js +14 -13
- package/src/Menu/MenuModal.js.map +1 -1
- package/src/Menu/TabBar.js +13 -12
- package/src/Menu/TabBar.js.map +1 -1
- package/src/Misc/ButtonGroup.js +7 -7
- package/src/Misc/ButtonGroup.js.map +1 -1
- package/src/Misc/IconButton.js +7 -7
- package/src/Misc/IconButton.js.map +1 -1
- package/src/Misc/IsInViewport.js +13 -8
- package/src/Misc/IsInViewport.js.map +1 -1
- package/src/Misc/Loading.js +8 -7
- package/src/Misc/Loading.js.map +1 -1
- package/src/Misc/Pagination.js +6 -5
- package/src/Misc/Pagination.js.map +1 -1
- package/src/Misc/Pill.js +7 -7
- package/src/Misc/Pill.js.map +1 -1
- package/src/Misc/childrenWithDefaultProps.js +3 -3
- package/src/Misc/childrenWithDefaultProps.js.map +1 -1
- package/src/Misc/useTimeout.js +7 -22
- package/src/Misc/useTimeout.js.map +1 -1
- package/src/Modal/Modal.js +13 -12
- package/src/Modal/Modal.js.map +1 -1
- package/src/Modal/Overlay.js +11 -10
- package/src/Modal/Overlay.js.map +1 -1
- package/src/Text/Heading.js +16 -16
- package/src/Text/Heading.js.map +1 -1
- package/src/Text/Label.js +9 -9
- package/src/Text/Label.js.map +1 -1
- package/src/Text/Line.js +3 -24
- package/src/Text/Line.js.map +1 -1
- package/src/Text/Link.js +8 -8
- package/src/Text/Link.js.map +1 -1
- package/src/Text/Paragraph.js +10 -10
- package/src/Text/Paragraph.js.map +1 -1
- package/src/Text/Text.js +8 -29
- package/src/Text/Text.js.map +1 -1
- package/src/Text/TextLink.js +7 -7
- package/src/Text/TextLink.js.map +1 -1
- package/src/Text/Title.js +7 -7
- package/src/Text/Title.js.map +1 -1
- package/src/mediaQueries.js +11 -7
- package/src/mediaQueries.js.map +1 -1
- package/src/util.js +10 -6
- package/src/util.js.map +1 -1
package/src/Modal/Overlay.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.overlayWrapperStyle = exports.overlayBackgroundStyle = exports.OverlayWrapper = exports.OverlayContent = exports.OverlayBackground = exports.Overlay = void 0;
|
|
8
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
7
|
var _react = require("@emotion/react");
|
|
11
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
12
8
|
var _react2 = _interopRequireDefault(require("react"));
|
|
13
9
|
var _Identity = require("../Identity");
|
|
14
10
|
var _motions = require("../Identity/motions");
|
|
15
11
|
var _mediaQueries = require("../mediaQueries");
|
|
16
12
|
var _util = require("../util");
|
|
17
13
|
var _excluded = ["onBackgroundClick", "children"];
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
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; }
|
|
16
|
+
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; }
|
|
17
|
+
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; }
|
|
18
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
18
19
|
var overlayWrapperStyle = function overlayWrapperStyle() {
|
|
19
20
|
return {
|
|
20
21
|
bottom: 0,
|
|
@@ -30,14 +31,14 @@ var overlayWrapperStyle = function overlayWrapperStyle() {
|
|
|
30
31
|
};
|
|
31
32
|
exports.overlayWrapperStyle = overlayWrapperStyle;
|
|
32
33
|
var OverlayWrapper = function OverlayWrapper(props) {
|
|
33
|
-
return (0, _react.jsx)("div", (
|
|
34
|
+
return (0, _react.jsx)("div", _extends({
|
|
34
35
|
css: overlayWrapperStyle
|
|
35
36
|
}, props));
|
|
36
37
|
};
|
|
37
38
|
exports.OverlayWrapper = OverlayWrapper;
|
|
38
39
|
var OverlayContent = function OverlayContent(props) {
|
|
39
|
-
return (0, _react.jsx)("div", (
|
|
40
|
-
css: /*#__PURE__*/(0, _react.css)((
|
|
40
|
+
return (0, _react.jsx)("div", _extends({
|
|
41
|
+
css: /*#__PURE__*/(0, _react.css)(_defineProperty({
|
|
41
42
|
'*': {
|
|
42
43
|
color: _Identity.COLOR.WHITE
|
|
43
44
|
},
|
|
@@ -71,7 +72,7 @@ var overlayBackgroundStyle = function overlayBackgroundStyle() {
|
|
|
71
72
|
};
|
|
72
73
|
exports.overlayBackgroundStyle = overlayBackgroundStyle;
|
|
73
74
|
var OverlayBackground = function OverlayBackground(props) {
|
|
74
|
-
return (0, _react.jsx)("div", (
|
|
75
|
+
return (0, _react.jsx)("div", _extends({
|
|
75
76
|
css: overlayBackgroundStyle
|
|
76
77
|
}, props));
|
|
77
78
|
};
|
|
@@ -81,8 +82,8 @@ var Overlay = function Overlay(_ref) {
|
|
|
81
82
|
onBackgroundClick = _ref$onBackgroundClic === void 0 ? _util.noop : _ref$onBackgroundClic,
|
|
82
83
|
_ref$children = _ref.children,
|
|
83
84
|
children = _ref$children === void 0 ? null : _ref$children,
|
|
84
|
-
props = (
|
|
85
|
-
return (0, _react.jsx)(OverlayWrapper, (
|
|
85
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
86
|
+
return (0, _react.jsx)(OverlayWrapper, _extends({}, props, {
|
|
86
87
|
"data-uie-name": "modal"
|
|
87
88
|
}), (0, _react.jsx)(OverlayContent, null, children), (0, _react.jsx)(OverlayBackground, {
|
|
88
89
|
onClick: onBackgroundClick,
|
package/src/Modal/Overlay.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","names":["overlayWrapperStyle","bottom","display","left","overflowY","padding","position","right","top","zIndex","OverlayWrapper","props","OverlayContent","color","COLOR","WHITE","alignItems","flexDirection","justifyContent","margin","maxWidth","transform","media","QueryKeys","TABLET_DOWN","width","overlayBackgroundStyle","animation","ANIMATION","fadeIn","DURATION","PROACTIVE_SLOW","EASE","QUART","background","height","OverlayBackground","Overlay","onBackgroundClick","noop","children"],"sources":["Overlay.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {ANIMATION, DURATION, EASE} from '../Identity/motions';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {noop} from '../util';\n\nexport type OverlayWrapperProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nexport const overlayWrapperStyle: <T>(props: OverlayWrapperProps<T>) => CSSObject = () => ({\n bottom: 0,\n display: 'flex',\n left: 0,\n overflowY: 'auto',\n padding: '24px',\n position: 'fixed',\n right: 0,\n top: 0,\n zIndex: 9997,\n});\n\nexport const OverlayWrapper = (props: OverlayWrapperProps) => <div css={overlayWrapperStyle} {...props} />;\n\nexport const OverlayContent = (props: React.HTMLProps<HTMLDivElement>) => (\n <div\n css={{\n '*': {\n color: COLOR.WHITE,\n },\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n margin: 'auto',\n maxWidth: '100%',\n overflowY: 'auto',\n position: 'relative',\n transform: 'translate3d(0, 0, 0)',\n zIndex: 9999,\n [media[QueryKeys.TABLET_DOWN]]: {\n width: '100%',\n },\n }}\n {...props}\n />\n);\n\nexport type OverlayBackgroundProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nexport const overlayBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject = () => ({\n animation: `${ANIMATION.fadeIn} ${DURATION.PROACTIVE_SLOW}ms ${EASE.QUART}`,\n background: 'rgba(0, 0, 0, 0.88)',\n height: '100vh',\n left: 0,\n position: 'fixed',\n top: 0,\n width: '100vw',\n zIndex: 9998,\n});\n\nexport const OverlayBackground = (props: OverlayBackgroundProps) => <div css={overlayBackgroundStyle} {...props} />;\n\nexport interface OverlayProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n onBackgroundClick?: () => void;\n}\n\nexport const Overlay = ({onBackgroundClick = noop, children = null, ...props}: OverlayProps) => (\n <OverlayWrapper {...props} data-uie-name=\"modal\">\n <OverlayContent>{children}</OverlayContent>\n <OverlayBackground onClick={onBackgroundClick} data-uie-name=\"overlay-background\" />\n </OverlayWrapper>\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Overlay.js","names":["overlayWrapperStyle","bottom","display","left","overflowY","padding","position","right","top","zIndex","OverlayWrapper","props","OverlayContent","color","COLOR","WHITE","alignItems","flexDirection","justifyContent","margin","maxWidth","transform","media","QueryKeys","TABLET_DOWN","width","overlayBackgroundStyle","animation","ANIMATION","fadeIn","DURATION","PROACTIVE_SLOW","EASE","QUART","background","height","OverlayBackground","Overlay","onBackgroundClick","noop","children"],"sources":["Overlay.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {ANIMATION, DURATION, EASE} from '../Identity/motions';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {noop} from '../util';\n\nexport type OverlayWrapperProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nexport const overlayWrapperStyle: <T>(props: OverlayWrapperProps<T>) => CSSObject = () => ({\n bottom: 0,\n display: 'flex',\n left: 0,\n overflowY: 'auto',\n padding: '24px',\n position: 'fixed',\n right: 0,\n top: 0,\n zIndex: 9997,\n});\n\nexport const OverlayWrapper = (props: OverlayWrapperProps) => <div css={overlayWrapperStyle} {...props} />;\n\nexport const OverlayContent = (props: React.HTMLProps<HTMLDivElement>) => (\n <div\n css={{\n '*': {\n color: COLOR.WHITE,\n },\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n margin: 'auto',\n maxWidth: '100%',\n overflowY: 'auto',\n position: 'relative',\n transform: 'translate3d(0, 0, 0)',\n zIndex: 9999,\n [media[QueryKeys.TABLET_DOWN]]: {\n width: '100%',\n },\n }}\n {...props}\n />\n);\n\nexport type OverlayBackgroundProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nexport const overlayBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject = () => ({\n animation: `${ANIMATION.fadeIn} ${DURATION.PROACTIVE_SLOW}ms ${EASE.QUART}`,\n background: 'rgba(0, 0, 0, 0.88)',\n height: '100vh',\n left: 0,\n position: 'fixed',\n top: 0,\n width: '100vw',\n zIndex: 9998,\n});\n\nexport const OverlayBackground = (props: OverlayBackgroundProps) => <div css={overlayBackgroundStyle} {...props} />;\n\nexport interface OverlayProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n onBackgroundClick?: () => void;\n}\n\nexport const Overlay = ({onBackgroundClick = noop, children = null, ...props}: OverlayProps) => (\n <OverlayWrapper {...props} data-uie-name=\"modal\">\n <OverlayContent>{children}</OverlayContent>\n <OverlayBackground onClick={onBackgroundClick} data-uie-name=\"overlay-background\" />\n </OverlayWrapper>\n);\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AACA;AACA;AACA;AAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAItB,IAAMA,mBAAoE,GAAG,SAAvEA,mBAAoE;EAAA,OAAU;IACzFC,MAAM,EAAE,CAAC;IACTC,OAAO,EAAE,MAAM;IACfC,IAAI,EAAE,CAAC;IACPC,SAAS,EAAE,MAAM;IACjBC,OAAO,EAAE,MAAM;IACfC,QAAQ,EAAE,OAAO;IACjBC,KAAK,EAAE,CAAC;IACRC,GAAG,EAAE,CAAC;IACNC,MAAM,EAAE;EACV,CAAC;AAAA,CAAC;AAAC;AAEI,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,KAA0B;EAAA,OAAK;IAAK,GAAG,EAAEX;EAAoB,GAAKW,KAAK,EAAI;AAAA;AAAC;AAEpG,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAID,KAAsC;EAAA,OACnE;IACE,GAAG;MACD,GAAG,EAAE;QACHE,KAAK,EAAEC,eAAK,CAACC;MACf,CAAC;MACDC,UAAU,EAAE,QAAQ;MACpBd,OAAO,EAAE,MAAM;MACfe,aAAa,EAAE,QAAQ;MACvBC,cAAc,EAAE,eAAe;MAC/BC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE,MAAM;MAChBhB,SAAS,EAAE,MAAM;MACjBE,QAAQ,EAAE,UAAU;MACpBe,SAAS,EAAE,sBAAsB;MACjCZ,MAAM,EAAE;IAAI,GACXa,mBAAK,CAACC,uBAAS,CAACC,WAAW,CAAC,EAAG;MAC9BC,KAAK,EAAE;IACT,CAAC;EACD,GACEd,KAAK,EACT;AAAA,CACH;AAAC;AAIK,IAAMe,sBAA0E,GAAG,SAA7EA,sBAA0E;EAAA,OAAU;IAC/FC,SAAS,YAAKC,kBAAS,CAACC,MAAM,cAAIC,iBAAQ,CAACC,cAAc,gBAAMC,aAAI,CAACC,KAAK,CAAE;IAC3EC,UAAU,EAAE,qBAAqB;IACjCC,MAAM,EAAE,OAAO;IACfhC,IAAI,EAAE,CAAC;IACPG,QAAQ,EAAE,OAAO;IACjBE,GAAG,EAAE,CAAC;IACNiB,KAAK,EAAE,OAAO;IACdhB,MAAM,EAAE;EACV,CAAC;AAAA,CAAC;AAAC;AAEI,IAAM2B,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIzB,KAA6B;EAAA,OAAK;IAAK,GAAG,EAAEe;EAAuB,GAAKf,KAAK,EAAI;AAAA;AAAC;AAM7G,IAAM0B,OAAO,GAAG,SAAVA,OAAO;EAAA,iCAAKC,iBAAiB;IAAjBA,iBAAiB,sCAAGC,UAAI;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IAAK7B,KAAK;EAAA,OAC1E,gBAAC,cAAc,eAAKA,KAAK;IAAE,iBAAc;EAAO,IAC9C,gBAAC,cAAc,QAAE6B,QAAQ,CAAkB,EAC3C,gBAAC,iBAAiB;IAAC,OAAO,EAAEF,iBAAkB;IAAC,iBAAc;EAAoB,EAAG,CACrE;AAAA,CAClB;AAAC"}
|
package/src/Text/Heading.js
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.h4Style = exports.h3Style = exports.h2Style = exports.h1Style = exports.Heading = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
7
|
var _react = require("@emotion/react");
|
|
12
8
|
var _mediaQueries = require("../mediaQueries");
|
|
13
9
|
var _Text = require("./Text");
|
|
@@ -16,11 +12,15 @@ var _excluded = ["level"],
|
|
|
16
12
|
_excluded3 = ["block", "color", "noWrap", "textTransform"],
|
|
17
13
|
_excluded4 = ["block", "color", "noWrap", "textTransform"],
|
|
18
14
|
_excluded5 = ["block", "color", "noWrap", "textTransform"];
|
|
15
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
19
16
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (
|
|
17
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
18
|
+
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; }
|
|
19
|
+
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; }
|
|
20
|
+
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; }
|
|
21
21
|
var Heading = function Heading(_ref) {
|
|
22
22
|
var level = _ref.level,
|
|
23
|
-
props = (
|
|
23
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
24
24
|
switch (level) {
|
|
25
25
|
case '2':
|
|
26
26
|
return (0, _react.jsx)(H2, props);
|
|
@@ -45,13 +45,13 @@ var h1Style = function h1Style(theme, _ref2) {
|
|
|
45
45
|
noWrap = _ref2$noWrap === void 0 ? false : _ref2$noWrap,
|
|
46
46
|
_ref2$textTransform = _ref2.textTransform,
|
|
47
47
|
textTransform = _ref2$textTransform === void 0 ? 'none' : _ref2$textTransform,
|
|
48
|
-
props = (
|
|
48
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
49
49
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
50
50
|
block: block,
|
|
51
51
|
color: color,
|
|
52
52
|
noWrap: noWrap,
|
|
53
53
|
textTransform: textTransform
|
|
54
|
-
}, props))), {}, (
|
|
54
|
+
}, props))), {}, _defineProperty({
|
|
55
55
|
fontSize: '48px',
|
|
56
56
|
fontWeight: 300,
|
|
57
57
|
lineHeight: '56px',
|
|
@@ -65,7 +65,7 @@ var h1Style = function h1Style(theme, _ref2) {
|
|
|
65
65
|
};
|
|
66
66
|
exports.h1Style = h1Style;
|
|
67
67
|
var H1 = function H1(props) {
|
|
68
|
-
return (0, _react.jsx)("h1", (
|
|
68
|
+
return (0, _react.jsx)("h1", _extends({
|
|
69
69
|
css: function css(theme) {
|
|
70
70
|
return h1Style(theme, props);
|
|
71
71
|
}
|
|
@@ -81,13 +81,13 @@ var h2Style = function h2Style(theme, _ref3) {
|
|
|
81
81
|
noWrap = _ref3$noWrap === void 0 ? false : _ref3$noWrap,
|
|
82
82
|
_ref3$textTransform = _ref3.textTransform,
|
|
83
83
|
textTransform = _ref3$textTransform === void 0 ? 'none' : _ref3$textTransform,
|
|
84
|
-
props = (
|
|
84
|
+
props = _objectWithoutProperties(_ref3, _excluded3);
|
|
85
85
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
86
86
|
block: block,
|
|
87
87
|
color: color,
|
|
88
88
|
noWrap: noWrap,
|
|
89
89
|
textTransform: textTransform
|
|
90
|
-
}, props))), {}, (
|
|
90
|
+
}, props))), {}, _defineProperty({
|
|
91
91
|
fontSize: '20px',
|
|
92
92
|
fontWeight: 700,
|
|
93
93
|
lineHeight: '28px',
|
|
@@ -102,7 +102,7 @@ var h2Style = function h2Style(theme, _ref3) {
|
|
|
102
102
|
};
|
|
103
103
|
exports.h2Style = h2Style;
|
|
104
104
|
var H2 = function H2(props) {
|
|
105
|
-
return (0, _react.jsx)("h2", (
|
|
105
|
+
return (0, _react.jsx)("h2", _extends({
|
|
106
106
|
css: function css(theme) {
|
|
107
107
|
return h2Style(theme, props);
|
|
108
108
|
}
|
|
@@ -118,7 +118,7 @@ var h3Style = function h3Style(theme, _ref4) {
|
|
|
118
118
|
noWrap = _ref4$noWrap === void 0 ? false : _ref4$noWrap,
|
|
119
119
|
_ref4$textTransform = _ref4.textTransform,
|
|
120
120
|
textTransform = _ref4$textTransform === void 0 ? 'none' : _ref4$textTransform,
|
|
121
|
-
props = (
|
|
121
|
+
props = _objectWithoutProperties(_ref4, _excluded4);
|
|
122
122
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
123
123
|
block: block,
|
|
124
124
|
color: color,
|
|
@@ -132,7 +132,7 @@ var h3Style = function h3Style(theme, _ref4) {
|
|
|
132
132
|
};
|
|
133
133
|
exports.h3Style = h3Style;
|
|
134
134
|
var H3 = function H3(props) {
|
|
135
|
-
return (0, _react.jsx)("h3", (
|
|
135
|
+
return (0, _react.jsx)("h3", _extends({
|
|
136
136
|
css: function css(theme) {
|
|
137
137
|
return h3Style(theme, props);
|
|
138
138
|
}
|
|
@@ -148,7 +148,7 @@ var h4Style = function h4Style(theme, _ref5) {
|
|
|
148
148
|
noWrap = _ref5$noWrap === void 0 ? false : _ref5$noWrap,
|
|
149
149
|
_ref5$textTransform = _ref5.textTransform,
|
|
150
150
|
textTransform = _ref5$textTransform === void 0 ? 'none' : _ref5$textTransform,
|
|
151
|
-
props = (
|
|
151
|
+
props = _objectWithoutProperties(_ref5, _excluded5);
|
|
152
152
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
153
153
|
block: block,
|
|
154
154
|
color: color,
|
|
@@ -163,7 +163,7 @@ var h4Style = function h4Style(theme, _ref5) {
|
|
|
163
163
|
};
|
|
164
164
|
exports.h4Style = h4Style;
|
|
165
165
|
var H4 = function H4(props) {
|
|
166
|
-
return (0, _react.jsx)("h3", (
|
|
166
|
+
return (0, _react.jsx)("h3", _extends({
|
|
167
167
|
css: function css(theme) {
|
|
168
168
|
return h4Style(theme, props);
|
|
169
169
|
}
|
package/src/Text/Heading.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.js","names":["Heading","level","props","h1Style","theme","block","color","general","noWrap","textTransform","textStyle","fontSize","fontWeight","lineHeight","marginBottom","marginTop","minHeight","media","QueryKeys","MOBILE","H1","filterTextProps","h2Style","H2","h3Style","H3","h4Style","H4"],"sources":["Heading.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Theme} from '../Layout';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {TextProps, filterTextProps, textStyle} from './Text';\n\ninterface HeadingProps<T = HTMLHeadingElement> extends TextProps<T> {\n level?: string;\n}\n\nexport const Heading = ({level, ...props}: HeadingProps) => {\n switch (level) {\n case '2':\n return <H2 {...props} />;\n case '3':\n return <H3 {...props} />;\n case '4':\n return <H4 {...props} />;\n case '1':\n default:\n return <H1 {...props} />;\n }\n};\n\nexport const h1Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, level = '1', noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '48px',\n fontWeight: 300,\n lineHeight: '56px',\n marginBottom: '64px',\n marginTop: 0,\n minHeight: '48px',\n [media[QueryKeys.MOBILE]]: {\n fontSize: '40px',\n lineHeight: '48px',\n },\n});\n\nexport const H1 = (props: HeadingProps) => (\n <h1 css={(theme: Theme) => h1Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h2Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '20px',\n fontWeight: 700,\n lineHeight: '28px',\n marginBottom: '24px',\n marginTop: '32px',\n [media[QueryKeys.MOBILE]]: {\n fontSize: '18px',\n lineHeight: '26px',\n marginBottom: '20px',\n marginTop: '26px',\n },\n});\n\nexport const H2 = (props: HeadingProps) => (\n <h2 css={(theme: Theme) => h2Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h3Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '16px',\n fontWeight: 600,\n marginBottom: '16px',\n});\n\nexport const H3 = (props: HeadingProps) => (\n <h3 css={(theme: Theme) => h3Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h4Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '11px',\n fontWeight: 300,\n marginBottom: '5px',\n marginTop: '20px',\n});\n\nexport const H4 = (props: HeadingProps) => (\n <h3 css={(theme: Theme) => h4Style(theme, props)} {...filterTextProps(props)} />\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Heading.js","names":["Heading","level","props","h1Style","theme","block","color","general","noWrap","textTransform","textStyle","fontSize","fontWeight","lineHeight","marginBottom","marginTop","minHeight","media","QueryKeys","MOBILE","H1","filterTextProps","h2Style","H2","h3Style","H3","h4Style","H4"],"sources":["Heading.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Theme} from '../Layout';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {TextProps, filterTextProps, textStyle} from './Text';\n\ninterface HeadingProps<T = HTMLHeadingElement> extends TextProps<T> {\n level?: string;\n}\n\nexport const Heading = ({level, ...props}: HeadingProps) => {\n switch (level) {\n case '2':\n return <H2 {...props} />;\n case '3':\n return <H3 {...props} />;\n case '4':\n return <H4 {...props} />;\n case '1':\n default:\n return <H1 {...props} />;\n }\n};\n\nexport const h1Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, level = '1', noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '48px',\n fontWeight: 300,\n lineHeight: '56px',\n marginBottom: '64px',\n marginTop: 0,\n minHeight: '48px',\n [media[QueryKeys.MOBILE]]: {\n fontSize: '40px',\n lineHeight: '48px',\n },\n});\n\nexport const H1 = (props: HeadingProps) => (\n <h1 css={(theme: Theme) => h1Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h2Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '20px',\n fontWeight: 700,\n lineHeight: '28px',\n marginBottom: '24px',\n marginTop: '32px',\n [media[QueryKeys.MOBILE]]: {\n fontSize: '18px',\n lineHeight: '26px',\n marginBottom: '20px',\n marginTop: '26px',\n },\n});\n\nexport const H2 = (props: HeadingProps) => (\n <h2 css={(theme: Theme) => h2Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h3Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '16px',\n fontWeight: 600,\n marginBottom: '16px',\n});\n\nexport const H3 = (props: HeadingProps) => (\n <h3 css={(theme: Theme) => h3Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h4Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '11px',\n fontWeight: 300,\n marginBottom: '5px',\n marginTop: '20px',\n});\n\nexport const H4 = (props: HeadingProps) => (\n <h3 css={(theme: Theme) => h4Style(theme, props)} {...filterTextProps(props)} />\n);\n"],"mappings":"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"}
|
package/src/Text/Label.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.LabelLink = exports.Label = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
7
|
var _react = require("@emotion/react");
|
|
12
8
|
var _Link = require("./Link");
|
|
13
9
|
var _Text = require("./Text");
|
|
14
10
|
var _Identity = require("../Identity");
|
|
15
11
|
var _excluded = ["markInvalid", "bold", "color", "fontSize"],
|
|
16
12
|
_excluded2 = ["fontSize"];
|
|
13
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
17
14
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (
|
|
15
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
16
|
+
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; }
|
|
17
|
+
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; }
|
|
18
|
+
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; }
|
|
19
19
|
var labelStyle = function labelStyle(theme, _ref) {
|
|
20
20
|
var markInvalid = _ref.markInvalid,
|
|
21
21
|
_ref$bold = _ref.bold,
|
|
@@ -24,7 +24,7 @@ var labelStyle = function labelStyle(theme, _ref) {
|
|
|
24
24
|
color = _ref$color === void 0 ? theme.general.color : _ref$color,
|
|
25
25
|
_ref$fontSize = _ref.fontSize,
|
|
26
26
|
fontSize = _ref$fontSize === void 0 ? '12px' : _ref$fontSize,
|
|
27
|
-
props = (
|
|
27
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
28
28
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
29
29
|
bold: bold,
|
|
30
30
|
color: color,
|
|
@@ -38,7 +38,7 @@ var labelStyle = function labelStyle(theme, _ref) {
|
|
|
38
38
|
});
|
|
39
39
|
};
|
|
40
40
|
var Label = function Label(props) {
|
|
41
|
-
return (0, _react.jsx)("label", (
|
|
41
|
+
return (0, _react.jsx)("label", _extends({
|
|
42
42
|
css: function css(theme) {
|
|
43
43
|
return labelStyle(theme, props);
|
|
44
44
|
}
|
|
@@ -48,13 +48,13 @@ exports.Label = Label;
|
|
|
48
48
|
var labelLinkStyle = function labelLinkStyle(theme, _ref2) {
|
|
49
49
|
var _ref2$fontSize = _ref2.fontSize,
|
|
50
50
|
fontSize = _ref2$fontSize === void 0 ? '12px' : _ref2$fontSize,
|
|
51
|
-
props = (
|
|
51
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
52
52
|
return _objectSpread({}, (0, _Link.linkStyle)(theme, _objectSpread({
|
|
53
53
|
fontSize: fontSize
|
|
54
54
|
}, props)));
|
|
55
55
|
};
|
|
56
56
|
var LabelLink = function LabelLink(props) {
|
|
57
|
-
return (0, _react.jsx)("a", (
|
|
57
|
+
return (0, _react.jsx)("a", _extends({
|
|
58
58
|
css: function css(theme) {
|
|
59
59
|
return labelLinkStyle(theme, props);
|
|
60
60
|
}
|
package/src/Text/Label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","names":["labelStyle","theme","markInvalid","bold","color","general","fontSize","props","textStyle","COLOR","BLUE","RED","width","Label","filterTextProps","labelLinkStyle","linkStyle","LabelLink"],"sources":["Label.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Theme} from '../Layout';\nimport {LinkProps, linkStyle} from './Link';\nimport {TextProps, filterTextProps, textStyle} from './Text';\nimport {COLOR} from '../Identity';\n\nexport interface LabelProps<T = HTMLSpanElement> extends TextProps<T> {\n markInvalid?: boolean;\n}\n\nconst labelStyle: <T>(theme: Theme, props: LabelProps<T>) => CSSObject = (\n theme,\n {markInvalid, bold = false, color = theme.general.color, fontSize = '12px', ...props},\n) => ({\n ...textStyle(theme, {bold, color, fontSize, ...props}),\n '&:focus-within': {\n color: COLOR.BLUE,\n },\n color: markInvalid ? COLOR.RED : 'initial',\n width: '100%',\n});\n\nexport const Label = (props: LabelProps) => (\n <label css={(theme: Theme) => labelStyle(theme, props)} {...filterTextProps(props)} />\n);\n\nexport type LabelLinkProps<T = HTMLAnchorElement> = LinkProps<T>;\n\nconst labelLinkStyle: <T>(theme, props: LabelLinkProps<T>) => CSSObject = (theme, {fontSize = '12px', ...props}) => ({\n ...linkStyle(theme, {fontSize, ...props}),\n});\n\nexport const LabelLink = (props: LabelProps<HTMLAnchorElement>) => (\n <a css={(theme: Theme) => labelLinkStyle(theme, props)} {...filterTextProps(props)} />\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Label.js","names":["labelStyle","theme","markInvalid","bold","color","general","fontSize","props","textStyle","COLOR","BLUE","RED","width","Label","filterTextProps","labelLinkStyle","linkStyle","LabelLink"],"sources":["Label.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Theme} from '../Layout';\nimport {LinkProps, linkStyle} from './Link';\nimport {TextProps, filterTextProps, textStyle} from './Text';\nimport {COLOR} from '../Identity';\n\nexport interface LabelProps<T = HTMLSpanElement> extends TextProps<T> {\n markInvalid?: boolean;\n}\n\nconst labelStyle: <T>(theme: Theme, props: LabelProps<T>) => CSSObject = (\n theme,\n {markInvalid, bold = false, color = theme.general.color, fontSize = '12px', ...props},\n) => ({\n ...textStyle(theme, {bold, color, fontSize, ...props}),\n '&:focus-within': {\n color: COLOR.BLUE,\n },\n color: markInvalid ? COLOR.RED : 'initial',\n width: '100%',\n});\n\nexport const Label = (props: LabelProps) => (\n <label css={(theme: Theme) => labelStyle(theme, props)} {...filterTextProps(props)} />\n);\n\nexport type LabelLinkProps<T = HTMLAnchorElement> = LinkProps<T>;\n\nconst labelLinkStyle: <T>(theme, props: LabelLinkProps<T>) => CSSObject = (theme, {fontSize = '12px', ...props}) => ({\n ...linkStyle(theme, {fontSize, ...props}),\n});\n\nexport const LabelLink = (props: LabelProps<HTMLAnchorElement>) => (\n <a css={(theme: Theme) => labelLinkStyle(theme, props)} {...filterTextProps(props)} />\n);\n"],"mappings":";;;;;;AAoBA;AAGA;AACA;AACA;AAAkC;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlC,IAAMA,UAAgE,GAAG,SAAnEA,UAAgE,CACpEC,KAAK;EAAA,IACJC,WAAW,QAAXA,WAAW;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAGH,KAAK,CAACI,OAAO,CAACD,KAAK;IAAA,qBAAEE,QAAQ;IAARA,QAAQ,8BAAG,MAAM;IAAKC,KAAK;EAAA,uCAEjF,IAAAC,eAAS,EAACP,KAAK;IAAGE,IAAI,EAAJA,IAAI;IAAEC,KAAK,EAALA,KAAK;IAAEE,QAAQ,EAARA;EAAQ,GAAKC,KAAK,EAAE;IACtD,gBAAgB,EAAE;MAChBH,KAAK,EAAEK,eAAK,CAACC;IACf,CAAC;IACDN,KAAK,EAAEF,WAAW,GAAGO,eAAK,CAACE,GAAG,GAAG,SAAS;IAC1CC,KAAK,EAAE;EAAM;AAAA,CACb;AAEK,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIN,KAAiB;EAAA,OACrC;IAAO,GAAG,EAAE,aAACN,KAAY;MAAA,OAAKD,UAAU,CAACC,KAAK,EAAEM,KAAK,CAAC;IAAA;EAAC,GAAK,IAAAO,qBAAe,EAACP,KAAK,CAAC,EAAI;AAAA,CACvF;AAAC;AAIF,IAAMQ,cAAiE,GAAG,SAApEA,cAAiE,CAAId,KAAK;EAAA,2BAAGK,QAAQ;IAARA,QAAQ,+BAAG,MAAM;IAAKC,KAAK;EAAA,yBACzG,IAAAS,eAAS,EAACf,KAAK;IAAGK,QAAQ,EAARA;EAAQ,GAAKC,KAAK,EAAE;AAAA,CACzC;AAEK,IAAMU,SAAS,GAAG,SAAZA,SAAS,CAAIV,KAAoC;EAAA,OAC5D;IAAG,GAAG,EAAE,aAACN,KAAY;MAAA,OAAKc,cAAc,CAACd,KAAK,EAAEM,KAAK,CAAC;IAAA;EAAC,GAAK,IAAAO,qBAAe,EAACP,KAAK,CAAC,EAAI;AAAA,CACvF;AAAC"}
|
package/src/Text/Line.js
CHANGED
|
@@ -1,36 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.lineStyle = exports.Line = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
7
|
var _react = require("@emotion/react");
|
|
10
8
|
var _react2 = _interopRequireDefault(require("react"));
|
|
11
9
|
var _Identity = require("../Identity");
|
|
12
10
|
var _sizes = require("../Layout/sizes");
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
* Copyright (C) 2018 Wire Swiss GmbH
|
|
16
|
-
*
|
|
17
|
-
* This program is free software: you can redistribute it and/or modify
|
|
18
|
-
* it under the terms of the GNU General Public License as published by
|
|
19
|
-
* the Free Software Foundation, either version 3 of the License, or
|
|
20
|
-
* (at your option) any later version.
|
|
21
|
-
*
|
|
22
|
-
* This program is distributed in the hope that it will be useful,
|
|
23
|
-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
24
|
-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
25
|
-
* GNU General Public License for more details.
|
|
26
|
-
*
|
|
27
|
-
* You should have received a copy of the GNU General Public License
|
|
28
|
-
* along with this program. If not, see http://www.gnu.org/licenses/.
|
|
29
|
-
*
|
|
30
|
-
*/
|
|
31
|
-
|
|
32
|
-
/** @jsx jsx */
|
|
33
|
-
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
34
13
|
var lineStyle = function lineStyle(_ref) {
|
|
35
14
|
var _ref$color = _ref.color,
|
|
36
15
|
color = _ref$color === void 0 ? _Identity.COLOR.GRAY_LIGHTEN_72 : _ref$color;
|
|
@@ -43,7 +22,7 @@ var lineStyle = function lineStyle(_ref) {
|
|
|
43
22
|
};
|
|
44
23
|
exports.lineStyle = lineStyle;
|
|
45
24
|
var Line = function Line(props) {
|
|
46
|
-
return (0, _react.jsx)("hr", (
|
|
25
|
+
return (0, _react.jsx)("hr", _extends({
|
|
47
26
|
css: lineStyle(props)
|
|
48
27
|
}, props));
|
|
49
28
|
};
|
package/src/Text/Line.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.js","names":["lineStyle","color","COLOR","GRAY_LIGHTEN_72","border","borderBottom","marginBottom","GUTTER","marginTop","Line","props"],"sources":["Line.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {GUTTER} from '../Layout/sizes';\n\nexport interface LineProps<T = HTMLHRElement> extends React.HTMLProps<T> {\n color?: string;\n}\n\nexport const lineStyle: <T>(props: LineProps<T>) => CSSObject = ({color = COLOR.GRAY_LIGHTEN_72}) => ({\n border: 'none',\n borderBottom: `1px solid ${color}`,\n marginBottom: `${GUTTER}px`,\n marginTop: `${GUTTER}px`,\n});\n\nexport const Line = (props: LineProps) => <hr css={lineStyle(props)} {...props} />;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Line.js","names":["lineStyle","color","COLOR","GRAY_LIGHTEN_72","border","borderBottom","marginBottom","GUTTER","marginTop","Line","props"],"sources":["Line.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {GUTTER} from '../Layout/sizes';\n\nexport interface LineProps<T = HTMLHRElement> extends React.HTMLProps<T> {\n color?: string;\n}\n\nexport const lineStyle: <T>(props: LineProps<T>) => CSSObject = ({color = COLOR.GRAY_LIGHTEN_72}) => ({\n border: 'none',\n borderBottom: `1px solid ${color}`,\n marginBottom: `${GUTTER}px`,\n marginTop: `${GUTTER}px`,\n});\n\nexport const Line = (props: LineProps) => <hr css={lineStyle(props)} {...props} />;\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AACA;AAAuC;AAAA;AAMhC,IAAMA,SAAgD,GAAG,SAAnDA,SAAgD;EAAA,sBAAKC,KAAK;IAALA,KAAK,2BAAGC,eAAK,CAACC,eAAe;EAAA,OAAO;IACpGC,MAAM,EAAE,MAAM;IACdC,YAAY,sBAAeJ,KAAK,CAAE;IAClCK,YAAY,YAAKC,aAAM,OAAI;IAC3BC,SAAS,YAAKD,aAAM;EACtB,CAAC;AAAA,CAAC;AAAC;AAEI,IAAME,IAAI,GAAG,SAAPA,IAAI,CAAIC,KAAgB;EAAA,OAAK;IAAI,GAAG,EAAEV,SAAS,CAACU,KAAK;EAAE,GAAKA,KAAK,EAAI;AAAA;AAAC"}
|
package/src/Text/Link.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.linkStyle = exports.filterLinkProps = exports.LinkVariant = exports.Link = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
7
|
var _react = require("@emotion/react");
|
|
12
8
|
var _motions = require("../Identity/motions");
|
|
13
9
|
var _util = require("../util");
|
|
14
10
|
var _Text = require("./Text");
|
|
15
11
|
var _excluded = ["bold", "fontSize", "textTransform", "variant", "color"],
|
|
16
12
|
_excluded2 = ["targetBlank"];
|
|
13
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
17
14
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (
|
|
15
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
16
|
+
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; }
|
|
17
|
+
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; }
|
|
18
|
+
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; }
|
|
19
19
|
var LinkVariant;
|
|
20
20
|
exports.LinkVariant = LinkVariant;
|
|
21
21
|
(function (LinkVariant) {
|
|
@@ -33,7 +33,7 @@ var linkStyle = function linkStyle(theme, _ref) {
|
|
|
33
33
|
variant = _ref$variant === void 0 ? LinkVariant.SECONDARY : _ref$variant,
|
|
34
34
|
_ref$color = _ref.color,
|
|
35
35
|
color = _ref$color === void 0 ? theme.general.color : _ref$color,
|
|
36
|
-
props = (
|
|
36
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
37
37
|
return _objectSpread(_objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
38
38
|
bold: bold,
|
|
39
39
|
color: color,
|
|
@@ -69,8 +69,8 @@ var filterLinkProps = function filterLinkProps(props) {
|
|
|
69
69
|
exports.filterLinkProps = filterLinkProps;
|
|
70
70
|
var Link = function Link(_ref2) {
|
|
71
71
|
var targetBlank = _ref2.targetBlank,
|
|
72
|
-
props = (
|
|
73
|
-
return (0, _react.jsx)("a", (
|
|
72
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
73
|
+
return (0, _react.jsx)("a", _extends({
|
|
74
74
|
css: function css(theme) {
|
|
75
75
|
return linkStyle(theme, props);
|
|
76
76
|
},
|
package/src/Text/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":["LinkVariant","linkStyle","theme","bold","fontSize","textTransform","variant","SECONDARY","color","general","props","textStyle","cursor","textDecoration","PRIMARY","primaryColor","fontWeight","textUnderlineOffset","transition","defaultTransition","filter","filterLinkProps","filterProps","filterTextProps","Link","targetBlank","children"],"sources":["Link.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {filterProps} from '../util';\nimport {TextProps, filterTextProps, textStyle} from './Text';\n\nexport enum LinkVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n}\n\nexport interface LinkProps<T = HTMLAnchorElement> extends TextProps<T> {\n variant?: LinkVariant;\n targetBlank?: Boolean;\n}\n\nexport const linkStyle: <T>(theme: Theme, props: LinkProps<T>) => CSSObject = (\n theme,\n {\n bold = true,\n fontSize = '11px',\n textTransform = 'uppercase',\n variant = LinkVariant.SECONDARY,\n color = theme.general.color,\n ...props\n },\n) => {\n return {\n ...textStyle(theme, {bold, color, fontSize, textTransform, ...props}),\n color: color,\n cursor: 'pointer',\n textDecoration: 'none',\n '&:visited, &:link, &:active': {\n color: color,\n },\n ...(variant === LinkVariant.PRIMARY && {\n '&:hover, &:visited:hover, &:focus-visible': {\n color: theme.general.primaryColor,\n },\n fontSize: '16px',\n fontWeight: 400,\n textTransform: 'none',\n textDecoration: 'underline',\n textUnderlineOffset: '2px',\n }),\n ...(variant === LinkVariant.SECONDARY && {\n transition: defaultTransition,\n '&:hover': {\n filter: 'brightness(70%)',\n },\n }),\n };\n};\n\nexport const filterLinkProps = (props: LinkProps) => filterProps(filterTextProps(props) as LinkProps, []);\n\nexport const Link = ({targetBlank, ...props}: LinkProps) => {\n return (\n <a\n css={(theme: Theme) => linkStyle(theme, props)}\n target={targetBlank && '_blank'}\n rel=\"noopener noreferrer\"\n {...filterLinkProps(props)}\n >\n {props.children}\n </a>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.js","names":["LinkVariant","linkStyle","theme","bold","fontSize","textTransform","variant","SECONDARY","color","general","props","textStyle","cursor","textDecoration","PRIMARY","primaryColor","fontWeight","textUnderlineOffset","transition","defaultTransition","filter","filterLinkProps","filterProps","filterTextProps","Link","targetBlank","children"],"sources":["Link.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {filterProps} from '../util';\nimport {TextProps, filterTextProps, textStyle} from './Text';\n\nexport enum LinkVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n}\n\nexport interface LinkProps<T = HTMLAnchorElement> extends TextProps<T> {\n variant?: LinkVariant;\n targetBlank?: Boolean;\n}\n\nexport const linkStyle: <T>(theme: Theme, props: LinkProps<T>) => CSSObject = (\n theme,\n {\n bold = true,\n fontSize = '11px',\n textTransform = 'uppercase',\n variant = LinkVariant.SECONDARY,\n color = theme.general.color,\n ...props\n },\n) => {\n return {\n ...textStyle(theme, {bold, color, fontSize, textTransform, ...props}),\n color: color,\n cursor: 'pointer',\n textDecoration: 'none',\n '&:visited, &:link, &:active': {\n color: color,\n },\n ...(variant === LinkVariant.PRIMARY && {\n '&:hover, &:visited:hover, &:focus-visible': {\n color: theme.general.primaryColor,\n },\n fontSize: '16px',\n fontWeight: 400,\n textTransform: 'none',\n textDecoration: 'underline',\n textUnderlineOffset: '2px',\n }),\n ...(variant === LinkVariant.SECONDARY && {\n transition: defaultTransition,\n '&:hover': {\n filter: 'brightness(70%)',\n },\n }),\n };\n};\n\nexport const filterLinkProps = (props: LinkProps) => filterProps(filterTextProps(props) as LinkProps, []);\n\nexport const Link = ({targetBlank, ...props}: LinkProps) => {\n return (\n <a\n css={(theme: Theme) => linkStyle(theme, props)}\n target={targetBlank && '_blank'}\n rel=\"noopener noreferrer\"\n {...filterLinkProps(props)}\n >\n {props.children}\n </a>\n );\n};\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AACA;AAA6D;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAEjDA,WAAW;AAAA;AAAA,WAAXA,WAAW;EAAXA,WAAW;EAAXA,WAAW;AAAA,GAAXA,WAAW,2BAAXA,WAAW;AAUhB,IAAMC,SAA8D,GAAG,SAAjEA,SAA8D,CACzEC,KAAK,QASF;EAAA,qBAPDC,IAAI;IAAJA,IAAI,0BAAG,IAAI;IAAA,qBACXC,QAAQ;IAARA,QAAQ,8BAAG,MAAM;IAAA,0BACjBC,aAAa;IAAbA,aAAa,mCAAG,WAAW;IAAA,oBAC3BC,OAAO;IAAPA,OAAO,6BAAGN,WAAW,CAACO,SAAS;IAAA,kBAC/BC,KAAK;IAALA,KAAK,2BAAGN,KAAK,CAACO,OAAO,CAACD,KAAK;IACxBE,KAAK;EAGV,qDACK,IAAAC,eAAS,EAACT,KAAK;IAAGC,IAAI,EAAJA,IAAI;IAAEK,KAAK,EAALA,KAAK;IAAEJ,QAAQ,EAARA,QAAQ;IAAEC,aAAa,EAAbA;EAAa,GAAKK,KAAK,EAAE;IACrEF,KAAK,EAAEA,KAAK;IACZI,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtB,6BAA6B,EAAE;MAC7BL,KAAK,EAAEA;IACT;EAAC,GACGF,OAAO,KAAKN,WAAW,CAACc,OAAO,IAAI;IACrC,2CAA2C,EAAE;MAC3CN,KAAK,EAAEN,KAAK,CAACO,OAAO,CAACM;IACvB,CAAC;IACDX,QAAQ,EAAE,MAAM;IAChBY,UAAU,EAAE,GAAG;IACfX,aAAa,EAAE,MAAM;IACrBQ,cAAc,EAAE,WAAW;IAC3BI,mBAAmB,EAAE;EACvB,CAAC,GACGX,OAAO,KAAKN,WAAW,CAACO,SAAS,IAAI;IACvCW,UAAU,EAAEC,0BAAiB;IAC7B,SAAS,EAAE;MACTC,MAAM,EAAE;IACV;EACF,CAAC;AAEL,CAAC;AAAC;AAEK,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIX,KAAgB;EAAA,OAAK,IAAAY,iBAAW,EAAC,IAAAC,qBAAe,EAACb,KAAK,CAAC,EAAe,EAAE,CAAC;AAAA;AAAC;AAEnG,IAAMc,IAAI,GAAG,SAAPA,IAAI,QAA2C;EAAA,IAAtCC,WAAW,SAAXA,WAAW;IAAKf,KAAK;EACzC,OACE;IACE,GAAG,EAAE,aAACR,KAAY;MAAA,OAAKD,SAAS,CAACC,KAAK,EAAEQ,KAAK,CAAC;IAAA,CAAC;IAC/C,MAAM,EAAEe,WAAW,IAAI,QAAS;IAChC,GAAG,EAAC;EAAqB,GACrBJ,eAAe,CAACX,KAAK,CAAC,GAEzBA,KAAK,CAACgB,QAAQ,CACb;AAER,CAAC;AAAC"}
|
package/src/Text/Paragraph.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.paragraphStyle = exports.leadStyle = exports.Paragraph = exports.Lead = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
7
|
var _react = require("@emotion/react");
|
|
12
8
|
var _mediaQueries = require("../mediaQueries");
|
|
13
9
|
var _Text = require("./Text");
|
|
14
10
|
var _excluded = ["block"],
|
|
15
11
|
_excluded2 = ["block", "center", "fontSize"];
|
|
12
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
16
13
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (
|
|
14
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
+
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; }
|
|
16
|
+
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; }
|
|
17
|
+
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; }
|
|
18
18
|
var paragraphStyle = function paragraphStyle(theme, _ref) {
|
|
19
19
|
var _ref$block = _ref.block,
|
|
20
20
|
block = _ref$block === void 0 ? true : _ref$block,
|
|
21
|
-
props = (
|
|
21
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
22
22
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
23
23
|
block: block
|
|
24
24
|
}, props))), {}, {
|
|
@@ -28,7 +28,7 @@ var paragraphStyle = function paragraphStyle(theme, _ref) {
|
|
|
28
28
|
};
|
|
29
29
|
exports.paragraphStyle = paragraphStyle;
|
|
30
30
|
var Paragraph = function Paragraph(props) {
|
|
31
|
-
return (0, _react.jsx)("p", (
|
|
31
|
+
return (0, _react.jsx)("p", _extends({
|
|
32
32
|
css: function css(theme) {
|
|
33
33
|
return paragraphStyle(theme, props);
|
|
34
34
|
}
|
|
@@ -42,12 +42,12 @@ var leadStyle = function leadStyle(theme, _ref2) {
|
|
|
42
42
|
center = _ref2$center === void 0 ? true : _ref2$center,
|
|
43
43
|
_ref2$fontSize = _ref2.fontSize,
|
|
44
44
|
fontSize = _ref2$fontSize === void 0 ? '24px' : _ref2$fontSize,
|
|
45
|
-
props = (
|
|
45
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
46
46
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
47
47
|
block: block,
|
|
48
48
|
center: center,
|
|
49
49
|
fontSize: fontSize
|
|
50
|
-
}, props))), {}, (
|
|
50
|
+
}, props))), {}, _defineProperty({
|
|
51
51
|
marginBottom: '56px',
|
|
52
52
|
marginTop: 0
|
|
53
53
|
}, _mediaQueries.media[_mediaQueries.QueryKeys.MOBILE], {
|
|
@@ -56,7 +56,7 @@ var leadStyle = function leadStyle(theme, _ref2) {
|
|
|
56
56
|
};
|
|
57
57
|
exports.leadStyle = leadStyle;
|
|
58
58
|
var Lead = function Lead(props) {
|
|
59
|
-
return (0, _react.jsx)("p", (
|
|
59
|
+
return (0, _react.jsx)("p", _extends({
|
|
60
60
|
css: function css(theme) {
|
|
61
61
|
return leadStyle(theme, props);
|
|
62
62
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paragraph.js","names":["paragraphStyle","theme","block","props","textStyle","marginBottom","marginTop","Paragraph","filterTextProps","leadStyle","center","fontSize","media","QueryKeys","MOBILE","Lead"],"sources":["Paragraph.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Theme} from '../Layout';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {TextProps, filterTextProps, textStyle} from './Text';\n\nexport type ParagraphProps<T = HTMLParagraphElement> = TextProps<T>;\n\nexport const paragraphStyle: <T>(theme: Theme, props: ParagraphProps<T>) => CSSObject = (\n theme,\n {block = true, ...props},\n) => ({\n ...textStyle(theme, {block, ...props}),\n marginBottom: '16px',\n marginTop: 0,\n});\n\nexport const Paragraph = (props: ParagraphProps) => (\n <p css={(theme: Theme) => paragraphStyle(theme, props)} {...filterTextProps(props)} />\n);\n\nexport type LeadProps<T = HTMLParagraphElement> = TextProps<T>;\n\nexport const leadStyle: <T>(theme: Theme, props: LeadProps<T>) => CSSObject = (\n theme,\n {block = true, center = true, fontSize = '24px', ...props},\n) => ({\n ...textStyle(theme, {block, center, fontSize, ...props}),\n marginBottom: '56px',\n marginTop: 0,\n [media[QueryKeys.MOBILE]]: {\n fontSize: '20px',\n },\n});\n\nexport const Lead = (props: LeadProps) => (\n <p css={(theme: Theme) => leadStyle(theme, props)} {...filterTextProps(props)} />\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Paragraph.js","names":["paragraphStyle","theme","block","props","textStyle","marginBottom","marginTop","Paragraph","filterTextProps","leadStyle","center","fontSize","media","QueryKeys","MOBILE","Lead"],"sources":["Paragraph.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Theme} from '../Layout';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {TextProps, filterTextProps, textStyle} from './Text';\n\nexport type ParagraphProps<T = HTMLParagraphElement> = TextProps<T>;\n\nexport const paragraphStyle: <T>(theme: Theme, props: ParagraphProps<T>) => CSSObject = (\n theme,\n {block = true, ...props},\n) => ({\n ...textStyle(theme, {block, ...props}),\n marginBottom: '16px',\n marginTop: 0,\n});\n\nexport const Paragraph = (props: ParagraphProps) => (\n <p css={(theme: Theme) => paragraphStyle(theme, props)} {...filterTextProps(props)} />\n);\n\nexport type LeadProps<T = HTMLParagraphElement> = TextProps<T>;\n\nexport const leadStyle: <T>(theme: Theme, props: LeadProps<T>) => CSSObject = (\n theme,\n {block = true, center = true, fontSize = '24px', ...props},\n) => ({\n ...textStyle(theme, {block, center, fontSize, ...props}),\n marginBottom: '56px',\n marginTop: 0,\n [media[QueryKeys.MOBILE]]: {\n fontSize: '20px',\n },\n});\n\nexport const Lead = (props: LeadProps) => (\n <p css={(theme: Theme) => leadStyle(theme, props)} {...filterTextProps(props)} />\n);\n"],"mappings":";;;;;;AAoBA;AAGA;AACA;AAA6D;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAItD,IAAMA,cAAwE,GAAG,SAA3EA,cAAwE,CACnFC,KAAK;EAAA,sBACJC,KAAK;IAALA,KAAK,2BAAG,IAAI;IAAKC,KAAK;EAAA,uCAEpB,IAAAC,eAAS,EAACH,KAAK;IAAGC,KAAK,EAALA;EAAK,GAAKC,KAAK,EAAE;IACtCE,YAAY,EAAE,MAAM;IACpBC,SAAS,EAAE;EAAC;AAAA,CACZ;AAAC;AAEI,IAAMC,SAAS,GAAG,SAAZA,SAAS,CAAIJ,KAAqB;EAAA,OAC7C;IAAG,GAAG,EAAE,aAACF,KAAY;MAAA,OAAKD,cAAc,CAACC,KAAK,EAAEE,KAAK,CAAC;IAAA;EAAC,GAAK,IAAAK,qBAAe,EAACL,KAAK,CAAC,EAAI;AAAA,CACvF;AAAC;AAIK,IAAMM,SAA8D,GAAG,SAAjEA,SAA8D,CACzER,KAAK;EAAA,wBACJC,KAAK;IAALA,KAAK,4BAAG,IAAI;IAAA,qBAAEQ,MAAM;IAANA,MAAM,6BAAG,IAAI;IAAA,uBAAEC,QAAQ;IAARA,QAAQ,+BAAG,MAAM;IAAKR,KAAK;EAAA,uCAEtD,IAAAC,eAAS,EAACH,KAAK;IAAGC,KAAK,EAALA,KAAK;IAAEQ,MAAM,EAANA,MAAM;IAAEC,QAAQ,EAARA;EAAQ,GAAKR,KAAK,EAAE;IACxDE,YAAY,EAAE,MAAM;IACpBC,SAAS,EAAE;EAAC,GACXM,mBAAK,CAACC,uBAAS,CAACC,MAAM,CAAC,EAAG;IACzBH,QAAQ,EAAE;EACZ,CAAC;AAAA,CACD;AAAC;AAEI,IAAMI,IAAI,GAAG,SAAPA,IAAI,CAAIZ,KAAgB;EAAA,OACnC;IAAG,GAAG,EAAE,aAACF,KAAY;MAAA,OAAKQ,SAAS,CAACR,KAAK,EAAEE,KAAK,CAAC;IAAA;EAAC,GAAK,IAAAK,qBAAe,EAACL,KAAK,CAAC,EAAI;AAAA,CAClF;AAAC"}
|