Merge branch 'styled-components' of https://github.com/cmpsr/composer …

…into styled-expandabletextfield * 'styled-components' of https://github.com/cmpsr/composer: Styled ExpandableTextfieldIcon (#189) Use typescript config in tests and stories too (#191) Image customCss Implementation (#186) Styled TextField (#185) # Conflicts: # packages/styled-components/src/components/primitives/Form/ExpandableTextField/ExpandableTextField.styled.ts # packages/styled-components/src/components/primitives/index.ts
cmpsr · Nov 3, 2020 · a673b33 · a673b33
2 parents d2663d1 + b1bd4a3
commit a673b33
Show file tree

Hide file tree

Showing 52 changed files with 773 additions and 155 deletions.
diff --git a/packages/styled-components/.babelrc b/packages/styled-components/.babelrc
@@ -5,7 +5,6 @@
       "module-resolver",
       {
         "alias": {
-          "src": "./src",
           "components": "./src/components",
           "utils": "./src/utils",
           "tests": "./config/jest",

diff --git a/packages/styled-components/src/components/containers/Box/Box.styled.ts b/packages/styled-components/src/components/containers/Box/Box.styled.ts
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import { getTheme } from 'utils/getTheme';
 import { StyledCssProps } from 'components/Components.styled.types';
-import { withCustomCss } from 'utils/withCustomCss';
+import { customCss } from 'utils/customCss';
 
-export const StyledBox = withCustomCss(styled.div<StyledCssProps>`
+export const StyledBox = styled.div<StyledCssProps>`
   &.screen {
     width: 100vw;
     height: 100vh;
@@ -19,4 +19,5 @@ export const StyledBox = withCustomCss(styled.div<StyledCssProps>`
     margin-left: auto;
     max-width: ${(props) => getTheme(props).breakpoints.xl};
   }
-`);
+  ${(props) => customCss(props)}
+`;
diff --git a/packages/styled-components/src/components/containers/Box/Box.test.tsx b/packages/styled-components/src/components/containers/Box/Box.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Box } from '.';
+import 'jest-styled-components';
 
 describe('Box', () => {
   const testId = 'box';
@@ -14,9 +15,11 @@ describe('Box', () => {
     expect(box).toHaveClass('foo');
   });
   it('should render custom css', () => {
-    render(<Box customCss="customCss" />);
+    render(<Box customCss="color: violet" />);
     const box = screen.getByTestId(testId);
-    expect(box).toHaveClass('custom');
+    expect(box).toHaveStyleRule('color', 'violet', {
+      modifier: '&&&',
+    });
   });
   it('should render screen size', () => {
     render(<Box size={Box.Sizes.Screen}>foo</Box>);

diff --git a/packages/styled-components/src/components/containers/Grid/Grid.stories.tsx b/packages/styled-components/src/components/containers/Grid/Grid.stories.tsx
@@ -93,7 +93,7 @@ export const TwoColumnsDesktopOneMobileWithImages = () => (
       title="Create an Out-of-this-World website with this headline"
       subtitle="We are right now on the verge of finding out whether there is life elsewhere in the universe, and there are three ways we could find it."
       asset={{
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
         title: 'Image Title',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
       }}
@@ -102,7 +102,7 @@ export const TwoColumnsDesktopOneMobileWithImages = () => (
       title="Create an Out-of-this-World website with this headline"
       subtitle="We are right now on the verge of finding out whether there is life elsewhere in the universe, and there are three ways we could find it."
       asset={{
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
         title: 'Image Title',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
       }}
@@ -111,7 +111,7 @@ export const TwoColumnsDesktopOneMobileWithImages = () => (
       title="Create an Out-of-this-World website with this headline"
       subtitle="We are right now on the verge of finding out whether there is life elsewhere in the universe, and there are three ways we could find it."
       asset={{
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
         title: 'Image Title',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
       }}
@@ -120,7 +120,7 @@ export const TwoColumnsDesktopOneMobileWithImages = () => (
       title="Create an Out-of-this-World website with this headline"
       subtitle="We are right now on the verge of finding out whether there is life elsewhere in the universe, and there are three ways we could find it."
       asset={{
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
         title: 'Image Title',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
       }}
@@ -146,42 +146,42 @@ export const Playground = () => (
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
     <Asset
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
     <Asset
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
     <Asset
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
     <Asset
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
     <Asset
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
   </Grid>

diff --git a/packages/styled-components/src/components/containers/Grid/Grid.styled.ts b/packages/styled-components/src/components/containers/Grid/Grid.styled.ts
@@ -1,6 +1,8 @@
 import styled from 'styled-components';
-import { withCustomCss } from 'utils/withCustomCss';
+import { customCss } from 'utils/customCss';
+import { StyledCssProps } from 'components/Components.styled.types';
 
-export const StyledGrid = withCustomCss(styled.div`
+export const StyledGrid = styled.div<StyledCssProps>`
   display: grid;
-`);
+  ${(props) => customCss(props)}
+`;
diff --git a/packages/styled-components/src/components/containers/Grid/Grid.test.tsx b/packages/styled-components/src/components/containers/Grid/Grid.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Grid } from './Grid';
+import 'jest-styled-components';
 
 describe('Grid', () => {
   it('should render', () => {
@@ -17,8 +18,10 @@ describe('Grid', () => {
     expect(grid).toHaveClass('foo');
   });
   it('should render custom CSS as a class', () => {
-    const { getByTestId } = render(<Grid customCss="customCss">foo</Grid>);
+    const { getByTestId } = render(<Grid customCss="color: violet">foo</Grid>);
     const grid = getByTestId('grid');
-    expect(grid).toHaveClass('custom');
+    expect(grid).toHaveStyleRule('color', 'violet', {
+      modifier: '&&&',
+    });
   });
 });
diff --git a/packages/styled-components/src/components/containers/Section/Section.styled.ts b/packages/styled-components/src/components/containers/Section/Section.styled.ts
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
-import { withCustomCss } from 'utils/withCustomCss';
+import { customCss } from 'utils/customCss';
 import { StyledCssProps } from 'components/Components.styled.types';
 
-export const StyledSection = withCustomCss(styled.section<StyledCssProps>`
+export const StyledSection = styled.section<StyledCssProps>`
   margin-bottom: 1rem;
-`);
+  ${(props) => customCss(props)}
+`;
diff --git a/packages/styled-components/src/components/containers/Section/Section.test.tsx b/packages/styled-components/src/components/containers/Section/Section.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Section } from '.';
+import 'jest-styled-components';
 
 describe('Section', () => {
   it('should render with children', () => {
@@ -13,8 +14,10 @@ describe('Section', () => {
     expect(section).toHaveClass('foo');
   });
   it('should render custom css', () => {
-    render(<Section customCss="customCss" />);
+    render(<Section customCss="color: violet" />);
     const section = screen.getByTestId('section');
-    expect(section).toHaveClass('custom');
+    expect(section).toHaveStyleRule('color', 'violet', {
+      modifier: '&&&',
+    });
   });
 });
diff --git a/packages/styled-components/src/components/containers/SectionChild/SectionChild.styled.ts b/packages/styled-components/src/components/containers/SectionChild/SectionChild.styled.ts
@@ -1,10 +1,11 @@
 import styled from 'styled-components';
-import { withCustomCss } from 'utils/withCustomCss';
+import { customCss } from 'utils/customCss';
 import { StyledCssProps } from 'components/Components.styled.types';
 
 type Props = StyledCssProps;
 
-export const StyledSectionChild = withCustomCss(styled.div<Props>`
+export const StyledSectionChild = styled.div<Props>`
   padding-top: 2rem;
   padding-bottom: 2rem;
-`);
+  ${(props) => customCss(props)}
+`;
diff --git a/packages/styled-components/src/components/containers/SectionChild/SectionChild.test.tsx b/packages/styled-components/src/components/containers/SectionChild/SectionChild.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { SectionChild } from '.';
+import 'jest-styled-components';
 
 describe('SectionChild', () => {
   it('should render', () => {
@@ -13,9 +14,11 @@ describe('SectionChild', () => {
     expect(sectionChild).toHaveClass('foo');
   });
   it('should render custom CSS as class', () => {
-    render(<SectionChild customCss="customCss" />);
+    render(<SectionChild customCss="color: violet" />);
     const sectionChild = screen.getByTestId('sectionChild');
-    expect(sectionChild).toHaveClass('custom');
+    expect(sectionChild).toHaveStyleRule('color', 'violet', {
+      modifier: '&&&',
+    });
   });
   it('should render children', () => {
     render(<SectionChild>Children</SectionChild>);

diff --git a/packages/styled-components/src/components/primitives/Asset/Asset.test.tsx b/packages/styled-components/src/components/primitives/Asset/Asset.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Asset } from './Asset';
+import { Asset } from '.';
+import { ContentType } from './Asset.types';
 
 describe('Asset', () => {
   it('should render an image asset type', () => {
@@ -12,7 +13,7 @@ describe('Asset', () => {
     screen.getByTestId('video');
   });
 
-  const givenComponentRendered = (type: Asset.ContentType) =>
+  const givenComponentRendered = (type: ContentType) =>
     render(
       <Asset
         asset={{

diff --git a/packages/styled-components/src/components/primitives/Asset/Asset.tsx b/packages/styled-components/src/components/primitives/Asset/Asset.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Video } from 'components/primitives/Video';
 import { Image } from 'components/primitives/Image';
-import { Props, ContentType } from './Asset.types';
+import { Props, Type, ContentType } from './Asset.types';
 
-export const Asset = ({
+export const Asset: Type = ({
   autoPlay,
   controls,
   className,

diff --git a/packages/styled-components/src/components/primitives/Asset/Asset.types.ts b/packages/styled-components/src/components/primitives/Asset/Asset.types.ts
@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import { BaseProps } from 'components/Components.types';
 
 export type Props = BaseProps & {
@@ -7,6 +8,10 @@ export type Props = BaseProps & {
   controls?: boolean;
 };
 
+export type Type = FunctionComponent<Props> & {
+  ContentType?: typeof ContentType;
+};
+
 export enum ContentType {
   Image = 'image',
   Video = 'video',

diff --git a/packages/styled-components/src/components/primitives/Avatars/AvatarText/AvatarText.styled.ts b/packages/styled-components/src/components/primitives/Avatars/AvatarText/AvatarText.styled.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { getTheme } from 'utils/getTheme';
 import { Typography } from 'components/primitives/Typography';
-import { withCustomCss } from 'utils/withCustomCss';
+import { customCss } from 'utils/customCss';
 import {
   StyledBaseProps,
   StyledCssProps,
@@ -46,7 +46,7 @@ export const StyledTypography = styled(Typography)`
   padding: 0.15rem;
 `;
 
-export const StyledHighlighter = withCustomCss(styled.div<Props>`
+export const StyledHighlighter = styled.div<Props>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -70,4 +70,5 @@ export const StyledHighlighter = withCustomCss(styled.div<Props>`
     width: 4rem;
     height: 4rem;
   }
-`);
+  ${(props) => customCss(props)}
+`;
diff --git a/...d-components/src/components/primitives/Chat/ConversationList/ConversationList.stories.tsx b/...d-components/src/components/primitives/Chat/ConversationList/ConversationList.stories.tsx
@@ -24,7 +24,7 @@ export const Conversations = () => (
     <ConversationList
       conversations={[
         {
-          id: 1,
+          id: '1',
           title: 'Pau Teruel',
           description: 'Description',
           message: 'Message',
@@ -35,7 +35,7 @@ export const Conversations = () => (
           unreadMessages: 0,
         },
         {
-          id: 2,
+          id: '2',
           title: 'John Cena',
           description: 'Description',
           message: 'Message',

diff --git a/...yled-components/src/components/primitives/Chat/ConversationList/ConversationList.test.tsx b/...yled-components/src/components/primitives/Chat/ConversationList/ConversationList.test.tsx
@@ -4,7 +4,7 @@ import { ConversationList } from '.';
 
 describe('ConversationList', () => {
   const testId = 'conversationList';
-  it('should render classname', () => {
+  it('should render class name', () => {
     render(<ConversationList className="foo" conversations={[]} />);
     const conversationList = screen.getByTestId(testId);
     expect(conversationList).toHaveClass('foo');
@@ -27,7 +27,6 @@ describe('ConversationList', () => {
             title: 'title',
             description: 'description',
             message: 'message',
-            messageClassName: 'italic',
             time: 'time',
             avatarText: 'avatarText',
             isHighlighted: false,
@@ -41,7 +40,6 @@ describe('ConversationList', () => {
             title: 'title',
             description: 'description',
             message: 'message',
-            messageClassName: 'italic',
             time: 'time',
             avatarText: 'avatarText',
             isHighlighted: false,

diff --git a/...mponents/src/components/primitives/Chat/ConversationSummary/ConversationSummary.styled.ts b/...mponents/src/components/primitives/Chat/ConversationSummary/ConversationSummary.styled.ts
@@ -3,7 +3,7 @@ import { getTheme } from 'utils/getTheme';
 import { Typography } from 'components/primitives/Typography';
 import { Props as TypographyProps } from 'components/primitives/Typography/Typography.types';
 import { Icon } from 'components/primitives/Icon';
-import { withCustomCss } from 'utils/withCustomCss';
+import { customCss } from 'utils/customCss';
 import {
   StyledBaseProps,
   StyledCssProps,
@@ -71,9 +71,7 @@ export const StyledProfileDescription = styled(Typography)`
   ${truncate}
 `;
 
-export const StyledProfileMessage = withCustomCss<
-  Props & TypographyProps
->(styled(Typography)`
+export const StyledProfileMessage = styled(Typography)<StyledCssProps>`
   margin-top: 0rem;
   margin-bottom: 0rem;
   ${truncate}
@@ -82,7 +80,9 @@ export const StyledProfileMessage = withCustomCss<
   &.error {
     color: ${(props) => getTheme(props).colors.fillSystemError};
   }
-`);
+
+  ${(props) => customCss(props)}
+`;
 
 export const StyledNotificationContainer = styled.div`
   display: flex;