@innovaccer/design-system 2.9.0-0 → 2.9.0

package/core/components/organisms/pageHeader/__stories__/variants/withTabs.story.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PageHeader from '../../PageHeader';
-import { Button, Text, Tab, TabsWrapper, Badge } from '@/index';
+import { Button, Text, Tab, TabsWrapper, Pills } from '@/index';
 import { action } from '@storybook/addon-actions';
 import { updateKnob } from '@/utils/storybookEventEmitter';
 import { number, text, boolean } from '@storybook/addon-knobs';
@@ -24,7 +24,7 @@ export const withTabs = () => {
           label={
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">2</Badge>
+                <Pills appearance="secondary">2</Pills>
               </div>
               <Text appearance={active !== 0 ? 'subtle' : undefined}>Tab 1</Text>
             </>
@@ -36,7 +36,7 @@ export const withTabs = () => {
           label={
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">12</Badge>
+                <Pills appearance="secondary">12</Pills>
               </div>
               <Text appearance={active !== 1 ? 'subtle' : undefined}>Tab 2</Text>
             </>
@@ -48,7 +48,7 @@ export const withTabs = () => {
           label={
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">5</Badge>
+                <Pills appearance="secondary">5</Pills>
               </div>
               <Text appearance={active !== 2 ? 'subtle' : undefined}>Tab 3</Text>
             </>
@@ -95,7 +95,7 @@ const customCode = `() => {
           label={(
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">2</Badge>
+                <Pills appearance="secondary">2</Pills>
               </div>
               <Text appearance={active !== 0 ? 'subtle' : undefined}>Tab 1</Text>
             </>
@@ -107,7 +107,7 @@ const customCode = `() => {
           label={(
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">12</Badge>
+                <Pills appearance="secondary">12</Pills>
               </div>
               <Text appearance={active !== 1 ? 'subtle' : undefined}>Tab 2</Text>
             </>
@@ -119,7 +119,7 @@ const customCode = `() => {
           label={(
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">5</Badge>
+                <Pills appearance="secondary">5</Pills>
               </div>
               <Text appearance={active !== 2 ? 'subtle' : undefined}>Tab 3</Text>
             </>

package/css/dist/index.css

@@ -1430,6 +1430,7 @@ body {
       -ms-user-select: none;
           user-select: none;
   border-radius: var(--spacing-m);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Calendar-value:hover {
@@ -1700,6 +1701,7 @@ body {
   box-sizing: border-box;
   height: 100%;
   width: 100%;
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Checkbox-input:focus {
@@ -1780,6 +1782,7 @@ body {
   flex-direction: row;
   cursor: default;
   height: var(--spacing-xl);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .Chip-wrapper {
   display: inline-flex;
@@ -2139,6 +2142,7 @@ body {
 
 .Option {
   display: flex;
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Option,
@@ -2223,6 +2227,7 @@ body {
   padding-bottom: unset;
   background: var(--secondary-light);
   color: var(--text);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .DropdownButton-wrapper {
@@ -3259,6 +3264,7 @@ body {
   padding-left: var(--spacing-l);
   border-radius: var(--spacing-2);
   margin: 0 var(--spacing-xs);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .HorizontalNav-menu--disabled {
@@ -3491,6 +3497,7 @@ body {
   padding-right: var(--spacing-l);
   padding-left: var(--spacing-l);
   background: var(--white);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Input--tiny {
@@ -3624,6 +3631,7 @@ body {
 .Link {
   text-decoration: none;
   font-weight: var(--font-weight-medium);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Link--regular {
@@ -3825,6 +3833,7 @@ body {
   border: var(--border);
   padding-right: var(--spacing-m);
   background: var(--white);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .MetricInput--regular {
@@ -4687,6 +4696,7 @@ body {
   justify-content: center;
   box-sizing: border-box;
   z-index: 1;
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Radio--disabled {
@@ -4717,6 +4727,7 @@ body {
 
 .Radio-input:checked ~ .Radio-wrapper:after {
   display: block;
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Radio-wrapper:after {
@@ -4992,6 +5003,8 @@ body {
   box-sizing: border-box;
   outline: none;
   display: flex;
+  transition: border var(--duration--fast-01) var(--standard-productive-curve),
+    background-color var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Slider-handle:hover {
@@ -5909,6 +5922,7 @@ body {
   display: flex;
   align-items: center;
   cursor: pointer;
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .MenuItem--horizontal {