@innovaccer/design-system 4.1.0 → 4.2.0

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 (44) hide show
  1. package/CHANGELOG.md +61 -0
  2. package/css/dist/index.css +276 -196
  3. package/css/dist/index.css.map +1 -1
  4. package/css/gulpfile.js +9 -0
  5. package/css/src/components/avatarSelection.module.css +3 -3
  6. package/css/src/components/chatBubble.module.css +53 -0
  7. package/css/src/components/chatSeparator.module.css +23 -0
  8. package/dist/brotli/index.js +1 -1
  9. package/dist/brotli/index.js.br +0 -0
  10. package/dist/cjs/index.js +1 -1
  11. package/dist/core/components/atoms/avatarGroup/AvatarGroup.d.ts +2 -0
  12. package/dist/core/components/atoms/avatarGroup/AvatarPopperBody.d.ts +1 -0
  13. package/dist/core/components/atoms/avatarSelection/AvatarSelection.d.ts +2 -0
  14. package/dist/core/components/molecules/chat/Chat.d.ts +17 -0
  15. package/dist/core/components/molecules/chat/chatBubble/ChatBubble.d.ts +16 -0
  16. package/dist/core/components/molecules/chat/chatBubble/IncomingBubble.d.ts +26 -0
  17. package/dist/core/components/molecules/chat/chatBubble/OutgoingBubble.d.ts +17 -0
  18. package/dist/core/components/molecules/chat/chatBubble/index.d.ts +2 -0
  19. package/dist/core/components/molecules/chat/dateSeparator/DateSeparator.d.ts +7 -0
  20. package/dist/core/components/molecules/chat/dateSeparator/index.d.ts +2 -0
  21. package/dist/core/components/molecules/chat/index.d.ts +2 -0
  22. package/dist/core/components/molecules/chat/newMessage/NewMessage.d.ts +7 -0
  23. package/dist/core/components/molecules/chat/newMessage/index.d.ts +2 -0
  24. package/dist/core/components/molecules/chat/typingIndicator/TypingIndicator.d.ts +7 -0
  25. package/dist/core/components/molecules/chat/typingIndicator/index.d.ts +2 -0
  26. package/dist/core/components/molecules/chat/unreadMessage/UnreadMessage.d.ts +7 -0
  27. package/dist/core/components/molecules/chat/unreadMessage/index.d.ts +2 -0
  28. package/dist/core/index.d.ts +1 -0
  29. package/dist/core/index.type.d.ts +6 -0
  30. package/dist/esm/index.js +1042 -740
  31. package/dist/figma/AvatarGroup.figma.d.ts +1 -0
  32. package/dist/figma/AvatarSelection.figma.d.ts +1 -0
  33. package/dist/figma/DateSeparator.figma.d.ts +1 -0
  34. package/dist/figma/NewMessage.figma.d.ts +1 -0
  35. package/dist/figma/TypingIndicator.figma.d.ts +1 -0
  36. package/dist/figma/UnreadMessage.figma.d.ts +1 -0
  37. package/dist/gzip/index.js +1 -1
  38. package/dist/gzip/index.js.gz +0 -0
  39. package/dist/index.js +910 -615
  40. package/dist/index.js.map +1 -1
  41. package/dist/index.umd.css +83 -3
  42. package/dist/index.umd.js +1 -1
  43. package/dist/types/tsconfig.type.tsbuildinfo +329 -18
  44. package/package.json +1 -1
package/css/gulpfile.js CHANGED
@@ -9,11 +9,20 @@ const cleaner = require('gulp-clean');
9
9
  const materialIcons = './material-design-icons/iconfont/material-icons.css';
10
10
  const materialFont = './material-design-icons/iconfont/*.{ttf,otf,woff2}';
11
11
 
