@pushengineering/umg-web-components 2.0.0

package/dist/packages/web-components/styles/global.js

@@ -0,0 +1,40 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+const a = o`
+    *, *:before, *:after {
+        box-sizing: border-box;
+    }
+
+    *:focus-visible:not(umg-button-icon) {
+        outline: 0.125rem solid rgba(var(--um-color-page-text, 0,0,0), 1);
+        outline-offset: 0.1875rem;
+        box-shadow: 0 0 0 0.15rem rgb(var(--um-color-page-bg, 255,255,255)),0 0 0.25rem 0.2rem rgba(var(--um-color-page-text, 62,62,62), 0.3);
+    }
+    
+    h1,h2,h3,h4,h5,h6 {
+        font-family: var(--um-font-family-heading, 'Roboto Serif', Times, 'Times New Roman', Georgia, serif);
+    }
+    p {
+        font-family: var(--um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
+    }
+    summary {
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    .visually-hidden {
+        position: absolute !important;
+        overflow: hidden;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        border: 0;
+        clip: rect(0 0 0 0);
+        word-wrap: normal !important;
+    }
+`;
+export {
+  a as global
+};

package/dist/packages/web-components/styles/grid.js

@@ -0,0 +1,114 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { css as r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+const l = r`
+
+    /* Grid layout */
+    .grid {
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: var(--um-space-grid-mobile-vertical, 0.5rem);
+        column-gap: var(--um-space-grid-mobile-horizontal, 0.5rem);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    @media screen and (min-width: 48.06rem) {
+        .grid {
+            row-gap: var(--um-space-grid-desktop-vertical, 1.5rem);
+            column-gap: var(--um-space-grid-desktop-horizontal, 1.5rem);
+        }
+    }
+
+    /* Grid */
+    /* Default */
+    /* grid..grid--columns class for grids with non-slotted grid items */
+   .grid:not(.grid--columns) ::slotted(*),
+   .grid > * {
+        width: calc(25% - var(--um-space-grid-mobile-horizontal, 0.5rem) * 3 / 4);
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .grid.grid--gapless {
+        gap: 0;
+    }
+
+    .grid:not(.grid--columns).grid--fill ::slotted(*),
+    .grid.grid--fill > * {
+        flex-grow: 1;
+    }
+
+    /* Mobile by class */
+    @media screen and (max-width: 30rem) {
+        .grid--1-col-tablet-down:not(.grid--columns) ::slotted(*),
+        .grid--1-col-tablet-down > * {
+            width: 100%;
+        }
+        .grid--2-col-tablet-down:not(.grid--columns) ::slotted(*),
+        .grid--2-col-tablet-down > * {
+            width: calc( 50% - var(--um-space-grid-mobile-horizontal, 0.5rem) / 2 );
+        }
+    }
+
+    /* Tablet portrait by class */
+    @media screen and (min-width: 30.06rem) and (max-width: 48rem) {
+        .grid--4-col-tablet:not(.grid--columns) ::slotted(*),
+        .grid--4-col-tablet > * {
+            width: calc(25% - var(--um-space-grid-mobile-horizontal, 1rem) * 3 / 4);
+        }
+        .grid--3-col-tablet:not(.grid--columns) ::slotted(*),
+        .grid--3-col-tablet > * {
+            width: calc(33.33% - var(--um-space-grid-mobile-horizontal, 1rem) * 2 / 3);
+        }
+        .grid--2-col-tablet:not(.grid--columns) ::slotted(*),
+        .grid--2-col-tablet > * {
+            width: calc(50% - var(--um-space-grid-mobile-horizontal, 1rem) / 2);
+        }
+        .grid--1-col-tablet:not(.grid--columns) ::slotted(*),
+        .grid--1-col-tablet > * {
+            width: 100%;
+        }
+    }
+
+    /* Tablet landscape by class */
+    @media screen and (min-width: 48.06rem) and (max-width: 64rem) {
+        .grid--4-col-tablet:not(.grid--columns) ::slotted(*),
+        .grid--4-col-tablet > * {
+            width: calc(25% - var(--um-space-grid-desktop-horizontal, 1rem) * 3 / 4);
+        }
+        .grid--3-col-tablet:not(.grid--columns) ::slotted(*),
+        .grid--3-col-tablet > * {
+            width: calc(33.33% - var(--um-space-grid-desktop-horizontal, 1rem) * 2 / 3);
+        }
+        .grid--2-col-tablet:not(.grid--columns) ::slotted(*),
+        .grid--2-col-tablet > * {
+            width: calc(50% - var(--um-space-grid-desktop-horizontal, 1rem) / 2);
+        }
+        .grid--1-col-tablet:not(.grid--columns) ::slotted(*),
+        .grid--1-col-tablet > * {
+            width: 100%;
+        }
+    }
+
+    /* Desktop by variables or class */
+    @media screen and (min-width: 64.06rem) {
+        .grid:not(.grid--columns) ::slotted(*),
+        .grid > * {
+             width: calc(
+                 var(--um-grid-desktop-columns-width, 25%)
+                 - var(--um-space-grid-desktop-horizontal, 1.5rem)
+                 * var(--um-grid-desktop-gaps, 3)
+                 / var(--um-grid-desktop-columns, 4)
+             );
+         }
+        .grid--2-col-desktop:not(.grid--columns) ::slotted(*),
+        .grid--2-col-desktop > * {
+            width: calc(50% - var(--um-space-grid-desktop-horizontal, 1rem) / 2);
+         }
+    }
+`;
+export {
+  l as grid
+};

package/dist/packages/web-components/styles/group.js

@@ -0,0 +1,121 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+const r = e`
+    .group-spacing--none {
+        gap: var(--um-space-0, 0rem);
+    }
+    .group-spacing--compact {
+        gap: var(--um-space-8, 0.5rem);
+    }
+    .group-spacing--normal {
+        gap: var(--um-space-16, 1rem);
+    }
+    .group-spacing--loose {
+        gap: var(--um-space-24, 1.5rem);
+    }
+    .group-spacing--spread {
+        justify-content: space-between;
+    }
+    .group-spacing--wrap {
+        flex-direction: column;
+    }
+
+    @media only screen and (max-width: 48rem) {
+        .group--wrap-mobile-only {
+            flex-direction: column;
+        }
+    }
+`, o = e`
+    @media screen and (min-width: 48.06rem) {
+        .group-justify--start {
+            justify-content: start;
+        }
+        .group-justify--center {
+            justify-content: center;
+        }
+        .group-justify--end {
+            justify-content: end;
+        }
+        .group-justify--space-evenly {
+            justify-content: space-evenly;
+        }
+        .group-justify--space-between {
+            justify-content: space-between;
+        }
+        .group-justify--space-around {
+            justify-content: space-around;
+        }
+        .group-justify--stretch {
+            justify-content: stretch;
+        }
+    }
+`, a = e`
+    @media screen and (max-width: 48rem) {
+        .group-mobile-justify--start {
+            justify-content: start;
+        }
+        .group-mobile-justify--center {
+            justify-content: center;
+        }
+        .group-mobile-justify--end {
+            justify-content: end;
+        }
+        .group-mobile-justify--space-evenly {
+            justify-content: space-evenly;
+        }
+        .group-mobile-justify--space-between {
+            justify-content: space-between;
+        }
+        .group-mobile-justify--space-around {
+            justify-content: space-around;
+        }
+        .group-mobile-justify--stretch {
+            justify-content: stretch;
+        }
+    }
+`, u = e`
+    @media screen and (min-width: 48.06rem) {
+        .group-align--start {
+            align-items: start;
+        }
+        .group-align--center {
+            align-items: center;
+        }
+        .group-align--end {
+            align-items: end;
+        }
+        .group-align--baseline {
+            align-items: baseline;
+        }
+        .group-align--stretch {
+            align-items: stretch;
+        }
+    }
+`, p = e`
+    @media screen and (max-width: 48rem) {
+        .group-mobile-align--start {
+            align-items: start;
+        }
+        .group-mobile-align--center {
+            align-items: center;
+        }
+        .group-mobile-align--end {
+            align-items: end;
+        }
+        .group-mobile-align--baseline {
+            align-items: baseline;
+        }
+        .group-mobile-align--stretch {
+            align-items: stretch;
+        }
+    }
+`;
+export {
+  u as groupAlign,
+  o as groupJustify,
+  p as groupMobileAlign,
+  a as groupMobileJustify,
+  r as groupSpacing
+};

package/dist/packages/web-components/styles/icon-size.js

@@ -0,0 +1,19 @@
+function e(r) {
+  if (r === "xSmall")
+    return "var(--um-font-size-body-xs, 0.5rem)";
+  if (r === "small")
+    return "var(--um-font-size-body-sm, 0.875rem)";
+  if (r === "medium")
+    return "var(--um-font-size-body-md, 1rem)";
+  if (r === "large")
+    return "var(--um-font-size-body-lg, 1.25rem)";
+  if (r === "xLarge")
+    return "var(--um-font-size-body-xl, 1.5rem)";
+  if (r === "2xLarge")
+    return "var(--um-font-size-body-2xl, 1.75rem)";
+  if (r === "3xLarge")
+    return "var(--um-font-size-body-3xl, 2rem)";
+}
+export {
+  e as iconSize
+};

package/dist/packages/web-components/styles/link.js

@@ -0,0 +1,30 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+const i = o`
+    .link {
+        cursor: pointer;
+        display: inline-block;
+        border: none;
+        box-shadow: none;
+        color: rgb(var(--um-color-link-text, var(--um-color-section-text, var(--um-color-base-text, 62,62,62))));
+        background-color: transparent;
+        font-size: var(--um-font-size-body-sm, 0.875rem);
+        font-family: inherit;
+        text-underline-offset: 0.25rem;
+    }
+    .link:hover {
+        text-decoration: underline;
+    }
+    .link--plain {
+        text-decoration: none;
+    }
+    .link--active {
+        font-weight: var(--um-font-weight-medium, 500);
+        text-decoration: underline;
+    }
+`;
+export {
+  i as linkState
+};

package/dist/packages/web-components/styles/placeholder-media.js

@@ -0,0 +1,27 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+const l = e`
+    .placeholder {
+        height: 100%;
+        width: 100%;
+    }
+    .placeholder-inner {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: rgb(var(--um-color-skeleton-bg, 230, 230, 230));
+        height: 100%;
+        width: 100%;
+    }
+    .placeholder .icon {
+        display: block;
+        height: 40%;
+        width: 40%;
+        color: rgb(var(--um-color-page-bg, 255,255,255),0.3);
+    }
+`;
+export {
+  l as placeholderMedia
+};

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@pushengineering/umg-web-components",
+  "version": "2.0.0",
+  "type": "module",
+  "module": "dist/packages/web-components/components/index.js",
+  "files": [
+    "/dist"
+  ],
+  "exports": {
+    ".": "./dist/packages/web-components/components/index.js",
+    "./badge": "./dist/packages/web-components/components/badge/badge.js",
+    "./banner": "./dist/packages/web-components/components/banner/banner.js",
+    "./banner-image": "./dist/packages/web-components/components/banner-image/banner-image.js",
+    "./box": "./dist/packages/web-components/components/box/box.js",
+    "./button": "./dist/packages/web-components/components/button/button.js",
+    "./button-icon": "./dist/packages/web-components/components/button-icon/button-icon.js",
+    "./button-group": "./dist/packages/web-components/components/button-group/button-group.js",
+    "./caption-card": "./dist/packages/web-components/components/caption-card/caption-card.js",
+    "./deferred-media": "./dist/packages/web-components/components/deferred-media/deferred-media.js",
+    "./disclosure": "./dist/packages/web-components/components/disclosure/disclosure.js",
+    "./event-table": "./dist/packages/web-components/components/event-table/event-table.js",
+    "./footer": "./dist/packages/web-components/components/footer/footer.js",
+    "./grid": "./dist/packages/web-components/components/grid/grid.js",
+    "./header": "./dist/packages/web-components/components/header/header.js",
+    "./header-drawer": "./dist/packages/web-components/components/header-drawer/header-drawer.js",
+    "./horizontal-stack": "./dist/packages/web-components/components/horizontal-stack/horizontal-stack.js",
+    "./icon": "./dist/packages/web-components/components/icon/icon.js",
+    "./image": "./dist/packages/web-components/components/image/image.js",
+    "./link": "./dist/packages/web-components/components/link/link.js",
+    "./link-group": "./dist/packages/web-components/components/link-group/link-group.js",
+    "./logo": "./dist/packages/web-components/components/logo/logo.js",
+    "./media-gallery": "./dist/packages/web-components/components/media-gallery/media-gallery.js",
+    "./media": "./dist/packages/web-components/components/media/media.js",
+    "./media-text": "./dist/packages/web-components/components/media-text/media-text.js",
+    "./menu": "./dist/packages/web-components/components/menu/menu.js",
+    "./modal": "./dist/packages/web-components/components/overlay/overlay.js",
+    "./number-field": "./dist/packages/web-components/components/number-field/number-field.js",
+    "./overlay": "./dist/packages/web-components/components/page/page.js",
+    "./page": "./dist/packages/web-components/components/page/page.js",
+    "./popover": "./dist/packages/web-components/components/popover/popover.js",
+    "./rich-text": "./dist/packages/web-components/components/rich-text/rich-text.js",
+    "./section": "./dist/packages/web-components/components/section/section.js",
+    "./select": "./dist/packages/web-components/components/select/select.js",
+    "./slider": "./dist/packages/web-components/components/slider/slider.js",
+    "./socials": "./dist/packages/web-components/components/socials/socials.js",
+    "./table": "./dist/packages/web-components/components/table/table.js",
+    "./text": "./dist/packages/web-components/components/text/text.js",
+    "./text-field": "./dist/packages/web-components/components/text-field/text-field.js",
+    "./thumbnail-slider": "./dist/packages/web-components/components/thumbnail-slider/thumbnail-slider.js",
+    "./vertical-stack": "./dist/packages/web-components/components/vertical-stack/vertical-stack.js",
+    "./video": "./dist/packages/web-components/components/video/video.js",
+    "./event-manager": "./dist/packages/web-components/classes/event-manager/event-manager.js"
+  },
+  "scripts": {
+    "dev": "vite",
+    "storybook": "storybook dev -p 6006",
+    "build": "tsc && vite build",
+    "build-storybook": "storybook build",
+    "gr": "rollup -c"
+  },
+  "dependencies": {
+    "@umg-components/design-tokens": "workspace:^",
+    "lit": "^2.7.2"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.9.0",
+    "@ljcl/storybook-addon-cssprops": "^3.1.0",
+    "@rollup/plugin-typescript": "^11.1.3",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-storysource": "^7.6.7",
+    "@storybook/addon-viewport": "^7.4.0",
+    "@storybook/blocks": "^7.4.0",
+    "@storybook/web-components": "^7.4.0",
+    "@storybook/web-components-vite": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "@web/rollup-plugin-import-meta-assets": "^2.0.2",
+    "postcss": "^8.4.26",
+    "postcss-nesting": "^12.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^3.28.1",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "storybook": "^7.4.0",
+    "storybook-dark-mode": "^3.0.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vite-plugin-dts": "^3.6.3"
+  },
+  "customElements": "custom-elements.json"
+}