@momentum-design/components 0.34.0 → 0.36.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import Badge from './components/badge';
 import Bullet from './components/bullet';
 import Button from './components/button';
 import Checkbox from './components/checkbox';
+import Coachmark from './components/coachmark';
 import Divider from './components/divider';
 import FormfieldGroup from './components/formfieldgroup';
 import Icon from './components/icon';
@@ -22,11 +23,12 @@ import Tab from './components/tab';
 import Text from './components/text';
 import ThemeProvider from './components/themeprovider';
 import Toggle from './components/toggle';
+import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import Textarea from './components/textarea';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 import type { TextType } from './components/text/text.types';
-export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Textarea, };
+export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Coachmark, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Textarea, Tooltip, };
 export type { TextType, SpinnerSize, SpinnerVariant, };
 export { inMemoryCache, webAPIIconsCache };

package/dist/index.js

@@ -4,6 +4,7 @@ import Badge from './components/badge';
 import Bullet from './components/bullet';
 import Button from './components/button';
 import Checkbox from './components/checkbox';
+import Coachmark from './components/coachmark';
 import Divider from './components/divider';
 import FormfieldGroup from './components/formfieldgroup';
 import Icon from './components/icon';
@@ -22,8 +23,9 @@ import Tab from './components/tab';
 import Text from './components/text';
 import ThemeProvider from './components/themeprovider';
 import Toggle from './components/toggle';
+import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import Textarea from './components/textarea';
-export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Textarea, };
+export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Coachmark, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Textarea, Tooltip, };
 export { inMemoryCache, webAPIIconsCache };

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

@@ -0,0 +1,23 @@
+import Component from '../../components/coachmark';
+/**
+ * Coachmark component based on top of the popover component,
+ * with the default value of certain properties changed.
+ *
+ * @dependency mdc-popover
+ *
+ * @tagname mdc-coachmark
+ *
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-border-color - border color of the popover
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
+ *
+ * @slot - Default slot for modal container
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/coachmark/index.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/coachmark';
+import { TAG_NAME } from '../../components/coachmark/coachmark.constants';
+/**
+ * Coachmark component based on top of the popover component,
+ * with the default value of certain properties changed.
+ *
+ * @dependency mdc-popover
+ *
+ * @tagname mdc-coachmark
+ *
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-border-color - border color of the popover
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
+ *
+ * @slot - Default slot for modal container
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Coachmark',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -1,10 +1,11 @@
 export { default as Avatar } from './avatar';
-export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
+export { default as AvatarButton } from './avatarbutton';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
+export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
@@ -25,4 +26,5 @@ export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
+export { default as Tooltip } from './tooltip';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/index.js

@@ -1,10 +1,11 @@
 export { default as Avatar } from './avatar';
-export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
+export { default as AvatarButton } from './avatarbutton';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
+export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
@@ -25,4 +26,5 @@ export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
+export { default as Tooltip } from './tooltip';
 export { default as VirtualizedList } from './virtualizedlist';

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

@@ -0,0 +1,17 @@
+import Component from '../../components/tooltip';
+/**
+ * A tooltip is triggered by mouse hover or by keyboard focus
+ * and will disappear upon mouse exit or focus change.
+ *
+ * Note: Tooltips cannot contain content that can be focused or interacted with.
+ *
+ * @tagname mdc-tooltip
+ *
+ * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.
+ * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.
+ * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.
+ * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/tooltip/index.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tooltip';
+import { TAG_NAME } from '../../components/tooltip/tooltip.constants';
+/**
+ * A tooltip is triggered by mouse hover or by keyboard focus
+ * and will disappear upon mouse exit or focus change.
+ *
+ * Note: Tooltips cannot contain content that can be focused or interacted with.
+ *
+ * @tagname mdc-tooltip
+ *
+ * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.
+ * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.
+ * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.
+ * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Tooltip',
+});
+export default reactWrapper;

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.34.0"
+  "version": "0.36.0"
 }