12
+ const typographyCssPath = [
13
+ './src/components/text.module.css',
14
+ './src/components/heading.module.css',
15
+ './src/components/label.module.css',
16
+ './src/components/caption.module.css',
17
+ './src/components/subheading.module.css',
18
+ ];
19
+
12
20
  const sources = [
13
21
  './src/tokens/*.css',
14
22
  './src/variables/*.css',
15
23
  materialIcons,
16
24
  './src/core/*.css',
25
+ ...typographyCssPath,
17
26
  './src/components/*.css',
18
27
  './src/ai-components/*.css',
19
28
  './src/utils/*.css',
package/css/src/components/avatarSelection.module.css CHANGED
@@ -15,13 +15,13 @@
15
15
  position: relative;
16
16
  }
17
17
 
18
- .SelectionAvatarGroup-item:focus,
19
- .SelectionAvatarGroup-item:focus-visible {
18
+ .SelectionAvatarGroup-item--active:focus,
19
+ .SelectionAvatarGroup-item--active:focus-visible {
20
20
  outline: 3px solid var(--primary-shadow);
21
21
  outline-offset: 3px;
22
22
  }
23
23
 
24
- .SelectionAvatarGroup-item:active {
24
+ .SelectionAvatarGroup-item--active:active {
25
25
  outline: var(--spacing-s) solid #00509f;
26
26
  outline-offset: var(--spacing-xs);
27
27
  }
package/css/src/components/chatBubble.module.css ADDED
@@ -0,0 +1,53 @@
1
+ .ChatBubble-box--outgoing {
2
+ background-color: var(--primary-lightest);
3
+ border-radius: var(--spacing);
4
+ padding: var(--spacing) var(--spacing-l);
5
+ }
6
+
7
+ .ChatBubble-separator {
8
+ width: var(--spacing-m);
9
+ height: var(--spacing-m);
10
+ border-radius: 50%;
11
+ margin: 0 var(--spacing);
12
+ background: var(--inverse-lightest);
13
+ }
14
+
15
+ .ChatBubble-box--noSuccess {
16
+ margin-right: calc(var(--spacing-2) + var(--spacing-m));
17
+ }
18
+
19
+ .ChatBubble-box {
20
+ width: 100%;
21
+ }
22
+
23
+ .ChatBubble-actionBar--outgoing {
24
+ width: max-content;
25
+ margin-right: var(--spacing-m);
26
+ margin-top: var(--spacing-0-75);
27
+ }
28
+
29
+ .ChatBubble-actionBar--incoming {
30
+ width: max-content;
31
+ margin-left: var(--spacing-m);
32
+ margin-top: var(--spacing-0-75);
33
+ }
34
+
35
+ .ChatBubble-box--incoming {
36
+ background-color: var(--secondary-lightest);
37
+ border-radius: var(--spacing);
38
+ padding: var(--spacing) var(--spacing-l);
39
+ }
40
+
41
+ .ChatBubble-metaData--incoming {
42
+ margin-left: calc(var(--spacing-3) + var(--spacing));
43
+ }
44
+
45
+ .ChatBubble-boxWrapper {
46
+ flex: 0 0 auto;
47
+ display: flex;
48
+ max-width: 70%;
49
+ }
50
+
51
+ .ChatBubble-actionBarWrapper {
52
+ flex: 0 0 auto;
53
+ }
package/css/src/components/chatSeparator.module.css ADDED
@@ -0,0 +1,23 @@
1
+ .Chat-UnreadMessage {
2
+ border-radius: var(--spacing-2);
3
+ padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing);
4
+ display: flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ background-color: var(--primary);
8
+ cursor: pointer;
9
+ }
10
+
11
+ .NewMessage-Divider--left {
12
+ flex: 1;
13
+ height: var(--spacing-xs);
14
+ background-color: var(--primary);
15
+ margin-right: var(--spacing-2);
16
+ }
17
+
18
+ .NewMessage-Divider--right {
19
+ flex: 1;
20
+ height: var(--spacing-xs);
21
+ background-color: var(--primary);
22
+ margin-left: var(--spacing-2);
23
+ }