@momentum-design/components 0.14.3 → 0.15.0

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

@@ -0,0 +1,7 @@
+import Marker from './marker.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-marker']: Marker;
+    }
+}
+export default Marker;

package/dist/components/marker/index.js

@@ -0,0 +1,4 @@
+import Marker from './marker.component';
+import { TAG_NAME } from './marker.constants';
+Marker.register(TAG_NAME);
+export default Marker;

package/dist/components/marker/marker.component.d.ts

@@ -0,0 +1,32 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { MarkerVariants } from './marker.types';
+/**
+ * `mdc-marker`, which is a vertical line and
+ * used to draw attention to specific parts of
+ * the content or to signify important information.
+ *
+ * **Marker Variants**:
+ * - **solid**: Solid marker.
+ * - **striped**: Striped marker.
+ *
+ * @tagname mdc-marker
+ *
+ * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color
+ * in solid variant.
+ * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.
+ * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color
+ * in striped variant.
+ * @cssproperty --mdc-marker-width - Allows customization of the default width.
+ */
+declare class Marker extends Component {
+    /**
+     * There are two variants of markers, each with a width of 0.25rem:
+     * - **solid**: Solid marker.
+     * - **striped**: Striped marker.
+     * @default solid
+     */
+    variant: MarkerVariants;
+    static styles: Array<CSSResult>;
+}
+export default Marker;

package/dist/components/marker/marker.component.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
+import styles from './marker.styles';
+import { Component } from '../../models';
+import { MARKER_VARIANTS } from './marker.constants';
+/**
+ * `mdc-marker`, which is a vertical line and
+ * used to draw attention to specific parts of
+ * the content or to signify important information.
+ *
+ * **Marker Variants**:
+ * - **solid**: Solid marker.
+ * - **striped**: Striped marker.
+ *
+ * @tagname mdc-marker
+ *
+ * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color
+ * in solid variant.
+ * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.
+ * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color
+ * in striped variant.
+ * @cssproperty --mdc-marker-width - Allows customization of the default width.
+ */
+class Marker extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * There are two variants of markers, each with a width of 0.25rem:
+         * - **solid**: Solid marker.
+         * - **striped**: Striped marker.
+         * @default solid
+         */
+        this.variant = MARKER_VARIANTS.SOLID;
+    }
+}
+Marker.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Marker.prototype, "variant", void 0);
+export default Marker;

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

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-marker";
+declare const MARKER_VARIANTS: {
+    readonly SOLID: "solid";
+    readonly STRIPED: "striped";
+};
+export { TAG_NAME, MARKER_VARIANTS };

package/dist/components/marker/marker.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('marker');
+const MARKER_VARIANTS = {
+    SOLID: 'solid',
+    STRIPED: 'striped',
+};
+export { TAG_NAME, MARKER_VARIANTS };

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

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

package/dist/components/marker/marker.styles.js

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-marker-width: 0.25rem;
+    --mdc-marker-solid-background-color: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-marker-striped-color: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-marker-striped-background-color: transparent; 
+
+    width: var(--mdc-marker-width);
+    height: 100%;
+    display: block;
+  }
+
+  :host([variant='solid']) {
+    background: var(--mdc-marker-solid-background-color);
+  }
+
+  :host([variant='striped']) {
+    background: repeating-linear-gradient(
+      135deg,
+      var(--mdc-marker-striped-color),
+      var(--mdc-marker-striped-color) 0.1875rem,
+      var(--mdc-marker-striped-background-color) 0.1875rem, 
+      var(--mdc-marker-striped-background-color) 0.375rem
+    );
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,3 @@
+import { MARKER_VARIANTS } from './marker.constants';
+type MarkerVariants = typeof MARKER_VARIANTS[keyof typeof MARKER_VARIANTS];
+export { MarkerVariants };

package/dist/components/marker/marker.types.js

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

package/dist/custom-elements.json

@@ -1487,6 +1487,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/marker/marker.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+          "name": "Marker",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default background color in solid variant.",
+              "name": "--mdc-marker-solid-background-color"
+            },
+            {
+              "description": "Allows customization of the default stripes in striped variant.",
+              "name": "--mdc-marker-striped-color"
+            },
+            {
+              "description": "Allows customization of the default background color in striped variant.",
+              "name": "--mdc-marker-striped-background-color"
+            },
+            {
+              "description": "Allows customization of the default width.",
+              "name": "--mdc-marker-width"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "privacy": "public",
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-marker",
+          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Marker",
+            "module": "components/marker/marker.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/presence/presence.component.js",

package/dist/index.d.ts

@@ -7,7 +7,8 @@ import Presence from './components/presence';
 import Text from './components/text';
 import Button from './components/button';
 import Bullet from './components/bullet';
+import Marker from './components/marker';
 import Divider from './components/divider';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Divider, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, };
 export type { TextType, };

package/dist/index.js

@@ -7,5 +7,6 @@ import Presence from './components/presence';
 import Text from './components/text';
 import Button from './components/button';
 import Bullet from './components/bullet';
+import Marker from './components/marker';
 import Divider from './components/divider';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Divider, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, };

package/dist/react/index.d.ts

@@ -5,6 +5,7 @@ export { default as Button } from './button';
 export { default as Divider } from './divider';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as Marker } from './marker';
 export { default as Presence } from './presence';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

package/dist/react/index.js

@@ -5,6 +5,7 @@ export { default as Button } from './button';
 export { default as Divider } from './divider';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as Marker } from './marker';
 export { default as Presence } from './presence';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

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

@@ -0,0 +1,21 @@
+import Component from '../../components/marker';
+/**
+ * `mdc-marker`, which is a vertical line and
+ * used to draw attention to specific parts of
+ * the content or to signify important information.
+ *
+ * **Marker Variants**:
+ * - **solid**: Solid marker.
+ * - **striped**: Striped marker.
+ *
+ * @tagname mdc-marker
+ *
+ * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color
+ * in solid variant.
+ * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.
+ * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color
+ * in striped variant.
+ * @cssproperty --mdc-marker-width - Allows customization of the default width.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/marker/index.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/marker';
+import { TAG_NAME } from '../../components/marker/marker.constants';
+/**
+ * `mdc-marker`, which is a vertical line and
+ * used to draw attention to specific parts of
+ * the content or to signify important information.
+ *
+ * **Marker Variants**:
+ * - **solid**: Solid marker.
+ * - **striped**: Striped marker.
+ *
+ * @tagname mdc-marker
+ *
+ * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color
+ * in solid variant.
+ * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.
+ * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color
+ * in striped variant.
+ * @cssproperty --mdc-marker-width - Allows customization of the default width.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Marker',
+});
+export default reactWrapper;

package/package.json

@@ -35,5 +35,5 @@
     "@momentum-design/tokens": "*",
     "lit": "^3.2.0"
   },
-  "version": "0.14.3"
+  "version": "0.15.0"
 }