@teamimpact/veda-ui-blocks 0.1.0-beta.7 → 0.1.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamimpact/veda-ui-blocks",
-  "version": "0.1.0-beta.7",
+  "version": "0.1.0-beta.9",
   "description": "UI component library for VEDA-based portals, built on USWDS and React",
   "license": "MIT",
   "repository": {
@@ -24,12 +24,10 @@
       "types": "./dist/index.d.ts"
     },
     "./default.css": "./dist/default.css",
-    "./disasters.css": "./dist/disasters.css",
-    "./earthgov.css": "./dist/earthgov.css"
+    "./disasters.css": "./dist/disasters.css"
   },
   "files": [
-    "dist",
-    "src/styles"
+    "dist"
   ],
   "peerDependencies": {
     "@developmentseed/stac-react": "^1.0.0-alpha.2",
@@ -72,10 +70,10 @@
     "vitest": "^4.0.18"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts && pnpm run build:assets && pnpm run build:css",
+    "build": "tsup src/index.ts --format esm --dts && pnpm run build:css",
     "build:assets": "./scripts/build-assets.sh",
     "build:css": "./scripts/build-css.sh --quiet",
-    "build:css:watch": "./scripts/build-css.sh --quiet --watch --load-path=src/styles",
+    "build:css:watch": "./scripts/build-css.sh --quiet --watch",
     "dev": "concurrently \"pnpm run build:css:watch\" \"storybook dev -p 6006\"",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",

package/src/styles/components/banner.scss

@@ -1,18 +0,0 @@
-@use "uswds-core" as *;
-
-.blocks-banner {
-  &__row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: units(4);
-  }
-
-  &__guidance {
-    flex: 1 1 100%;
-    min-width: 0;
-    @include at-media("tablet") {
-      flex: 1 1 0;
-      max-width: 50%;
-    }
-  }
-}

package/src/styles/components/card-cta.scss

