glints-aries 4.0.167 → 4.0.169
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/es/@next/Badge/Badge.d.ts +9 -0
- package/es/@next/Badge/Badge.js +21 -0
- package/es/@next/Badge/Badge.stories.d.ts +4 -0
- package/es/@next/Badge/Badge.stories.js +19 -0
- package/es/@next/Badge/BadgeStyle.d.ts +2 -0
- package/es/@next/Badge/BadgeStyle.js +22 -0
- package/es/@next/Badge/index.d.ts +1 -0
- package/es/@next/Badge/index.js +1 -0
- package/es/@next/Button/Button.d.ts +5 -1
- package/es/@next/Button/Button.js +23 -5
- package/es/@next/Button/Button.stories.d.ts +1 -0
- package/es/@next/Button/Button.stories.js +23 -0
- package/es/@next/Button/ButtonStyle.d.ts +1 -4
- package/es/@next/Button/ButtonStyle.js +9 -22
- package/es/@next/Button/DesctructiveButtonStyle.d.ts +1 -1
- package/es/@next/Button/DesctructiveButtonStyle.js +1 -1
- package/es/@next/Button/OutlineButtonStyle.d.ts +1 -1
- package/es/@next/Button/OutlineMonochromeStyle.d.ts +1 -2
- package/es/@next/Button/OutlineMonochromeStyle.js +2 -5
- package/es/@next/Button/PrimaryButtonStyle.d.ts +1 -1
- package/es/@next/Button/PrimaryButtonStyle.js +1 -1
- package/es/@next/ButtonGroup/ButtonGroup.stories.js +3 -1
- package/es/@next/ButtonGroup/ButtonGroupStyle.js +3 -3
- package/es/@next/Checkbox/Checkbox.d.ts +1 -1
- package/es/@next/Checkbox/Checkbox.js +2 -2
- package/es/@next/Icon/IconStoriesStyles.js +1 -1
- package/es/@next/Icon/components/RiFacebook.d.ts +3 -0
- package/es/@next/Icon/components/RiFacebook.js +11 -0
- package/es/@next/Icon/components/RiLoader.d.ts +3 -0
- package/es/@next/Icon/components/RiLoader.js +12 -0
- package/es/@next/Icon/components/RiLocation.d.ts +3 -0
- package/es/@next/Icon/components/RiLocation.js +11 -0
- package/es/@next/Icon/components/RiTwitter.d.ts +3 -0
- package/es/@next/Icon/components/RiTwitter.js +11 -0
- package/es/@next/Icon/components/index.d.ts +4 -0
- package/es/@next/Icon/components/index.js +5 -1
- package/es/@next/Icon/icons/icons.d.ts +1 -1
- package/es/@next/Icon/icons/icons.js +2 -2
- package/es/@next/Spinner/Spinner.d.ts +3 -0
- package/es/@next/Spinner/Spinner.js +15 -0
- package/es/@next/index.d.ts +4 -3
- package/es/@next/index.js +4 -3
- package/lib/@next/Badge/Badge.d.ts +9 -0
- package/lib/@next/Badge/Badge.js +27 -0
- package/lib/@next/Badge/Badge.stories.d.ts +4 -0
- package/lib/@next/Badge/Badge.stories.js +26 -0
- package/lib/@next/Badge/BadgeStyle.d.ts +2 -0
- package/lib/@next/Badge/BadgeStyle.js +28 -0
- package/lib/@next/Badge/index.d.ts +1 -0
- package/lib/@next/Badge/index.js +9 -0
- package/lib/@next/Button/Button.d.ts +5 -1
- package/lib/@next/Button/Button.js +22 -4
- package/lib/@next/Button/Button.stories.d.ts +1 -0
- package/lib/@next/Button/Button.stories.js +25 -1
- package/lib/@next/Button/ButtonStyle.d.ts +1 -4
- package/lib/@next/Button/ButtonStyle.js +11 -24
- package/lib/@next/Button/DesctructiveButtonStyle.d.ts +1 -1
- package/lib/@next/Button/DesctructiveButtonStyle.js +1 -1
- package/lib/@next/Button/OutlineButtonStyle.d.ts +1 -1
- package/lib/@next/Button/OutlineMonochromeStyle.d.ts +1 -2
- package/lib/@next/Button/OutlineMonochromeStyle.js +2 -5
- package/lib/@next/Button/PrimaryButtonStyle.d.ts +1 -1
- package/lib/@next/Button/PrimaryButtonStyle.js +1 -1
- package/lib/@next/ButtonGroup/ButtonGroup.stories.js +3 -1
- package/lib/@next/ButtonGroup/ButtonGroupStyle.js +3 -3
- package/lib/@next/Checkbox/Checkbox.d.ts +1 -1
- package/lib/@next/Checkbox/Checkbox.js +2 -2
- package/lib/@next/Icon/IconStoriesStyles.js +1 -1
- package/lib/@next/Icon/components/RiFacebook.d.ts +3 -0
- package/lib/@next/Icon/components/RiFacebook.js +19 -0
- package/lib/@next/Icon/components/RiLoader.d.ts +3 -0
- package/lib/@next/Icon/components/RiLoader.js +20 -0
- package/lib/@next/Icon/components/RiLocation.d.ts +3 -0
- package/lib/@next/Icon/components/RiLocation.js +19 -0
- package/lib/@next/Icon/components/RiTwitter.d.ts +3 -0
- package/lib/@next/Icon/components/RiTwitter.js +19 -0
- package/lib/@next/Icon/components/index.d.ts +4 -0
- package/lib/@next/Icon/components/index.js +10 -2
- package/lib/@next/Icon/icons/icons.d.ts +1 -1
- package/lib/@next/Icon/icons/icons.js +2 -2
- package/lib/@next/Spinner/Spinner.d.ts +3 -0
- package/lib/@next/Spinner/Spinner.js +21 -0
- package/lib/@next/index.d.ts +4 -3
- package/lib/@next/index.js +9 -7
- package/package.json +1 -1
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare const badgeStatusVariant: readonly ["neutral", "success", "informational", "warning", "critical", "promotion", "new"];
|
|
3
|
+
export declare type BadgeStatusVariant = typeof badgeStatusVariant[number];
|
|
4
|
+
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
status?: BadgeStatusVariant;
|
|
7
|
+
}
|
|
8
|
+
export declare const Badge: ({ children, status, ...props }: BadgeProps) => JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
+
var _excluded = ["children", "status"];
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { Typography } from '../Typography';
|
|
6
|
+
import { Neutral } from '../utilities/colors';
|
|
7
|
+
import { BadgeStyle } from './BadgeStyle';
|
|
8
|
+
var badgeStatusVariant = ['neutral', 'success', 'informational', 'warning', 'critical', 'promotion', 'new'];
|
|
9
|
+
export var Badge = function Badge(_ref) {
|
|
10
|
+
var children = _ref.children,
|
|
11
|
+
status = _ref.status,
|
|
12
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
13
|
+
var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
|
|
14
|
+
variant: "overline",
|
|
15
|
+
color: status === 'new' ? Neutral.B100 : Neutral.B18,
|
|
16
|
+
as: 'span'
|
|
17
|
+
}, children) : children;
|
|
18
|
+
return /*#__PURE__*/React.createElement(BadgeStyle, _extends({
|
|
19
|
+
status: status ? status : 'neutral'
|
|
20
|
+
}, props), /*#__PURE__*/React.createElement("div", null, content));
|
|
21
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
|
|
3
|
+
import { Badge } from './Badge';
|
|
4
|
+
Badge.displayName = 'Badge';
|
|
5
|
+
var defaultText = 'Badge';
|
|
6
|
+
export default {
|
|
7
|
+
title: '@next/Badge',
|
|
8
|
+
component: Badge,
|
|
9
|
+
decorators: [function (Story) {
|
|
10
|
+
return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
|
|
11
|
+
}]
|
|
12
|
+
};
|
|
13
|
+
var Template = function Template(args) {
|
|
14
|
+
return /*#__PURE__*/React.createElement(Badge, args, defaultText);
|
|
15
|
+
};
|
|
16
|
+
export var Interactive = Template.bind({});
|
|
17
|
+
Interactive.args = {
|
|
18
|
+
status: null
|
|
19
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
var _badgeBackgroundColor;
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { borderRadius20 } from '../utilities/borderRadius';
|
|
4
|
+
import { Blue, Green, Neutral, Orange, Red, Yellow } from '../utilities/colors';
|
|
5
|
+
import { space8 } from '../utilities/spacing';
|
|
6
|
+
var badgeBackgroundColor = (_badgeBackgroundColor = {}, _badgeBackgroundColor['neutral'] = Neutral.B95, _badgeBackgroundColor['success'] = Green.B89, _badgeBackgroundColor['informational'] = Blue.S08, _badgeBackgroundColor['warning'] = Orange.S42, _badgeBackgroundColor['critical'] = Red.B100, _badgeBackgroundColor['promotion'] = Yellow.S75, _badgeBackgroundColor['new'] = Orange.S87, _badgeBackgroundColor);
|
|
7
|
+
var getBadgeBackgroundColor = function getBadgeBackgroundColor(status) {
|
|
8
|
+
if (!(status in badgeBackgroundColor)) {
|
|
9
|
+
console.warn(status + " is not a valid status, default will be used");
|
|
10
|
+
return badgeBackgroundColor['neutral'];
|
|
11
|
+
}
|
|
12
|
+
return badgeBackgroundColor[status];
|
|
13
|
+
};
|
|
14
|
+
export var BadgeStyle = styled.div.withConfig({
|
|
15
|
+
displayName: "BadgeStyle",
|
|
16
|
+
componentId: "sc-1aofb4c-0"
|
|
17
|
+
})(["", "}width:fit-content;padding:2px ", ";border-radius:", ";"], function (_ref) {
|
|
18
|
+
var status = _ref.status;
|
|
19
|
+
return {
|
|
20
|
+
'background-color': getBadgeBackgroundColor(status)
|
|
21
|
+
};
|
|
22
|
+
}, space8, borderRadius20);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Badge';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Badge';
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare type ButtonSize = 'default' | 'slim' | 'large';
|
|
3
|
+
export declare type IconPosition = 'left' | 'right';
|
|
3
4
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
5
|
size?: ButtonSize;
|
|
5
6
|
children?: React.ReactNode;
|
|
7
|
+
/** Indicate if the button is currently selected */
|
|
6
8
|
active?: boolean;
|
|
7
9
|
fullWidth?: boolean;
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
iconPosition?: IconPosition;
|
|
8
12
|
loading?: boolean;
|
|
9
13
|
}
|
|
10
|
-
export declare const Button: ({ children, ...otherProps }: ButtonProps) => JSX.Element;
|
|
14
|
+
export declare const Button: ({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: ButtonProps) => JSX.Element;
|
|
@@ -1,18 +1,36 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["children"];
|
|
3
|
+
var _excluded = ["children", "icon", "iconPosition", "active", "fullWidth", "loading"];
|
|
4
4
|
import React from 'react';
|
|
5
|
+
import { Spinner } from '../Spinner/Spinner';
|
|
5
6
|
import { Typography } from '../Typography';
|
|
6
|
-
import {
|
|
7
|
+
import { StyledButton } from './ButtonStyle';
|
|
7
8
|
export var Button = function Button(_ref) {
|
|
8
9
|
var children = _ref.children,
|
|
10
|
+
icon = _ref.icon,
|
|
11
|
+
_ref$iconPosition = _ref.iconPosition,
|
|
12
|
+
iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
|
|
13
|
+
active = _ref.active,
|
|
14
|
+
fullWidth = _ref.fullWidth,
|
|
15
|
+
loading = _ref.loading,
|
|
9
16
|
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
10
17
|
var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
|
|
11
|
-
variant: "
|
|
18
|
+
variant: "button"
|
|
12
19
|
}, " ", children) : children;
|
|
13
|
-
|
|
20
|
+
var renderIcon = function renderIcon(position) {
|
|
21
|
+
if (icon && position === iconPosition) {
|
|
22
|
+
return icon;
|
|
23
|
+
}
|
|
24
|
+
return null;
|
|
25
|
+
};
|
|
26
|
+
return /*#__PURE__*/React.createElement(StyledButton, _extends({
|
|
27
|
+
"data-active": active,
|
|
28
|
+
"data-full-width": fullWidth,
|
|
29
|
+
"data-loading": loading,
|
|
30
|
+
"data-icon": !!icon
|
|
31
|
+
}, otherProps, {
|
|
14
32
|
onMouseUp: function onMouseUp(e) {
|
|
15
33
|
return e.currentTarget.blur();
|
|
16
34
|
}
|
|
17
|
-
}), content);
|
|
35
|
+
}), loading && /*#__PURE__*/React.createElement(Spinner, null), renderIcon('left'), content, renderIcon('right'));
|
|
18
36
|
};
|
|
@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Button } from './Button';
|
|
4
4
|
import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
|
|
5
|
+
import { Icon } from '../Icon';
|
|
6
|
+
import { PrimaryButton } from './PrimaryButtonStyle';
|
|
5
7
|
Button.displayName = 'Button';
|
|
6
8
|
var defaultText = 'Label';
|
|
7
9
|
export default {
|
|
@@ -25,4 +27,25 @@ export var Interactive = Template.bind({});
|
|
|
25
27
|
Interactive.args = {
|
|
26
28
|
size: 'default',
|
|
27
29
|
disabled: false
|
|
30
|
+
};
|
|
31
|
+
var WithIconsTemplate = function WithIconsTemplate(args) {
|
|
32
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
style: {
|
|
34
|
+
display: 'flex',
|
|
35
|
+
gap: '10px'
|
|
36
|
+
}
|
|
37
|
+
}, /*#__PURE__*/React.createElement(Button, _extends({}, args, {
|
|
38
|
+
type: "button"
|
|
39
|
+
}), defaultText), /*#__PURE__*/React.createElement(PrimaryButton, _extends({}, args, {
|
|
40
|
+
type: "button"
|
|
41
|
+
}), defaultText));
|
|
42
|
+
};
|
|
43
|
+
export var WithIcon = WithIconsTemplate.bind({});
|
|
44
|
+
WithIcon.args = {
|
|
45
|
+
size: 'default',
|
|
46
|
+
icon: /*#__PURE__*/React.createElement(Icon, {
|
|
47
|
+
name: "ri-arrow-up-down-fill"
|
|
48
|
+
}),
|
|
49
|
+
iconPosition: 'left',
|
|
50
|
+
disabled: false
|
|
28
51
|
};
|
|
@@ -1,5 +1,2 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
1
|
import { ButtonProps } from './Button';
|
|
3
|
-
export declare const
|
|
4
|
-
style: CSSProperties;
|
|
5
|
-
} & ButtonProps, "style">;
|
|
2
|
+
export declare const StyledButton: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
|
|
@@ -1,39 +1,26 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
1
|
import styled from 'styled-components';
|
|
3
2
|
import * as Breakpoints from '../utilities/breakpoints';
|
|
4
3
|
import { borderRadius4 } from '../utilities/borderRadius';
|
|
5
4
|
import { Neutral } from '../utilities/colors';
|
|
6
5
|
import { button, buttonFocused, insetButtonPressed } from '../utilities/dropShadow';
|
|
7
6
|
import { space12, space16, space24, space4, space8 } from '../utilities/spacing';
|
|
8
|
-
var defaultButtonSizeStyle = "\n width: 75px;\n height: 36px;\n padding: " + space8 + " " + space16 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n width: 71px;\n }\n";
|
|
9
|
-
var largeButtonSizeStyle = "\
|
|
10
|
-
var slimButtonSizeStyle = "\
|
|
7
|
+
var defaultButtonSizeStyle = "\n min-width: 75px;\n height: 36px;\n padding: " + space8 + " " + space16 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 71px;\n }\n";
|
|
8
|
+
var largeButtonSizeStyle = "\nmin-width: 91px;\n height: 44px;\n padding: " + space12 + " " + space24 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 87px;\n }\n";
|
|
9
|
+
var slimButtonSizeStyle = "\nmin-width: 67px;\n height: 32px;\n padding: " + space4 + " " + space12 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 63px;\n }\n";
|
|
11
10
|
var buttonSizeStyleMap = {
|
|
12
11
|
"default": defaultButtonSizeStyle,
|
|
13
12
|
slim: slimButtonSizeStyle,
|
|
14
13
|
large: largeButtonSizeStyle
|
|
15
14
|
};
|
|
16
|
-
export var
|
|
17
|
-
|
|
18
|
-
fullWidth = _ref.fullWidth;
|
|
19
|
-
var activeStyle = {
|
|
20
|
-
color: "" + Neutral.B100,
|
|
21
|
-
background: "" + Neutral.B40
|
|
22
|
-
};
|
|
23
|
-
var widthStyle = {
|
|
24
|
-
width: '100%'
|
|
25
|
-
};
|
|
26
|
-
return {
|
|
27
|
-
style: _extends({}, active && activeStyle, fullWidth && widthStyle)
|
|
28
|
-
};
|
|
29
|
-
}).withConfig({
|
|
30
|
-
displayName: "ButtonStyle__BasicButton",
|
|
15
|
+
export var StyledButton = styled.button.withConfig({
|
|
16
|
+
displayName: "ButtonStyle__StyledButton",
|
|
31
17
|
componentId: "sc-8t0676-0"
|
|
32
|
-
})(["display:flex;gap:
|
|
33
|
-
var size =
|
|
18
|
+
})(["display:flex;gap:8px;border-width:1px;border-style:solid;border-radius:", ";flex-direction:row;align-items:center;justify-content:center;flex:none;order:0;flex-grow:0;color:", ";background:", ";border-color:", ";box-shadow:", ";&:hover{cursor:pointer;background:", ";}&:focus{outline:none;border-color:", ";box-shadow:", ";}&:active{background:", ";border:1px solid ", ";box-shadow:", ";}&:active > svg{fill:", ";}&:disabled{color:", ";background:", ";}&:disabled svg{fill:", ";}", " svg{width:16px;height:16px;fill:", ";}.spinner-container{position:absolute;}&[data-active='true']{color:", ";background:", ";}&[data-full-width='true']{width:100%;}&[data-icon='true']{gap:4px;}&[data-active='true'] svg{fill:", ";}&[data-loading='true']{background:", ";color:transparent;}&[data-loading='true'] svg{fill:transparent;}&[data-loading='true'] .spinner-container svg{fill:", ";}"], borderRadius4, Neutral.B18, Neutral.B100, Neutral.B68, button, Neutral.B99, Neutral.B68, buttonFocused, Neutral.B95, Neutral.B68, insetButtonPressed, Neutral.B40, Neutral.B68, Neutral.B95, Neutral.B85, function (_ref) {
|
|
19
|
+
var _ref$size = _ref.size,
|
|
20
|
+
size = _ref$size === void 0 ? 'default' : _ref$size;
|
|
34
21
|
var sizeStyle = buttonSizeStyleMap[size];
|
|
35
22
|
if (size && !sizeStyle) {
|
|
36
23
|
console.warn(size + " is not a valid ButtonSize, default will be used");
|
|
37
24
|
}
|
|
38
25
|
return buttonSizeStyleMap[size] || defaultButtonSizeStyle;
|
|
39
|
-
});
|
|
26
|
+
}, Neutral.B40, Neutral.B100, Neutral.B40, Neutral.B100, Neutral.B99, Neutral.B85);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const DestructiveButton: import("styled-components").StyledComponent<({ children, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
|
|
2
|
+
export declare const DestructiveButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
|
|
@@ -5,4 +5,4 @@ import { Button } from './Button';
|
|
|
5
5
|
export var DestructiveButton = styled(Button).withConfig({
|
|
6
6
|
displayName: "DesctructiveButtonStyle__DestructiveButton",
|
|
7
7
|
componentId: "sc-1erj0cn-0"
|
|
8
|
-
})(["color:", ";background:", ";border:none;&:hover{background:", ";box-shadow:0px 1px 0px rgba(0,0,0,0.08),inset 0px -1px 0px rgba(0,0,0,0.2);}&:focus{box-shadow:0px 0px 0px 2px rgba(69,143,255,1);}&:active{background:", ";box-shadow:", ";}"], Neutral.B100, Red.B93, Red.B74, Red.B65, insetButtonPressed);
|
|
8
|
+
})(["color:", ";background:", ";border:none;&:hover{background:", ";box-shadow:0px 1px 0px rgba(0,0,0,0.08),inset 0px -1px 0px rgba(0,0,0,0.2);}&:focus{box-shadow:0px 0px 0px 2px rgba(69,143,255,1);}&:active{background:", ";box-shadow:", ";}&[data-loading='true']{background:", ";}"], Neutral.B100, Red.B93, Red.B74, Red.B65, insetButtonPressed, Neutral.B95);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const OutlineButton: import("styled-components").StyledComponent<({ children, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
|
|
2
|
+
export declare const OutlineButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
|
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import
|
|
3
|
-
export declare const OutlineMonochromeButton: import("styled-components").StyledComponent<({ children, ...otherProps }: ButtonProps) => JSX.Element, any, {}, never>;
|
|
2
|
+
export declare const OutlineMonochromeButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
import { Red } from '../utilities/colors';
|
|
3
|
-
import {
|
|
3
|
+
import { Neutral } from '../utilities/colors/';
|
|
4
4
|
import { button } from '../utilities/dropShadow';
|
|
5
5
|
import { Button } from './Button';
|
|
6
6
|
export var OutlineMonochromeButton = styled(Button).withConfig({
|
|
7
7
|
displayName: "OutlineMonochromeStyle__OutlineMonochromeButton",
|
|
8
8
|
componentId: "sc-2c3b7a-0"
|
|
9
|
-
})(["
|
|
10
|
-
var active = _ref.active;
|
|
11
|
-
return active ? "&[style] {\n color: " + B100 + " !important;\n background: " + Red.B93 + " !important;\n }" : "";
|
|
12
|
-
}, Red.B93, Red.B93, button, Red.B100, button, Red.B100, Red.B93);
|
|
9
|
+
})(["color:", ";border:1px solid ", ";filter:drop-shadow(", ");&:hover{background:", ";opacity:0.9;box-shadow:", ";}&:active{background:", ";opacity:1;border:1px solid ", ";}&[data-active='true']{color:", ";background:", ";}"], Red.B93, Red.B93, button, Red.B100, button, Red.B100, Red.B93, Neutral.B100, Red.B93);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const PrimaryButton: import("styled-components").StyledComponent<({ children, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
|
|
2
|
+
export declare const PrimaryButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
|
|
@@ -4,4 +4,4 @@ import { Button } from './Button';
|
|
|
4
4
|
export var PrimaryButton = styled(Button).withConfig({
|
|
5
5
|
displayName: "PrimaryButtonStyle__PrimaryButton",
|
|
6
6
|
componentId: "sc-1iczr6c-0"
|
|
7
|
-
})(["color:", ";background:", ";border:none;&:hover{background:", ";opacity:0.9;box-shadow:0px 1px 0px rgba(0,0,0,0.08),inset 0px -1px 0px rgba(0,0,0,0.2);}&:active{background:", ";opacity:1;}"], Neutral.B100, Blue.S99, Blue.S100, Blue.S100);
|
|
7
|
+
})(["color:", ";background:", ";border:none;&:hover{background:", ";opacity:0.9;box-shadow:0px 1px 0px rgba(0,0,0,0.08),inset 0px -1px 0px rgba(0,0,0,0.2);}&:active{background:", ";opacity:1;}&[data-loading='true']{background:", ";}svg{fill:", ";}"], Neutral.B100, Blue.S99, Blue.S100, Blue.S100, Neutral.B95, Neutral.B100);
|
|
@@ -18,7 +18,9 @@ export default {
|
|
|
18
18
|
};
|
|
19
19
|
var Template = function Template(args) {
|
|
20
20
|
var segmented = args.segmented;
|
|
21
|
-
var children = segmented ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton,
|
|
21
|
+
var children = segmented ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, {
|
|
22
|
+
active: true
|
|
23
|
+
}, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, null, "Label"), /*#__PURE__*/React.createElement(PrimaryButton, null, "Label"));
|
|
22
24
|
return /*#__PURE__*/React.createElement(ButtonGroup, args, children);
|
|
23
25
|
};
|
|
24
26
|
export var Interactive = Template.bind({});
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
import { borderRadius4 } from '../utilities/borderRadius';
|
|
3
|
-
import {
|
|
3
|
+
import { Neutral } from '../utilities/colors';
|
|
4
4
|
import { space8 } from '../utilities/spacing';
|
|
5
5
|
export var ButtonGroup = styled.div.withConfig({
|
|
6
6
|
displayName: "ButtonGroupStyle__ButtonGroup",
|
|
7
7
|
componentId: "sc-7vhxrt-0"
|
|
8
|
-
})(["display:flex;flex-direction:row;align-items:center;padding:0px
|
|
8
|
+
})(["display:flex;flex-direction:row;align-items:center;padding:0px;", " ", ""], function (_ref) {
|
|
9
9
|
var segmented = _ref.segmented;
|
|
10
|
-
return segmented ? "> button {\n border-radius: 0;\n border-right: 0;\n \n :nth-child(1) {\n border-radius: " + borderRadius4 + " 0px 0px " + borderRadius4 + "; \n }\n\n :nth-last-child(1) {\n border-radius: 0px " + borderRadius4 + " " + borderRadius4 + " 0px;\n border-right: 1px solid " + B68 + "\n }\n }" : "gap: " + space8 + ";";
|
|
10
|
+
return segmented ? "> button {\n border-radius: 0;\n border-right: 0;\n \n :nth-child(1) {\n border-radius: " + borderRadius4 + " 0px 0px " + borderRadius4 + "; \n }\n\n :nth-last-child(1) {\n border-radius: 0px " + borderRadius4 + " " + borderRadius4 + " 0px;\n border-right: 1px solid " + Neutral.B68 + "\n }\n }\n > button:focus {\n z-index: 1;\n border: 1px solid " + Neutral.B68 + "\n }\n\n button[data-active='true'] {\n border: 1px solid " + Neutral.B40 + "\n }\n " : "gap: " + space8 + ";";
|
|
11
11
|
}, function (_ref2) {
|
|
12
12
|
var fullWidth = _ref2.fullWidth;
|
|
13
13
|
return fullWidth ? "> button {\n flex: 1;\n }" : "";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export interface CheckboxProps extends Omit<React.
|
|
2
|
+
export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> {
|
|
3
3
|
id?: string;
|
|
4
4
|
label?: string;
|
|
5
5
|
hasError?: boolean;
|
|
@@ -33,12 +33,12 @@ export var Checkbox = function Checkbox(_ref) {
|
|
|
33
33
|
setCheckedState(value);
|
|
34
34
|
}, [checked, indeterminate]);
|
|
35
35
|
var handleClick = function handleClick() {
|
|
36
|
-
if (!
|
|
36
|
+
if (!inputNode.current || disabled) {
|
|
37
37
|
return;
|
|
38
38
|
}
|
|
39
39
|
var checkedValue = !checkedState;
|
|
40
40
|
setCheckedState(checkedValue);
|
|
41
|
-
onChange(checkedValue, checkBoxId);
|
|
41
|
+
onChange == null ? void 0 : onChange(checkedValue, checkBoxId);
|
|
42
42
|
};
|
|
43
43
|
return /*#__PURE__*/React.createElement(StyledContainer, {
|
|
44
44
|
"aria-disabled": disabled,
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
var SvgRiFacebook = function SvgRiFacebook(props) {
|
|
4
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
7
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
8
|
+
d: "M13 19.938A8.001 8.001 0 0 0 12 4a8 8 0 0 0-1 15.938V14H9v-2h2v-1.654c0-1.337.14-1.822.4-2.311.256-.484.652-.88 1.136-1.135.382-.205.857-.328 1.687-.381.329-.021.755.005 1.278.08v1.9H15c-.917 0-1.296.043-1.522.164a.727.727 0 0 0-.314.314c-.12.226-.164.45-.164 1.368V12h2.5l-.5 2h-2v5.938ZM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Z"
|
|
9
|
+
}));
|
|
10
|
+
};
|
|
11
|
+
export default SvgRiFacebook;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
var SvgRiLoader = function SvgRiLoader(props) {
|
|
4
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
5
|
+
viewBox: "0 0 18 18",
|
|
6
|
+
fill: "none",
|
|
7
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
8
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
9
|
+
d: "M15.364 2.636 13.95 4.05A7 7 0 1 0 16 9h2a9 9 0 1 1-2.636-6.364Z"
|
|
10
|
+
}));
|
|
11
|
+
};
|
|
12
|
+
export default SvgRiLoader;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
var SvgRiLocation = function SvgRiLocation(props) {
|
|
4
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
7
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
8
|
+
d: "m12 23.728-6.364-6.364a9 9 0 1 1 12.728 0L12 23.728Zm4.95-7.778a7 7 0 1 0-9.9 0L12 20.9l4.95-4.95ZM12 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"
|
|
9
|
+
}));
|
|
10
|
+
};
|
|
11
|
+
export default SvgRiLocation;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
var SvgRiTwitter = function SvgRiTwitter(props) {
|
|
4
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
7
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
8
|
+
d: "M15.3 5.55a2.9 2.9 0 0 0-2.9 2.847l-.028 1.575a.599.599 0 0 1-.68.583l-1.561-.212c-2.054-.28-4.022-1.226-5.91-2.799-.598 3.31.57 5.603 3.383 7.372l1.747 1.098a.6.6 0 0 1 .034.993L7.793 18.17c.947.06 1.846.017 2.592-.13 4.718-.943 7.855-4.493 7.855-10.349 0-.478-1.012-2.14-2.94-2.14Zm-4.9 2.81a4.9 4.9 0 0 1 8.385-3.355c.711-.005 1.316.175 2.669-.645-.335 1.64-.5 2.352-1.214 3.331 0 7.642-4.697 11.358-9.463 12.31-3.268.651-8.02-.42-9.382-1.842.694-.054 3.514-.357 5.144-1.55C5.16 15.7-.329 12.47 3.278 3.786c1.693 1.977 3.41 3.323 5.15 4.037 1.158.475 1.442.465 1.973.538H10.4Z"
|
|
9
|
+
}));
|
|
10
|
+
};
|
|
11
|
+
export default SvgRiTwitter;
|
|
@@ -45,8 +45,11 @@ export { default as RiDeleteBinFill } from './RiDeleteBinFill';
|
|
|
45
45
|
export { default as RiDeleteBinLine } from './RiDeleteBinLine';
|
|
46
46
|
export { default as RiErrorWarningFill } from './RiErrorWarningFill';
|
|
47
47
|
export { default as RiErrorWarningLine } from './RiErrorWarningLine';
|
|
48
|
+
export { default as RiFacebook } from './RiFacebook';
|
|
48
49
|
export { default as RiInformationFill } from './RiInformationFill';
|
|
49
50
|
export { default as RiInformationLine } from './RiInformationLine';
|
|
51
|
+
export { default as RiLoader } from './RiLoader';
|
|
52
|
+
export { default as RiLocation } from './RiLocation';
|
|
50
53
|
export { default as RiMessageFill } from './RiMessageFill';
|
|
51
54
|
export { default as RiMessageLine } from './RiMessageLine';
|
|
52
55
|
export { default as RiPencilFill } from './RiPencilFill';
|
|
@@ -60,3 +63,4 @@ export { default as RiSendPlaneFill } from './RiSendPlaneFill';
|
|
|
60
63
|
export { default as RiSendPlaneLine } from './RiSendPlaneLine';
|
|
61
64
|
export { default as RiSettingsFill } from './RiSettingsFill';
|
|
62
65
|
export { default as RiSettingsLine } from './RiSettingsLine';
|
|
66
|
+
export { default as RiTwitter } from './RiTwitter';
|
|
@@ -45,8 +45,11 @@ export { default as RiDeleteBinFill } from './RiDeleteBinFill';
|
|
|
45
45
|
export { default as RiDeleteBinLine } from './RiDeleteBinLine';
|
|
46
46
|
export { default as RiErrorWarningFill } from './RiErrorWarningFill';
|
|
47
47
|
export { default as RiErrorWarningLine } from './RiErrorWarningLine';
|
|
48
|
+
export { default as RiFacebook } from './RiFacebook';
|
|
48
49
|
export { default as RiInformationFill } from './RiInformationFill';
|
|
49
50
|
export { default as RiInformationLine } from './RiInformationLine';
|
|
51
|
+
export { default as RiLoader } from './RiLoader';
|
|
52
|
+
export { default as RiLocation } from './RiLocation';
|
|
50
53
|
export { default as RiMessageFill } from './RiMessageFill';
|
|
51
54
|
export { default as RiMessageLine } from './RiMessageLine';
|
|
52
55
|
export { default as RiPencilFill } from './RiPencilFill';
|
|
@@ -59,4 +62,5 @@ export { default as RiSearch } from './RiSearch';
|
|
|
59
62
|
export { default as RiSendPlaneFill } from './RiSendPlaneFill';
|
|
60
63
|
export { default as RiSendPlaneLine } from './RiSendPlaneLine';
|
|
61
64
|
export { default as RiSettingsFill } from './RiSettingsFill';
|
|
62
|
-
export { default as RiSettingsLine } from './RiSettingsLine';
|
|
65
|
+
export { default as RiSettingsLine } from './RiSettingsLine';
|
|
66
|
+
export { default as RiTwitter } from './RiTwitter';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SVGProps } from 'react';
|
|
2
|
-
export declare const iconNames: readonly ["ri-account-circle-fill", "ri-account-circle-line", "ri-add-circle-fill", "ri-add-circle-line", "ri-add", "ri-alarm-warning-fill", "ri-alarm-warning-line", "ri-arrow-down-fill", "ri-arrow-down-line", "ri-arrow-go-back-fill", "ri-arrow-go-back-line", "ri-arrow-go-forward-fill", "ri-arrow-go-forward-line", "ri-arrow-left-fill", "ri-arrow-left-line", "ri-arrow-left-right-fill", "ri-arrow-left-right-line", "ri-arrow-m-down-fill", "ri-arrow-m-down-line", "ri-arrow-m-left-fill", "ri-arrow-m-left-line", "ri-arrow-m-right-fill", "ri-arrow-m-right-line", "ri-arrow-m-up-fill", "ri-arrow-m-up-line", "ri-arrow-right-fill", "ri-arrow-right-line", "ri-arrow-up-down-fill", "ri-arrow-up-down-line", "ri-arrow-up-fill", "ri-arrow-up-line", "ri-arrow-xs-down-fill", "ri-arrow-xs-up-fill", "ri-calendar-fill", "ri-calendar-line", "ri-check", "ri-close-circle-fill", "ri-close-circle-line", "ri-close", "ri-delete-bin-fill", "ri-delete-bin-line", "ri-error-warning-fill", "ri-error-warning-line", "ri-information-fill", "ri-information-line", "ri-
|
|
2
|
+
export declare const iconNames: readonly ["ri-account-circle-fill", "ri-account-circle-line", "ri-add-circle-fill", "ri-add-circle-line", "ri-add", "ri-alarm-warning-fill", "ri-alarm-warning-line", "ri-arrow-down-fill", "ri-arrow-down-line", "ri-arrow-go-back-fill", "ri-arrow-go-back-line", "ri-arrow-go-forward-fill", "ri-arrow-go-forward-line", "ri-arrow-left-fill", "ri-arrow-left-line", "ri-arrow-left-right-fill", "ri-arrow-left-right-line", "ri-arrow-m-down-fill", "ri-arrow-m-down-line", "ri-arrow-m-left-fill", "ri-arrow-m-left-line", "ri-arrow-m-right-fill", "ri-arrow-m-right-line", "ri-arrow-m-up-fill", "ri-arrow-m-up-line", "ri-arrow-right-fill", "ri-arrow-right-line", "ri-arrow-up-down-fill", "ri-arrow-up-down-line", "ri-arrow-up-fill", "ri-arrow-up-line", "ri-arrow-xs-down-fill", "ri-arrow-xs-up-fill", "ri-calendar-fill", "ri-calendar-line", "ri-check", "ri-checkbox-fill", "ri-checkbox-indeterminate-fill", "ri-checkbox-indeterminate-line", "ri-checkbox-line", "ri-close-circle-fill", "ri-close-circle-line", "ri-close", "ri-delete-bin-fill", "ri-delete-bin-line", "ri-error-warning-fill", "ri-error-warning-line", "ri-facebook", "ri-information-fill", "ri-information-line", "ri-loader", "ri-location", "ri-message-fill", "ri-message-line", "ri-pencil-fill", "ri-pencil-line", "ri-question-fill", "ri-question-line", "ri-reply-fill", "ri-reply-line", "ri-search", "ri-send-plane-fill", "ri-send-plane-line", "ri-settings-fill", "ri-settings-line", "ri-twitter"];
|
|
3
3
|
export declare type IconNames = typeof iconNames[number];
|
|
4
4
|
declare type SVGComponent = (props: SVGProps<SVGSVGElement>) => JSX.Element;
|
|
5
5
|
export declare const iconsMappingComponent: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
var _iconsMappingComponen;
|
|
2
2
|
import * as Icons from '../components';
|
|
3
|
-
export var iconNames = ['ri-account-circle-fill', 'ri-account-circle-line', 'ri-add-circle-fill', 'ri-add-circle-line', 'ri-add', 'ri-alarm-warning-fill', 'ri-alarm-warning-line', 'ri-arrow-down-fill', 'ri-arrow-down-line', 'ri-arrow-go-back-fill', 'ri-arrow-go-back-line', 'ri-arrow-go-forward-fill', 'ri-arrow-go-forward-line', 'ri-arrow-left-fill', 'ri-arrow-left-line', 'ri-arrow-left-right-fill', 'ri-arrow-left-right-line', 'ri-arrow-m-down-fill', 'ri-arrow-m-down-line', 'ri-arrow-m-left-fill', 'ri-arrow-m-left-line', 'ri-arrow-m-right-fill', 'ri-arrow-m-right-line', 'ri-arrow-m-up-fill', 'ri-arrow-m-up-line', 'ri-arrow-right-fill', 'ri-arrow-right-line', 'ri-arrow-up-down-fill', 'ri-arrow-up-down-line', 'ri-arrow-up-fill', 'ri-arrow-up-line', 'ri-arrow-xs-down-fill', 'ri-arrow-xs-up-fill', 'ri-calendar-fill', 'ri-calendar-line', 'ri-check', 'ri-close-circle-fill', 'ri-close-circle-line', 'ri-close', 'ri-delete-bin-fill', 'ri-delete-bin-line', 'ri-error-warning-fill', 'ri-error-warning-line', 'ri-information-fill', 'ri-information-line', 'ri-
|
|
4
|
-
export var iconsMappingComponent = (_iconsMappingComponen = {}, _iconsMappingComponen['ri-account-circle-fill'] = Icons.RiAccountCircleFill, _iconsMappingComponen['ri-account-circle-line'] = Icons.RiAccountCircleLine, _iconsMappingComponen['ri-add'] = Icons.
|
|
3
|
+
export var iconNames = ['ri-account-circle-fill', 'ri-account-circle-line', 'ri-add-circle-fill', 'ri-add-circle-line', 'ri-add', 'ri-alarm-warning-fill', 'ri-alarm-warning-line', 'ri-arrow-down-fill', 'ri-arrow-down-line', 'ri-arrow-go-back-fill', 'ri-arrow-go-back-line', 'ri-arrow-go-forward-fill', 'ri-arrow-go-forward-line', 'ri-arrow-left-fill', 'ri-arrow-left-line', 'ri-arrow-left-right-fill', 'ri-arrow-left-right-line', 'ri-arrow-m-down-fill', 'ri-arrow-m-down-line', 'ri-arrow-m-left-fill', 'ri-arrow-m-left-line', 'ri-arrow-m-right-fill', 'ri-arrow-m-right-line', 'ri-arrow-m-up-fill', 'ri-arrow-m-up-line', 'ri-arrow-right-fill', 'ri-arrow-right-line', 'ri-arrow-up-down-fill', 'ri-arrow-up-down-line', 'ri-arrow-up-fill', 'ri-arrow-up-line', 'ri-arrow-xs-down-fill', 'ri-arrow-xs-up-fill', 'ri-calendar-fill', 'ri-calendar-line', 'ri-check', 'ri-checkbox-fill', 'ri-checkbox-indeterminate-fill', 'ri-checkbox-indeterminate-line', 'ri-checkbox-line', 'ri-close-circle-fill', 'ri-close-circle-line', 'ri-close', 'ri-delete-bin-fill', 'ri-delete-bin-line', 'ri-error-warning-fill', 'ri-error-warning-line', 'ri-facebook', 'ri-information-fill', 'ri-information-line', 'ri-loader', 'ri-location', 'ri-message-fill', 'ri-message-line', 'ri-pencil-fill', 'ri-pencil-line', 'ri-question-fill', 'ri-question-line', 'ri-reply-fill', 'ri-reply-line', 'ri-search', 'ri-send-plane-fill', 'ri-send-plane-line', 'ri-settings-fill', 'ri-settings-line', 'ri-twitter'];
|
|
4
|
+
export var iconsMappingComponent = (_iconsMappingComponen = {}, _iconsMappingComponen['ri-account-circle-fill'] = Icons.RiAccountCircleFill, _iconsMappingComponen['ri-account-circle-line'] = Icons.RiAccountCircleLine, _iconsMappingComponen['ri-add-circle-fill'] = Icons.RiAddCircleFill, _iconsMappingComponen['ri-add-circle-line'] = Icons.RiAddCircleLine, _iconsMappingComponen['ri-add'] = Icons.RiAdd, _iconsMappingComponen['ri-alarm-warning-fill'] = Icons.RiAlarmWarningFill, _iconsMappingComponen['ri-alarm-warning-line'] = Icons.RiAlarmWarningLine, _iconsMappingComponen['ri-arrow-down-fill'] = Icons.RiArrowDownFill, _iconsMappingComponen['ri-arrow-down-line'] = Icons.RiArrowDownLine, _iconsMappingComponen['ri-arrow-go-back-fill'] = Icons.RiArrowGoBackFill, _iconsMappingComponen['ri-arrow-go-back-line'] = Icons.RiArrowGoBackLine, _iconsMappingComponen['ri-arrow-go-forward-fill'] = Icons.RiArrowGoForwardFill, _iconsMappingComponen['ri-arrow-go-forward-line'] = Icons.RiArrowGoForwardLine, _iconsMappingComponen['ri-arrow-left-fill'] = Icons.RiArrowLeftFill, _iconsMappingComponen['ri-arrow-left-line'] = Icons.RiArrowLeftLine, _iconsMappingComponen['ri-arrow-left-right-fill'] = Icons.RiArrowLeftRightFill, _iconsMappingComponen['ri-arrow-left-right-line'] = Icons.RiArrowLeftRightLine, _iconsMappingComponen['ri-arrow-m-down-fill'] = Icons.RiArrowMDownFill, _iconsMappingComponen['ri-arrow-m-down-line'] = Icons.RiArrowMDownLine, _iconsMappingComponen['ri-arrow-m-left-fill'] = Icons.RiArrowMLeftFill, _iconsMappingComponen['ri-arrow-m-left-line'] = Icons.RiArrowMLeftLine, _iconsMappingComponen['ri-arrow-m-right-fill'] = Icons.RiArrowMRightFill, _iconsMappingComponen['ri-arrow-m-right-line'] = Icons.RiArrowMRightLine, _iconsMappingComponen['ri-arrow-m-up-fill'] = Icons.RiArrowMUpFill, _iconsMappingComponen['ri-arrow-m-up-line'] = Icons.RiArrowMUpLine, _iconsMappingComponen['ri-arrow-right-fill'] = Icons.RiArrowRightFill, _iconsMappingComponen['ri-arrow-right-line'] = Icons.RiArrowRightLine, _iconsMappingComponen['ri-arrow-up-down-fill'] = Icons.RiArrowUpDownFill, _iconsMappingComponen['ri-arrow-up-down-line'] = Icons.RiArrowUpDownLine, _iconsMappingComponen['ri-arrow-up-fill'] = Icons.RiArrowUpFill, _iconsMappingComponen['ri-arrow-up-line'] = Icons.RiArrowUpLine, _iconsMappingComponen['ri-arrow-xs-down-fill'] = Icons.RiArrowXsDownFill, _iconsMappingComponen['ri-arrow-xs-up-fill'] = Icons.RiArrowXsUpFill, _iconsMappingComponen['ri-calendar-fill'] = Icons.RiCalendarFill, _iconsMappingComponen['ri-calendar-line'] = Icons.RiCalendarLine, _iconsMappingComponen['ri-check'] = Icons.RiCheck, _iconsMappingComponen['ri-checkbox-fill'] = Icons.RiCheckboxFill, _iconsMappingComponen['ri-checkbox-indeterminate-fill'] = Icons.RiCheckboxIndeterminateFill, _iconsMappingComponen['ri-checkbox-indeterminate-line'] = Icons.RiCheckboxIndeterminateLine, _iconsMappingComponen['ri-checkbox-line'] = Icons.RiCheckboxLine, _iconsMappingComponen['ri-close-circle-fill'] = Icons.RiCloseCircleFill, _iconsMappingComponen['ri-close-circle-line'] = Icons.RiCloseCircleLine, _iconsMappingComponen['ri-close'] = Icons.RiClose, _iconsMappingComponen['ri-delete-bin-fill'] = Icons.RiDeleteBinFill, _iconsMappingComponen['ri-delete-bin-line'] = Icons.RiDeleteBinLine, _iconsMappingComponen['ri-error-warning-fill'] = Icons.RiErrorWarningFill, _iconsMappingComponen['ri-error-warning-line'] = Icons.RiErrorWarningLine, _iconsMappingComponen['ri-facebook'] = Icons.RiFacebook, _iconsMappingComponen['ri-information-fill'] = Icons.RiInformationFill, _iconsMappingComponen['ri-information-line'] = Icons.RiInformationLine, _iconsMappingComponen['ri-loader'] = Icons.RiLoader, _iconsMappingComponen['ri-location'] = Icons.RiLocation, _iconsMappingComponen['ri-message-fill'] = Icons.RiMessageFill, _iconsMappingComponen['ri-message-line'] = Icons.RiMessageLine, _iconsMappingComponen['ri-pencil-fill'] = Icons.RiPencilFill, _iconsMappingComponen['ri-pencil-line'] = Icons.RiPencilLine, _iconsMappingComponen['ri-question-fill'] = Icons.RiQuestionFill, _iconsMappingComponen['ri-question-line'] = Icons.RiQuestionLine, _iconsMappingComponen['ri-reply-fill'] = Icons.RiReplyFill, _iconsMappingComponen['ri-reply-line'] = Icons.RiReplyLine, _iconsMappingComponen['ri-search'] = Icons.RiSearch, _iconsMappingComponen['ri-send-plane-fill'] = Icons.RiSendPlaneFill, _iconsMappingComponen['ri-send-plane-line'] = Icons.RiSendPlaneLine, _iconsMappingComponen['ri-settings-fill'] = Icons.RiSettingsFill, _iconsMappingComponen['ri-settings-line'] = Icons.RiSettingsLine, _iconsMappingComponen['ri-twitter'] = Icons.RiTwitter, _iconsMappingComponen);
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
import { Icon } from '../Icon';
|
|
5
|
+
var StyledWrapper = styled.div.withConfig({
|
|
6
|
+
displayName: "Spinner__StyledWrapper",
|
|
7
|
+
componentId: "sc-ynwr5u-0"
|
|
8
|
+
})(["@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
|
|
9
|
+
export var Spinner = function Spinner(props) {
|
|
10
|
+
return /*#__PURE__*/React.createElement(StyledWrapper, {
|
|
11
|
+
className: "spinner-container"
|
|
12
|
+
}, /*#__PURE__*/React.createElement(Icon, _extends({
|
|
13
|
+
name: "ri-loader"
|
|
14
|
+
}, props)));
|
|
15
|
+
};
|
package/es/@next/index.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { Badge } from './Badge';
|
|
2
|
+
export { Button, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton, } from './Button';
|
|
2
3
|
export { ButtonGroup } from './ButtonGroup';
|
|
3
4
|
export { Icon } from './Icon';
|
|
5
|
+
export { Tab, TabProps, Tabs, TabsProps } from './Tabs';
|
|
4
6
|
export { Typography } from './Typography';
|
|
5
|
-
export { Tab, Tabs, TabProps, TabsProps } from './Tabs';
|
|
6
|
-
import * as Breakpoints from './utilities/breakpoints';
|
|
7
7
|
import * as BorderRadius from './utilities/borderRadius';
|
|
8
|
+
import * as Breakpoints from './utilities/breakpoints';
|
|
8
9
|
import * as Colors from './utilities/colors';
|
|
9
10
|
import * as DropShadow from './utilities/dropShadow';
|
|
10
11
|
import * as Fonts from './utilities/fonts';
|
package/es/@next/index.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { Badge } from './Badge';
|
|
2
|
+
export { Button, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton } from './Button';
|
|
2
3
|
export { ButtonGroup } from './ButtonGroup';
|
|
3
4
|
export { Icon } from './Icon';
|
|
5
|
+
export { Tab, TabProps, Tabs, TabsProps } from './Tabs';
|
|
4
6
|
export { Typography } from './Typography';
|
|
5
|
-
export { Tab, Tabs, TabProps, TabsProps } from './Tabs';
|
|
6
7
|
|
|
7
8
|
// Utilities
|
|
8
|
-
import * as Breakpoints from './utilities/breakpoints';
|
|
9
9
|
import * as BorderRadius from './utilities/borderRadius';
|
|
10
|
+
import * as Breakpoints from './utilities/breakpoints';
|
|
10
11
|
import * as Colors from './utilities/colors';
|
|
11
12
|
import * as DropShadow from './utilities/dropShadow';
|
|
12
13
|
import * as Fonts from './utilities/fonts';
|