@pareto-engineering/design-system 2.0.0-alpha.36 → 2.0.0-alpha.39

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 (167) hide show
  1. package/dist/cjs/a/Conversation/Conversation.js +3 -4
  2. package/dist/cjs/a/Conversation/common/Message/Message.js +1 -2
  3. package/dist/cjs/a/Conversation/styles.scss +49 -45
  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/b/Logo/Logo.js +25 -6
  8. package/dist/cjs/c/AcceptCookies/AcceptCookies.js +134 -0
  9. package/dist/cjs/c/AcceptCookies/index.js +15 -0
  10. package/dist/cjs/c/AcceptCookies/styles.scss +49 -0
  11. package/dist/cjs/c/BlogCategoryButton/BlogCategoryButton.js +95 -0
  12. package/dist/cjs/c/BlogCategoryButton/index.js +15 -0
  13. package/dist/cjs/c/BlogContext/BlogContextProvider.js +63 -0
  14. package/dist/cjs/c/BlogContext/Context.js +16 -0
  15. package/dist/cjs/c/BlogContext/ContextProvider.js +63 -0
  16. package/dist/cjs/c/BlogContext/index.js +31 -0
  17. package/dist/cjs/c/BlogContext/useBlog.js +16 -0
  18. package/dist/cjs/c/BlogPost/BlogPost.js +147 -0
  19. package/dist/cjs/c/BlogPost/index.js +15 -0
  20. package/dist/cjs/c/BlogPost/styles.scss +33 -0
  21. package/dist/cjs/c/BlogPostsList/BlogPostsList.js +73 -0
  22. package/dist/cjs/c/BlogPostsList/common/Card/Card.js +170 -0
  23. package/dist/cjs/c/BlogPostsList/common/Card/index.js +15 -0
  24. package/dist/cjs/c/BlogPostsList/common/index.js +13 -0
  25. package/dist/cjs/c/BlogPostsList/index.js +15 -0
  26. package/dist/cjs/c/BlogPostsList/styles.scss +72 -0
  27. package/dist/cjs/c/SiteFooter/SiteFooter.js +73 -0
  28. package/dist/cjs/c/SiteFooter/common/Section/Section.js +95 -0
  29. package/dist/cjs/c/SiteFooter/common/Section/index.js +15 -0
  30. package/dist/cjs/c/SiteFooter/common/index.js +13 -0
  31. package/dist/cjs/c/SiteFooter/index.js +15 -0
  32. package/dist/cjs/c/SiteFooter/styles.scss +34 -0
  33. package/dist/cjs/c/SiteHeaderCTA/SiteHeaderCTA.js +108 -0
  34. package/dist/cjs/c/SiteHeaderCTA/index.js +15 -0
  35. package/dist/cjs/c/SiteHeaderCTA/styles.scss +44 -0
  36. package/dist/cjs/c/SiteMission/SiteMission.js +113 -0
  37. package/dist/cjs/c/SiteMission/index.js +15 -0
  38. package/dist/cjs/c/SiteMission/styles.scss +30 -0
  39. package/dist/cjs/c/SiteNavigation/SiteNavigation.js +130 -0
  40. package/dist/cjs/c/SiteNavigation/index.js +15 -0
  41. package/dist/cjs/c/SiteNavigation/styles.scss +118 -0
  42. package/dist/cjs/c/SiteOnboardingStep/SiteOnboardingStep.js +98 -0
  43. package/dist/cjs/c/SiteOnboardingStep/index.js +15 -0
  44. package/dist/cjs/c/SiteOnboardingStep/styles.scss +51 -0
  45. package/dist/cjs/c/SitePricing/SitePricing.js +108 -0
  46. package/dist/cjs/c/SitePricing/index.js +15 -0
  47. package/dist/cjs/c/SitePricing/styles.scss +73 -0
  48. package/dist/cjs/c/SiteServices/SiteServices.js +211 -0
  49. package/dist/cjs/c/SiteServices/index.js +15 -0
  50. package/dist/cjs/c/SiteServices/styles.scss +138 -0
  51. package/dist/cjs/c/SocialMediaShareButton/SocialMediaShareButton.js +3 -4
  52. package/dist/cjs/c/TeamGallery/TeamGallery.js +80 -0
  53. package/dist/cjs/c/TeamGallery/common/PersonCard/PersonCard.js +84 -0
  54. package/dist/cjs/c/TeamGallery/common/PersonCard/index.js +15 -0
  55. package/dist/cjs/c/TeamGallery/common/index.js +13 -0
  56. package/dist/cjs/c/TeamGallery/index.js +15 -0
  57. package/dist/cjs/c/TeamGallery/styles.scss +100 -0
  58. package/dist/cjs/c/Testimonials/Testimonials.js +119 -0
  59. package/dist/cjs/c/Testimonials/index.js +15 -0
  60. package/dist/cjs/c/Testimonials/styles.scss +112 -0
  61. package/dist/cjs/experimental/GradientBackground/GradientBackground.js +98 -0
  62. package/dist/cjs/experimental/GradientBackground/index.js +15 -0
  63. package/dist/cjs/experimental/GradientBackground/styles.scss +64 -0
  64. package/dist/cjs/experimental/index.js +13 -0
  65. package/dist/cjs/f/fields/CheckboxInput/CheckboxInput.js +105 -0
  66. package/dist/cjs/f/fields/CheckboxInput/index.js +15 -0
  67. package/dist/cjs/f/fields/CheckboxInput/styles.scss +28 -0
  68. package/dist/cjs/f/fields/RadioInput/RadioInput.js +110 -0
  69. package/dist/cjs/f/fields/RadioInput/index.js +15 -0
  70. package/dist/cjs/f/fields/RadioInput/styles.scss +26 -0
  71. package/dist/cjs/f/fields/TaskRecommendation/TaskRecommendation.js +129 -0
  72. package/dist/cjs/f/fields/TaskRecommendation/index.js +15 -0
  73. package/dist/cjs/f/fields/TaskRecommendation/styles.scss +37 -0
  74. package/dist/cjs/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +131 -0
  75. package/dist/cjs/f/fields/TaskRecommendationInput/index.js +15 -0
  76. package/dist/cjs/f/fields/TaskRecommendationInput/styles.scss +41 -0
  77. package/dist/cjs/f/fields/TextArea/TextArea.js +141 -0
  78. package/dist/cjs/f/fields/TextArea/index.js +15 -0
  79. package/dist/cjs/f/fields/TextArea/styles.scss +19 -0
  80. package/dist/es/a/Conversation/Conversation.js +3 -4
  81. package/dist/es/a/Conversation/common/Message/Message.js +1 -2
  82. package/dist/es/a/Conversation/styles.scss +49 -45
  83. package/dist/es/a/GradientBackground/GradientBackground.js +118 -0
  84. package/dist/es/a/GradientBackground/index.js +2 -0
  85. package/dist/es/a/GradientBackground/styles.scss +191 -0
  86. package/dist/es/b/Logo/Logo.js +25 -6
  87. package/dist/es/c/AcceptCookies/AcceptCookies.js +117 -0
  88. package/dist/es/c/AcceptCookies/index.js +2 -0
  89. package/dist/es/c/AcceptCookies/styles.scss +49 -0
  90. package/dist/es/c/BlogCategoryButton/BlogCategoryButton.js +68 -0
  91. package/dist/es/c/BlogCategoryButton/index.js +2 -0
  92. package/dist/es/c/BlogContext/BlogContextProvider.js +45 -0
  93. package/dist/es/c/BlogContext/Context.js +2 -0
  94. package/dist/es/c/BlogContext/ContextProvider.js +45 -0
  95. package/dist/es/c/BlogContext/index.js +4 -0
  96. package/dist/es/c/BlogContext/useBlog.js +3 -0
  97. package/dist/es/c/BlogPost/BlogPost.js +128 -0
  98. package/dist/es/c/BlogPost/index.js +2 -0
  99. package/dist/es/c/BlogPost/styles.scss +33 -0
  100. package/dist/es/c/BlogPostsList/BlogPostsList.js +56 -0
  101. package/dist/es/c/BlogPostsList/common/Card/Card.js +143 -0
  102. package/dist/es/c/BlogPostsList/common/Card/index.js +2 -0
  103. package/dist/es/c/BlogPostsList/common/index.js +1 -0
  104. package/dist/es/c/BlogPostsList/index.js +2 -0
  105. package/dist/es/c/BlogPostsList/styles.scss +72 -0
  106. package/dist/es/c/SiteFooter/SiteFooter.js +56 -0
  107. package/dist/es/c/SiteFooter/common/Section/Section.js +73 -0
  108. package/dist/es/c/SiteFooter/common/Section/index.js +2 -0
  109. package/dist/es/c/SiteFooter/common/index.js +1 -0
  110. package/dist/es/c/SiteFooter/index.js +2 -0
  111. package/dist/es/c/SiteFooter/styles.scss +34 -0
  112. package/dist/es/c/SiteHeaderCTA/SiteHeaderCTA.js +92 -0
  113. package/dist/es/c/SiteHeaderCTA/index.js +2 -0
  114. package/dist/es/c/SiteHeaderCTA/styles.scss +44 -0
  115. package/dist/es/c/SiteMission/SiteMission.js +96 -0
  116. package/dist/es/c/SiteMission/index.js +2 -0
  117. package/dist/es/c/SiteMission/styles.scss +30 -0
  118. package/dist/es/c/SiteNavigation/SiteNavigation.js +111 -0
  119. package/dist/es/c/SiteNavigation/index.js +2 -0
  120. package/dist/es/c/SiteNavigation/styles.scss +118 -0
  121. package/dist/es/c/SiteOnboardingStep/SiteOnboardingStep.js +81 -0
  122. package/dist/es/c/SiteOnboardingStep/index.js +2 -0
  123. package/dist/es/c/SiteOnboardingStep/styles.scss +51 -0
  124. package/dist/es/c/SitePricing/SitePricing.js +91 -0
  125. package/dist/es/c/SitePricing/index.js +2 -0
  126. package/dist/es/c/SitePricing/styles.scss +73 -0
  127. package/dist/es/c/SiteServices/SiteServices.js +195 -0
  128. package/dist/es/c/SiteServices/index.js +2 -0
  129. package/dist/es/c/SiteServices/styles.scss +138 -0
  130. package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.js +3 -4
  131. package/dist/es/c/TeamGallery/TeamGallery.js +64 -0
  132. package/dist/es/c/TeamGallery/common/PersonCard/PersonCard.js +64 -0
  133. package/dist/es/c/TeamGallery/common/PersonCard/index.js +2 -0
  134. package/dist/es/c/TeamGallery/common/index.js +1 -0
  135. package/dist/es/c/TeamGallery/index.js +2 -0
  136. package/dist/es/c/TeamGallery/styles.scss +100 -0
  137. package/dist/es/c/Testimonials/Testimonials.js +99 -0
  138. package/dist/es/c/Testimonials/index.js +2 -0
  139. package/dist/es/c/Testimonials/styles.scss +112 -0
  140. package/dist/es/experimental/GradientBackground/GradientBackground.js +76 -0
  141. package/dist/es/experimental/GradientBackground/index.js +2 -0
  142. package/dist/es/experimental/GradientBackground/styles.scss +64 -0
  143. package/dist/es/experimental/index.js +1 -0
  144. package/dist/es/f/fields/CheckboxInput/CheckboxInput.js +85 -0
  145. package/dist/es/f/fields/CheckboxInput/index.js +2 -0
  146. package/dist/es/f/fields/CheckboxInput/styles.scss +28 -0
  147. package/dist/es/f/fields/RadioInput/RadioInput.js +90 -0
  148. package/dist/es/f/fields/RadioInput/index.js +2 -0
  149. package/dist/es/f/fields/RadioInput/styles.scss +26 -0
  150. package/dist/es/f/fields/TaskRecommendation/TaskRecommendation.js +111 -0
  151. package/dist/es/f/fields/TaskRecommendation/index.js +2 -0
  152. package/dist/es/f/fields/TaskRecommendation/styles.scss +37 -0
  153. package/dist/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +111 -0
  154. package/dist/es/f/fields/TaskRecommendationInput/index.js +2 -0
  155. package/dist/es/f/fields/TaskRecommendationInput/styles.scss +41 -0
  156. package/dist/es/f/fields/TextArea/TextArea.js +124 -0
  157. package/dist/es/f/fields/TextArea/index.js +2 -0
  158. package/dist/es/f/fields/TextArea/styles.scss +19 -0
  159. package/package.json +2 -2
  160. package/src/__snapshots__/Storyshots.test.js.snap +543 -6
  161. package/src/stories/b/Logo.stories.jsx +8 -0
  162. package/src/ui/a/Conversation/Conversation.jsx +2 -2
  163. package/src/ui/a/Conversation/common/Message/Message.jsx +1 -2
  164. package/src/ui/a/Conversation/styles.scss +49 -45
  165. package/src/ui/b/Logo/Logo.jsx +26 -3
  166. package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.jsx +4 -2
  167. package/stylelint.config.js +13 -13
