make tag clickable

causy-dev · Jun 30, 2024 · 9f8b649 · 9f8b649
1 parent 582b2fc
commit 9f8b649
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 12 deletions.
diff --git a/src/assets/generated/variables.css b/src/assets/generated/variables.css
@@ -84,4 +84,5 @@
   --colorNeutralLight8: #6224ce;
   --colorNeutralLight9: #421889;
   --colorNeutralLight10: #210c45;
+  --colorAccessibilityActive: #fff200;
 }
diff --git a/src/components/tag/Documentation.mdx b/src/components/tag/Documentation.mdx
@@ -22,6 +22,19 @@ import {Meta, Story} from "@storybook/blocks";
     <Tag size={"l"}>Large</Tag>
 </div>
 
+
+<div style={{gap: "10px", display: "flex", marginTop: "20px"}}>
+    <Tag appearance={"primary"} clickable>Primary</Tag>
+    <Tag appearance={"success"} clickable>Success</Tag>
+    <Tag appearance={"danger"} clickable>Danger</Tag>
+    <Tag appearance={"warning"} clickable>Warning</Tag>
+    <Tag appearance={"info"} clickable>Info</Tag>
+    <Tag appearance={"neutralLight"} clickable>Neutral Light</Tag>
+    <Tag appearance={"neutralDark"} clickable>Neutral Dark</Tag>
+</div>
+
+
+
 The `Tag` component is used to display abitrary content in a tag-like format. It can be used to display metadata, labels, or other types of information.
 
 
@@ -55,13 +68,3 @@ The `Tag` component has three slots:
 ## Usage
 
 Here's an example of how to use the `Tag` component with the `appearance` prop and the `start` and `end` slots:
-
-```vue
-<Tag appearance="primary">
-  <template #start>
-    <Icon name="check" />
-  </template>
-  Primary Tag
-  <template #end>
-    <Icon name="close" />
-  </templ
diff --git a/src/components/tag/Tag.vue b/src/components/tag/Tag.vue
@@ -7,6 +7,10 @@ const props = defineProps({
     default: 'primary',
     validator: (value: string) => ['primary', 'success', 'danger', 'warning', 'info', 'neutralLight', 'neutralDark'].includes(value),
   },
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
   emphasis: {
     type: String,
     default: 'medium',
@@ -21,7 +25,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="['tag', `tag--${appearance}`, `tag--${emphasis}`, `tag--${size}`]">
+  <div  :class="['tag', `tag--${appearance}`, `tag--${emphasis}`, `tag--${size}`, clickable ? 'tag--clickable' : '']" :role="clickable ? 'button' : ''"  aria-label="tag">
     <slot name="start"></slot>
     <slot></slot>
     <slot name="end"></slot>
@@ -45,6 +49,12 @@ const props = defineProps({
   line-height: normal;
 }
 
+.tag:focus-visible  {
+  outline: none;
+  border-color: var(--colorAccessibilityActive)!important;
+}
+
+
 .tag--s {
   font-size: 0.75em;
   padding: 0.05em 0.1em;
@@ -73,19 +83,38 @@ const props = defineProps({
 .tag--primary {
   background-color: var(--colorPrimary5);
   border-color: var(--colorPrimary5);
-  color: var(--semanticText);
+  color: var(--colorNeutralLight5);
 }
 
+.tag--primary.tag--clickable:hover {
+  background-color: var(--colorPrimary8);
+  border-color: var(--colorPrimary8);
+}
 
 .tag--success {
   background-color: var(--colorSuccess8);
   border-color: var(--colorSuccess8);
   color: var(--colorNeutralLight5);
 }
 
+.tag--success.tag--clickable:hover {
+  background-color: var(--colorSuccess5);
+  border-color: var(--colorSuccess5);
+  color: var(--colorNeutralDark5);
+
+}
+
+
 .tag--danger {
   background-color: var(--colorError5);
   border-color: var(--colorError5);
+  color: var(--colorNeutralLight5);
+
+}
+
+.tag--danger.tag--clickable:hover {
+  background-color: var(--colorError8);
+  border-color: var(--colorError8);
 }
 
 .tag--warning {
@@ -94,24 +123,48 @@ const props = defineProps({
   color: var(--colorNeutralDark5);
 }
 
+.tag--warning.tag--clickable:hover {
+  background-color: var(--colorWarning8);
+  border-color: var(--colorWarning8);
+  color: var(--colorNeutralLight5);
+
+}
+
 .tag--info {
   background-color: var(--colorInformative5);
   border-color: var(--colorInformative5);
   color: var(--colorNeutralLight5);
 }
 
+.tag--info.tag--clickable:hover {
+  background-color: var(--colorInformative8);
+  border-color: var(--colorInformative8);
+}
+
 .tag--neutralLight {
   background-color: var(--colorNeutralLight5);
   border-color: var(--colorNeutralLight5);
   color: var(--colorNeutralDark5);
 }
 
+.tag--neutralLight.tag--clickable:hover {
+  background-color: var(--colorNeutralLight8);
+  border-color: var(--colorNeutralLight8);
+  color: var(--colorNeutralLight5);
+
+}
+
 .tag--neutralDark {
   background-color: var(--colorNeutralDark5);
   border-color: var(--colorNeutralDark5);
   color: var(--colorNeutralLight5);
 }
 
+.tag--neutralDark.tag--clickable:hover {
+  background-color: var(--colorNeutralDark3);
+  border-color: var(--colorNeutralDark3);
+}
+
 .tag--low {
   background-color: transparent;
 }
@@ -120,28 +173,71 @@ const props = defineProps({
   color: var(--colorPrimary5);
 }
 
+.tag--low.tag--primary.tag--clickable:hover {
+  background-color: var(--colorPrimary5);
+  border-color: var(--colorPrimary5);
+  color: var(--colorNeutralLight5);
+}
+
 .tag--low.tag--success {
   color: var(--colorSuccess8);
 }
 
+.tag--low.tag--success.tag--clickable:hover {
+  background-color: var(--colorSuccess5);
+  border-color: var(--colorSuccess5);
+  color: var(--colorNeutralDark5);
+
+}
+
 .tag--low.tag--danger {
   color: var(--colorError5);
 }
 
+.tag--low.tag--danger.tag--clickable:hover {
+  background-color: var(--colorError5);
+  border-color: var(--colorError5);
+  color: var(--colorNeutralLight5);
+}
+
+
 .tag--low.tag--warning {
   color: var(--colorWarning5);
 }
 
+.tag--low.tag--warning.tag--clickable:hover {
+  background-color: var(--colorWarning5);
+  border-color: var(--colorWarning5);
+  color: var(--colorNeutralDark5);
+}
+
 .tag--low.tag--info {
   color: var(--colorInformative5);
 }
 
+.tag--low.tag--info.tag--clickable:hover {
+  background-color: var(--colorInformative5);
+  border-color: var(--colorInformative5);
+  color: var(--colorNeutralLight5);
+}
+
 .tag--low.tag--neutralLight {
   color: var(--colorNeutralLight5);
 }
 
+.tag--low.tag--neutralLight.tag--clickable:hover {
+  background-color: var(--colorNeutralLight5);
+  border-color: var(--colorNeutralLight5);
+  color: var(--colorNeutralDark5);
+}
+
 .tag--low.tag--neutralDark {
   color: var(--colorNeutralDark5);
+  border-color: var(--colorNeutralDark5);
+}
+
+.tag--clickable {
+  cursor: pointer;
 }
 
 </style>