@@ -1,90 +0,0 @@
-@use "uswds-core" as *;
-$theme-card-cta-background-color: "white" !default;
-$theme-card-cta-border-radius: "sm" !default;
-$theme-card-cta-border-color: "base-lighter" !default;
-$theme-card-cta-title-color: "ink" !default;
-$theme-card-cta-description-color: "ink" !default;
-$theme-card-cta-accent-color: "primary" !default;
-
-// LAYOUT
-.blocks-card-cta {
-  --blocks-card-cta-custom-accent-color: #{color($theme-card-cta-accent-color)};
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  text-decoration: none;
-
-  &__body {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    padding: units(2.5);
-    gap: units(1);
-    z-index: 1;
-  }
-
-  &__title {
-    display: flex;
-    align-items: center;
-    gap: units("105");
-    margin: 0;
-  }
-
-  &__icon {
-    color: var(--blocks-card-cta-custom-accent-color);
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    vertical-align: baseline;
-    width: 1cap;
-    height: 1cap;
-
-    > svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__description {
-    margin: 0;
-  }
-}
-
-// THEME
-.blocks-card-cta {
-  background-color: color($theme-card-cta-background-color);
-  border-radius: radius($theme-card-cta-border-radius);
-  border: 1px solid color($theme-card-cta-border-color);
-
-  &:hover,
-  &:focus-visible {
-    text-decoration: none;
-
-    .blocks-card-cta__title {
-      text-decoration-line: underline;
-      text-decoration-color: var(--blocks-card-cta-custom-accent-color);
-      text-decoration-thickness: 2px;
-    }
-  }
-
-  &__title {
-    color: color($theme-card-cta-title-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("body", "md");
-    font-weight: font-weight("bold");
-    line-height: lh("heading", 1);
-  }
-
-  &__description {
-    color: color($theme-card-cta-description-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("body", "sm");
-    font-weight: font-weight("normal");
-    line-height: lh("body", 4);
-  }
-}

package/src/styles/components/card-detailed.scss

@@ -1,164 +0,0 @@
-@use "uswds-core" as *;
-
-$theme-card-background-color: $theme-body-background-color !default;
-$theme-card-primary-accent-color: "primary-darker" !default;
-$theme-card-secondary-accent-color: "primary-light" !default;
-
-// LAYOUT
-.blocks-card-detailed {
-  isolation: isolate;
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  &--image-bottom {
-    .blocks-card-detailed__image-wrapper {
-      order: 1;
-    }
-  }
-
-  &--image-cover {
-    min-height: 15rem;
-
-    .blocks-card-detailed__image-wrapper {
-      position: absolute;
-      inset: 0;
-      z-index: 0;
-
-      > :is(img, svg, video, canvas) {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .blocks-card-detailed__content {
-      position: relative;
-      z-index: 1;
-      margin-top: auto;
-      padding-top: units(7);
-    }
-  }
-
-  &__accent-bar {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 3;
-    height: units(1);
-    pointer-events: none;
-  }
-
-  &__image-wrapper {
-    position: relative;
-    order: -1;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  &__content-type-tag {
-    position: absolute;
-    top: units(2.5);
-    left: units(4);
-    z-index: 2;
-  }
-
-  &__image-wrapper > :is(img, svg, video, canvas) {
-    width: 100%;
-    display: block;
-
-    &:is(img, svg, video, canvas) {
-      height: auto;
-    }
-  }
-
-  &__content {
-    padding: units(3) units(4) units(4) units(4);
-    display: flex;
-    flex-direction: column;
-    gap: units(1.5);
-  }
-
-  &__title {
-    margin: 0; // preserve spacing rhythm by removing browser default
-  }
-
-  &__tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: units(0.5);
-  }
-
-  &__action {
-    align-self: flex-start;
-  }
-}
-@include at-media-max("mobile-lg") {
-  .blocks-card-detailed__content {
-    padding: units(2);
-  }
-
-  .blocks-card-detailed__content-type-tag {
-    left: units(2);
-  }
-}
-
-// THEME
-.blocks-card-detailed {
-  background: color($theme-card-background-color);
-  border-radius: radius($theme-card-border-radius);
-  box-shadow: 0 units(0.5) units(2) rgba(color("base-dark"), 0.06);
-
-  &--image-cover {
-    .blocks-card-detailed__content {
-      background: linear-gradient(
-        180deg,
-        rgba(color($theme-card-background-color), 0) 0%,
-        rgba(color($theme-card-background-color), 0.72) 40%,
-        color($theme-card-background-color) 100%
-      );
-    }
-  }
-
-  &__accent-bar {
-    background: linear-gradient(
-      90deg,
-      color($theme-card-primary-accent-color) 0%,
-      color($theme-card-secondary-accent-color) 100%
-    );
-  }
-
-  &__image-wrapper {
-    background: color("base-lighter");
-  }
-
-  &__intro {
-    color: color("base-dark");
-    font-family: family($theme-card-font-family);
-    font-size: font-size("body", "3xs");
-    font-style: normal;
-    font-weight: font-weight("normal");
-    line-height: line-height("body", 1);
-  }
-
-  &__title {
-    color: color("ink");
-    font-family: family($theme-card-font-family);
-    font-size: font-size("heading", "lg");
-    font-style: normal;
-    font-weight: font-weight("bold");
-    line-height: line-height("heading", 3);
-  }
-
-  &__description {
-    color: color("ink");
-    font-family: family($theme-card-font-family);
-    font-size: font-size("body", "3xs");
-    font-style: normal;
-    font-weight: font-weight("normal");
-    line-height: line-height("body", 5);
-  }
-}

package/src/styles/components/card-mini.scss

@@ -1,81 +0,0 @@
-@use "uswds-core" as *;
-
-$theme-card-mini-border-radius: $theme-card-border-radius !default;
-$theme-card-mini-border-width: 1px !default;
-$theme-card-mini-border-color: "base-lighter" !default;
-$theme-card-mini-bg: "white" !default;
-$theme-card-mini-title-color: "ink" !default;
-$theme-card-mini-title-font-weight: $theme-font-weight-bold !default;
-$theme-card-mini-image-width: 98px !default; // matches Figma
-$theme-card-mini-image-height: 108px !default; // matches Figma
-
-// LAYOUT
-.blocks-card-mini {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  width: 100%;
-  height: $theme-card-mini-image-height;
-  overflow: hidden;
-  gap: units("105");
-  padding-right: units("105");
-  text-decoration: none;
-
-  &__image {
-    flex: 0 0 $theme-card-mini-image-width;
-    width: $theme-card-mini-image-width;
-    overflow: hidden;
-
-    > :is(img, svg, video, canvas) {
-      width: 100%;
-      height: 100%;
-      display: block;
-      object-fit: cover;
-    }
-  }
-
-  &__body {
-    flex: 1 0 0;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: units(1);
-    justify-content: center;
-  }
-
-  &__tag {
-    align-self: flex-start;
-    flex-shrink: 0;
-  }
-
-  &__title {
-    margin: 0;
-  }
-}
-
-// THEME
-.blocks-card-mini {
-  background-color: color($theme-card-mini-bg);
-  border-radius: radius($theme-card-mini-border-radius);
-  border: $theme-card-mini-border-width solid color($theme-card-mini-border-color);
-
-  &__title {
-    color: color($theme-card-mini-title-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("heading", "lg");
-    font-weight: font-weight($theme-card-mini-title-font-weight);
-    line-height: lh("heading", 4);
-
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &--with-tag &__title {
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-  }
-}

package/src/styles/components/card-simple.scss

@@ -1,79 +0,0 @@
-@use "uswds-core" as *;
-
-$theme-card-simple-border-radius: "md" !default;
-$theme-card-simple-title-color: "ink" !default;
-$theme-card-simple-title-font-weight: "bold" !default;
-$theme-card-simple-overlay-color: "base-light" !default;
-
-// LAYOUT
-.blocks-card-simple {
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  border-radius: radius($theme-card-simple-border-radius);
-  display: flex;
-  flex-direction: column;
-  text-decoration: none;
-
-  &__media {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-
-    > :is(img, svg, video, canvas) {
-      width: 100%;
-      height: 100%;
-      display: block;
-      object-fit: cover;
-    }
-  }
-
-  &__overlay {
-    position: absolute;
-    inset: 0;
-  }
-
-  &__body {
-    position: relative;
-    z-index: 1;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: units(3) units(2.5) units(2.5) units(2.5);
-  }
-
-  &__tag {
-    align-self: flex-start;
-    flex-shrink: 0;
-  }
-
-  &__title {
-    margin: 0;
-    margin-top: auto;
-  }
-}
-
-// THEME
-.blocks-card-simple {
-  &__overlay {
-    background: linear-gradient(
-      to bottom,
-      rgba(color($theme-card-simple-overlay-color), 0.1),
-      rgba(color($theme-card-simple-overlay-color), 0.8)
-    );
-  }
-
-  &__title {
-    color: color($theme-card-simple-title-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("heading", "lg");
-    font-weight: font-weight($theme-card-simple-title-font-weight);
-    line-height: lh("heading", 2);
-  }
-
-  &--compact &__title {
-    font-size: size("heading", "md");
-  }
-}