@laerdal/life-react-components 6.0.0-dev.7.full → 6.0.0

package/dist/Toggles/TogglerStyles.cjs

@@ -55,32 +55,100 @@ const StyledSwitch = exports.StyledSwitch = _styledComponents.default.div`
     margin-left: 8px;
   }
 
+
+  label:first-of-type span.semantic, &[aria-pressed='true'] label:first-of-type span {
+    border: none;
+  }
+
   &:not(.disabled):active label:first-of-type span {
     &:before {
       background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
     }
   }
 
+  &:not([aria-pressed='true']) label:first-of-type span {
+    &.semantic:before {
+        background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'critical'
+}, props.theme)};
+    }
+  }
+
+  &[aria-pressed='true'] label:first-of-type span {
+    &.semantic:before {
+        background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'positive'
+}, props.theme)};
+    }
+  }
+
   &.disabled[aria-pressed='true'] label:first-of-type span {
-    background-color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)} !important;
     cursor: not-allowed;
 
     &:before {
-      background-color: ${props => _styles.COLORS.getColor('neutral_200', props.theme)} !important;
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)} !important;
       cursor: not-allowed;
     }
   }
 
-  &[aria-pressed='true']:hover span {
+  &[aria-pressed='true']:hover label:first-of-type span {
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
     &.semantic {
-      background-color: ${props => _styles.COLORS.getColor('positive_500', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'positive'
+}, props.theme)};
     }
 
-    &:before {
-      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+    &:not(.semantic):before {
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
+    }
+  }
+
+  &[aria-pressed='true']:active label:first-of-type span {
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
+    &.semantic {
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'positive'
+}, props.theme)};
+    }
+
+    &:not(.semantic):before {
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
 
+
   &[aria-pressed='true'] label:first-of-type span {
     background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
 
@@ -88,6 +156,14 @@ const StyledSwitch = exports.StyledSwitch = _styledComponents.default.div`
       background-color: ${props => _styles.COLORS.getColor('positive_500', props.theme)};
     }
 
+    &:not(.semantic):before {
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
+    }
+
     &:before {
       -webkit-transform: translateX(20px);
       -ms-transform: translateX(20px);
@@ -95,23 +171,96 @@ const StyledSwitch = exports.StyledSwitch = _styledComponents.default.div`
     }
   }
 
-  &.disabled[aria-pressed='false'] label:first-of-type span {
-    background-color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+  &:not([aria-pressed='true']).disabled label:first-of-type span {
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)} !important;
     cursor: not-allowed;
 
-    &:before {
-      background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)} !important;
+    &.semantic {
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)} !important;
+    }
+
+    &:not(.semantic):before {
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)} !important;
       cursor: not-allowed;
     }
   }
 
-  &[aria-pressed='false']:hover label:first-of-type span {
+  &:not([aria-pressed='true']) label:first-of-type span {
     &.semantic {
-      background-color: ${props => _styles.COLORS.getColor('critical_500', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'critical'
+}, props.theme)};
     }
+  }
 
-    &:before {
-      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+  &.disabled label:first-of-type span {
+    border-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)} !important;
+  }
+
+  &:not([aria-pressed='true']):hover label:first-of-type span {
+
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    border-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
+    &.semantic {
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'critical',
+  state: 'hover'
+}, props.theme)};
+    }
+
+    &:not(.semantic):before {
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover',
+  defaultVariant: 'default'
+}, props.theme)};
+    }
+  }
+
+  &:not([aria-pressed='true']):active label:first-of-type span {
+
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    border-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
+    &.semantic {
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'critical',
+  state: 'active'
+}, props.theme)};
+    }
+
+    &:not(.semantic):before {
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active',
+  defaultVariant: 'default'
+}, props.theme)};
     }
   }
 
@@ -140,6 +289,10 @@ const ToggleSwitch = exports.ToggleSwitch = _styledComponents.default.span`
   top: 0;
   left: 0;
   right: 0;
+  border: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
   bottom: 0;
   width: 36px;
   height: 16px;
@@ -163,7 +316,10 @@ const ToggleSwitch = exports.ToggleSwitch = _styledComponents.default.span`
     width: 12px;
     left: 2px;
     top: calc(50% - 6px);
-    background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'default'
+}, props.theme)};
     -webkit-transition: background-color 0.1s, transform 0.1s;
     transition: 0.1s;
     transition-timing-function: ease-in-out;

package/dist/Toggles/TogglerStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.cjs","names":["_styles","require","_styledComponents","_interopRequireDefault","_typography","StyledSwitch","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","state","getColor","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TogglerStyles.cjs","names":["_styles","require","_styledComponents","_interopRequireDefault","_typography","StyledSwitch","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","state","getColor","isOnFill","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n\r\n  label:first-of-type span.semantic, &[aria-pressed='true'] label:first-of-type span {\r\n    border: none;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']) label:first-of-type span {\r\n    &.semantic:before {\r\n        background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'critical' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    &.semantic:before {\r\n        background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'positive' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'primary' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'positive' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:active label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'primary' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'positive' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']).disabled label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)} !important;\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']) label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'critical' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled label:first-of-type span {\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)} !important;\r\n  }\r\n\r\n  &:not([aria-pressed='true']):hover label:first-of-type span {\r\n\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'hover' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant:'critical', state:'hover' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']):active label:first-of-type span {\r\n\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant:'critical', state: 'active' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'active', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  border: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'default' }, props.theme)};\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'default' }, props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toggles/TogglerStyles.js

@@ -47,32 +47,100 @@ export const StyledSwitch = styled.div`
     margin-left: 8px;
   }
 