@@ -45,12 +45,11 @@ var Conversation = _ref => {
45
45
  return /*#__PURE__*/React.createElement(_Context.default.Provider, {
46
46
  value: {
47
47
  ourColor,
48
- theirColor,
49
- hasTriangle
48
+ theirColor
50
49
  }
51
50
  }, /*#__PURE__*/React.createElement("div", {
52
51
  id: id,
53
- className: [baseClassName, componentClassName, userClassName, "y-".concat(backgroundColor), 'u1'].filter(e => e).join(' '),
52
+ className: [baseClassName, componentClassName, userClassName, hasTriangle && 'has-triangle', "y-".concat(backgroundColor), 'u1'].filter(e => e).join(' '),
54
53
  style: style
55
54
  }, children));
56
55
  };
@@ -100,7 +99,7 @@ Conversation.defaultProps = {
100
99
  backgroundColor: 'background2',
101
100
  ourColor: 'background1',
102
101
  theirColor: 'background1',
103
- hasTriangle: 'false'
102
+ hasTriangle: false
104
103
  };
105
104
  Conversation.Message = _common.Message;
106
105
  var _default = Conversation;
@@ -41,13 +41,12 @@ var Message = _ref => {
41
41
 
42
42
  } = _ref;
43
43
  var {
44
- hasTriangle,
45
44
  ourColor,
46
45
  theirColor
47
46
  } = (0, _useConversation.default)();
