@innovaccer/design-system 2.34.0 → 2.36.0

package/CHANGELOG.md

@@ -1,3 +1,118 @@
+## 2.36.0 (2024-06-11)
+
+### Highlights
+
+- feat(AIButton): add new AI Button component (ce14715c)
+- feat(saraSparkle): add sara sparkle component (e7f54cb3)
+- feat(sara): add new sara component (848ee75c)
+- feat(AIButton): update stories for AI Button component (fbe8b2fd)
+- feat(AIIconButton): add new AI Icon Button Component (120079bd)
+- feat(AIChip): add new AI Chip component (66bd9303)
+- feat(AIResponse): add new AI Response component (09c7f087)
+- feat(progressIndicator): add new progress indicator pattern (f3eaf718)
+- feat(calendar): update calendar states (9d515e38)
+- feat(Input): update readonly state for all input components (8aa4b949)
+- feat(chip): add overflow behavior in chip and chipInput (b5fac8d0)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(AIButton): add new AI Button component (ce14715c)
+- feat(saraSparkle): add sara sparkle component (e7f54cb3)
+- feat(sara): add new sara component (848ee75c)
+- feat(AIButton): update stories for AI Button component (fbe8b2fd)
+- feat(AIIconButton): add new AI Icon Button Component (120079bd)
+- feat(AIChip): add new AI Chip component (66bd9303)
+- feat(AIResponse): add new AI Response component (09c7f087)
+- feat(calendar): update calendar states (9d515e38)
+- feat(Input): update readonly state for all input components (8aa4b949)
+- feat(chip): add overflow behavior in chip and chipInput (b5fac8d0)
+- feat(progressIndicator): add new progress indicator pattern (f3eaf718)
+
+### Fixes
+
+- fix: update storybook link (0f79e9de)
+- fix(actions): update node js version for chromatic build job (20c18981)
+- fix(metricInput): update value of metric input when showActionButton prop is false (5e8b396b)
+- fix(select): update overflow of options in popover with respect to trigger size (4dad3cd3)
+- fix(select): update state of placeholder (c8f9f154)
+- fix(saraSparkle): update size of sara sparkle in story (8ab3d928)
+- fix(AIButton): update focus state of AI Button component (426872c4)
+
+### Improvements
+
+- fix(docs): update title for components, content, patterns and visualization page (4f3dedde)
+
+### Documentation
+
+- docs(calendar): update images of calendar states (d8b72589)
+- docs(chip): add overflow behavior in chip (992403da)
+- docs(chipInput): add overflow behavior in chipInput (c4313572)
+- docs(emptyState): add empty state documentation (a572b460)
+- docs(input): update the documentation of state of input (f31e9aaf)
+- docs(AIChip): add documentation of AI Chip component (04c8a303)
+- docs(AITrigger): add AI trigger components documentation (77909038)
+- docs(sara): add sara and sara sparkle documentation (439f03a2)
+- docs(AIResponse): add AI Response documentation (ebe60d42)
+
+---
+
+## 2.35.0 (2024-05-28)
+
+### Highlights
+
+- feat(emptyState): add emptyState component (0a8c8f89)
+- feat(combobox): add keyboard event handler support (748f7deb)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(emptyState): add emptyState component (0a8c8f89)
+- feat(combobox): add keyboard event handler support (748f7deb)
+
+### Fixes
+
+- fix(docs): update components overview page layouts (c646237f)
+- fix(docs): update components overview page layout and cards layout (a633151b)
+- docs: update layout of components overview page and card opacity (8524e733)
+- fix(table): update table stories card border radius (39d7f348)
+- fix(inputMask): update set selectionRange method for unsupported types (a0d90ed0)
+- fix(emptyState): fix alignment issue when className is passed (0209f18c)
+
+### Improvements
+
+- refactor: structure package json and add engines restriction (2e531a3f)
+- refactor(docs): update default storybook url in docs exporter script (97c9c80b)
+- chore(actions): add docs site test step for docs pull request (a97913a8)
+
+### Documentation
+
+- docs(uistate): update empty state in uistate documentation (0217a54b)
+
+---
+
 ## 2.34.0 (2024-05-16)
 
 ### Highlights

package/README.md

