@longline/aqua-ui 1.0.283 → 1.0.285
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.
|
@@ -54,7 +54,7 @@ var PrimaryButtonStyled = styled(PrimaryButtonBase).attrs(function (p) {
|
|
|
54
54
|
outlineColor: (p.positive || p.negative) ? p.theme.colors.primary[1]
|
|
55
55
|
: p.theme.colors.accent
|
|
56
56
|
};
|
|
57
|
-
})(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n // Size:\n height: 46px; // was 56\n padding-left: 12px; // was 16\n padding-right: 12px; // was 16\n min-width: 90px;\n \n // Font:\n font: ", ";\n color: ", ";\n\n // Presentation:\n background-color: ", ";\n transition: \n background-color ease-in-out ", "ms, \n box-shadow ease-in-out ", "ms;\n border-radius: ", "px;\n border: none;\n cursor: pointer;\n user-select: none;\n outline: none;\n\n // Content:\n display: flex;\n align-items: center;\n white-space: nowrap;\n flex-wrap: nowrap; \n justify-content: center; \n gap:
|
|
57
|
+
})(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n // Size:\n height: 46px; // was 56\n padding-left: 12px; // was 16\n padding-right: 12px; // was 16\n min-width: 90px;\n \n // Font:\n font: ", ";\n color: ", ";\n\n // Presentation:\n background-color: ", ";\n transition: \n background-color ease-in-out ", "ms, \n box-shadow ease-in-out ", "ms;\n border-radius: ", "px;\n border: none;\n cursor: pointer;\n user-select: none;\n outline: none;\n\n // Content:\n display: flex;\n align-items: center;\n white-space: nowrap;\n flex-wrap: nowrap; \n justify-content: center; \n gap: 6px;\n\n box-shadow: ", ";\n &:hover {\n background-color: ", ";\n box-shadow: ", ";\n }\n &:active {\n background-color: ", ";\n box-shadow: none;\n }\n &:focus {\n outline: solid 2px ", ";\n }\n \n svg {\n width: 24px;\n height: 24px; \n }\n\n ", "\n"], [" \n // Size:\n height: 46px; // was 56\n padding-left: 12px; // was 16\n padding-right: 12px; // was 16\n min-width: 90px;\n \n // Font:\n font: ", ";\n color: ", ";\n\n // Presentation:\n background-color: ", ";\n transition: \n background-color ease-in-out ", "ms, \n box-shadow ease-in-out ", "ms;\n border-radius: ", "px;\n border: none;\n cursor: pointer;\n user-select: none;\n outline: none;\n\n // Content:\n display: flex;\n align-items: center;\n white-space: nowrap;\n flex-wrap: nowrap; \n justify-content: center; \n gap: 6px;\n\n box-shadow: ", ";\n &:hover {\n background-color: ", ";\n box-shadow: ", ";\n }\n &:active {\n background-color: ", ";\n box-shadow: none;\n }\n &:focus {\n outline: solid 2px ", ";\n }\n \n svg {\n width: 24px;\n height: 24px; \n }\n\n ", "\n"
|
|
58
58
|
/**
|
|
59
59
|
* Primary buttons denote the primary action. They may have icons or not and
|
|
60
60
|
* have three colors: `positive`, `negative`, and themed (the default).
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { IIconProps } from '../Icon';
|
|
2
3
|
interface ITertiaryButtonProps {
|
|
3
4
|
/** @ignore */
|
|
4
5
|
className?: string;
|
|
@@ -19,6 +20,16 @@ interface ITertiaryButtonProps {
|
|
|
19
20
|
* @default false
|
|
20
21
|
*/
|
|
21
22
|
primary?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Optional minimum button width. This is a CSS value, e.g. "100px".
|
|
25
|
+
* @default "92px"
|
|
26
|
+
*/
|
|
27
|
+
minWidth?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Path to an SVG symbol, e.g. `/aquaui-sprites.svg#close`. The `SVG` enumeration
|
|
30
|
+
* exists that offers preset paths. This may also be a full `IIconProps`.
|
|
31
|
+
*/
|
|
32
|
+
icon?: string | IIconProps;
|
|
22
33
|
}
|
|
23
34
|
/**
|
|
24
35
|
* The `TertiaryButton` is connected to a specific area or component such as
|
|
@@ -31,7 +42,7 @@ interface ITertiaryButtonProps {
|
|
|
31
42
|
* could force one in).
|
|
32
43
|
*/
|
|
33
44
|
declare const TertiaryButton: {
|
|
34
|
-
({ disabled, ...props }: ITertiaryButtonProps): React.JSX.Element;
|
|
45
|
+
({ disabled, minWidth, ...props }: ITertiaryButtonProps): React.JSX.Element;
|
|
35
46
|
displayName: string;
|
|
36
47
|
};
|
|
37
48
|
export { TertiaryButton, ITertiaryButtonProps };
|
|
@@ -25,11 +25,25 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
25
25
|
return t;
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
|
-
import styled, { css } from 'styled-components';
|
|
28
|
+
import styled, { css, useTheme } from 'styled-components';
|
|
29
|
+
import { Icon } from '../Icon';
|
|
29
30
|
var TertiaryButtonBase = function (props) {
|
|
30
|
-
|
|
31
|
+
var theme = useTheme();
|
|
32
|
+
var icon = function () {
|
|
33
|
+
// No icon?
|
|
34
|
+
if (!props.icon)
|
|
35
|
+
return null;
|
|
36
|
+
// If a string was provided, use it as the URL for the icon.
|
|
37
|
+
if (typeof props.icon === "string")
|
|
38
|
+
return React.createElement(Icon, { color: props.primary ? theme.colors.neutral[100] : theme.colors.primary[3], url: props.icon });
|
|
39
|
+
// An IIconProps was provided. Use it as the props for the icon.
|
|
40
|
+
return React.createElement(Icon, __assign({ color: props.primary ? theme.colors.neutral[100] : theme.colors.primary[3] }, props.icon));
|
|
41
|
+
};
|
|
42
|
+
return (React.createElement("button", { className: props.className, type: "button", disabled: props.disabled, onClick: props.onClick },
|
|
43
|
+
icon(),
|
|
44
|
+
props.children));
|
|
31
45
|
};
|
|
32
|
-
var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n // Size:\n height: 42px;\n min-width:
|
|
46
|
+
var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n // Size:\n height: 42px;\n min-width: ", ";\n padding-left: 16px;\n padding-right: 16px;\n\n // Font\n font: ", ";\n color: ", ";\n\n // Presentation:\n background-color: ", ";\n border-radius: ", "px;\n transition: \n background-color ease-in-out ", "ms, \n box-shadow ease-in-out ", "ms;\n border: none;\n cursor: pointer;\n text-transform: uppercase;\n user-select: none;\n outline: none;\n\n // Content alignment:\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n flex-wrap: nowrap;\n white-space: nowrap;\n gap: 6px;\n \n // Shadow:\n box-shadow: ", ";\n &:hover {\n box-shadow: ", ";\n }\n &:active {\n ", " \n }\n\n // Disabled:\n ", "\n"], [" \n // Size:\n height: 42px;\n min-width: ", ";\n padding-left: 16px;\n padding-right: 16px;\n\n // Font\n font: ", ";\n color: ", ";\n\n // Presentation:\n background-color: ", ";\n border-radius: ", "px;\n transition: \n background-color ease-in-out ", "ms, \n box-shadow ease-in-out ", "ms;\n border: none;\n cursor: pointer;\n text-transform: uppercase;\n user-select: none;\n outline: none;\n\n // Content alignment:\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n flex-wrap: nowrap;\n white-space: nowrap;\n gap: 6px;\n \n // Shadow:\n box-shadow: ", ";\n &:hover {\n box-shadow: ", ";\n }\n &:active {\n ", " \n }\n\n // Disabled:\n ", "\n"
|
|
33
47
|
/**
|
|
34
48
|
* The `TertiaryButton` is connected to a specific area or component such as
|
|
35
49
|
* an `InfoBox`. It renders as a `<button>` element.
|
|
@@ -40,7 +54,7 @@ var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templ
|
|
|
40
54
|
* There is no support for icons (although the React children of the component
|
|
41
55
|
* could force one in).
|
|
42
56
|
*/
|
|
43
|
-
])), function (p) { return p.theme.font.labelSmall; }, function (p) { return p.primary ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.primary ? p.theme.colors.primary[1] : p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.shadows.large; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: none;\n "], ["\n background-color: ", ";\n box-shadow: none;\n "])), p.primary ? p.theme.colors.primary[2] : p.theme.colors.neutral[95]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "], ["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "])), p.theme.colors.neutral[50]); });
|
|
57
|
+
])), function (p) { return p.minWidth ? p.minWidth : "92px"; }, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.primary ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.primary ? p.theme.colors.primary[1] : p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.shadows.large; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: none;\n "], ["\n background-color: ", ";\n box-shadow: none;\n "])), p.primary ? p.theme.colors.primary[2] : p.theme.colors.neutral[95]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "], ["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "])), p.theme.colors.neutral[50]); });
|
|
44
58
|
/**
|
|
45
59
|
* The `TertiaryButton` is connected to a specific area or component such as
|
|
46
60
|
* an `InfoBox`. It renders as a `<button>` element.
|
|
@@ -52,8 +66,8 @@ var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templ
|
|
|
52
66
|
* could force one in).
|
|
53
67
|
*/
|
|
54
68
|
var TertiaryButton = function (_a) {
|
|
55
|
-
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["disabled"]);
|
|
56
|
-
return React.createElement(TertiaryButtonStyled, __assign({ disabled: disabled }, props));
|
|
69
|
+
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.minWidth, minWidth = _c === void 0 ? "92px" : _c, props = __rest(_a, ["disabled", "minWidth"]);
|
|
70
|
+
return React.createElement(TertiaryButtonStyled, __assign({ disabled: disabled, minWidth: minWidth }, props));
|
|
57
71
|
};
|
|
58
72
|
TertiaryButton.displayName = "TertiaryButton";
|
|
59
73
|
export { TertiaryButton };
|
package/package.json
CHANGED
package/services/Toast/Toast.js
CHANGED
|
@@ -46,6 +46,8 @@ var ToastBase = function (props) {
|
|
|
46
46
|
return function () { return toggle(false); };
|
|
47
47
|
}, []);
|
|
48
48
|
React.useEffect(function () {
|
|
49
|
+
if (props.duration === 0)
|
|
50
|
+
return undefined;
|
|
49
51
|
// Set a timeout on the toast, saving the
|
|
50
52
|
// timer handle for later cleanup.
|
|
51
53
|
timerHandle.current = window.setTimeout(function () {
|
|
@@ -72,7 +74,7 @@ var ToastBase = function (props) {
|
|
|
72
74
|
var Message = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex: 1;\n padding-left: 16px;\n padding-right: 16px;\n"], ["\n display: flex;\n align-items: center;\n flex: 1;\n padding-left: 16px;\n padding-right: 16px;\n"])));
|
|
73
75
|
var CloseButton = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n cursor: pointer;\n\n svg {\n fill: ", ";\n width: 20px;\n height: 20px;\n } \n &:hover {\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n cursor: pointer;\n\n svg {\n fill: ", ";\n width: 20px;\n height: 20px;\n } \n &:hover {\n svg {\n fill: ", ";\n }\n }\n"])), function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.theme.colors.neutral[100]; });
|
|
74
76
|
var Action = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-left: 8px;\n color: ", ";\n cursor: pointer;\n white-space: nowrap;\n font: ", ";\n text-transform: uppercase;\n transition: color ease-in-out ", "ms;\n &:hover {\n color: ", ";\n }\n &:last-child {\n padding-right: 16px;\n }\n"], ["\n display: flex;\n align-items: center;\n padding-left: 8px;\n color: ", ";\n cursor: pointer;\n white-space: nowrap;\n font: ", ";\n text-transform: uppercase;\n transition: color ease-in-out ", "ms;\n &:hover {\n color: ", ";\n }\n &:last-child {\n padding-right: 16px;\n }\n"])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.font.labelCaps; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.primary[2]; });
|
|
75
|
-
var ToastStyled = styled(ToastBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // Position and size:\n display: flex;\n width: 344px;\n box-sizing: border-box;\n align-items: stretch;\n justify-content: space-between;\n user-select: none;\n pointer-events: all;\n\n // Space between toasts:\n margin: 8px 0 8px 0; \n\n // Appearance:\n padding: 14px 0 14px 0;\n background-color: ", ";\n color: #fff;\n border-radius: ", "px;\n font: ", ";\n\n /* useTransitionState classes */\n transition: opacity ", "ms ease;\n &.preEnter, &.exiting, &.unmounted {\n opacity: 0;\n }\n &.entering {\n opacity: 1;\n }\n &.entered {\n opacity: 1;\n }\n\n"], ["\n // Position and size:\n display: flex;\n width: 344px;\n box-sizing: border-box;\n align-items: stretch;\n justify-content: space-between;\n user-select: none;\n pointer-events: all;\n\n // Space between toasts:\n margin: 8px 0 8px 0; \n\n // Appearance:\n padding: 14px 0 14px 0;\n background-color: ", ";\n color: #fff;\n border-radius: ", "px;\n font: ", ";\n\n /* useTransitionState classes */\n transition: opacity ", "ms ease;\n &.preEnter, &.exiting, &.unmounted {\n opacity: 0;\n }\n &.entering {\n opacity: 1;\n }\n &.entered {\n opacity: 1;\n }\n\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.animation.duration * 2; });
|
|
77
|
+
var ToastStyled = styled(ToastBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // Position and size:\n display: flex;\n width: 344px;\n box-sizing: border-box;\n align-items: stretch;\n justify-content: space-between;\n user-select: none;\n pointer-events: all;\n\n // Space between toasts:\n margin: 8px 0 8px 0; \n\n // Appearance:\n padding: 14px 0 14px 0;\n background-color: ", ";\n color: #fff;\n border-radius: ", "px;\n font: ", ";\n\n // Content:\n a {\n color: ", " !important;\n }\n\n /* useTransitionState classes */\n transition: opacity ", "ms ease;\n &.preEnter, &.exiting, &.unmounted {\n opacity: 0;\n }\n &.entering {\n opacity: 1;\n }\n &.entered {\n opacity: 1;\n }\n\n"], ["\n // Position and size:\n display: flex;\n width: 344px;\n box-sizing: border-box;\n align-items: stretch;\n justify-content: space-between;\n user-select: none;\n pointer-events: all;\n\n // Space between toasts:\n margin: 8px 0 8px 0; \n\n // Appearance:\n padding: 14px 0 14px 0;\n background-color: ", ";\n color: #fff;\n border-radius: ", "px;\n font: ", ";\n\n // Content:\n a {\n color: ", " !important;\n }\n\n /* useTransitionState classes */\n transition: opacity ", "ms ease;\n &.preEnter, &.exiting, &.unmounted {\n opacity: 0;\n }\n &.entering {\n opacity: 1;\n }\n &.entered {\n opacity: 1;\n }\n\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.animation.duration * 2; });
|
|
76
78
|
/**
|
|
77
79
|
* A `Toast` is generated through the `ToastProvider.toast` method.
|
|
78
80
|
*
|