Small refactoring imporvements to docs components

packages/website/ts/components/docs/code_run.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Button } from 'ts/components/button';
+
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 

packages/website/ts/components/docs/helpful_cta.tsx

@@ -12,15 +12,15 @@ export interface IHelpfulCtaProps {
 export const HelpfulCta: React.FC<IHelpfulCtaProps> = ({ heading }) => {
     // @TODO: add was this helpful logic
     return (
-        <Wrapper>
-            <Text>{heading}</Text>
-            <Buttons>
+        <HelpfulCtaWrapper>
+            <CtaText>{heading}</CtaText>
+            <CtaButtons>
                 <CtaButton color={colors.white}>Yes</CtaButton>
                 <CtaButton isTransparent={true} color={colors.brandLight} borderColor={colors.brandLight}>
                     No
                 </CtaButton>
-            </Buttons>
-        </Wrapper>
+            </CtaButtons>
+        </HelpfulCtaWrapper>
     );
 };
 
@@ -28,13 +28,13 @@ HelpfulCta.defaultProps = {
     heading: 'Was this page helpful?',
 };
 
-const Wrapper = styled.div`
+const HelpfulCtaWrapper = styled.div`
     display: flex;
     align-items: center;
     margin-bottom: 1.875rem;
 `;
 
-const Text = styled(Paragraph)`
+const CtaText = styled(Paragraph)`
     color: ${colors.textDarkPrimary};
     font-size: 1.111111111rem;
     font-weight: 400;
@@ -42,7 +42,7 @@ const Text = styled(Paragraph)`
     opacity: 1;
 `;
 
-const Buttons = styled.div`
+const CtaButtons = styled.div`
     display: flex;
     align-items: center;
     margin-left: 40px;

packages/website/ts/components/docs/hero.tsx

@@ -29,7 +29,7 @@ Hero.defaultProps = {
 
 const HeroWrapper = styled.div<{ isHome: boolean }>`
     background-color: ${colors.backgroundLight};
-    padding-top: ${props => props.isHome && `63px`};
+    padding-top: ${({ isHome }) => isHome && `63px`};
     padding-bottom: 80px;
     margin-bottom: 60px;
     min-height: ${({ isHome }) => (isHome ? '21.875rem' : '13.222rem')};

packages/website/ts/components/docs/newsletter_signup.tsx

@@ -10,25 +10,28 @@ export interface INewsletterSignupProps {
     url?: string;
 }
 
-export const NewsletterSignup: React.FC<INewsletterSignupProps> = props => (
-    <NewsletterSignupWrapper href={props.url}>
-        <Heading marginBottom="8px">{props.heading}</Heading>
-        <Paragraph marginBottom="25px">{props.description}</Paragraph>
-        <InputWrapper>
-            <Label htmlFor="emailSignup">Email Address</Label>
-            <Input id="emailSignup" type="email" placeholder="Email Address" />
-            <Submit>
-                <svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        opacity=".5"
-                        d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z"
-                        fill="#5C5C5C"
-                    />
-                </svg>
-            </Submit>
-        </InputWrapper>
-    </NewsletterSignupWrapper>
-);
+export const NewsletterSignup: React.FC<INewsletterSignupProps> = props => {
+    // @TODO: Add newsletter signup loading / success / error states
+    return (
+        <NewsletterSignupWrapper href={props.url}>
+            <Heading marginBottom="8px">{props.heading}</Heading>
+            <Paragraph marginBottom="25px">{props.description}</Paragraph>
+            <InputWrapper>
+                <Label htmlFor="emailSignup">Email Address</Label>
+                <Input id="emailSignup" type="email" placeholder="Email Address" />
+                <Submit>
+                    <svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            opacity=".5"
+                            d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z"
+                            fill="#5C5C5C"
+                        />
+                    </svg>
+                </Submit>
+            </InputWrapper>
+        </NewsletterSignupWrapper>
+    );
+};
 
 NewsletterSignup.defaultProps = {
     heading: 'Sign up for the Newsletter',

packages/website/ts/components/docs/note.tsx

@@ -9,7 +9,7 @@ export interface INoteProps {
     description?: string;
 }
 
-export const Note: React.FunctionComponent<INoteProps> = props => (
+export const Note: React.FC<INoteProps> = props => (
     <NoteWrapper>
         <NoteHeading marginBottom="6px">{props.heading}</NoteHeading>
         <NoteDescription>{props.description}</NoteDescription>