@pareto-engineering/design-system 4.0.0-alpha.21 → 4.0.0-alpha.23

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 (34) hide show
  1. package/dist/cjs/a/ContentTree/styles.scss +11 -2
  2. package/dist/cjs/a/Conversation/common/Message/Message.js +7 -2
  3. package/dist/cjs/a/Conversation/styles.scss +23 -3
  4. package/dist/cjs/a/MetaCard/MetaCard.js +8 -3
  5. package/dist/cjs/a/MetaCard/styles.scss +15 -0
  6. package/dist/cjs/b/Button/styles.scss +3 -3
  7. package/dist/cjs/b/Card/common/Group/styles.scss +0 -4
  8. package/dist/cjs/b/Page/common/PageHelmet/PageHelmet.js +1 -1
  9. package/dist/cjs/f/fields/ChoicesInput/styles.scss +2 -0
  10. package/dist/cjs/f/fields/SelectInput/styles.scss +4 -3
  11. package/dist/cjs/f/fields/TextInput/styles.scss +1 -1
  12. package/dist/es/a/ContentTree/styles.scss +11 -2
  13. package/dist/es/a/Conversation/common/Message/Message.js +7 -2
  14. package/dist/es/a/Conversation/styles.scss +23 -3
  15. package/dist/es/a/MetaCard/MetaCard.js +8 -3
  16. package/dist/es/a/MetaCard/styles.scss +15 -0
  17. package/dist/es/b/Button/styles.scss +3 -3
  18. package/dist/es/b/Card/common/Group/styles.scss +0 -4
  19. package/dist/es/b/Page/common/PageHelmet/PageHelmet.js +1 -1
  20. package/dist/es/f/fields/ChoicesInput/styles.scss +2 -0
  21. package/dist/es/f/fields/SelectInput/styles.scss +4 -3
  22. package/dist/es/f/fields/TextInput/styles.scss +1 -1
  23. package/package.json +4 -4
  24. package/src/ui/a/ContentTree/styles.scss +11 -2
  25. package/src/ui/a/Conversation/common/Message/Message.jsx +10 -4
  26. package/src/ui/a/Conversation/styles.scss +23 -3
  27. package/src/ui/a/MetaCard/MetaCard.jsx +7 -0
  28. package/src/ui/a/MetaCard/styles.scss +15 -0
  29. package/src/ui/b/Button/styles.scss +3 -3
  30. package/src/ui/b/Card/common/Group/styles.scss +0 -4
  31. package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx +1 -1
  32. package/src/ui/f/fields/ChoicesInput/styles.scss +2 -0
  33. package/src/ui/f/fields/SelectInput/styles.scss +4 -3
  34. package/src/ui/f/fields/TextInput/styles.scss +1 -1
package/dist/cjs/a/ContentTree/styles.scss CHANGED
@@ -6,15 +6,24 @@
6
6
  $default-dot-size: .5em;
7
7
  $default-margin: 1em;
8
8
  $default-padding: 1em;
9
+ $default-navigation-height: 3.64rem;
9
10
 
10
11
  .#{bem.$base}.content-tree {
11
12
  > .#{bem.$base}.tree {
12
13
  position: sticky;
13
- top: 0;
14
+ top: calc($default-navigation-height + var(--spacing-2));
14
15
 
15
16
  ul {
16
17
  list-style: none;
17
- padding: 0 $default-padding;
18
+ padding: 0;
19
+
20
+ &:first-child > li > p {
21
+ margin-top: 0;
22
+ }
23
+
24
+ &:last-child > li > p {
25
+ margin-bottom: 0;
26
+ }
18
27
 
19
28
  > li > p > a {
20
29
  color: var(--paragraph);
package/dist/cjs/a/Conversation/common/Message/Message.js CHANGED
@@ -27,6 +27,7 @@ const Message = _ref => {
27
27
  className: userClassName,
28
28
  style,
29
29
  message,
30
+ customMessage,
30
31
  sender,
31
32
  from,
32
33
  attachment,
@@ -46,7 +47,7 @@ const Message = _ref => {
46
47
  className: "sender"
47
48
  }, sender, ":"), /*#__PURE__*/React.createElement("div", {
48
49
  className: "message-content"
49
- }, /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
50
+ }, customMessage || /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
50
51
  className: `attachment y-${attachmentColor}`
51
52
  }, /*#__PURE__*/React.createElement("span", {
52
53
  className: "icon"
@@ -68,7 +69,11 @@ Message.propTypes = {
68
69
  /**
69
70
  * The message in the conversation
70
71
  */
71
- message: _propTypes.default.string.isRequired,
72
+ message: _propTypes.default.string,
73
+ /**
74
+ * The custom message if it uses more complex html
75
+ */
76
+ customMessage: _propTypes.default.node,
72
77
  /**
73
78
  * The sender of the message
74
79
  */
package/dist/cjs/a/Conversation/styles.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  /* @pareto-engineering/generator-front 1.0.12 */
2
2
  /* stylelint-disable selector-max-compound-selectors -- Required here */
3
+ /* stylelint-disable max-nesting-depth -- Required here */
4
+ /* stylelint-disable selector-max-universal -- Required here */
3
5
 
4
6
  @use "@pareto-engineering/bem";
5
7
  @use "@pareto-engineering/styles/src/mixins";
@@ -8,7 +10,6 @@
8
10
  $default-border-radius: var(--theme-default-border-radius);
9
11
  $default-padding: var(--gap);
10
12
  $default-message-max-width: calc(100% - 4 * #{$default-padding});
11
- $default-message-min-width: 12em;
12
13
  $default-message-border: 1px solid var(--hard-background-cards);
13
14
 
14
15
  .#{bem.$base}.conversation {
@@ -30,11 +31,11 @@ $default-message-border: 1px solid var(--hard-background-cards);
30
31
  > .#{bem.$base}.message {
31
32
  align-self: flex-start;
32
33
  max-width: $default-message-max-width;
33
- min-width: $default-message-min-width;
34
34
  position: relative;
35
35
 
36
36
  > .sender {
37
37
  margin: 0;
38
+ padding: 0 var(--gap);
38
39
  }
39
40
 
40
41
  > .message-content {
@@ -49,6 +50,21 @@ $default-message-border: 1px solid var(--hard-background-cards);
49
50
  color: var(--on-x);
50
51
  }
51
52
 
53
+ > ul {
54
+ padding: 0 var(--gap);
55
+ text-align: left;
56
+
57
+ > li {
58
+ color: var(--on-x);
59
+ }
60
+ }
61
+
62
+ > * {
63
+ &:not(:last-child) {
64
+ margin-bottom: 0;
65
+ }
66
+ }
67
+
52
68
  > .attachment {
53
69
  align-items: center;
54
70
  align-self: flex-end;
@@ -58,8 +74,12 @@ $default-message-border: 1px solid var(--hard-background-cards);
58
74
  }
59
75
  }
60
76
 
61
- &.#{bem.$base}.ours {
77
+ &.#{bem.$base}.theirs {
62
78
  align-self: flex-end;
79
+
80
+ > .sender {
81
+ text-align: end;
82
+ }
63
83
  }
64
84
  }
65
85
  }
package/dist/cjs/a/MetaCard/MetaCard.js CHANGED
@@ -24,14 +24,15 @@ const MetaCard = _ref => {
24
24
  className: userClassName,
25
25
  style,
26
26
  children,
27
- hasBackgroundBlur
27
+ hasBackgroundBlur,
28
+ spaced
28
29
  } = _ref;
29
30
  (0, React.useInsertionEffect)(() => {
30
31
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
31
32
  }, []);
32
33
  return /*#__PURE__*/React.createElement("div", {
33
34
  id: id,
34
- className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && _exports.default.modifierBlur].filter(e => e).join(' '),
35
+ className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && _exports.default.modifierBlur, spaced && _exports.default.modifierSpaced].filter(e => e).join(' '),
35
36
  style: style
36
37
  }, children);
37
38
  };
@@ -51,7 +52,11 @@ MetaCard.propTypes = {
51
52
  /**
52
53
  * Whether the card has a background blur
53
54
  * */
54
- hasBackgroundBlur: _propTypes.default.bool
55
+ hasBackgroundBlur: _propTypes.default.bool,
56
+ /**
57
+ * Whether to apply a gap to the top and bottom
58
+ * */
59
+ spaced: _propTypes.default.bool
55
60
  };
56
61
  MetaCard.defaultProps = {
57
62
  // someProp:false
package/dist/cjs/a/MetaCard/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  /* @pareto-engineering/generator-front 1.0.12 */
2
+ /* stylelint-disable selector-max-universal -- exception */
2
3
 
3
4
  @use "@pareto-engineering/bem";
4
5
  @use "@pareto-engineering/styles/src/mixins";
@@ -26,5 +27,19 @@ $default-blur: var(--theme-default-blur);
26
27
  margin-left: calc((var(--gap)) * -1);
27
28
  margin-right: calc((var(--gap)) * -1);
28
29
  padding: 0 var(--gap);
30
+
31
+ &.#{bem.$modifier-spaced} {
32
+ padding: var(--gap);
33
+
34
+ > * {
35
+ &:first-child {
36
+ margin-top: 0;
37
+ }
38
+
39
+ &:last-child {
40
+ margin-bottom: 0;
41
+ }
42
+ }
43
+ }
29
44
  }
30
45
  }
package/dist/cjs/b/Button/styles.scss CHANGED
@@ -59,9 +59,9 @@ $default-animation-time: .31s;
59
59
  cursor: pointer;
60
60
 
61
61
  &:hover
62
- :not(.#{bem.$modifier-gradient})
63
- :not(.#{bem.$modifier-ghost})
64
- :not(.#{bem.$modifier-simple}) {
62
+ :not(.#{bem.$modifier-gradient})
63
+ :not(.#{bem.$modifier-ghost})
64
+ :not(.#{bem.$modifier-simple}) {
65
65
  background: var(--soft-x, var(--soft-#{$default-color}));
66
66
  }
67
67
 
package/dist/cjs/b/Card/common/Group/styles.scss CHANGED
@@ -12,10 +12,6 @@ $default-spacing: var(--gap);
12
12
  &.snap-scroller {
13
13
  margin-left: calc($default-spacing * -1);
14
14
  margin-right: calc($default-spacing * -1);
15
-
16
- > .#{bem.$base}.card {
17
- height: 100%;
18
- }
19
15
  }
20
16
 
21
17
  &.vertical-flexbox {
package/dist/cjs/b/Page/common/PageHelmet/PageHelmet.js CHANGED
@@ -26,7 +26,7 @@ const helmetMap = [{
26
26
  key: "title_tag"
27
27
  }, `
28
28
  ${v}
29
- ${c.SITE?.TITLE_SUFFIX && c.SITE.TITLE_SUFFIX}
29
+ ${c.SITE?.TITLE_SUFFIX ? c.SITE.TITLE_SUFFIX : ''}
30
30
  `)
31
31
  }, {
32
32
  variables: ['meta_description'],
package/dist/cjs/f/fields/ChoicesInput/styles.scss CHANGED
@@ -33,6 +33,7 @@ $default-label-height: .5em;
33
33
  > label {
34
34
  background-color: var(--background-inputs);
35
35
  border-radius: var(--theme-default-border-radius);
36
+ color: var(--paragraph);
36
37
  cursor: pointer;
37
38
  display: block;
38
39
  height: $default-label-height;
@@ -40,6 +41,7 @@ $default-label-height: .5em;
40
41
  padding: $default-label-padding;
41
42
  position: relative;
42
43
  transition: $default-transition;
44
+ white-space: nowrap;
43
45
 
44
46
  &:hover {
45
47
  box-shadow: var(--theme-default-input-box-shadow);
package/dist/cjs/f/fields/SelectInput/styles.scss CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
  $default-spacing-size: 1em;
9
- $default-padding: .75em;
9
+ $default-padding: .5em;
10
10
  $default-bg-gradient: var(--background-far);
11
11
  $default-input-border-radius: var(--theme-default-input-border-radius);
12
12
 
@@ -21,7 +21,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
21
21
  >.select-wrapper {
22
22
  background-color: var(--background-inputs);
23
23
  border-radius: $default-input-border-radius;
24
- padding: $default-padding;
24
+ padding: $default-padding 0 $default-padding calc($default-padding * 1.5);
25
25
  position: relative;
26
26
 
27
27
  &::after {
@@ -40,7 +40,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
40
40
 
41
41
  select {
42
42
  appearance: none;
43
- background-color: inherit;
43
+ background-color: transparent;
44
44
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
45
45
  background-position: calc(100% - $default-spacing-size);
46
46
  background-repeat: no-repeat;
@@ -48,6 +48,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
48
48
  padding-right: $default-spacing-size;
49
49
 
50
50
  &.input {
51
+ color: var(--paragraph);
51
52
  width: 100%;
52
53
 
53
54
  &:disabled {
package/dist/cjs/f/fields/TextInput/styles.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  @use "../../../form.scss";
5
5
 
6
6
  $default-padding: .75em .75em .55em;
7
- $default-symbol-left: 3em;
7
+ $default-symbol-left: 1em;
8
8
  $default-padding-with-symbol:
9
9
  .75em
10
10
  calc($default-symbol-left - 1em)
package/dist/es/a/ContentTree/styles.scss CHANGED
@@ -6,15 +6,24 @@
6
6
  $default-dot-size: .5em;
7
7
  $default-margin: 1em;
8
8
  $default-padding: 1em;
9
+ $default-navigation-height: 3.64rem;
9
10
 
10
11
  .#{bem.$base}.content-tree {
11
12
  > .#{bem.$base}.tree {
12
13
  position: sticky;
13
- top: 0;
14
+ top: calc($default-navigation-height + var(--spacing-2));
14
15
 
15
16
  ul {
16
17
  list-style: none;
17
- padding: 0 $default-padding;
18
+ padding: 0;
19
+
20
+ &:first-child > li > p {
21
+ margin-top: 0;
22
+ }
23
+
24
+ &:last-child > li > p {
25
+ margin-bottom: 0;
26
+ }
18
27
 
19
28
  > li > p > a {
20
29
  color: var(--paragraph);
package/dist/es/a/Conversation/common/Message/Message.js CHANGED
@@ -17,6 +17,7 @@ const Message = ({
17
17
  className: userClassName,
18
18
  style,
19
19
  message,
20
+ customMessage,
20
21
  sender,
21
22
  from,
22
23
  attachment,
@@ -36,7 +37,7 @@ const Message = ({
36
37
  className: "sender"
37
38
  }, sender, ":"), /*#__PURE__*/React.createElement("div", {
38
39
  className: "message-content"
39
- }, /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
40
+ }, customMessage || /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
40
41
  className: `attachment y-${attachmentColor}`
41
42
  }, /*#__PURE__*/React.createElement("span", {
42
43
  className: "icon"
@@ -58,7 +59,11 @@ Message.propTypes = {
58
59
  /**
59
60
  * The message in the conversation
60
61
  */
61
- message: PropTypes.string.isRequired,
62
+ message: PropTypes.string,
63
+ /**
64
+ * The custom message if it uses more complex html
65
+ */
66
+ customMessage: PropTypes.node,
62
67
  /**
63
68
  * The sender of the message
64
69
  */
package/dist/es/a/Conversation/styles.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  /* @pareto-engineering/generator-front 1.0.12 */
2
2
  /* stylelint-disable selector-max-compound-selectors -- Required here */
3
+ /* stylelint-disable max-nesting-depth -- Required here */
4
+ /* stylelint-disable selector-max-universal -- Required here */
3
5
 
4
6
  @use "@pareto-engineering/bem";
5
7
  @use "@pareto-engineering/styles/src/mixins";
@@ -8,7 +10,6 @@
8
10
  $default-border-radius: var(--theme-default-border-radius);
9
11
  $default-padding: var(--gap);
10
12
  $default-message-max-width: calc(100% - 4 * #{$default-padding});
11
- $default-message-min-width: 12em;
12
13
  $default-message-border: 1px solid var(--hard-background-cards);
13
14
 
14
15
  .#{bem.$base}.conversation {
@@ -30,11 +31,11 @@ $default-message-border: 1px solid var(--hard-background-cards);
30
31
  > .#{bem.$base}.message {
31
32
  align-self: flex-start;
32
33
  max-width: $default-message-max-width;
33
- min-width: $default-message-min-width;
34
34
  position: relative;
35
35
 
36
36
  > .sender {
37
37
  margin: 0;
38
+ padding: 0 var(--gap);
38
39
  }
39
40
 
40
41
  > .message-content {
@@ -49,6 +50,21 @@ $default-message-border: 1px solid var(--hard-background-cards);
49
50
  color: var(--on-x);
50
51
  }
51
52
 
53
+ > ul {
54
+ padding: 0 var(--gap);
55
+ text-align: left;
56
+
57
+ > li {
58
+ color: var(--on-x);
59
+ }
60
+ }
61
+
62
+ > * {
63
+ &:not(:last-child) {
64
+ margin-bottom: 0;
65
+ }
66
+ }
67
+
52
68
  > .attachment {
53
69
  align-items: center;
54
70
  align-self: flex-end;
@@ -58,8 +74,12 @@ $default-message-border: 1px solid var(--hard-background-cards);
58
74
  }
59
75
  }
60
76
 
61
- &.#{bem.$base}.ours {
77
+ &.#{bem.$base}.theirs {
62
78
  align-self: flex-end;
79
+
80
+ > .sender {
81
+ text-align: end;
82
+ }
63
83
  }
64
84
  }
65
85
  }
package/dist/es/a/MetaCard/MetaCard.js CHANGED
@@ -17,14 +17,15 @@ const MetaCard = ({
17
17
  className: userClassName,
18
18
  style,
19
19
  children,
20
- hasBackgroundBlur
20
+ hasBackgroundBlur,
21
+ spaced
21
22
  }) => {
22
23
  useInsertionEffect(() => {
23
24
  import("./styles.scss");
24
25
  }, []);
25
26
  return /*#__PURE__*/React.createElement("div", {
26
27
  id: id,
27
- className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && styleNames.modifierBlur].filter(e => e).join(' '),
28
+ className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && styleNames.modifierBlur, spaced && styleNames.modifierSpaced].filter(e => e).join(' '),
28
29
  style: style
29
30
  }, children);
30
31
  };
@@ -44,7 +45,11 @@ MetaCard.propTypes = {
44
45
  /**
45
46
  * Whether the card has a background blur
46
47
  * */
47
- hasBackgroundBlur: PropTypes.bool
48
+ hasBackgroundBlur: PropTypes.bool,
49
+ /**
50
+ * Whether to apply a gap to the top and bottom
51
+ * */
52
+ spaced: PropTypes.bool
48
53
  };
49
54
  MetaCard.defaultProps = {
50
55
  // someProp:false
package/dist/es/a/MetaCard/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  /* @pareto-engineering/generator-front 1.0.12 */
2
+ /* stylelint-disable selector-max-universal -- exception */
2
3
 
3
4
  @use "@pareto-engineering/bem";
4
5
  @use "@pareto-engineering/styles/src/mixins";
@@ -26,5 +27,19 @@ $default-blur: var(--theme-default-blur);
26
27
  margin-left: calc((var(--gap)) * -1);
27
28
  margin-right: calc((var(--gap)) * -1);
28
29
  padding: 0 var(--gap);
30
+
31
+ &.#{bem.$modifier-spaced} {
32
+ padding: var(--gap);
33
+
34
+ > * {
35
+ &:first-child {
36
+ margin-top: 0;
37
+ }
38
+
39
+ &:last-child {
40
+ margin-bottom: 0;
41
+ }
42
+ }
43
+ }
29
44
  }
30
45
  }
package/dist/es/b/Button/styles.scss CHANGED
@@ -59,9 +59,9 @@ $default-animation-time: .31s;
59
59
  cursor: pointer;
60
60
 
61
61
  &:hover
62
- :not(.#{bem.$modifier-gradient})
63
- :not(.#{bem.$modifier-ghost})
64
- :not(.#{bem.$modifier-simple}) {
62
+ :not(.#{bem.$modifier-gradient})
63
+ :not(.#{bem.$modifier-ghost})
64
+ :not(.#{bem.$modifier-simple}) {
65
65
  background: var(--soft-x, var(--soft-#{$default-color}));
66
66
  }
67
67
 
package/dist/es/b/Card/common/Group/styles.scss CHANGED
@@ -12,10 +12,6 @@ $default-spacing: var(--gap);
12
12
  &.snap-scroller {
13
13
  margin-left: calc($default-spacing * -1);
14
14
  margin-right: calc($default-spacing * -1);
15
-
16
- > .#{bem.$base}.card {
17
- height: 100%;
18
- }
19
15
  }
20
16
 
21
17
  &.vertical-flexbox {
package/dist/es/b/Page/common/PageHelmet/PageHelmet.js CHANGED
@@ -17,7 +17,7 @@ const helmetMap = [{
17
17
  key: "title_tag"
18
18
  }, `
19
19
  ${v}
20
- ${c.SITE?.TITLE_SUFFIX && c.SITE.TITLE_SUFFIX}
20
+ ${c.SITE?.TITLE_SUFFIX ? c.SITE.TITLE_SUFFIX : ''}
21
21
  `)
22
22
  }, {
23
23
  variables: ['meta_description'],
package/dist/es/f/fields/ChoicesInput/styles.scss CHANGED
@@ -33,6 +33,7 @@ $default-label-height: .5em;
33
33
  > label {
34
34
  background-color: var(--background-inputs);
35
35
  border-radius: var(--theme-default-border-radius);
36
+ color: var(--paragraph);
36
37
  cursor: pointer;
37
38
  display: block;
38
39
  height: $default-label-height;
@@ -40,6 +41,7 @@ $default-label-height: .5em;
40
41
  padding: $default-label-padding;
41
42
  position: relative;
42
43
  transition: $default-transition;
44
+ white-space: nowrap;
43
45
 
44
46
  &:hover {
45
47
  box-shadow: var(--theme-default-input-box-shadow);
package/dist/es/f/fields/SelectInput/styles.scss CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
  $default-spacing-size: 1em;
9
- $default-padding: .75em;
9
+ $default-padding: .5em;
10
10
  $default-bg-gradient: var(--background-far);
11
11
  $default-input-border-radius: var(--theme-default-input-border-radius);
12
12
 
@@ -21,7 +21,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
21
21
  >.select-wrapper {
22
22
  background-color: var(--background-inputs);
23
23
  border-radius: $default-input-border-radius;
24
- padding: $default-padding;
24
+ padding: $default-padding 0 $default-padding calc($default-padding * 1.5);
25
25
  position: relative;
26
26
 
27
27
  &::after {
@@ -40,7 +40,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
40
40
 
41
41
  select {
42
42
  appearance: none;
43
- background-color: inherit;
43
+ background-color: transparent;
44
44
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
45
45
  background-position: calc(100% - $default-spacing-size);
46
46
  background-repeat: no-repeat;
@@ -48,6 +48,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
48
48
  padding-right: $default-spacing-size;
49
49
 
50
50
  &.input {
51
+ color: var(--paragraph);
51
52
  width: 100%;
52
53
 
53
54
  &:disabled {
package/dist/es/f/fields/TextInput/styles.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  @use "../../../form.scss";
5
5
 
6
6
  $default-padding: .75em .75em .55em;
7
- $default-symbol-left: 3em;
7
+ $default-symbol-left: 1em;
8
8
  $default-padding-with-symbol:
9
9
  .75em
10
10
  calc($default-symbol-left - 1em)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pareto-engineering/design-system",
3
- "version": "4.0.0-alpha.21",
3
+ "version": "4.0.0-alpha.23",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.js",
@@ -50,9 +50,9 @@
50
50
  "style-loader": "^3.3.2"
51
51
  },
52
52
  "dependencies": {
53
- "@pareto-engineering/assets": "^4.0.0-alpha.11",
53
+ "@pareto-engineering/assets": "^4.0.0-alpha.23",
54
54
  "@pareto-engineering/bem": "^4.0.0-alpha.20",
55
- "@pareto-engineering/styles": "^4.0.0-alpha.20",
55
+ "@pareto-engineering/styles": "^4.0.0-alpha.23",
56
56
  "date-fns": "^2.29.3",
57
57
  "downshift": "^6.1.12",
58
58
  "formik": "^2.2.9",
@@ -67,5 +67,5 @@
67
67
  "relay-test-utils": "^15.0.0"
68
68
  },
69
69
  "browserslist": "> 2%",
70
- "gitHead": "470f5e6dbe7b4b4da5f6e066303e9a41a744583e"
70
+ "gitHead": "de98b880c6cd021cfdb4c925a18c476b596924fe"
71
71
  }
package/src/ui/a/ContentTree/styles.scss CHANGED
@@ -6,15 +6,24 @@
6
6
  $default-dot-size: .5em;
7
7
  $default-margin: 1em;
8
8
  $default-padding: 1em;
9
+ $default-navigation-height: 3.64rem;
9
10
 
10
11
  .#{bem.$base}.content-tree {
11
12
  > .#{bem.$base}.tree {
12
13
  position: sticky;
13
- top: 0;
14
+ top: calc($default-navigation-height + var(--spacing-2));
14
15
 
15
16
  ul {
16
17
  list-style: none;
17
- padding: 0 $default-padding;
18
+ padding: 0;
19
+
20
+ &:first-child > li > p {
21
+ margin-top: 0;
22
+ }
23
+
24
+ &:last-child > li > p {
25
+ margin-bottom: 0;
26
+ }
18
27
 
19
28
  > li > p > a {
20
29
  color: var(--paragraph);
package/src/ui/a/Conversation/common/Message/Message.jsx CHANGED
@@ -21,6 +21,7 @@ const Message = ({
21
21
  className:userClassName,
22
22
  style,
23
23
  message,
24
+ customMessage,
24
25
  sender,
25
26
  from,
26
27
  attachment,
@@ -51,9 +52,9 @@ const Message = ({
51
52
  </p>
52
53
  )}
53
54
  <div className="message-content">
54
- <p>
55
- {message}
56
- </p>
55
+ {
56
+ customMessage || <p>{ message }</p>
57
+ }
57
58
  {attachment
58
59
  && (
59
60
  <div className={`attachment y-${attachmentColor}`}>
@@ -86,7 +87,12 @@ Message.propTypes = {
86
87
  /**
87
88
  * The message in the conversation
88
89
  */
89
- message:PropTypes.string.isRequired,
90
+ message:PropTypes.string,
91
+
92
+ /**
93
+ * The custom message if it uses more complex html
94
+ */
95
+ customMessage:PropTypes.node,
90
96
 
91
97
  /**
92
98
  * The sender of the message
package/src/ui/a/Conversation/styles.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  /* @pareto-engineering/generator-front 1.0.12 */
2
2
  /* stylelint-disable selector-max-compound-selectors -- Required here */
3
+ /* stylelint-disable max-nesting-depth -- Required here */
4
+ /* stylelint-disable selector-max-universal -- Required here */
3
5
 
4
6
  @use "@pareto-engineering/bem";
5
7
  @use "@pareto-engineering/styles/src/mixins";
@@ -8,7 +10,6 @@
8
10
  $default-border-radius: var(--theme-default-border-radius);
9
11
  $default-padding: var(--gap);
10
12
  $default-message-max-width: calc(100% - 4 * #{$default-padding});
11
- $default-message-min-width: 12em;
12
13
  $default-message-border: 1px solid var(--hard-background-cards);
13
14
 
14
15
  .#{bem.$base}.conversation {
@@ -30,11 +31,11 @@ $default-message-border: 1px solid var(--hard-background-cards);
30
31
  > .#{bem.$base}.message {
31
32
  align-self: flex-start;
32
33
  max-width: $default-message-max-width;
33
- min-width: $default-message-min-width;
34
34
  position: relative;
35
35
 
36
36
  > .sender {
37
37
  margin: 0;
38
+ padding: 0 var(--gap);
38
39
  }
39
40
 
40
41
  > .message-content {
@@ -49,6 +50,21 @@ $default-message-border: 1px solid var(--hard-background-cards);
49
50
  color: var(--on-x);
50
51
  }
51
52
 
53
+ > ul {
54
+ padding: 0 var(--gap);
55
+ text-align: left;
56
+
57
+ > li {
58
+ color: var(--on-x);
59
+ }
60
+ }
61
+
62
+ > * {
63
+ &:not(:last-child) {
64
+ margin-bottom: 0;
65
+ }
66
+ }
67
+
52
68
  > .attachment {
53
69
  align-items: center;
54
70
  align-self: flex-end;
@@ -58,8 +74,12 @@ $default-message-border: 1px solid var(--hard-background-cards);
58
74
  }
59
75
  }
60
76
 
61
- &.#{bem.$base}.ours {
77
+ &.#{bem.$base}.theirs {
62
78
  align-self: flex-end;
79
+
80
+ > .sender {
81
+ text-align: end;
82
+ }
63
83
  }
64
84
  }
65
85
  }
package/src/ui/a/MetaCard/MetaCard.jsx CHANGED
@@ -22,6 +22,7 @@ const MetaCard = ({
22
22
  style,
23
23
  children,
24
24
  hasBackgroundBlur,
25
+ spaced,
25
26
  }) => {
26
27
  useInsertionEffect(() => {
27
28
  import('./styles.scss')
@@ -35,6 +36,7 @@ const MetaCard = ({
35
36
  componentClassName,
36
37
  userClassName,
37
38
  hasBackgroundBlur && styleNames.modifierBlur,
39
+ spaced && styleNames.modifierSpaced,
38
40
  ]
39
41
  .filter((e) => e)
40
42
  .join(' ')}
@@ -65,6 +67,11 @@ MetaCard.propTypes = {
65
67
  * Whether the card has a background blur
66
68
  * */
67
69
  hasBackgroundBlur:PropTypes.bool,
70
+
71
+ /**
72
+ * Whether to apply a gap to the top and bottom
73
+ * */
74
+ spaced:PropTypes.bool,
68
75
  }
69
76
 
70
77
  MetaCard.defaultProps = {
package/src/ui/a/MetaCard/styles.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  /* @pareto-engineering/generator-front 1.0.12 */
2
+ /* stylelint-disable selector-max-universal -- exception */
2
3
 
3
4
  @use "@pareto-engineering/bem";
4
5
  @use "@pareto-engineering/styles/src/mixins";
@@ -26,5 +27,19 @@ $default-blur: var(--theme-default-blur);
26
27
  margin-left: calc((var(--gap)) * -1);
27
28
  margin-right: calc((var(--gap)) * -1);
28
29
  padding: 0 var(--gap);
30
+
31
+ &.#{bem.$modifier-spaced} {
32
+ padding: var(--gap);
33
+
34
+ > * {
35
+ &:first-child {
36
+ margin-top: 0;
37
+ }
38
+
39
+ &:last-child {
40
+ margin-bottom: 0;
41
+ }
42
+ }
43
+ }
29
44
  }
30
45
  }
package/src/ui/b/Button/styles.scss CHANGED
@@ -59,9 +59,9 @@ $default-animation-time: .31s;
59
59
  cursor: pointer;
60
60
 
61
61
  &:hover
62
- :not(.#{bem.$modifier-gradient})
63
- :not(.#{bem.$modifier-ghost})
64
- :not(.#{bem.$modifier-simple}) {
62
+ :not(.#{bem.$modifier-gradient})
63
+ :not(.#{bem.$modifier-ghost})
64
+ :not(.#{bem.$modifier-simple}) {
65
65
  background: var(--soft-x, var(--soft-#{$default-color}));
66
66
  }
67
67
 
package/src/ui/b/Card/common/Group/styles.scss CHANGED
@@ -12,10 +12,6 @@ $default-spacing: var(--gap);
12
12
  &.snap-scroller {
13
13
  margin-left: calc($default-spacing * -1);
14
14
  margin-right: calc($default-spacing * -1);
15
-
16
- > .#{bem.$base}.card {
17
- height: 100%;
18
- }
19
15
  }
20
16
 
21
17
  &.vertical-flexbox {
package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx CHANGED
@@ -23,7 +23,7 @@ const helmetMap = [
23
23
  <title key="title_tag">
24
24
  {`
25
25
  ${v}
26
- ${c.SITE?.TITLE_SUFFIX && c.SITE.TITLE_SUFFIX}
26
+ ${c.SITE?.TITLE_SUFFIX ? c.SITE.TITLE_SUFFIX : ''}
27
27
  `}
28
28
  </title>
29
29
  ),
package/src/ui/f/fields/ChoicesInput/styles.scss CHANGED
@@ -33,6 +33,7 @@ $default-label-height: .5em;
33
33
  > label {
34
34
  background-color: var(--background-inputs);
35
35
  border-radius: var(--theme-default-border-radius);
36
+ color: var(--paragraph);
36
37
  cursor: pointer;
37
38
  display: block;
38
39
  height: $default-label-height;
@@ -40,6 +41,7 @@ $default-label-height: .5em;
40
41
  padding: $default-label-padding;
41
42
  position: relative;
42
43
  transition: $default-transition;
44
+ white-space: nowrap;
43
45
 
44
46
  &:hover {
45
47
  box-shadow: var(--theme-default-input-box-shadow);
package/src/ui/f/fields/SelectInput/styles.scss CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
  $default-spacing-size: 1em;
9
- $default-padding: .75em;
9
+ $default-padding: .5em;
10
10
  $default-bg-gradient: var(--background-far);
11
11
  $default-input-border-radius: var(--theme-default-input-border-radius);
12
12
 
@@ -21,7 +21,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
21
21
  >.select-wrapper {
22
22
  background-color: var(--background-inputs);
23
23
  border-radius: $default-input-border-radius;
24
- padding: $default-padding;
24
+ padding: $default-padding 0 $default-padding calc($default-padding * 1.5);
25
25
  position: relative;
26
26
 
27
27
  &::after {
@@ -40,7 +40,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
40
40
 
41
41
  select {
42
42
  appearance: none;
43
- background-color: inherit;
43
+ background-color: transparent;
44
44
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
45
45
  background-position: calc(100% - $default-spacing-size);
46
46
  background-repeat: no-repeat;
@@ -48,6 +48,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
48
48
  padding-right: $default-spacing-size;
49
49
 
50
50
  &.input {
51
+ color: var(--paragraph);
51
52
  width: 100%;
52
53
 
53
54
  &:disabled {
package/src/ui/f/fields/TextInput/styles.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  @use "../../../form.scss";
5
5
 
6
6
  $default-padding: .75em .75em .55em;
7
- $default-symbol-left: 3em;
7
+ $default-symbol-left: 1em;
8
8
  $default-padding-with-symbol:
9
9
  .75em
10
10
  calc($default-symbol-left - 1em)