Merge pull request #9 from fnune/buttons

Implement an MVP for primary and secondary buttons

.storybook/config.js

@@ -1,5 +1,6 @@
 import { configure } from '@storybook/html'
 
 import '../scss/janina.scss'
+import '../stories/theme.scss'
 
 configure(require.context('../stories', true, /\.stories\.ts/), module)

scss/elements/_all.scss

@@ -1 +1,3 @@
 @charset "utf-8";
+
+@import 'button';

scss/elements/button.scss

@@ -0,0 +1,68 @@
+@use '../base/palette';
+
+$primary: $blue;
+$primary-tint: $blue-tint;
+$primary-shade: $blue-shade;
+
+.button {
+  display: inline-block;
+
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+
+  height: 40px;
+  line-height: 40px;
+  font-size: 15px;
+  padding: 0 14px;
+  border: none;
+
+  border-radius: 4px;
+  letter-spacing: 0.04em;
+  font-weight: bold;
+
+  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+
+  transform: translateY(0);
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 18px rgba(50, 50, 93, 0.1), 0 4px 6px rgba(0, 0, 0, 0.08);
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+
+  &.primary {
+    color: $white;
+    text-shadow: 0 1px 3px rgba($primary-shade, 0.4);
+
+    background: linear-gradient(60deg, $primary-shade 0%, $primary 50%, $primary-tint 100%);
+    background-size: 200% 40px;
+    background-position: 0 0;
+
+    &:hover {
+      background-position: 100% -100%;
+    }
+
+    &:active {
+      color: $light-tint;
+    }
+  }
+
+  &.secondary {
+    color: $primary;
+    text-shadow: 0 1px 6px rgba($primary-tint, 0.4);
+    background-color: $white;
+
+    &:hover {
+      color: $primary-tint;
+    }
+
+    &:active {
+      color: $primary-shade;
+    }
+  }
+}

stories/button.stories.scss

@@ -0,0 +1,11 @@
+.buttons {
+  display: flex;
+  height: 80vh;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+
+  > * + * {
+    margin-left: 24px;
+  }
+}

stories/button.stories.ts

@@ -0,0 +1,12 @@
+import './button.stories.scss'
+
+export default {
+  title: 'Button',
+}
+
+export const button = () => `
+  <div class="buttons">
+    <button class="button primary">Make a reservation</button>
+    <button class="button secondary">Find more hotels</button>
+  </div>
+`

stories/theme.scss

@@ -0,0 +1,3 @@
+html {
+  font-family: 'Inter', sans-serif;
+}