From f46e6a04c9aecbf2a206a21185552a6ade01f8b9 Mon Sep 17 00:00:00 2001 From: Shayaan Date: Mon, 1 Jul 2024 19:06:56 +0530 Subject: [PATCH 01/10] Html Design in Storybook --- .../themes/dp-timber-theme/.storybook/main.js | 2 +- .../components/SCSS/_variables/_colors.scss | 10 ++ .../components/SCSS/_variables/_mixins.scss | 90 +++++++++++ .../components/SCSS/_variables/index.scss | 2 + .../components/SCSS/components/_default.scss | 76 +++++++++ .../components/atoms/Get Started/button.scss | 23 +++ .../atoms/Get Started/button.stories.js | 12 ++ .../components/atoms/Get Started/button.twig | 1 + .../components/atoms/icon/icon.scss | 60 +++++++ .../components/atoms/icon/icon.stories.js | 18 +++ .../components/atoms/icon/icon.twig | 3 + .../components/molecule/Card/card.stories.js | 2 +- .../components/molecule/Hero/hero.scss | 105 ++++++++++++ .../components/molecule/Hero/hero.stories.js | 22 +++ .../components/molecule/Hero/hero.twig | 15 ++ .../components/molecule/Tiles/tiles.scss | 149 ++++++++++++++++++ .../molecule/Tiles/tiles.stories.js | 56 +++++++ .../components/molecule/Tiles/tiles.twig | 13 ++ .../components/molecule/cta-text/cta.scss | 1 + .../molecule/cta-text/cta.stories.js | 19 +++ .../components/molecule/cta-text/cta.twig | 14 ++ .../molecule/icons/icons.stories.js | 41 +++++ .../components/molecule/icons/icons.twig | 10 ++ .../components/organisms/Footer/footer.scss | 70 ++++++++ .../organisms/Footer/footer.stories.js | 42 +++++ .../components/organisms/Footer/footer.twig | 15 ++ .../components/organisms/Main/main.stories.js | 11 ++ .../components/organisms/Main/main.twig | 42 +++++ .../pages/Homepage/homepage.stories.js | 40 +++++ .../components/pages/Homepage/homepage.twig | 3 + .../components/storybook/storybook.scss | 2 +- .../dp-timber-theme/components/style.scss | 3 +- 32 files changed, 968 insertions(+), 4 deletions(-) create mode 100644 web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss create mode 100644 web/app/themes/dp-timber-theme/components/SCSS/_variables/_mixins.scss create mode 100644 web/app/themes/dp-timber-theme/components/SCSS/_variables/index.scss create mode 100644 web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss create mode 100644 web/app/themes/dp-timber-theme/components/atoms/Get Started/button.scss create mode 100644 web/app/themes/dp-timber-theme/components/atoms/Get Started/button.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/atoms/Get Started/button.twig create mode 100644 web/app/themes/dp-timber-theme/components/atoms/icon/icon.scss create mode 100644 web/app/themes/dp-timber-theme/components/atoms/icon/icon.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/atoms/icon/icon.twig create mode 100644 web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss create mode 100644 web/app/themes/dp-timber-theme/components/molecule/Hero/hero.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/molecule/Hero/hero.twig create mode 100644 web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss create mode 100644 web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.twig create mode 100644 web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.scss create mode 100644 web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig create mode 100644 web/app/themes/dp-timber-theme/components/molecule/icons/icons.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/molecule/icons/icons.twig create mode 100644 web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss create mode 100644 web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig create mode 100644 web/app/themes/dp-timber-theme/components/organisms/Main/main.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/organisms/Main/main.twig create mode 100644 web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.twig diff --git a/web/app/themes/dp-timber-theme/.storybook/main.js b/web/app/themes/dp-timber-theme/.storybook/main.js index 878245e..70ad043 100644 --- a/web/app/themes/dp-timber-theme/.storybook/main.js +++ b/web/app/themes/dp-timber-theme/.storybook/main.js @@ -56,7 +56,7 @@ const config = { }); const twigAlias = { "@atoms": path.resolve(__dirname, '../', 'components/atoms'), - "@molecules": path.resolve(__dirname, '../', 'components/molecules'), + "@molecules": path.resolve(__dirname, '../', 'components/molecule'), "@organisms": path.resolve(__dirname, '../', 'components/organisms'), "@templates": path.resolve(__dirname, '../', 'components/templates'), "@pages": path.resolve(__dirname, '../', 'components/pages'), diff --git a/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss new file mode 100644 index 0000000..59a4e95 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss @@ -0,0 +1,10 @@ +$white: #ffff; +$black: #000; +$viking: #6fc3df; +$blue-bell: #8d82c4; +$apricot: #ec8d81; +$gold-sand: #e7b788; +$portage: #8ea9e8; +$de-york: #87c5a4; +$ebony-clay: #242943; +$martinique: #2a2f4a; \ No newline at end of file diff --git a/web/app/themes/dp-timber-theme/components/SCSS/_variables/_mixins.scss b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_mixins.scss new file mode 100644 index 0000000..52c8290 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_mixins.scss @@ -0,0 +1,90 @@ +@mixin flexCenter { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; +} + +@mixin displayFlex { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; +} +@mixin flexWrap { + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +@mixin transition-background($duration) { + -moz-transition: + background-color $duration ease-in-out, + box-shadow $duration ease-in-out, + color $duration ease-in-out; + -webkit-transition: + background-color $duration ease-in-out, + box-shadow $duration ease-in-out, + color $duration ease-in-out; + -ms-transition: + background-color $duration ease-in-out, + box-shadow $duration ease-in-out, + color $duration ease-in-out; + transition: + background-color $duration ease-in-out, + box-shadow $duration ease-in-out, + color $duration ease-in-out; +} + +@mixin transition-opacity($duration) { + -moz-transition: + -moz-transform $duration ease, + opacity $duration ease, + -moz-filter 1s ease, + -webkit-filter 1s ease; + -webkit-transition: + -webkit-transform $duration ease, + opacity $duration ease, + -webkit-filter 1s ease; + -ms-transition: + -ms-transform $duration ease, + opacity $duration ease, + -ms-filter 1s ease; + transition: + transform $duration ease, + opacity $duration ease, + filter 1s ease, + -webkit-filter 1s ease; +} + +@mixin transform-scale-blur($scale, $blur) { + -moz-transform: scale($scale); + -webkit-transform: scale($scale); + -ms-transform: scale($scale); + transform: scale($scale); + -moz-filter: blur($blur); + -webkit-filter: blur($blur); + -ms-filter: blur($blur); + filter: blur($blur); +} + + +@mixin transition-properties( + $properties: (), + $duration: 0.25s, + $timing: ease-in-out +) { + @each $property in $properties { + -moz-transition: #{$property} $duration $timing; + -webkit-transition: #{$property} $duration $timing; + -ms-transition: #{$property} $duration $timing; + transition: #{$property} $duration $timing; + } +} + +@mixin background { + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} diff --git a/web/app/themes/dp-timber-theme/components/SCSS/_variables/index.scss b/web/app/themes/dp-timber-theme/components/SCSS/_variables/index.scss new file mode 100644 index 0000000..484a270 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/SCSS/_variables/index.scss @@ -0,0 +1,2 @@ +@forward "mixins"; +@forward "colors"; diff --git a/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss b/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss new file mode 100644 index 0000000..2797978 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss @@ -0,0 +1,76 @@ +@use "../_variables/index" as var; + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var.$white; + font-weight: 600; + line-height: 1.65; + margin: 0 0 1em 0; +} + +p { + font-size: 0.7em; + font-weight: 600; + letter-spacing: 0.25em; + margin: 0 0 2em 0; + text-transform: uppercase; + color: var.$white; +} + +a { + @include var.transition-properties((color, border-bottom-color), 0.5s); + color: inherit; + text-decoration: none; +} + +h1 { + font-size: 3.25em; +} + +header { + margin-bottom: 2em; +} + +header> :first-child:after { + content: ''; + background-color: #ffffff; + display: block; + height: 2px; + margin: 0.325em 0 0.5em 0; + width: 100%; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + + +.main { + background-color: var.$martinique; + + .inner { + padding: 4em 0 2em 0; + margin: 0 auto; + max-width: 65em; + width: calc(100% - 6em); + + @media screen and (max-width: 736px) { + padding: 3em 0 1em 0; + width: calc(100% - 3em); + } + } +} \ No newline at end of file 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..70c2c4f --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/atoms/Get Started/button.scss @@ -0,0 +1,23 @@ +@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; +} \ No newline at end of file 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..c2f8d78 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/atoms/Get Started/button.stories.js @@ -0,0 +1,12 @@ +import button from "./button.twig"; // Get HTML TWIG +import "./button.scss"; // Button Scss + +export default { + title: "Atoms/Get Started", // Get Started Name + render: ({ ...args }) => { + return button({ ...args }); + }, +}; + +// I am not passing any Args for this Button +export const Default = {}; \ No newline at end of file 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..1686db0 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/atoms/Get Started/button.twig @@ -0,0 +1 @@ + \ No newline at end of file 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..6726d67 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/atoms/icon/icon.scss @@ -0,0 +1,60 @@ +// Import Bootstrap icons +@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: #ffffff; + border-radius: 100%; + color: #242943; + display: inline-block; + height: 2em; + line-height: 2em; + text-align: center; + width: 2em; + } +} + +a.icon.alt:before { + -moz-transition: background-color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; +} + +a.icon.alt:hover:before { + background-color: #6fc3df; +} + +a.icon.alt:active:before { + background-color: #37a6cb; +} \ No newline at end of file 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..6062260 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/atoms/icon/icon.stories.js @@ -0,0 +1,18 @@ +import icons from "./icon.twig"; // Include HTML +import "./icon.scss" // Inlcude SCSS + + +export default { + title: "Atoms/Icon", + render: ({ ...args }) => { + return icons({ ...args }) + } +} + +export const Default = {} + +Default.args = { + iconclass: "bi-facebook", + iconname: "Storybook", + url: "#" +} \ No newline at end of file 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..17b6410 --- /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/molecule/Card/card.stories.js b/web/app/themes/dp-timber-theme/components/molecule/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/molecule/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/Hero/hero.scss b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss new file mode 100644 index 0000000..079e2b3 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss @@ -0,0 +1,105 @@ +@use "../../SCSS/_variables/index.scss" as var; +@use "../../SCSS/components/default"; + +.hero { + @include var.displayFlex; + @include var.flexCenter; + padding: 6em 0 2em 0; + background-attachment: fixed; + @include var.background; + border-bottom: 0 !important; + height: 60vh; + margin-bottom: -3.25em; + max-height: 32em; + min-height: 22em; + position: relative; + top: -3.25em; + color: #fff; + + .inner { + padding: 4em 0 2em 0; + margin: 0 auto; + max-width: 65em; + width: calc(100% - 6em); + z-index: 2; + + .content { + display: flex; + align-items: center; + margin: 0 0 2em 0; + + p { + font-size: 0.7em; + font-weight: 600; + letter-spacing: 0.25em; + text-transform: uppercase; + margin-right: 1.5em; + } + } + } + + &.major { + height: 75vh; + min-height: 30em; + max-height: 50em; + } + + &::after { + content: ""; + @include var.transition-opacity(0.25s); + pointer-events: none; + background-color: var.$ebony-clay; + display: block; + height: 100%; + left: 0; + opacity: 0.85; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } +} + +@media screen and (max-width: 736px) { + .hero { + padding: 5em 0 1em 0; + height: auto; + margin-bottom: -2.75em; + max-height: none; + min-height: 0; + top: -2.75em; + } + + .hero h1 { + font-size: 2em; + } + + .hero>.inner .content { + display: block; + } + + .hero>.inner .content>* { + margin-right: 0; + margin-bottom: 2em; + } + + .hero.major { + height: auto; + min-height: 0; + max-height: none; + } +} + +@media screen and (max-width: 480px) { + .hero { + padding: 6em 0 2em 0; + } + + .hero>.inner .content p br { + display: none; + } + + .hero.major { + padding: 8em 0 4em 0; + } +} \ No newline at end of file diff --git a/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.stories.js b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.stories.js new file mode 100644 index 0000000..9878515 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.stories.js @@ -0,0 +1,22 @@ +import hero from "./hero.twig"; +import "./hero.scss"; + +export default { + title: "Molecules/Hero", + tags: ["autodocs"], + argsTypes: { + bgImage: { control: "text" }, + h1: { control: "text" }, + subtitle: { control: "text" }, + }, + render: ({ ...args }) => { + return hero({ ...args }); + }, +}; + +export const Default = {}; +Default.args = { + bgImage: "https://html5up.net/uploads/demos/forty/images/banner.jpg", + title: "Hi, my name is Forty", + subtitle: "A RESPONSIVE SITE TEMPLATE DESIGNED BY HTML5 UP
AND RELEASED UNDER THE CREATIVE COMMONS." +}; diff --git a/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.twig b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.twig new file mode 100644 index 0000000..751cb09 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.twig @@ -0,0 +1,15 @@ +
+
+
+

{{ title }}

+
+
+

{{ subtitle | upper }}

+
    +
  • + {% include '@atoms/Get Started/button.twig' %} +
    • +
+
+
+
diff --git a/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss b/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss new file mode 100644 index 0000000..4080bfc --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss @@ -0,0 +1,149 @@ +@use "../../SCSS/_variables/index.scss" as var; +@use "../../SCSS/components/default"; + + +.tiles { + @include var.displayFlex; + @include var.flexWrap; + + article { + @include var.displayFlex; + @include var.flexCenter; + @include var.transition-opacity(0.25s); + padding: 4em 4em 2em 4em; + @include var.background; + height: 40vh; + max-height: 40em; + min-height: 23em; + overflow: hidden; + position: relative; + width: 40%; + + .image { + display: none; + } + + header { + position: relative; + z-index: 3; + } + + h3 { + font-size: 1.75em; + + a:hover { + color: inherit !important; + } + } + + .link.primary { + border: 0; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 4; + } + + &:before { + content: ""; + @include var.transition-opacity(0.5s); + bottom: 0; + display: block; + height: 100%; + left: 0; + opacity: 0.85; + position: absolute; + width: 100%; + z-index: 2; + } + + &:after { + content: ""; + background-color: rgba(36, 41, 67, 0.25); + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } + + &:hover:before { + opacity: 0; + } + + &.is-transitioning { + @include var.transform-scale-blur(0.95, 0.5em); + opacity: 0; + } + + &:nth-child(4n - 1), + &:nth-child(4n - 2) { + width: 60%; + } + + &:nth-child(6n - 5):before { + background-color: var.$viking; + } + + &:nth-child(6n - 4):before { + background-color: var.$blue-bell; + } + + &:nth-child(6n - 3):before { + background-color: var.$apricot; + } + + &:nth-child(6n - 2):before { + background-color: var.$gold-sand; + } + + &:nth-child(6n - 1):before { + background-color: var.$portage; + } + + &:nth-child(6n):before { + background-color: var.$de-york; + } + } + + @media screen and (max-width: 1280px) { + article { + padding: 4em 3em 2em 3em; + height: 30vh; + max-height: 30em; + min-height: 20em; + } + } + + @media screen and (max-width: 980px) { + article { + width: 50% !important; + } + } + + @media screen and (max-width: 736px) { + article { + padding: 3em 1.5em 1em 1.5em; + height: 16em; + max-height: none; + min-height: 0; + + h3 { + font-size: 1.5em; + } + } + } + + @media screen and (max-width: 480px) { + display: block; + + article { + height: 20em; + width: 100% !important; + } + } +} \ No newline at end of file diff --git a/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.stories.js b/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.stories.js new file mode 100644 index 0000000..ecc7cff --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.stories.js @@ -0,0 +1,56 @@ +import tiles from "./tiles.twig"; +import "./tiles.scss"; + +export default { + title: "Molecules/Tiles", + tags: ["autodocs"], + argTypes: { + + }, + render: ({ articles = defaultArgs.articles }) => { + return tiles({ articles }); + }, +}; + +export const Default = { + args: { + articles: [ + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic01.jpg', + title: 'Aliquam', + link: '#', + description: 'Ipsum dolor sit amet', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic02.jpg', + title: 'Tempus', + link: '#', + description: 'Feugiat amet tempus', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic03.jpg', + title: 'Magna', + link: '#', + description: 'Lorem etiam nullam', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic04.jpg', + title: 'Ipsum', + link: '#', + description: 'Nisl sed aliquam', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic05.jpg', + title: 'Consequat', + link: '#', + description: 'Ipsum dolor sit amet', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic06.jpg', + title: 'Etiam', + link: '#', + description: 'Feugiat amet tempus', + }, + ], + }, +}; diff --git a/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.twig b/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.twig new file mode 100644 index 0000000..90a68df --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.twig @@ -0,0 +1,13 @@ +
+ {% for article in articles %} + + {% endfor %} +
diff --git a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.scss b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.scss new file mode 100644 index 0000000..88f8389 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.scss @@ -0,0 +1 @@ +@use "../../SCSS/components/default"; \ No newline at end of file diff --git a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.stories.js b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.stories.js new file mode 100644 index 0000000..e0ce770 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.stories.js @@ -0,0 +1,19 @@ +import createCTA from "./cta.twig"; +import "./cta.scss"; + +export default { + title: "Molecules/CTA", + argsTypes: { + title: { control: "text" }, + subtitle: { control: "text" } + }, + render: ({ ...args }) => { + return createCTA({ ...args }); + }, +}; + +export const Default = {}; +Default.args = { + title: "Massa libero", + subtitle: "Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet pharetra et feugiat tempus.", +} diff --git a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig new file mode 100644 index 0000000..48c6f63 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig @@ -0,0 +1,14 @@ +
+
+
+

{{ title }}

+
+

{{ subtitle }}

+
    +
  • + {% include '@atoms/Get Started/button.twig' %} +
    • +
+
+
+ diff --git a/web/app/themes/dp-timber-theme/components/molecule/icons/icons.stories.js b/web/app/themes/dp-timber-theme/components/molecule/icons/icons.stories.js new file mode 100644 index 0000000..982c47a --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/icons/icons.stories.js @@ -0,0 +1,41 @@ +import icons from "./icons.twig"; + + +export default { + title: "Molecules/Icons", + render: ({ ...args }) => { + return icons({ ...args }) + } +} + +export const Default = {} + +Default.args = { + icons: [ + { + "iconClass": "bi-twitter-x", + "label": "Twitter", + "url": "#" + }, + { + "iconClass": "bi-facebook", + "label": "Facebook", + "url": "#" + }, + { + "iconClass": "bi-instagram", + "label": "Instagram", + "url": "#" + }, + { + "iconClass": "bi-github", + "label": "GitHub", + "url": "#" + }, + { + "iconClass": "bi-linkedin", + "label": "LinkedIn", + "url": "#" + } + ] +} diff --git a/web/app/themes/dp-timber-theme/components/molecule/icons/icons.twig b/web/app/themes/dp-timber-theme/components/molecule/icons/icons.twig new file mode 100644 index 0000000..19fac45 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecule/icons/icons.twig @@ -0,0 +1,10 @@ +{% if icons %} + +{% endif %} + diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss new file mode 100644 index 0000000..970220a --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss @@ -0,0 +1,70 @@ +@use "../../SCSS/_variables/index.scss" as var; +@use "../../SCSS/components/default"; + + +footer { + background: var.$martinique; + color: var.$white; + + .copyright { + font-size: 0.8em; + list-style: none; + padding-left: 0; + + li { + border-left: solid 1px rgba(212, 212, 255, 0.1); + color: rgba(244, 244, 255, 0.2); + display: inline-block; + line-height: 1; + margin-left: 1em; + padding-left: 1em; + + &:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + } + } + + .inner { + padding: 4em 0 2em 0; + margin: 0 auto; + max-width: 65em; + width: calc(100% - 6em); + } + + ul { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 1em 0 0; + + :last-child { + padding-right: 0; + } + } + + @media screen and (max-width: 736px) { + li { + padding: 0 0.75em 0 0; + } + } + + @media screen and (max-width: 480px) { + + .copyright li { + display: block; + border-left: 0; + margin-left: 0; + padding-left: 0; + line-height: inherit; + } + + } + } + +} \ No newline at end of file diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js new file mode 100644 index 0000000..23dad71 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js @@ -0,0 +1,42 @@ +import "./footer.scss" +import footers from "./footer.twig"; + + +export default { + title: "organisms/Footers", + render: ({ ...args }) => { + return footers({ ...args }) + } +} + +export const Default = {} + +Default.args = { + socialMediaIcons: [ + { + "iconClass": "bi-twitter-x", + "label": "Twitter", + "url": "#" + }, + { + "iconClass": "bi-facebook", + "label": "Facebook", + "url": "#" + }, + { + "iconClass": "bi-instagram", + "label": "Instagram", + "url": "#" + }, + { + "iconClass": "bi-github", + "label": "GitHub", + "url": "#" + }, + { + "iconClass": "bi-linkedin", + "label": "LinkedIn", + "url": "#" + } + ] +} diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig new file mode 100644 index 0000000..9022048 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig @@ -0,0 +1,15 @@ + + diff --git a/web/app/themes/dp-timber-theme/components/organisms/Main/main.stories.js b/web/app/themes/dp-timber-theme/components/organisms/Main/main.stories.js new file mode 100644 index 0000000..9dd23c5 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/Main/main.stories.js @@ -0,0 +1,11 @@ +import main from "./main.twig"; + +export default { + title: "organisms/Main", + tags: ['autodocs'], + render: ({ ...args }) => { + return main({ ...args }) + } +} + +export const Default = {} \ No newline at end of file diff --git a/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig b/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig new file mode 100644 index 0000000..6494e96 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig @@ -0,0 +1,42 @@ +{% include '@molecules/Hero/hero.twig' with { bgImage: "https://html5up.net/uploads/demos/forty/images/banner.jpg", title: "Hi, my name is Forty", subtitle: "A RESPONSIVE SITE TEMPLATE DESIGNED BY HTML5 UP
AND RELEASED UNDER THE CREATIVE COMMONS." } %} +{% include '@molecules/Tiles/tiles.twig' with { articles: [ + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic01.jpg', + title: 'Aliquam', + link: '#', + description: 'Ipsum dolor sit amet', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic02.jpg', + title: 'Tempus', + link: '#', + description: 'Feugiat amet tempus', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic03.jpg', + title: 'Magna', + link: '#', + description: 'Lorem etiam nullam', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic04.jpg', + title: 'Ipsum', + link: '#', + description: 'Nisl sed aliquam', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic05.jpg', + title: 'Consequat', + link: '#', + description: 'Ipsum dolor sit amet', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic06.jpg', + title: 'Etiam', + link: '#', + description: 'Feugiat amet tempus', + }, + ], } %} +{% include '@molecules/cta-text/cta.twig' with { title: "Massa libero", + subtitle: "Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet pharetra et feugiat tempus.", } %} + diff --git a/web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.stories.js b/web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.stories.js new file mode 100644 index 0000000..a6b35f8 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.stories.js @@ -0,0 +1,40 @@ +import Homepage from "./homepage.twig"; + +export default { + title: "Pages/Homepage", + tags: ['autodocs'], + render: ({ ...args }) => { + return Homepage({ ...args }) + } +} + +export const Default = {} +Default.args = { + socialMediaIcons: [ + { + "iconClass": "bi-twitter-x", + "label": "Twitter", + "url": "#" + }, + { + "iconClass": "bi-facebook", + "label": "Facebook", + "url": "#" + }, + { + "iconClass": "bi-instagram", + "label": "Instagram", + "url": "#" + }, + { + "iconClass": "bi-github", + "label": "GitHub", + "url": "#" + }, + { + "iconClass": "bi-linkedin", + "label": "LinkedIn", + "url": "#" + } + ] +} diff --git a/web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.twig b/web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.twig new file mode 100644 index 0000000..f6ef8a5 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.twig @@ -0,0 +1,3 @@ +{% include '@organisms/Header/Header.twig' %} +{% include '@organisms/Main/main.twig' %} +{% include '@organisms/Footer/footer.twig' %} diff --git a/web/app/themes/dp-timber-theme/components/storybook/storybook.scss b/web/app/themes/dp-timber-theme/components/storybook/storybook.scss index 950b5fc..ff120b9 100644 --- a/web/app/themes/dp-timber-theme/components/storybook/storybook.scss +++ b/web/app/themes/dp-timber-theme/components/storybook/storybook.scss @@ -3,4 +3,4 @@ } .card-container { max-width: 600px; -} +} \ No newline at end of file diff --git a/web/app/themes/dp-timber-theme/components/style.scss b/web/app/themes/dp-timber-theme/components/style.scss index 5db97e0..0174e4e 100644 --- a/web/app/themes/dp-timber-theme/components/style.scss +++ b/web/app/themes/dp-timber-theme/components/style.scss @@ -2,4 +2,5 @@ body { padding: 0; margin: 0; -} \ No newline at end of file +} + From e04c7a1c5322b583a1325d8bf4919e0be419ed0a Mon Sep 17 00:00:00 2001 From: Shayaan Date: Tue, 2 Jul 2024 14:30:19 +0530 Subject: [PATCH 02/10] Commented Changes --- .../SCSS/_variables/_breakpoints.scss | 5 ++++ .../components/SCSS/_variables/_colors.scss | 6 ++++- .../components/SCSS/_variables/index.scss | 1 + .../components/SCSS/components/_default.scss | 16 +++++------ .../components/atoms/Get Started/button.scss | 2 +- .../atoms/Get Started/button.stories.js | 2 +- .../components/atoms/Get Started/button.twig | 2 +- .../components/atoms/icon/icon.scss | 14 +++++----- .../components/atoms/icon/icon.stories.js | 5 ++-- .../components/atoms/image/image.twig | 2 +- .../components/molecule/Hero/hero.scss | 27 +++++++------------ .../components/molecule/Tiles/tiles.scss | 20 +++++++------- .../components/molecule/cta-text/cta.scss | 1 - .../molecule/cta-text/cta.stories.js | 1 - .../components/molecule/cta-text/cta.twig | 5 +--- .../components/molecule/icons/icons.twig | 1 - .../components/organisms/Footer/footer.scss | 27 +++++++++---------- .../organisms/Footer/footer.stories.js | 1 - .../components/organisms/Footer/footer.twig | 1 - .../components/organisms/Main/main.stories.js | 2 +- .../components/organisms/Main/main.twig | 2 +- .../components/storybook/storybook.scss | 3 ++- .../dp-timber-theme/components/style.scss | 3 ++- 23 files changed, 69 insertions(+), 80 deletions(-) create mode 100644 web/app/themes/dp-timber-theme/components/SCSS/_variables/_breakpoints.scss delete mode 100644 web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.scss diff --git a/web/app/themes/dp-timber-theme/components/SCSS/_variables/_breakpoints.scss b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_breakpoints.scss new file mode 100644 index 0000000..7f6c0f6 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_breakpoints.scss @@ -0,0 +1,5 @@ +$sm: "480px"; +$md: "736px"; +$lg: "980px"; +$xl: "1200px"; +$xxl: "1400px"; diff --git a/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss index 59a4e95..114f6f3 100644 --- a/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss +++ b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss @@ -7,4 +7,8 @@ $gold-sand: #e7b788; $portage: #8ea9e8; $de-york: #87c5a4; $ebony-clay: #242943; -$martinique: #2a2f4a; \ No newline at end of file +$martinique: #2a2f4a; +$shakepseare: #37a6cb; +$tiles-bg-color: rgba(36, 41, 67, 0.25); +$footer-border-color: rgba(212, 212, 255, 0.1); +$footer-color: rgba(244, 244, 255, 0.2); diff --git a/web/app/themes/dp-timber-theme/components/SCSS/_variables/index.scss b/web/app/themes/dp-timber-theme/components/SCSS/_variables/index.scss index 484a270..1c93d82 100644 --- a/web/app/themes/dp-timber-theme/components/SCSS/_variables/index.scss +++ b/web/app/themes/dp-timber-theme/components/SCSS/_variables/index.scss @@ -1,2 +1,3 @@ @forward "mixins"; @forward "colors"; +@forward "breakpoints"; diff --git a/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss b/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss index 2797978..ad2807a 100644 --- a/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss +++ b/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss @@ -9,14 +9,14 @@ h6 { color: var.$white; font-weight: 600; line-height: 1.65; - margin: 0 0 1em 0; + margin: 0 0 1em; } p { font-size: 0.7em; font-weight: 600; letter-spacing: 0.25em; - margin: 0 0 2em 0; + margin: 0 0 2em; text-transform: uppercase; color: var.$white; } @@ -37,10 +37,10 @@ header { header> :first-child:after { content: ''; - background-color: #ffffff; + background-color: var.$white; display: block; height: 2px; - margin: 0.325em 0 0.5em 0; + margin: 0.325em 0 0.5em; width: 100%; } @@ -63,14 +63,14 @@ section { background-color: var.$martinique; .inner { - padding: 4em 0 2em 0; + padding: 4em 0 2em; margin: 0 auto; max-width: 65em; width: calc(100% - 6em); - @media screen and (max-width: 736px) { - padding: 3em 0 1em 0; + @media screen and (max-width: var.$md) { + padding: 3em 0 1em; width: calc(100% - 3em); } } -} \ No newline at end of file +} 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 index 70c2c4f..2663deb 100644 --- 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 @@ -20,4 +20,4 @@ button { text-decoration: none; text-transform: uppercase; white-space: nowrap; -} \ No newline at end of file +} 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 index c2f8d78..3ab957f 100644 --- 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 @@ -9,4 +9,4 @@ export default { }; // I am not passing any Args for this Button -export const Default = {}; \ No newline at end of file +export const Default = {}; 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 index 1686db0..196e6d4 100644 --- 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 @@ -1 +1 @@ - \ No newline at end of file + 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 index 6726d67..93f74af 100644 --- a/web/app/themes/dp-timber-theme/components/atoms/icon/icon.scss +++ b/web/app/themes/dp-timber-theme/components/atoms/icon/icon.scss @@ -1,4 +1,5 @@ // Import Bootstrap icons +@use "../../SCSS/_variables/index.scss" as var; @import "~bootstrap-icons/font/bootstrap-icons.css"; .icon { @@ -33,7 +34,7 @@ } &.alt:before { - background-color: #ffffff; + background-color: var.$white; border-radius: 100%; color: #242943; display: inline-block; @@ -45,16 +46,13 @@ } a.icon.alt:before { - -moz-transition: background-color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out; + @include var.transition-properties((background-color), 0.2s); } a.icon.alt:hover:before { - background-color: #6fc3df; + background-color: var.$viking; } a.icon.alt:active:before { - background-color: #37a6cb; -} \ No newline at end of file + 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 index 6062260..3c303b9 100644 --- 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 @@ -1,7 +1,6 @@ import icons from "./icon.twig"; // Include HTML import "./icon.scss" // Inlcude SCSS - export default { title: "Atoms/Icon", render: ({ ...args }) => { @@ -14,5 +13,5 @@ export const Default = {} Default.args = { iconclass: "bi-facebook", iconname: "Storybook", - url: "#" -} \ No newline at end of file + url: "#" +} 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/molecule/Hero/hero.scss b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss index 079e2b3..fa29a5c 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss +++ b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss @@ -4,20 +4,19 @@ .hero { @include var.displayFlex; @include var.flexCenter; - padding: 6em 0 2em 0; + padding: 6em 0 2em; background-attachment: fixed; @include var.background; - border-bottom: 0 !important; + border-bottom: 0; height: 60vh; - margin-bottom: -3.25em; max-height: 32em; min-height: 22em; position: relative; top: -3.25em; - color: #fff; + color: var.$white; .inner { - padding: 4em 0 2em 0; + padding: 4em 0 2em; margin: 0 auto; max-width: 65em; width: calc(100% - 6em); @@ -60,9 +59,9 @@ } } -@media screen and (max-width: 736px) { +@media screen and (max-width: var.$md) { .hero { - padding: 5em 0 1em 0; + padding: 5em 0 1em; height: auto; margin-bottom: -2.75em; max-height: none; @@ -90,16 +89,8 @@ } } -@media screen and (max-width: 480px) { +@media screen and (max-width: var.$sm) { .hero { - padding: 6em 0 2em 0; + padding: 6em 0 2em; } - - .hero>.inner .content p br { - display: none; - } - - .hero.major { - padding: 8em 0 4em 0; - } -} \ No newline at end of file +} diff --git a/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss b/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss index 4080bfc..7ede819 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss +++ b/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss @@ -1,6 +1,4 @@ @use "../../SCSS/_variables/index.scss" as var; -@use "../../SCSS/components/default"; - .tiles { @include var.displayFlex; @@ -10,7 +8,7 @@ @include var.displayFlex; @include var.flexCenter; @include var.transition-opacity(0.25s); - padding: 4em 4em 2em 4em; + padding: 4em 4em 2em; @include var.background; height: 40vh; max-height: 40em; @@ -61,7 +59,7 @@ &:after { content: ""; - background-color: rgba(36, 41, 67, 0.25); + background-color: var.$tiles-bg-color; display: block; height: 100%; left: 0; @@ -110,24 +108,24 @@ } } - @media screen and (max-width: 1280px) { + @media screen and (max-width: var.$xl) { article { - padding: 4em 3em 2em 3em; + padding: 4em 3em 2em; height: 30vh; max-height: 30em; min-height: 20em; } } - @media screen and (max-width: 980px) { + @media screen and (max-width: var.$lg) { article { width: 50% !important; } } - @media screen and (max-width: 736px) { + @media screen and (max-width: var.$md) { article { - padding: 3em 1.5em 1em 1.5em; + padding: 3em 1.5em 1em; height: 16em; max-height: none; min-height: 0; @@ -138,7 +136,7 @@ } } - @media screen and (max-width: 480px) { + @media screen and (max-width: var.$sm) { display: block; article { @@ -146,4 +144,4 @@ width: 100% !important; } } -} \ No newline at end of file +} diff --git a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.scss b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.scss deleted file mode 100644 index 88f8389..0000000 --- a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.scss +++ /dev/null @@ -1 +0,0 @@ -@use "../../SCSS/components/default"; \ No newline at end of file diff --git a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.stories.js b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.stories.js index e0ce770..6fbb859 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.stories.js +++ b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.stories.js @@ -1,5 +1,4 @@ import createCTA from "./cta.twig"; -import "./cta.scss"; export default { title: "Molecules/CTA", diff --git a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig index 48c6f63..cbe5ce0 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig +++ b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig @@ -5,10 +5,7 @@

{{ subtitle }}

- diff --git a/web/app/themes/dp-timber-theme/components/molecule/icons/icons.twig b/web/app/themes/dp-timber-theme/components/molecule/icons/icons.twig index 19fac45..e998736 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/icons/icons.twig +++ b/web/app/themes/dp-timber-theme/components/molecule/icons/icons.twig @@ -7,4 +7,3 @@ {% endfor %} {% endif %} - diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss index 970220a..58e2665 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss @@ -12,8 +12,8 @@ footer { padding-left: 0; li { - border-left: solid 1px rgba(212, 212, 255, 0.1); - color: rgba(244, 244, 255, 0.2); + border-left: solid 1px var.$footer-border-color; + color: var.$footer-color; display: inline-block; line-height: 1; margin-left: 1em; @@ -48,23 +48,22 @@ footer { } } - @media screen and (max-width: 736px) { + @media screen and (max-width: var.$md) { li { padding: 0 0.75em 0 0; } } - @media screen and (max-width: 480px) { - - .copyright li { - display: block; - border-left: 0; - margin-left: 0; - padding-left: 0; - line-height: inherit; + @media screen and (max-width: var.$sm) { + .copyright { + li { + display: block; + border-left: 0; + margin-left: 0; + padding-left: 0; + line-height: inherit; + } } - } } - -} \ No newline at end of file +} diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js index 23dad71..45fac80 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js @@ -1,7 +1,6 @@ import "./footer.scss" import footers from "./footer.twig"; - export default { title: "organisms/Footers", render: ({ ...args }) => { diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig index 9022048..c0433d0 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig @@ -12,4 +12,3 @@ - diff --git a/web/app/themes/dp-timber-theme/components/organisms/Main/main.stories.js b/web/app/themes/dp-timber-theme/components/organisms/Main/main.stories.js index 9dd23c5..ecdd6a9 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Main/main.stories.js +++ b/web/app/themes/dp-timber-theme/components/organisms/Main/main.stories.js @@ -8,4 +8,4 @@ export default { } } -export const Default = {} \ No newline at end of file +export const Default = {} diff --git a/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig b/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig index 6494e96..0177610 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig +++ b/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig @@ -1,4 +1,5 @@ {% include '@molecules/Hero/hero.twig' with { bgImage: "https://html5up.net/uploads/demos/forty/images/banner.jpg", title: "Hi, my name is Forty", subtitle: "A RESPONSIVE SITE TEMPLATE DESIGNED BY HTML5 UP
AND RELEASED UNDER THE CREATIVE COMMONS." } %} + {% include '@molecules/Tiles/tiles.twig' with { articles: [ { imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic01.jpg', @@ -39,4 +40,3 @@ ], } %} {% include '@molecules/cta-text/cta.twig' with { title: "Massa libero", subtitle: "Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet pharetra et feugiat tempus.", } %} - diff --git a/web/app/themes/dp-timber-theme/components/storybook/storybook.scss b/web/app/themes/dp-timber-theme/components/storybook/storybook.scss index ff120b9..d80c45f 100644 --- a/web/app/themes/dp-timber-theme/components/storybook/storybook.scss +++ b/web/app/themes/dp-timber-theme/components/storybook/storybook.scss @@ -1,6 +1,7 @@ .sb-show-main.sb-main-padded { padding: 0; } + .card-container { max-width: 600px; -} \ No newline at end of file +} diff --git a/web/app/themes/dp-timber-theme/components/style.scss b/web/app/themes/dp-timber-theme/components/style.scss index 0174e4e..852e7ff 100644 --- a/web/app/themes/dp-timber-theme/components/style.scss +++ b/web/app/themes/dp-timber-theme/components/style.scss @@ -1,6 +1,7 @@ // Add global styling here. +@use "SCSS/components/default"; + body { padding: 0; margin: 0; } - From 7c1f30a3be1bcf85f50aba14087883cd090fb9db Mon Sep 17 00:00:00 2001 From: Shayaan Date: Thu, 4 Jul 2024 15:56:19 +0530 Subject: [PATCH 03/10] OS: 47- Fixed Naming Conventions --- .../atoms/{Get Started => get-started}/button.scss | 2 +- .../atoms/{Get Started => get-started}/button.stories.js | 0 .../atoms/{Get Started => get-started}/button.twig | 0 .../themes/dp-timber-theme/components/atoms/icon/icon.scss | 2 +- .../dp-timber-theme/components/molecule/Hero/hero.scss | 5 +++-- .../dp-timber-theme/components/molecule/Hero/hero.twig | 2 +- .../dp-timber-theme/components/molecule/Tiles/tiles.scss | 2 +- .../dp-timber-theme/components/molecule/cta-text/cta.twig | 2 +- .../dp-timber-theme/components/organisms/Footer/footer.scss | 4 ++-- .../components/organisms/Header/Header.stories.js | 2 +- .../dp-timber-theme/components/organisms/Main/main.twig | 4 ++-- .../dp-timber-theme/components/pages/Homepage/homepage.twig | 6 +++--- 12 files changed, 16 insertions(+), 15 deletions(-) rename web/app/themes/dp-timber-theme/components/atoms/{Get Started => get-started}/button.scss (90%) rename web/app/themes/dp-timber-theme/components/atoms/{Get Started => get-started}/button.stories.js (100%) rename web/app/themes/dp-timber-theme/components/atoms/{Get Started => get-started}/button.twig (100%) 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 similarity index 90% rename from web/app/themes/dp-timber-theme/components/atoms/Get Started/button.scss rename to web/app/themes/dp-timber-theme/components/atoms/get-started/button.scss index 2663deb..83ec816 100644 --- 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 @@ -1,4 +1,4 @@ -@use "../../SCSS/_variables/index.scss" as var; +@use "../../scss/_variables/index.scss" as var; button { @include var.transition-properties((background-color, box-shadow, color), 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 similarity index 100% rename from web/app/themes/dp-timber-theme/components/atoms/Get Started/button.stories.js rename to web/app/themes/dp-timber-theme/components/atoms/get-started/button.stories.js 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 similarity index 100% rename from web/app/themes/dp-timber-theme/components/atoms/Get Started/button.twig rename to web/app/themes/dp-timber-theme/components/atoms/get-started/button.twig 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 index 93f74af..d50e8d5 100644 --- a/web/app/themes/dp-timber-theme/components/atoms/icon/icon.scss +++ b/web/app/themes/dp-timber-theme/components/atoms/icon/icon.scss @@ -1,5 +1,5 @@ // Import Bootstrap icons -@use "../../SCSS/_variables/index.scss" as var; +@use "../../scss/_variables/index.scss" as var; @import "~bootstrap-icons/font/bootstrap-icons.css"; .icon { diff --git a/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss index fa29a5c..9249a2b 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss +++ b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss @@ -1,5 +1,5 @@ -@use "../../SCSS/_variables/index.scss" as var; -@use "../../SCSS/components/default"; +@use "../../scss/_variables/index.scss" as var; +@use "../../scss/components/default"; .hero { @include var.displayFlex; @@ -9,6 +9,7 @@ @include var.background; border-bottom: 0; height: 60vh; + margin-bottom: -3.25em; max-height: 32em; min-height: 22em; position: relative; diff --git a/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.twig b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.twig index 751cb09..7261e43 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.twig +++ b/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.twig @@ -7,7 +7,7 @@

{{ subtitle | upper }}

  • - {% include '@atoms/Get Started/button.twig' %} + {% include '@atoms/get-started/button.twig' %}
diff --git a/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss b/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss index 7ede819..5d59207 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss +++ b/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss @@ -1,4 +1,4 @@ -@use "../../SCSS/_variables/index.scss" as var; +@use "../../scss/_variables/index.scss" as var; .tiles { @include var.displayFlex; diff --git a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig index cbe5ce0..19c468f 100644 --- a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig +++ b/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig @@ -5,7 +5,7 @@

{{ subtitle }}

    -
  • {% include '@atoms/Get Started/button.twig' %}
    • +
  • {% include '@atoms/get-started/button.twig' %}
diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss index 58e2665..7870ee5 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss @@ -1,5 +1,5 @@ -@use "../../SCSS/_variables/index.scss" as var; -@use "../../SCSS/components/default"; +@use "../../scss/_variables/index.scss" as var; +@use "../../scss/components/default"; footer { diff --git a/web/app/themes/dp-timber-theme/components/organisms/Header/Header.stories.js b/web/app/themes/dp-timber-theme/components/organisms/Header/Header.stories.js index e875747..7040026 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Header/Header.stories.js +++ b/web/app/themes/dp-timber-theme/components/organisms/Header/Header.stories.js @@ -1,4 +1,4 @@ -import header from "./Header.twig"; +import header from "./header.twig"; // import menuData from "./menus.yml"; import menuData from "./menus.json"; diff --git a/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig b/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig index 0177610..1d49ee6 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig +++ b/web/app/themes/dp-timber-theme/components/organisms/Main/main.twig @@ -1,6 +1,6 @@ -{% include '@molecules/Hero/hero.twig' with { bgImage: "https://html5up.net/uploads/demos/forty/images/banner.jpg", title: "Hi, my name is Forty", subtitle: "A RESPONSIVE SITE TEMPLATE DESIGNED BY HTML5 UP
AND RELEASED UNDER THE CREATIVE COMMONS." } %} +{% include '@molecules/hero/hero.twig' with { bgImage: "https://html5up.net/uploads/demos/forty/images/banner.jpg", title: "Hi, my name is Forty", subtitle: "A RESPONSIVE SITE TEMPLATE DESIGNED BY HTML5 UP
AND RELEASED UNDER THE CREATIVE COMMONS." } %} -{% include '@molecules/Tiles/tiles.twig' with { articles: [ +{% include '@molecules/tiles/tiles.twig' with { articles: [ { imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic01.jpg', title: 'Aliquam', diff --git a/web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.twig b/web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.twig index f6ef8a5..7d80f61 100644 --- a/web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.twig +++ b/web/app/themes/dp-timber-theme/components/pages/Homepage/homepage.twig @@ -1,3 +1,3 @@ -{% include '@organisms/Header/Header.twig' %} -{% include '@organisms/Main/main.twig' %} -{% include '@organisms/Footer/footer.twig' %} +{% include '@organisms/header/header.twig' %} +{% include '@organisms/main/main.twig' %} +{% include '@organisms/footer/footer.twig' %} From 711faae877416dd51c5b9d4c2abba142e40e2c62 Mon Sep 17 00:00:00 2001 From: Shayaan Date: Thu, 4 Jul 2024 16:19:51 +0530 Subject: [PATCH 04/10] OS: 47- Updated the code --- .../dp-timber-theme/components/organisms/Footer/footer.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig index c0433d0..2fb09d0 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig @@ -2,7 +2,7 @@
{% include "@molecules/icons/icons.twig" with { icons: socialMediaIcons} %}
    -
  • © Untitled
    • +
  • {% include "../../../views/footer.twig" %}
  • Design: HTML5 UP
    • From f73d0deae0a8d9c4bdaa4d6e83ac3478614dd6f9 Mon Sep 17 00:00:00 2001 From: Shayaan Date: Thu, 4 Jul 2024 16:49:13 +0530 Subject: [PATCH 05/10] OS: 48- File Name changes to lower case --- .../themes/dp-timber-theme/.storybook/main.js | 2 +- .../{molecule => molecules}/Introduction.mdx | 0 .../Card => molecules/card}/card.scss | 0 .../Card => molecules/card}/card.stories.js | 0 .../Card => molecules/card}/card.twig | 0 .../cta-text/cta.stories.js | 0 .../{molecule => molecules}/cta-text/cta.twig | 0 .../Hero => molecules/hero}/hero.scss | 0 .../Hero => molecules/hero}/hero.stories.js | 0 .../Hero => molecules/hero}/hero.twig | 0 .../icons/icons.stories.js | 0 .../{molecule => molecules}/icons/icons.twig | 0 .../Tiles => molecules/tiles}/tiles.scss | 0 .../tiles}/tiles.stories.js | 0 .../Tiles => molecules/tiles}/tiles.twig | 0 .../components/organisms/footer/footer.scss | 69 ++++++++++++++ .../organisms/footer/footer.stories.js | 41 +++++++++ .../components/organisms/footer/footer.twig | 14 +++ .../organisms/header/Header.stories.js | 30 +++++++ .../components/organisms/header/header.twig | 23 +++++ .../components/organisms/header/menus.json | 25 ++++++ .../components/organisms/header/menus.yml | 11 +++ .../components/organisms/main/main.stories.js | 11 +++ .../components/organisms/main/main.twig | 42 +++++++++ .../pages/homepage/homepage.stories.js | 40 +++++++++ .../components/pages/homepage/homepage.twig | 3 + .../scss/_variables/_breakpoints.scss | 5 ++ .../components/scss/_variables/_colors.scss | 14 +++ .../components/scss/_variables/_mixins.scss | 90 +++++++++++++++++++ .../components/scss/_variables/index.scss | 3 + .../components/scss/components/_default.scss | 76 ++++++++++++++++ 31 files changed, 498 insertions(+), 1 deletion(-) rename web/app/themes/dp-timber-theme/components/{molecule => molecules}/Introduction.mdx (100%) rename web/app/themes/dp-timber-theme/components/{molecule/Card => molecules/card}/card.scss (100%) rename web/app/themes/dp-timber-theme/components/{molecule/Card => molecules/card}/card.stories.js (100%) rename web/app/themes/dp-timber-theme/components/{molecule/Card => molecules/card}/card.twig (100%) rename web/app/themes/dp-timber-theme/components/{molecule => molecules}/cta-text/cta.stories.js (100%) rename web/app/themes/dp-timber-theme/components/{molecule => molecules}/cta-text/cta.twig (100%) rename web/app/themes/dp-timber-theme/components/{molecule/Hero => molecules/hero}/hero.scss (100%) rename web/app/themes/dp-timber-theme/components/{molecule/Hero => molecules/hero}/hero.stories.js (100%) rename web/app/themes/dp-timber-theme/components/{molecule/Hero => molecules/hero}/hero.twig (100%) rename web/app/themes/dp-timber-theme/components/{molecule => molecules}/icons/icons.stories.js (100%) rename web/app/themes/dp-timber-theme/components/{molecule => molecules}/icons/icons.twig (100%) rename web/app/themes/dp-timber-theme/components/{molecule/Tiles => molecules/tiles}/tiles.scss (100%) rename web/app/themes/dp-timber-theme/components/{molecule/Tiles => molecules/tiles}/tiles.stories.js (100%) rename web/app/themes/dp-timber-theme/components/{molecule/Tiles => molecules/tiles}/tiles.twig (100%) create mode 100644 web/app/themes/dp-timber-theme/components/organisms/footer/footer.scss create mode 100644 web/app/themes/dp-timber-theme/components/organisms/footer/footer.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/organisms/footer/footer.twig create mode 100644 web/app/themes/dp-timber-theme/components/organisms/header/Header.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/organisms/header/header.twig create mode 100644 web/app/themes/dp-timber-theme/components/organisms/header/menus.json create mode 100644 web/app/themes/dp-timber-theme/components/organisms/header/menus.yml create mode 100644 web/app/themes/dp-timber-theme/components/organisms/main/main.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/organisms/main/main.twig create mode 100644 web/app/themes/dp-timber-theme/components/pages/homepage/homepage.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/pages/homepage/homepage.twig create mode 100644 web/app/themes/dp-timber-theme/components/scss/_variables/_breakpoints.scss create mode 100644 web/app/themes/dp-timber-theme/components/scss/_variables/_colors.scss create mode 100644 web/app/themes/dp-timber-theme/components/scss/_variables/_mixins.scss create mode 100644 web/app/themes/dp-timber-theme/components/scss/_variables/index.scss create mode 100644 web/app/themes/dp-timber-theme/components/scss/components/_default.scss diff --git a/web/app/themes/dp-timber-theme/.storybook/main.js b/web/app/themes/dp-timber-theme/.storybook/main.js index 70ad043..878245e 100644 --- a/web/app/themes/dp-timber-theme/.storybook/main.js +++ b/web/app/themes/dp-timber-theme/.storybook/main.js @@ -56,7 +56,7 @@ const config = { }); const twigAlias = { "@atoms": path.resolve(__dirname, '../', 'components/atoms'), - "@molecules": path.resolve(__dirname, '../', 'components/molecule'), + "@molecules": path.resolve(__dirname, '../', 'components/molecules'), "@organisms": path.resolve(__dirname, '../', 'components/organisms'), "@templates": path.resolve(__dirname, '../', 'components/templates'), "@pages": path.resolve(__dirname, '../', 'components/pages'), 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/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 100% 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 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 100% 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 diff --git a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.stories.js b/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.stories.js similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.stories.js rename to web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.stories.js diff --git a/web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig b/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.twig similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/cta-text/cta.twig rename to web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.twig diff --git a/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.scss similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/Hero/hero.scss rename to web/app/themes/dp-timber-theme/components/molecules/hero/hero.scss diff --git a/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.stories.js b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.stories.js similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/Hero/hero.stories.js rename to web/app/themes/dp-timber-theme/components/molecules/hero/hero.stories.js diff --git a/web/app/themes/dp-timber-theme/components/molecule/Hero/hero.twig b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.twig similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/Hero/hero.twig rename to web/app/themes/dp-timber-theme/components/molecules/hero/hero.twig diff --git a/web/app/themes/dp-timber-theme/components/molecule/icons/icons.stories.js b/web/app/themes/dp-timber-theme/components/molecules/icons/icons.stories.js similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/icons/icons.stories.js rename to web/app/themes/dp-timber-theme/components/molecules/icons/icons.stories.js diff --git a/web/app/themes/dp-timber-theme/components/molecule/icons/icons.twig b/web/app/themes/dp-timber-theme/components/molecules/icons/icons.twig similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/icons/icons.twig rename to web/app/themes/dp-timber-theme/components/molecules/icons/icons.twig diff --git a/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss b/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.scss similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.scss rename to web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.scss diff --git a/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.stories.js b/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.stories.js similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.stories.js rename to web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.stories.js diff --git a/web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.twig b/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.twig similarity index 100% rename from web/app/themes/dp-timber-theme/components/molecule/Tiles/tiles.twig rename to web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.twig diff --git a/web/app/themes/dp-timber-theme/components/organisms/footer/footer.scss b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.scss new file mode 100644 index 0000000..7870ee5 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.scss @@ -0,0 +1,69 @@ +@use "../../scss/_variables/index.scss" as var; +@use "../../scss/components/default"; + + +footer { + background: var.$martinique; + color: var.$white; + + .copyright { + font-size: 0.8em; + list-style: none; + padding-left: 0; + + li { + border-left: solid 1px var.$footer-border-color; + color: var.$footer-color; + display: inline-block; + line-height: 1; + margin-left: 1em; + padding-left: 1em; + + &:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + } + } + + .inner { + padding: 4em 0 2em 0; + margin: 0 auto; + max-width: 65em; + width: calc(100% - 6em); + } + + ul { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 1em 0 0; + + :last-child { + padding-right: 0; + } + } + + @media screen and (max-width: var.$md) { + li { + padding: 0 0.75em 0 0; + } + } + + @media screen and (max-width: var.$sm) { + .copyright { + li { + display: block; + border-left: 0; + margin-left: 0; + padding-left: 0; + line-height: inherit; + } + } + } + } +} diff --git a/web/app/themes/dp-timber-theme/components/organisms/footer/footer.stories.js b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.stories.js new file mode 100644 index 0000000..45fac80 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.stories.js @@ -0,0 +1,41 @@ +import "./footer.scss" +import footers from "./footer.twig"; + +export default { + title: "organisms/Footers", + render: ({ ...args }) => { + return footers({ ...args }) + } +} + +export const Default = {} + +Default.args = { + socialMediaIcons: [ + { + "iconClass": "bi-twitter-x", + "label": "Twitter", + "url": "#" + }, + { + "iconClass": "bi-facebook", + "label": "Facebook", + "url": "#" + }, + { + "iconClass": "bi-instagram", + "label": "Instagram", + "url": "#" + }, + { + "iconClass": "bi-github", + "label": "GitHub", + "url": "#" + }, + { + "iconClass": "bi-linkedin", + "label": "LinkedIn", + "url": "#" + } + ] +} diff --git a/web/app/themes/dp-timber-theme/components/organisms/footer/footer.twig b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.twig new file mode 100644 index 0000000..2fb09d0 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.twig @@ -0,0 +1,14 @@ +
    +
    + {% include "@molecules/icons/icons.twig" with { icons: socialMediaIcons} %} +
      +
    • {% include "../../../views/footer.twig" %}
      • +
    • Design: + HTML5 UP +
      • +
    • Demo Images: + Unsplash +
      • +
    +
    +
    diff --git a/web/app/themes/dp-timber-theme/components/organisms/header/Header.stories.js b/web/app/themes/dp-timber-theme/components/organisms/header/Header.stories.js new file mode 100644 index 0000000..7040026 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/header/Header.stories.js @@ -0,0 +1,30 @@ +import header from "./header.twig"; +// import menuData from "./menus.yml"; +import menuData from "./menus.json"; + +export default { + title: "Organisms/Header", + tags: ["autodocs"], + argTypes: { + siteTitle: { control: "text" }, + logoImage: { + control: { + type: "file", + accept: ["image/*"], + }, + }, + darkTheme: { control: "boolean" }, + }, + render: ({ ...args }) => { + return header({ ...args }); + }, +}; + +export const Default = {}; + +Default.args = { + siteTitle: "Bootstrap", + menuData: menuData.menu, + logoImage: null, + darkTheme: false, +}; diff --git a/web/app/themes/dp-timber-theme/components/organisms/header/header.twig b/web/app/themes/dp-timber-theme/components/organisms/header/header.twig new file mode 100644 index 0000000..ef35c98 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/header/header.twig @@ -0,0 +1,23 @@ + diff --git a/web/app/themes/dp-timber-theme/components/organisms/header/menus.json b/web/app/themes/dp-timber-theme/components/organisms/header/menus.json new file mode 100644 index 0000000..7a9c3f2 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/header/menus.json @@ -0,0 +1,25 @@ +{ + "menu": [ + { + "title": "Home", + "url": "/#" + }, + { + "title": "About", + "url": "/about" + }, + { + "title": "Services", + "url": "/services" + }, + { + "title": "Blog", + "url": "/blog" + }, + { + "title": "Contact", + "url": "/contact" + } + ] + } + \ No newline at end of file diff --git a/web/app/themes/dp-timber-theme/components/organisms/header/menus.yml b/web/app/themes/dp-timber-theme/components/organisms/header/menus.yml new file mode 100644 index 0000000..cd019a7 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/header/menus.yml @@ -0,0 +1,11 @@ +menu: + - title: Home + url: /# + - title: About + url: /about + - title: Services + url: /services + - title: Blog + url: /blog + - title: Contact + url: /contact diff --git a/web/app/themes/dp-timber-theme/components/organisms/main/main.stories.js b/web/app/themes/dp-timber-theme/components/organisms/main/main.stories.js new file mode 100644 index 0000000..ecdd6a9 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/main/main.stories.js @@ -0,0 +1,11 @@ +import main from "./main.twig"; + +export default { + title: "organisms/Main", + tags: ['autodocs'], + render: ({ ...args }) => { + return main({ ...args }) + } +} + +export const Default = {} diff --git a/web/app/themes/dp-timber-theme/components/organisms/main/main.twig b/web/app/themes/dp-timber-theme/components/organisms/main/main.twig new file mode 100644 index 0000000..1d49ee6 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/organisms/main/main.twig @@ -0,0 +1,42 @@ +{% include '@molecules/hero/hero.twig' with { bgImage: "https://html5up.net/uploads/demos/forty/images/banner.jpg", title: "Hi, my name is Forty", subtitle: "A RESPONSIVE SITE TEMPLATE DESIGNED BY HTML5 UP
    AND RELEASED UNDER THE CREATIVE COMMONS." } %} + +{% include '@molecules/tiles/tiles.twig' with { articles: [ + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic01.jpg', + title: 'Aliquam', + link: '#', + description: 'Ipsum dolor sit amet', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic02.jpg', + title: 'Tempus', + link: '#', + description: 'Feugiat amet tempus', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic03.jpg', + title: 'Magna', + link: '#', + description: 'Lorem etiam nullam', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic04.jpg', + title: 'Ipsum', + link: '#', + description: 'Nisl sed aliquam', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic05.jpg', + title: 'Consequat', + link: '#', + description: 'Ipsum dolor sit amet', + }, + { + imageUrl: 'https://html5up.net/uploads/demos/forty/images/pic06.jpg', + title: 'Etiam', + link: '#', + description: 'Feugiat amet tempus', + }, + ], } %} +{% include '@molecules/cta-text/cta.twig' with { title: "Massa libero", + subtitle: "Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet pharetra et feugiat tempus.", } %} diff --git a/web/app/themes/dp-timber-theme/components/pages/homepage/homepage.stories.js b/web/app/themes/dp-timber-theme/components/pages/homepage/homepage.stories.js new file mode 100644 index 0000000..a6b35f8 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/pages/homepage/homepage.stories.js @@ -0,0 +1,40 @@ +import Homepage from "./homepage.twig"; + +export default { + title: "Pages/Homepage", + tags: ['autodocs'], + render: ({ ...args }) => { + return Homepage({ ...args }) + } +} + +export const Default = {} +Default.args = { + socialMediaIcons: [ + { + "iconClass": "bi-twitter-x", + "label": "Twitter", + "url": "#" + }, + { + "iconClass": "bi-facebook", + "label": "Facebook", + "url": "#" + }, + { + "iconClass": "bi-instagram", + "label": "Instagram", + "url": "#" + }, + { + "iconClass": "bi-github", + "label": "GitHub", + "url": "#" + }, + { + "iconClass": "bi-linkedin", + "label": "LinkedIn", + "url": "#" + } + ] +} diff --git a/web/app/themes/dp-timber-theme/components/pages/homepage/homepage.twig b/web/app/themes/dp-timber-theme/components/pages/homepage/homepage.twig new file mode 100644 index 0000000..7d80f61 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/pages/homepage/homepage.twig @@ -0,0 +1,3 @@ +{% include '@organisms/header/header.twig' %} +{% include '@organisms/main/main.twig' %} +{% include '@organisms/footer/footer.twig' %} diff --git a/web/app/themes/dp-timber-theme/components/scss/_variables/_breakpoints.scss b/web/app/themes/dp-timber-theme/components/scss/_variables/_breakpoints.scss new file mode 100644 index 0000000..7f6c0f6 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/scss/_variables/_breakpoints.scss @@ -0,0 +1,5 @@ +$sm: "480px"; +$md: "736px"; +$lg: "980px"; +$xl: "1200px"; +$xxl: "1400px"; diff --git a/web/app/themes/dp-timber-theme/components/scss/_variables/_colors.scss b/web/app/themes/dp-timber-theme/components/scss/_variables/_colors.scss new file mode 100644 index 0000000..114f6f3 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/scss/_variables/_colors.scss @@ -0,0 +1,14 @@ +$white: #ffff; +$black: #000; +$viking: #6fc3df; +$blue-bell: #8d82c4; +$apricot: #ec8d81; +$gold-sand: #e7b788; +$portage: #8ea9e8; +$de-york: #87c5a4; +$ebony-clay: #242943; +$martinique: #2a2f4a; +$shakepseare: #37a6cb; +$tiles-bg-color: rgba(36, 41, 67, 0.25); +$footer-border-color: rgba(212, 212, 255, 0.1); +$footer-color: rgba(244, 244, 255, 0.2); diff --git a/web/app/themes/dp-timber-theme/components/scss/_variables/_mixins.scss b/web/app/themes/dp-timber-theme/components/scss/_variables/_mixins.scss new file mode 100644 index 0000000..52c8290 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/scss/_variables/_mixins.scss @@ -0,0 +1,90 @@ +@mixin flexCenter { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; +} + +@mixin displayFlex { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; +} +@mixin flexWrap { + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +@mixin transition-background($duration) { + -moz-transition: + background-color $duration ease-in-out, + box-shadow $duration ease-in-out, + color $duration ease-in-out; + -webkit-transition: + background-color $duration ease-in-out, + box-shadow $duration ease-in-out, + color $duration ease-in-out; + -ms-transition: + background-color $duration ease-in-out, + box-shadow $duration ease-in-out, + color $duration ease-in-out; + transition: + background-color $duration ease-in-out, + box-shadow $duration ease-in-out, + color $duration ease-in-out; +} + +@mixin transition-opacity($duration) { + -moz-transition: + -moz-transform $duration ease, + opacity $duration ease, + -moz-filter 1s ease, + -webkit-filter 1s ease; + -webkit-transition: + -webkit-transform $duration ease, + opacity $duration ease, + -webkit-filter 1s ease; + -ms-transition: + -ms-transform $duration ease, + opacity $duration ease, + -ms-filter 1s ease; + transition: + transform $duration ease, + opacity $duration ease, + filter 1s ease, + -webkit-filter 1s ease; +} + +@mixin transform-scale-blur($scale, $blur) { + -moz-transform: scale($scale); + -webkit-transform: scale($scale); + -ms-transform: scale($scale); + transform: scale($scale); + -moz-filter: blur($blur); + -webkit-filter: blur($blur); + -ms-filter: blur($blur); + filter: blur($blur); +} + + +@mixin transition-properties( + $properties: (), + $duration: 0.25s, + $timing: ease-in-out +) { + @each $property in $properties { + -moz-transition: #{$property} $duration $timing; + -webkit-transition: #{$property} $duration $timing; + -ms-transition: #{$property} $duration $timing; + transition: #{$property} $duration $timing; + } +} + +@mixin background { + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} diff --git a/web/app/themes/dp-timber-theme/components/scss/_variables/index.scss b/web/app/themes/dp-timber-theme/components/scss/_variables/index.scss new file mode 100644 index 0000000..1c93d82 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/scss/_variables/index.scss @@ -0,0 +1,3 @@ +@forward "mixins"; +@forward "colors"; +@forward "breakpoints"; diff --git a/web/app/themes/dp-timber-theme/components/scss/components/_default.scss b/web/app/themes/dp-timber-theme/components/scss/components/_default.scss new file mode 100644 index 0000000..ad2807a --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/scss/components/_default.scss @@ -0,0 +1,76 @@ +@use "../_variables/index" as var; + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var.$white; + font-weight: 600; + line-height: 1.65; + margin: 0 0 1em; +} + +p { + font-size: 0.7em; + font-weight: 600; + letter-spacing: 0.25em; + margin: 0 0 2em; + text-transform: uppercase; + color: var.$white; +} + +a { + @include var.transition-properties((color, border-bottom-color), 0.5s); + color: inherit; + text-decoration: none; +} + +h1 { + font-size: 3.25em; +} + +header { + margin-bottom: 2em; +} + +header> :first-child:after { + content: ''; + background-color: var.$white; + display: block; + height: 2px; + margin: 0.325em 0 0.5em; + width: 100%; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + + +.main { + background-color: var.$martinique; + + .inner { + padding: 4em 0 2em; + margin: 0 auto; + max-width: 65em; + width: calc(100% - 6em); + + @media screen and (max-width: var.$md) { + padding: 3em 0 1em; + width: calc(100% - 3em); + } + } +} From f573c62d31d8f1ce49f4bc99a21fdce2390bc811 Mon Sep 17 00:00:00 2001 From: Shayaan Date: Fri, 5 Jul 2024 20:29:16 +0530 Subject: [PATCH 06/10] OS: 50, 51 & 52- Create Header, Contact & Generic Page --- .../SCSS/_variables/_breakpoints.scss | 1 + .../components/SCSS/_variables/_colors.scss | 4 + .../components/SCSS/components/_default.scss | 25 +- .../components/atoms/get-started/button.scss | 24 ++ .../atoms/get-started/button.stories.js | 18 +- .../components/atoms/get-started/button.twig | 10 +- .../components/atoms/input/input.scss | 45 +++ .../components/atoms/input/input.stories.js | 22 ++ .../components/atoms/input/input.twig | 6 + .../molecules/article/article.stories.js | 15 + .../components/molecules/article/article.twig | 15 + .../molecules/contact-info/contact-info.scss | 21 ++ .../contact-info/contact-info.stories.js | 33 ++ .../molecules/contact-info/contact-info.twig | 16 + .../molecules/cta-text/cta.stories.js | 1 + .../components/molecules/cta-text/cta.twig | 8 +- .../components/molecules/form/form.scss | 52 +++ .../components/molecules/form/form.stories.js | 12 + .../components/molecules/form/form.twig | 29 ++ .../components/molecules/hero/hero.scss | 12 +- .../components/molecules/hero/hero.twig | 5 +- .../components/molecules/tiles/tiles.scss | 4 +- .../components/molecules/tiles/tiles.twig | 2 +- .../components/organisms/Footer/footer.scss | 2 - .../organisms/Footer/footer.stories.js | 62 ++-- .../components/organisms/Footer/footer.twig | 1 + .../organisms/Header/Header.stories.js | 30 -- .../components/organisms/Header/Header.twig | 23 -- .../components/organisms/Header/menus.json | 25 -- .../components/organisms/Header/menus.yml | 11 - .../components/organisms/Main/main.stories.js | 1 + .../components/organisms/Main/main.twig | 4 + .../components/organisms/contact/contact.scss | 69 ++++ .../organisms/contact/contact.stories.js | 19 ++ .../components/organisms/contact/contact.twig | 12 + .../components/organisms/footer/footer.scss | 2 - .../organisms/footer/footer.stories.js | 62 ++-- .../components/organisms/footer/footer.twig | 1 + .../components/organisms/head/header.js | 40 +++ .../components/organisms/head/header.scss | 318 ++++++++++++++++++ .../organisms/head/header.stories.js | 23 ++ .../components/organisms/head/header.twig | 40 +++ .../components/organisms/head/menus.json | 21 ++ .../organisms/header/Header.stories.js | 30 -- .../components/organisms/header/header.twig | 23 -- .../components/organisms/header/menus.json | 25 -- .../components/organisms/header/menus.yml | 11 - .../components/organisms/main/main.scss | 6 + .../components/organisms/main/main.stories.js | 1 + .../components/organisms/main/main.twig | 4 + .../pages/Homepage/homepage.stories.js | 45 +-- .../components/pages/Homepage/homepage.twig | 3 +- .../pages/generic/generic.stories.js | 27 ++ .../components/pages/generic/generic.twig | 4 + .../pages/homepage/homepage.stories.js | 45 +-- .../components/pages/homepage/homepage.twig | 3 +- .../scss/_variables/_breakpoints.scss | 1 + .../components/scss/_variables/_colors.scss | 4 + .../components/scss/components/_default.scss | 25 +- .../dp-timber-theme/components/style.scss | 17 +- 60 files changed, 1084 insertions(+), 336 deletions(-) create mode 100644 web/app/themes/dp-timber-theme/components/atoms/input/input.scss create mode 100644 web/app/themes/dp-timber-theme/components/atoms/input/input.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/atoms/input/input.twig create mode 100644 web/app/themes/dp-timber-theme/components/molecules/article/article.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/molecules/article/article.twig create mode 100644 web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.scss create mode 100644 web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.twig create mode 100644 web/app/themes/dp-timber-theme/components/molecules/form/form.scss create mode 100644 web/app/themes/dp-timber-theme/components/molecules/form/form.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/molecules/form/form.twig delete mode 100644 web/app/themes/dp-timber-theme/components/organisms/Header/Header.stories.js delete mode 100644 web/app/themes/dp-timber-theme/components/organisms/Header/Header.twig delete mode 100644 web/app/themes/dp-timber-theme/components/organisms/Header/menus.json delete mode 100644 web/app/themes/dp-timber-theme/components/organisms/Header/menus.yml create mode 100644 web/app/themes/dp-timber-theme/components/organisms/contact/contact.scss create mode 100644 web/app/themes/dp-timber-theme/components/organisms/contact/contact.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/organisms/contact/contact.twig create mode 100644 web/app/themes/dp-timber-theme/components/organisms/head/header.js create mode 100644 web/app/themes/dp-timber-theme/components/organisms/head/header.scss create mode 100644 web/app/themes/dp-timber-theme/components/organisms/head/header.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/organisms/head/header.twig create mode 100644 web/app/themes/dp-timber-theme/components/organisms/head/menus.json delete mode 100644 web/app/themes/dp-timber-theme/components/organisms/header/Header.stories.js delete mode 100644 web/app/themes/dp-timber-theme/components/organisms/header/header.twig delete mode 100644 web/app/themes/dp-timber-theme/components/organisms/header/menus.json delete mode 100644 web/app/themes/dp-timber-theme/components/organisms/header/menus.yml create mode 100644 web/app/themes/dp-timber-theme/components/organisms/main/main.scss create mode 100644 web/app/themes/dp-timber-theme/components/pages/generic/generic.stories.js create mode 100644 web/app/themes/dp-timber-theme/components/pages/generic/generic.twig diff --git a/web/app/themes/dp-timber-theme/components/SCSS/_variables/_breakpoints.scss b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_breakpoints.scss index 7f6c0f6..1bea7ce 100644 --- a/web/app/themes/dp-timber-theme/components/SCSS/_variables/_breakpoints.scss +++ b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_breakpoints.scss @@ -3,3 +3,4 @@ $md: "736px"; $lg: "980px"; $xl: "1200px"; $xxl: "1400px"; +$xxxl: "1600px" diff --git a/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss index 114f6f3..6e947de 100644 --- a/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss +++ b/web/app/themes/dp-timber-theme/components/SCSS/_variables/_colors.scss @@ -9,6 +9,10 @@ $de-york: #87c5a4; $ebony-clay: #242943; $martinique: #2a2f4a; $shakepseare: #37a6cb; +$anakiwa: #9bf1ff; +$malibu: #53E3FB; +$input-bg: rgba(212, 212, 255, 0.035); $tiles-bg-color: rgba(36, 41, 67, 0.25); $footer-border-color: rgba(212, 212, 255, 0.1); $footer-color: rgba(244, 244, 255, 0.2); +$shadow-color: rgba(0, 0, 0, 0.15); diff --git a/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss b/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss index ad2807a..c74ab18 100644 --- a/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss +++ b/web/app/themes/dp-timber-theme/components/SCSS/components/_default.scss @@ -9,7 +9,7 @@ h6 { color: var.$white; font-weight: 600; line-height: 1.65; - margin: 0 0 1em; + margin: 0 0 0.7em; } p { @@ -32,16 +32,19 @@ h1 { } header { - margin-bottom: 2em; + .major { + width: max-content; + margin-bottom: 2em; + } } -header> :first-child:after { +header.major> :first-child:after { content: ''; background-color: var.$white; display: block; height: 2px; margin: 0.325em 0 0.5em; - width: 100%; + width: calc(100% + 0.6em); } article, @@ -58,9 +61,21 @@ section { display: block; } +.image { + &.main { + display: block; + margin: 2.5em 0; + width: 100%; + } +} .main { - background-color: var.$martinique; + + &.cta-text { + background-color: var.$ebony-clay; + } + // background-color: var.$martinique; + background-color: var.$ebony-clay; .inner { padding: 4em 0 2em; 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 index 83ec816..9e9333e 100644 --- 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 @@ -20,4 +20,28 @@ button { 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 index 3ab957f..9033118 100644 --- 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 @@ -1,12 +1,20 @@ -import button from "./button.twig"; // Get HTML TWIG -import "./button.scss"; // Button Scss +import button from "./button.twig"; +import "./button.scss"; export default { - title: "Atoms/Get Started", // Get Started Name + title: "Atoms/Get Started", + argTypes: { + fill: {control: 'boolean'}, + text: {control: 'text'} + }, render: ({ ...args }) => { return button({ ...args }); }, }; -// I am not passing any Args for this Button -export const Default = {}; +export const Default = { + args: { + fill: true, + text: "Get Started", + } +}; 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 index 196e6d4..6bae817 100644 --- 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 @@ -1 +1,9 @@ - + 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..e883671 --- /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..45ec2f0 --- /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/molecules/article/article.stories.js b/web/app/themes/dp-timber-theme/components/molecules/article/article.stories.js new file mode 100644 index 0000000..1f590a8 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecules/article/article.stories.js @@ -0,0 +1,15 @@ +import article from "./article.twig"; + +export default { + title: "Molecules/Article", + tags: ['autodocs'], + render: ({ ...args }) => { + return article({ ...args }) + } +} + +export const Article = { + args: { + title: "Generic" + } +} 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..940c447 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecules/article/article.twig @@ -0,0 +1,15 @@ +
    +
    +
    +
    +

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

    Donec 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.

    +

    Lorem 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.

    +

    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, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.

    +
    +
    +
    diff --git a/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.scss b/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.scss new file mode 100644 index 0000000..c686a1c --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.scss @@ -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; + } + } +} diff --git a/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.stories.js b/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.stories.js new file mode 100644 index 0000000..bf38d9b --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.stories.js @@ -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
    Nashville, TN 00000
    United States of America" + } + ] +} diff --git a/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.twig b/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.twig new file mode 100644 index 0000000..7606c5f --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.twig @@ -0,0 +1,16 @@ +{% for method in contactMethods %} +
    +
    + {% include '@atoms/icon/icon.twig' with { iconclass: method.icon, iconname: method.title,url: method.url } %} + +

    {{ method.title }}

    + {% if method.title == 'Email' %} + {{ method.url }} + {% elseif method.title == 'Phone' %} + {{ method.url }} + {% else %} + {{ method.url | raw }} + {% endif %} +
    +
    +{% endfor %} diff --git a/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.stories.js b/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.stories.js index 6fbb859..23bf9b2 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.stories.js +++ b/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.stories.js @@ -1,4 +1,5 @@ import createCTA from "./cta.twig"; +import "../../atoms/get-started/button.scss" export default { title: "Molecules/CTA", diff --git a/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.twig b/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.twig index 19c468f..041a490 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.twig +++ b/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.twig @@ -1,11 +1,15 @@ -
    +

    {{ title }}

    {{ subtitle }}

      -
    • {% include '@atoms/get-started/button.twig' %}
      • +
    • {% include '@atoms/get-started/button.twig' with { + fill: false, + text: "Get Started", + width: "w" + } %}
    diff --git a/web/app/themes/dp-timber-theme/components/molecules/form/form.scss b/web/app/themes/dp-timber-theme/components/molecules/form/form.scss new file mode 100644 index 0000000..fc4dbb1 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecules/form/form.scss @@ -0,0 +1,52 @@ +@use "../../scss/_variables/index.scss" as var; + +form { + margin-bottom: 2em; + + :last-child { + margin-bottom: 0; + } + + .fields { + flex-wrap: wrap; + margin: -1.5em 0 2em; + + .field { + flex: 0 0 auto; + padding: 1.5em 0 0 1.5em; + width: calc(100% - 1.5em); + + &.half { + width: calc(50% - 0.75em); + } + + &.third { + width: calc(100% / 3 - 0.5em); + } + + &.quarter { + width: calc(25% - 0.375em); + } + } + } + } + + @media screen and (max-width: var.$sm) { + form { + .fields { + width: calc(100% + 3em); + margin: -1.5em 0 2em -1.5em; + + .field { + width: calc(100% - 1.5em); + + &.half, + &.third, + &.quarter { + width: calc(100% - 1.5em); + } + } + } + } + } + \ No newline at end of file diff --git a/web/app/themes/dp-timber-theme/components/molecules/form/form.stories.js b/web/app/themes/dp-timber-theme/components/molecules/form/form.stories.js new file mode 100644 index 0000000..4aff37e --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecules/form/form.stories.js @@ -0,0 +1,12 @@ +import form from "./form.twig"; +import "./form.scss" +import "../../atoms/input/input.scss" + +export default { + title: "Molecules/Form", + render: ({ ...args }) => { + return form({ ...args }); + }, +}; + +export const Default = {}; diff --git a/web/app/themes/dp-timber-theme/components/molecules/form/form.twig b/web/app/themes/dp-timber-theme/components/molecules/form/form.twig new file mode 100644 index 0000000..5bae533 --- /dev/null +++ b/web/app/themes/dp-timber-theme/components/molecules/form/form.twig @@ -0,0 +1,29 @@ +
    +
    +
    + {% include "@atoms/input/input.twig" with { + name: "name", + type: "text", + label: "Name" + } %} +
    +
    + {% include "@atoms/input/input.twig" with { + name: "email", + type: "email", + label: "Email" + } %} +
    +
    + {% include "@atoms/input/input.twig" with { + name: "message", + type: "textarea", + label: "Message" + } %} +
    +
    +
      +
    • {% include "@atoms/get-started/button.twig" with { fill: true, text: "send message" } %}
      • +
    • {% include "@atoms/get-started/button.twig" with { fill: false, text: "clear" } %}
      • +
    +
    diff --git a/web/app/themes/dp-timber-theme/components/molecules/hero/hero.scss b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.scss index 9249a2b..52a3672 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/hero/hero.scss +++ b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.scss @@ -1,25 +1,23 @@ @use "../../scss/_variables/index.scss" as var; -@use "../../scss/components/default"; .hero { @include var.displayFlex; @include var.flexCenter; - padding: 6em 0 2em; + padding: 9em 0 2em; background-attachment: fixed; @include var.background; border-bottom: 0; - height: 60vh; margin-bottom: -3.25em; - max-height: 32em; - min-height: 22em; position: relative; top: -3.25em; + height: 80vh; color: var.$white; + min-height: 37em; + max-height: 40em; .inner { - padding: 4em 0 2em; margin: 0 auto; - max-width: 65em; + max-width: 68em; width: calc(100% - 6em); z-index: 2; diff --git a/web/app/themes/dp-timber-theme/components/molecules/hero/hero.twig b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.twig index 7261e43..be92c13 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/hero/hero.twig +++ b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.twig @@ -7,7 +7,10 @@

    {{ subtitle | upper }}

    • - {% include '@atoms/get-started/button.twig' %} + {% include '@atoms/get-started/button.twig' with { + fill: false, + text: "Get Started", + } %}
diff --git a/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.scss b/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.scss index 5d59207..ffcc2d5 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.scss +++ b/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.scss @@ -8,9 +8,9 @@ @include var.displayFlex; @include var.flexCenter; @include var.transition-opacity(0.25s); - padding: 4em 4em 2em; + padding: 4em 5em 2em; @include var.background; - height: 40vh; + height: 50vh; max-height: 40em; min-height: 23em; overflow: hidden; diff --git a/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.twig b/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.twig index 90a68df..6d1b1b9 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.twig +++ b/web/app/themes/dp-timber-theme/components/molecules/tiles/tiles.twig @@ -1,7 +1,7 @@
{% for article in articles %}
-
+

{{ article.title }}

diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss index 7870ee5..bd04fc3 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.scss @@ -1,6 +1,4 @@ @use "../../scss/_variables/index.scss" as var; -@use "../../scss/components/default"; - footer { background: var.$martinique; diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js index 45fac80..d1635d3 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.stories.js @@ -1,5 +1,5 @@ -import "./footer.scss" import footers from "./footer.twig"; +import "./footer.scss" export default { title: "organisms/Footers", @@ -8,34 +8,34 @@ export default { } } -export const Default = {} - -Default.args = { - socialMediaIcons: [ - { - "iconClass": "bi-twitter-x", - "label": "Twitter", - "url": "#" - }, - { - "iconClass": "bi-facebook", - "label": "Facebook", - "url": "#" - }, - { - "iconClass": "bi-instagram", - "label": "Instagram", - "url": "#" - }, - { - "iconClass": "bi-github", - "label": "GitHub", - "url": "#" - }, - { - "iconClass": "bi-linkedin", - "label": "LinkedIn", - "url": "#" - } - ] +export const Demo = { + args: { + socialMediaIcons: [ + { + "iconClass": "bi-twitter-x", + "label": "Twitter", + "url": "#" + }, + { + "iconClass": "bi-facebook", + "label": "Facebook", + "url": "#" + }, + { + "iconClass": "bi-instagram", + "label": "Instagram", + "url": "#" + }, + { + "iconClass": "bi-github", + "label": "GitHub", + "url": "#" + }, + { + "iconClass": "bi-linkedin", + "label": "LinkedIn", + "url": "#" + } + ] + } } diff --git a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig index 2fb09d0..2521197 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig +++ b/web/app/themes/dp-timber-theme/components/organisms/Footer/footer.twig @@ -3,6 +3,7 @@ {% include "@molecules/icons/icons.twig" with { icons: socialMediaIcons} %}
diff --git a/web/app/themes/dp-timber-theme/components/molecules/card/card.twig b/web/app/themes/dp-timber-theme/components/molecules/card/card.twig index 4b70296..c8daa4d 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/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" + } %} +
{{ cardDate | date("d-m-y") }} diff --git a/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.scss b/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.scss index c686a1c..4e7d716 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.scss +++ b/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.scss @@ -1,21 +1,21 @@ @use "../../scss/_variables/index.scss" as var; .contact-info { - background-color : var.$ebony-clay; - padding: 3em 0 1em 3em; + background-color: var.$ebony-clay; + padding: 3em 0 1em 3em; - .contact-method { - margin-bottom: 2em; - padding-left: 3.25em; + .contact-method { + margin-bottom: 2em; + padding-left: 3.25em; - .icon { - left: 0; - position: absolute; - top: 0; - } + .icon { + left: 0; + position: absolute; + top: 0; + } - h3 { - margin-bottom: 0.5em; - } + h3 { + margin-bottom: 0.5em; } + } } diff --git a/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.twig b/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.twig index 7606c5f..740e09e 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.twig +++ b/web/app/themes/dp-timber-theme/components/molecules/contact-info/contact-info.twig @@ -1,7 +1,11 @@ {% for method in contactMethods %}
- {% include '@atoms/icon/icon.twig' with { iconclass: method.icon, iconname: method.title,url: method.url } %} + {% include '@atoms/icon/icon.twig' with { + iconclass: method.icon, + iconname: method.title, + url: method.url + } %}

{{ method.title }}

{% if method.title == 'Email' %} diff --git a/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.twig b/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.twig index 041a490..718de29 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.twig +++ b/web/app/themes/dp-timber-theme/components/molecules/cta-text/cta.twig @@ -6,9 +6,10 @@

{{ subtitle }}

  • {% include '@atoms/get-started/button.twig' with { - fill: false, - text: "Get Started", - width: "w" + fill: false, + text: "Get Started", + show_arrow: true, + width: "no-width" } %}
diff --git a/web/app/themes/dp-timber-theme/components/molecules/form/form.twig b/web/app/themes/dp-timber-theme/components/molecules/form/form.twig index 5bae533..be41f0e 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/form/form.twig +++ b/web/app/themes/dp-timber-theme/components/molecules/form/form.twig @@ -2,28 +2,38 @@
{% include "@atoms/input/input.twig" with { - name: "name", - type: "text", - label: "Name" - } %} + name: "name", + type: "text", + label: "Name" + } %}
{% include "@atoms/input/input.twig" with { - name: "email", - type: "email", - label: "Email" - } %} + name: "email", + type: "email", + label: "Email" + } %}
{% include "@atoms/input/input.twig" with { - name: "message", - type: "textarea", - label: "Message" - } %} + name: "message", + type: "textarea", + label: "Message" + } %}
    -
  • {% include "@atoms/get-started/button.twig" with { fill: true, text: "send message" } %}
    • -
  • {% include "@atoms/get-started/button.twig" with { fill: false, text: "clear" } %}
    • +
  • + {% include "@atoms/get-started/button.twig" with { + fill: true, + text: "send message" + } %} +
    • +
  • + {% include "@atoms/get-started/button.twig" with { + fill: false, + text: "clear" + } %} +
