feat(snippets): convert snippet storybook into vue component snippets

gitsindonesia · Sep 19, 2022 · 3fc7ccb · 3fc7ccb
1 parent e3238c8
commit 3fc7ccb
Show file tree

Hide file tree

Showing 10 changed files with 294 additions and 164 deletions.
diff --git a/packages/ui/src/snippets/CTA/CTA.stories.ts b/packages/ui/src/snippets/CTA/CTA.stories.ts
@@ -0,0 +1,11 @@
+import {Meta, Story} from '@storybook/vue3';
+import Cta from './Cta.vue';
+
+export default {
+  title: 'Snippets/CTA Sections',
+} as Meta;
+
+export const CTASections: Story = () => ({
+  components: {Cta},
+  template: `<Cta />`,
+});
diff --git a/packages/ui/src/snippets/CTA/Cta.vue b/packages/ui/src/snippets/CTA/Cta.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import VBtn from '@gits-id/button';
+</script>
+
+<template>
+  <div class="bg-gray-50">
+    <div
+      class="
+        max-w-7xl
+        mx-auto
+        py-12
+        px-4
+        sm:px-6
+        lg:py-16
+        lg:px-8
+        lg:flex
+        lg:items-center
+        lg:justify-between
+      "
+    >
+      <h2
+        class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
+      >
+        <span class="block">Ready to dive in?</span>
+        <span class="block text-primary-500">Start your free trial today.</span>
+      </h2>
+      <div class="mt-8 flex gap-3 lg:mt-0 lg:flex-shrink-0">
+        <v-btn color="primary" size="lg" shadow> Get started </v-btn>
+        <v-btn color="primary" outlined size="lg" shadow> Learn more </v-btn>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/ui/src/snippets/Contact/Contact.stories.ts b/packages/ui/src/snippets/Contact/Contact.stories.ts
@@ -0,0 +1,11 @@
+import {Meta, Story} from '@storybook/vue3';
+import ContactFormSnippet from './ContactForm.vue';
+
+export default {
+  title: 'Snippets/Contact Form',
+} as Meta;
+
+export const ContactForm: Story = () => ({
+  components: {ContactFormSnippet},
+  template: `<ContactFormSnippet />`,
+});
diff --git a/packages/ui/src/snippets/Contact/ContactForm.vue b/packages/ui/src/snippets/Contact/ContactForm.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import VBtn from '@gits-id/button';
+import {VInput} from '@gits-id/forms';
+import {Icon} from '@gits-id/icon';
+import {object, string} from 'yup';
+import {useForm} from 'vee-validate';
+
+const schema = object({
+  name: string().required().label('Name'),
+  email: string().required().email().label('Email'),
+  phone: string().required().label('Phone'),
+  message: string().required().label('Message'),
+});
+
+const {handleSubmit} = useForm({
+  validationSchema: schema,
+});
+
+const onSubmit = handleSubmit((values) => {
+  alert(JSON.stringify(values));
+});
+</script>
+
+<template>
+  <div class="px-4 xl:px-0 py-5 sm:py-10 bg-primary/10">
+    <div class="container mx-auto">
+      <div class="flex flex-col sm:flex-row gap-10 sm:gap-4">
+        <div class="w-full sm:w-6/12">
+          <h3 class="font-semibold text-3xl mb-1">Product by GITS</h3>
+          <div class="text-gray-500 mb-3 sm:mb-5">
+            Give us a call or drop by anytime, we endeavour to answer all
+            enquiries within 24 hours on business days.
+          </div>
+          <ul class="space-y-3">
+            <li>
+              <a
+                href="#"
+                class="
+                  flex
+                  gap-2
+                  items-center
+                  text-gray-700
+                  hover:text-gray-900
+                "
+              >
+                <div
+                  class="
+                    w-9
+                    h-9
+                    bg-primary
+                    rounded-full
+                    grid
+                    place-items-center
+                  "
+                >
+                  <Icon
+                    name="ri:mail-line"
+                    class="fill-current text-white w-5 h-5"
+                  />
+                </div>
+                [email protected]
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://api.whatsapp.com/send?phone=+628111309991"
+                target="_blank"
+                rel="noopener"
+                class="
+                  flex
+                  gap-2
+                  items-center
+                  text-gray-700
+                  hover:text-gray-900
+                "
+              >
+                <div
+                  class="
+                    w-9
+                    h-9
+                    bg-secondary
+                    rounded-full
+                    grid
+                    place-items-center
+                  "
+                >
+                  <Icon
+                    name="ri:phone-line"
+                    class="fill-current text-white w-5 h-5"
+                  />
+                </div>
+                +62-8111-3099-91
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://gits.id"
+                target="_blank"
+                rel="noopener"
+                class="
+                  flex
+                  gap-2
+                  items-center
+                  text-gray-700
+                  hover:text-gray-900
+                "
+              >
+                <div
+                  class="
+                    w-9
+                    h-9
+                    bg-gray-700
+                    rounded-full
+                    grid
+                    place-items-center
+                  "
+                >
+                  <Icon
+                    name="ri:global-line"
+                    class="fill-current text-white w-5 h-5"
+                  />
+                </div>
+                gits.id
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div class="w-full sm:w-6/12">
+          <div class="space-y-1 mb-5">
+            <h3 class="font-semibold text-gray-800 text-3xl">Contact Us</h3>
+            <p class="text-gray-500">
+              Have question? Submit your question on this form bellow and we'll
+              be in touch.
+            </p>
+          </div>
+
+          <form @submit="onSubmit">
+            <v-input
+              wrapper-class="mb-4"
+              name="name"
+              label="Name"
+              placeholder="Your name"
+            />
+            <v-input
+              wrapper-class="mb-4"
+              name="email"
+              label="Email"
+              placeholder="Your email"
+            />
+            <v-input
+              wrapper-class="mb-4"
+              type="tel"
+              name="phone"
+              label="Phone Number"
+              placeholder="Your phone number"
+            />
+            <v-input
+              wrapper-class="mb-4"
+              name="message"
+              label="Message"
+              placeholder="Your message"
+            />
+            <v-btn type="submit" color="secondary" block>Submit</v-btn>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/ui/src/snippets/ContactForm.stories.ts b/packages/ui/src/snippets/ContactForm.stories.ts
diff --git a/packages/ui/src/snippets/CtaSections.stories.ts b/packages/ui/src/snippets/CtaSections.stories.ts
diff --git a/packages/ui/src/snippets/Feature/Feature.stories.ts b/packages/ui/src/snippets/Feature/Feature.stories.ts
@@ -0,0 +1,13 @@
+import {Meta, Story} from '@storybook/vue3';
+import FeatureSnippet from './Feature.vue';
+
+export default {
+  title: 'Snippets/Feature Sections',
+  argTypes: {},
+  args: {},
+} as Meta;
+
+export const FeatureSections: Story = () => ({
+  components: {FeatureSnippet},
+  template: `<FeatureSnippet />`,
+});