classcard-ui 0.2.896 → 0.2.897

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.896",
+  "version": "0.2.897",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CInsetTabs/CInsetTabs.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <nav
+      class="group flex rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
+      aria-label="Tabs"
+    >
+      <button
+        v-for="(tabOption, index) in tabOptions"
+        :key="tabOption.label"
+        x-ref="dates"
+        class="focus:outline-none flex min-w-0 flex-grow rounded-md focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100"
+        :tabindex="currentTab === tabOption.label ? '0' : '-1'"
+        @keydown.arrow-left="
+          $emit(
+            'update-tab',
+            index === 0 ? tabOption.label : tabOptions[index - 1].label
+          )
+        "
+        @keydown.arrow-right="
+          $emit(
+            'update-tab',
+            index === 0
+              ? tabOptions.find((tab) => tab.label !== tabOption.label).label
+              : tabOptions[index - 1].label
+          )
+        "
+        @click="$emit('update-tab', tabOption.label)"
+      >
+        <span
+          x-show="true"
+          class="flex min-w-0 flex-grow items-center justify-center space-x-2 rounded-md p-1.5 text-sm font-medium lg:pl-2.5 lg:pr-3.5"
+          :class="
+            currentTab === tabOption.label
+              ? 'ring-black bg-white shadow-sm ring-1 ring-opacity-5'
+              : ''
+          "
+        >
+          <c-icon
+            :type="tabOption.icon.type"
+            :class="
+              currentTab === tabOption.label
+                ? 'text-indigo-700'
+                : 'text-gray-400'
+            "
+            class="h-5 w-5"
+            :name="tabOption.icon.name"
+            :viewBox="tabOption.icon.viewBox"
+          ></c-icon>
+          <span
+            :class="`${
+              currentTab === tabOption.label
+                ? 'text-gray-900'
+                : 'text-gray-600 group-hover:text-gray-900'
+            } `"
+            >{{ tabOption.label }}</span
+          >
+        </span>
+      </button>
+    </nav>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+
+export default {
+  name: "CInsetTabs",
+  components: {
+    CIcon,
+  },
+  props: {
+    currentTab: {
+      type: String,
+    },
+    tabOptions: {
+      type: Array,
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/stories/CInsetTabs.stories.js

@@ -0,0 +1,38 @@
+import CInsetTabs from "../components/CInsetTabs/CInsetTabs.vue";
+
+export default {
+  title: "CInsetTabs",
+  components: CInsetTabs,
+  argTypes: {
+    currentTab: String,
+    tabOptions: Array,
+  },
+};
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CInsetTabs },
+  template: '<c-the-tabs v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  currentTab: "Dates",
+  tabOptions: [
+    {
+      label: "Dates",
+      icon: {
+        type: "solid",
+        name: "calendar-solid",
+        viewBox: "0 0 20 20",
+      },
+    },
+    {
+      label: "Days",
+      icon: {
+        type: "solid",
+        name: "calendar-solid",
+        viewBox: "0 0 20 20",
+      },
+    },
+  ],
+};