diff --git a/web/app/themes/dp-timber-theme/components/molecules/hero/hero.scss b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.scss index 029f75b..80568c3 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/hero/hero.scss +++ b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.scss @@ -19,7 +19,7 @@ transition: opacity 2.5s ease; transition-delay: 0.75s; pointer-events: none; - background-color: #242943; + background-color: var.$ebony-clay; content: ''; display: block; height: 100%; @@ -83,25 +83,23 @@ max-height: none; min-height: 0; top: -2.75em; - } - - .hero h1 { - font-size: 2em; - } - - .hero>.inner .content { - display: block; - } - - .hero>.inner .content>* { - margin-right: 0; - margin-bottom: 2em; - } - - .hero.major { - height: auto; - min-height: 0; - max-height: none; + h1 { + font-size: 2em; + } + &.major { + height: auto; + min-height: 0; + max-height: none; + } + >.inner { + .content { + display: block; + >* { + margin-right: 0; + margin-bottom: 2em; + } + } + } } } diff --git a/web/app/themes/dp-timber-theme/components/molecules/hero/hero.twig b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.twig index be92c13..6f3ee62 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/hero/hero.twig +++ b/web/app/themes/dp-timber-theme/components/molecules/hero/hero.twig @@ -8,8 +8,9 @@
  • {% include '@atoms/get-started/button.twig' with { - fill: false, - text: "Get Started", + fill: false, + text: "Get Started", + show_arrow: true } %}