48
47
  return /*#__PURE__*/React.createElement("div", {
49
48
  id: id,
50
- className: [baseClassName, componentClassName, userClassName, "x-".concat(from === 'ours' ? ourColor : theirColor), from === 'ours' && 'ours', hasTriangle === true ? 'has-triangle' : '', 'v1'].filter(e => e).join(' '),
49
+ className: [baseClassName, componentClassName, userClassName, "x-".concat(from === 'ours' ? ourColor : theirColor), from === 'ours' && 'ours', 'v1'].filter(e => e).join(' '),
51
50
  style: style
52
51
  }, /*#__PURE__*/React.createElement("div", {
53
52
  className: _bem.default.elementContent
@@ -39,51 +39,9 @@ $triangle-after-side:25px;
39
39
  // animation-delay: 3s;
40
40
  // }
41
41
 
42
- .#{bem.$base}.message {
43
- align-self: flex-start;
44
- background-color: var(--x);
45
- // animation: fadeIn 1s ease-in both;
46
- border: $default-message-border;
47
- border-radius: var(--theme-border-radius);
48
- max-width: $default-message-max-width;
49
- min-width: $default-message-min-width;
50
- padding: $default-padding;
51
- position: relative;
52
-
53
- .#{bem.$element-content} {
54
- display: flex;
55
- flex-direction: column;
56
-
57
- >p {
58
- color: var(--on-x);
59
- }
60
-
61
- .sender {
62
- font-weight: 800;
63
- margin-bottom: .5em;
64
- }
65
-
66
- .attachment {
67
- align-self: baseline;
68
- background-color: var(--y);
69
- display: flex;
70
- flex-direction: row;
71
- padding: .5em 1em;
72
-
73
- > p {
74
- margin-bottom: 0;
75
- }
76
-
77
- > img {
78
- width: 40px;
79
- }
80
- }
81
- }
82
- &.#{bem.$base}.ours {
83
- align-self: flex-end;
84
- }
85
-
86
- &.has-triangle {
42
+ &.has-triangle {
43
+ padding-bottom: calc(#{$default-padding} * 2);
44
+ .#{bem.$base}.message {
87
45
  ::before {
88
46
  border-bottom: $triangle-border2;
89
47
  border-left: $triangle-border2;
@@ -138,6 +96,52 @@ $triangle-after-side:25px;
138
96
  }
139
97
  }
140
98
  }
99
+ }
100
+
101
+ .#{bem.$base}.message {
102
+ align-self: flex-start;
103
+ background-color: var(--x);
104
+ // animation: fadeIn 1s ease-in both;
105
+ border: $default-message-border;
106
+ border-radius: var(--theme-border-radius);
107
+ max-width: $default-message-max-width;
108
+ min-width: $default-message-min-width;
109
+ padding: $default-padding;
110
+ position: relative;
111
+
112
+ .#{bem.$element-content} {
113
+ display: flex;
114
+ flex-direction: column;
115
+
116
+ >p {
117
+ color: var(--on-x);
118
+ }
119
+
120
+ .sender {
121
+ font-weight: 800;
122
+ margin-bottom: .5em;
123
+ }
124
+
125
+ .attachment {
126
+ align-self: baseline;
127
+ background-color: var(--y);
128
+ display: flex;
129
+ flex-direction: row;
130
+ padding: .5em 1em;
131
+
132
+ > p {
133
+ margin-bottom: 0;
134
+ }
135
+
136
+ > img {
137
+ width: 40px;
138
+ }
139
+ }
140
+ }
141
+ &.#{bem.$base}.ours {
142
+ align-self: flex-end;
143
+ }
144
+
141
145
 