+
+  label:first-of-type span.semantic, &[aria-pressed='true'] label:first-of-type span {
+    border: none;
+  }
+
   &:not(.disabled):active label:first-of-type span {
     &:before {
       background-color: ${props => COLORS.getColor('primary_100', props.theme)};
     }
   }
 
+  &:not([aria-pressed='true']) label:first-of-type span {
+    &.semantic:before {
+        background-color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'critical'
+}, props.theme)};
+    }
+  }
+
+  &[aria-pressed='true'] label:first-of-type span {
+    &.semantic:before {
+        background-color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'positive'
+}, props.theme)};
+    }
+  }
+
   &.disabled[aria-pressed='true'] label:first-of-type span {
-    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)} !important;
     cursor: not-allowed;
 
     &:before {
-      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)} !important;
       cursor: not-allowed;
     }
   }
 
-  &[aria-pressed='true']:hover span {
+  &[aria-pressed='true']:hover label:first-of-type span {
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
     &.semantic {
-      background-color: ${props => COLORS.getColor('positive_500', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'positive'
+}, props.theme)};
     }
 
-    &:before {
-      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+    &:not(.semantic):before {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
+    }
+  }
+
+  &[aria-pressed='true']:active label:first-of-type span {
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
+    &.semantic {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'positive'
+}, props.theme)};
+    }
+
+    &:not(.semantic):before {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
 
+
   &[aria-pressed='true'] label:first-of-type span {
     background-color: ${props => COLORS.getColor('primary_500', props.theme)};
 
@@ -80,6 +148,14 @@ export const StyledSwitch = styled.div`
       background-color: ${props => COLORS.getColor('positive_500', props.theme)};
     }
 
+    &:not(.semantic):before {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
+    }
+
     &:before {
       -webkit-transform: translateX(20px);
       -ms-transform: translateX(20px);
@@ -87,23 +163,96 @@ export const StyledSwitch = styled.div`
     }
   }
 
-  &.disabled[aria-pressed='false'] label:first-of-type span {
-    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+  &:not([aria-pressed='true']).disabled label:first-of-type span {
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)} !important;
     cursor: not-allowed;
 
-    &:before {
-      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;
+    &.semantic {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)} !important;
+    }
+
+    &:not(.semantic):before {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)} !important;
       cursor: not-allowed;
     }
   }
 
-  &[aria-pressed='false']:hover label:first-of-type span {
+  &:not([aria-pressed='true']) label:first-of-type span {
     &.semantic {
-      background-color: ${props => COLORS.getColor('critical_500', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'critical'
+}, props.theme)};
     }
+  }
 
