classcard-ui 0.2.1069 → 0.2.1071

package/src/stories/CRadio.stories.js

@@ -1,36 +1,36 @@
-import CRadio from "../components/CRadio/CRadio.vue";
-import "./utils.css";
-
-export default {
-  title: "CRadio",
-  component: CRadio,
-  argTypes: {
-    items: { control: { type: "object" } },
-    selectedOption: String,
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CRadio },
-  template: '<c-radio v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  items: [
-    {
-      text: "Public access",
-      description: "This project would be available to anyone who has the link",
-      value: "value1",
-    },
-    {
-      text: "Private to Project Members",
-      description: "Only members of this project would be able to access",
-      value: "value2",
-    },
-  ],
-  selectedOption: "value1",
-  isDisabled: false,
-  name: "radio"
-};
+import CRadio from "../components/CRadio/CRadio.vue";
+import "./utils.css";
+
+export default {
+  title: "CRadio",
+  component: CRadio,
+  argTypes: {
+    items: { control: { type: "object" } },
+    selectedOption: String,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CRadio },
+  template: '<c-radio v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    {
+      text: "Public access",
+      description: "This project would be available to anyone who has the link",
+      value: "value1",
+    },
+    {
+      text: "Private to Project Members",
+      description: "Only members of this project would be able to access",
+      value: "value2",
+    },
+  ],
+  selectedOption: "value1",
+  isDisabled: false,
+  name: "radio"
+};

package/src/stories/CRangeSlider.stories.js

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

package/src/stories/CReorderableStackedList.stories.js

@@ -1,23 +1,23 @@
-import CReorderableStackedList from '../components/CReorderableStackedList/CReorderableStackedList.vue';
-import './utils.css'
-
-export default {
-  title: 'CReorderableStackedList',
-  component: CReorderableStackedList,
-  argTypes: {
-    listItems: { control: { type: "object" } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CReorderableStackedList },
-  template: '<c-reorderable-stacked-list v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-    listItems: [
-        { 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:true, collapse:false, listIcon: true, reorder:true, imageClasses: "bg-gray-200 border-gray-200 border" },
-      ],
-};
+import CReorderableStackedList from '../components/CReorderableStackedList/CReorderableStackedList.vue';
+import './utils.css'
+
+export default {
+  title: 'CReorderableStackedList',
+  component: CReorderableStackedList,
+  argTypes: {
+    listItems: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CReorderableStackedList },
+  template: '<c-reorderable-stacked-list v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    listItems: [
+        { 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:true, collapse:false, listIcon: true, reorder:true, imageClasses: "bg-gray-200 border-gray-200 border" },
+      ],
+};

package/src/stories/CSelect.stories.js

