@pareto-engineering/design-system 2.0.0-alpha.53 → 2.0.0-alpha.56

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 (225) hide show
  1. package/dist/cjs/a/Alert/Alert.js +141 -0
  2. package/dist/cjs/a/Alert/index.js +15 -0
  3. package/dist/cjs/a/Alert/styles.scss +74 -0
  4. package/dist/cjs/a/GradientBackground/GradientBackground.js +140 -0
  5. package/dist/cjs/a/GradientBackground/index.js +15 -0
  6. package/dist/cjs/a/GradientBackground/styles.scss +191 -0
  7. package/dist/cjs/a/Popover/common/Divider/Divider.js +67 -0
  8. package/dist/cjs/a/Popover/common/Divider/index.js +15 -0
  9. package/dist/cjs/a/Popover/common/Item/Item.js +67 -0
  10. package/dist/cjs/a/Popover/common/Item/index.js +15 -0
  11. package/dist/cjs/a/Popover/common/index.js +21 -0
  12. package/dist/cjs/a/index.js +9 -1
  13. package/dist/cjs/c/AcceptCookies/AcceptCookies.js +134 -0
  14. package/dist/cjs/c/AcceptCookies/index.js +15 -0
  15. package/dist/cjs/c/AcceptCookies/styles.scss +49 -0
  16. package/dist/cjs/c/BlogCategoryButton/BlogCategoryButton.js +95 -0
  17. package/dist/cjs/c/BlogCategoryButton/index.js +15 -0
  18. package/dist/cjs/c/BlogContext/BlogContextProvider.js +63 -0
  19. package/dist/cjs/c/BlogContext/Context.js +16 -0
  20. package/dist/cjs/c/BlogContext/ContextProvider.js +63 -0
  21. package/dist/cjs/c/BlogContext/index.js +31 -0
  22. package/dist/cjs/c/BlogContext/useBlog.js +16 -0
  23. package/dist/cjs/c/BlogPost/BlogPost.js +147 -0
  24. package/dist/cjs/c/BlogPost/index.js +15 -0
  25. package/dist/cjs/c/BlogPost/styles.scss +33 -0
  26. package/dist/cjs/c/BlogPostsList/BlogPostsList.js +73 -0
  27. package/dist/cjs/c/BlogPostsList/common/Card/Card.js +170 -0
  28. package/dist/cjs/c/BlogPostsList/common/Card/index.js +15 -0
  29. package/dist/cjs/c/BlogPostsList/common/index.js +13 -0
  30. package/dist/cjs/c/BlogPostsList/index.js +15 -0
  31. package/dist/cjs/c/BlogPostsList/styles.scss +72 -0
  32. package/dist/cjs/c/SiteFooter/SiteFooter.js +73 -0
  33. package/dist/cjs/c/SiteFooter/common/Section/Section.js +95 -0
  34. package/dist/cjs/c/SiteFooter/common/Section/index.js +15 -0
  35. package/dist/cjs/c/SiteFooter/common/index.js +13 -0
  36. package/dist/cjs/c/SiteFooter/index.js +15 -0
  37. package/dist/cjs/c/SiteFooter/styles.scss +34 -0
  38. package/dist/cjs/c/SiteHeaderCTA/SiteHeaderCTA.js +108 -0
  39. package/dist/cjs/c/SiteHeaderCTA/index.js +15 -0
  40. package/dist/cjs/c/SiteHeaderCTA/styles.scss +44 -0
  41. package/dist/cjs/c/SiteMission/SiteMission.js +113 -0
  42. package/dist/cjs/c/SiteMission/index.js +15 -0
  43. package/dist/cjs/c/SiteMission/styles.scss +30 -0
  44. package/dist/cjs/c/SiteNavigation/SiteNavigation.js +130 -0
  45. package/dist/cjs/c/SiteNavigation/index.js +15 -0
  46. package/dist/cjs/c/SiteNavigation/styles.scss +118 -0
  47. package/dist/cjs/c/SiteOnboardingStep/SiteOnboardingStep.js +98 -0
  48. package/dist/cjs/c/SiteOnboardingStep/index.js +15 -0
  49. package/dist/cjs/c/SiteOnboardingStep/styles.scss +51 -0
  50. package/dist/cjs/c/SitePricing/SitePricing.js +108 -0
  51. package/dist/cjs/c/SitePricing/index.js +15 -0
  52. package/dist/cjs/c/SitePricing/styles.scss +73 -0
  53. package/dist/cjs/c/SiteServices/SiteServices.js +211 -0
  54. package/dist/cjs/c/SiteServices/index.js +15 -0
  55. package/dist/cjs/c/SiteServices/styles.scss +138 -0
  56. package/dist/cjs/c/TeamGallery/TeamGallery.js +80 -0
  57. package/dist/cjs/c/TeamGallery/common/PersonCard/PersonCard.js +84 -0
  58. package/dist/cjs/c/TeamGallery/common/PersonCard/index.js +15 -0
  59. package/dist/cjs/c/TeamGallery/common/index.js +13 -0
  60. package/dist/cjs/c/TeamGallery/index.js +15 -0
  61. package/dist/cjs/c/TeamGallery/styles.scss +100 -0
  62. package/dist/cjs/c/Testimonials/Testimonials.js +119 -0
  63. package/dist/cjs/c/Testimonials/index.js +15 -0
  64. package/dist/cjs/c/Testimonials/styles.scss +112 -0
  65. package/dist/cjs/experimental/GradientBackground/GradientBackground.js +98 -0
  66. package/dist/cjs/experimental/GradientBackground/index.js +15 -0
  67. package/dist/cjs/experimental/GradientBackground/styles.scss +64 -0
  68. package/dist/cjs/experimental/index.js +13 -0
  69. package/dist/cjs/f/FormInput/FormInput.js +1 -1
  70. package/dist/cjs/f/common/Description/Description.js +20 -14
  71. package/dist/cjs/f/fields/CheckboxInput/CheckboxInput.js +105 -0
  72. package/dist/cjs/f/fields/CheckboxInput/index.js +15 -0
  73. package/dist/cjs/f/fields/CheckboxInput/styles.scss +28 -0
  74. package/dist/cjs/f/fields/IntlTelInput/IntlTelInput.js +170 -0
  75. package/dist/cjs/f/fields/IntlTelInput/index.js +15 -0
  76. package/dist/cjs/f/fields/IntlTelInput/styles.scss +37 -0
  77. package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +0 -2
  78. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +5 -9
  79. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +5 -9
  80. package/dist/cjs/f/fields/QuerySelect/styles.scss +21 -0
  81. package/dist/cjs/f/fields/RadioInput/RadioInput.js +110 -0
  82. package/dist/cjs/f/fields/RadioInput/index.js +15 -0
  83. package/dist/cjs/f/fields/RadioInput/styles.scss +26 -0
  84. package/dist/cjs/f/fields/SelectInput/SelectInput.js +16 -8
  85. package/dist/cjs/f/fields/TaskRecommendation/TaskRecommendation.js +129 -0
  86. package/dist/cjs/f/fields/TaskRecommendation/index.js +15 -0
  87. package/dist/cjs/f/fields/TaskRecommendation/styles.scss +37 -0
  88. package/dist/cjs/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +131 -0
  89. package/dist/cjs/f/fields/TaskRecommendationInput/index.js +15 -0
  90. package/dist/cjs/f/fields/TaskRecommendationInput/styles.scss +41 -0
  91. package/dist/cjs/f/fields/TextArea/TextArea.js +141 -0
  92. package/dist/cjs/f/fields/TextArea/index.js +15 -0
  93. package/dist/cjs/f/fields/TextArea/styles.scss +19 -0
  94. package/dist/cjs/f/fields/TextInput/TextInput.js +18 -9
  95. package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +16 -8
  96. package/dist/cjs/test/QueryLoader/styles.scss +9 -0
  97. package/dist/es/a/Alert/Alert.js +118 -0
  98. package/dist/es/a/Alert/index.js +2 -0
  99. package/dist/es/a/Alert/styles.scss +74 -0
  100. package/dist/es/a/GradientBackground/GradientBackground.js +118 -0
  101. package/dist/es/a/GradientBackground/index.js +2 -0
  102. package/dist/es/a/GradientBackground/styles.scss +191 -0
  103. package/dist/es/a/Popover/common/Divider/Divider.js +47 -0
  104. package/dist/es/a/Popover/common/Divider/index.js +2 -0
  105. package/dist/es/a/Popover/common/Item/Item.js +47 -0
  106. package/dist/es/a/Popover/common/Item/index.js +2 -0
  107. package/dist/es/a/Popover/common/index.js +2 -0
  108. package/dist/es/a/index.js +2 -1
  109. package/dist/es/c/AcceptCookies/AcceptCookies.js +117 -0
  110. package/dist/es/c/AcceptCookies/index.js +2 -0
  111. package/dist/es/c/AcceptCookies/styles.scss +49 -0
  112. package/dist/es/c/BlogCategoryButton/BlogCategoryButton.js +68 -0
  113. package/dist/es/c/BlogCategoryButton/index.js +2 -0
  114. package/dist/es/c/BlogContext/BlogContextProvider.js +45 -0
  115. package/dist/es/c/BlogContext/Context.js +2 -0
  116. package/dist/es/c/BlogContext/ContextProvider.js +45 -0
  117. package/dist/es/c/BlogContext/index.js +4 -0
  118. package/dist/es/c/BlogContext/useBlog.js +3 -0
  119. package/dist/es/c/BlogPost/BlogPost.js +128 -0
  120. package/dist/es/c/BlogPost/index.js +2 -0
  121. package/dist/es/c/BlogPost/styles.scss +33 -0
  122. package/dist/es/c/BlogPostsList/BlogPostsList.js +56 -0
  123. package/dist/es/c/BlogPostsList/common/Card/Card.js +143 -0
  124. package/dist/es/c/BlogPostsList/common/Card/index.js +2 -0
  125. package/dist/es/c/BlogPostsList/common/index.js +1 -0
  126. package/dist/es/c/BlogPostsList/index.js +2 -0
  127. package/dist/es/c/BlogPostsList/styles.scss +72 -0
  128. package/dist/es/c/SiteFooter/SiteFooter.js +56 -0
  129. package/dist/es/c/SiteFooter/common/Section/Section.js +73 -0
  130. package/dist/es/c/SiteFooter/common/Section/index.js +2 -0
  131. package/dist/es/c/SiteFooter/common/index.js +1 -0
  132. package/dist/es/c/SiteFooter/index.js +2 -0
  133. package/dist/es/c/SiteFooter/styles.scss +34 -0
  134. package/dist/es/c/SiteHeaderCTA/SiteHeaderCTA.js +92 -0
  135. package/dist/es/c/SiteHeaderCTA/index.js +2 -0
  136. package/dist/es/c/SiteHeaderCTA/styles.scss +44 -0
  137. package/dist/es/c/SiteMission/SiteMission.js +96 -0
  138. package/dist/es/c/SiteMission/index.js +2 -0
  139. package/dist/es/c/SiteMission/styles.scss +30 -0
  140. package/dist/es/c/SiteNavigation/SiteNavigation.js +111 -0
  141. package/dist/es/c/SiteNavigation/index.js +2 -0
  142. package/dist/es/c/SiteNavigation/styles.scss +118 -0
  143. package/dist/es/c/SiteOnboardingStep/SiteOnboardingStep.js +81 -0
  144. package/dist/es/c/SiteOnboardingStep/index.js +2 -0
  145. package/dist/es/c/SiteOnboardingStep/styles.scss +51 -0
  146. package/dist/es/c/SitePricing/SitePricing.js +91 -0
  147. package/dist/es/c/SitePricing/index.js +2 -0
  148. package/dist/es/c/SitePricing/styles.scss +73 -0
  149. package/dist/es/c/SiteServices/SiteServices.js +195 -0
  150. package/dist/es/c/SiteServices/index.js +2 -0
  151. package/dist/es/c/SiteServices/styles.scss +138 -0
  152. package/dist/es/c/TeamGallery/TeamGallery.js +64 -0
  153. package/dist/es/c/TeamGallery/common/PersonCard/PersonCard.js +64 -0
  154. package/dist/es/c/TeamGallery/common/PersonCard/index.js +2 -0
  155. package/dist/es/c/TeamGallery/common/index.js +1 -0
  156. package/dist/es/c/TeamGallery/index.js +2 -0
  157. package/dist/es/c/TeamGallery/styles.scss +100 -0
  158. package/dist/es/c/Testimonials/Testimonials.js +99 -0
  159. package/dist/es/c/Testimonials/index.js +2 -0
  160. package/dist/es/c/Testimonials/styles.scss +112 -0
  161. package/dist/es/experimental/GradientBackground/GradientBackground.js +76 -0
  162. package/dist/es/experimental/GradientBackground/index.js +2 -0
  163. package/dist/es/experimental/GradientBackground/styles.scss +64 -0
  164. package/dist/es/experimental/index.js +1 -0
  165. package/dist/es/f/FormInput/FormInput.js +1 -1
  166. package/dist/es/f/common/Description/Description.js +19 -14
  167. package/dist/es/f/fields/CheckboxInput/CheckboxInput.js +85 -0
  168. package/dist/es/f/fields/CheckboxInput/index.js +2 -0
  169. package/dist/es/f/fields/CheckboxInput/styles.scss +28 -0
  170. package/dist/es/f/fields/IntlTelInput/IntlTelInput.js +152 -0
  171. package/dist/es/f/fields/IntlTelInput/index.js +2 -0
  172. package/dist/es/f/fields/IntlTelInput/styles.scss +37 -0
  173. package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +0 -2
  174. package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +5 -9
  175. package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +5 -9
  176. package/dist/es/f/fields/QuerySelect/styles.scss +21 -0
  177. package/dist/es/f/fields/RadioInput/RadioInput.js +90 -0
  178. package/dist/es/f/fields/RadioInput/index.js +2 -0
  179. package/dist/es/f/fields/RadioInput/styles.scss +26 -0
  180. package/dist/es/f/fields/SelectInput/SelectInput.js +16 -8
  181. package/dist/es/f/fields/TaskRecommendation/TaskRecommendation.js +111 -0
  182. package/dist/es/f/fields/TaskRecommendation/index.js +2 -0
  183. package/dist/es/f/fields/TaskRecommendation/styles.scss +37 -0
  184. package/dist/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +111 -0
  185. package/dist/es/f/fields/TaskRecommendationInput/index.js +2 -0
  186. package/dist/es/f/fields/TaskRecommendationInput/styles.scss +41 -0
  187. package/dist/es/f/fields/TextArea/TextArea.js +124 -0
  188. package/dist/es/f/fields/TextArea/index.js +2 -0
  189. package/dist/es/f/fields/TextArea/styles.scss +19 -0
  190. package/dist/es/f/fields/TextInput/TextInput.js +18 -9
  191. package/dist/es/f/fields/TextareaInput/TextareaInput.js +16 -8
  192. package/dist/es/test/QueryLoader/styles.scss +9 -0
  193. package/package.json +2 -2
  194. package/src/__snapshots__/Storyshots.test.js.snap +1864 -1423
  195. package/src/stories/a/Alert.stories.jsx +75 -0
  196. package/src/stories/a/DotInfo.stories.jsx +14 -13
  197. package/src/stories/a/ProgressBar.stories.jsx +16 -7
  198. package/src/stories/a/Timestamp.stories.jsx +35 -39
  199. package/src/stories/b/Logo.stories.jsx +13 -12
  200. package/src/stories/b/QuestionDropdown.stories.jsx +20 -30
  201. package/src/stories/b/SocialMediaButton.stories.jsx +34 -51
  202. package/src/stories/b/Title.stories.jsx +13 -15
  203. package/src/stories/c/ContentSlides.stories.jsx +27 -295
  204. package/src/stories/c/Shortener.stories.jsx +9 -3
  205. package/src/stories/c/SocialMediaShareButton.stories.jsx +14 -6
  206. package/src/stories/f/ChoicesInput.stories.jsx +66 -130
  207. package/src/stories/f/Description.stories.jsx +22 -4
  208. package/src/stories/f/QueryCombobox.stories.jsx +2 -1
  209. package/src/stories/f/QuerySelect.stories.jsx +2 -1
  210. package/src/stories/f/RatingsInput.stories.jsx +29 -23
  211. package/src/stories/f/SelectInput.stories.jsx +37 -76
  212. package/src/stories/f/TextInput.stories.jsx +62 -53
  213. package/src/stories/f/TextareaInput.stories.jsx +37 -47
  214. package/src/ui/a/Alert/Alert.jsx +144 -0
  215. package/src/ui/a/Alert/index.js +2 -0
  216. package/src/ui/a/Alert/styles.scss +74 -0
  217. package/src/ui/a/index.js +1 -0
  218. package/src/ui/f/FormInput/FormInput.jsx +1 -0
  219. package/src/ui/f/common/Description/Description.jsx +34 -29
  220. package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +1 -2
  221. package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +1 -11
  222. package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx +1 -11
  223. package/src/ui/f/fields/SelectInput/SelectInput.jsx +16 -9
  224. package/src/ui/f/fields/TextInput/TextInput.jsx +13 -7
  225. package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +9 -8
