@momentum-design/components 0.9.4 → 0.9.6

package/dist/components/button/button.constants.d.ts

@@ -0,0 +1,46 @@
+declare const TAG_NAME: "mdc-button";
+declare const BUTTON_VARIANTS: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly TERTIARY: "tertiary";
+};
+declare const PILL_BUTTON_SIZES: {
+    readonly 40: 40;
+    readonly 32: 32;
+    readonly 28: 28;
+    readonly 24: 24;
+};
+declare const ICON_BUTTON_SIZES: {
+    readonly 40: 40;
+    readonly 32: 32;
+    readonly 28: 28;
+    readonly 24: 24;
+    readonly 64: 64;
+    readonly 52: 52;
+    readonly 20: 20;
+};
+declare const BUTTON_COLORS: {
+    readonly POSITIVE: "positive";
+    readonly NEGATIVE: "negative";
+    readonly ACCENT: "accent";
+    readonly PROMOTIONAL: "promotional";
+    readonly DEFAULT: "default";
+};
+declare const BUTTON_TYPE_INTERNAL: {
+    readonly PILL: "pill";
+    readonly ICON: "icon";
+    readonly PILL_WITH_ICON: "pill-with-icon";
+};
+declare const BUTTON_TYPE: {
+    readonly BUTTON: "button";
+    readonly SUBMIT: "submit";
+    readonly RESET: "reset";
+};
+declare const DEFAULTS: {
+    VARIANT: "primary";
+    SIZE: 32;
+    COLOR: "default";
+    TYPE_INTERNAL: "icon";
+    TYPE: "button";
+};
+export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };

package/dist/components/button/button.constants.js

@@ -0,0 +1,44 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('button');
+const BUTTON_VARIANTS = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    TERTIARY: 'tertiary',
+};
+const PILL_BUTTON_SIZES = {
+    40: 40,
+    32: 32,
+    28: 28,
+    24: 24,
+};
+const ICON_BUTTON_SIZES = {
+    64: 64,
+    52: 52,
+    20: 20,
+    ...PILL_BUTTON_SIZES,
+};
+const BUTTON_COLORS = {
+    POSITIVE: 'positive',
+    NEGATIVE: 'negative',
+    ACCENT: 'accent',
+    PROMOTIONAL: 'promotional',
+    DEFAULT: 'default',
+};
+const BUTTON_TYPE_INTERNAL = {
+    PILL: 'pill',
+    ICON: 'icon',
+    PILL_WITH_ICON: 'pill-with-icon',
+};
+const BUTTON_TYPE = {
+    BUTTON: 'button',
+    SUBMIT: 'submit',
+    RESET: 'reset',
+};
+const DEFAULTS = {
+    VARIANT: BUTTON_VARIANTS.PRIMARY,
+    SIZE: PILL_BUTTON_SIZES[32],
+    COLOR: BUTTON_COLORS.DEFAULT,
+    TYPE_INTERNAL: BUTTON_TYPE_INTERNAL.ICON,
+    TYPE: BUTTON_TYPE.BUTTON,
+};
+export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };

package/dist/components/button/button.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/button/button.styles.js

