feat(button): wip

components/Molecules/Button/Button.stories.js

@@ -0,0 +1,29 @@
+import Button from './Button.twig';
+
+export default {
+  title: 'Design System/Molecules/Button'
+};
+
+export const base = {
+  render: (args) => Button(args),
+  args: {
+    text: 'Button',
+    level: 'primary',
+    href: '#',
+    target: '_self',
+    type: 'button',
+    tag: 'button'
+  },
+
+  argTypes: {
+    text: { control: 'text' },
+    level: {
+      control: 'select',
+      options: ['primary', 'secondary', 'link', 'small']
+    },
+    href: { control: 'text' },
+    target: { control: 'select', options: ['_self', '_blank'] },
+    type: { control: 'select', options: ['button', 'submit', 'reset'] },
+    tag: { control: 'select', options: ['button', 'a'] }
+  }
+};

components/Molecules/Button/Button.twig

@@ -0,0 +1,19 @@
+{% set tag = tag|default('a') %}
+{% set classes = 'Button' %}
+
+{% if level is defined %}
+    {% set classes = classes ~ ' Button--' ~ level %}
+{% endif %}
+
+{% if class is defined %}
+    {% set classes = classes ~ ' ' ~ class %}
+{% endif %}
+
+<{{ tag }}
+  class="{{ classes }}"
+  {% if href is defined %}href="{{ href }}"{% endif %}
+  {% if target is defined %}target="{{ target }}"{% endif %}
+  {% if type is defined and type == 'submit' %}type="submit"{% endif %}
+>
+  {{ text }}
+</{{ tag }}>

components/Molecules/Button/button.css

@@ -0,0 +1,25 @@
+.Button {
+  @apply font-medium;
+
+  &--primary {
+    @apply bg-vermillon-light hover:bg-vermillon-light text-gray-200 rounded-lg shadow-lg p-3;
+  }
+
+  &--secondary {
+    @apply bg-transparent hover:bg-vermillon-light border-vermillon-light border-2 text-gray-200 rounded-lg shadow-lg p-3;
+  }
+
+  &--link {
+    @apply text-vermillon-light;
+  }
+
+  &--small {
+    &-primary {
+      @apply bg-vermillon-light hover:bg-vermillon-light p-4 flex items-center justify-center text-gray-200 rounded-full;
+    }
+
+    &-secondary {
+      @apply flex items-center justify-center w-10 h-10 p-4 font-medium rounded-full bg-grey-medium hover:bg-charcoal-medium hover:text-grey-medium text-charcoal-medium;
+    }
+  }
+}