@@ -0,0 +1,141 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _b = require("../../b");
13
+
14
+ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
19
+
20
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
21
+
22
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
23
+
24
+ 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); }
25
+
26
+ 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; }
27
+
28
+ // Local Definitions
29
+ var baseClassName = _bem.default.base;
30
+ var componentClassName = 'alert';
31
+ /**
32
+ * This is the component description.
33
+ */
34
+
35
+ var Alert = _ref => {
36
+ var {
37
+ id,
38
+ className: userClassName,
39
+ style,
40
+ children,
41
+ type,
42
+ withCloseIcon,
43
+ primaryPosition,
44
+ secondaryPosition,
45
+ autoCloseMs,
46
+ width // ...otherProps
47
+
48
+ } = _ref;
49
+ (0, React.useLayoutEffect)(() => {
50
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
51
+ }, []);
52
+ var [hideAlert, setHideAlert] = (0, React.useState)(false);
53
+
54
+ var handleCloseAlert = () => setHideAlert(true);
55
+
56
+ (0, React.useEffect)(() => {
57
+ if (autoCloseMs) {
58
+ setTimeout(() => {
59
+ setHideAlert(true);
60
+ }, autoCloseMs);
61
+ }
62
+ }, [autoCloseMs]);
63
+ return /*#__PURE__*/React.createElement("div", {
64
+ id: id,
65
+ className: [baseClassName, componentClassName, userClassName, "x-".concat(type), hideAlert && 'hide', primaryPosition, secondaryPosition].filter(e => e).join(' '),
66
+ style: _objectSpread(_objectSpread({}, style), {}, {
67
+ '--width': width
68
+ }) // {...otherProps}
69
+
70
+ }, /*#__PURE__*/React.createElement("div", {
71
+ className: "bar"
72
+ }), withCloseIcon && /*#__PURE__*/React.createElement("div", {
73
+ className: "close"
74
+ }, /*#__PURE__*/React.createElement(_b.Button, {
75
+ isSimple: true,
76
+ color: "heading",
77
+ onClick: handleCloseAlert
78
+ }, /*#__PURE__*/React.createElement("span", {
79
+ className: "f-icons"
80
+ }, "Y"))), /*#__PURE__*/React.createElement("div", {
81
+ className: "content"
82
+ }, children));
83
+ };
84
+
85
+ Alert.propTypes = {
86
+ /**
87
+ * The HTML id for this element
88
+ */
89
+ id: _propTypes.default.string,
90
+
91
+ /**
92
+ * The HTML class names for this element
93
+ */
94
+ className: _propTypes.default.string,
95
+
96
+ /**
97
+ * The React-written, css properties for this element.
98
+ */
99
+ style: _propTypes.default.objectOf(_propTypes.default.string),
100
+
101
+ /**
102
+ * The children JSX
103
+ */
104
+ children: _propTypes.default.node,
105
+
106
+ /**
107
+ * Whether the alert should have a close Icon
108
+ */
109
+ withCloseIcon: _propTypes.default.bool,
110
+
111
+ /**
112
+ * The primary position of the alert
113
+ */
114
+ primaryPosition: _propTypes.default.oneOf(['top', 'bottom', 'center']),
115
+
116
+ /**
117
+ * The secondary position of the alert
118
+ */
119
+ secondaryPosition: _propTypes.default.oneOf(['left', 'right']),
120
+
121
+ /**
122
+ * The number milisseconds to wait for before closing the alert
123
+ */
124
+ autoCloseMs: _propTypes.default.number,
125
+
126
+ /**
127
+ * The type of the alert
128
+ */
129
+ type: _propTypes.default.oneOf(['success', 'warning', 'error']),
130
+
131
+ /**
132
+ * The width of the alert
133
+ */
134
+ width: _propTypes.default.number
135
+ };
136
+ Alert.defaultProps = {
137
+ withCloseIcon: true,
138
+ primaryPosition: 'top'
139
+ };
140
+ var _default = Alert;
141
+ exports.default = _default;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Alert", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Alert.default;
10
+ }
11
+ });
12
+
13
+ var _Alert = _interopRequireDefault(require("./Alert"));
14
+
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,74 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+ @use "@pareto-engineering/bem";
3
+ @use "@aztlan/stylebook/src/mixins";
4
+ @use "@aztlan/stylebook/src/globals" as *;
5
+
6
+ $default-padding: 1em;
7
+ $default-bar-height: .3em;
8
+ $default-alert-desktop-width: var(--width, 30em);
9
+
10
+ .#{bem.$base}.alert {
11
+ border: var(--theme-border);
12
+ padding-bottom: $default-padding * 1.5;
13
+ width: 100%;
14
+ position: absolute;
15
+ z-index: 1;
16
+
17
+ &.center {
18
+ top: 50%;
19
+ left: 50%;
20
+ transform: translate(-50%, -50%);
21
+ }
22
+
23
+ &.top {
24
+ top: 0;
25
+ }
26
+
27
+ &.bottom {
28
+ bottom: 0;
29
+ }
30
+
31
+ &.right {
32
+ right: 0;
33
+ }
34
+
35
+ &.left {
36
+ left: 0;
37
+ }
38
+
39
+ &.hide {
40
+ display: none;
41
+ }
42
+
43
+ >.bar {
44
+ background-color: var(--x);
45
+ height: $default-bar-height;
46
+ }
47
+
48
+ >.close {
49
+ display: flex;
50
+ justify-content: flex-end;
51
+
52
+ span {
53
+ padding: $default-padding / 2;
54
+ font-size: calc(var(--s-2) * 1em);
55
+ }
56
+ }
57
+
58
+ .bar+.content {
59
+ padding-top: $default-padding * 1.5;
60
+ }
61
+
62
+ >.content {
63
+ padding-inline: $default-padding;
64
+
65
+ .icon {
66
+ color: var(--x)
67
+ }
68
+ }
69
+
70
+ // Desktop styles
71
+ @include mixins.media($from: $sm-md) {
72
+ width: $default-alert-desktop-width;
73
+ }
74
+ }
@@ -0,0 +1,140 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
17
+
18
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
19
+
20
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
21
+
22
+ 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); }
23
+
24
+ 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; }
25
+
26
+ // Local Definitions
27
+ var baseClassName = _bem.default.base;
28
+ var componentClassName = 'gradient-background';
29
+ /**
30
+ * This is the component description.
31
+ */
32
+
33
+ var GradientBackground = _ref => {
34
+ var {
35
+ id,
36
+ className: userClassName,
37
+ style,
38
+ pin,
39
+ shape,
40
+ height,
41
+ width // ...otherProps
42
+
43
+ } = _ref;
44
+ (0, React.useLayoutEffect)(() => {
45
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
46
+ }, []);
47
+ return /*#__PURE__*/React.createElement("div", {
48
+ id: id,
49
+ className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
50
+ style: _objectSpread(_objectSpread({}, style), {}, {
51
+ '--pin': pin,
52
+ '--height': height,
53
+ '--width': width
54
+ }) // {...otherProps}
55
+
56
+ }, /*#__PURE__*/React.createElement("div", {
57
+ className: "shapes"
58
+ }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
59
+ className: "triangle"
60
+ }), shape === 'half-ellipses' && /*#__PURE__*/React.createElement("div", {
61
+ className: "half-ellipses"
62
+ }, /*#__PURE__*/React.createElement("div", {
63
+ className: "up"
64
+ }), /*#__PURE__*/React.createElement("div", {
65
+ className: "down"
66
+ })), shape === 'ellipse' && /*#__PURE__*/React.createElement("div", {
67
+ className: "ellipse"
68
+ }), shape === 'diamonds' && /*#__PURE__*/React.createElement("div", {
69
+ className: "diamonds"
70
+ }, /*#__PURE__*/React.createElement("div", {
71
+ className: "top-right"
72
+ }), /*#__PURE__*/React.createElement("div", {
73
+ className: "bottom-left"
74
+ }), /*#__PURE__*/React.createElement("div", {
75
+ className: "bottom-right"
76
+ })), shape === 'rectangles' && /*#__PURE__*/React.createElement("div", {
77
+ className: "rectangles"
78
+ }, /*#__PURE__*/React.createElement("div", {
79
+ className: "top"
80
+ }), /*#__PURE__*/React.createElement("div", {
81
+ className: "center"
82
+ }), /*#__PURE__*/React.createElement("div", {
83
+ className: "bottom"
84
+ })), shape === 'half-ellipse' && /*#__PURE__*/React.createElement("div", {
85
+ className: "half-ellipse"
86
+ }), shape === 'circle' && /*#__PURE__*/React.createElement("div", {
87
+ className: "circle"
88
+ }), shape === 'half-circle' && /*#__PURE__*/React.createElement("div", {
89
+ className: "half-circle"
90
+ }), shape === 'ellipses' && /*#__PURE__*/React.createElement("div", {
91
+ className: "ellipses"
92
+ }, /*#__PURE__*/React.createElement("div", {
93
+ className: "first"
94
+ }), /*#__PURE__*/React.createElement("div", {
95
+ className: "second"
96
+ })), shape === 'spiral' && /*#__PURE__*/React.createElement("div", {
97
+ className: "spiral"
98
+ }, /*#__PURE__*/React.createElement("div", {
99
+ className: "quater-circle-one"
100
+ }), /*#__PURE__*/React.createElement("div", {
101
+ className: "quater-circle-two"
102
+ }), /*#__PURE__*/React.createElement("div", {
103
+ className: "quater-circle-three"
104
+ }), /*#__PURE__*/React.createElement("div", {
105
+ className: "quater-circle-four"
106
+ }))));
107
+ };
108
+
109
+ GradientBackground.propTypes = {
110
+ /**
111
+ * The HTML id for this element
112
+ */
113
+ id: _propTypes.default.string,
114
+
115
+ /**
116
+ * The HTML class names for this element
117
+ */
118
+ className: _propTypes.default.string,
119
+
120
+ /**
121
+ * The React-written, css properties for this element.
122
+ */
123
+ style: _propTypes.default.objectOf(_propTypes.default.string),
124
+
125
+ /**
126
+ * Where to pin the shapes
127
+ */
128
+ pin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
129
+
130
+ /**
131
+ * The options of a shape to use
132
+ */
133
+ shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles'])
134
+ };
135
+ GradientBackground.defaultProps = {
136
+ pin: 'center',
137
+ shape: 'triangle'
138
+ };
139
+ var _default = GradientBackground;
140
+ exports.default = _default;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "GradientBackground", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _GradientBackground.default;
10
+ }
11
+ });
12
+
13
+ var _GradientBackground = _interopRequireDefault(require("./GradientBackground"));
14
+
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,191 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+
3
+ @use "@pareto-engineering/bem";
4
+
5
+ $default-triangle-dimension:30em;
6
+ $default-ellipses-dimension:50em;
7
+ $default-ellipse-dimension:50em;
8
+ $default-shapes-opacity:.8;
9
+ $default-diamonds-dimension:40em;
10
+ $default-circle-dimension:40em;
11
+
12
+ .#{bem.$base}.gradient-background {
13
+ align-items: center;
14
+ background: var(--light-y);
15
+ display: flex;
16
+ flex-direction: column;
17
+ height: 100%;
18
+ justify-content: var(--pin);
19
+ position: absolute;
20
+ width: 100%;
21
+
22
+ .shapes {
23
+ display: flex;
24
+ justify-content: center;
25
+
26
+ .triangle {
27
+ background-image: linear-gradient(var(--light-y), var(--dark-y));
28
+ clip-path: polygon(0 0, 50% 100%, 100% 0);
29
+ height: $default-triangle-dimension * .86;
30
+ opacity: $default-shapes-opacity;
31
+ width: $default-triangle-dimension;
32
+ }
33
+
34
+ .half-ellipses {
35
+
36
+ height: $default-ellipses-dimension / 2;
37
+ width: $default-ellipses-dimension;
38
+ opacity: $default-shapes-opacity;
39
+
40
+ .up {
41
+ background-image: linear-gradient(var(--light-y), var(--y));
42
+ clip-path: ellipse(40% 100% at 50% 0%);
43
+ height:50%;
44
+ }
45
+
46
+ .down {
47
+ background-image: linear-gradient(to top, var(--light-y), var(--y));
48
+ clip-path: ellipse(40% 100% at 50% 100%);
49
+ height:50%;
50
+ }
51
+
52
+ }
53
+
54
+ .ellipse {
55
+ height: $default-ellipse-dimension / 1.5;
56
+ width: $default-ellipse-dimension;
57
+ background-image: linear-gradient( to top left, var(--dark-y), var(--light-y),var(--dark-y));
58
+ clip-path: ellipse(50% 25% at 50% 50%);
59
+ opacity: $default-shapes-opacity;
60
+ transform: rotate3d(0, 0, -1, 10deg);
61
+ }
62
+
63
+ .diamonds {
64
+
65
+ height: $default-diamonds-dimension;
66
+ width: $default-diamonds-dimension;
67
+ opacity: $default-shapes-opacity;
68
+ position: relative;
69
+
70
+ .top-right {
71
+ height: 100%;
72
+ width: 100%;
73
+ background-image: linear-gradient(to right, var(--dark-y), var(--y));
74
+ clip-path: polygon(100% 100%, 0 0, 100% 0);
75
+ position: absolute;
76
+ }
77
+ .bottom-left {
78
+ height: 100%;
79
+ width: 100%;
80
+ background-image: linear-gradient(to left, var(--dark-y), var(--y));
81
+ clip-path: polygon(0 100%, 0 0, 100% 100%);
82
+ position: absolute;
83
+ z-index: 1;
84
+ opacity: .95;
85
+ }
86
+ .bottom-right {
87
+ height: 100%;
88
+ width: 100%;
89
+ background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
90
+ clip-path: polygon(100% 100%, 100% 0, 0 100%);
91
+ position: absolute;
92
+ }
93
+ }
94
+
95
+ .rectangles {
96
+ height: $default-diamonds-dimension;
97
+ width: $default-diamonds-dimension;
98
+ opacity: $default-shapes-opacity;
99
+ display: grid;
100
+ grid-template-rows: repeat(3, 1fr);
101
+
102
+ .top {
103
+ background-image: linear-gradient(to right, var(--dark-y), var(--y));
104
+ }
105
+
106
+ .center {
107
+ background-image: linear-gradient(to left, var(--dark-y), var(--y));
108
+ }
109
+
110
+ .bottom {
111
+ background-image: linear-gradient(to right, var(--dark-y), var(--y));
112
+ }
113
+ }
114
+
115
+ .half-ellipse {
116
+ height: $default-ellipses-dimension / 2;
117
+ width: $default-ellipses-dimension;
118
+ opacity: $default-shapes-opacity;
119
+ background-image: linear-gradient(var(--light-y), var(--dark-y));
120
+ clip-path: ellipse(50% 50% at 50% 0);
121
+ }
122
+
123
+ .circle {
124
+ height: $default-circle-dimension;
125
+ width: $default-circle-dimension;
126
+ opacity: $default-shapes-opacity;
127
+ background-image: linear-gradient(var(--light-y), var(--dark-y));
128
+ clip-path: circle(50% at 50% 50%);
129
+ }
130
+
131
+ .ellipses {
132
+ height: var(--height);
133
+ width: var(--width);
134
+ opacity: $default-shapes-opacity;
135
+ position: relative;
136
+
137
+ .first {
138
+ height: 100%;
139
+ width: 100%;
140
+ position: absolute;
141
+ background-image: linear-gradient(to top, var(--dark-y), var(--light-y));
142
+ clip-path: ellipse(50% 20% at 50% 60%);
143
+ }
144
+
145
+ .second{
146
+ height: 100%;
147
+ width: 100%;
148
+ position: absolute;
149
+ background-image: linear-gradient(to bottom, var(--dark-y), var(--light-y));
150
+ clip-path: ellipse(50% 20% at 50% 40%);
151
+ }
152
+
153
+ }
154
+
155
+ // .spiral {
156
+ // height: $default-ellipses-dimension;
157
+ // width: $default-ellipses-dimension;
158
+ // opacity: $default-shapes-opacity;
159
+ // position: relative;
160
+
161
+ // > *{
162
+ // position: absolute;
163
+ // height: 100%;
164
+ // width: 100%;
165
+ // background: radial-gradient(var(--dark-y) 30%, var(--light-y));
166
+ // transform-origin: 0 0;
167
+ // }
168
+
169
+ // .quater-circle-one{
170
+ // transform: rotate(90deg);
171
+ // clip-path: circle(200px at 0 0);
172
+ // z-index: 1;
173
+ // }
174
+
175
+ // .quater-circle-two {
176
+ // clip-path: circle(250px at 0 0);
177
+ // transform: rotate(45deg);
178
+ // }
179
+
180
+ // .quater-circle-three {
181
+ // clip-path: circle(300px at 0 0);
182
+ // }
183
+
184
+ // .quater-circle-four{
185
+ // clip-path: circle(350px at 0 0);
186
+ // transform: rotate(-45deg);
187
+ // }
188
+ // }
189
+
190
+ }
191
+ }
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ 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); }
17
+
18
+ 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; }
19
+
20
+ /* @pareto-engineering/generator-front 1.0.12 */
21
+ // Local Definitions
22
+ var baseClassName = _bem.default.base;
23
+ var componentClassName = 'divider';
24
+ /**
25
+ * This is the component description.
26
+ */
27
+
28
+ var Divider = _ref => {
29
+ var {
30
+ id,
31
+ className: userClassName,
32
+ style,
33
+ children // ...otherProps
34
+
35
+ } = _ref;
36
+ return /*#__PURE__*/React.createElement("div", {
37
+ id: id,
38
+ className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
39
+ style: style
40
+ }, children);
41
+ };
42
+
43
+ Divider.propTypes = {
44
+ /**
45
+ * The HTML id for this element
46
+ */
47
+ id: _propTypes.default.string,
48
+
49
+ /**
50
+ * The HTML class names for this element
51
+ */
52
+ className: _propTypes.default.string,
53
+
54
+ /**
55
+ * The React-written, css properties for this element.
56
+ */
57
+ style: _propTypes.default.objectOf(_propTypes.default.string),
58
+
59
+ /**
60
+ * The children JSX
61
+ */
62
+ children: _propTypes.default.node
63
+ };
64
+ Divider.defaultProps = {// someProp:false
65
+ };
66
+ var _default = Divider;
67
+ exports.default = _default;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Divider", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Divider.default;
10
+ }
11
+ });
12
+
13
+ var _Divider = _interopRequireDefault(require("./Divider"));
14
+
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }