"Version-6.4.0" release (#562)

* Fix Milestones responsiveness on SignupScreen (#560) * Add styles for regular P and A tags in SignupForm (#561) * Add styles for regular P and A tags in SignupForm * Update SignupForm stories
x-team · Jul 21, 2020 · 329628a · 329628a
1 parent 1f868f4
commit 329628a
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 28 deletions.
diff --git a/lib/all.js b/lib/all.js
diff --git a/lib/all.js.map b/lib/all.js.map
diff --git a/lib/registration.js b/lib/registration.js
diff --git a/lib/registration.js.map b/lib/registration.js.map
diff --git a/src/components/ui/SignupForm.js b/src/components/ui/SignupForm.js
@@ -4,16 +4,36 @@
 import React from 'react'
 import cmz from 'cmz'
 
-import { breakpoints } from '../../styles/theme'
+import theme, { breakpoints } from '../../styles/theme'
 import typo from '../../styles/typo'
 
 const cx = {
-  form: cmz(`
-    width: 500px
-    max-width: 100%
-    margin: 0 auto
-    flex: 1
-  `),
+  form: cmz(
+    typo.baseText,
+    `
+      & {
+        width: 500px
+        max-width: 100%
+        margin: 0 auto
+        flex: 1
+        font-size: 16px
+        line-height: 1.4
+        color: ${theme.typoGrayed}
+      }
+
+      & p {
+        margin: 12px 0
+      }
+
+      & a {
+        color: ${theme.typoGrayed}
+      }
+
+      & a:hover {
+        text-decoration: none
+      }
+    `
+  ),
 
   padded: cmz(`
     & {

diff --git a/src/components/ui/SignupForm.stories.js b/src/components/ui/SignupForm.stories.js
@@ -110,6 +110,30 @@ storiesOf('UI Components|SignupForm/Debug', module)
       </SignupForm>
     </Body>
   ))
+  .add('with paragraphs', () => (
+    <Body>
+      <SignupForm
+        title='Work Experience'
+        hasPadding
+      >
+        <InputSection
+          headline='Lorem ipsum dolor sit amet'
+          description='Sed dui metus, pretium vel justo at, malesuada viverra sapien.'
+        >
+          <InputField placeholder='Input field' />
+        </InputSection>
+        <InputSection
+          headline='Lorem ipsum dolor sit amet'
+          description='Sed dui metus, pretium vel justo at, malesuada viverra sapien.'
+        >
+          <InputField type='textarea' placeholder='Textarea field' />
+        </InputSection>
+        <Button block wide size='large'>Continue »</Button>
+        <p>Thi is an example of how a regular P tag looks like.</p>
+        <p><a href='https://x-team.com/blog/privacy-policy/' target='_blank' rel='nofollow'>And this is how an A tag looks like.</a></p>
+      </SignupForm>
+    </Body>
+  ))
   .add('missing props', () => (
     <SignupForm />
   ))
diff --git a/src/components/ui/SignupScreen.js b/src/components/ui/SignupScreen.js
@@ -52,7 +52,8 @@ const cx = {
   `),
 
   milestones: cmz(`
-    width: 500px
+    width: 100%
+    max-width: 500px
     padding: 32px 0 24px
     margin: 0 auto
   `),