glints-aries 4.0.196 → 4.0.198

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.
Files changed (61) hide show
  1. package/es/@next/Card/Card.d.ts +15 -0
  2. package/es/@next/Card/Card.js +46 -0
  3. package/es/@next/Card/Card.stories.d.ts +7 -0
  4. package/es/@next/Card/CardStyle.d.ts +7 -0
  5. package/es/@next/Card/CardStyle.js +33 -0
  6. package/es/@next/Card/Section.d.ts +4 -0
  7. package/es/@next/Card/Section.js +12 -0
  8. package/es/@next/Card/index.d.ts +1 -0
  9. package/es/@next/Card/index.js +1 -0
  10. package/es/@next/EmptyState/EmptyState.js +0 -1
  11. package/es/@next/IndexTable/IndexTable.d.ts +3 -2
  12. package/es/@next/IndexTable/IndexTable.js +14 -5
  13. package/es/@next/IndexTable/components/LoadingState/LoadingState.d.ts +7 -0
  14. package/es/@next/IndexTable/components/LoadingState/LoadingState.js +19 -0
  15. package/es/@next/IndexTable/components/LoadingState/LoadingStateStyle.d.ts +2 -0
  16. package/es/@next/IndexTable/components/LoadingState/LoadingStateStyle.js +10 -0
  17. package/es/@next/IndexTable/components/LoadingState/index.d.ts +1 -0
  18. package/es/@next/IndexTable/components/LoadingState/index.js +1 -0
  19. package/es/@next/Modal/Modal.d.ts +3 -6
  20. package/es/@next/Switch/Switch.d.ts +8 -0
  21. package/es/@next/Switch/Switch.js +23 -0
  22. package/es/@next/Switch/Switch.stories.d.ts +4 -0
  23. package/es/@next/Switch/SwitchStyle.d.ts +3 -0
  24. package/es/@next/Switch/SwitchStyle.js +15 -0
  25. package/es/@next/Switch/index.d.ts +1 -0
  26. package/es/@next/Switch/index.js +1 -0
  27. package/es/@next/index.d.ts +2 -0
  28. package/es/@next/index.js +3 -1
  29. package/es/types/componentAction.d.ts +4 -0
  30. package/es/types/componentAction.js +1 -0
  31. package/lib/@next/Card/Card.d.ts +15 -0
  32. package/lib/@next/Card/Card.js +52 -0
  33. package/lib/@next/Card/Card.stories.d.ts +7 -0
  34. package/lib/@next/Card/CardStyle.d.ts +7 -0
  35. package/lib/@next/Card/CardStyle.js +47 -0
  36. package/lib/@next/Card/Section.d.ts +4 -0
  37. package/lib/@next/Card/Section.js +18 -0
  38. package/lib/@next/Card/index.d.ts +1 -0
  39. package/lib/@next/Card/index.js +9 -0
  40. package/lib/@next/EmptyState/EmptyState.js +0 -1
  41. package/lib/@next/IndexTable/IndexTable.d.ts +3 -2
  42. package/lib/@next/IndexTable/IndexTable.js +12 -4
  43. package/lib/@next/IndexTable/components/LoadingState/LoadingState.d.ts +7 -0
  44. package/lib/@next/IndexTable/components/LoadingState/LoadingState.js +25 -0
  45. package/lib/@next/IndexTable/components/LoadingState/LoadingStateStyle.d.ts +2 -0
  46. package/lib/@next/IndexTable/components/LoadingState/LoadingStateStyle.js +17 -0
  47. package/lib/@next/IndexTable/components/LoadingState/index.d.ts +1 -0
  48. package/lib/@next/IndexTable/components/LoadingState/index.js +9 -0
  49. package/lib/@next/Modal/Modal.d.ts +3 -6
  50. package/lib/@next/Switch/Switch.d.ts +8 -0
  51. package/lib/@next/Switch/Switch.js +29 -0
  52. package/lib/@next/Switch/Switch.stories.d.ts +4 -0
  53. package/lib/@next/Switch/SwitchStyle.d.ts +3 -0
  54. package/lib/@next/Switch/SwitchStyle.js +23 -0
  55. package/lib/@next/Switch/index.d.ts +1 -0
  56. package/lib/@next/Switch/index.js +9 -0
  57. package/lib/@next/index.d.ts +2 -0
  58. package/lib/@next/index.js +6 -1
  59. package/lib/types/componentAction.d.ts +4 -0
  60. package/lib/types/componentAction.js +1 -0
  61. package/package.json +1 -1
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { ComponentAction } from '../../types/componentAction';
3
+ export declare type CardProps = {
4
+ heading?: string;
5
+ subheading?: string;
6
+ children?: React.ReactNode;
7
+ primaryAction?: ComponentAction;
8
+ secondaryAction?: ComponentAction;
9
+ actionsAlignment?: 'left' | 'right';
10
+ };
11
+ export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
12
+ Section: ({ children }: {
13
+ children: React.ReactNode;
14
+ }) => JSX.Element;
15
+ };
@@ -0,0 +1,46 @@
1
+ import React from 'react';
2
+ import { Button, PrimaryButton } from '../Button';
3
+ import { ButtonGroup } from '../ButtonGroup';
4
+ import { Typography } from '../Typography';
5
+ import { StyledCardActionWrapper, StyledCardContainer, StyledCardContentWrapper, StyledCardHeaderSection, StyledCardHeaderSectionHalf, StyledCardHeaderWrapper } from './CardStyle';
6
+ import { Section } from './Section';
7
+ var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
8
+ var heading = _ref.heading,
9
+ subheading = _ref.subheading,
10
+ primaryAction = _ref.primaryAction,
11
+ secondaryAction = _ref.secondaryAction,
12
+ _ref$actionsAlignment = _ref.actionsAlignment,
13
+ actionsAlignment = _ref$actionsAlignment === void 0 ? 'right' : _ref$actionsAlignment,
14
+ children = _ref.children;
15
+ var headingMarkup = /*#__PURE__*/React.createElement(Typography, {
16
+ as: "div",
17
+ variant: "body2"
18
+ }, heading);
19
+ var subHeadingMarkup = /*#__PURE__*/React.createElement(Typography, {
20
+ as: "div",
21
+ variant: "subtitle2"
22
+ }, subheading);
23
+ var headerMarkup = function headerMarkup() {
24
+ if (!!heading && !!subheading) {
25
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledCardHeaderSectionHalf, null, headingMarkup), /*#__PURE__*/React.createElement(StyledCardHeaderSectionHalf, null, subHeadingMarkup));
26
+ }
27
+ if (heading) {
28
+ return /*#__PURE__*/React.createElement(StyledCardHeaderSection, null, headingMarkup);
29
+ }
30
+ return /*#__PURE__*/React.createElement(StyledCardHeaderSection, null, subHeadingMarkup);
31
+ };
32
+ var showHeader = !!heading || !!subheading;
33
+ var showActions = !!primaryAction || !!secondaryAction;
34
+ return /*#__PURE__*/React.createElement(StyledCardContainer, {
35
+ ref: ref
36
+ }, showHeader && /*#__PURE__*/React.createElement(StyledCardHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/React.createElement(StyledCardContentWrapper, null, children), showActions && /*#__PURE__*/React.createElement(StyledCardActionWrapper, {
37
+ "data-align": actionsAlignment
38
+ }, /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction && /*#__PURE__*/React.createElement(Button, {
39
+ onClick: secondaryAction.action
40
+ }, secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, {
41
+ onClick: primaryAction.action
42
+ }, primaryAction.label))));
43
+ });
44
+ export var Card = Object.assign(CardComponent, {
45
+ Section: Section
46
+ });
@@ -0,0 +1,7 @@
1
+ import { Meta } from '@storybook/react';
2
+ declare const _default: Meta<import("@storybook/react").Args>;
3
+ export default _default;
4
+ export declare const Interactive: any;
5
+ export declare const NoAction: any;
6
+ export declare const PrimaryActionOnly: any;
7
+ export declare const SecondaryActionOnly: any;
@@ -0,0 +1,7 @@
1
+ export declare const StyledCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const StyledCardHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export declare const StyledCardHeaderSection: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ export declare const StyledCardHeaderSectionHalf: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const StyledCardContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
+ export declare const StyledCardSection: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const StyledCardActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,33 @@
1
+ import styled from 'styled-components';
2
+ import * as Breakpoints from '../utilities/breakpoints';
3
+ import { borderRadius8 } from '../utilities/borderRadius';
4
+ import { Neutral } from '../utilities/colors';
5
+ import { space12, space16, space24, space4 } from '../utilities/spacing';
6
+ export var StyledCardContainer = styled.div.withConfig({
7
+ displayName: "CardStyle__StyledCardContainer",
8
+ componentId: "sc-tpku8j-0"
9
+ })(["border-radius:", ";box-shadow:0px 0px 5px rgba(0,0,0,0.05),0px 1px 2px rgba(0,0,0,0.15);color:", ";"], borderRadius8, Neutral.B18);
10
+ export var StyledCardHeaderWrapper = styled.div.withConfig({
11
+ displayName: "CardStyle__StyledCardHeaderWrapper",
12
+ componentId: "sc-tpku8j-1"
13
+ })(["display:flex;padding:", " ", " 20px;flex-wrap:wrap;flex-direction:column;height:max-content;border-bottom:solid 1px ", ";@media (max-width:", "){padding:", " ", " 10px;}"], space24, space24, Neutral.B85, Breakpoints.large, space12, space16);
14
+ export var StyledCardHeaderSection = styled.div.withConfig({
15
+ displayName: "CardStyle__StyledCardHeaderSection",
16
+ componentId: "sc-tpku8j-2"
17
+ })(["flex:0 0 100%;"]);
18
+ export var StyledCardHeaderSectionHalf = styled.div.withConfig({
19
+ displayName: "CardStyle__StyledCardHeaderSectionHalf",
20
+ componentId: "sc-tpku8j-3"
21
+ })(["flex:0 0 50%;"]);
22
+ export var StyledCardContentWrapper = styled.div.withConfig({
23
+ displayName: "CardStyle__StyledCardContentWrapper",
24
+ componentId: "sc-tpku8j-4"
25
+ })(["padding-left:", ";"], space4);
26
+ export var StyledCardSection = styled.div.withConfig({
27
+ displayName: "CardStyle__StyledCardSection",
28
+ componentId: "sc-tpku8j-5"
29
+ })(["padding:", " 20px;.section + .section{border-top:solid 1px ", ";}@media (max-width:", "){padding:", " ", ";}"], space16, Neutral.B85, Breakpoints.large, space16, space12);
30
+ export var StyledCardActionWrapper = styled.div.withConfig({
31
+ displayName: "CardStyle__StyledCardActionWrapper",
32
+ componentId: "sc-tpku8j-6"
33
+ })(["display:flex;padding:20px ", " ", ";flex-direction:column-reverse;align-items:flex-end;border-top:solid 1px ", ";&[data-align='left']{flex-direction:column;align-items:flex-start;}@media (max-width:", "){padding:10px ", " ", ";}"], space24, space24, Neutral.B85, Breakpoints.large, space16, space12);
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ export declare const Section: ({ children }: {
3
+ children: React.ReactNode;
4
+ }) => JSX.Element;
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { Typography } from '../Typography';
3
+ import { StyledCardSection } from './CardStyle';
4
+ export var Section = function Section(_ref) {
5
+ var children = _ref.children;
6
+ return /*#__PURE__*/React.createElement(StyledCardSection, {
7
+ className: "section"
8
+ }, /*#__PURE__*/React.createElement(Typography, {
9
+ as: "div",
10
+ variant: "body1"
11
+ }, children));
12
+ };
@@ -0,0 +1 @@
1
+ export * from './Card';
@@ -0,0 +1 @@
1
+ export * from './Card';
@@ -17,7 +17,6 @@ export var EmptyState = function EmptyState(_ref) {
17
17
  if (imageName && !isValidImageName) {
18
18
  console.warn("imageName \"" + imageName + "\" is not a valid Image Name.");
19
19
  }
20
- console.log('ImageName: ', imageName);
21
20
  return /*#__PURE__*/React.createElement(EmptyStateContainer, null, imageName && /*#__PURE__*/React.createElement(StyledImage, {
22
21
  src: imageMapping[imageName]
23
22
  }), /*#__PURE__*/React.createElement(EmptyStateContentContainer, {
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- import { IndexTableProps } from 'polaris-glints';
2
+ import { IndexTableProps as PolarisIndexTableProps } from 'polaris-glints';
3
+ declare type IndexTableProps = Omit<PolarisIndexTableProps, 'emptySearchTitle'>;
3
4
  declare const IndexTable: {
4
- ({ bulkActions, children, itemCount, selectedItemsCount, ...props }: IndexTableProps): JSX.Element;
5
+ ({ bulkActions, children, itemCount, selectedItemsCount, loading, emptyState, ...props }: IndexTableProps): JSX.Element;
5
6
  Cell: React.NamedExoticComponent<import("polaris-glints/build/ts/latest/src/components/IndexTable").CellProps>;
6
7
  Row: ({ children, ...props }: import("polaris-glints").RowProps) => JSX.Element;
7
8
  };
@@ -1,17 +1,20 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount"],
3
+ var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount", "loading", "emptyState"],
4
4
  _excluded2 = ["checked", "onChange"];
5
5
  import React from 'react';
6
- import { Cell, IndexTable as PolarisIndexTable, IndexTableProps } from 'polaris-glints';
6
+ import { Cell, IndexTable as PolarisIndexTable } from 'polaris-glints';
7
7
  import { Checkbox } from '../Checkbox';
8
8
  import { Row } from './components/Row/Row';
9
9
  import { StyledIndexTable } from './IndexTableStyle';
10
+ import { LoadingState } from './components/LoadingState';
10
11
  var IndexTable = function IndexTable(_ref) {
11
12
  var bulkActions = _ref.bulkActions,
12
13
  children = _ref.children,
13
14
  itemCount = _ref.itemCount,
14
15
  selectedItemsCount = _ref.selectedItemsCount,
16
+ loading = _ref.loading,
17
+ emptyState = _ref.emptyState,
15
18
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
16
19
  var renderCheckboxHeader = function renderCheckboxHeader(_ref2) {
17
20
  var checked = _ref2.checked,
@@ -26,11 +29,17 @@ var IndexTable = function IndexTable(_ref) {
26
29
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIndexTable, null), /*#__PURE__*/React.createElement(PolarisIndexTable, _extends({
27
30
  bulkActions: bulkActions,
28
31
  checkbox: renderCheckboxHeader,
29
- itemCount: itemCount,
30
- selectedItemsCount: selectedItemsCount
32
+ itemCount: loading ? 0 : itemCount,
33
+ selectedItemsCount: selectedItemsCount,
34
+ emptySearchTitle: null,
35
+ loading: false,
36
+ emptyState: loading ? /*#__PURE__*/React.createElement(LoadingState, {
37
+ label: props.loadingLabel,
38
+ colSpan: props.headings.length
39
+ }) : emptyState
31
40
  }, props), children));
32
41
  };
33
42
  IndexTable.Cell = Cell;
34
43
  IndexTable.Row = Row;
35
44
  export { useIndexResourceState } from 'polaris-glints';
36
- export { IndexTable, IndexTableProps };
45
+ export { IndexTable };
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ interface LoadingStateProps {
3
+ colSpan: number;
4
+ label?: string;
5
+ }
6
+ export declare const LoadingState: ({ colSpan, label }: LoadingStateProps) => JSX.Element;
7
+ export {};
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { Spinner } from '../../../Spinner';
3
+ import { Blue, Neutral } from '../../../utilities/colors';
4
+ import { LoadingStateContainer, SpinnerContainer } from './LoadingStateStyle';
5
+ import { Typography } from '../../../Typography';
6
+ export var LoadingState = function LoadingState(_ref) {
7
+ var colSpan = _ref.colSpan,
8
+ label = _ref.label;
9
+ return /*#__PURE__*/React.createElement(LoadingStateContainer, {
10
+ colSpan: colSpan + 1
11
+ }, /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
12
+ height: 48,
13
+ width: 48,
14
+ fill: Blue.S99
15
+ }), /*#__PURE__*/React.createElement(Typography, {
16
+ variant: "subtitle1",
17
+ color: Neutral.B18
18
+ }, label)));
19
+ };
@@ -0,0 +1,2 @@
1
+ export declare const LoadingStateContainer: import("styled-components").StyledComponent<"td", any, {}, never>;
2
+ export declare const SpinnerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,10 @@
1
+ import styled from 'styled-components';
2
+ import { Breakpoints } from '../../..';
3
+ export var LoadingStateContainer = styled.td.withConfig({
4
+ displayName: "LoadingStateStyle__LoadingStateContainer",
5
+ componentId: "sc-1pvfz22-0"
6
+ })(["height:480px;"]);
7
+ export var SpinnerContainer = styled.div.withConfig({
8
+ displayName: "LoadingStateStyle__SpinnerContainer",
9
+ componentId: "sc-1pvfz22-1"
10
+ })(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-direction:column;gap:16px;p{margin:0;}@media (max-width:", "){position:absolute;top:0;left:0;}"], Breakpoints.large);
@@ -0,0 +1 @@
1
+ export * from './LoadingState';
@@ -0,0 +1 @@
1
+ export * from './LoadingState';
@@ -1,17 +1,14 @@
1
1
  import React from 'react';
2
- export declare type ModalAction = {
3
- label: string;
4
- action: (...args: any[]) => void;
5
- };
2
+ import { ComponentAction } from '../../types/componentAction';
6
3
  export declare type ModalProps = {
7
4
  isOpen?: boolean;
8
5
  header?: string;
9
6
  headerDescription?: string;
10
7
  children?: React.ReactNode;
11
8
  /** This action will be tied to primary button on footer */
12
- primaryAction?: ModalAction;
9
+ primaryAction?: ComponentAction;
13
10
  /** This action will be tied to basic button on footer */
14
- secondaryAction?: ModalAction;
11
+ secondaryAction?: ComponentAction;
15
12
  /** Defining custom actions will not show primary and secondary actions */
16
13
  customActions?: React.ReactNode;
17
14
  showBackButton?: boolean;
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
3
+ checked?: boolean;
4
+ disabled?: boolean;
5
+ onChange: () => void;
6
+ value: string;
7
+ }
8
+ export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
@@ -0,0 +1,23 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["checked", "disabled", "onChange", "value"];
4
+ import React from 'react';
5
+ import { InputStyle, LabelStyle, SwitchStyle } from './SwitchStyle';
6
+ export var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref, ref) {
7
+ var checked = _ref.checked,
8
+ disabled = _ref.disabled,
9
+ onChange = _ref.onChange,
10
+ value = _ref.value,
11
+ otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
12
+ return /*#__PURE__*/React.createElement(LabelStyle, null, /*#__PURE__*/React.createElement(InputStyle, _extends({
13
+ value: value
14
+ }, otherProps, {
15
+ disabled: disabled,
16
+ defaultChecked: checked,
17
+ type: "checkbox",
18
+ onChange: onChange,
19
+ ref: ref
20
+ })), /*#__PURE__*/React.createElement(SwitchStyle, {
21
+ "data-disabled": disabled
22
+ }));
23
+ });
@@ -0,0 +1,4 @@
1
+ import { Meta } from '@storybook/react';
2
+ declare const _default: Meta<import("@storybook/react").Args>;
3
+ export default _default;
4
+ export declare const Interactive: any;
@@ -0,0 +1,3 @@
1
+ export declare const SwitchStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const InputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
3
+ export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
@@ -0,0 +1,15 @@
1
+ import styled from 'styled-components';
2
+ import { Breakpoints, Spacing } from '..';
3
+ import { Blue, Neutral } from '../utilities/colors';
4
+ export var SwitchStyle = styled.div.withConfig({
5
+ displayName: "SwitchStyle",
6
+ componentId: "sc-7dlucf-0"
7
+ })(["position:relative;width:", ";height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";}border-radius:", ";padding:0;transition:300ms all;@media (max-width:", "){width:38px;height:22px;}&:before{transition:100ms all;content:'';position:absolute;width:16px;height:16px;border-radius:16px;top:50%;left:4px;background:", ";transform:translate(0,-50%);@media (max-width:", "){width:14px;height:14px;}}"], Spacing.space40, Spacing.space24, Neutral.B40, Neutral.B95, Spacing.space24, Breakpoints.large, Neutral.B100, Breakpoints.large);
8
+ export var InputStyle = styled.input.withConfig({
9
+ displayName: "SwitchStyle__InputStyle",
10
+ componentId: "sc-7dlucf-1"
11
+ })(["opacity:0;position:absolute;&:checked + ", "{background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{transform:translate(16px,-50%);}}"], SwitchStyle, Blue.S99, Neutral.B95);
12
+ export var LabelStyle = styled.label.withConfig({
13
+ displayName: "SwitchStyle__LabelStyle",
14
+ componentId: "sc-7dlucf-2"
15
+ })(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
@@ -0,0 +1 @@
1
+ export * from './Switch';
@@ -0,0 +1 @@
1
+ export * from './Switch';
@@ -10,6 +10,7 @@ export { Badge, BadgeProps } from './Badge';
10
10
  export { Banner, BannerProps } from './Banner';
11
11
  export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton, } from './Button';
12
12
  export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
13
+ export { Card, CardProps } from './Card';
13
14
  export { Checkbox, CheckboxProps } from './Checkbox';
14
15
  export { CurrencyInput, CurrencyInputProps } from './CurrencyInput';
15
16
  export { Divider } from './Divider';
@@ -28,3 +29,4 @@ export { TextInput, TextInputProps } from './TextInput';
28
29
  export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
29
30
  export { Typography, TypographyProps } from './Typography';
30
31
  export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
32
+ export { Switch } from './Switch';
package/es/@next/index.js CHANGED
@@ -11,6 +11,7 @@ export { Badge, BadgeProps } from './Badge';
11
11
  export { Banner, BannerProps } from './Banner';
12
12
  export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton } from './Button';
