@sbc-connect/nuxt-base 0.1.12 → 0.1.14

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.14
+
+### Patch Changes
+
+- [#54](https://github.com/bcgov/connect-nuxt/pull/54) [`5d66b92`](https://github.com/bcgov/connect-nuxt/commit/5d66b927121d6144ee7eedb8ed86b64c76e26c7e) Thanks [@deetz99](https://github.com/deetz99)! - Update layout padding, fix text-highlighted css var reference.
+
+## 0.1.13
+
+### Patch Changes
+
+- [#52](https://github.com/bcgov/connect-nuxt/pull/52) [`602360a`](https://github.com/bcgov/connect-nuxt/commit/602360a628742ffe8957209bbe38eff1663a0851) Thanks [@deetz99](https://github.com/deetz99)! - Update badge, checkbox and buttonGroup app config defaults
+
 ## 0.1.12
 
 ### Patch Changes

package/app/app.config.ts

@@ -27,6 +27,16 @@ export default defineAppConfig({
         }
       ]
     },
+    badge: {
+      slots: {
+        base: 'font-medium inline-flex items-center',
+        label: 'truncate font-bold',
+        leadingIcon: 'shrink-0',
+        leadingAvatar: 'shrink-0',
+        leadingAvatarSize: '',
+        trailingIcon: 'shrink-0'
+      }
+    },
     breadcrumb: {
       slots: {
         separatorIcon: 'text-secondary'
@@ -107,11 +117,55 @@ export default defineAppConfig({
         size: 'lg'
       }
     },
+    buttonGroup: {
+      base: 'relative',
+      variants: {
+        orientation: {
+          horizontal: 'inline-flex -space-x-px divide-x divide-line-muted',
+          vertical: 'flex flex-col -space-y-px'
+        }
+      }
+    },
     card: {
       slots: {
         root: 'rounded-md'
       }
     },
+    checkbox: {
+      slots: {
+        root: 'relative flex items-center group',
+        base: 'rounded-xs relative shrink-0 flex overflow-visible items-center justify-center ring-2 ring-neutral before:absolute before:-inset-2.75 before:flex before:items-center before:justify-center group-hover:before:bg-[#C7C7C7]/80 before:rounded-full cursor-pointer group-active:before:bg-[#454545]/40 has-data-[state=checked]:hover:before:bg-[#7AA1D2]/40 has-data-[state=checked]:active:before:bg-[#155fb7]/40 before:transition-colors',
+        label: 'cursor-pointer text-sm'
+      },
+      variants: {
+        variant: {
+          card: {
+            root: 'bg-shade border border-line-muted rounded-sm'
+          }
+        },
+        indicator: {
+          start: {
+            wrapper: 'ms-4'
+          }
+        }
+      },
+      compoundVariants: [
+        {
+          size: 'lg',
+          variant: 'card',
+          class: {
+            root: 'p-4.25'
+          }
+        },
+        {
+          color: 'primary',
+          variant: 'card',
+          class: {
+            root: 'has-data-[state=checked]:border-line-muted cursor-pointer'
+          }
+        }
+      ]
+    },
     dropdownMenu: {
       slots: {
         content: 'min-w-32 max-h-[75dvh] shadow-lg rounded-sm',

package/app/components/Connect/Breadcrumb.vue

@@ -39,11 +39,11 @@ function resolveBackHref() {
   <div
     v-if="$route.meta.hideBreadcrumbs !== true"
     data-testid="connect-breadcrumb-wrapper"
-    class="bg-blue-350"
+    class="bg-blue-350 p-2 sm:px-4 py-2"
   >
     <nav
       :aria-label="$t('connect.breadcrumb.arialabel')"
-      class="app-inner-container flex items-center p-2 sm:px-4 py-2 gap-3"
+      class="app-inner-container flex items-center gap-3"
     >
       <UButton
         class="size-[28px] rounded-full px-1 bg-secondary hover:bg-secondary/75"

package/app/components/Connect/Footer.vue

@@ -54,9 +54,9 @@ const appVersions = computed<string[]>(() => {
   <footer
     id="connect-main-footer"
     data-testid="connect-main-footer"
-    class="border-t-2 border-brand-inverted bg-brand"
+    class="border-t-2 border-brand-inverted bg-brand p-2 sm:px-4"
   >
-    <div class="app-inner-container flex items-center justify-between p-2">
+    <div class="app-inner-container flex items-center justify-between">
       <nav :aria-label="$t('connect.footer.navLabel')" class="flex grow">
         <ul class="list-none flex-col gap-1 p-0 sm:-ml-2 sm:flex-row sm:flex-wrap">
           <li

package/app/components/Connect/Layout/Index.vue

@@ -9,12 +9,14 @@
     <slot name="breadcrumb">
       <ConnectBreadcrumb />
     </slot>
-    <main class="app-inner-container app-body">
-      <slot name="body">
-        <div class="grow max-w-full flex flex-col overflow-hidden">
-          <slot />
-        </div>
-      </slot>
+    <main class="app-body px-2 sm:px-4">
+      <div class="app-inner-container ">
+        <slot name="body">
+          <div class="grow max-w-full flex flex-col overflow-hidden">
+            <slot />
+          </div>
+        </slot>
+      </div>
     </main>
     <slot name="footer">
       <ConnectFooter />

package/app/components/Connect/SystemBanner.vue

@@ -18,7 +18,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div id="connect-system-banner" class="bg-brand-inverted">
+  <div id="connect-system-banner" class="bg-brand-inverted px-2 sm:px-4">
     <UAlert
       v-show="!!message && !close"
       class="py-0"
@@ -26,7 +26,7 @@ onMounted(async () => {
       :close="dismissible"
       close-icon="i-mdi-close"
       :ui="{
-        root: 'rounded-none bg-brand-inverted p-2 sm:px-4 app-inner-container',
+        root: 'rounded-none bg-brand-inverted px-0 sm:px-0 app-inner-container',
         wrapper: 'bg-brand-inverted',
         close: 'mt-2 text-neutral-highlighted',
       }"

package/modules/base-assets/runtime/assets/connect-base-layout.css

@@ -9,5 +9,5 @@
 }
 
 .app-body {
-  @apply grow relative flex flex-col px-4;
+  @apply grow relative flex flex-col;
 }

package/modules/base-assets/runtime/assets/connect-base-tw.css

@@ -6,12 +6,12 @@
 /* Customize Nuxt UI default tokens */
 /* Follows https://sites.google.com/bcdevexchange.org/designsystem/foundation-styles/colours */
 :root {
-  /* Default Text Colours */
-  --ui-text-dimmed: var(--ui-color-gray-400);
-  --ui-text-muted: var(--ui-color-gray-500);
-  --ui-text-toned: var(--ui-color-gray-600);
-  --ui-text: var(--ui-color-neutral);
-  --ui-text-highlighted: var(--ui-color-neutral-highlighted);
+  /* Nuxt UI Default Text Colours */
+  --ui-text-dimmed: var(--color-gray-400);
+  --ui-text-muted: var(--color-gray-500);
+  --ui-text-toned: var(--color-gray-600);
+  --ui-text: var(--ui-neutral);
+  --ui-text-highlighted: var(--ui-neutral-highlighted);
   --ui-text-inverted: var(--color-white);
   /* Variant Colours */
   --ui-error: var(--color-red-600);
@@ -42,12 +42,12 @@
 
 /* FUTURE: add dark themed colours (currently set to be the same) */
 .dark {
-  /* Default Text Colours */
+  /* Nuxt UI Default Text Colours */
   --ui-text-dimmed: var(--ui-color-gray-400);
   --ui-text-muted: var(--ui-color-gray-500);
   --ui-text-toned: var(--ui-color-gray-600);
-  --ui-text: var(--ui-color-neutral);
-  --ui-text-highlighted: var(--ui-color-neutral-highlighted);
+  --ui-text: var(--ui-neutral);
+  --ui-text-highlighted: var(--ui-neutral-highlighted);
   --ui-text-inverted: var(--color-white);
   /* Variant Colours */
   --ui-error: var(--color-red-600);
@@ -76,6 +76,7 @@
   --ui-radius: 0.1667rem;
 }
 
+/* Main Theme */
 @theme static {
   /* font */
   --font-sans: 'BCSans', 'Verdana', 'Arial', 'sans-serif';
@@ -275,3 +276,14 @@ body {
     @apply pointer-events-none absolute left-0 top-1 text-neutral-highlighted text-xs font-medium px-2.5 transition-all duration-200 peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary peer-aria-invalid:text-error;
   }
 }
+
+/* TODO: maybe delete this */
+/* Extra Utilities */
+/* This should be working out-of-the-box from Nuxt UI but isnt for some reason */
+/* https://ui.nuxt.com/getting-started/theme#neutral */
+/* .text-highlighted {
+  color: var(--color-gray-900);
+  @variant dark {
+    color: var(--color-gray-900);
+  }
+} */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -23,9 +23,9 @@
     "nuxt": "^4.0.2",
     "typescript": "^5.8.3",
     "vue-tsc": "^3.0.4",
+    "@sbc-connect/eslint-config": "0.0.7",
     "@sbc-connect/playwright-config": "0.0.7",
-    "@sbc-connect/vitest-config": "0.0.6",
-    "@sbc-connect/eslint-config": "0.0.7"
+    "@sbc-connect/vitest-config": "0.0.6"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",