classcard-ui 0.2.666 → 0.2.671

package/src/stories/CBasicTable.stories.js

@@ -1,316 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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",
-};