classcard-ui 0.2.1475 → 0.2.1476

package/src/stories/CCard.stories.js

@@ -1,30 +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'
-};
+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,38 +1,38 @@
-import CCheckbox from "../components/CCheckbox/CCheckbox.vue";
-import "./utils.css";
-
-export default {
-  title: "CCheckbox",
-  component: CCheckbox,
-  argTypes: {
-    label: String,
-    description: String,
-    value: Number,
-    preferredColor: {
-      control: {
-        type: "select",
-        options: ["indigo", "red", "yellow", "purple", "green"],
-      },
-    },
-  },
-};
-
-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,
-  showAvatar: false,
-  avatarNameInitials: "SA",
-  preferredColor: "indigo",
-  onChange() {
-    return;
-  },
-};
+import CCheckbox from "../components/CCheckbox/CCheckbox.vue";
+import "./utils.css";
+
+export default {
+  title: "CCheckbox",
+  component: CCheckbox,
+  argTypes: {
+    label: String,
+    description: String,
+    value: Number,
+    preferredColor: {
+      control: {
+        type: "select",
+        options: ["indigo", "red", "yellow", "purple", "green"],
+      },
+    },
+  },
+};
+
+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,
+  showAvatar: false,
+  avatarNameInitials: "SA",
+  preferredColor: "indigo",
+  onChange() {
+    return;
+  },
+};

package/src/stories/CCircularButton.stories.js

@@ -1,29 +1,29 @@
-import CCircularButton from "../components/CCircularButton/CCircularButton.vue";
-import "./utils.css";
-
-export default {
-  title: "CCircularButton",
-  component: CCircularButton,
-  argTypes: {
-    type: String,
-    icon: Object,
-    disabled: Boolean,
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CCircularButton },
-  template: '<c-circular-button v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  type: "black",
-  icon: {
-    name: "minus-solid",
-    type: "solid",
-    viewBox: "0 0 24 24",
-    class: "h-5 w-5",
-  },
-};
+import CCircularButton from "../components/CCircularButton/CCircularButton.vue";
+import "./utils.css";
+
+export default {
+  title: "CCircularButton",
+  component: CCircularButton,
+  argTypes: {
+    type: String,
+    icon: Object,
+    disabled: Boolean,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CCircularButton },
+  template: '<c-circular-button v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  type: "black",
+  icon: {
+    name: "minus-solid",
+    type: "solid",
+    viewBox: "0 0 24 24",
+    class: "h-5 w-5",
+  },
+};

package/src/stories/CCollapsibleSection.stories.js

@@ -1,29 +1,29 @@
-import CCollapsibleSection from "../components/CCollapsibleSection/CCollapsibleSection.vue";
-import "./utils.css";
-
-export default {
-  title: "CCollapsibleSection",
-  component: CCollapsibleSection,
-  argTypes: {
-    label: String,
-    tabAction: Boolean,
-    buttonLabel: String,
-    customHeaderClass: 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",
-  },
-};
+import CCollapsibleSection from "../components/CCollapsibleSection/CCollapsibleSection.vue";
+import "./utils.css";
+
+export default {
+  title: "CCollapsibleSection",
+  component: CCollapsibleSection,
+  argTypes: {
+    label: String,
+    tabAction: Boolean,
+    buttonLabel: String,
+    customHeaderClass: 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,37 +1,37 @@
-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",
-          "orange",
-        ],
-      },
-    },
-  },
-};
-
-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",
-};
+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",
+          "orange",
+        ],
+      },
+    },
+  },
+};
+
+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",
+};

package/src/stories/CConfirmActionModal.stories.js