142
146
  // mobile style
143
147
  @include mixins.media($to:$sm-md) {
@@ -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
+ }
@@ -22,18 +22,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
22
22
  // Local Definitions
23
23
  var baseClassName = _bem.default.base;
24
24
  var componentClassName = 'logo';
25
- var defaultTargets = [{
25
+ var defaultTargetssquare = [{
26
+ id: 'logo',
27
+ target: 'logo'
28
+ }];
29
+ var contentMapSquare = {
30
+ default: {
31
+ sprite: '/logo_square.svg',
32
+ viewBox: '0 0 39 39',
33
+ targets: defaultTargetssquare
34
+ }
35
+ };
36
+ var defaultTargetsWithName = [{
26
37
  id: 'logo_squares',
27
38
  target: 'logo_squares'
28
39
  }, {
29
40
  id: 'logo_pareto',
30
41
  target: 'logo_pareto'
31
42
  }];
32
- var contentMap = {
43
+ var contentMapWithName = {
33
44
  default: {
34
45
  sprite: '/logo.svg',
35
46
  viewBox: '0 0 156 30',
36
- targets: defaultTargets
47
+ targets: defaultTargetsWithName
37
48
  }
38
49
  };
39
50
  /**
@@ -49,12 +60,14 @@ var Logo = _ref => {
49
60
  height,
50
61
  width,
51
62
  variant,
52
- strokeColor // ...otherProps
63
+ strokeColor,
64
+ square // ...otherProps
53
65
 
54
66
  } = _ref;
55
67
  (0, React.useLayoutEffect)(() => {
56
68
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
57
69
  }, []);
70
+ var contentMap = square ? contentMapSquare : contentMapWithName;
58
71
  var svgConfig = (0, React.useMemo)(() => contentMap[variant], [variant]);
59
72
  return /*#__PURE__*/React.createElement(_a.SVG, {
60
73
  height: height,
@@ -108,13 +121,19 @@ Logo.propTypes = {
108
121
  /**
109
122
  * The color of the svg stroke
110
123
  */
111
- strokeColor: _propTypes.default.string
124
+ strokeColor: _propTypes.default.string,
125
+
126
+ /**
127
+ * Whether the logo should have a name.
128
+ */
129
+ square: _propTypes.default.bool
112
130
  };
113
131
  Logo.defaultProps = {
114
132
  color: 'paragraph',
115
133
  height: '2em',
116
134
  variant: 'default',
117
- strokeColor: 'transparent'
135
+ strokeColor: 'transparent',
136
+ square: false
118
137
  };
119
138
  var _default = Logo;
120
139
  exports.default = _default;
@@ -0,0 +1,134 @@
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 _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); }
19
+
20
+ 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; }
21
+
22
+ // Local Definitions
23
+ var baseClassName = _bem.default.base;
24
+ var componentClassName = 'accept-cookies';
25
+ /**
26
+ * This is the component description.
27
+ */
28
+
29
+ var AcceptCookies = _ref => {
30
+ var {
31
+ id,
32
+ className: userClassName,
33
+ style,
34
+ color,
35
+ title,
36
+ subtitle,
37
+ onClickAllow,
38
+ onClickDecline,
39
+ defaultIsShown // ...otherProps
40
+
41
+ } = _ref;
42
+ var [isShown, setIsShown] = (0, React.useState)(defaultIsShown);
43
+ var hide = (0, React.useCallback)(() => setIsShown(false), []);
44
+ var allow = (0, React.useCallback)(() => {
45
+ onClickAllow === null || onClickAllow === void 0 ? void 0 : onClickAllow();
46
+ hide();
47
+ }, []);
48
+ var decline = (0, React.useCallback)(() => {
49
+ onClickDecline === null || onClickDecline === void 0 ? void 0 : onClickDecline();
50
+ hide();
51
+ }, []);
52
+ (0, React.useLayoutEffect)(() => {
53
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
54
+ }, []);
55
+ if (!isShown) return null;
56
+ return /*#__PURE__*/React.createElement("div", {
57
+ id: id,
58
+ className: [baseClassName, componentClassName, userClassName, "x-".concat(color), 'u1'].filter(e => e).join(' '),
59
+ style: style // {...otherProps}
60
+
61
+ }, /*#__PURE__*/React.createElement("div", {
62
+ className: _bem.default.elementContent
63
+ }, /*#__PURE__*/React.createElement("p", {
64
+ className: "s0"
65
+ }, title), /*#__PURE__*/React.createElement("p", {
66
+ className: "s-1"
67
+ }, subtitle), /*#__PURE__*/React.createElement("div", {
68
+ className: "buttons s-1"
69
+ }, /*#__PURE__*/React.createElement(_b.Button, {
70
+ className: "allow",
71
+ onClick: allow
72
+ }, "Allow"), /*#__PURE__*/React.createElement(_b.Button, {
73
+ className: "decline v1 ml-v",
74
+ onClick: decline
75
+ }, "Decline"))));
76
+ };
77
+
78
+ AcceptCookies.propTypes = {
79
+ /**
80
+ * The HTML id for this element
81
+ */
82
+ id: _propTypes.default.string,
83
+
84
+ /**
85
+ * The HTML class names for this element
86
+ */
87
+ className: _propTypes.default.string,
88
+
89
+ /**
90
+ * The React-written, css properties for this element.
91
+ */
92
+ style: _propTypes.default.objectOf(_propTypes.default.string),
93
+
94
+ /**
95
+ * The children JSX
96
+ */
97
+ // children:PropTypes.node,
98
+
99
+ /**
100
+ * The title
101
+ */
102
+ title: _propTypes.default.string,
103
+
104
+ /**
105
+ * The sub-title
106
+ */
107
+ subtitle: _propTypes.default.string,
108
+
109
+ /**
110
+ * The color
111
+ */
112
+ color: _propTypes.default.string,
113
+
114
+ /**
115
+ * Allow cookies function
116
+ */
117
+ onClickAllow: _propTypes.default.func,
118
+
119
+ /**
120
+ * Allow cookies function
121
+ */
122
+ onClickDecline: _propTypes.default.func,
123
+
124
+ /**
125
+ * Condition to show or hide the component
126
+ */
127
+ defaultIsShown: _propTypes.default.bool
128
+ };
129
+ AcceptCookies.defaultProps = {
130
+ color: 'main1',
131
+ defaultIsShown: true
132
+ };
133
+ var _default = AcceptCookies;
134
+ exports.default = _default;