@innovaccer/design-system 2.20.0 → 2.22.0

package/CHANGELOG.md

@@ -1,9 +1,60 @@
-## 2.20.0 (2023-09-08)
+## 2.22.0 (2023-09-28)
+
+### Highlights
+
+- feat(card): add selection card component (c88947a8)
+- feat(Icon): migration to material symbols from material icons (55ea8882)
+- feat: add iconType prop in components to switch between icon types (16c567a1)
+- feat(dropdown): add error and empty state template in dropdown component (3f84aa6b)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(card): add selection card component (c88947a8)
+- feat(Icon): migration to material symbols from material icons (55ea8882)
+- feat: add iconType prop in components to switch between icon types (16c567a1)
+
+### Fixes
+
+NA
+
+### Improvements
+
+- feat(table): add story for column sorting for number type values (3dc74351)
+- feat(dropdown): add error and empty state template in dropdown component (3f84aa6b)
+
+### Documentation
+
+NA
+
+---
+
+## 2.21.0 (2023-09-18)
 
 ### Highlights
 
-- feat(icon): migration to material symbols from material icons
-- feat(card): add action card component
+- feat(metricInput): add icon variations property in metric input component (3469d1b7)
+- feat(linkButton): add icon variations property in link button component (1c51679b)
+- feat(chip): add icon variations property in chip component (9770c92a)
+- feat(chipGroup): add icon variations property in chip group component (53682f18)
+- feat(chip): add icon variations property in chip input component (cf29c673)
+- feat(input): add icon variations property in input component (59902576)
+- feat(verticalNav): add icon variations property in vertical nav component (828a7066)
+- feat(horizontalNav): add icon variations property in horizontal nav component (d058d919)
+- feat(tab): add icon variations property in tab component (b3a6615a)
+- feat(dropdown): add icon variations property in dropdown component (bfcae4bd)
+- feat(metalist): add icon variations property in metalist component (ce7daba2)
 
 ### Breaking changes
 
@@ -11,7 +62,7 @@ NA
 
 ### Migration guide
 
-- feat(icon): material icons are migrated to material symbols. Need to update the test snapshots to update icon name (if used anywhere). 
+NA
 
 ### Deprecations
 
@@ -19,17 +70,21 @@ NA
 
 ### Features
 
-- feat(icon): migration to material symbols from material icons
-- feat(card): add action card component
-- feat(button): add icon variations property in button component
-- feat(input): add icon variations property in action button in input component
+- feat(metricInput): add icon variations property in metric input component (3469d1b7)
+- feat(linkButton): add icon variations property in link button component (1c51679b)
+- feat(chip): add icon variations property in chip component (9770c92a)
+- feat(chipGroup): add icon variations property in chip group component (53682f18)
+- feat(chip): add icon variations property in chip input component (cf29c673)
+- feat(input): add icon variations property in input component (59902576)
+- feat(verticalNav): add icon variations property in vertical nav component (828a7066)
+- feat(horizontalNav): add icon variations property in horizontal nav component (d058d919)
+- feat(tab): add icon variations property in tab component (b3a6615a)
+- feat(dropdown): add icon variations property in dropdown component (bfcae4bd)
+- feat(metalist): add icon variations property in metalist component (ce7daba2)
 
 ### Fixes
 
-- fix(datepicker): update selection chip to action chip in preset story in patterns
-- fix(dateRangePicker): fix range selection behaviour
-- fix(chipinput): update chipinput error state
-- fix(input): update icon to icon component in action button
+NA
 
 ### Improvements
 
@@ -41,6 +96,49 @@ NA
 
 ---
 
