+ {{ article.title }} +
+{{ article.description }}
+diff --git a/web/app/themes/dp-timber-theme/.storybook/main.js b/web/app/themes/dp-timber-theme/.storybook/main.js
index 878245e..ce1030e 100644
--- a/web/app/themes/dp-timber-theme/.storybook/main.js
+++ b/web/app/themes/dp-timber-theme/.storybook/main.js
@@ -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: [
diff --git a/web/app/themes/dp-timber-theme/components/atoms/get-started/button.scss b/web/app/themes/dp-timber-theme/components/atoms/get-started/button.scss
new file mode 100644
index 0000000..3e5d3db
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/atoms/get-started/button.scss
@@ -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;
+ }
+ }
+}
diff --git a/web/app/themes/dp-timber-theme/components/atoms/get-started/button.stories.js b/web/app/themes/dp-timber-theme/components/atoms/get-started/button.stories.js
new file mode 100644
index 0000000..ba4bd61
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/atoms/get-started/button.stories.js
@@ -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,
+ }
+};
diff --git a/web/app/themes/dp-timber-theme/components/atoms/get-started/button.twig b/web/app/themes/dp-timber-theme/components/atoms/get-started/button.twig
new file mode 100644
index 0000000..2fb4fd4
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/atoms/get-started/button.twig
@@ -0,0 +1,10 @@
+
diff --git a/web/app/themes/dp-timber-theme/components/atoms/icon/icon.scss b/web/app/themes/dp-timber-theme/components/atoms/icon/icon.scss
new file mode 100644
index 0000000..3dc891d
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/atoms/icon/icon.scss
@@ -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;
+}
diff --git a/web/app/themes/dp-timber-theme/components/atoms/icon/icon.stories.js b/web/app/themes/dp-timber-theme/components/atoms/icon/icon.stories.js
new file mode 100644
index 0000000..3aa5684
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/atoms/icon/icon.stories.js
@@ -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: "#"
+}
diff --git a/web/app/themes/dp-timber-theme/components/atoms/icon/icon.twig b/web/app/themes/dp-timber-theme/components/atoms/icon/icon.twig
new file mode 100644
index 0000000..9fc3a7a
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/atoms/icon/icon.twig
@@ -0,0 +1,3 @@
+
+ {{ iconname }}
+
diff --git a/web/app/themes/dp-timber-theme/components/atoms/image/image.twig b/web/app/themes/dp-timber-theme/components/atoms/image/image.twig
index 918a585..c195cb9 100644
--- a/web/app/themes/dp-timber-theme/components/atoms/image/image.twig
+++ b/web/app/themes/dp-timber-theme/components/atoms/image/image.twig
@@ -1 +1 @@
- {{ articlecontent }}
\ No newline at end of file
+
diff --git a/web/app/themes/dp-timber-theme/components/atoms/input/input.scss b/web/app/themes/dp-timber-theme/components/atoms/input/input.scss
new file mode 100644
index 0000000..a245026
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/atoms/input/input.scss
@@ -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;
+}
diff --git a/web/app/themes/dp-timber-theme/components/atoms/input/input.stories.js b/web/app/themes/dp-timber-theme/components/atoms/input/input.stories.js
new file mode 100644
index 0000000..60664d1
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/atoms/input/input.stories.js
@@ -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"
+ }
+};
diff --git a/web/app/themes/dp-timber-theme/components/atoms/input/input.twig b/web/app/themes/dp-timber-theme/components/atoms/input/input.twig
new file mode 100644
index 0000000..e3a3ad8
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/atoms/input/input.twig
@@ -0,0 +1,6 @@
+
+{% if type == "textarea" %}
+
+{% else %}
+
+{% endif %}
diff --git a/web/app/themes/dp-timber-theme/components/molecule/Introduction.mdx b/web/app/themes/dp-timber-theme/components/molecules/Introduction.mdx
similarity index 100%
rename from web/app/themes/dp-timber-theme/components/molecule/Introduction.mdx
rename to web/app/themes/dp-timber-theme/components/molecules/Introduction.mdx
diff --git a/web/app/themes/dp-timber-theme/components/molecules/article/article.stories.js b/web/app/themes/dp-timber-theme/components/molecules/article/article.stories.js
new file mode 100644
index 0000000..88c8333
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/molecules/article/article.stories.js
@@ -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.
\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.
\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",
+ },
+};
diff --git a/web/app/themes/dp-timber-theme/components/molecules/article/article.twig b/web/app/themes/dp-timber-theme/components/molecules/article/article.twig
new file mode 100644
index 0000000..085af81
--- /dev/null
+++ b/web/app/themes/dp-timber-theme/components/molecules/article/article.twig
@@ -0,0 +1,20 @@
+{{ title }}
+
{{ cardDescription }}
- {% 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" + } %} +{{ subtitle }}
+{{ subtitle | upper }}
+{{ article.description }}
+