@momentum-design/components 0.57.0 → 0.58.0

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import Chip from './components/chip';
 import Coachmark from './components/coachmark';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
+import StaticToggle from './components/statictoggle';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -51,6 +52,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, Linksimple, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, Linksimple, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -12,6 +12,7 @@ import Chip from './components/chip';
 import Coachmark from './components/coachmark';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
+import StaticToggle from './components/statictoggle';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -49,6 +50,6 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // Components Exports
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, Linksimple, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, Linksimple, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/index.d.ts

@@ -2,10 +2,10 @@ export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
-export { default as Badge } from './badge';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
@@ -37,6 +37,7 @@ export { default as Select } from './select';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
+export { default as StaticToggle } from './statictoggle';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

package/dist/react/index.js

@@ -2,10 +2,10 @@ export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
-export { default as Badge } from './badge';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
@@ -37,6 +37,7 @@ export { default as Select } from './select';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
+export { default as StaticToggle } from './statictoggle';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

package/dist/react/statictoggle/index.d.ts

@@ -0,0 +1,30 @@
+import Component from '../../components/statictoggle';
+/**
+ * This is a decorative component that is styled to look as a toggle. <br/>
+ * It has 3 properties - checked, size and disabled. <br/>
+ * We are using the same styling that has been created for the `mdc-toggle` component.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-statictoggle
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --mdc-statictoggle-width - Width of the toggle
+ * @cssproperty --mdc-statictoggle-height - Height of the toggle
+ * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle
+ * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border - Border of the toggle
+ * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state
+ * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state
+ * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state
+ * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state
+ * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state
+ * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/statictoggle/index.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/statictoggle';
+import { TAG_NAME } from '../../components/statictoggle/statictoggle.constants';
+/**
+ * This is a decorative component that is styled to look as a toggle. <br/>
+ * It has 3 properties - checked, size and disabled. <br/>
+ * We are using the same styling that has been created for the `mdc-toggle` component.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-statictoggle
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --mdc-statictoggle-width - Width of the toggle
+ * @cssproperty --mdc-statictoggle-height - Height of the toggle
+ * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle
+ * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border - Border of the toggle
+ * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state
+ * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state
+ * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state
+ * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state
+ * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state
+ * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'StaticToggle',
+});
+export default reactWrapper;

package/dist/react/toggle/index.d.ts

@@ -11,30 +11,26 @@ import Component from '../../components/toggle';
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
  * @dependency mdc-icon
+ * @dependency mdc-statictoggle
  *
  * @tagname mdc-toggle
  *
  * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
  *
- * @cssproperty --mdc-toggle-width - width of the toggle
- * @cssproperty --mdc-toggle-height - height of the toggle
- * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-border-radius - border radius of the toggle
- * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-border - border of the toggle
- * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state
- * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state
- * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state
- * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state
- * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state
- * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state
- * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state
- * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state
- * @cssproperty --mdc-toggle-help-text-color -  color of the help text label
- * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
- *
+ * @cssproperty --mdc-toggle-width - Width of the toggle
+ * @cssproperty --mdc-toggle-height - Height of the toggle
+ * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label
+ * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label
+ * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label
+ * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state
+ * @cssproperty --mdc-toggle-help-text-color - Color of the help text label
+ * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state
+ * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state
+ * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state
+ * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Event>;

package/dist/react/toggle/index.js

@@ -13,30 +13,26 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
  * @dependency mdc-icon
+ * @dependency mdc-statictoggle
  *
  * @tagname mdc-toggle
  *
  * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
  *
- * @cssproperty --mdc-toggle-width - width of the toggle
- * @cssproperty --mdc-toggle-height - height of the toggle
- * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-border-radius - border radius of the toggle
- * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-border - border of the toggle
- * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state
- * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state
- * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state
- * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state
- * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state
- * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state
- * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state
- * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state
- * @cssproperty --mdc-toggle-help-text-color -  color of the help text label
- * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
- *
+ * @cssproperty --mdc-toggle-width - Width of the toggle
+ * @cssproperty --mdc-toggle-height - Height of the toggle
+ * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label
+ * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label
+ * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label
+ * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state
+ * @cssproperty --mdc-toggle-help-text-color - Color of the help text label
+ * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state
+ * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state
+ * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state
+ * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.57.0"
+  "version": "0.58.0"
 }