feat: components in theme

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

Hide file tree

Showing 22 changed files with 149 additions and 151 deletions.
diff --git a/integrations/storybook/src/docs-page/DocsContainer.tsx b/integrations/storybook/src/docs-page/DocsContainer.tsx
@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import { Theme } from 'theme-ui';
 import {
   PageContainer as BlockPageContainer,
   BlockContextProvider,
@@ -25,7 +24,7 @@ export const PageContextContainer: FC = ({ children }) => {
   );
 };
 
-export const DocsContainer: FC<DocsContainerProps & {
+export const DocsContainer: FC<{
   active?: boolean;
 }> = ({ children, active = true }) =>
   active ? <PageContextContainer>{children}</PageContextContainer> : null;
diff --git a/plugins/axe-plugin/src/components/NodesTable.tsx b/plugins/axe-plugin/src/components/NodesTable.tsx
@@ -89,7 +89,7 @@ export const NodesTable: FC<NodesTableProps> = ({
                   <Tag
                     key={`${target}`}
                     color="lightgrey"
-                    sxStyle={{
+                    sx={{
                       mr: 1,
                       mb: 1,
                     }}

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

diff --git a/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx b/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx
@@ -33,7 +33,6 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
   id,
   of,
   children,
-  sxStyle,
   visibility,
   ...rest
 }) => {
@@ -79,12 +78,7 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
   );
   // console.log(child);
   return (
-    <BlockContainer
-      title={title}
-      collapsible={collapsible}
-      id={id}
-      sxStyle={sxStyle}
-    >
+    <BlockContainer title={title} collapsible={collapsible} id={id}>
       {block}
     </BlockContainer>
   );

diff --git a/ui/blocks/src/ComponentDeps/Dependencies.tsx b/ui/blocks/src/ComponentDeps/Dependencies.tsx
@@ -92,7 +92,7 @@ export const Dependencies: FC<DependenciesProps> = ({ dependencies }) => {
                   color={
                     v.importedName === defaultExport ? 'green' : 'lightgrey'
                   }
-                  sxStyle={{
+                  sx={{
                     mr: 1,
                     mb: 1,
                   }}

diff --git a/ui/blocks/src/PropsTable/BasePropsTable.tsx b/ui/blocks/src/PropsTable/BasePropsTable.tsx
@@ -161,11 +161,7 @@ export const BasePropsTable: FC<BasePropsTableProps> = ({
             </Text>
           );
           return required ? (
-            <Tag
-              color="red"
-              transparentAmount={0.95}
-              sxStyle={{ borderRadius: 4 }}
-            >
+            <Tag color="red" transparentAmount={0.95} sx={{ borderRadius: 4 }}>
               {text}
             </Tag>
           ) : (
@@ -210,7 +206,7 @@ export const BasePropsTable: FC<BasePropsTableProps> = ({
                           key={`${name}_${value || typeName}`}
                           color="grey"
                           transparentAmount={0.9}
-                          sxStyle={{
+                          sx={{
                             mr: 1,
                           }}
                         >

diff --git a/ui/blocks/src/StoryConfig/StoryConfig.stories.tsx b/ui/blocks/src/StoryConfig/StoryConfig.stories.tsx
@@ -75,6 +75,6 @@ export const notCollapsible = () => (
 
 export const noMargin = () => (
   <MockContext storyId="id-of-story">
-    <StoryConfig sxStyle={{ mt: 0, mb: 0 }} />
+    <StoryConfig sx={{ mt: 0, mb: 0 }} />
   </MockContext>
 );
diff --git a/ui/blocks/src/StorySource/StorySource.stories.tsx b/ui/blocks/src/StorySource/StorySource.stories.tsx
@@ -75,6 +75,6 @@ export const notCollapsible = () => (
 
 export const noMargin = () => (
   <MockContext storyId="id-of-story">
-    <StorySource sxStyle={{ mt: 0, mb: 0 }} />
+    <StorySource sx={{ mt: 0, mb: 0 }} />
   </MockContext>
 );
diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx
@@ -56,11 +56,10 @@ export const ActionBar: FC<ActionBarProps> = ({ actions = [] }) => {
         return (
           <Box
             key={`${typeof title === 'string' ? title : 'item'}_${index}`}
+            variant="actionbar.item"
             sx={{
-              mt: 1,
               mr: index === 0 ? 1 : 0,
               ml: nextGroup !== group || group === undefined ? 2 : 1,
-              fontSize: 1,
               a: ActionColors({ theme, disabled }),
               button: ActionColors({ theme, disabled }),
             }}
@@ -81,28 +80,9 @@ export const ActionBar: FC<ActionBarProps> = ({ actions = [] }) => {
       },
     );
   }, [theme, actions]);
-
   return (
-    <div
-      sx={{
-        position: 'relative',
-      }}
-    >
-      <Flex
-        sx={{
-          position: 'absolute',
-          width: '100%',
-        }}
-      >
-        <Flex
-          sx={{
-            flexDirection: 'row-reverse',
-            marginLeft: 'auto',
-          }}
-        >
-          {items}
-        </Flex>
-      </Flex>
-    </div>
+    <Box variant="actionbar.container">
+      <Flex variant="actionbar.inner">{items}</Flex>
+    </Box>
   );
 };
diff --git a/ui/components/src/ActionContainer/ActionContainer.tsx b/ui/components/src/ActionContainer/ActionContainer.tsx
@@ -1,19 +1,8 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import styled from '@emotion/styled';
-import { jsx, Box, Theme } from 'theme-ui';
+import { jsx, Box } from 'theme-ui';
 import { ActionBar, ActionItem } from '../ActionBar';
 
-const StyledContainer = styled(Box)`
-  ${({ theme }: { theme: Theme }) => `
-    border-radius: 4px;
-    box-shadow: 0px 1px 3px 0px ${theme.colors?.shadow};
-    border: 1px solid  ${theme.colors?.shadow};
-    display: flex;
-    flex-direction: column;
-  `}
-`;
-
 export interface ActionContainerProps {
   /**
    * optional actions provided to the component
@@ -35,11 +24,10 @@ export const ActionContainer: FC<ActionContainerProps> = ({
   plain,
 }) => {
   const hasActions = actions && !!actions.length;
-
   return (
     <div>
       {hasActions && <ActionBar actions={actions} />}
-      {plain ? children : <StyledContainer>{children}</StyledContainer>}
+      {plain ? children : <Box variant="actioncontainer">{children}</Box>}
     </div>
   );
 };
diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -8,6 +8,7 @@ import Octicon, {
 } from '@primer/octicons-react';
 import { Markdown } from '../Markdown';
 import { Subtitle } from '../Subtitle';
+import { Subheading } from '../Subheading';
 import { Collapsible } from '../Collapsible';
 import { pageLink } from './pageLink';
 
@@ -58,51 +59,19 @@ export const BlockContainer: FC<BlockContainerProps> = ({
       ? id
       : undefined ||
         (title ? title.toLowerCase().replace(/\s/g, '-') : undefined);
-  const BlockTitle: FC = () => (
-    <Subtitle
-      color="text"
-      as={collapsible ? 'h2' : 'h3'}
-      css={{ fontWeight: 400, paddingRight: 10 }}
-    >
-      {title}
-    </Subtitle>
-  );
+  const BlockTitle: FC = () =>
+    collapsible ? (
+      <Subtitle>{title}</Subtitle>
+    ) : (
+      <Subheading>{title}</Subheading>
+    );
   return (
-    <Box
-      sx={{
-        position: 'relative',
-        mt: 4,
-        mb: 4,
-        width: '100%',
-        scrollMarginTop: '5rem',
-        ...sxStyle,
-      }}
-      id={blockId}
-    >
+    <Box variant="blockcontainer.container" sx={sxStyle} id={blockId}>
       {(blockId || title || collapsible) && (
-        <Flex
-          sx={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            pb: title ? 2 : 0,
-            ':hover': {
-              a: {
-                visibility: 'visible',
-              },
-            },
-          }}
-        >
+        <Flex variant="blockcontainer.inner">
           {blockId && (
             <Link
-              sx={{
-                position: 'absolute',
-                left: -4,
-                px: 2,
-                visibility: 'hidden',
-                ':hover': {
-                  visibility: 'visible',
-                },
-              }}
+              variant="blockcontainer.link"
               href={pageLink(blockId)}
               data-title={title}
             >
@@ -119,7 +88,10 @@ export const BlockContainer: FC<BlockContainerProps> = ({
             >
               <Flex sx={{ flexDirection: 'row', alignItems: 'center' }}>
                 <BlockTitle />
-                <Octicon icon={isOpen ? ChevronDown : ChevronRight} />
+                <Octicon
+                  sx={{ ml: 2 }}
+                  icon={isOpen ? ChevronDown : ChevronRight}
+                />
               </Flex>
             </Link>
           )}

diff --git a/ui/components/src/Subheading/Subheading.tsx b/ui/components/src/Subheading/Subheading.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { Heading, HeadingProps } from 'theme-ui';
+
+export type SubheadingProps = Omit<HeadingProps, 'as'>;
+
+/**
+ * `h3` level headings
+ */
+export const Subheading: FC<SubheadingProps> = ({ children, ...rest }) => {
+  return (
+    <Heading as="h3" variant="subheading" {...rest}>
+      {children}
+    </Heading>
+  );
+};
diff --git a/ui/components/src/Subheading/Subjeading.stories.tsx b/ui/components/src/Subheading/Subjeading.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Subheading, SubheadingProps } from './Subheading';
+
+export default {
+  title: 'Components/Subheading',
+  component: Subheading,
+};
+
+export const overview = ({ children }: SubheadingProps) => {
+  return <Subheading>{children}</Subheading>;
+};
+
+overview.story = {
+  controls: {
+    children: { type: 'text', value: 'Subheading text' },
+  },
+};
diff --git a/ui/components/src/Subheading/index.ts b/ui/components/src/Subheading/index.ts
@@ -0,0 +1 @@
+export * from './Subheading';
diff --git a/ui/components/src/Subtitle/Subtitle.stories.tsx b/ui/components/src/Subtitle/Subtitle.stories.tsx
@@ -18,7 +18,3 @@ overview.story = {
     children: { type: 'text', value: 'Subtitle text' },
   },
 };
-
-export const as = () => {
-  return <Subtitle as="h2">Subtitle text</Subtitle>;
-};
diff --git a/ui/components/src/Subtitle/Subtitle.tsx b/ui/components/src/Subtitle/Subtitle.tsx
@@ -16,20 +16,12 @@ export type SubtitleProps = SubtitleOwnProps &
   Omit<HeadingProps, 'children' | 'as'>;
 
 /**
- * `h3` level heading with faded text and font-weight 400.
+ * `h2` level heading with faded text and font-weight 400.
  */
-export const Subtitle: FC<SubtitleProps> = ({
-  children,
-  as = 'h2',
-  ...rest
-}) => (
-  <Heading
-    as={as}
-    color="fadedText"
-    variant={`styles.${as}`}
-    css={{ fontWeight: 400, paddingBottom: 2 }}
-    {...rest}
-  >
-    {children}
-  </Heading>
-);
+export const Subtitle: FC<SubtitleProps> = ({ children, ...rest }) => {
+  return (
+    <Heading as="h2" variant="subtitle" {...rest}>
+      {children}
+    </Heading>
+  );
+};
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, SxStyleProp, Box } from 'theme-ui';
+import { jsx, Box } from 'theme-ui';
 import { FC } from 'react';
 import { transparentize } from 'polished';
 
@@ -14,11 +14,6 @@ export interface TagProps {
    * transparent amount - 0 to 1
    */
   transparentAmount?: number;
-
-  /**
-   * theme-ui styling object for the container
-   */
-  sxStyle?: SxStyleProp;
 }
 
 /**
@@ -28,19 +23,16 @@ export const Tag: FC<TagProps> = ({
   children,
   color,
   transparentAmount = 0.8,
-  sxStyle,
   ...rest
 }) => (
   <Box
     as="span"
+    variant="tag"
     {...rest}
     sx={{
-      display: 'inline-block',
       backgroundColor: transparentize(transparentAmount, color),
-      paddingLeft: 1,
-      paddingRight: 1,
+      display: 'inline-block',
       border: `1px solid ${color}`,
-      ...sxStyle,
     }}
   >
     {children}
-Original file line number
+Diff line change
@@ Expand Up / @@ -89,7 +89,7 @@ export const NodesTable: FC<NodesTableProps> = ({ @@
                       <Tag
                         key={`${target}`}
                         color="lightgrey"
-                        sxStyle={{
+                        sx={{
                           mr: 1,
                           mb: 1,
                         }}
@@ Expand Down @@