digitalpolygon · shayaanmiyy · Jul 1, 2024 · Jul 2, 2024 · Jul 4, 2024 · Jul 4, 2024
@@ -41,6 +41,12 @@ const config = {
   },
   staticDirs: ['../assets'],
   webpackFinal: async (config) => {
+    config.watchOptions = {
+      aggregateTimeout: 300,
+      poll: 1000,
+      ignored: /node_modules/,
+    };
+
     config.module.rules.push({
       test: /\.twig$/,
       use: [

@@ -0,0 +1,49 @@
+@use "../../scss/_variables/index.scss" as var;
+
+button {
+	@include var.transition-properties((background-color, box-shadow, color), 0.2s);
+	background-color: transparent;
+	border: 0;
+	border-radius: 0;
+	box-shadow: inset 0 0 0 2px var.$white;
+	color: var.$white;
+	cursor: pointer;
+	display: inline-block;
+	font-size: 0.8em;
+	font-weight: 600;
+	height: 3.5em;
+	letter-spacing: 0.25em;
+	line-height: 3.5em;
+	padding: 0 1.75em;
+	text-align: center;
+	text-decoration: none;
+	text-transform: uppercase;
+	white-space: nowrap;
+
+	svg {
+		filter: brightness(10);
+	}
+
+	&:hover {
+		opacity: 1;
+		box-shadow: inset 0 0 0 2px var.$anakiwa;
+		color: var.$anakiwa;
+
+		svg {
+			filter: unset;
+		}
+	}
+
+	&.fill {
+		background-color: var.$white;
+		color: var.$black;
+
+		svg {
+			filter: brightness(0);
+		}
+
+		&:hover {
+			background-color: var.$anakiwa;
+		}
+	}
+}
@@ -0,0 +1,21 @@
+import button from "./button.twig";
+import "./button.scss";
+
+export default {
+  title: "Atoms/Get Started",
+  argTypes: {
+    fill: { control: 'boolean' },
+    text: { control: 'text' }
+  },
+  render: ({ ...args }) => {
+    return button({ ...args });
+  },
+};
+
+export const Default = {
+  args: {
+    fill: true,
+    text: "Get Started",
+    show_arrow: false,
+  }
+};
@@ -0,0 +1,10 @@
+<button class="get-started {{ fill ? 'fill' : '' }} {{ width | default('w-100') }} {{ show_arrow ? 'show-arrow' : '' }}">
+  {{ text }}
+  {% if show_arrow %}
+    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewbox="0 0 36 24">
+      <line x1="0" y1="12" x2="34" y2="12" style="stroke: #9bf1ff; stroke-width: 2px;"/>
+      <line x1="25" y1="4" x2="34" y2="12.5" style="stroke: #9bf1ff; stroke-width: 2px;"/>
+      <line x1="25" y1="20" x2="34" y2="11.5" style="stroke: #9bf1ff; stroke-width: 2px;"/>
+    </svg>
+  {% endif %}
+</button>
@@ -0,0 +1,58 @@
+// Import Bootstrap icons
+@use "../../scss/_variables/index.scss" as var;
+@import "~bootstrap-icons/font/bootstrap-icons.css";
+
+.icon {
+	text-decoration: none;
+	border-bottom: none;
+	position: relative;
+
+	&:before {
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		display: inline-block;
+		font-style: normal;
+		font-variant: normal;
+		text-rendering: auto;
+		line-height: 1;
+		text-transform: none !important;
+		font-family: 'Font Awesome 5 Free';
+		font-weight: 400;
+		line-height: inherit;
+	}
+
+	>.label {
+		display: none;
+	}
+
+	&.solid:before {
+		font-weight: 900;
+	}
+
+	&.brands:before {
+		font-family: 'Font Awesome 5 Brands';
+	}
+
+	&.alt:before {
+		background-color: var.$white;
+		border-radius: 100%;
+		color: var.$ebony-clay;
+		display: inline-block;
+		height: 2em;
+		line-height: 2em;
+		text-align: center;
+		width: 2em;
+	}
+}
+
+a.icon.alt:before {
+	@include var.transition-properties((background-color), 0.2s);
+}
+
+a.icon.alt:hover:before {
+	background-color: var.$viking;
+}
+
+a.icon.alt:active:before {
+	background-color: var.$shakepseare;
+}
@@ -0,0 +1,17 @@
+import icons from "./icon.twig"; // Include HTML
+import "./icon.scss" // Include SCSS
+
+export default {
+	title: "Atoms/Icon",
+	render: ({ ...args }) => {
+		return icons({ ...args })
+	}
+}
+
+export const Default = {}
+
+Default.args = {
+	iconclass: "bi-facebook",
+	iconname: "Storybook",
+	url: "#"
+}
@@ -0,0 +1,3 @@
+<a href="{{ url }}" class="icon brands alt {{ iconclass }}">
+  <span class="label">{{ iconname }}</span>
+</a>
@@ -1 +1 @@
-<img src="{{ src }}" alt="{{ alt }}" class="{{ classes }}" width="{{ width }}" height="{{ height }}">
+<img src="{{ src }}" alt="{{ alt }}" class="{{ classes }}" width="{{ width }}" height="{{ height }}">
@@ -0,0 +1,45 @@
+@use "../../scss/_variables/index.scss" as var;
+
+label {
+	font-size: 0.8em;
+	font-weight: 600;
+	letter-spacing: 0.25em;
+	margin-bottom: 1em;
+}
+
+input,
+textarea {
+	appearance: none;
+	background: var.$input-bg;
+	border: none;
+	border-radius: 0;
+	color: inherit;
+	display: block;
+	outline: 0;
+	padding: 0 1em;
+	text-decoration: none;
+	width: 100%;
+
+	&:invalid {
+		box-shadow: none;
+	}
+
+	&:focus {
+		color: var.$white;
+		border-color: var.$anakiwa;
+		box-shadow: 0 0 0 2px var.$anakiwa;
+	}
+
+	&::-webkit-input-placeholder {
+		color: var.$footer-color !important;
+		opacity: 1.0;
+	}
+}
+
+input {
+	height: 2.75em;
+}
+
+textarea {
+	padding: 0.75em 1em;
+}
@@ -0,0 +1,22 @@
+import input from "./input.twig";
+import "./input.scss";
+
+export default {
+  title: "Atoms/Input",
+  argTypes: {
+    label: { control: 'text' },
+    name: { control: 'text' },
+    type: { control: 'text' },
+  },
+  render: ({ ...args }) => {
+    return input({ ...args });
+  },
+};
+
+export const Default = {
+  args: {
+    name: "text",
+    type: "text",
+    label: "Storybook Label"
+  }
+};
@@ -0,0 +1,6 @@
+<label class="text-white text-uppercase" for="{{ name }}">{{ label }}</label>
+{% if type == "textarea" %}
+  <textarea name="{{ name }}" rows="6"></textarea>
+{% else %}
+  <input type="{{ type }}" name="{{ name }}">
+{% endif %}
@@ -0,0 +1,17 @@
+import article from "./article.twig";
+
+export default {
+  title: "Molecules/Article",
+  tags: ["autodocs"],
+  render: ({ ...args }) => {
+    return article({ ...args });
+  },
+};
+
+export const Article = {
+  args: {
+    title: "Generic",
+    articlecontent:
+      "\nDonec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit.<br>  <br> \n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.<br> <br> \n\t\t\tInterdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.\n\t\t",
+  },
+};
@@ -0,0 +1,20 @@
+<main class="main">
+  <section>
+    <div class="inner">
+      <header class="major d-inline">
+        <h1 class="d-inline">{{ title  }}</h1>
+      </header>
+      <span class="image main mt-4 mb-4">
+        {% include '@atoms/image/image.twig' with {
+						src: 'https://html5up.net/uploads/demos/forty/images/pic11.jpg',
+						alt: 'Generic',
+						classes: 'img-fluid',
+						width: '100%',
+						height: 'auto'
+					} 
+				%}
+      </span>
+      <p>{{ articlecontent }}</p>
+    </div>
+  </section>
+</main>
@@ -2,7 +2,7 @@ import card from "./card.twig";
 import "./card.scss";
 
 export default {
-  title: "Molecule/Card",
+  title: "Molecules/Card",
   tags: ["autodocs"],
   argsTypes: {
     cardHeader: { control: "text" },

@@ -4,14 +4,28 @@
 			{{ cardHeader }}
 		</div>
 		<div class="card-body">
+
 			{% if cardImage %}
-				{% include '@atoms/image/image.twig' with { src: cardImage, alt: 'Logo', classes: 'm-3 shadow-sm rounded', width: '240px', height: '' } %}
+				{% include '@atoms/image/image.twig' with { 
+					src: cardImage,
+					alt: 'Logo',
+					classes: 'm-3 shadow-sm rounded',
+					width: '240px',
+					height: ''
+				} %}
 			{% endif %}
+
 			{% if cardTitle %}
 				<h5 class="card-title">{{ cardTitle }}</h5>
 			{% endif %}
+
 			<p class="card-text">{{ cardDescription }}</p>
-			{% include '@atoms/button/button.twig' with { size: "large", primary: true, label: "Go Somewhere" } %}
+			{% include '@atoms/button/button.twig' with { 
+				size: "large",
+				primary: true,
+				label: "Go Somewhere"
+			} %}
+
 		</div>
 		<div class="card-footer text-muted">
 			{{ cardDate | date("d-m-y") }}

@@ -0,0 +1,21 @@
+@use "../../scss/_variables/index.scss" as var;
+
+.contact-info {
+  background-color: var.$ebony-clay;
+  padding: 3em 0 1em 3em;
+
+  .contact-method {
+    margin-bottom: 2em;
+    padding-left: 3.25em;
+
+    .icon {
+      left: 0;
+      position: absolute;
+      top: 0;
+    }
+
+    h3 {
+      margin-bottom: 0.5em;
+    }
+  }
+}
@@ -0,0 +1,33 @@
+import contact from "./contact-info.twig";
+import "./contact-info.scss"
+import "../../atoms/input/input.scss"
+
+export default {
+  title: "Molecules/Contact",
+  tags: ["autodocs"],
+  render: ({ ...args }) => {
+    return contact({ ...args });
+  },
+};
+
+export const contactInfo = {};
+
+contactInfo.args = {
+  contactMethods: [
+    {
+      "icon": "bi-envelope",
+      "title": "Email",
+      "url": "information@untitled.tld"
+    },
+    {
+      "icon": "bi-phone-fill",
+      "title": "Phone",
+      "url": "(000) 000-0000 x12387"
+    },
+    {
+      "icon": "bi-house",
+      "title": "Address",
+      "url": "1234 Somewhere Road #5432<br>Nashville, TN 00000<br>United States of America"
+    }
+  ]
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<img src="{{ src }}" alt="{{ alt }}" class="{{ classes }}" width="{{ width }}" height="{{ height }}">
		<img src="{{ src }}" alt="{{ alt }}" class="{{ classes }}" width="{{ width }}" height="{{ height }}">