Styled ExpandableTextfieldIcon (#189)

* feat: create expandable * feat: create expandabletextfield icon * feat: update customCss to expandabletextfield * feat: add onChange prop to stories * feat: update customCss * feat: add required props to stories * remove HOC and custom class Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]>
cmpsr · Nov 3, 2020 · b1bd4a3 · b1bd4a3
1 parent 6b49b70
commit b1bd4a3
Show file tree

Hide file tree

Showing 41 changed files with 708 additions and 135 deletions.
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.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/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/...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;

diff --git a/...omponents/src/components/primitives/Chat/ConversationSummary/ConversationSummary.test.tsx b/...omponents/src/components/primitives/Chat/ConversationSummary/ConversationSummary.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { ConversationSummary } from './ConversationSummary';
+import 'jest-styled-components';
 
 describe('ConversationSummary', () => {
   const testID = 'conversationSummary';
@@ -24,15 +25,17 @@ describe('ConversationSummary', () => {
     render(
       <ConversationSummary
         id="1"
-        messageCss="customCss"
+        messageCss="color: violet"
         title="I'm a fancy title"
         description="I'm a fancy description"
         message="I'm the message"
         time="02:30 PM"
       />
     );
     const message = screen.getByText("I'm the message");
-    expect(message).toHaveClass('custom');
+    expect(message).toHaveStyleRule('color', 'violet', {
+      modifier: '&&&',
+    });
   });
   it('should render title, description, message and time', () => {
     render(

diff --git a/packages/styled-components/src/components/primitives/Form/ErrorField/ErrorField.styled.ts b/packages/styled-components/src/components/primitives/Form/ErrorField/ErrorField.styled.ts
@@ -5,15 +5,16 @@ import {
   StyledCssProps,
   StyledBaseProps,
 } from 'components/Components.styled.types';
-import { withCustomCss } from 'utils/withCustomCss';
+import { customCss } from 'utils/customCss';
 
-export const StyledWrapper = withCustomCss(styled.span<StyledCssProps>`
+export const StyledWrapper = styled.span<StyledCssProps>`
   display: flex;
   align-items: center;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   margin-left: 0.75rem;
-`);
+  ${(props) => customCss(props)}
+`;
 
 export const StyledIcon = styled(Icon)<StyledBaseProps>`
   color: ${(props) => getTheme(props).colors.fillSystemError};

diff --git a/...onents/src/components/primitives/Form/ExpandableTextField/ExpandableTextField.stories.tsx b/...onents/src/components/primitives/Form/ExpandableTextField/ExpandableTextField.stories.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { ExpandableTextField } from '.';
+import { action } from '@storybook/addon-actions';
+import { text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Primitives/Form/ExpandableTextField',
+  component: ExpandableTextField,
+};
+
+export const Shapes = () => (
+  <>
+    <h1>ExpandableTextField shapes</h1>
+    {Object.keys(ExpandableTextField.Shapes).map((shape: any, i) => (
+      <div key={i}>
+        <ExpandableTextField
+          shape={ExpandableTextField.Shapes[shape]}
+          placeholder={shape}
+          onChange={action('On change')}
+        />
+        <br />
+      </div>
+    ))}
+  </>
+);
+
+export const Playground = () => (
+  <>
+    <h1>Playground</h1>
+    <ExpandableTextField
+      placeholder={text('Placeholder', 'placeholder')}
+      shape={select(
+        'Shape',
+        ExpandableTextField.Shapes,
+        ExpandableTextField.Shapes.Rounded
+      )}
+      customCss={text(
+        'Custom css',
+        'background: #c5c5ff; border: 1px dashed #004fff; padding: 10px;'
+      )}
+      onChange={action('On change')}
+    />
+  </>
+);
diff --git a/...mponents/src/components/primitives/Form/ExpandableTextField/ExpandableTextField.styled.ts b/...mponents/src/components/primitives/Form/ExpandableTextField/ExpandableTextField.styled.ts
@@ -0,0 +1,73 @@
+import { StyledCssProps } from 'components/Components.styled.types';
+import styled from 'styled-components';
+import { customCss } from 'utils/customCss';
+import { getTheme } from 'utils/getTheme';
+
+export const StyledWrapper = styled.div<StyledCssProps>`
+  position: relative;
+  width: 100%;
+  ${(props) => customCss(props)}
+`;
+
+export const StyledPlaceholder = styled.div<StyledCssProps>`
+  line-height: 1.5rem;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 1rem;
+  z-index: 20;
+  color: ${(props) => getTheme(props).colors.outlineFormFilled};
+  font-size: ${(props) => getTheme(props).Typography.sm.fontSize.form};
+  font-family: ${(props) => getTheme(props).Typography.sm.fontFamily.form};
+
+  @media (min-width: ${(props) => getTheme(props).breakpoints.md}) {
+    font-size: ${(props) => getTheme(props).Typography.md.fontSize.form};
+    font-family: ${(props) => getTheme(props).Typography.md.fontFamily.form};
+  }
+`;
+
+export const StyledExpandable = styled.div<StyledCssProps>`
+  line-height: 1.5rem;
+  background-color: ${(props) => getTheme(props).colors.fillFormEnabled};
+  display: block;
+  width: 100%;
+  color: ${(props) => getTheme(props).Typography.colors.dark100};
+  z-index: 10;
+  font-size: ${(props) => getTheme(props).Typography.sm.fontSize.form};
+  font-family: ${(props) => getTheme(props).Typography.sm.fontFamily.form};
+  appearance: none;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${(props) => getTheme(props).colors.outlineFormFilled};
+  min-height: 2.625rem;
+  height: 2.625rem;
+  position: relative;
+  left: 0;
+  top: 0;
+  padding: 0.625rem 1rem;
+  resize: none;
+  box-sizing: border-box;
+
+  &.rounded {
+    border-radius: ${(props) => getTheme(props).Input.borderRadius.rounded};
+  }
+  &.semiRounded {
+    border-radius: ${(props) => getTheme(props).Input.borderRadius.semiRounded};
+  }
+  &.rectangle {
+    border-radius: ${(props) => getTheme(props).Input.borderRadius.rectangle};
+  }
+
+  &:focus {
+    border-color: ${(props) => getTheme(props).colors.outlineFormFocus};
+    outline: none;
+  }
+
+  @media (min-width: ${(props) => getTheme(props).breakpoints.md}) {
+    min-height: 3rem;
+    height: 3rem;
+    font-size: ${(props) => getTheme(props).Typography.md.fontSize.form};
+    font-family: ${(props) => getTheme(props).Typography.md.fontFamily.form};
+  }
+`;