@@ -61,7 +61,7 @@ const App = () => {
 ```
 
 For more information about each component, check out our
-[Storybook](https://innovaccer.github.io/design-system/).
+[Storybook](https://mds.innovaccer.com/).
 Check out our [Tutorial](/docs/AppTutorial.md) to guide you in creating an awesome app.
 
 ## CDN
@@ -135,7 +135,7 @@ Here are the supporting repositories.
 
 - [🌶 Masala Design System](http://design.innovaccer.com)
 
-- [📗 Components Storybook](https://innovaccer.github.io/design-system)
+- [📗 Components Storybook](https://mds.innovaccer.com)
 
 ## ❗ Code of Conduct
 

package/css/dist/index.css

@@ -531,6 +531,37 @@
   transition: var(--duration--moderate-02) var(--standard-productive-curve);
 }
 
+.shimmer-text {
+  text-align: center;
+  background: var(--inverse-light);
+  color: rgba(47, 47, 47, 0.1) !important;
+  background: linear-gradient(to right, var(--inverse-light) 0%, var(--secondary-dark) 50%, var(--inverse-light) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+          background-clip: text;
+  -webkit-animation: shimmerText 2s infinite linear forwards;
+          animation: shimmerText 2s infinite linear forwards;
+  background-clip: text;
+}
+
+@-webkit-keyframes shimmerText {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+@keyframes shimmerText {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
 .ss {
   background: red;
 }
@@ -1880,7 +1911,15 @@ body {
 }
 
 .Calendar-valueWrapper--dummy {
-  opacity: var(--transparent-58);
+  opacity: var(--opacity-20);
+}
+
+.Calendar-valueWrapper--disabled {
+  opacity: var(--opacity-10);
+}
+
+.Calendar-valueWrapper--active-dummy {
+  opacity: var(--opacity-16);
 }
 
 .Calendar-value--disabled {
@@ -2356,6 +2395,14 @@ body {
   color: var(--primary-darker);
 }
 
+.Chip-text--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline;
+  max-width: 100%;
+}
+
 .Chip-selection--selectedDisabled {
   background: var(--primary-lightest);
   border-color: var(--primary-lighter);
@@ -2507,7 +2554,7 @@ body {
   outline: none;
   display: flex;
   width: 100%;
-  min-width: 30%;
+  min-width: 15%;
   flex: 0px;
   box-sizing: border-box;
   height: var(--spacing-xl);
@@ -3293,6 +3340,24 @@ body {
   background: transparent;
 }
 
+.EmptyState-Wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  width: 100%;
+}
+
+.EmptyState-image {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .EmptyState-title {
   text-align: center;
   max-width: 480px;
@@ -3320,6 +3385,39 @@ body {
   margin-bottom: var(--spacing-2);
 }
 
+.EmptyState-text {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+}
+
+.EmptyState-actions {
+  display: flex;
+  justify-content: center;
+}
+
+.EmptyState-title--compressed {
+  margin-top: var(--spacing-2);
+}
+.EmptyState-title--standard {
+  margin-top: var(--spacing-xl);
+}
+.EmptyState-title--tight {
+  margin-top: var(--spacing-l);
+}
+
+.EmptyState-actions--compressed {
+  margin-top: var(--spacing-2);
+}
+
+.EmptyState-actions--standard {
+  margin-top: var(--spacing-xl);
+}
+
+.EmptyState-actions--tight {
+  margin-top: var(--spacing-l);
+}
+
 .FileIcon {
   padding: var(--spacing);
   border-radius: 50%;
@@ -4467,6 +4565,12 @@ body {
   pointer-events: none;
 }
 
+.Input--readOnly {
+  background: var(--secondary-lightest);
+  border-color: var(--secondary);
+  pointer-events: none;
+}
+
 .Input--disabled .Input-icon--left {
   color: var(--inverse-lightest);
 }
@@ -5096,6 +5200,12 @@ body {
   pointer-events: none;
 }
 
+.MetricInput--readOnly {
+  background: var(--secondary-lightest);
+  border-color: var(--secondary);
+  pointer-events: none;
+}
+
 .MetricInput--disabled .MetricInput-icon {
   color: var(--inverse-lightest);
 }
@@ -7154,6 +7264,12 @@ body {
   border-color: var(--secondary-light);
 }
 
+.Textarea--readOnly {
+  pointer-events: none;
+  background: var(--secondary-lightest);
+  border-color: var(--secondary);
+}
+
 .Textarea--error {
   border: var(--spacing-xs) solid var(--alert);
 }
@@ -7770,6 +7886,249 @@ body {
   color: var(--text);
 }
 
+.AIButton {
+  padding: var(--spacing) var(--spacing-l);
+  border-radius: var(--spacing-m);
+  cursor: pointer;
+  border: 0;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size);
+  line-height: var(--font-height-s);
+  display: flex;
+  align-items: center;
+}
+
+.AIButton:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.AIButton:focus {
+  outline: 0;
+}
+
+/* Primary Button */
+
+.AIButton--primary {
+  background: var(--primary);
+  color: var(--white);
+}
+
+.AIButton--primary:hover {
+  background: var(--primary-dark);
+}
+
+.AIButton--primary:active {
+  background: var(--primary-darker);
+}
+
+.AIButton--primary:disabled {
+  background: var(--primary-lighter);
+}
+
+.AIButton--primary:focus {
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+/* Basic Button */
+
+.AIButton--basic {
+  background: var(--secondary-light);
+  color: var(--inverse);
+}
+
+.AIButton--basic:hover {
+  background: var(--secondary);
+}
+
+.AIButton--basic:active {
+  background: var(--secondary-dark);
+}
+
+.AIButton--basic:disabled {
+  background: var(--secondary-lighter);
+  color: var(--inverse-lightest);
+}
+
+.AIButton--basic:focus {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+/* Button Icon */
+
+.AIButton-Icon {
+  margin-right: var(--spacing);
+}
+
+.AIResponse-box {
+  background: linear-gradient(white, white) padding-box,
+    linear-gradient(to right, rgba(255, 194, 8, 0.64), rgba(227, 28, 121, 0.64)) border-box;
+  border-radius: var(--spacing-l);
+  border: var(--spacing-s) solid transparent;
+  border-top-left-radius: 0;
+  padding: var(--spacing) var(--spacing-l);
+}
+
+.AIResponse-actionBar {
+  margin-top: var(--spacing-m);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.AIResponse-button {
+  opacity: var(--opacity-12);
+}
+
+.AIResponse-box:hover .AIResponse-button {
+  opacity: 1;
+}
+
+.AIResponse-button--selected {
+  opacity: 1;
+}
+
+.AIChip {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--spacing-l);
+  padding: var(--spacing-s) var(--spacing);
+  background: var(--secondary-light);
+  cursor: pointer;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border: 0;
+}
+
+.AIChip:hover {
+  background: var(--secondary);
+}
+
+.AIChip:active {
+  background: var(--secondary-dark);
+}
+
+.AIChip:focus,
+.AIChip:focus-visible {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: none;
+}
+
+.AIChip-icon {
+  width: var(--spacing-2);
+  height: var(--spacing-2);
+  font-size: var(--spacing-2) !important;
+  margin-right: var(--spacing-m);
+  background: linear-gradient(to bottom, #ffc208 0%, #e31c79 100%);
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+}
+
+.AIChip-text {
+  color: var(--inverse);
+  font-size: var(--font-size);
+  line-height: var(--font-height);
+  font-family: var(--font-family);
+}
+
+/* Disabled Chip */
+
+.AIChip--disabled {
+  background: var(--secondary-lighter);
+}
+
+.AIChip-icon--disabled {
+  background: linear-gradient(to bottom, #ffe79e 0%, #f4a4c9 100%);
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+}
+
+.AIChip-text--disabled {
+  color: var(--inverse-lightest);
+}
+
+.AIChip:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.AIIconButton {
+  background: transparent;
+  padding: var(--spacing);
+  border-radius: var(--spacing-m);
+  cursor: pointer;
+  border: 0;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size);
+  line-height: var(--font-height-s);
+  position: relative;
+}
+
+.AIIconButton:hover {
+  background: var(--secondary);
+  color: var(--secondary) !important;
+}
+
+.AIIconButton:active {
+  background: var(--secondary-dark);
+  color: var(--secondary-dark) !important;
+}
+
+.AIIconButton:focus {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.AIIconButton:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  background: transparent;
+  color: var(--inverse-lightest);
+}
+
+.AIIconButton-icon {
+  overflow: hidden;
+  flex-shrink: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  line-height: inherit;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.AIIconButton-AIIcon {
+  position: absolute;
+}
+
+.AIIconButton-AIIcon--regularTop {
+  bottom: calc(var(--spacing-l) + var(--spacing-s)); /* 14px */
+  left: calc(var(--spacing-l) + var(--spacing-xs)); /* 13px */
+}
+
+.AIIconButton-AIIcon--largeTop {
+  bottom: calc(var(--spacing-2) + var(--spacing-s)); /* 18px */
+  left: calc(var(--spacing-2) + var(--spacing-xs)); /* 17px */
+}
+
+.AIIconButton-AIIcon--regularBottom {
+  top: calc(var(--spacing-l) + var(--spacing-xs)); /* 13px */
+  left: calc(var(--spacing-l) + var(--spacing-s)); /* 14px */
+}
+
+.AIIconButton-AIIcon--largeBottom {
+  top: calc(var(--spacing-2) + var(--spacing-xs)); /* 17px */
+  left: calc(var(--spacing-2) + var(--spacing-s)); /* 18px */
+}
+
 .align-baseline {
   vertical-align: baseline !important;
 }