feat: theming blocks components

ccontrols · Jun 13, 2020 · f97afca · f97afca
1 parent c287815
commit f97afca
Show file tree

Hide file tree

Showing 17 changed files with 84 additions and 107 deletions.
diff --git a/integrations/storybook/src/docs-page/DocsContainer.tsx b/integrations/storybook/src/docs-page/DocsContainer.tsx
@@ -18,7 +18,9 @@ export const PageContextContainer: FC = ({ children }) => {
   return (
     <ThemeProvider theme={store.config?.theme} dark={isDark}>
       <BlockContextProvider storyId={storyId} store={store} options={options}>
-        <BlockPageContainer maxWidth="1000px">{children}</BlockPageContainer>
+        <BlockPageContainer sx={{ maxWidth: '1000px' }}>
+          {children}
+        </BlockPageContainer>
       </BlockContextProvider>
     </ThemeProvider>
   );

diff --git a/plugins/axe-plugin/src/components/NodesTable.tsx b/plugins/axe-plugin/src/components/NodesTable.tsx
@@ -89,10 +89,7 @@ export const NodesTable: FC<NodesTableProps> = ({
                   <Tag
                     key={`${target}`}
                     color="lightgrey"
-                    sx={{
-                      mr: 1,
-                      mb: 1,
-                    }}
+                    variant="tag.rightmargin"
                   >
                     {target}
                   </Tag>

diff --git a/plugins/axe-plugin/src/components/ResultsTable.tsx b/plugins/axe-plugin/src/components/ResultsTable.tsx
@@ -132,14 +132,7 @@ const ResultsTable: FC<ResultsTableProps> = ({ results, hideErrorColumns }) => {
           >
             {value &&
               value.map(tag => (
-                <Tag
-                  key={`${tag}`}
-                  color="lightgrey"
-                  sx={{
-                    mr: 1,
-                    mb: 1,
-                  }}
-                >
+                <Tag key={`${tag}`} color="lightgrey" variant="tag.rightmargin">
                   {tag}
                 </Tag>
               ))}

diff --git a/ui/app/src/BlogPage/BlogPage.tsx b/ui/app/src/BlogPage/BlogPage.tsx
@@ -4,7 +4,5 @@ import { jsx } from 'theme-ui';
 import { PageContainer } from '@component-controls/blocks';
 
 export const BlogPage: FC = () => {
-  return (
-    <PageContainer sx={{ flex: '1 0 auto' }} maxWidth="1000px" id="content" />
-  );
+  return <PageContainer sx={{ maxWidth: '1000px' }} id="content" />;
 };
diff --git a/ui/app/src/CategoryList/CategoryList.tsx b/ui/app/src/CategoryList/CategoryList.tsx
@@ -14,7 +14,7 @@ export const CategoryList: FC<CategoryListProps> = ({ type }) => {
   const categories = storeProvider?.getUniquesByCategory(type) || [];
   const pageConfig = storeProvider?.config?.pages?.[type] || {};
   return (
-    <PageContainer sx={{ flex: '1 0 auto' }} maxWidth="1000px" id="content">
+    <PageContainer sx={{ maxWidth: '1000px' }} id="content">
       <Title>{pageConfig.label}</Title>
       <ul>
         {Object.keys(categories).map(key => (

diff --git a/ui/app/src/CategoryPage/CategoryPage.tsx b/ui/app/src/CategoryPage/CategoryPage.tsx
@@ -16,7 +16,7 @@ export const CategoryPage: FC<CategoryPageProps> = ({ type, category }) => {
   const pageConfig = storeProvider?.config?.pages?.[type] || {};
   const pages = storeProvider.getPagesByCategory(type, category);
   return (
-    <PageContainer sx={{ flex: '1 0 auto' }} maxWidth="1000px" id="content">
+    <PageContainer sx={{ maxWidth: '1000px' }} id="content">
       <Flex
         sx={{
           flexDirection: 'row',

diff --git a/ui/app/src/DocPage/DocPage.tsx b/ui/app/src/DocPage/DocPage.tsx
@@ -58,7 +58,7 @@ export const BasePage: FC<DocPageProps> = ({ pagesFn }) => {
             </TabList>
           )}
 
-          <PageContainer maxWidth="1200px" ref={pageRef}>
+          <PageContainer sx={{ maxWidth: '1200px' }} ref={pageRef}>
             {pages &&
               pages.map(page => (
                 <TabPanel key={`panel_${page.key}`}>{page.render()}</TabPanel>
@@ -76,9 +76,7 @@ export const DocPage: FC<DocPageProps> = props => {
   if (doc && doc.fullPage && doc.MDXPage) {
     return (
       <PageContainer
-        sx={{ flex: '1 0 auto' }}
-        maxWidth="100%"
-        padding={0}
+        sx={{ flex: '1 0 auto', maxWidth: '100%', p: 0 }}
         id="content"
       />
     );

diff --git a/ui/app/src/PageList/PageList.tsx b/ui/app/src/PageList/PageList.tsx
@@ -14,7 +14,7 @@ export const PageList: FC<PageListProps> = ({ type }) => {
   const pages = storeProvider?.getPageList(type) || [];
   const pageConfig = storeProvider?.config?.pages?.[type] || {};
   return (
-    <PageContainer sx={{ flex: '1 0 auto' }} maxWidth="1000px" id="content">
+    <PageContainer sx={{ maxWidth: '1000px' }} id="content">
       <Title>{pageConfig.label}</Title>
       <DocumentsList pages={pages} />
     </PageContainer>

diff --git a/ui/app/src/PagePage/PagePage.tsx b/ui/app/src/PagePage/PagePage.tsx
@@ -4,5 +4,5 @@ import { jsx } from 'theme-ui';
 import { PageContainer } from '@component-controls/blocks';
 
 export const PagePage: FC = () => {
-  return <PageContainer sx={{ flex: '1 0 auto' }} id="content" padding={0} />;
+  return <PageContainer id="content" padding={0} />;
 };
diff --git a/ui/app/src/TagsList/TagsList.tsx b/ui/app/src/TagsList/TagsList.tsx
@@ -19,7 +19,7 @@ export const TagsList: FC<TagsListProps> = ({ tags }) => {
           key={tag}
           href={getDocPath('tags', undefined, storeProvider?.config, tag)}
         >
-          <Tag color="#333333" sx={{ ml: 1 }}>
+          <Tag color="#333333" variant="tag.leftmargin">
             {tag}
           </Tag>
         </Link>

diff --git a/ui/blocks/src/ComponentDeps/Dependencies.tsx b/ui/blocks/src/ComponentDeps/Dependencies.tsx
@@ -88,14 +88,11 @@ export const Dependencies: FC<DependenciesProps> = ({ dependencies }) => {
               })
               .map(v => (
                 <Tag
+                  variant="tag.rightmargin"
                   key={`${v.name}`}
                   color={
                     v.importedName === defaultExport ? 'green' : 'lightgrey'
                   }
-                  sx={{
-                    mr: 1,
-                    mb: 1,
-                  }}
                 >
                   {v.importedName === defaultExport ? v.name : v.importedName}
                 </Tag>

diff --git a/ui/blocks/src/EditPage/EditPage.tsx b/ui/blocks/src/EditPage/EditPage.tsx
@@ -14,29 +14,14 @@ import { useStoryContext } from '../context';
 export const EditPage: FC = () => {
   const { docPackage } = useStoryContext({ id: '.' });
   return docPackage && docPackage.repository && docPackage.repository.browse ? (
-    <Box
-      sx={{
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        p: 2,
-      }}
-    >
+    <Box variant="editpage.container">
       <ExternalLink
         href={docPackage.repository.browse}
         aria-label="edit this page"
       >
-        <Box
-          sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
-        >
+        <Box variant="editpage.inner">
           <Octicon icon={MarkGithub} />
-          <Text
-            sx={{
-              pl: 2,
-            }}
-          >
-            Edit this page
-          </Text>
+          <Text variant="editpage.text">Edit this page</Text>
         </Box>
       </ExternalLink>
     </Box>

diff --git a/ui/blocks/src/PageContainer/PageContainer.tsx b/ui/blocks/src/PageContainer/PageContainer.tsx
@@ -5,16 +5,6 @@ import { jsx, Box, BoxProps } from 'theme-ui';
 import { StoryContextConsumer } from '../context';
 
 export interface PageContainerProps {
-  /**
-   * limit the max width of the page
-   */
-  maxWidth?: number | string;
-
-  /**
-   * container padding
-   */
-  padding?: number;
-
   /**
    * ref to the page container component
    */
@@ -28,10 +18,7 @@ export interface PageContainerProps {
  */
 export const PageContainer: FC<PageContainerProps &
   Omit<BoxProps, 'sx'>> = forwardRef(
-  (
-    { children, maxWidth, padding = 4, ...rest },
-    ref: React.Ref<HTMLDivElement>,
-  ) => {
+  ({ children, ...rest }, ref: React.Ref<HTMLDivElement>) => {
     useEffect(() => {
       try {
         const pageURL =
@@ -53,28 +40,13 @@ export const PageContainer: FC<PageContainerProps &
       } catch (err) {}
     }, []);
     return (
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'center',
-          bg: 'background',
-          color: 'text',
-          fontFamily: 'body',
-          width: '100%',
-        }}
-        {...rest}
-      >
-        <Box
-          sx={{ maxWidth, width: '100%', p: padding, position: 'relative' }}
-          ref={ref}
-        >
-          <StoryContextConsumer id=".">
-            {({ doc }) => {
-              const { MDXPage } = doc || {};
-              return MDXPage ? <MDXPage /> : children;
-            }}
-          </StoryContextConsumer>
-        </Box>
+      <Box variant="pagecontainer" ref={ref} {...rest}>
+        <StoryContextConsumer id=".">
+          {({ doc }) => {
+            const { MDXPage } = doc || {};
+            return MDXPage ? <MDXPage /> : children;
+          }}
+        </StoryContextConsumer>
       </Box>
     );
   },

diff --git a/ui/blocks/src/PropsTable/BasePropsTable.tsx b/ui/blocks/src/PropsTable/BasePropsTable.tsx
@@ -206,9 +206,7 @@ export const BasePropsTable: FC<BasePropsTableProps> = ({
                           key={`${name}_${value || typeName}`}
                           color="grey"
                           transparentAmount={0.9}
-                          sx={{
-                            mr: 1,
-                          }}
+                          variant="tag.rightmargin"
                         >
                           {value || typeName}
                         </Tag>
@@ -243,13 +241,9 @@ export const BasePropsTable: FC<BasePropsTableProps> = ({
               value = defaultValue.toString();
           }
           return (
-            <Styled.pre
-              sx={{
-                whiteSpace: 'pre-wrap',
-              }}
-            >
-              {value}
-            </Styled.pre>
+            <Box variant="propstable.defaultvalue">
+              <Styled.pre>{value}</Styled.pre>
+            </Box>
           );
         },
       },

diff --git a/ui/blocks/src/Story/Story.tsx b/ui/blocks/src/Story/Story.tsx
@@ -36,14 +36,7 @@ export const Story: FC<StoryProps> = forwardRef(
                 () => story.renderFn(values, { context }),
               );
               return (
-                <Box
-                  id={story.id}
-                  sx={{
-                    px: 4,
-                    py: 3,
-                  }}
-                  {...rest}
-                >
+                <Box id={story.id} variant="story" {...rest}>
                   <div
                     className="story-render-container"
                     style={{ all: 'unset' }}

diff --git a/ui/components/src/Tag/Tag.tsx b/ui/components/src/Tag/Tag.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 /* eslint react/jsx-key: 0 */
-import { jsx, Box } from 'theme-ui';
+import { jsx, Box, BoxProps } from 'theme-ui';
 import { FC } from 'react';
 import { transparentize } from 'polished';
 
@@ -19,15 +19,15 @@ export interface TagProps {
 /**
  * A copntainer component to display text in a colored box.
  */
-export const Tag: FC<TagProps> = ({
+export const Tag: FC<TagProps & BoxProps> = ({
   children,
   color,
   transparentAmount = 0.8,
   ...rest
 }) => (
   <Box
     as="span"
-    variant="tag"
+    variant="tag.default"
     {...rest}
     sx={{
       backgroundColor: transparentize(transparentAmount, color),

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -257,24 +257,72 @@ export const theme: Theme = {
   subtitle: {
     color: 'fadedText',
     fontWeight: 400,
-    paddingBottom: 1,
+    pb: 2,
   },
   subheading: {
     fontWeight: 400,
+    pb: 1,
   },
   title: {
     fontWeight: 800,
     pb: 4,
   },
   tag: {
-    display: 'inline-block',
-    px: 1,
+    default: {
+      display: 'inline-block',
+      px: 1,
+    },
+    rightmargin: {
+      mr: 1,
+      display: 'inline-block',
+      px: 1,
+    },
+    leftmargin: {
+      ml: 1,
+      display: 'inline-block',
+      px: 1,
+    },
   },
   zoom: {
     position: 'relative',
     transformOrigin: 'top left',
     transition: 'transform .2s',
   },
+  editpage: {
+    container: {
+      position: 'absolute',
+      right: 0,
+      top: 0,
+      p: 2,
+    },
+    inner: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    text: {
+      pl: 2,
+    },
+  },
+  pagecontainer: {
+    bg: 'background',
+    color: 'text',
+    fontFamily: 'body',
+    flex: '1 0 auto',
+    p: 4,
+    margin: 'auto',
+    width: '100%',
+    position: 'relative',
+  },
+  propstable: {
+    defaultvalue: {
+      whiteSpace: 'pre-wrap',
+    },
+  },
+  story: {
+    px: 4,
+    py: 3,
+  },
 };
 
 export const useTheme = (): Theme => {