update paragraph stories, reorganize classes, switch to css

src/atoms/paragraph/Paragraph.css

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

src/atoms/paragraph/Paragraph.stories.js

@@ -1,38 +1,41 @@
-import { storiesOf } from '@storybook/vue'
 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.'
 
-storiesOf('Atoms/Paragraph', module)
-  .addParameters({ info: true })
-  .add('Default', () => ({
-    components: { AParagraph },
-    props: {
-      textKnob: {
-        default: text('Paragraph text', sampleParagraphText)
-      }
-    },
-    template: `
-      <a-paragraph>
-        {{ textKnob }}
-      </a-paragraph>
-    `
-  }))
-  .add('Custom tag', () => ({
-    components: { AParagraph },
-    props: {
-      textKnob: {
-        default: text('Paragraph text', sampleParagraphText)
-      },
-      tagKnob: {
-        default: text('Html tag', 'div')
-      }
+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)
     },
-    template: `
-      <a-paragraph :tag="tagKnob">
-        {{ textKnob }}
-      </a-paragraph>
-    `
-  }))
+    tagKnob: {
+      default: text('Html tag', 'div')
+    }
+  },
+  template: `
+    <a-paragraph :tag="tagKnob">
+      {{ textKnob }}
+    </a-paragraph>
+  `
+})

src/atoms/paragraph/Paragraph.vue

@@ -10,4 +10,4 @@ export default {
 }
 </script>
 
-<style lang="scss" src="./Paragraph.scss" />
+<style lang="css" src="./Paragraph.css" />