@@ -1,109 +1,109 @@
-import CSelect from "../components/CSelect/CSelect.vue";
-import "./utils.css";
-
-export default {
-  title: "CSelect",
-  component: CSelect,
-  argTypes: {
-    label: String,
-    placeholder: String,
-    helpText: String,
-    hint: String,
-    showImage: Boolean,
-    addAction: Object,
-    icon: Object,
-    options: { control: { type: "object" } },
-    type: String,
-    value: String,
-    dropdownClass: String,
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CSelect },
-  template: '<c-select v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  label: "Name",
-  placeholder: "Enter your name",
-  helpText: "This information is displayed on booking page",
-  hint: "Optional",
-  showImage: true,
-  value: null,
-  renderOptionName: "code",
-  options: [
-    {
-      code: "one ",
-      value: "onee2",
-      id: "s_1",
-    },
-    {
-      id: "0000550438",
-      initials: "DB",
-      photo: "https://cdn.filestackcontent.com/LP3yl3gdRJG9C0ARNFhR",
-      code: "David Beckham",
-      showImage: true,
-    },
-    {
-      code: "Krishna david beckham This information is displayed on booking page",
-      value: "onee4",
-      photo:
-        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
-      showImage: true,
-      id: "s_2",
-    },
-    { code: "one2", value: "onee1", id: "s_3" },
-    { code: "one3", value: "onee5", id: "s_4" },
-    { code: "one4", value: "onee12", id: "s_5" },
-    {
-      code: "one5",
-      value: "onee3425",
-      photo:
-        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
-      showImage: true,
-      id: "s_6",
-    },
-    {
-      code: "one6",
-      value: "onee67",
-      photo:
-        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
-      showImage: true,
-      id: "s_7",
-    },
-    { code: "one7", value: "onee78", id: "s_8" },
-    { code: "one8", value: "onee89", id: "s_9" },
-    {
-      code: "one9",
-      value: "onee90",
-      photo:
-        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
-      showImage: true,
-      id: "s_10",
-    },
-    { code: "one0", value: "onee54", id: "s_11" },
-    { code: "one34", value: "onee43", id: "s_12" },
-    { code: "one23", value: "onee32", id: "s_13" },
-    {
-      code: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but als",
-      value: "onee33",
-      photo:
-        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
-      showImage: true,
-      id: "s_14",
-    },
-    { code: "two", value: "twoo", isDisabled: true, id: "s_15" },
-  ],
-  addAction: {
-    label: "Add new",
-  },
-  icon: {
-    name: "bookmark",
-    type: "solid",
-    class: "h-5 w-5",
-  },
-  isDisabled: false,
-};
+import CSelect from "../components/CSelect/CSelect.vue";
+import "./utils.css";
+
+export default {
+  title: "CSelect",
+  component: CSelect,
+  argTypes: {
+    label: String,
+    placeholder: String,
+    helpText: String,
+    hint: String,
+    showImage: Boolean,
+    addAction: Object,
+    icon: Object,
+    options: { control: { type: "object" } },
+    type: String,
+    value: String,
+    dropdownClass: String,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CSelect },
+  template: '<c-select v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Name",
+  placeholder: "Enter your name",
+  helpText: "This information is displayed on booking page",
+  hint: "Optional",
+  showImage: true,
+  value: null,
+  renderOptionName: "code",
+  options: [
+    {
+      code: "one ",
+      value: "onee2",
+      id: "s_1",
+    },
+    {
+      id: "0000550438",
+      initials: "DB",
+      photo: "https://cdn.filestackcontent.com/LP3yl3gdRJG9C0ARNFhR",
+      code: "David Beckham",
+      showImage: true,
+    },
+    {
+      code: "Krishna david beckham This information is displayed on booking page",
+      value: "onee4",
+      photo:
+        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
+      showImage: true,
+      id: "s_2",
+    },
+    { code: "one2", value: "onee1", id: "s_3" },
+    { code: "one3", value: "onee5", id: "s_4" },
+    { code: "one4", value: "onee12", id: "s_5" },
+    {
+      code: "one5",
+      value: "onee3425",
+      photo:
+        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
+      showImage: true,
+      id: "s_6",
+    },
+    {
+      code: "one6",
+      value: "onee67",
+      photo:
+        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
+      showImage: true,
+      id: "s_7",
+    },
+    { code: "one7", value: "onee78", id: "s_8" },
+    { code: "one8", value: "onee89", id: "s_9" },
+    {
+      code: "one9",
+      value: "onee90",
+      photo:
+        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
+      showImage: true,
+      id: "s_10",
+    },
+    { code: "one0", value: "onee54", id: "s_11" },
+    { code: "one34", value: "onee43", id: "s_12" },
+    { code: "one23", value: "onee32", id: "s_13" },
+    {
+      code: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but als",
+      value: "onee33",
+      photo:
+        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
+      showImage: true,
+      id: "s_14",
+    },
+    { code: "two", value: "twoo", isDisabled: true, id: "s_15" },
+  ],
+  addAction: {
+    label: "Add new",
+  },
+  icon: {
+    name: "bookmark",
+    type: "solid",
+    class: "h-5 w-5",
+  },
+  isDisabled: false,
+};

package/src/stories/CSmallTimeline.stories.js

@@ -1,26 +1,26 @@
-import CSmallTimeline from "../components/CSmallTimeline/CSmallTimeline.vue";
-import "./utils.css";
-
-export default {
-  title: "CSmallTimeline",
-  component: CSmallTimeline,
-  argTypes: {
-    timelineItems: { control: { type: "object" } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CSmallTimeline },
-  template: '<c-small-timeline v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-    timelineItems: [
-    { label: "Invoiced" },
-    { label: "Partially paid"},
-    { label: "Paid"},
-    { label: "Overdue"},
-  ],
-};
+import CSmallTimeline from "../components/CSmallTimeline/CSmallTimeline.vue";
+import "./utils.css";
+
+export default {
+  title: "CSmallTimeline",
+  component: CSmallTimeline,
+  argTypes: {
+    timelineItems: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CSmallTimeline },
+  template: '<c-small-timeline v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    timelineItems: [
+    { label: "Invoiced" },
+    { label: "Partially paid"},
+    { label: "Paid"},
+    { label: "Overdue"},
+  ],
+};

