diff --git a/web/app/themes/dp-timber-theme/.storybook/main.js b/web/app/themes/dp-timber-theme/.storybook/main.js index 878245e..64a5484 100644 --- a/web/app/themes/dp-timber-theme/.storybook/main.js +++ b/web/app/themes/dp-timber-theme/.storybook/main.js @@ -30,7 +30,8 @@ const config = { }, ] } - } + }, + "@chromatic-com/storybook" ], framework: { name: "@storybook/html-webpack5", 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 @@ -{{ alt }} \ No newline at end of file +{{ alt }} 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..656b288 --- /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 }}

+
+ + {% 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' + } + %} + +

{{ articlecontent }}

+
+
+
diff --git a/web/app/themes/dp-timber-theme/components/molecule/Card/card.scss b/web/app/themes/dp-timber-theme/components/molecules/card/card.scss similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/Card/card.scss rename to web/app/themes/dp-timber-theme/components/molecules/card/card.scss diff --git a/web/app/themes/dp-timber-theme/components/molecule/Card/card.stories.js b/web/app/themes/dp-timber-theme/components/molecules/card/card.stories.js similarity index 95% rename from web/app/themes/dp-timber-theme/components/molecule/Card/card.stories.js rename to web/app/themes/dp-timber-theme/components/molecules/card/card.stories.js index f57e7e8..ee72f60 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/Card/card.stories.js +++ b/web/app/themes/dp-timber-theme/components/molecules/card/card.stories.js @@ -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" }, diff --git a/web/app/themes/dp-timber-theme/components/molecule/Card/card.twig b/web/app/themes/dp-timber-theme/components/molecules/card/card.twig similarity index 59% rename from web/app/themes/dp-timber-theme/components/molecule/Card/card.twig rename to web/app/themes/dp-timber-theme/components/molecules/card/card.twig index 4b70296..c8daa4d 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/Card/card.twig +++ b/web/app/themes/dp-timber-theme/components/molecules/card/card.twig @@ -4,14 +4,28 @@ {{ cardHeader }}
+ {% 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 %}
{{ cardTitle }}
{% endif %} +

{{ 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" + } %} +