Merge branch 'feature/update-paragraph' into feature/update

_src /atoms/paragraph/Paragraph.scss

@@ -1,19 +1,19 @@
-@import '../../../assets/styles/_globals.scss';
+// @import '../../../assets/styles/_globals.scss';
 
-$paragraph__margin     : 0 0 $spacer--medium 0 !default;
-$paragraph__color      : $color-secondary !default;
-$paragraph__font-family: $font-family-base !default;
-$paragraph__font-weight: $font-weight-normal !default;
-$paragraph__line-height: $font-line-height !default;
-$paragraph__font-size  : $font-size-base !default;
-$paragraph__transition : none !default;
+// $paragraph__margin     : 0 0 $spacer--medium 0 !default;
+// $paragraph__color      : $color-secondary !default;
+// $paragraph__font-family: $font-family-base !default;
+// $paragraph__font-weight: $font-weight-normal !default;
+// $paragraph__line-height: $font-line-height !default;
+// $paragraph__font-size  : $font-size-base !default;
+// $paragraph__transition : none !default;
 
-.a-paragraph {
-  margin: $paragraph__margin;
-  color: $paragraph__color;
-  font-weight: $paragraph__font-weight;
-  font-size: $paragraph__font-size;
-  font-family: $paragraph__font-family;
-  line-height: $paragraph__line-height;
-  transition: $paragraph__transition;
-}
+// .a-paragraph {
+//   margin: $paragraph__margin;
+//   color: $paragraph__color;
+//   font-weight: $paragraph__font-weight;
+//   font-size: $paragraph__font-size;
+//   font-family: $paragraph__font-family;
+//   line-height: $paragraph__line-height;
+//   transition: $paragraph__transition;
+// }

src/atoms/paragraph/Paragraph.css

@@ -0,0 +1,4 @@
+.a-paragraph {
+  @apply mb-4;
+  @apply text-primary leading-relaxed;
+}

src/atoms/paragraph/Paragraph.html

@@ -0,0 +1,7 @@
+<component
+  :is="tag"
+  class="a-paragraph"
+>
+  <!-- @slot Slot for paragraph content -->
+  <slot />
+</component>

src/atoms/paragraph/Paragraph.js

@@ -0,0 +1,12 @@
+// @vue/component
+export default {
+  props: {
+    /**
+     * To use another tag instead of `p`
+     */
+    tag: {
+      type: String,
+      default: 'p'
+    }
+  }
+}

src/atoms/paragraph/Paragraph.spec.js

@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils'
+import AParagraph from './Paragraph.vue'
+
+describe('Paragraph', () => {
+  it('has default structure', () => {
+    const wrapper = mount(AParagraph)
+
+    expect(wrapper.is('p')).toBe(true)
+    expect(wrapper.classes()).toContain('a-paragraph')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('renders custom root element', () => {
+    const wrapper = mount(AParagraph, {
+      propsData: {
+        tag: 'span'
+      }
+    })
+
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.classes()).toContain('a-paragraph')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('renders slot text when passed', () => {
+    const wrapper = mount(AParagraph, {
+      slots: {
+        default: `
+          <span>Alpaca UI</span>
+        `
+      }
+    })
+    expect(wrapper.find('p span').exists()).toBe(true)
+    expect(wrapper.find('p span').text()).toEqual('Alpaca UI')
+  })
+})

src/atoms/paragraph/Paragraph.stories.js

@@ -0,0 +1,41 @@
+import { text } from '@storybook/addon-knobs'
+
+import AParagraph from './Paragraph.vue'
+
+const sampleParagraphText = 'Velit proident fugiat pariatur irure sint non ut non. Adipisicing aliqua consectetur nisi aliquip velit. Nisi pariatur est consectetur culpa occaecat enim nulla laborum ex. Consectetur incididunt minim cupidatat ad aliquip. Ea non ipsum ut consequat sit adipisicing eiusmod do. Officia incididunt cillum incididunt aliquip sit labore laboris do cillum commodo occaecat voluptate ea aliqua.'
+
+export default {
+  title: 'Atoms/Paragraph',
+  component: AParagraph
+}
+
+export const Default = () => ({
+  components: { AParagraph },
+  props: {
+    textKnob: {
+      default: text('Paragraph text', sampleParagraphText)
+    }
+  },
+  template: `
+    <a-paragraph>
+      {{ textKnob }}
+    </a-paragraph>
+  `
+})
+
+export const CustomTag = () => ({
+  components: { AParagraph },
+  props: {
+    textKnob: {
+      default: text('Paragraph text', sampleParagraphText)
+    },
+    tagKnob: {
+      default: text('Html tag', 'div')
+    }
+  },
+  template: `
+    <a-paragraph :tag="tagKnob">
+      {{ textKnob }}
+    </a-paragraph>
+  `
+})

src/atoms/paragraph/Paragraph.vue

@@ -0,0 +1,13 @@
+<template src="./Paragraph.html" />
+
+<script>
+import AParagraph from './Paragraph.js'
+
+export default {
+  name: 'AlpacaParagraph',
+
+  mixins: [AParagraph]
+}
+</script>
+
+<style lang="css" src="./Paragraph.css" />