@momentum-design/components 0.62.3 → 0.62.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +813 -545
- package/dist/browser/index.js.map +4 -4
- package/dist/components/card/card.component.d.ts +100 -0
- package/dist/components/card/card.component.js +197 -0
- package/dist/components/card/card.constants.d.ts +22 -0
- package/dist/components/card/card.constants.js +26 -0
- package/dist/components/card/card.styles.d.ts +2 -0
- package/dist/components/card/card.styles.js +79 -0
- package/dist/components/card/card.types.d.ts +5 -0
- package/dist/components/card/card.types.js +1 -0
- package/dist/components/card/index.d.ts +9 -0
- package/dist/components/card/index.js +6 -0
- package/dist/components/cardbutton/cardbutton.component.d.ts +37 -0
- package/dist/components/cardbutton/cardbutton.component.js +61 -0
- package/dist/components/cardbutton/cardbutton.constants.d.ts +2 -0
- package/dist/components/cardbutton/cardbutton.constants.js +3 -0
- package/dist/components/cardbutton/cardbutton.styles.d.ts +2 -0
- package/dist/components/cardbutton/cardbutton.styles.js +26 -0
- package/dist/components/cardbutton/cardbutton.types.d.ts +7 -0
- package/dist/components/cardbutton/cardbutton.types.js +1 -0
- package/dist/components/cardbutton/index.d.ts +9 -0
- package/dist/components/cardbutton/index.js +6 -0
- package/dist/components/cardcheckbox/cardcheckbox.component.d.ts +76 -0
- package/dist/components/cardcheckbox/cardcheckbox.component.js +159 -0
- package/dist/components/cardcheckbox/cardcheckbox.constants.d.ts +15 -0
- package/dist/components/cardcheckbox/cardcheckbox.constants.js +16 -0
- package/dist/components/cardcheckbox/cardcheckbox.styles.d.ts +2 -0
- package/dist/components/cardcheckbox/cardcheckbox.styles.js +57 -0
- package/dist/components/cardcheckbox/cardcheckbox.types.d.ts +11 -0
- package/dist/components/cardcheckbox/cardcheckbox.types.js +1 -0
- package/dist/components/cardcheckbox/index.d.ts +10 -0
- package/dist/components/cardcheckbox/index.js +7 -0
- package/dist/components/cardradio/cardradio.component.d.ts +76 -0
- package/dist/components/cardradio/cardradio.component.js +155 -0
- package/dist/components/cardradio/cardradio.constants.d.ts +2 -0
- package/dist/components/cardradio/cardradio.constants.js +3 -0
- package/dist/components/cardradio/cardradio.styles.d.ts +2 -0
- package/dist/components/cardradio/cardradio.styles.js +53 -0
- package/dist/components/cardradio/cardradio.types.d.ts +8 -0
- package/dist/components/cardradio/cardradio.types.js +1 -0
- package/dist/components/cardradio/index.d.ts +10 -0
- package/dist/components/cardradio/index.js +7 -0
- package/dist/components/radiogroup/radiogroup.component.js +2 -1
- package/dist/custom-elements.json +2751 -273
- package/dist/index.d.ts +11 -7
- package/dist/index.js +11 -7
- package/dist/react/card/index.d.ts +47 -0
- package/dist/react/card/index.js +56 -0
- package/dist/react/cardbutton/index.d.ts +32 -0
- package/dist/react/cardbutton/index.js +40 -0
- package/dist/react/cardcheckbox/index.d.ts +40 -0
- package/dist/react/cardcheckbox/index.js +48 -0
- package/dist/react/cardradio/index.d.ts +40 -0
- package/dist/react/cardradio/index.js +48 -0
- package/dist/react/index.d.ts +5 -1
- package/dist/react/index.js +5 -1
- package/dist/utils/mixins/CardComponentMixin.d.ts +20 -0
- package/dist/utils/mixins/CardComponentMixin.js +130 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
@@ -6,12 +6,14 @@ import Badge from './components/badge';
|
|
6
6
|
import Brandvisual from './components/brandvisual';
|
7
7
|
import Bullet from './components/bullet';
|
8
8
|
import Button from './components/button';
|
9
|
+
import ButtonLink from './components/buttonlink';
|
10
|
+
import Card from './components/card';
|
11
|
+
import CardButton from './components/cardbutton';
|
12
|
+
import CardCheckbox from './components/cardcheckbox';
|
13
|
+
import CardRadio from './components/cardradio';
|
9
14
|
import Checkbox from './components/checkbox';
|
10
15
|
import Chip from './components/chip';
|
11
16
|
import Coachmark from './components/coachmark';
|
12
|
-
import StaticCheckbox from './components/staticcheckbox';
|
13
|
-
import StaticRadio from './components/staticradio';
|
14
|
-
import StaticToggle from './components/statictoggle';
|
15
17
|
import Divider from './components/divider';
|
16
18
|
import FilterChip from './components/filterchip';
|
17
19
|
import FormfieldGroup from './components/formfieldgroup';
|
@@ -20,6 +22,7 @@ import IconProvider from './components/iconprovider';
|
|
20
22
|
import Input from './components/input';
|
21
23
|
import InputChip from './components/inputchip';
|
22
24
|
import Link from './components/link';
|
25
|
+
import Linksimple from './components/linksimple';
|
23
26
|
import List from './components/list';
|
24
27
|
import ListItem from './components/listitem';
|
25
28
|
import Marker from './components/marker';
|
@@ -35,7 +38,11 @@ import ScreenreaderAnnouncer from './components/screenreaderannouncer';
|
|
35
38
|
import Searchfield from './components/searchfield';
|
36
39
|
import Select from './components/select';
|
37
40
|
import Spinner from './components/spinner';
|
41
|
+
import StaticCheckbox from './components/staticcheckbox';
|
42
|
+
import StaticRadio from './components/staticradio';
|
43
|
+
import StaticToggle from './components/statictoggle';
|
38
44
|
import Tab from './components/tab';
|
45
|
+
import TabList from './components/tablist';
|
39
46
|
import Text from './components/text';
|
40
47
|
import Textarea from './components/textarea';
|
41
48
|
import ThemeProvider from './components/themeprovider';
|
@@ -43,9 +50,6 @@ import Toggle from './components/toggle';
|
|
43
50
|
import Tooltip from './components/tooltip';
|
44
51
|
import ToggleTip from './components/toggletip';
|
45
52
|
import VirtualizedList from './components/virtualizedlist';
|
46
|
-
import TabList from './components/tablist';
|
47
|
-
import ButtonLink from './components/buttonlink';
|
48
|
-
import Linksimple from './components/linksimple';
|
49
53
|
import MenuItem from './components/menuitem';
|
50
54
|
import type { BadgeType } from './components/badge/badge.types';
|
51
55
|
import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
|
@@ -54,6 +58,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
|
|
54
58
|
import type { TextType } from './components/text/text.types';
|
55
59
|
import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
|
56
60
|
import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
|
57
|
-
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, ButtonLink, Linksimple, MenuItem, };
|
61
|
+
export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, 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, ButtonLink, Linksimple, MenuItem, };
|
58
62
|
export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
|
59
63
|
export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
|
package/dist/index.js
CHANGED
@@ -7,12 +7,14 @@ import Badge from './components/badge';
|
|
7
7
|
import Brandvisual from './components/brandvisual';
|
8
8
|
import Bullet from './components/bullet';
|
9
9
|
import Button from './components/button';
|
10
|
+
import ButtonLink from './components/buttonlink';
|
11
|
+
import Card from './components/card';
|
12
|
+
import CardButton from './components/cardbutton';
|
13
|
+
import CardCheckbox from './components/cardcheckbox';
|
14
|
+
import CardRadio from './components/cardradio';
|
10
15
|
import Checkbox from './components/checkbox';
|
11
16
|
import Chip from './components/chip';
|
12
17
|
import Coachmark from './components/coachmark';
|
13
|
-
import StaticCheckbox from './components/staticcheckbox';
|
14
|
-
import StaticRadio from './components/staticradio';
|
15
|
-
import StaticToggle from './components/statictoggle';
|
16
18
|
import Divider from './components/divider';
|
17
19
|
import FilterChip from './components/filterchip';
|
18
20
|
import FormfieldGroup from './components/formfieldgroup';
|
@@ -21,6 +23,7 @@ import IconProvider from './components/iconprovider';
|
|
21
23
|
import Input from './components/input';
|
22
24
|
import InputChip from './components/inputchip';
|
23
25
|
import Link from './components/link';
|
26
|
+
import Linksimple from './components/linksimple';
|
24
27
|
import List from './components/list';
|
25
28
|
import ListItem from './components/listitem';
|
26
29
|
import Marker from './components/marker';
|
@@ -36,7 +39,11 @@ import ScreenreaderAnnouncer from './components/screenreaderannouncer';
|
|
36
39
|
import Searchfield from './components/searchfield';
|
37
40
|
import Select from './components/select';
|
38
41
|
import Spinner from './components/spinner';
|
42
|
+
import StaticCheckbox from './components/staticcheckbox';
|
43
|
+
import StaticRadio from './components/staticradio';
|
44
|
+
import StaticToggle from './components/statictoggle';
|
39
45
|
import Tab from './components/tab';
|
46
|
+
import TabList from './components/tablist';
|
40
47
|
import Text from './components/text';
|
41
48
|
import Textarea from './components/textarea';
|
42
49
|
import ThemeProvider from './components/themeprovider';
|
@@ -44,14 +51,11 @@ import Toggle from './components/toggle';
|
|
44
51
|
import Tooltip from './components/tooltip';
|
45
52
|
import ToggleTip from './components/toggletip';
|
46
53
|
import VirtualizedList from './components/virtualizedlist';
|
47
|
-
import TabList from './components/tablist';
|
48
|
-
import ButtonLink from './components/buttonlink';
|
49
|
-
import Linksimple from './components/linksimple';
|
50
54
|
import MenuItem from './components/menuitem';
|
51
55
|
import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
|
52
56
|
// Constants / Utils Imports
|
53
57
|
import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
|
54
58
|
// Components Exports
|
55
|
-
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, ButtonLink, Linksimple, MenuItem, };
|
59
|
+
export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, 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, ButtonLink, Linksimple, MenuItem, };
|
56
60
|
// Constants / Utils Exports
|
57
61
|
export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import Component from '../../components/card';
|
2
|
+
/**
|
3
|
+
* The card component allows users to organize information in a structured and tangible
|
4
|
+
* format that is visually appealing. `mdc-card` is a static component that supports
|
5
|
+
* the following features:
|
6
|
+
* - Image
|
7
|
+
* - Header
|
8
|
+
* - Icon
|
9
|
+
* - Title
|
10
|
+
* - Subtitle
|
11
|
+
* - Body
|
12
|
+
*
|
13
|
+
* The card can either be vertically or horizontally oriented.
|
14
|
+
*
|
15
|
+
* There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
|
16
|
+
*
|
17
|
+
* To make this card interactive, use the following slots:
|
18
|
+
* - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
|
19
|
+
* - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
|
20
|
+
* - `footer-button-primary`: This slot is for passing primary variant of
|
21
|
+
* `mdc-button` component within the footer section.
|
22
|
+
* - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
|
23
|
+
* within the footer section.
|
24
|
+
*
|
25
|
+
* Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
|
26
|
+
*
|
27
|
+
* @slot before-body - This slot is for passing the content before the body
|
28
|
+
* @slot body - This slot is for passing the text content for the card
|
29
|
+
* @slot after-body - This slot is for passing the content after the body
|
30
|
+
* @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
|
31
|
+
* @slot footer-button-primary - This slot is for passing primary variant of
|
32
|
+
* `mdc-button` component within the footer section.
|
33
|
+
* @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component
|
34
|
+
* within the footer section.
|
35
|
+
*
|
36
|
+
* @tagname mdc-card
|
37
|
+
*
|
38
|
+
* @dependency mdc-icon
|
39
|
+
* @dependency mdc-text
|
40
|
+
*
|
41
|
+
* @slot before-body - This slot is for passing the content before the body
|
42
|
+
* @slot body - This slot is for passing the text content for the card
|
43
|
+
* @slot after-body - This slot is for passing the content after the body
|
44
|
+
*
|
45
|
+
*/
|
46
|
+
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
47
|
+
export default reactWrapper;
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { createComponent } from '@lit/react';
|
3
|
+
import Component from '../../components/card';
|
4
|
+
import { TAG_NAME } from '../../components/card/card.constants';
|
5
|
+
/**
|
6
|
+
* The card component allows users to organize information in a structured and tangible
|
7
|
+
* format that is visually appealing. `mdc-card` is a static component that supports
|
8
|
+
* the following features:
|
9
|
+
* - Image
|
10
|
+
* - Header
|
11
|
+
* - Icon
|
12
|
+
* - Title
|
13
|
+
* - Subtitle
|
14
|
+
* - Body
|
15
|
+
*
|
16
|
+
* The card can either be vertically or horizontally oriented.
|
17
|
+
*
|
18
|
+
* There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
|
19
|
+
*
|
20
|
+
* To make this card interactive, use the following slots:
|
21
|
+
* - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
|
22
|
+
* - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
|
23
|
+
* - `footer-button-primary`: This slot is for passing primary variant of
|
24
|
+
* `mdc-button` component within the footer section.
|
25
|
+
* - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
|
26
|
+
* within the footer section.
|
27
|
+
*
|
28
|
+
* Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
|
29
|
+
*
|
30
|
+
* @slot before-body - This slot is for passing the content before the body
|
31
|
+
* @slot body - This slot is for passing the text content for the card
|
32
|
+
* @slot after-body - This slot is for passing the content after the body
|
33
|
+
* @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
|
34
|
+
* @slot footer-button-primary - This slot is for passing primary variant of
|
35
|
+
* `mdc-button` component within the footer section.
|
36
|
+
* @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component
|
37
|
+
* within the footer section.
|
38
|
+
*
|
39
|
+
* @tagname mdc-card
|
40
|
+
*
|
41
|
+
* @dependency mdc-icon
|
42
|
+
* @dependency mdc-text
|
43
|
+
*
|
44
|
+
* @slot before-body - This slot is for passing the content before the body
|
45
|
+
* @slot body - This slot is for passing the text content for the card
|
46
|
+
* @slot after-body - This slot is for passing the content after the body
|
47
|
+
*
|
48
|
+
*/
|
49
|
+
const reactWrapper = createComponent({
|
50
|
+
tagName: TAG_NAME,
|
51
|
+
elementClass: Component,
|
52
|
+
react: React,
|
53
|
+
events: {},
|
54
|
+
displayName: 'Card',
|
55
|
+
});
|
56
|
+
export default reactWrapper;
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import { type EventName } from '@lit/react';
|
2
|
+
import Component from '../../components/cardbutton';
|
3
|
+
/**
|
4
|
+
* cardbutton component looks like a card and behaves as a button component.
|
5
|
+
*
|
6
|
+
* **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.
|
7
|
+
* Make sure to pass only non-interactable elements within the slots.
|
8
|
+
*
|
9
|
+
* @tagname mdc-cardbutton
|
10
|
+
*
|
11
|
+
* @dependency mdc-icon
|
12
|
+
* @dependency mdc-text
|
13
|
+
*
|
14
|
+
* @slot before-body - This slot is for passing the content before the body
|
15
|
+
* @slot body - This slot is for passing the text content for the card
|
16
|
+
* @slot after-body - This slot is for passing the content after the body
|
17
|
+
*
|
18
|
+
* @event click - (React: onClick) Event that gets dispatched when the card is clicked.
|
19
|
+
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
|
20
|
+
* It fires the click event when enter key is used.
|
21
|
+
* @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
|
22
|
+
* It fires the click event when space key is used.
|
23
|
+
* @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
|
24
|
+
*
|
25
|
+
*/
|
26
|
+
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
27
|
+
onClick: EventName<MouseEvent>;
|
28
|
+
onKeyDown: EventName<KeyboardEvent>;
|
29
|
+
onKeyUp: EventName<KeyboardEvent>;
|
30
|
+
onFocus: EventName<FocusEvent>;
|
31
|
+
}>;
|
32
|
+
export default reactWrapper;
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { createComponent } from '@lit/react';
|
3
|
+
import Component from '../../components/cardbutton';
|
4
|
+
import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
|
5
|
+
/**
|
6
|
+
* cardbutton component looks like a card and behaves as a button component.
|
7
|
+
*
|
8
|
+
* **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.
|
9
|
+
* Make sure to pass only non-interactable elements within the slots.
|
10
|
+
*
|
11
|
+
* @tagname mdc-cardbutton
|
12
|
+
*
|
13
|
+
* @dependency mdc-icon
|
14
|
+
* @dependency mdc-text
|
15
|
+
*
|
16
|
+
* @slot before-body - This slot is for passing the content before the body
|
17
|
+
* @slot body - This slot is for passing the text content for the card
|
18
|
+
* @slot after-body - This slot is for passing the content after the body
|
19
|
+
*
|
20
|
+
* @event click - (React: onClick) Event that gets dispatched when the card is clicked.
|
21
|
+
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
|
22
|
+
* It fires the click event when enter key is used.
|
23
|
+
* @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
|
24
|
+
* It fires the click event when space key is used.
|
25
|
+
* @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
|
26
|
+
*
|
27
|
+
*/
|
28
|
+
const reactWrapper = createComponent({
|
29
|
+
tagName: TAG_NAME,
|
30
|
+
elementClass: Component,
|
31
|
+
react: React,
|
32
|
+
events: {
|
33
|
+
onClick: 'click',
|
34
|
+
onKeyDown: 'keydown',
|
35
|
+
onKeyUp: 'keyup',
|
36
|
+
onFocus: 'focus',
|
37
|
+
},
|
38
|
+
displayName: 'CardButton',
|
39
|
+
});
|
40
|
+
export default reactWrapper;
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import { type EventName } from '@lit/react';
|
2
|
+
import Component from '../../components/cardcheckbox';
|
3
|
+
/**
|
4
|
+
* cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
|
5
|
+
*
|
6
|
+
* While using this component within a form or group of cards, make sure cards are in a role = "checkbox-group".
|
7
|
+
* This card would have events for selected and unselected (similar to checkbox)
|
8
|
+
*
|
9
|
+
* **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
|
10
|
+
* Make sure to pass only non-interactable elements within the slots.
|
11
|
+
*
|
12
|
+
* Make sure to pass the `card-title` mandatorily for this card.
|
13
|
+
*
|
14
|
+
* @tagname mdc-cardcheckbox
|
15
|
+
*
|
16
|
+
* @dependency mdc-icon
|
17
|
+
* @dependency mdc-staticcheckbox
|
18
|
+
* @dependency mdc-text
|
19
|
+
*
|
20
|
+
* @slot before-body - This slot is for passing the content before the body
|
21
|
+
* @slot body - This slot is for passing the text content for the card
|
22
|
+
* @slot after-body - This slot is for passing the content after the body
|
23
|
+
*
|
24
|
+
* @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
|
25
|
+
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
|
26
|
+
* It toggles the checked state when enter key is used.
|
27
|
+
* @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
|
28
|
+
* It toggles the checked state when space key is used.
|
29
|
+
* @event change - (React: onChange) Event that gets dispatched when the card state changes.
|
30
|
+
* @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
|
31
|
+
*
|
32
|
+
*/
|
33
|
+
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
34
|
+
onClick: EventName<MouseEvent>;
|
35
|
+
onKeyDown: EventName<KeyboardEvent>;
|
36
|
+
onKeyUp: EventName<KeyboardEvent>;
|
37
|
+
onChange: EventName<Event>;
|
38
|
+
onFocus: EventName<FocusEvent>;
|
39
|
+
}>;
|
40
|
+
export default reactWrapper;
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { createComponent } from '@lit/react';
|
3
|
+
import Component from '../../components/cardcheckbox';
|
4
|
+
import { TAG_NAME } from '../../components/cardcheckbox/cardcheckbox.constants';
|
5
|
+
/**
|
6
|
+
* cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
|
7
|
+
*
|
8
|
+
* While using this component within a form or group of cards, make sure cards are in a role = "checkbox-group".
|
9
|
+
* This card would have events for selected and unselected (similar to checkbox)
|
10
|
+
*
|
11
|
+
* **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
|
12
|
+
* Make sure to pass only non-interactable elements within the slots.
|
13
|
+
*
|
14
|
+
* Make sure to pass the `card-title` mandatorily for this card.
|
15
|
+
*
|
16
|
+
* @tagname mdc-cardcheckbox
|
17
|
+
*
|
18
|
+
* @dependency mdc-icon
|
19
|
+
* @dependency mdc-staticcheckbox
|
20
|
+
* @dependency mdc-text
|
21
|
+
*
|
22
|
+
* @slot before-body - This slot is for passing the content before the body
|
23
|
+
* @slot body - This slot is for passing the text content for the card
|
24
|
+
* @slot after-body - This slot is for passing the content after the body
|
25
|
+
*
|
26
|
+
* @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
|
27
|
+
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
|
28
|
+
* It toggles the checked state when enter key is used.
|
29
|
+
* @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
|
30
|
+
* It toggles the checked state when space key is used.
|
31
|
+
* @event change - (React: onChange) Event that gets dispatched when the card state changes.
|
32
|
+
* @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
|
33
|
+
*
|
34
|
+
*/
|
35
|
+
const reactWrapper = createComponent({
|
36
|
+
tagName: TAG_NAME,
|
37
|
+
elementClass: Component,
|
38
|
+
react: React,
|
39
|
+
events: {
|
40
|
+
onClick: 'click',
|
41
|
+
onKeyDown: 'keydown',
|
42
|
+
onKeyUp: 'keyup',
|
43
|
+
onChange: 'change',
|
44
|
+
onFocus: 'focus',
|
45
|
+
},
|
46
|
+
displayName: 'CardCheckbox',
|
47
|
+
});
|
48
|
+
export default reactWrapper;
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import { type EventName } from '@lit/react';
|
2
|
+
import Component from '../../components/cardradio';
|
3
|
+
/**
|
4
|
+
* cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
|
5
|
+
*
|
6
|
+
* While using this component within a form or group of cards, make sure cards are in a role = "radio-group".
|
7
|
+
* This card would have events for selected and unselected (similar to radio)
|
8
|
+
*
|
9
|
+
* **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
|
10
|
+
* Make sure to pass only non-interactable elements within the slots.
|
11
|
+
*
|
12
|
+
* Make sure to pass the `card-title` mandatorily for this card.
|
13
|
+
*
|
14
|
+
* @tagname mdc-cardradio
|
15
|
+
*
|
16
|
+
* @dependency mdc-icon
|
17
|
+
* @dependency mdc-staticradio
|
18
|
+
* @dependency mdc-text
|
19
|
+
*
|
20
|
+
* @slot before-body - This slot is for passing the content before the body
|
21
|
+
* @slot body - This slot is for passing the text content for the card
|
22
|
+
* @slot after-body - This slot is for passing the content after the body
|
23
|
+
*
|
24
|
+
* @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
|
25
|
+
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
|
26
|
+
* It toggles the checked state when enter key is used.
|
27
|
+
* @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
|
28
|
+
* It toggles the checked state when space key is used.
|
29
|
+
* @event change - (React: onChange) Event that gets dispatched when the card state changes.
|
30
|
+
* @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
|
31
|
+
*
|
32
|
+
*/
|
33
|
+
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
34
|
+
onClick: EventName<MouseEvent>;
|
35
|
+
onKeyDown: EventName<KeyboardEvent>;
|
36
|
+
onKeyUp: EventName<KeyboardEvent>;
|
37
|
+
onChange: EventName<Event>;
|
38
|
+
onFocus: EventName<FocusEvent>;
|
39
|
+
}>;
|
40
|
+
export default reactWrapper;
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { createComponent } from '@lit/react';
|
3
|
+
import Component from '../../components/cardradio';
|
4
|
+
import { TAG_NAME } from '../../components/cardradio/cardradio.constants';
|
5
|
+
/**
|
6
|
+
* cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
|
7
|
+
*
|
8
|
+
* While using this component within a form or group of cards, make sure cards are in a role = "radio-group".
|
9
|
+
* This card would have events for selected and unselected (similar to radio)
|
10
|
+
*
|
11
|
+
* **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
|
12
|
+
* Make sure to pass only non-interactable elements within the slots.
|
13
|
+
*
|
14
|
+
* Make sure to pass the `card-title` mandatorily for this card.
|
15
|
+
*
|
16
|
+
* @tagname mdc-cardradio
|
17
|
+
*
|
18
|
+
* @dependency mdc-icon
|
19
|
+
* @dependency mdc-staticradio
|
20
|
+
* @dependency mdc-text
|
21
|
+
*
|
22
|
+
* @slot before-body - This slot is for passing the content before the body
|
23
|
+
* @slot body - This slot is for passing the text content for the card
|
24
|
+
* @slot after-body - This slot is for passing the content after the body
|
25
|
+
*
|
26
|
+
* @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
|
27
|
+
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
|
28
|
+
* It toggles the checked state when enter key is used.
|
29
|
+
* @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
|
30
|
+
* It toggles the checked state when space key is used.
|
31
|
+
* @event change - (React: onChange) Event that gets dispatched when the card state changes.
|
32
|
+
* @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
|
33
|
+
*
|
34
|
+
*/
|
35
|
+
const reactWrapper = createComponent({
|
36
|
+
tagName: TAG_NAME,
|
37
|
+
elementClass: Component,
|
38
|
+
react: React,
|
39
|
+
events: {
|
40
|
+
onClick: 'click',
|
41
|
+
onKeyDown: 'keydown',
|
42
|
+
onKeyUp: 'keyup',
|
43
|
+
onChange: 'change',
|
44
|
+
onFocus: 'focus',
|
45
|
+
},
|
46
|
+
displayName: 'CardRadio',
|
47
|
+
});
|
48
|
+
export default reactWrapper;
|
package/dist/react/index.d.ts
CHANGED
@@ -8,6 +8,10 @@ export { default as Bullet } from './bullet';
|
|
8
8
|
export { default as Button } from './button';
|
9
9
|
export { default as ButtonLink } from './buttonlink';
|
10
10
|
export { default as Buttonsimple } from './buttonsimple';
|
11
|
+
export { default as Card } from './card';
|
12
|
+
export { default as CardButton } from './cardbutton';
|
13
|
+
export { default as CardCheckbox } from './cardcheckbox';
|
14
|
+
export { default as CardRadio } from './cardradio';
|
11
15
|
export { default as Checkbox } from './checkbox';
|
12
16
|
export { default as Chip } from './chip';
|
13
17
|
export { default as Coachmark } from './coachmark';
|
@@ -18,8 +22,8 @@ export { default as FormfieldWrapper } from './formfieldwrapper';
|
|
18
22
|
export { default as Icon } from './icon';
|
19
23
|
export { default as IconProvider } from './iconprovider';
|
20
24
|
export { default as Input } from './input';
|
21
|
-
export { default as Link } from './link';
|
22
25
|
export { default as InputChip } from './inputchip';
|
26
|
+
export { default as Link } from './link';
|
23
27
|
export { default as Linksimple } from './linksimple';
|
24
28
|
export { default as List } from './list';
|
25
29
|
export { default as ListItem } from './listitem';
|
package/dist/react/index.js
CHANGED
@@ -8,6 +8,10 @@ export { default as Bullet } from './bullet';
|
|
8
8
|
export { default as Button } from './button';
|
9
9
|
export { default as ButtonLink } from './buttonlink';
|
10
10
|
export { default as Buttonsimple } from './buttonsimple';
|
11
|
+
export { default as Card } from './card';
|
12
|
+
export { default as CardButton } from './cardbutton';
|
13
|
+
export { default as CardCheckbox } from './cardcheckbox';
|
14
|
+
export { default as CardRadio } from './cardradio';
|
11
15
|
export { default as Checkbox } from './checkbox';
|
12
16
|
export { default as Chip } from './chip';
|
13
17
|
export { default as Coachmark } from './coachmark';
|
@@ -18,8 +22,8 @@ export { default as FormfieldWrapper } from './formfieldwrapper';
|
|
18
22
|
export { default as Icon } from './icon';
|
19
23
|
export { default as IconProvider } from './iconprovider';
|
20
24
|
export { default as Input } from './input';
|
21
|
-
export { default as Link } from './link';
|
22
25
|
export { default as InputChip } from './inputchip';
|
26
|
+
export { default as Link } from './link';
|
23
27
|
export { default as Linksimple } from './linksimple';
|
24
28
|
export { default as List } from './list';
|
25
29
|
export { default as ListItem } from './listitem';
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { LitElement, TemplateResult } from 'lit';
|
2
|
+
import type { CardOrientation, CardVariant } from '../../components/card/card.types';
|
3
|
+
import type { TagName as TagNameType } from '../../components/text/text.types';
|
4
|
+
import type { IconNames } from '../../components/icon/icon.types';
|
5
|
+
import type { Constructor } from './index.types';
|
6
|
+
export interface CardComponentMixinInterface {
|
7
|
+
cardTitle: string;
|
8
|
+
subtitle: string;
|
9
|
+
imageSrc: string;
|
10
|
+
imageAlt: string;
|
11
|
+
variant: CardVariant;
|
12
|
+
orientation: CardOrientation;
|
13
|
+
titleTagName: TagNameType;
|
14
|
+
subtitleTagName: TagNameType;
|
15
|
+
iconName?: IconNames;
|
16
|
+
renderIcon: () => TemplateResult;
|
17
|
+
renderImage: () => TemplateResult;
|
18
|
+
renderTitle: () => TemplateResult;
|
19
|
+
}
|
20
|
+
export declare const CardComponentMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CardComponentMixinInterface> & T;
|