UI-410: Status > remove editable prop (#376)

packages/alto/src/_dev/App.vue

@@ -1,25 +1,57 @@
 <script setup lang="ts">
 import 'uno.css';
 import '../assets/main.css';
-import { Loader } from '~/components';
+import { ref } from 'vue';
+import { Status } from '~/components';
+import type { StatusObject } from '~/components/Status/types';
+
+const staticFruit = ref<StatusObject>({
+  color: '#fffad2',
+  label: 'Banana 🍌',
+  labelColor: '#555022',
+});
+
+const fruits = [
+  {
+    color: '#ffdecb',
+    label: 'Peach 🍑',
+    labelColor: '#35192b',
+    value: 'peach',
+  },
+  {
+    color: '#fffad2',
+    label: 'Banana 🍌',
+    labelColor: '#555022',
+    value: 'banana',
+  },
+  {
+    color: '#cbffd3',
+    label: 'Kiwi 🥝',
+    labelColor: '#2c4730',
+    value: 'kiwi',
+  },
+];
+
+const favoriteFruit = ref<StatusObject>(fruits[0]);
 </script>
 
 <template>
   <div class="container">
-    <Loader variant="spinner" label="Loading..." />
-    <Loader variant="brand" />
-    <Loader variant="bar" />
+    <!-- Single status badge -->
+    <Status :status="staticFruit" />
+
+    <!-- Dropdown of badges -->
+    <Status v-model="favoriteFruit" :status="fruits" />
+    {{ favoriteFruit }}
   </div>
 </template>
 
 <style scoped>
 .container {
   display: flex;
-  flex-direction: row;
   align-items: center;
   justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  gap: 80px;
+  margin: 30px;
+  gap: 0.5rem;
 }
 </style>

packages/alto/src/components/Status/EditableStatus.stories.ts

@@ -11,9 +11,7 @@ const meta: Meta<typeof Status> = {
     layout: 'centered',
   },
   tags: ['editable', 'editable status', 'status'],
-  args: {
-    editable: true,
-  },
+  args: {},
 };
 
 export const Editable: Story = {

packages/alto/src/components/Status/Status.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineEmits, defineProps, ref } from 'vue';
+import { computed, defineEmits, defineProps, ref } from 'vue';
 import { onClickOutside } from '@vueuse/core';
 import type { StatusObject, StatusProps } from '~/types';
 
@@ -8,6 +8,7 @@ const props = defineProps<StatusProps>();
 const emit = defineEmits(['update:modelValue']);
 
 const showDropdown = ref(false);
+const editable = computed(() => Array.isArray(props.status));
 const list = ref();
 const button = ref();
 

packages/alto/src/components/Status/types.ts

@@ -7,5 +7,4 @@ export interface StatusObject {
 
 export interface StatusProps {
   status: StatusObject | StatusObject[]
-  editable?: boolean
 }