classcard-ui 0.2.671 → 0.2.689

package/src/stories/CBasicTable.stories.js

@@ -0,0 +1,316 @@
+import CBasicTable from "../components/CBasicTable/CBasicTable.vue";
+import "./utils.css";
+
+export default {
+  title: "CBasicTable",
+  component: CBasicTable,
+  argTypes: {
+    columnData: { control: { type: "object" } },
+    rowRecords: { type: Array },
+    enableSelection: Boolean,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CBasicTable },
+  template: '<c-basic-table v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  enableSelection: true,
+  selectedRow: false,
+  disabledRow: true,
+  columnData: ["Name", "Amount", "Title", "Role", "", "", "", ""],
+  rowRecords: [
+    [
+      { isSelected: { value: true } },
+      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
+      { record: { value: "$200000", description: "huewhfuewhfehf" } },
+      {
+        linkLabel: { label: "Regional Paradigm Technician" },
+      },
+      // {
+      //   secondary: { label: "jane.cooper@example.com" },
+      // },
+      {
+        icon: { name: "download", type: "outline", class: "h-5 w-5" },
+      },
+      {
+        tag: { color: "red", label: "Edit" },
+      },
+      {
+        switch: { value: true },
+      },
+      // {
+      //   colorText: { value: "Sessions", class: "text-red-600" },
+      // },
+      {
+        avatar: {
+          image:
+            "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+          size: "small",
+          rounded: true,
+          name: "Alkama",
+          description: "Online Booking",
+        },
+      },
+    ],
+    [
+      { isSelected: { value: true } },
+      { record: { value: "Arthur Cooper", description: "huewhfuewhfehf" } },
+      { record: { value: "$563210", description: "huewhfuewhfehf" } },
+      {
+        linkLabel: { label: "Regional Paradigm Officer" },
+      },
+      // {
+      //   secondary: { label: "arthur.cooper@example.com" },
+      // },
+      {
+        icon: { name: "download", type: "outline", class: "h-5 w-5" },
+      },
+      {
+        tag: { color: "red", label: "Omit" },
+      },
+      {
+        switch: {},
+      },
+      {
+        avatar: {
+          image:
+            "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+          size: "small",
+          rounded: true,
+          name: "Alkama",
+          description: "Online Booking",
+        },
+      },
+      // {
+      //   selectpicker: {
+      //     placeholder: "Select country",
+      //     dropdownClass: "w-full",
+      //     options: [{ option: "one" }, { option: "two" }],
+      //   },
+      // },
+      // {
+      //   stackedList: {
+      //     items: [
+      //       {
+      //         image:
+      //           "https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80",
+      //         heading: "Maths-Level1",
+      //         description: "calvin.hawkins@example.com",
+      //         size: "medium",
+      //         rounded: false,
+      //         tag: false,
+      //         collapse: false,
+      //         listIcon: true,
+      //       },
+      //     ],
+      //   },
+      // },
+      // {
+      //   colorText: { value: "Sessions", class: "text-red-600" },
+      // },
+    ],
+    [
+      { isSelected: { value: true } },
+      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
+      { record: { value: "$200000", description: "huewhfuewhfehf" } },
+      {
+        linkLabel: { label: "Regional Paradigm Technician" },
+      },
+      // {
+      //   secondary: { label: "jane.cooper@example.com" },
+      // },
+      {
+        icon: { name: "download", type: "outline", class: "h-5 w-5" },
+      },
+      {
+        tag: { color: "red", label: "Edit" },
+      },
+      {
+        switch: { value: true },
+      },
+      // {
+      //   colorText: { value: "Sessions", class: "text-red-600" },
+      // },
+      {
+        avatar: {
+          image:
+            "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+          size: "small",
+          rounded: true,
+          name: "Alkama",
+          description: "Online Booking",
+        },
+      },
+    ],
+    [
+      { isSelected: { value: true } },
+      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
+      { record: { value: "$200000", description: "huewhfuewhfehf" } },
+      {
+        linkLabel: { label: "Regional Paradigm Technician" },
+      },
+      // {
+      //   secondary: { label: "jane.cooper@example.com" },
+      // },
+      {
+        icon: { name: "download", type: "outline", class: "h-5 w-5" },
+      },
+      {
+        tag: { color: "red", label: "Edit" },
+      },
+      {
+        switch: { value: true },
+      },
+      // {
+      //   colorText: { value: "Sessions", class: "text-red-600" },
+      // },
+      {
+        avatar: {
+          image:
+            "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+          size: "small",
+          rounded: true,
+          name: "Alkama",
+          description: "Online Booking",
+        },
+      },
+    ],
+    [
+      { isSelected: { value: true } },
+      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
+      { record: { value: "$200000", description: "huewhfuewhfehf" } },
+      {
+        linkLabel: { label: "Regional Paradigm Technician" },
+      },
+      // {
+      //   secondary: { label: "jane.cooper@example.com" },
+      // },
+      {
+        icon: { name: "download", type: "outline", class: "h-5 w-5" },
+      },
+      {
+        tag: { color: "red", label: "Edit" },
+      },
+      {
+        switch: { value: true },
+      },
+      // {
+      //   colorText: { value: "Sessions", class: "text-red-600" },
+      // },
+      {
+        avatar: {
+          image:
+            "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+          size: "small",
+          rounded: true,
+          name: "Alkama",
+          description: "Online Booking",
+        },
+      },
+    ],
+    [
+      { isSelected: { value: true } },
+      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
+      { record: { value: "$200000", description: "huewhfuewhfehf" } },
+      {
+        linkLabel: { label: "Regional Paradigm Technician" },
+      },
+      // {
+      //   secondary: { label: "jane.cooper@example.com" },
+      // },
+      {
+        icon: { name: "download", type: "outline", class: "h-5 w-5" },
+      },
+      {
+        tag: { color: "red", label: "Edit" },
+      },
+      {
+        switch: { value: true },
+      },
+      // {
+      //   colorText: { value: "Sessions", class: "text-red-600" },
+      // },
+      {
+        avatar: {
+          image:
+            "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+          size: "small",
+          rounded: true,
+          name: "Alkama",
+          description: "Online Booking",
+        },
+      },
+    ],
+    [
+      { isSelected: { value: true } },
+      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
+      { record: { value: "$200000", description: "huewhfuewhfehf" } },
+      {
+        linkLabel: { label: "Regional Paradigm Technician" },
+      },
+      // {
+      //   secondary: { label: "jane.cooper@example.com" },
+      // },
+      {
+        icon: { name: "download", type: "outline", class: "h-5 w-5" },
+      },
+      {
+        tag: { color: "red", label: "Edit" },
+      },
+      {
+        switch: { value: true },
+      },
+      // {
+      //   colorText: { value: "Sessions", class: "text-red-600" },
+      // },
+      {
+        avatar: {
+          image:
+            "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+          size: "small",
+          rounded: true,
+          name: "Alkama",
+          description: "Online Booking",
+        },
+      },
+    ],
+    [
+      { isSelected: { value: true } },
+      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
+      { record: { value: "$200000", description: "huewhfuewhfehf" } },
+      {
+        linkLabel: { label: "Regional Paradigm Technician" },
+      },
+      // {
+      //   secondary: { label: "jane.cooper@example.com" },
+      // },
+      {
+        icon: { name: "download", type: "outline", class: "h-5 w-5" },
+      },
+      {
+        tag: { color: "red", label: "Edit" },
+      },
+      {
+        switch: { value: true },
+      },
+      // {
+      //   colorText: { value: "Sessions", class: "text-red-600" },
+      // },
+      {
+        avatar: {
+          image:
+            "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+          size: "small",
+          rounded: true,
+          name: "Alkama",
+          description: "Online Booking",
+        },
+      },
+    ],
+  ],
+};