13
13
  export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
14
+ export { Card, CardProps } from './Card';
14
15
  export { Checkbox, CheckboxProps } from './Checkbox';
15
16
  export { CurrencyInput, CurrencyInputProps } from './CurrencyInput';
16
17
  export { Divider } from './Divider';
@@ -28,4 +29,5 @@ export { Tag, TagProps } from './Tag';
28
29
  export { TextInput, TextInputProps } from './TextInput';
29
30
  export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
30
31
  export { Typography, TypographyProps } from './Typography';
31
- export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
32
+ export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
33
+ export { Switch } from './Switch';
@@ -0,0 +1,4 @@
1
+ export declare type ComponentAction = {
2
+ label: string;
3
+ action: (...args: any[]) => void;
4
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { ComponentAction } from '../../types/componentAction';
3
+ export declare type CardProps = {
4
+ heading?: string;
5
+ subheading?: string;
6
+ children?: React.ReactNode;
7
+ primaryAction?: ComponentAction;
8
+ secondaryAction?: ComponentAction;
9
+ actionsAlignment?: 'left' | 'right';
10
+ };
11
+ export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
12
+ Section: ({ children }: {
13
+ children: React.ReactNode;
14
+ }) => JSX.Element;
15
+ };
@@ -0,0 +1,52 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports.Card = void 0;
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var _Button = require("../Button");
8
+ var _ButtonGroup = require("../ButtonGroup");
9
+ var _Typography = require("../Typography");
10
+ var _CardStyle = require("./CardStyle");
11
+ var _Section = require("./Section");
12
+ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref, ref) {
13
+ var heading = _ref.heading,
14
+ subheading = _ref.subheading,
15
+ primaryAction = _ref.primaryAction,
16
+ secondaryAction = _ref.secondaryAction,
17
+ _ref$actionsAlignment = _ref.actionsAlignment,
18
+ actionsAlignment = _ref$actionsAlignment === void 0 ? 'right' : _ref$actionsAlignment,
19
+ children = _ref.children;
20
+ var headingMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
21
+ as: "div",
22
+ variant: "body2"
23
+ }, heading);
24
+ var subHeadingMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
25
+ as: "div",
26
+ variant: "subtitle2"
27
+ }, subheading);
28
+ var headerMarkup = function headerMarkup() {
29
+ if (!!heading && !!subheading) {
30
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderSectionHalf, null, headingMarkup), /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderSectionHalf, null, subHeadingMarkup));
31
+ }
32
+ if (heading) {
33
+ return /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderSection, null, headingMarkup);
34
+ }
35
+ return /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderSection, null, subHeadingMarkup);
36
+ };
37
+ var showHeader = !!heading || !!subheading;
38
+ var showActions = !!primaryAction || !!secondaryAction;
39
+ return /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContainer, {
40
+ ref: ref
41
+ }, showHeader && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContentWrapper, null, children), showActions && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardActionWrapper, {
42
+ "data-align": actionsAlignment
43
+ }, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
44
+ onClick: secondaryAction.action
45
+ }, secondaryAction.label), primaryAction && /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, {
46
+ onClick: primaryAction.action
47
+ }, primaryAction.label))));
48
+ });
49
+ var Card = Object.assign(CardComponent, {
50
+ Section: _Section.Section
51
+ });
52
+ exports.Card = Card;
@@ -0,0 +1,7 @@
1
+ import { Meta } from '@storybook/react';
2
+ declare const _default: Meta<import("@storybook/react").Args>;
3
+ export default _default;
4
+ export declare const Interactive: any;
5
+ export declare const NoAction: any;
6
+ export declare const PrimaryActionOnly: any;
7
+ export declare const SecondaryActionOnly: any;
@@ -0,0 +1,7 @@
1
+ export declare const StyledCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const StyledCardHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export declare const StyledCardHeaderSection: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ export declare const StyledCardHeaderSectionHalf: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const StyledCardContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
+ export declare const StyledCardSection: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const StyledCardActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports.StyledCardSection = exports.StyledCardHeaderWrapper = exports.StyledCardHeaderSectionHalf = exports.StyledCardHeaderSection = exports.StyledCardContentWrapper = exports.StyledCardContainer = exports.StyledCardActionWrapper = void 0;
6
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
7
+ var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
8
+ var _borderRadius = require("../utilities/borderRadius");
9
+ var _colors = require("../utilities/colors");
10
+ var _spacing = require("../utilities/spacing");
11
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
12
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
13
+ var StyledCardContainer = _styledComponents["default"].div.withConfig({
14
+ displayName: "CardStyle__StyledCardContainer",
15
+ componentId: "sc-tpku8j-0"
16
+ })(["border-radius:", ";box-shadow:0px 0px 5px rgba(0,0,0,0.05),0px 1px 2px rgba(0,0,0,0.15);color:", ";"], _borderRadius.borderRadius8, _colors.Neutral.B18);
17
+ exports.StyledCardContainer = StyledCardContainer;
18
+ var StyledCardHeaderWrapper = _styledComponents["default"].div.withConfig({
19
+ displayName: "CardStyle__StyledCardHeaderWrapper",
20
+ componentId: "sc-tpku8j-1"
21
+ })(["display:flex;padding:", " ", " 20px;flex-wrap:wrap;flex-direction:column;height:max-content;border-bottom:solid 1px ", ";@media (max-width:", "){padding:", " ", " 10px;}"], _spacing.space24, _spacing.space24, _colors.Neutral.B85, Breakpoints.large, _spacing.space12, _spacing.space16);
22
+ exports.StyledCardHeaderWrapper = StyledCardHeaderWrapper;
23
+ var StyledCardHeaderSection = _styledComponents["default"].div.withConfig({
24
+ displayName: "CardStyle__StyledCardHeaderSection",
25
+ componentId: "sc-tpku8j-2"
26
+ })(["flex:0 0 100%;"]);
27
+ exports.StyledCardHeaderSection = StyledCardHeaderSection;
28
+ var StyledCardHeaderSectionHalf = _styledComponents["default"].div.withConfig({
29
+ displayName: "CardStyle__StyledCardHeaderSectionHalf",
30
+ componentId: "sc-tpku8j-3"
31
+ })(["flex:0 0 50%;"]);
32
+ exports.StyledCardHeaderSectionHalf = StyledCardHeaderSectionHalf;
33
+ var StyledCardContentWrapper = _styledComponents["default"].div.withConfig({
34
+ displayName: "CardStyle__StyledCardContentWrapper",
35
+ componentId: "sc-tpku8j-4"
36
+ })(["padding-left:", ";"], _spacing.space4);
37
+ exports.StyledCardContentWrapper = StyledCardContentWrapper;
38
+ var StyledCardSection = _styledComponents["default"].div.withConfig({
39
+ displayName: "CardStyle__StyledCardSection",
40
+ componentId: "sc-tpku8j-5"
41
+ })(["padding:", " 20px;.section + .section{border-top:solid 1px ", ";}@media (max-width:", "){padding:", " ", ";}"], _spacing.space16, _colors.Neutral.B85, Breakpoints.large, _spacing.space16, _spacing.space12);
42
+ exports.StyledCardSection = StyledCardSection;
43
+ var StyledCardActionWrapper = _styledComponents["default"].div.withConfig({
44
+ displayName: "CardStyle__StyledCardActionWrapper",
45
+ componentId: "sc-tpku8j-6"
46
+ })(["display:flex;padding:20px ", " ", ";flex-direction:column-reverse;align-items:flex-end;border-top:solid 1px ", ";&[data-align='left']{flex-direction:column;align-items:flex-start;}@media (max-width:", "){padding:10px ", " ", ";}"], _spacing.space24, _spacing.space24, _colors.Neutral.B85, Breakpoints.large, _spacing.space16, _spacing.space12);
47
+ exports.StyledCardActionWrapper = StyledCardActionWrapper;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ export declare const Section: ({ children }: {
3
+ children: React.ReactNode;
4
+ }) => JSX.Element;
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports.Section = void 0;
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var _Typography = require("../Typography");
8
+ var _CardStyle = require("./CardStyle");
9
+ var Section = function Section(_ref) {
10
+ var children = _ref.children;
11
+ return /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardSection, {
12
+ className: "section"
13
+ }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
14
+ as: "div",
15
+ variant: "body1"
16
+ }, children));
17
+ };
18
+ exports.Section = Section;
@@ -0,0 +1 @@
1
+ export * from './Card';
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ var _Card = require("./Card");
5
+ Object.keys(_Card).forEach(function (key) {
6
+ if (key === "default" || key === "__esModule") return;
7
+ if (key in exports && exports[key] === _Card[key]) return;
8
+ exports[key] = _Card[key];
9
+ });
@@ -22,7 +22,6 @@ var EmptyState = function EmptyState(_ref) {
22
22
  if (imageName && !isValidImageName) {
23
23
  console.warn("imageName \"" + imageName + "\" is not a valid Image Name.");
24
24
  }
25
- console.log('ImageName: ', imageName);
26
25
  return /*#__PURE__*/_react["default"].createElement(_EmptyStateStyle.EmptyStateContainer, null, imageName && /*#__PURE__*/_react["default"].createElement(_EmptyStateStyle.StyledImage, {
27
26
  src: _assets.imageMapping[imageName]
28
27
  }), /*#__PURE__*/_react["default"].createElement(_EmptyStateStyle.EmptyStateContentContainer, {
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- import { IndexTableProps } from 'polaris-glints';
2
+ import { IndexTableProps as PolarisIndexTableProps } from 'polaris-glints';
3
+ declare type IndexTableProps = Omit<PolarisIndexTableProps, 'emptySearchTitle'>;
3
4
  declare const IndexTable: {
4
- ({ bulkActions, children, itemCount, selectedItemsCount, ...props }: IndexTableProps): JSX.Element;
5
+ ({ bulkActions, children, itemCount, selectedItemsCount, loading, emptyState, ...props }: IndexTableProps): JSX.Element;
5
6
  Cell: React.NamedExoticComponent<import("polaris-glints/build/ts/latest/src/components/IndexTable").CellProps>;
6
7
  Row: ({ children, ...props }: import("polaris-glints").RowProps) => JSX.Element;
7
8
  };
@@ -7,18 +7,20 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
7
7
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _polarisGlints = require("polaris-glints");
10
- exports.IndexTableProps = _polarisGlints.IndexTableProps;
11
10
  exports.useIndexResourceState = _polarisGlints.useIndexResourceState;
12
11
  var _Checkbox = require("../Checkbox");
13
12
  var _Row = require("./components/Row/Row");
14
13
  var _IndexTableStyle = require("./IndexTableStyle");
15
- var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount"],
14
+ var _LoadingState = require("./components/LoadingState");
15
+ var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount", "loading", "emptyState"],
16
16
  _excluded2 = ["checked", "onChange"];
17
17
  var IndexTable = function IndexTable(_ref) {
18
18
  var bulkActions = _ref.bulkActions,
19
19
  children = _ref.children,
20
20
  itemCount = _ref.itemCount,
21
21
  selectedItemsCount = _ref.selectedItemsCount,
22
+ loading = _ref.loading,
23
+ emptyState = _ref.emptyState,
22
24
  props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
23
25
  var renderCheckboxHeader = function renderCheckboxHeader(_ref2) {
24
26
  var checked = _ref2.checked,
@@ -33,8 +35,14 @@ var IndexTable = function IndexTable(_ref) {
33
35
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_IndexTableStyle.StyledIndexTable, null), /*#__PURE__*/_react["default"].createElement(_polarisGlints.IndexTable, (0, _extends2["default"])({
34
36
  bulkActions: bulkActions,
35
37
  checkbox: renderCheckboxHeader,
36
- itemCount: itemCount,
37
- selectedItemsCount: selectedItemsCount
38
+ itemCount: loading ? 0 : itemCount,
39
+ selectedItemsCount: selectedItemsCount,
40
+ emptySearchTitle: null,
41
+ loading: false,
42
+ emptyState: loading ? /*#__PURE__*/_react["default"].createElement(_LoadingState.LoadingState, {
43
+ label: props.loadingLabel,
44
+ colSpan: props.headings.length
45
+ }) : emptyState
38
46
  }, props), children));
39
47
  };
40
48
  exports.IndexTable = IndexTable;
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ interface LoadingStateProps {
3
+ colSpan: number;
4
+ label?: string;
5
+ }
6
+ export declare const LoadingState: ({ colSpan, label }: LoadingStateProps) => JSX.Element;
7
+ export {};
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports.LoadingState = void 0;
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var _Spinner = require("../../../Spinner");
8
+ var _colors = require("../../../utilities/colors");
9
+ var _LoadingStateStyle = require("./LoadingStateStyle");
10
+ var _Typography = require("../../../Typography");
11
+ var LoadingState = function LoadingState(_ref) {
12
+ var colSpan = _ref.colSpan,
13
+ label = _ref.label;
14
+ return /*#__PURE__*/_react["default"].createElement(_LoadingStateStyle.LoadingStateContainer, {
15
+ colSpan: colSpan + 1
16
+ }, /*#__PURE__*/_react["default"].createElement(_LoadingStateStyle.SpinnerContainer, null, /*#__PURE__*/_react["default"].createElement(_Spinner.Spinner, {
17
+ height: 48,
18
+ width: 48,
19
+ fill: _colors.Blue.S99
20
+ }), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
21
+ variant: "subtitle1",
22
+ color: _colors.Neutral.B18
23
+ }, label)));
24
+ };
25
+ exports.LoadingState = LoadingState;
@@ -0,0 +1,2 @@
1
+ export declare const LoadingStateContainer: import("styled-components").StyledComponent<"td", any, {}, never>;
2
+ export declare const SpinnerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports.SpinnerContainer = exports.LoadingStateContainer = void 0;
6
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
7
+ var _ = require("../../..");
8
+ var LoadingStateContainer = _styledComponents["default"].td.withConfig({
9
+ displayName: "LoadingStateStyle__LoadingStateContainer",
10
+ componentId: "sc-1pvfz22-0"
11
+ })(["height:480px;"]);
12
+ exports.LoadingStateContainer = LoadingStateContainer;
13
+ var SpinnerContainer = _styledComponents["default"].div.withConfig({
14
+ displayName: "LoadingStateStyle__SpinnerContainer",
15
+ componentId: "sc-1pvfz22-1"
16
+ })(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-direction:column;gap:16px;p{margin:0;}@media (max-width:", "){position:absolute;top:0;left:0;}"], _.Breakpoints.large);
17
+ exports.SpinnerContainer = SpinnerContainer;
@@ -0,0 +1 @@
1
+ export * from './LoadingState';
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ var _LoadingState = require("./LoadingState");
5
+ Object.keys(_LoadingState).forEach(function (key) {
6
+ if (key === "default" || key === "__esModule") return;
7
+ if (key in exports && exports[key] === _LoadingState[key]) return;
8
+ exports[key] = _LoadingState[key];
9
+ });
@@ -1,17 +1,14 @@
1
1
  import React from 'react';
2
- export declare type ModalAction = {
3
- label: string;
4
- action: (...args: any[]) => void;
5
- };
2
+ import { ComponentAction } from '../../types/componentAction';
6
3
  export declare type ModalProps = {
7
4
  isOpen?: boolean;
8
5
  header?: string;
9
6
  headerDescription?: string;
10
7
  children?: React.ReactNode;
11
8
  /** This action will be tied to primary button on footer */
12
- primaryAction?: ModalAction;
9
+ primaryAction?: ComponentAction;
13
10
  /** This action will be tied to basic button on footer */
14
- secondaryAction?: ModalAction;
11
+ secondaryAction?: ComponentAction;
15
12
  /** Defining custom actions will not show primary and secondary actions */
16
13
  customActions?: React.ReactNode;
17
14
  showBackButton?: boolean;
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
3
+ checked?: boolean;
4
+ disabled?: boolean;
5
+ onChange: () => void;
6
+ value: string;
7
+ }
8
+ export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports.Switch = void 0;
6
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
7
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _SwitchStyle = require("./SwitchStyle");
10
+ var _excluded = ["checked", "disabled", "onChange", "value"];
11
+ var Switch = /*#__PURE__*/_react["default"].forwardRef(function Switch(_ref, ref) {
12
+ var checked = _ref.checked,
13
+ disabled = _ref.disabled,
14
+ onChange = _ref.onChange,
15
+ value = _ref.value,
16
+ otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
17
+ return /*#__PURE__*/_react["default"].createElement(_SwitchStyle.LabelStyle, null, /*#__PURE__*/_react["default"].createElement(_SwitchStyle.InputStyle, (0, _extends2["default"])({
18
+ value: value
19
+ }, otherProps, {
20
+ disabled: disabled,
21
+ defaultChecked: checked,
22
+ type: "checkbox",
23
+ onChange: onChange,
24
+ ref: ref
25
+ })), /*#__PURE__*/_react["default"].createElement(_SwitchStyle.SwitchStyle, {
26
+ "data-disabled": disabled
27
+ }));
28
+ });
29
+ exports.Switch = Switch;
@@ -0,0 +1,4 @@
1
+ import { Meta } from '@storybook/react';
2
+ declare const _default: Meta<import("@storybook/react").Args>;
3
+ export default _default;
4
+ export declare const Interactive: any;
@@ -0,0 +1,3 @@
1
+ export declare const SwitchStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const InputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
3
+ export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports.SwitchStyle = exports.LabelStyle = exports.InputStyle = void 0;
6
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
7
+ var _ = require("..");
8
+ var _colors = require("../utilities/colors");
9
+ var SwitchStyle = _styledComponents["default"].div.withConfig({
10
+ displayName: "SwitchStyle",
11
+ componentId: "sc-7dlucf-0"
12
+ })(["position:relative;width:", ";height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";}border-radius:", ";padding:0;transition:300ms all;@media (max-width:", "){width:38px;height:22px;}&:before{transition:100ms all;content:'';position:absolute;width:16px;height:16px;border-radius:16px;top:50%;left:4px;background:", ";transform:translate(0,-50%);@media (max-width:", "){width:14px;height:14px;}}"], _.Spacing.space40, _.Spacing.space24, _colors.Neutral.B40, _colors.Neutral.B95, _.Spacing.space24, _.Breakpoints.large, _colors.Neutral.B100, _.Breakpoints.large);
13
+ exports.SwitchStyle = SwitchStyle;
14
+ var InputStyle = _styledComponents["default"].input.withConfig({
15
+ displayName: "SwitchStyle__InputStyle",
16
+ componentId: "sc-7dlucf-1"
17
+ })(["opacity:0;position:absolute;&:checked + ", "{background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{transform:translate(16px,-50%);}}"], SwitchStyle, _colors.Blue.S99, _colors.Neutral.B95);
18
+ exports.InputStyle = InputStyle;
19
+ var LabelStyle = _styledComponents["default"].label.withConfig({
20
+ displayName: "SwitchStyle__LabelStyle",
21
+ componentId: "sc-7dlucf-2"
22
+ })(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
23
+ exports.LabelStyle = LabelStyle;
@@ -0,0 +1 @@
1
+ export * from './Switch';
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ var _Switch = require("./Switch");
5
+ Object.keys(_Switch).forEach(function (key) {
6
+ if (key === "default" || key === "__esModule") return;
7
+ if (key in exports && exports[key] === _Switch[key]) return;
8
+ exports[key] = _Switch[key];
9
+ });
@@ -10,6 +10,7 @@ export { Badge, BadgeProps } from './Badge';
10
10
  export { Banner, BannerProps } from './Banner';
11
11
  export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton, } from './Button';
12
12
  export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
13
+ export { Card, CardProps } from './Card';
13
14
  export { Checkbox, CheckboxProps } from './Checkbox';
14
15
  export { CurrencyInput, CurrencyInputProps } from './CurrencyInput';
15
16
  export { Divider } from './Divider';
@@ -28,3 +29,4 @@ export { TextInput, TextInputProps } from './TextInput';
28
29
  export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
29
30
  export { Typography, TypographyProps } from './Typography';
30
31
  export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };
32
+ export { Switch } from './Switch';
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
4
+ exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
5
5
  var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
6
6
  exports.BorderRadius = BorderRadius;
7
7
  var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -41,6 +41,9 @@ exports.PrimaryButton = _Button.PrimaryButton;
41
41
  var _ButtonGroup = require("./ButtonGroup");
42
42
  exports.ButtonGroup = _ButtonGroup.ButtonGroup;
43
43
  exports.ButtonGroupProps = _ButtonGroup.ButtonGroupProps;
44
+ var _Card = require("./Card");
45
+ exports.Card = _Card.Card;
46
+ exports.CardProps = _Card.CardProps;
44
47
  var _Checkbox = require("./Checkbox");
45
48
  exports.Checkbox = _Checkbox.Checkbox;
46
49
  exports.CheckboxProps = _Checkbox.CheckboxProps;
@@ -99,5 +102,7 @@ exports.TooltipProps = _Tooltip.TooltipProps;
99
102
  var _Typography = require("./Typography");
100
103
  exports.Typography = _Typography.Typography;
101
104
  exports.TypographyProps = _Typography.TypographyProps;
105
+ var _Switch = require("./Switch");
106
+ exports.Switch = _Switch.Switch;
102
107
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
103
108
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -0,0 +1,4 @@
1
+ export declare type ComponentAction = {
2
+ label: string;
3
+ action: (...args: any[]) => void;
4
+ };
@@ -0,0 +1 @@
1
+ "use strict";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.196",
3
+ "version": "4.0.198",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",