Copy over JP contents

.nvmrc

@@ -1 +1 @@
-v12.3.1
+v10.16.3

src/components/Card.tsx

@@ -6,6 +6,7 @@ import { colors, fontSizes, ns, radii, spaces } from 'src/lib/theme'
 import { H3 } from 'src/components/ContentTags'
 import { CardAction } from 'src/components/CardWrapper'
 import CardContent, { CardContentProps } from 'src/components/CardContent'
+import locale from 'src/lib/locale'
 
 interface CardColorContextProps {
   color: CardProps['color']
@@ -42,6 +43,7 @@ export interface CardProps {
     content: React.ReactNode
     color?: CardProps['color']
   }
+  t?: boolean
 }
 
 export interface CardState {
@@ -86,7 +88,8 @@ const Card = ({
   slideCount,
   isLast,
   footer,
-  header
+  header,
+  t
 }: CardProps) => (
   <CardColorContext.Provider value={{ color }}>
     <div
@@ -162,11 +165,18 @@ const Card = ({
         >
           {title && (
             <H3
-              css={css`
-                text-align: center;
-                margin-left: ${spaces('-0.25')};
-                margin-right: ${spaces('-0.25')};
-              `}
+              css={[
+                css`
+                  text-align: center;
+                  margin-left: ${spaces('-0.25')};
+                  margin-right: ${spaces('-0.25')};
+                `,
+                !t &&
+                  locale === 'en' &&
+                  css`
+                    opacity: 0.1;
+                  `
+              ]}
             >
               {title}
             </H3>

src/components/ContentTags/List.tsx

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import { spaces } from 'src/lib/theme'
+import locale from 'src/lib/locale'
 
 const commonListCss = css`
   padding: 0;
@@ -26,16 +27,22 @@ const commonListItemCss = css`
 type DefaultUlProps = JSX.IntrinsicElements['ul']
 interface UlProps extends DefaultUlProps {
   size?: 'md' | 'lg'
+  t?: boolean
 }
 
-export const Ul = ({ size = 'md', ...props }: UlProps) => (
+export const Ul = ({ t, size = 'md', ...props }: UlProps) => (
   <ul
     {...props}
     css={[
       commonListCss,
       size === 'lg' &&
         css`
           margin: ${spaces(1.75)} 0;
+        `,
+      !t &&
+        locale === 'en' &&
+        css`
+          opacity: 0.1;
         `
     ]}
   />
@@ -44,9 +51,10 @@ export const Ul = ({ size = 'md', ...props }: UlProps) => (
 type DefaultOlProps = JSX.IntrinsicElements['ol']
 interface OlProps extends DefaultOlProps {
   size?: 'md' | 'lg'
+  t?: boolean
 }
 
-export const Ol = ({ size, ...props }: OlProps) => (
+export const Ol = ({ t, size, ...props }: OlProps) => (
   <ol
     {...props}
     css={[
@@ -57,7 +65,12 @@ export const Ol = ({ size, ...props }: OlProps) => (
         `,
       css`
         counter-reset: text;
-      `
+      `,
+      !t &&
+        locale === 'en' &&
+        css`
+          opacity: 0.1;
+        `
     ]}
   />
 )

src/components/ContentTags/P.tsx

@@ -1,6 +1,25 @@
-import styled from '@emotion/styled'
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
 import { spaces } from 'src/lib/theme'
+import locale from 'src/lib/locale'
 
-export const P = styled.p`
-  margin: 0 0 ${spaces(1)};
-`
+type DefaultPProps = JSX.IntrinsicElements['p']
+interface PProps extends DefaultPProps {
+  t?: boolean
+}
+
+export const P = ({ t, ...props }: PProps) => (
+  <p
+    {...props}
+    css={[
+      css`
+        margin: 0 0 ${spaces(1)};
+      `,
+      !t &&
+        locale === 'en' &&
+        css`
+          opacity: 0.1;
+        `
+    ]}
+  />
+)

src/components/EmojiSeparator.tsx

@@ -5,6 +5,7 @@ import Emoji from 'src/components/Emoji'
 import { colors, fontSizes, ns, spaces, maxWidths } from 'src/lib/theme'
 import { VariableNames } from 'src/types/VariableNames'
 import letterEmojiMapping from 'src/lib/letterEmojiMapping'
+import locale from 'src/lib/locale'
 
 interface EmojiSeparatorProps {
   emojis: string[]
@@ -17,6 +18,7 @@ interface EmojiSeparatorProps {
   description?: React.ReactNode
   noBottomMargin: boolean
   noTopMargin: boolean
+  t?: boolean
 }
 
 const fontSize = (size: EmojiSeparatorProps['size']) =>
@@ -56,7 +58,8 @@ const EmojiSeparator = ({
   cssOverrides,
   description,
   noBottomMargin,
-  noTopMargin
+  noTopMargin,
+  t
 }: EmojiSeparatorProps) => (
   <Component
     css={[
@@ -106,13 +109,20 @@ const EmojiSeparator = ({
       </span>
       {description && (
         <div
-          css={css`
-            font-size: ${fontSizes(0.85)};
-            color: ${colors('grey700')};
-            padding-bottom: ${spaces(0.5)};
-            max-width: ${maxWidths('xs')};
-            margin: 0 auto;
-          `}
+          css={[
+            css`
+              font-size: ${fontSizes(0.85)};
+              color: ${colors('grey700')};
+              padding-bottom: ${spaces(0.5)};
+              max-width: ${maxWidths('xs')};
+              margin: 0 auto;
+            `,
+            !t &&
+              locale === 'en' &&
+              css`
+                opacity: 0.1;
+              `
+          ]}
         >
           {description}
         </div>

src/components/ExpressionRunnerCaptionOnly.tsx

@@ -1,14 +1,27 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import { colors, spaces } from 'src/lib/theme'
+import locale from 'src/lib/locale'
 
-const ExpressionRunnerCaptionOnly = (props: JSX.IntrinsicElements['div']) => (
+const ExpressionRunnerCaptionOnly = ({
+  t,
+  ...props
+}: JSX.IntrinsicElements['div'] & {
+  t?: boolean
+}) => (
   <div
-    css={css`
-      text-align: center;
-      color: ${colors('indigo500')};
-      margin: ${spaces(2.25)} 0 ${spaces(2.5)};
-    `}
+    css={[
+      css`
+        text-align: center;
+        color: ${colors('indigo500')};
+        margin: ${spaces(2.25)} 0 ${spaces(2.5)};
+      `,
+      !t &&
+        locale === 'en' &&
+        css`
+          opacity: 0.1;
+        `
+    ]}
     {...props}
   />
 )

src/components/ExpressionRunnerCaptionWrapper.tsx

@@ -1,17 +1,26 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import { colors, fontSizes, spaces } from 'src/lib/theme'
+import locale from 'src/lib/locale'
 
-const ExpressionRunnerCaptionWrapper = (
-  props: JSX.IntrinsicElements['div']
-) => (
+const ExpressionRunnerCaptionWrapper = ({
+  t,
+  ...props
+}: JSX.IntrinsicElements['div'] & { t?: boolean }) => (
   <div
-    css={css`
-      text-align: center;
-      font-size: ${fontSizes(0.85)};
-      color: ${colors('indigo500')};
-      margin: ${spaces('-0.75')} -2px ${spaces(0.5)} -2px;
-    `}
+    css={[
+      css`
+        text-align: center;
+        font-size: ${fontSizes(0.85)};
+        color: ${colors('indigo500')};
+        margin: ${spaces('-0.75')} -2px ${spaces(0.5)} -2px;
+      `,
+      !t &&
+        locale === 'en' &&
+        css`
+          opacity: 0.1;
+        `
+    ]}
     {...props}
   />
 )

src/components/H.tsx

@@ -215,7 +215,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   if (args.name === 'newUser') {
     if (locale === 'en') {
       return (
-        <P>
+        <P t>
           <InlineHeader>Hello!</InlineHeader> This is{' '}
           <Em>page {episodeNumber + 1}</Em> of the online course called “
           <InternalLink href={'/'}>{lessonTitle}</InternalLink>
@@ -393,7 +393,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       return (
         <>
           <Strong highlightType={highlightType}>
-            Play <Emoji>▶️</Emoji>
+            Run <Emoji>▶️</Emoji>
           </Strong>
         </>
       )
@@ -412,7 +412,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       return (
         <>
           <Strong highlightType={highlightType}>
-            Fast Forward <Emoji>⏩</Emoji>
+            Play <Emoji>⏩</Emoji>
           </Strong>
         </>
       )
@@ -431,7 +431,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       return (
         <>
           <Strong highlightType={highlightType}>
-            Fast Forwarding… <Emoji>⏩</Emoji>
+            Playing… <Emoji>⏩</Emoji>
           </Strong>
         </>
       )