package/src/stories/CBreadcrumbs.stories.js

@@ -0,0 +1,24 @@
+import CBreadcrumbs from "../components/CBreadcrumbs/CBreadcrumbs.vue";
+import "./utils.css";
+
+export default {
+  title: "CBreadcrumbs",
+  component: CBreadcrumbs,
+  argTypes: {
+    navObject: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CBreadcrumbs },
+  template: '<c-breadcrumbs v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  navObject: [
+    { href: "#", label: "Students" },
+    { href: "#", label: "Alkama" },
+  ],
+};

package/src/stories/CButton.stories.js

@@ -0,0 +1,46 @@
+import CButton from "../components/CButton/CButton.vue";
+import "./utils.css";
+
+export default {
+  title: "CButton",
+  component: CButton,
+  argTypes: {
+    type: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "secondary",
+          "white",
+          "danger",
+          "success",
+          "tertiary",
+          "secondary-gray",
+          "light-red",
+          "dark-blue",
+          "secondary-success"
+        ],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CButton },
+  template: '<c-button @onClick="onClick" v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  isLoading: false,
+  label: "Button",
+  type: "primary",
+  icon: {
+    name: "check",
+    type: "solid",
+    class: "h-5 w-5",
+    viewBox: "0 0 24 24"
+  },
+  customClasses: "",
+};

