srcdev-nuxt-components 1.0.0 → 1.0.2

package/assets/styles/a11y/index.css

@@ -0,0 +1,2 @@
+@import './_variables';
+@import './_utils';

package/assets/styles/main.css

@@ -2,4 +2,4 @@
 @import './forms';
 @import './utils';
 @import './typography';
-@import './ally';
+@import './a11y';

package/assets/styles/variables/components/_accordian.css

@@ -0,0 +1,7 @@
+:root {
+  --accordian-panel-border: 0.1rem solid light-dark(var(--gray-3), var(--gray-6));
+  --accordian-panel-border-radius: 0.4rem;
+  --accordian-panel-mbe: 1.6rem;
+
+  --accordion-trigger-bg: light-dark(var(--gray-3), var(--gray-6));
+}

package/assets/styles/variables/components/_tabs.css

@@ -0,0 +1,18 @@
+:root {
+  --tabs-default-text: light-dark(var(--gray-12), var(--gray-0));
+  --tabs-active-bg: light-dark(var(--gray-12), var(--gray-0));
+  --tabs-active-text: light-dark(var(--gray-0), var(--gray-12));
+  --tabs-active-indicator: var(--green-6);
+  --tabs-hovered-bg: light-dark(var(--gray-7), var(--gray-3));
+  --tabs-hovered-text: light-dark(var(--gray-0), var(--gray-12));
+  --tabs-border-bottom: 0px solid var(--green-6);
+
+  --tabs-content-border: 0.1rem solid var(--green-6);
+  --tabs-content-outline: 0.1rem solid var(--green-12);
+  --tabs-content-bg: light-dark(var(--gray-1), var(--gray-8));
+
+  --tabs-content-start-start-radius: 0;
+  --tabs-content-start-end-radius: 0;
+  --tabs-content-end-start-radius: 1rem;
+  --tabs-content-end-end-radius: 1rem;
+}

package/assets/styles/variables/components/display-prompt-core/_scaffolding.css

@@ -0,0 +1,57 @@
+:root {
+  /*
+  * Wrapper styles
+  */
+  --display-prompt-wrapper-border-radius: 0.5rem;
+
+  /*
+  * Inner styles
+  */
+  --display-prompt-inner-margin: 0 0 0 0.7rem;
+  --display-prompt-inner-padding: 1rem 1.5rem;
+  --display-prompt-inner-gap: 1.6rem;
+  --display-prompt-inner-border-radius: 0.2rem;
+
+  /*
+  * Icon styles
+  */
+  --display-prompt-icon-size: 3rem;
+  --display-prompt-icon-weight: normal;
+
+  /*
+  * Title styles
+  */
+  --display-prompt-inner-content-gap: 1rem;
+  --display-prompt-content-margin: 0;
+  --display-prompt-content-padding: 0.2rem;
+
+  /*
+  * Title styles
+  */
+  --display-prompt-content-title-font-size: var(--step-2);
+  --display-prompt-content-title-font-weight: bold;
+  --display-prompt-content-title-line-height: 1.3;
+  --display-prompt-content-title-margin: 0;
+  --display-prompt-content-title-padding: 0;
+
+  /*
+  * Text styles
+  */
+  --display-prompt-content-text-font-size: var(--step-2);
+  --display-prompt-content-text-font-weight: normal;
+  --display-prompt-content-text-line-height: 1.3;
+  --display-prompt-content-title-margin: 0;
+  --display-prompt-content-title-padding: 0;
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-border-radius: 50%;
+  --display-prompt-button-margin: 1rem;
+  --display-prompt-button-padding: 0.5rem;
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-icon-font-size: var(--step-2);
+}

package/assets/styles/variables/components/display-prompt-core/index.css

@@ -0,0 +1,2 @@
+@import './_scaffolding.css';
+@import './themes';

package/assets/styles/variables/components/display-prompt-core/themes/_error.css