-    &:before {
-      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+  &.disabled label:first-of-type span {
+    border-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)} !important;
+  }
+
+  &:not([aria-pressed='true']):hover label:first-of-type span {
+
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    border-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
+    &.semantic {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'critical',
+  state: 'hover'
+}, props.theme)};
+    }
+
+    &:not(.semantic):before {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover',
+  defaultVariant: 'default'
+}, props.theme)};
+    }
+  }
+
+  &:not([aria-pressed='true']):active label:first-of-type span {
+
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    border-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
+    &.semantic {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'critical',
+  state: 'active'
+}, props.theme)};
+    }
+
+    &:not(.semantic):before {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active',
+  defaultVariant: 'default'
+}, props.theme)};
     }
   }
 
@@ -132,6 +281,10 @@ export const ToggleSwitch = styled.span`
   top: 0;
   left: 0;
   right: 0;
+  border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
   bottom: 0;
   width: 36px;
   height: 16px;
@@ -155,7 +308,10 @@ export const ToggleSwitch = styled.span`
     width: 12px;
     left: 2px;
     top: calc(50% - 6px);
-    background-color: ${props => COLORS.getColor('white', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'default'
+}, props.theme)};
     -webkit-transition: background-color 0.1s, transform 0.1s;
     transition: 0.1s;
     transition-timing-function: ease-in-out;

package/dist/Toggles/TogglerStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","props","generateToken","componentType","defaultVariant","theme","Regular","state","getColor","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","props","generateToken","componentType","defaultVariant","theme","Regular","state","getColor","isOnFill","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n\r\n  label:first-of-type span.semantic, &[aria-pressed='true'] label:first-of-type span {\r\n    border: none;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']) label:first-of-type span {\r\n    &.semantic:before {\r\n        background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'critical' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    &.semantic:before {\r\n        background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'positive' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'primary' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'positive' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:active label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'primary' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'positive' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']).disabled label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)} !important;\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']) label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'critical' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled label:first-of-type span {\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)} !important;\r\n  }\r\n\r\n  &:not([aria-pressed='true']):hover label:first-of-type span {\r\n\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'hover' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant:'critical', state:'hover' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']):active label:first-of-type span {\r\n\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant:'critical', state: 'active' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'active', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  border: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'default' }, props.theme)};\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'default' }, props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toggles/__tests__/ToggleButton.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { fireEvent, render } from '../../test-utils';
+import '@testing-library/jest-dom';
+import { SystemIcons, ToggleButton } from '../..';
+import 'jest-styled-components';
+
+
+
+describe('<ToggleButton />', () => {
+  it('Renders ToggleButton component', async () => {
+    const { container } = render(<ToggleButton id={'toggleBtn'} active={false} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+  });
+
+  it('Renders ToggleButton component in active state', async () => {
+    const { container } = render(<ToggleButton id={'toggleBtn'} active={true} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    //check correct state class set
+    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('active');
+  });
+
+  it('Renders ToggleButton component in state-change', async () => {
+    const { container } = render(
+      <ToggleButton active={false} id={'toggleBtn'} activeState={{ icon: <SystemIcons.PlayList /> }} defaultState={{ icon: <SystemIcons.PlayList /> }} />,
+    );
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    //check correct state class set
+    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('state-change');
+  });
+
+  it('Renders ToggleButton component in disabled state', async () => {
+    const { container } = render(<ToggleButton disabled={true} id={'toggleBtn'} active={true} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    //check correct state class set
+    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('disabled');
+    //check inner button is disabled
+    expect(container.querySelector('[id="toggleBtn"]') as HTMLButtonElement).toBeDisabled();
+  });
+
+  it('Check action for ToggleButton component', async () => {
+    //mock action callback
+    const handleChange = jest.fn();
+
+    const { container } = render(
+      <ToggleButton active={false} onChange={handleChange} id={'toggleBtn'} activeState={{ icon: <SystemIcons.PlayList /> }} defaultState={{ icon: <SystemIcons.PlayList /> }} />,
+    );
+    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
+    fireEvent.click(container.querySelector('[id="toggleBtn"]') as HTMLButtonElement);
+
+    //check callback  called
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+});