package/src/stories/CButtonGroup.stories.js

@@ -0,0 +1,33 @@
+import CButtonGroup from "../components/CButtonGroup/CButtonGroup.vue";
+import "./utils.css";
+
+export default {
+  title: "CButtonGroup",
+  component: CButtonGroup,
+  argTypes: {
+    buttonObject: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CButtonGroup },
+  template: '<c-button-group v-bind="$props" />',
+});
+
+const consoleIt = () => {
+  console.log("onclick fired")
+}
+
+const consoleOut = () => {
+  console.log("focus lost")
+}
+
+export const Default = Template.bind({});
+Default.args = {
+  buttonObject: [
+    { icon: "bookmark", label: "Students", value:'students', onClickAction: consoleIt, blurAction: consoleOut },
+    { icon: "chat", label: "Alkama", value:'alkama'},
+    { icon: "bookmark", label: "Attendance", value:'attendance' },
+  ],
+};

package/src/stories/CButtonIcon.stories.js

@@ -0,0 +1,27 @@
+import CButtonIcon from '../components/CButtonIcon/CButtonIcon.vue';
+import './utils.css'
+
+export default {
+  title: 'CButtonIcon',
+  component: CButtonIcon,
+  argTypes: {
+    type: { control: { type: 'select', options: ['primary', 'secondary', 'white', 'danger', 'success', 'tertiary', 'secondary-gray', 'rounded-hover'] } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CButtonIcon },
+  template: '<c-button-icon @onClick="onClick" v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  isLoading: false,
+  type: 'primary',
+  icon: {
+    name: 'check',
+    type: 'solid',
+    class: 'h-5 w-5'
+  }
+};

package/src/stories/CButtonLink.stories.js

@@ -0,0 +1,24 @@
+import CButtonLink from "../components/CButtonLink/CButtonLink.vue";
+import "./utils.css";
+
+export default {
+  title: "CButtonLink",
+  component: CButtonLink,
+  argTypes: {
+    label: String,
+    image: String,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CButtonLink },
+  template: '<c-button-link v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  isLoading: false,
+  label: "Button",
+  image: null,
+};

package/src/stories/CButtonSelect.stories.js

@@ -0,0 +1,32 @@
+import CButtonSelect from "../components/CButtonSelect/CButtonSelect.vue";
+import CIcon from "../components/CIcon/CIcon.vue";
+import "./utils.css";
+
+export default {
+  title: "CButtonSelect",
+  component: CButtonSelect,
+  subcomponents: { CIcon },
+  argTypes: {
+    type: {
+      control: { type: "select", options: ["primary", "secondary", "success", "danger"] },
+    },
+    items: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CButtonSelect },
+  template: '<c-button-select v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    { icon: "check", text: "one", action: "first", iconType: "solid" },
+    { icon: "check", text: "two", action: "second", iconType: "solid" },
+  ],
+  type: "primary",
+  label: "Button",
+  isLoading: false,
+};