@@ -1,60 +1,60 @@
-import { CConfirmActionModal, CButton } from "../components";
-import "./utils.css";
-
-export default {
-  title: "CConfirmActionModal",
-  component: CConfirmActionModal,
-  subcomponents: { CButton },
-  argTypes: {
-    actionOneType: {
-      control: {
-        type: "select",
-        options: [
-          "primary",
-          "secondary",
-          "white",
-          "danger",
-          "success",
-          "tertiary",
-          "secondary-gray",
-          "light-red",
-          "dark-blue",
-        ],
-      },
-    },
-    actionTwoType: {
-      control: {
-        type: "select",
-        options: [
-          "primary",
-          "secondary",
-          "white",
-          "danger",
-          "success",
-          "tertiary",
-          "secondary-gray",
-          "light-red",
-          "dark-blue",
-        ],
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CConfirmActionModal },
-  template: '<c-confirm-action-modal v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  title: "Are you sure?",
-  message: "This action cannot be undone.",
-  actionOneLabel: "Cancel",
-  actionTwoLabel: "Confirm",
-  actionOneType: "white",
-  actionTwoType: "danger",
-  loadButton: false,
-  isTextAreaEnabled: false,
-};
+import { CConfirmActionModal, CButton } from "../components";
+import "./utils.css";
+
+export default {
+  title: "CConfirmActionModal",
+  component: CConfirmActionModal,
+  subcomponents: { CButton },
+  argTypes: {
+    actionOneType: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "secondary",
+          "white",
+          "danger",
+          "success",
+          "tertiary",
+          "secondary-gray",
+          "light-red",
+          "dark-blue",
+        ],
+      },
+    },
+    actionTwoType: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "secondary",
+          "white",
+          "danger",
+          "success",
+          "tertiary",
+          "secondary-gray",
+          "light-red",
+          "dark-blue",
+        ],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CConfirmActionModal },
+  template: '<c-confirm-action-modal v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Are you sure?",
+  message: "This action cannot be undone.",
+  actionOneLabel: "Cancel",
+  actionTwoLabel: "Confirm",
+  actionOneType: "white",
+  actionTwoType: "danger",
+  loadButton: false,
+  isTextAreaEnabled: false,
+};

package/src/stories/CDatepicker.stories.js

@@ -1,31 +1,31 @@
-import CDatepicker from "../components/CDatepicker/CDatepicker.vue";
-import "./utils.css";
-
-export default {
-  title: "CDatepicker",
-  component: CDatepicker,
-  argTypes: {
-    date: String,
-    classes: String,
-    label: String,
-    helpText: String,
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CDatepicker },
-  template: '<c-datepicker v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  // date: "",
-  // classes: "",
-  label: "Date",
-  helpText: "Description",
-  value: new Date(),
-  disabled: false,
-  isExpanded: false,
-  timezone: null,
-};
+import CDatepicker from "../components/CDatepicker/CDatepicker.vue";
+import "./utils.css";
+
+export default {
+  title: "CDatepicker",
+  component: CDatepicker,
+  argTypes: {
+    date: String,
+    classes: String,
+    label: String,
+    helpText: String,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CDatepicker },
+  template: '<c-datepicker v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // date: "",
+  // classes: "",
+  label: "Date",
+  helpText: "Description",
+  value: new Date(),
+  disabled: false,
+  isExpanded: false,
+  timezone: null,
+};

package/src/stories/CDualSelect.stories.js

@@ -1,29 +1,29 @@
-import CDualSelect from "../components/CDualSelect/CDualSelect.vue";
-import CIcon from "../components/CIcon/CIcon.vue";
-import "./utils.css";
-
-export default {
-  title: "CDualSelect",
-  component: CDualSelect,
-  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: { CDualSelect },
-  template: '<c-dual-select v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  firstDropdownOptions: [{ text: "one" }, { text: "two" }],
-  secondDropdownOptions: [{ text: "four" }, { text: "five" }],
-  //   type: 'primary',
-  label: "Button",
-};
+import CDualSelect from "../components/CDualSelect/CDualSelect.vue";
+import CIcon from "../components/CIcon/CIcon.vue";
+import "./utils.css";
+
+export default {
+  title: "CDualSelect",
+  component: CDualSelect,
+  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: { CDualSelect },
+  template: '<c-dual-select v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  firstDropdownOptions: [{ text: "one" }, { text: "two" }],
+  secondDropdownOptions: [{ text: "four" }, { text: "five" }],
+  //   type: 'primary',
+  label: "Button",
+};

package/src/stories/CEditor.stories.js

@@ -1,30 +1,30 @@
-import CEditor from "../components/CEditor/CEditor.vue";
-import "./utils.css";
-
-export default {
-  title: "CEditor",
-  component: CEditor,
-  argTypes: {
-    content: String,
-    label: String,
-    hint: String,
-    helpText: String,
-    toolbarOptions: Array,
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CEditor },
-  template: '<c-editor v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  content: "This is the editor",
-  label: "String",
-  hint: "String",
-  helpText: "String",
-  toolbarOptions: ["bold", "italic"],
-  placeholder: "Please enter your text here...",
-};
+import CEditor from "../components/CEditor/CEditor.vue";
+import "./utils.css";
+
+export default {
+  title: "CEditor",
+  component: CEditor,
+  argTypes: {
+    content: String,
+    label: String,
+    hint: String,
+    helpText: String,
+    toolbarOptions: Array,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CEditor },
+  template: '<c-editor v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  content: "This is the editor",
+  label: "String",
+  hint: "String",
+  helpText: "String",
+  toolbarOptions: ["bold", "italic"],
+  placeholder: "Please enter your text here...",
+};