+## 2.20.0 (2023-09-08)
+
+### Highlights
+
+- feat(icon): migration to material symbols from material icons (b4677f51)
+- feat(card): add action card component (1f6f2a86)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+- feat(icon): material icons are migrated to material symbols. Need to update the test snapshots to update icon name (if used anywhere). (b4677f51) 
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(icon): migration to material symbols from material icons (b4677f51)
+- feat(card): add action card component (1f6f2a86)
+- feat(button): add icon variations property in button component (615bde8f)
+- feat(input): add icon variations property in action button in input component (336dc41e)
+
+### Fixes
+
+- fix(datepicker): update selection chip to action chip in preset story in patterns (db5d8275)
+- fix(dateRangePicker): fix range selection behaviour (2181bf0c)
+- fix(chipinput): update chipinput error state (f5aa019d)
+- fix(input): update icon to icon component in action button (336dc41e)
+
+### Improvements
+
+- chore(deps-dev): bump word-wrap from 1.2.3 to 1.2.5 (a0f9cd0e)
+
+### Documentation
+
+NA
+
+---
+
 ## 2.19.0 (2023-08-25)
 
 ### Highlights

package/css/dist/index.css

@@ -274,23 +274,19 @@
   --duration--slow-02: 720ms;
 }
 
-@font-face {
-  font-family: 'Material Symbols Outlined';
-  font-style: normal;
-  src: url(MaterialSymbolsOutlined.ttf);
-}
-
+/* fallback */
 @font-face {
   font-family: 'Material Symbols Rounded';
   font-style: normal;
-  src: url(MaterialSymbolsRounded.ttf);
+  font-weight: 300;
+  src: url(MaterialSymbolsRounded.woff2) format('woff2');
 }
 
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: 'Material Symbols Rounded';
   font-weight: normal;
   font-style: normal;
-  font-size: 16px;    /* preferred icon size */
+  font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
@@ -302,14 +298,12 @@
   -webkit-font-smoothing: antialiased;
 }
 
-.material-icons-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-size: 24px; /* Preferred icon size */
+.material-icons-rounded {
+  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
 }
 
-.material-icons-rounded {
-  font-family: 'Material Symbols Rounded';
-  font-size: 24px; /* Preferred icon size */
+.material-icons-outlined {
+  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
 }
 
 @-webkit-keyframes fadeIn {
@@ -5684,6 +5678,98 @@ body {
   box-shadow: none;
 }
 
+.Selection-card {
+  cursor: pointer;
+  border-radius: var(--spacing-m);
+  position: relative;
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.Selection-card:hover {
+  box-shadow: inset 0 0 0 var(--spacing-s) var(--inverse-lightest);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.Selection-card:focus,
+.Selection-card:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-light);
+}
+
+.Selection-card:active {
+  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.Selection-card--disabled {
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-lighter);
+}
+
+/* selected states */
+
+.Selection-card--selected {
+  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);
+}
+
+.Selection-card--selected:hover {
+  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary-dark);
+}
+
+.Selection-card--selected:focus,
+.Selection-card--selected:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-spread) var(--primary-shadow), inset 0 0 0 var(--spacing-s) var(--primary);
+}
+
+.Selection-card--selected:active {
+  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary-darker);
+}
+
+.Selection-card--selected-disabled {
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary-lighter);
+}
+
+/* overlay classes */
+
+.Selection-card-overlay {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  position: absolute;
+  pointer-events: none;
+  border-radius: var(--spacing-m);
+}
+
+.Selection-card:active .Selection-card-overlay {
+  background-color: var(--primary);
+  opacity: 10%;
+}
+
+.Selection-card--disabled .Selection-card-overlay {
+  background-color: var(--secondary-lightest);
+  opacity: 50%;
+}
+
+.Selection-card--selected .Selection-card-overlay {
+  background-color: var(--primary);
+  opacity: 4%;
+}
+
+.Selection-card--selected:active .Selection-card-overlay {
+  background-color: var(--primary);
+  opacity: 4%;
+}
+
+.Selection-card--selected-disabled .Selection-card-overlay {
+  background-color: var(--primary-lightest);
+  opacity: 50%;
+}
+
 @-webkit-keyframes sidesheet-open {
   from {
     right: -100%;