@@ -0,0 +1,39 @@
+[data-prompt-theme='error'] {
+  /*
+  * Wrapper styles
+  */
+  --display-prompt-wrapper-background-color: var(--red-8);
+  --display-prompt-wrapper-border: 0.1rem solid var(--red-8);
+  --display-prompt-wrapper-outline: 0.1rem solid var(--red-5);
+
+  /*
+  * Inner styles
+  */
+  --display-prompt-inner-background-color: var(--red-0);
+
+  /*
+  * Icon styles
+  */
+  --display-prompt-icon-color: var(--red-8);
+
+  /*
+  * Title styles
+  */
+  --display-prompt-content-title-color: var(--red-8);
+
+  /*
+  * Text styles
+  */
+  --display-prompt-content-text-color: var(--red-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-border: 0.1rem solid var(--red-8);
+  --display-prompt-button-outline: 0.1rem solid var(--red-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-icon-color: var(--red-8);
+}

package/assets/styles/variables/components/display-prompt-core/themes/_info.css

@@ -0,0 +1,39 @@
+[data-prompt-theme='info'] {
+  /*
+  * Wrapper styles
+  */
+  --display-prompt-wrapper-background-color: var(--blue-8);
+  --display-prompt-wrapper-border: 0.1rem solid var(--blue-8);
+  --display-prompt-wrapper-outline: 0.1rem solid var(--blue-5);
+
+  /*
+  * Inner styles
+  */
+  --display-prompt-inner-background-color: var(--blue-0);
+
+  /*
+  * Icon styles
+  */
+  --display-prompt-icon-color: var(--blue-8);
+
+  /*
+  * Title styles
+  */
+  --display-prompt-content-title-color: var(--blue-8);
+
+  /*
+  * Text styles
+  */
+  --display-prompt-content-text-color: var(--blue-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-border: 0.1rem solid var(--blue-8);
+  --display-prompt-button-outline: 0.1rem solid var(--blue-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-icon-color: var(--blue-8);
+}

package/assets/styles/variables/components/display-prompt-core/themes/_success.css

@@ -0,0 +1,39 @@
+[data-prompt-theme='success'] {
+  /*
+  * Wrapper styles
+  */
+  --display-prompt-wrapper-background-color: var(--green-8);
+  --display-prompt-wrapper-border: 0.1rem solid var(--green-8);
+  --display-prompt-wrapper-outline: 0.1rem solid var(--green-5);
+
+  /*
+  * Inner styles
+  */
+  --display-prompt-inner-background-color: var(--green-0);
+
+  /*
+  * Icon styles
+  */
+  --display-prompt-icon-color: var(--green-8);
+
+  /*
+  * Title styles
+  */
+  --display-prompt-content-title-color: var(--green-8);
+
+  /*
+  * Text styles
+  */
+  --display-prompt-content-text-color: var(--green-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-border: 0.1rem solid var(--green-8);
+  --display-prompt-button-outline: 0.1rem solid var(--green-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-icon-color: var(--green-8);
+}

package/assets/styles/variables/components/display-prompt-core/themes/_warning.css

@@ -0,0 +1,39 @@
+[data-prompt-theme='warning'] {
+  /*
+  * Wrapper styles
+  */
+  --display-prompt-wrapper-background-color: var(--orange-8);
+  --display-prompt-wrapper-border: 0.1rem solid var(--orange-8);
+  --display-prompt-wrapper-outline: 0.1rem solid var(--orange-5);
+
+  /*
+  * Inner styles
+  */
+  --display-prompt-inner-background-color: var(--orange-0);
+
+  /*
+  * Icon styles
+  */
+  --display-prompt-icon-color: var(--orange-8);
+
+  /*
+  * Title styles
+  */
+  --display-prompt-content-title-color: var(--orange-8);
+
+  /*
+  * Text styles
+  */
+  --display-prompt-content-text-color: var(--orange-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-border: 0.1rem solid var(--orange-8);
+  --display-prompt-button-outline: 0.1rem solid var(--orange-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-icon-color: var(--orange-8);
+}

package/assets/styles/variables/components/display-prompt-core/themes/index.css

@@ -0,0 +1,4 @@
+@import './_error';
+@import './_success';
+@import './_warning';
+@import './_info';

package/assets/styles/variables/components/index.css

@@ -0,0 +1,3 @@
+@import './_accordian';
+@import './_tabs';
+@import './display-prompt-core';

package/assets/styles/variables/index.css

@@ -1 +1,2 @@
 @import './colors/colors.css';
+@import './components';

package/components/presentation/display-prompt/DisplayPromptCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="display-prompt-wrapper" :class="[theme, elementClasses, { dismissed: hide }]" data-test-id="display-prompt">
+  <div class="display-prompt-wrapper" :data-prompt-theme="theme" :class="[elementClasses, { dismissed: hide }]" data-test-id="display-prompt">
     <div class="display-prompt-inner">
       <div class="display-prompt-icon" data-test-id="prompt-icon">
         <slot name="icon"></slot>
@@ -13,7 +13,8 @@
         </p>
       </div>
       <button v-if="dismissible" @click.prevent="dismissPrompt()" data-test-id="display-prompt-action" class="display-prompt-action">
-        <span class="sr-only">Close</span>
+        <Icon name="bitcoin-icons:cross-filled" class="icon" />
+        <span class="sr-only">Really Close</span>
       </button>
     </div>
   </div>
@@ -58,10 +59,10 @@ const dismissPrompt = () => {
 
 <style lang="css">
 .display-prompt-wrapper {
-  background-color: var(--display-prompt-core-wrapper-background-color);
-  border-radius: var(--display-prompt-core-wrapper-border-radius);
-  border: var(--display-prompt-core-wrapper-border);
-  outline: var(--display-prompt-core-wrapper-outline);
+  background-color: var(--display-prompt-wrapper-background-color);
+  border-radius: var(--display-prompt-wrapper-border-radius);
+  border: var(--display-prompt-wrapper-border);
+  outline: var(--display-prompt-wrapper-outline);
   overflow: hidden;
   transition: height 200ms, opacity 200ms, display 200ms;
   transition-behavior: allow-discrete;
@@ -73,23 +74,23 @@ const dismissPrompt = () => {
   }
 
   .display-prompt-inner {
-    background-color: var(--display-prompt-core-inner-background-color);
+    background-color: var(--display-prompt-inner-background-color);
     align-items: center;
-    border-radius: var(--display-prompt-core-inner-border-radius);
+    border-radius: var(--display-prompt-inner-border-radius);
     display: flex;
-    gap: var(--display-prompt-core-inner-gap);
+    gap: var(--display-prompt-inner-gap);
     justify-content: space-between;
-    padding: var(--display-prompt-core-inner-padding);
-    margin: var(--display-prompt-core-inner-margin);
+    padding: var(--display-prompt-inner-padding);
+    margin: var(--display-prompt-inner-margin);
 
     .display-prompt-icon {
       display: inline-flex;
       .icon {
-        color: var(--display-prompt-core-icon-color);
+        color: var(--display-prompt-icon-color);
         display: inline-block;
-        font-size: var(--display-prompt-core-icon-size);
+        font-size: var(--display-prompt-icon-size);
         font-style: normal;
-        font-weight: var(--display-prompt-core-icon-weight);
+        font-weight: var(--display-prompt-icon-weight);
         overflow: hidden;
       }
     }
@@ -98,7 +99,7 @@ const dismissPrompt = () => {
       display: block flex;
       flex-direction: column;
       flex-grow: 1;
-      gap: var(--display-prompt-core-inner-content-gap);
+      gap: var(--display-prompt-inner-content-gap);
       margin: var(--display-prompt-content-margin);
       padding: var(--display-prompt-content-padding);
 
@@ -121,10 +122,28 @@ const dismissPrompt = () => {
       }
     }
     .display-prompt-action {
-      display: flex;
+      /* all: unset; */
+      background-color: transparent;
+      display: block flex;
       align-items: center;
       justify-content: center;
-      width: 40px;
+      margin: var(--display-prompt-button-margin);
+      padding: var(--display-prompt-button-padding);
+      border: var(--display-prompt-button-border);
+      border-radius: var(--display-prompt-button-border-radius);
+      outline: var(--display-prompt-button-outline);
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      .icon {
+        color: var(--display-prompt-button-icon-color);
+        display: block;
+        font-size: var(--display-prompt-button-icon-font-size);
+        border: 1px solid green;
+        padding: 1rem;
+      }
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -25,18 +25,19 @@
     "types/"
   ],
   "devDependencies": {
-    "@nuxt/eslint-config": "0.7.3",
-    "@nuxt/icon": "1.10.2",
+    "@iconify-json/akar-icons": "^1.2.2",
+    "@iconify-json/bitcoin-icons": "^1.2.2",
+    "@nuxt/eslint-config": "0.7.5",
+    "@nuxt/icon": "1.10.3",
     "@oddbird/css-anchor-positioning": "0.4.0",
-    "eslint": "9.17.0",
-    "happy-dom": "15.11.7",
-    "nuxt": "3.14.1592",
-    "release-it": "17.10.0",
-    "typescript": "5.7.2",
-    "vue": "3.5.13"
+    "eslint": "9.19.0",
+    "happy-dom": "16.7.2",
+    "nuxt": "3.15.3",
+    "release-it": "18.1.2",
+    "typescript": "5.7.3"
   },
   "dependencies": {
-    "@vueuse/core": "12.0.0",
+    "@vueuse/core": "12.5.0",
     "focus-trap-vue": "4.0.3",
     "modern-normalize": "3.0.1"
   },

package/assets/styles/ally/index.css

@@ -1,2 +0,0 @@
-@import './_variables.css';
-@import './_utils.css';