@@ -0,0 +1,195 @@
+import { css } from 'lit';
+import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
+const styles = [hostFitContentStyles, css `
+  :host {
+    cursor: pointer;
+    border-radius: 1.25rem;
+    font-weight: var(--mds-font-apps-body-large-medium-font-weight);
+    outline: none;
+    border: 0.0625rem solid transparent;
+
+    --mdc-button-primary-color: var(--mds-color-theme-inverted-text-primary-normal);
+    --mdc-button-primary-background-color: var(--mds-color-theme-button-primary-normal);
+    --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-primary-hover);
+    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-primary-pressed);
+    --mdc-button-primary-disabled-background-color: var(--mds-color-theme-button-primary-disabled);
+    --mdc-button-primary-disabled-color: var(--mds-color-theme-text-primary-disabled);
+    
+    --mdc-button-secondary-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-button-secondary-border-color: var(--mds-color-theme-outline-button-normal);
+    --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
+    --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+    --mdc-button-secondary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
+    --mdc-button-secondary-disabled-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-button-secondary-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+
+    --mdc-button-tertiary-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-button-tertiary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
+    --mdc-button-tertiary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+    --mdc-button-tertiary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
+    --mdc-button-tertiary-disabled-color: var(--mds-color-theme-text-primary-disabled);
+
+    --mdc-button-height-size-64: 4rem;
+    --mdc-button-height-size-52: 3.25rem;
+    --mdc-button-height-size-40: 2.5rem;
+    --mdc-button-height-size-32: 2rem;
+    --mdc-button-height-size-28: 1.75rem;
+    --mdc-button-height-size-24: 1.5rem;
+    --mdc-button-height-size-20: 1.25rem;
+
+    --mdc-button-line-height-size-40: var(--mds-font-lineheight-body-large);
+    --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
+    --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
+    --mdc-button-line-height-size-24: var(--mds-font-lineheight-body-small);
+  }
+
+  :host([active]){
+    font-weight: var(--mds-font-apps-body-large-bold-font-weight);
+  }
+
+
+  :host([variant="primary"]){
+    background: var(--mdc-button-primary-background-color);
+    color: var(--mdc-button-primary-color);
+  }
+  :host([variant="primary"]:hover){
+    background: var(--mdc-button-primary-hover-background-color);
+  }
+  :host([variant="primary"]:active), :host([variant="primary"].pressed){
+    background: var(--mdc-button-primary-pressed-background-color);
+  }
+  :host([variant="primary"][disabled]), :host([variant="primary"][soft-disabled]){
+    background: var(--mdc-button-primary-disabled-background-color);
+    color: var(--mdc-button-primary-disabled-color);
+    cursor: auto;
+  }
+
+  :host([variant="secondary"]){
+    color: var(--mdc-button-secondary-color);
+    border-color: var(--mdc-button-secondary-border-color);
+  }
+  :host([variant="secondary"]:hover){
+    background: var(--mdc-button-secondary-hover-background-color);
+  }
+  :host([variant="secondary"]:active), :host([variant="secondary"].pressed){
+    background: var(--mdc-button-secondary-pressed-background-color);
+  }
+  :host([variant="secondary"][disabled]),
+   :host([variant="secondary"][soft-disabled]){
+    color: var(--mdc-button-primary-disabled-color);
+    border-color: var(--mdc-button-secondary-disabled-border-color);
+    background: var(--mdc-button-secondary-disabled-background-color);
+    cursor: auto;
+  }
+
+  :host([variant="tertiary"]){
+    border-color: transparent;
+    color: var(--mdc-button-tertiary-color);
+  }
+  :host([variant="tertiary"]:hover){
+    background: var(--mdc-button-tertiary-hover-background-color);
+  }
+  :host([variant="tertiary"]:active), :host([variant="tertiary"].pressed){
+    background: var(--mdc-button-tertiary-pressed-background-color);
+  }
+  :host([variant="tertiary"][disabled]), 
+  :host([variant="tertiary"][soft-disabled]){
+    color: var(--mdc-button-tertiary-disabled-color);
+    background: var(--mdc-button-tertiary-disabled-background-color);
+    cursor: auto;
+  }
+
+  :host([size="64"].mdc-icon-button), 
+  :host([size="52"].mdc-icon-button), 
+  :host([size="40"].mdc-icon-button), 
+  :host([size="32"].mdc-icon-button),
+  :host([size="28"].mdc-icon-button),
+  :host([size="24"].mdc-icon-button){
+    border-radius: 6.25rem;
+    aspect-ratio: 1;
+    padding: unset;
+  }
+  :host([size="64"]){
+    height: var(--mdc-button-height-size-64);
+  }
+  :host([size="52"]){
+    height: var(--mdc-button-height-size-52);
+  }
+  :host([size="40"]){
+    height: var(--mdc-button-height-size-40);
+    font-size: var(--mds-font-size-body-large);
+    line-height: var(--mdc-button-line-height-size-40);
+    padding: 0 1rem;
+    gap: 0.5rem;
+  }
+  :host([size="32"]){
+    height: var(--mdc-button-height-size-32);
+    font-size: var(--mds-font-size-body-large);
+    line-height: var(--mdc-button-line-height-size-32);
+    padding: 0 0.75rem;
+    gap: 0.375rem;
+  }
+  :host([size="28"]){
+    height: var(--mdc-button-height-size-28);
+    font-size: var(--mds-font-size-body-midsize);
+    line-height: var(--mdc-button-line-height-size-28);
+    padding: 0 0.75rem;
+    gap: 0.375rem;
+  }
+  :host([size="24"]){
+    height: var(--mdc-button-height-size-24);
+    font-size: var(--mds-font-size-body-small);
+    line-height: var(--mdc-button-line-height-size-24);
+    padding: 0 0.625rem;
+    gap: 0.25rem;
+  }
+  :host([size="20"]){
+    height: var(--mdc-button-height-size-20);
+  }
+
+  :host([color="accent"]){
+    --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
+    --mdc-button-primary-background-color: var(--mds-color-theme-button-accent-normal);
+    --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-accent-hover);
+    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-accent-pressed);
+
+    --mdc-button-secondary-color: var(--mds-color-theme-text-accent-normal);
+    --mdc-button-secondary-border-color: var(--mds-color-theme-outline-theme-normal);
+    --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
+    --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+  }
+  :host([color="positive"]){
+    --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
+    --mdc-button-primary-background-color: var(--mds-color-theme-button-join-normal);
+    --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-join-hover);
+    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-join-pressed);
+
+    --mdc-button-secondary-color: var(--mds-color-theme-text-success-normal);
+    --mdc-button-secondary-border-color: var(--mds-color-theme-outline-join-normal);
+    --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
+    --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+  }
+  :host([color="negative"]){
+    --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
+    --mdc-button-primary-background-color: var(--mds-color-theme-button-cancel-normal);
+    --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-cancel-hover);
+    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-cancel-pressed);
+
+    --mdc-button-secondary-color: var(--mds-color-theme-text-error-normal);
+    --mdc-button-secondary-border-color: var(--mds-color-theme-outline-cancel-normal);
+    --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
+    --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+  }
+  :host([color="promotional"]){
+    --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
+    --mdc-button-primary-background-color: var(--mds-color-theme-common-button-promotion-normal);
+    --mdc-button-primary-hover-background-color: var(--mds-color-theme-common-button-promotion-hover);
+    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-common-button-promotion-active);
+
+    --mdc-button-secondary-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-button-secondary-border-color: var(--mds-color-theme-outline-promotion-normal);
+    --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
+    --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+  }
+`, hostFocusRingStyles];
+export default styles;