package/src/stories/CStackedList.stories.js

@@ -1,37 +1,37 @@
-import CStackedList from "../components/CStackedList/CStackedList.vue";
-import "./utils.css";
-
-export default {
-  title: "CStackedList",
-  component: CStackedList,
-  argTypes: {
-    listItems: { control: { type: "object" } },
-    divider: Boolean,
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CStackedList },
-  template: '<c-stacked-list v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  listItems: [
-    {
-      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",
-      tagLabel: "test",
-      tagColor: "green",
-      description: "calvin.hawkins@example.com",
-      size: "medium",
-      rounded: false,
-      tag: true,
-      collapse: true,
-      listIcon: true,
-    },
-  ],
-  divider: true,
-};
+import CStackedList from "../components/CStackedList/CStackedList.vue";
+import "./utils.css";
+
+export default {
+  title: "CStackedList",
+  component: CStackedList,
+  argTypes: {
+    listItems: { control: { type: "object" } },
+    divider: Boolean,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CStackedList },
+  template: '<c-stacked-list v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  listItems: [
+    {
+      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",
+      tagLabel: "test",
+      tagColor: "green",
+      description: "calvin.hawkins@example.com",
+      size: "medium",
+      rounded: false,
+      tag: true,
+      collapse: true,
+      listIcon: true,
+    },
+  ],
+  divider: true,
+};

package/src/stories/CStats.stories.js

@@ -1,33 +1,33 @@
-import CStats from "../components/CStats/CStats.vue";
-import "./utils.css";
-
-export default {
-  title: "CStats",
-  component: CStats,
-  argTypes: {
-    statsCount: { control: { type: "object" } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CStats },
-  template: '<c-stats v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  statsCount: [
-    {
-      label: "Invoiced",
-      totalCount: "$52145",
-      number: 4,
-      icon: { name: "check", type: "solid", class: "h-5 w-5" },
-      tag: { label: "+10", color: "green" },
-      days: "Last 7 days",
-    },
-    { label: "Partially paid", totalCount: "$66145", number: 2 },
-    { label: "Paid", totalCount: "$88845", number: 4 },
-    // { label: "Overdue", totalCount: "$14545", number: 2 },
-  ],
-};
+import CStats from "../components/CStats/CStats.vue";
+import "./utils.css";
+
+export default {
+  title: "CStats",
+  component: CStats,
+  argTypes: {
+    statsCount: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CStats },
+  template: '<c-stats v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  statsCount: [
+    {
+      label: "Invoiced",
+      totalCount: "$52145",
+      number: 4,
+      icon: { name: "check", type: "solid", class: "h-5 w-5" },
+      tag: { label: "+10", color: "green" },
+      days: "Last 7 days",
+    },
+    { label: "Partially paid", totalCount: "$66145", number: 2 },
+    { label: "Paid", totalCount: "$88845", number: 4 },
+    // { label: "Overdue", totalCount: "$14545", number: 2 },
+  ],
+};

package/src/stories/CSwitch.stories.js

@@ -1,28 +1,28 @@
-import CSwitch from "../components/CSwitch/CSwitch.vue";
-import "./utils.css";
-
-export default {
-  title: "CSwitch",
-  component: CSwitch,
-  argTypes: {
-    label: String,
-    description: String,
-    classes: String,
-    value: Boolean,
-    disabled: Boolean,
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CSwitch },
-  template: '<c-switch v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  label: "Name",
-  description: "Nulla amet tempus sit accumsan. Aliquet turpis sed sit lacinia.",
-  value: 1,
-  direction: "left",
-};
+import CSwitch from "../components/CSwitch/CSwitch.vue";
+import "./utils.css";
+
+export default {
+  title: "CSwitch",
+  component: CSwitch,
+  argTypes: {
+    label: String,
+    description: String,
+    classes: String,
+    value: Boolean,
+    disabled: Boolean,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CSwitch },
+  template: '<c-switch v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Name",
+  description: "Nulla amet tempus sit accumsan. Aliquet turpis sed sit lacinia.",
+  value: 1,
+  direction: "left",
+};