diff --git a/web/app/themes/dp-timber-theme/components/molecules/icons/icons.twig b/web/app/themes/dp-timber-theme/components/molecules/icons/icons.twig index e998736..1656373 100644 --- a/web/app/themes/dp-timber-theme/components/molecules/icons/icons.twig +++ b/web/app/themes/dp-timber-theme/components/molecules/icons/icons.twig @@ -2,7 +2,11 @@
    {% for icon in icons %}
  • - {% include '@atoms/icon/icon.twig' with { iconclass: icon.iconClass, iconname: icon.label,url: icon.url } %} + {% include '@atoms/icon/icon.twig' with { + iconclass: icon.iconClass, + iconname: icon.label, + url: icon.url + } %}
    • {% endfor %}
diff --git a/web/app/themes/dp-timber-theme/components/organisms/contact/contact.scss b/web/app/themes/dp-timber-theme/components/organisms/contact/contact.scss deleted file mode 100644 index 58aa5dd..0000000 --- a/web/app/themes/dp-timber-theme/components/organisms/contact/contact.scss +++ /dev/null @@ -1,69 +0,0 @@ -@use "../../scss/_variables/index.scss" as var; - -#contact { - background-color : var.$ebony-clay; - border-bottom: solid 1px var.$footer-border-color; - overflow-x: hidden; - - >.inner { - display: flex; - - > :nth-child(2n - 1) { - padding: 4em 3em 2em 0; - border-right: solid 1px var.$footer-border-color; - width: 60%; - } - - > :nth-child(2n) { - padding-left: 3em; - width: 40%; - } - - .split { - :first-child::before { - display: none; - } - - > *:before { - border-top: solid 1px var.$footer-border-color; - content: ''; - display: block; - margin-left: -3em; - position: absolute; - top: 0; - width: calc(100vw + 3em); - } - } - } - - @media screen and (max-width: var.$lg) { - >.inner { - display: block; - - > :nth-child(2n - 1) { - padding: 4em 0 2em 0; - border-right: 0; - width: 100%; - } - - > :nth-child(2n) { - padding-left: 0; - width: 100%; - } - - >.split>* { - padding: 3em 0 1em 0; - } - - >.split> :first-child:before { - display: block; - } - } - } - - @media screen and (max-width: var.$md) { - >.inner> :nth-child(2n - 1) { - padding: 3em 0 1em 0; - } - } -} diff --git a/web/app/themes/dp-timber-theme/components/organisms/contact/contact.stories.js b/web/app/themes/dp-timber-theme/components/organisms/contact/contact.stories.js deleted file mode 100644 index 306a6d0..0000000 --- a/web/app/themes/dp-timber-theme/components/organisms/contact/contact.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import contactSection from "./contact.twig"; -import "./contact.scss" -import "../../molecules/form/form.scss" -import "../../molecules/contact-info/contact-info.scss" -import "../../atoms/get-started/button.scss" -import { contactInfo } from "../../molecules/contact-info/contact-info.stories" - -export default { - title: "organisms/Contact Us", - render: ({ ...args }) => { - return contactSection({ ...args }) - } -} - -export const Contact = { - args: { - ...contactInfo.args - } -} diff --git a/web/app/themes/dp-timber-theme/components/organisms/contact/contact.twig b/web/app/themes/dp-timber-theme/components/organisms/contact/contact.twig deleted file mode 100644 index 6212057..0000000 --- a/web/app/themes/dp-timber-theme/components/organisms/contact/contact.twig +++ /dev/null @@ -1,12 +0,0 @@ -
-
-
-
- {% include "@molecules/form/form.twig" %} -
-
- {% include "@molecules/contact-info/contact-info.twig" %} -
-
-
-
diff --git a/web/app/themes/dp-timber-theme/components/organisms/footer/footer.scss b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.scss index bd04fc3..25a29d7 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/footer/footer.scss +++ b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.scss @@ -1,5 +1,72 @@ @use "../../scss/_variables/index.scss" as var; +.contact { + background-color: var.$ebony-clay; + border-bottom: solid 1px var.$footer-border-color; + overflow-x: hidden; + + >.inner { + display: flex; + + > :nth-child(2n - 1) { + padding: 4em 3em 2em 0; + border-right: solid 1px var.$footer-border-color; + width: 60%; + } + + > :nth-child(2n) { + padding-left: 3em; + width: 40%; + } + + .split { + :first-child::before { + display: none; + } + + >*:before { + border-top: solid 1px var.$footer-border-color; + content: ''; + display: block; + margin-left: -3em; + position: absolute; + top: 0; + width: calc(100vw + 3em); + } + } + } + + @media screen and (max-width: var.$lg) { + >.inner { + display: block; + + > :nth-child(2n - 1) { + padding: 4em 0 2em 0; + border-right: 0; + width: 100%; + } + + > :nth-child(2n) { + padding-left: 0; + width: 100%; + } + + >.split>* { + padding: 3em 0 1em 0; + } + + >.split> :first-child:before { + display: block; + } + } + } + + @media screen and (max-width: var.$md) { + >.inner> :nth-child(2n - 1) { + padding: 3em 0 1em 0; + } + } +} footer { background: var.$martinique; color: var.$white; diff --git a/web/app/themes/dp-timber-theme/components/organisms/footer/footer.stories.js b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.stories.js index d1635d3..40f2236 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/footer/footer.stories.js +++ b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.stories.js @@ -1,5 +1,9 @@ import footers from "./footer.twig"; -import "./footer.scss" +import "./footer.scss"; +import "../../molecules/form/form.scss" +import "../../molecules/contact-info/contact-info.scss" +import "../../atoms/get-started/button.scss" +import { contactInfo } from "../../molecules/contact-info/contact-info.stories" export default { title: "organisms/Footers", @@ -10,6 +14,7 @@ export default { export const Demo = { args: { + ...contactInfo.args, socialMediaIcons: [ { "iconClass": "bi-twitter-x", diff --git a/web/app/themes/dp-timber-theme/components/organisms/footer/footer.twig b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.twig index 2521197..a61f459 100644 --- a/web/app/themes/dp-timber-theme/components/organisms/footer/footer.twig +++ b/web/app/themes/dp-timber-theme/components/organisms/footer/footer.twig @@ -1,6 +1,21 @@ +
+
+
+
+ {% include "@molecules/form/form.twig" %} +
+
+ {% include "@molecules/contact-info/contact-info.twig" %} +
+
+
+
+