package/src/stories/CButtonWithDropdown.stories.js

@@ -0,0 +1,41 @@
+import CButtonWithDropdown from "../components/CButtonWithDropdown/CButtonWithDropdown.vue";
+import CIcon from "../components/CIcon/CIcon.vue";
+import "./utils.css";
+
+export default {
+  title: "CButtonWithDropdown",
+  component: CButtonWithDropdown,
+  subcomponents: { CIcon },
+  argTypes: {
+    type: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "secondary",
+          "success",
+          "danger",
+          "light-green",
+          "light-red",
+        ],
+      },
+    },
+    items: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CButtonWithDropdown },
+  template: '<c-button-with-dropdown v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    { text: "one", value: "one" },
+    { text: "two", value: "two" },
+  ],
+  //   type: 'primary',
+  label: "Button",
+};

package/src/stories/CCalendar.stories.js

@@ -0,0 +1,16 @@
+import { CCalendar } from "../components";
+import "./utils.css";
+
+export default {
+  title: "CCalendar",
+  component: CCalendar,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CCalendar },
+  template: '<c-calendar v-bind="$props" />',
+});
+
+export const Default = Template.bind({});

package/src/stories/CCard.stories.js

@@ -0,0 +1,30 @@
+import CCard from "../components/CCard/CCard.vue";
+import "./utils.css";
+
+export default {
+  title: "CCard",
+  component: CCard,
+  argTypes: {
+    image: Object,
+    name: String,
+    description: String
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CCard },
+  template: '<c-card v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  image: {
+    size: "small",
+    rounded: false,
+    image:
+    "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=ukDMP4XEnx&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+  },
+  name: "Alkama",
+  description: 'Video'
+};

package/src/stories/CCheckbox.stories.js

@@ -0,0 +1,29 @@
+import CCheckbox from "../components/CCheckbox/CCheckbox.vue";
+import "./utils.css";
+
+export default {
+  title: "CCheckbox",
+  component: CCheckbox,
+  argTypes: {
+    label: String,
+    description: String,
+    value: Number,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CCheckbox },
+  template: '<c-checkbox @onChange="onChange" v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Includes",
+  description: "Add subjects to include them in the package",
+  value: 1,
+  isDisabled: false,
+  onChange() {
+    return;
+  },
+};

package/src/stories/CCollapsibleSection.stories.js

@@ -0,0 +1,28 @@
+import CCollapsibleSection from '../components/CCollapsibleSection/CCollapsibleSection.vue';
+import './utils.css'
+
+export default {
+  title: 'CCollapsibleSection',
+  component: CCollapsibleSection,
+  argTypes: {
+    label: String,
+    tabAction:Boolean,
+    buttonLabel:String,
+    tabLink: { control: { type: "object" } }
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CCollapsibleSection },
+  template: '<c-collapsible-section v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Details',
+  tabAction: false,
+  tabLink: {
+    label: 'Edit'
+  }
+};

package/src/stories/CColorDots.stories.js

@@ -0,0 +1,28 @@
+import CColorDots from "../components/CColorDots/CColorDots.vue";
+import "./utils.css";
+
+export default {
+  title: "CColorDots",
+  component: CColorDots,
+  argTypes: {
+    label: String,
+    color: {
+      control: {
+        type: "select",
+        options: ["gray", "red", "yellow", "green", "indigo", "purple", "pink"],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CColorDots },
+  template: '<c-color-dots v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Active",
+  color: "green",
+};