@pingux/astro 1.30.0-alpha.1 → 1.30.0-alpha.3

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 (3) hide show
  1. package/lib/cjs/recipes/TrialExperienceIndustryButtons.stories.js +94 -77
  2. package/lib/recipes/TrialExperienceIndustryButtons.stories.js +94 -78
  3. package/package.json +1 -1
package/lib/cjs/recipes/TrialExperienceIndustryButtons.stories.js CHANGED
@@ -16,6 +16,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
16
16
 
17
17
  var _react = _interopRequireDefault(require("react"));
18
18
 
19
+ var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
20
+
19
21
  var _index = require("../index");
20
22
 
21
23
  var _useModalState = _interopRequireDefault(require("../hooks/useModalState"));
@@ -26,69 +28,83 @@ var _default = {
26
28
  title: 'Recipes/Trial Experience Buttons'
27
29
  };
28
30
  exports["default"] = _default;
29
- var headingTextStyle = {
30
- fontWeight: '3',
31
- fontSize: '30px',
32
- lineHeight: '37px',
33
- textAlign: 'center',
34
- color: 'text.primary',
35
- marginBottom: 'sm',
36
- marginTop: 'md'
37
- };
38
- var subheadingTextStyle = {
39
- fontWeight: '0',
40
- fontSize: 'lg',
41
- lineHeight: '20px',
42
- textAlign: 'center',
43
- alignSelf: 'center',
44
- color: 'text.primary',
45
- marginBottom: 'xl',
46
- maxWidth: '357px'
47
- };
48
- var buttonStyle = {
49
- width: '146px',
50
- height: '146px',
51
- backgroundColor: 'accent.99',
52
- borderColor: 'accent.90',
53
- borderWidth: '1px',
54
- borderStyle: 'solid',
55
- borderRadius: '5px',
56
- justifyContent: 'center',
57
- py: 0,
58
- '&:hover': {
59
- boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
60
- borderColor: 'accent.90'
31
+ var sx = {
32
+ contentProps: {
33
+ maxWidth: '880px',
34
+ width: '100%',
35
+ px: '40px',
36
+ pb: '45px',
37
+ overflowY: 'scroll'
38
+ },
39
+ buttonLabelStyle: {
40
+ whiteSpace: 'normal',
41
+ color: 'text.primary',
42
+ fontWeight: 1,
43
+ fontSize: 'lg',
44
+ lineHeight: '21px',
45
+ mb: '37px',
46
+ maxHeight: '115px',
47
+ overflow: 'hidden'
48
+ },
49
+ buttonStyle: {
50
+ width: '146px',
51
+ height: '146px',
52
+ backgroundColor: 'accent.99',
53
+ borderColor: 'accent.90',
54
+ borderWidth: '1px',
55
+ borderStyle: 'solid',
56
+ borderRadius: '5px',
57
+ justifyContent: 'center',
58
+ py: 0,
59
+ '&:hover': {
60
+ boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
61
+ borderColor: 'accent.90'
62
+ },
63
+ '&.is-pressed > div > svg > span': {
64
+ color: 'white'
65
+ },
66
+ '&.is-pressed > div > span': {
67
+ color: 'white'
68
+ }
61
69
  },
62
- '&.is-pressed > div > svg > span': {
63
- color: 'white'
70
+ gridContainerStyle: {
71
+ display: 'grid !important',
72
+ 'gridTemplateColumns': 'repeat(auto-fit, minmax(0, 146px))',
73
+ gap: '13px',
74
+ maxWidth: '862px',
75
+ 'boxSizing': 'border-box',
76
+ 'justifyContent': 'center',
77
+ overflow: 'hidden',
78
+ padding: '5px'
64
79
  },
65
- '&.is-pressed > div > span': {
66
- color: 'white'
80
+ headingTextStyle: {
81
+ fontWeight: '3',
82
+ fontSize: '30px',
83
+ lineHeight: '37px',
84
+ textAlign: 'center',
85
+ color: 'text.primary',
86
+ marginBottom: 'sm',
87
+ marginTop: 'md'
88
+ },
89
+ iconStyle: {
90
+ mb: 'sm',
91
+ mt: '25px'
92
+ },
93
+ InfoLinkBox: {
94
+ justifyContent: 'center',
95
+ pt: '30px'
96
+ },
97
+ subheadingTextStyle: {
98
+ fontWeight: '0',
99
+ fontSize: 'lg',
100
+ lineHeight: '20px',
101
+ textAlign: 'center',
102
+ alignSelf: 'center',
103
+ color: 'text.primary',
104
+ marginBottom: 'xl',
105
+ maxWidth: '357px'
67
106
  }
68
107
  };
69
- var buttonLabelStyles = {
70
- whiteSpace: 'normal',
71
- color: 'text.primary',
72
- fontWeight: 1,
73
- fontSize: 'lg',
74
- lineHeight: '21px',
75
- mb: '37px',
76
- maxHeight: '115px',
77
- display: '-webkit-box',
78
- 'webkitLineClamp': '2',
79
- 'webkitBoxOrient': 'vertical',
80
- overflow: 'hidden'
81
- };
82
- var gridContainerStyles = {
83
- display: 'grid !important',
84
- 'gridTemplateColumns': 'repeat(auto-fit, minmax(0, 146px))',
85
- gap: '13px',
86
- maxWidth: '862px',
87
- 'boxSizing': 'border-box',
88
- 'justifyContent': 'center',
89
- overflow: 'hidden',
90
- padding: '5px'
91
- };
92
108
 
93
109
  var retailSVG = function retailSVG(props) {
94
110
  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
@@ -657,40 +673,41 @@ var Default = function Default() {
657
673
  }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
658
674
  isOpen: state.isOpen,
659
675
  onClose: state.close,
660
- hasCloseButton: true,
661
- contentProps: {
662
- maxWidth: '880px',
663
- px: '40px',
664
- pb: '45px',
665
- overflowY: 'scroll'
666
- }
676
+ contentProps: sx.contentProps,
677
+ isDismissable: true
667
678
  }, (0, _react2.jsx)(_index.Box, {
668
679
  contentProps: true
669
- }, (0, _react2.jsx)(_index.Text, {
670
- sx: headingTextStyle
680
+ }, (0, _react2.jsx)(_index.IconButton, {
681
+ "aria-label": "Close modal window",
682
+ "data-id": "icon-button__close-modal-window",
683
+ size: 22,
684
+ variant: "modalCloseButton",
685
+ onPress: state.close
686
+ }, (0, _react2.jsx)(_index.Icon, {
687
+ icon: _CloseIcon["default"]
688
+ })), (0, _react2.jsx)(_index.Text, {
689
+ sx: sx.headingTextStyle
671
690
  }, "Choose Your Industry"), (0, _react2.jsx)(_index.Text, {
672
- sx: subheadingTextStyle
691
+ sx: sx.subheadingTextStyle
673
692
  }, "To further customize your experience, choose an industry that most resembles your own."), (0, _react2.jsx)(_index.Box, {
674
693
  isRow: true,
675
- sx: gridContainerStyles
694
+ sx: sx.gridContainerStyle
676
695
  }, (0, _map["default"])(buttons).call(buttons, function (button) {
677
696
  return (0, _react2.jsx)(_index.Button, {
678
- sx: buttonStyle,
697
+ sx: sx.buttonStyle,
679
698
  key: button.name
680
699
  }, (0, _react2.jsx)(_index.Box, {
681
700
  alignItems: "center"
682
701
  }, (0, _react2.jsx)(_index.Icon, {
683
702
  icon: button.icon,
684
- size: "58",
685
- mb: "xs",
686
- mt: "25px"
703
+ sx: sx.iconStyle,
704
+ size: "58"
687
705
  }), (0, _react2.jsx)(_index.Text, {
688
- sx: buttonLabelStyles
706
+ sx: sx.buttonLabelStyle
689
707
  }, button.name)));
690
708
  })), (0, _react2.jsx)(_index.Box, {
691
709
  isRow: true,
692
- justifyContent: "center",
693
- pt: "30px"
710
+ sx: sx.InfoLinkBox
694
711
  }, (0, _react2.jsx)(_index.Button, {
695
712
  variant: "link"
696
713
  }, "Skip"), (0, _react2.jsx)(_index.HelpHint, null, "Info skipping")))));
package/lib/recipes/TrialExperienceIndustryButtons.stories.js CHANGED
@@ -1,75 +1,90 @@
1
1
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
2
2
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
3
3
  import React from 'react';
4
- import { Box, Button, HelpHint, Icon, Modal, OverlayProvider, Text } from '../index';
4
+ import CloseIcon from 'mdi-react/CloseIcon';
5
+ import { Box, Button, HelpHint, Icon, IconButton, Modal, OverlayProvider, Text } from '../index';
5
6
  import useModalState from '../hooks/useModalState';
6
7
  import { jsx as ___EmotionJSX } from "@emotion/react";
7
8
  export default {
8
9
  title: 'Recipes/Trial Experience Buttons'
9
10
  };
10
- var headingTextStyle = {
11
- fontWeight: '3',
12
- fontSize: '30px',
13
- lineHeight: '37px',
14
- textAlign: 'center',
15
- color: 'text.primary',
16
- marginBottom: 'sm',
17
- marginTop: 'md'
18
- };
19
- var subheadingTextStyle = {
20
- fontWeight: '0',
21
- fontSize: 'lg',
22
- lineHeight: '20px',
23
- textAlign: 'center',
24
- alignSelf: 'center',
25
- color: 'text.primary',
26
- marginBottom: 'xl',
27
- maxWidth: '357px'
28
- };
29
- var buttonStyle = {
30
- width: '146px',
31
- height: '146px',
32
- backgroundColor: 'accent.99',
33
- borderColor: 'accent.90',
34
- borderWidth: '1px',
35
- borderStyle: 'solid',
36
- borderRadius: '5px',
37
- justifyContent: 'center',
38
- py: 0,
39
- '&:hover': {
40
- boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
41
- borderColor: 'accent.90'
11
+ var sx = {
12
+ contentProps: {
13
+ maxWidth: '880px',
14
+ width: '100%',
15
+ px: '40px',
16
+ pb: '45px',
17
+ overflowY: 'scroll'
18
+ },
19
+ buttonLabelStyle: {
20
+ whiteSpace: 'normal',
21
+ color: 'text.primary',
22
+ fontWeight: 1,
23
+ fontSize: 'lg',
24
+ lineHeight: '21px',
25
+ mb: '37px',
26
+ maxHeight: '115px',
27
+ overflow: 'hidden'
28
+ },
29
+ buttonStyle: {
30
+ width: '146px',
31
+ height: '146px',
32
+ backgroundColor: 'accent.99',
33
+ borderColor: 'accent.90',
34
+ borderWidth: '1px',
35
+ borderStyle: 'solid',
36
+ borderRadius: '5px',
37
+ justifyContent: 'center',
38
+ py: 0,
39
+ '&:hover': {
40
+ boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
41
+ borderColor: 'accent.90'
42
+ },
43
+ '&.is-pressed > div > svg > span': {
44
+ color: 'white'
45
+ },
46
+ '&.is-pressed > div > span': {
47
+ color: 'white'
48
+ }
49
+ },
50
+ gridContainerStyle: {
51
+ display: 'grid !important',
52
+ 'gridTemplateColumns': 'repeat(auto-fit, minmax(0, 146px))',
53
+ gap: '13px',
54
+ maxWidth: '862px',
55
+ 'boxSizing': 'border-box',
56
+ 'justifyContent': 'center',
57
+ overflow: 'hidden',
58
+ padding: '5px'
42
59
  },
43
- '&.is-pressed > div > svg > span': {
44
- color: 'white'
60
+ headingTextStyle: {
61
+ fontWeight: '3',
62
+ fontSize: '30px',
63
+ lineHeight: '37px',
64
+ textAlign: 'center',
65
+ color: 'text.primary',
66
+ marginBottom: 'sm',
67
+ marginTop: 'md'
45
68
  },
46
- '&.is-pressed > div > span': {
47
- color: 'white'
69
+ iconStyle: {
70
+ mb: 'sm',
71
+ mt: '25px'
72
+ },
73
+ InfoLinkBox: {
74
+ justifyContent: 'center',
75
+ pt: '30px'
76
+ },
77
+ subheadingTextStyle: {
78
+ fontWeight: '0',
79
+ fontSize: 'lg',
80
+ lineHeight: '20px',
81
+ textAlign: 'center',
82
+ alignSelf: 'center',
83
+ color: 'text.primary',
84
+ marginBottom: 'xl',
85
+ maxWidth: '357px'
48
86
  }
49
87
  };
50
- var buttonLabelStyles = {
51
- whiteSpace: 'normal',
52
- color: 'text.primary',
53
- fontWeight: 1,
54
- fontSize: 'lg',
55
- lineHeight: '21px',
56
- mb: '37px',
57
- maxHeight: '115px',
58
- display: '-webkit-box',
59
- 'webkitLineClamp': '2',
60
- 'webkitBoxOrient': 'vertical',
61
- overflow: 'hidden'
62
- };
63
- var gridContainerStyles = {
64
- display: 'grid !important',
65
- 'gridTemplateColumns': 'repeat(auto-fit, minmax(0, 146px))',
66
- gap: '13px',
67
- maxWidth: '862px',
68
- 'boxSizing': 'border-box',
69
- 'justifyContent': 'center',
70
- overflow: 'hidden',
71
- padding: '5px'
72
- };
73
88
 
74
89
  var retailSVG = function retailSVG(props) {
75
90
  return ___EmotionJSX("svg", _extends({
@@ -637,40 +652,41 @@ export var Default = function Default() {
637
652
  }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
638
653
  isOpen: state.isOpen,
639
654
  onClose: state.close,
640
- hasCloseButton: true,
641
- contentProps: {
642
- maxWidth: '880px',
643
- px: '40px',
644
- pb: '45px',
645
- overflowY: 'scroll'
646
- }
655
+ contentProps: sx.contentProps,
656
+ isDismissable: true
647
657
  }, ___EmotionJSX(Box, {
648
658
  contentProps: true
649
- }, ___EmotionJSX(Text, {
650
- sx: headingTextStyle
659
+ }, ___EmotionJSX(IconButton, {
660
+ "aria-label": "Close modal window",
661
+ "data-id": "icon-button__close-modal-window",
662
+ size: 22,
663
+ variant: "modalCloseButton",
664
+ onPress: state.close
665
+ }, ___EmotionJSX(Icon, {
666
+ icon: CloseIcon
667
+ })), ___EmotionJSX(Text, {
668
+ sx: sx.headingTextStyle
651
669
  }, "Choose Your Industry"), ___EmotionJSX(Text, {
652
- sx: subheadingTextStyle
670
+ sx: sx.subheadingTextStyle
653
671
  }, "To further customize your experience, choose an industry that most resembles your own."), ___EmotionJSX(Box, {
654
672
  isRow: true,
655
- sx: gridContainerStyles
673
+ sx: sx.gridContainerStyle
656
674
  }, _mapInstanceProperty(buttons).call(buttons, function (button) {
657
675
  return ___EmotionJSX(Button, {
658
- sx: buttonStyle,
676
+ sx: sx.buttonStyle,
659
677
  key: button.name
660
678
  }, ___EmotionJSX(Box, {
661
679
  alignItems: "center"
662
680
  }, ___EmotionJSX(Icon, {
663
681
  icon: button.icon,
664
- size: "58",
665
- mb: "xs",
666
- mt: "25px"
682
+ sx: sx.iconStyle,
683
+ size: "58"
667
684
  }), ___EmotionJSX(Text, {
668
- sx: buttonLabelStyles
685
+ sx: sx.buttonLabelStyle
669
686
  }, button.name)));
670
687
  })), ___EmotionJSX(Box, {
671
688
  isRow: true,
672
- justifyContent: "center",
673
- pt: "30px"
689
+ sx: sx.InfoLinkBox
674
690
  }, ___EmotionJSX(Button, {
675
691
  variant: "link"
676
692
  }, "Skip"), ___EmotionJSX(HelpHint, null, "Info skipping")))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.30.0-alpha.1",
3
+ "version": "1.30.0-alpha.3",
4
4
  "description": "PingUX themeable React component library",
5
5
  "repository": {
6
6
  "type": "git",