OS: 41, 47, 48: Create Hero, Text, Two Column in Storybook by shayaanmiyy · Pull Request #4 · digitalpolygon/wp-starter-shayaan

shayaanmiyy · 2024-07-01T13:39:03Z

Jira Ticket URL: https://digitalpolygon.atlassian.net/browse/OS-47

Decription

Create the Sections Component from https://html5up.net/uploads/demos/forty/

niteshsyngenta11

Incorporate the Feedback.

In general:

Line space missing
Use shorthand
Use color variables instead of using it directly.

niteshsyngenta11 · 2024-07-01T15:38:18Z

    const twigAlias = {
      "@atoms": path.resolve(__dirname, '../', 'components/atoms'),
-      "@molecules": path.resolve(__dirname, '../', 'components/molecules'),
+      "@molecules": path.resolve(__dirname, '../', 'components/molecule'),


This should be molecules.

Is because I am unable to change the Name of the folder, some restrictions are there

niteshsyngenta11 · 2024-07-01T15:38:44Z

+$portage: #8ea9e8;
+$de-york: #87c5a4;
+$ebony-clay: #242943;
+$martinique: #2a2f4a;


Add an extra line space.

niteshsyngenta11 · 2024-07-01T15:40:00Z

 .card-container {
  max-width: 600px;
-}
+}


Add an extra line space.

Yes I added one Line space

niteshsyngenta11 · 2024-07-01T15:40:51Z

+	}
+}
+
+export const Default = {}


Add an extra line space.

niteshsyngenta11 · 2024-07-01T16:20:51Z

+    width: calc(100% - 6em);
+
+    @media screen and (max-width: 736px) {
+      padding: 3em 0 1em 0;


Use shorthand.

Yes for Margin and padding I am using shorthand

niteshsyngenta11 · 2024-07-01T16:20:59Z

+
+header> :first-child:after {
+  content: '';
+  background-color: #ffffff;


Use variables.

Got It, I corrected my code

niteshsyngenta11 · 2024-07-01T16:21:06Z

+  background-color: #ffffff;
+  display: block;
+  height: 2px;
+  margin: 0.325em 0 0.5em 0;


Use shorthand.

niteshsyngenta11 · 2024-07-01T16:21:18Z

+  font-size: 0.7em;
+  font-weight: 600;
+  letter-spacing: 0.25em;
+  margin: 0 0 2em 0;


Use shorthand

niteshsyngenta11 · 2024-07-01T16:21:21Z

+  color: var.$white;
+  font-weight: 600;
+  line-height: 1.65;
+  margin: 0 0 1em 0;


Use shorthand

niteshsyngenta11

Incorporate the feedback.

niteshsyngenta11 · 2024-07-09T07:31:49Z

@@ -0,0 +1,6 @@
+$sm: "480px";


The name of the folder should be scss not SCSS.

Yes, I renamed the folder to lower case scss

niteshsyngenta11 · 2024-07-09T07:32:16Z

+  filter: blur($blur);
+}
+
+


Remove the extra line space.

niteshsyngenta11 · 2024-07-09T07:33:31Z

+		&:hover {
+			background-color: var.$anakiwa;
+		}
+	}


Fix the indentation issues. It should be 2 spaces instead of a tab

Corrected Indentation for all

niteshsyngenta11 · 2024-07-09T07:34:06Z

+
+{{ text }}
+
+{% if text == "Get Started" %}


Why have we added this condition?

add a new variable to show svg only if the Boolean is set to true

niteshsyngenta11 · 2024-07-09T07:34:17Z

@@ -0,0 +1,9 @@
+<button class="get-started {{ fill ? 'fill' : '' }} {{ width | default('w-100') }}">
+
+{{ text }}


Fix the indentation issue.

niteshsyngenta11 · 2024-07-09T08:14:11Z

+            >.split>* {
+                padding: 3em 0 1em 0;
+            }
+
+            >.split> :first-child:before {
+                display: block;
+            }
+        }
+    }


This can be clubbed.

niteshsyngenta11 · 2024-07-09T08:18:41Z

+			width: calc(100% - 3em);
+		}
+	}
 }


Line space missing.

niteshsyngenta11 · 2024-07-09T08:19:02Z

+header {
+	.major {
+		width: max-content;
+		margin-bottom: 2em;
+	}
+}
+
+header.major> :first-child:after {
+	content: '';
+	background-color: var.$white;
+	display: block;
+	height: 2px;
+	margin: 0.325em 0 0.5em;
+	width: calc(100% + 0.6em);
+}
+


This can be clubbed.

niteshsyngenta11 · 2024-07-09T08:28:15Z

+				<h1 class="d-inline">{{ title  }}</h1>
+			</header>
+			<span class="image main mt-4 mb-4">
+				{% include '@atoms/image/image.twig' with { src: 'https://html5up.net/uploads/demos/forty/images/pic11.jpg', alt: 'Generic', classes: 'img-fluid', width: '100%', height: 'auto' } %}


Make sure this is divided into multiple lines.

niteshsyngenta11 · 2024-07-09T08:30:20Z

+	.hero {
+		padding: 5em 0 1em;
+		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;
+	}


We are using SCSS so we should not write any CSS.

Html Design in Storybook

f46e6a0

niteshsyngenta11 requested changes Jul 1, 2024

View reviewed changes

shayaanmiyy added 3 commits July 2, 2024 14:30

Commented Changes

e04c7a1

OS: 47- Fixed Naming Conventions

7c1f30a

OS: 47- Updated the code

711faae

shayaanmiyy requested review from gauravgoyal and lpeabody as code owners July 4, 2024 10:51

shayaanmiyy changed the title ~~Html Design in Storybook~~ OS: 41, 47, 48: Create Hero, Text, Two Column in Storybook Jul 4, 2024

shayaanmiyy added 3 commits July 4, 2024 16:49

OS: 48- File Name changes to lower case

f73d0de

OS: 50, 51 & 52- Create Header, Contact & Generic Page

f573c62

0S: 50, 51 & 52: Added Transition on Hero & Header

2c15e5a

niteshsyngenta11 requested changes Jul 9, 2024

View reviewed changes

shayaanmiyy and others added 3 commits July 10, 2024 13:42

OS:41-52 Commented Feedback Changes

313c195

Fixed Formatting Code Issue

789f57b

OS: 39 Testing In Storybook (#8)

830cb36

		@@ -0,0 +1,9 @@
		<button class="get-started {{ fill ? 'fill' : '' }} {{ width \| default('w-100') }}">

		{{ text }}

Uh oh!

Conversation

shayaanmiyy commented Jul 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Decription

Uh oh!

niteshsyngenta11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

niteshsyngenta11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

shayaanmiyy commented Jul 1, 2024 •

edited

Loading