package/dist/components/button/button.types.d.ts

@@ -0,0 +1,9 @@
+import type { ValueOf } from '../../utils/types';
+import { BUTTON_COLORS, BUTTON_TYPE, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './button.constants';
+type ButtonVariant = ValueOf<typeof BUTTON_VARIANTS>;
+type PillButtonSize = ValueOf<typeof PILL_BUTTON_SIZES>;
+type IconButtonSize = ValueOf<typeof ICON_BUTTON_SIZES>;
+type ButtonTypeInternal = ValueOf<typeof BUTTON_TYPE_INTERNAL>;
+type ButtonType = ValueOf<typeof BUTTON_TYPE>;
+type ButtonColor = ValueOf<typeof BUTTON_COLORS>;
+export { ButtonVariant, PillButtonSize, IconButtonSize, ButtonTypeInternal, ButtonType, ButtonColor, };

package/dist/components/button/button.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/button/button.utils.d.ts

@@ -0,0 +1,16 @@
+import { IconButtonSize } from './button.types';
+/**
+ * Returns the icon size multiplier based on the provided button size.
+ *
+ * @param size - The size of the button.
+ * @returns The multiplier for the icon size.
+ */
+declare const getIconSize: (size: IconButtonSize) => number;
+/**
+ * Returns the name of the icon without the style suffix.
+ *
+ * @param iconName - The name of the icon.
+ * @returns The name of the icon without the suffix.
+ */
+declare const getIconNameWithoutStyle: (iconName: string) => string;
+export { getIconSize, getIconNameWithoutStyle };

package/dist/components/button/button.utils.js

@@ -0,0 +1,27 @@
+import { ICON_BUTTON_SIZES } from './button.constants';
+/**
+ * Returns the icon size multiplier based on the provided button size.
+ *
+ * @param size - The size of the button.
+ * @returns The multiplier for the icon size.
+ */
+const getIconSize = (size) => {
+    switch (size) {
+        case ICON_BUTTON_SIZES[64]: return 2;
+        case ICON_BUTTON_SIZES[52]: return 1.75;
+        case ICON_BUTTON_SIZES[40]: return 1.25;
+        default: return 1;
+    }
+};
+/**
+ * Returns the name of the icon without the style suffix.
+ *
+ * @param iconName - The name of the icon.
+ * @returns The name of the icon without the suffix.
+ */
+const getIconNameWithoutStyle = (iconName) => {
+    const iconParts = iconName.split('-');
+    const variants = ['bold', 'filled', 'regular', 'light'];
+    return iconParts.filter((part) => !variants.includes(part)).join('-');
+};
+export { getIconSize, getIconNameWithoutStyle };

package/dist/components/button/index.d.ts

@@ -0,0 +1,8 @@
+import Button from './button.component';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-button']: Button;
+    }
+}
+export default Button;

package/dist/components/button/index.js

@@ -0,0 +1,5 @@
+import Button from './button.component';
+import { TAG_NAME } from './button.constants';
+import '../icon';
+Button.register(TAG_NAME);
+export default Button;