[PLAY-173] Convert Visual Guideline Display Partial to React and Allo…

…w Screen Size Global Props (#1924) * Converting title kit to ts (#1872) * Removed flow and Renamed file * Updated Types * Removed JSX file extentions from imports * Fix syntax error * Fix tests Co-authored-by: Erica Winne <erica.winne@powerhrg.com> * Converting caption to tsx (#1874) * Started Converting * Rename file to TSX and Updated types * Added/Joined & GlobalProps * Merge Master * Changed back default blank string Co-authored-by: Erica Winne <erica.winne@powerhrg.com> * Added logic to example template to allow for screen sizes and added display component * Completed display partial to react * Code clean-up * More clean-up and fixed spacing * Fixed spacing * Fixed text size in table Co-authored-by: Stephen Marshall <smarshall1980@gmail.com> Co-authored-by: Erica Winne <erica.winne@powerhrg.com>
powerhome · Jun 1, 2022 · 21f3545 · 21f3545
1 parent f327e61
commit 21f3545
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 10 deletions.
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/Display.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/Display.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import {
+  Body,
+  Caption,
+  Table,
+  Title,
+} from 'playbook-ui'
+
+import Example from '../Templates/Example'
+
+const screenSizeProps = {
+  display: ['xs', 'sm', 'md', 'lg', 'xl']
+}
+
+const UTILITY_CLASSES = [
+  {size: 'xs', media: '@media screen and (max-width: 575px)', class: '.display_xs_hidden', properties: 'display: hidden !important'},
+  {size: 'sm', media: '@media screen and (max-width: 576px)', class: '.display_sm_block', properties: 'display: block !important'},
+  {size: 'md', media: '@media screen and (max-width: 768px)', class: '.display_md_inline_block', properties: 'display: inline-block !important'},
+  {size: 'lg', media: '@media screen and (max-width: 992px)', class: '.display_lg_inline', properties: 'display: inline !important'},
+  {size: 'xl', media: '@media screen and (max-width: 1200px)', class: '.display_xl_flex', properties: 'display: flex !important'},
+]
+
+const DISPLAY_VALUES = ['inline', 'flex', 'inline_flex', 'inline_block', 'block', 'none']
+
+const Display = ({example}: {example: string}) => (
+  <React.Fragment>
+    <Example
+        example={example}
+        globalProps={{
+          display: DISPLAY_VALUES
+        }}
+        screenSizes={screenSizeProps}
+        title='Display'
+    />
+    <Title
+        marginBottom='xs'
+        paddingTop='sm'
+        size={4}
+        text='Utility Classes'
+    />
+    <Body
+        text='Just want the raw classes? We got you. All of our global props are simple CSS utilities available through classes.'
+        marginBottom='sm'
+    />
+    <Caption
+        text='Visual Guide'
+        marginBottom='sm'
+    />
+    <Table
+        shadow='deep'
+        size='sm'
+    >
+      <thead>
+        <tr>
+          <th>{'Screen Size'}</th>
+          <th>{'@Media Screen'}</th>
+          <th>{'Class'}</th>
+          <th>{'Properties'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {UTILITY_CLASSES.map((utilityClass: {[key: string]: string}) => (
+          <tr>
+            <td>
+              {utilityClass.size}
+            </td>
+            <td>
+              {utilityClass.media}
+            </td>
+            <td>
+              {utilityClass.class}
+            </td>
+            <td>
+              {utilityClass.properties}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  </React.Fragment>
+)
+
+export default Display
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/FlexBox.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/FlexBox.tsx
@@ -33,7 +33,6 @@ const FlexBox = ({example}: {example: string}) => (
     example={example}
     customChildren={true}
     title='Flex Box'
-    globalPropsDescription={'Available in every kit. These are added globally as they are most flexible when developing. *Screen sizes are optional.'}
   >
     <Table>
       <thead>

diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Templates/Example.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Templates/Example.tsx
@@ -20,7 +20,7 @@ type ExampleType = {
   description?: string,
   example?: string,
   globalProps?: { [key: string]: string[] | number[] },
-  globalPropsDescription?: string,
+  screenSizes?: { [key: string]: string[] | number[] },
   title?: string,
   tokens?: { [key: string]: string | number }
 }
@@ -31,7 +31,7 @@ const Example = ({
   description,
   example,
   globalProps,
-  globalPropsDescription,
+  screenSizes,
   title,
   tokens,
 }: ExampleType): React.ReactElement => {
@@ -56,7 +56,7 @@ const Example = ({
           {description}
         </Body>
       )}
-      { (globalProps || globalPropsDescription) && (
+      { globalProps && (
         <React.Fragment>
           <Title
               marginBottom="xs"
@@ -66,7 +66,7 @@ const Example = ({
               text="Global Props"
           />
           <Body marginBottom="lg">
-            {globalPropsDescription || 'Available in every kit. These are added globally as they are most flexible when developing.'}
+            {screenSizes ? 'Available in every kit. These are added globally as they are most flexible when developing. *Screen sizes are optional.' : 'Available in every kit. These are added globally as they are most flexible when developing.'}
           </Body>
         </React.Fragment>
       )}
@@ -106,7 +106,10 @@ const Example = ({
         )}
         {children && customChildren && (children)}
         {globalProps && (
-          <PropsValues {...globalProps} />
+          <PropsValues
+              globalProps={globalProps}
+              screenSizes={screenSizes}
+          />
         )}
         <Card
             background="dark"

diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Templates/PropsValues.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Templates/PropsValues.tsx
@@ -9,14 +9,21 @@ import { Caption, Card, Flex, FlexItem, Pill, SectionSeparator } from 'playbook-
 
 // type Props = {[key: string]: string | number}
 
-const PropsValues = (props: {[key: string]: string[] | number[]}): React.ReactElement => (
+
+type Props = {
+  globalProps: {[key: string]: string[] | number[]} ,
+  screenSizes?: {[key: string]: string[] | number[]}
+}
+
+const PropsValues = (props: Props): React.ReactElement => {
+  return (
   <Flex
       inline="flex-container"
       justifyContent="spaceBetween"
       orientation="row"
       vertical="stretch"
   >
-    { Object.keys(props).map((propKey: string) => (
+    { Object.keys(props.globalProps).map((propKey: string) => (
       <React.Fragment key={propKey}>
         <FlexItem flex={1}>
           <Card.Body>
@@ -36,13 +43,39 @@ const PropsValues = (props: {[key: string]: string[] | number[]}): React.ReactEl
             orientation="vertical"
             variant="card"
         />
+        {props.screenSizes && (
+          <>
+            <FlexItem flex={1}>
+              <Card.Body>
+                <Caption
+                    marginBottom="sm"
+                    text="Screen Size"
+                />
+                {Object.values(props.screenSizes)[0].map((propValue) => (
+                  <Pill
+                      key={`${propKey}-${propValue}`}
+                      text={propValue}
+                      textTransform="none"
+                      variant="warning"
+                  />
+                ))}
+              </Card.Body>
+            </FlexItem>
+            <SectionSeparator
+                marginBottom="md"
+                marginTop="md"
+                orientation="vertical"
+                variant="card"
+            />
+          </>
+        )}
         <FlexItem flex={1}>
           <Card.Body>
             <Caption
                 marginBottom="sm"
                 text="Values"
             />
-            {props[propKey].map((propValue) => (
+            {Object.values(props.globalProps)[0].map((propValue) => (
               <Pill
                   key={`${propKey}-${propValue}`}
                   text={propValue}
@@ -55,6 +88,8 @@ const PropsValues = (props: {[key: string]: string[] | number[]}): React.ReactEl
       </React.Fragment>
     ))}
   </Flex>
-)
+  )
+}
+
 
 export default PropsValues
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/index.tsx b/playbook-website/app/javascript/components/VisualGuidelines/index.tsx
@@ -6,6 +6,7 @@ import React from 'react'
 import Colors from './Colors'
 import MaxWidth from './Examples/MaxWidth'
 import Positioning from './Examples/Positioning'
+import Display from './Examples/Display'
 import Cursor from './Examples/Cursor'
 import FlexBox from './Examples/FlexBox'
 
@@ -18,6 +19,7 @@ const VisualGuidelines = ({ examples }: {examples: {[key: string]: string}}): Re
           example={examples.positioning_jsx}
           tokensExample={examples.position_token}
       />
+      <Display example={examples.display_in_use_jsx} />
       <Cursor example={examples.cursor_jsx} />
       <FlexBox example={examples.justify_self_jsx} />
     </React.Fragment>