From 3048cfe895e9a1e775d2f8f799712920c357c780 Mon Sep 17 00:00:00 2001 From: Khatchig Anteblian Date: Sat, 15 Jan 2022 17:19:52 -0500 Subject: [PATCH 1/4] Added TextBubble component --- .../TextBubble/TextBubble.stories.tsx | 30 ++++++ src/Containers/TextBubble/TextBubble.tsx | 96 +++++++++++++++++++ 2 files changed, 126 insertions(+) create mode 100644 src/Containers/TextBubble/TextBubble.stories.tsx create mode 100644 src/Containers/TextBubble/TextBubble.tsx diff --git a/src/Containers/TextBubble/TextBubble.stories.tsx b/src/Containers/TextBubble/TextBubble.stories.tsx new file mode 100644 index 00000000..0a1c53c0 --- /dev/null +++ b/src/Containers/TextBubble/TextBubble.stories.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import TextBubble, { ITextBubbleProps } from './TextBubble'; + +export default { + title: 'Components/Text Bubble', + component: TextBubble, +} as Meta; + +const Template: Story = (args) => ( + +); + +export const Basic = Template.bind({}); +Basic.args = { + content:

Basic text bubble (other generated)

, + fromBot: true +} + +export const User = Template.bind({}); +User.args = { + content:

Basic text bubble (user generated)

, + fromBot: false +} + +export const NoText = Template.bind({}); +NoText.args = { + content:

, + fromBot: true +} diff --git a/src/Containers/TextBubble/TextBubble.tsx b/src/Containers/TextBubble/TextBubble.tsx new file mode 100644 index 00000000..b38adaf1 --- /dev/null +++ b/src/Containers/TextBubble/TextBubble.tsx @@ -0,0 +1,96 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Mixins } from '../../Utils'; + +export interface ITextBubbleProps { + content: React.ReactElement; + fromBot: boolean; +} + +export const TextBubble = ({content, fromBot, ...props}: ITextBubbleProps): React.ReactElement => { + return ( + + +
+ { content } +
+ + + ); +} + +const textMarginSize = "10px"; + +const container_margin = "10px"; +const BubbleContainer = styled.div<{ fromBot: boolean }>` + ${Mixins.flex("row")}; + ${Mixins.flex("center")}; + position: relative; + + maxwidth: "80%"; + width: "fit-content"; + ${({ fromBot }): string => + fromBot + ? ` + justify-content: left; + margin-left: 0px; + margin-right: ${container_margin}; + ` + : ` + justify-content: right; + margin-left: ${container_margin}; + margin-right: 0px; + ` + } + marginTop: standardMarginSize; + margin-top: -20px; + margin-bottom: 20px; + ${({ theme }): string => ` + padding: ${theme.dimensions.padding.withBorder}; + `} + + animation: appear 0.5s ease-in 1; + @keyframes appear { + from { + opacity: 0; + } + to { + opacity: 100; + } + } +` + +const bubble_margin = "50px"; +const Bubble = styled.div<{ fromBot: boolean }>` + ${({ fromBot }): string => + fromBot + ? ` + margin-left: ${bubble_margin}; + margin-right: 0px; + ` + : ` + margin-left: 0px; + margin-right: ${bubble_margin}; + ` + } + border: 1.5px solid rgba(0, 0, 0, 0.1); + ${({ theme, fromBot }): string => + fromBot + ? ` + border-radius: 20px 20px 20px 5px; + background-color: ${theme.colors["background"]}; + ` + : ` + border-radius: 20px 20px 5px 20px; + background-color: ${theme.colors["primary"]}; + ` + } + margin-bottom: 10px; +`; + +export default TextBubble; From 78f7a39557797c004a8d6e19095f6e7c20e1f251 Mon Sep 17 00:00:00 2001 From: Khatchig Anteblian Date: Fri, 21 Jan 2022 18:43:30 -0500 Subject: [PATCH 2/4] Implemented typing indicator dots --- src/Text/TypingDots/TypingDots.stories.tsx | 12 +++++ src/Text/TypingDots/TypingDots.tsx | 54 ++++++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 src/Text/TypingDots/TypingDots.stories.tsx create mode 100644 src/Text/TypingDots/TypingDots.tsx diff --git a/src/Text/TypingDots/TypingDots.stories.tsx b/src/Text/TypingDots/TypingDots.stories.tsx new file mode 100644 index 00000000..0ce0153e --- /dev/null +++ b/src/Text/TypingDots/TypingDots.stories.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import TypingDots, { ITypingDotsProps } from './TypingDots'; + +export default { + title: 'Components/Typing Indicator Dots', + component: TypingDots +} as Meta; + +export const Basic: Story = () => ( + +); diff --git a/src/Text/TypingDots/TypingDots.tsx b/src/Text/TypingDots/TypingDots.tsx new file mode 100644 index 00000000..60fa2ffd --- /dev/null +++ b/src/Text/TypingDots/TypingDots.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import styled from 'styled-components'; + +export interface ITypingDotsProps { + num: number; + delayStep: number; +} + +export const TypingDots = ({ num, delayStep, ...props }: ITypingDotsProps): React.ReactElement => { + + let dots = []; + + for (let i = 0; i < num; i ++) { + dots.push(); + } + + return ( + + { dots } + + ); +} + +const DotContainer = styled.div` + margin: 10px; + display: flex; + flex-direction: row; +` + +const Dot = styled.div<{ delay: number }>` + width: 10px; + height: 10px; + border-radius: 50%; + margin: 10px 5px 10px 5px; + ${({ theme }): string => ` + background-color: ${theme.colors.border}; + `} + animation: bounce 0.5s ease-in-out infinite; + animation-delay: ${p => p.delay}s; + + @keyframes bounce { + 10% { + transform: translateY(0); + } + 50% { + transform: translateY(-25%); + } + 90% { + transform: translateY(25%); + } + } +` + +export default TypingDots; From 189ab68202db2c7758987720d6867c8b34963acc Mon Sep 17 00:00:00 2001 From: Khatchig Anteblian Date: Fri, 21 Jan 2022 18:48:51 -0500 Subject: [PATCH 3/4] Added new story using TypingDots component --- src/Containers/TextBubble/TextBubble.stories.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/Containers/TextBubble/TextBubble.stories.tsx b/src/Containers/TextBubble/TextBubble.stories.tsx index 0a1c53c0..cf337198 100644 --- a/src/Containers/TextBubble/TextBubble.stories.tsx +++ b/src/Containers/TextBubble/TextBubble.stories.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import TextBubble, { ITextBubbleProps } from './TextBubble'; +import TypingDots from '../../Text/TypingDots/TypingDots'; export default { title: 'Components/Text Bubble', @@ -28,3 +29,9 @@ NoText.args = { content:

, fromBot: true } + +export const Typing = Template.bind({}); +Typing.args = { + content: , + fromBot: true +} From 1deec7ba5ea8258966f9492171a16022ad53d417 Mon Sep 17 00:00:00 2001 From: Khatchig Anteblian Date: Sat, 29 Jan 2022 07:59:51 -0500 Subject: [PATCH 4/4] Addressed requested changes --- .../TextBubble/TextBubble.stories.tsx | 18 ++- src/Containers/TextBubble/TextBubble.tsx | 107 ++++++++---------- 2 files changed, 63 insertions(+), 62 deletions(-) diff --git a/src/Containers/TextBubble/TextBubble.stories.tsx b/src/Containers/TextBubble/TextBubble.stories.tsx index cf337198..9e0537ce 100644 --- a/src/Containers/TextBubble/TextBubble.stories.tsx +++ b/src/Containers/TextBubble/TextBubble.stories.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import TextBubble, { ITextBubbleProps } from './TextBubble'; import TypingDots from '../../Text/TypingDots/TypingDots'; +import { Robot } from '@styled-icons/remix-fill/Robot'; export default { title: 'Components/Text Bubble', @@ -33,5 +34,20 @@ NoText.args = { export const Typing = Template.bind({}); Typing.args = { content: , - fromBot: true + fromBot: true, + icon: Robot +} + +export const CustomStyled = Template.bind({}); +CustomStyled.args = { + content:

Text bubble with custom styles

, + fromBot: true, + bubbleStyle: { + backgroundColor: 'yellow', + borderRadius: '15px' + }, + iconStyle: { + borderRadius: '5px' + }, + icon: Robot } diff --git a/src/Containers/TextBubble/TextBubble.tsx b/src/Containers/TextBubble/TextBubble.tsx index b38adaf1..c4edf515 100644 --- a/src/Containers/TextBubble/TextBubble.tsx +++ b/src/Containers/TextBubble/TextBubble.tsx @@ -1,58 +1,71 @@ import React from 'react'; import styled from 'styled-components'; -import { Mixins } from '../../Utils'; +import { Robot, User } from '@styled-icons/fa-solid/'; export interface ITextBubbleProps { content: React.ReactElement; fromBot: boolean; + icon: React.ReactElement; + iconSize: number; + iconStyle: React.HTMLAttrs; + bubbleStyle: React.HTMLAttrs; } -export const TextBubble = ({content, fromBot, ...props}: ITextBubbleProps): React.ReactElement => { +export const TextBubble = ({content, fromBot, icon, iconSize, iconStyle, bubbleStyle, ...props}: ITextBubbleProps): React.ReactElement => { + if (!icon) + icon = fromBot ? Robot : User; + + if (!iconSize) + iconSize = 25; + return ( - - -
- { content } -
+ + { fromBot && + + } + + + { content } + + { !fromBot && + + } ); } -const textMarginSize = "10px"; +const StyledImg = styled.svg<{ imgSize: number }>` + ${({ imgSize }) => ` + width: ${imgSize}px; + height: ${imgSize}px; + `} + margin: 0 10px; + border-radius: 999px; + border-style: solid; + padding: 10px; +` + +const BubbleContainer = styled.div` + display: inline-block; +` -const container_margin = "10px"; -const BubbleContainer = styled.div<{ fromBot: boolean }>` - ${Mixins.flex("row")}; - ${Mixins.flex("center")}; - position: relative; +const Bubble = styled.div<{ fromBot: boolean }>` + display: inline-block; + border: 1.5px solid rgba(0, 0, 0, 0.1); + padding: 0 10px; - maxwidth: "80%"; - width: "fit-content"; - ${({ fromBot }): string => + ${({ theme, fromBot }): string => fromBot ? ` - justify-content: left; - margin-left: 0px; - margin-right: ${container_margin}; + border-radius: 20px 20px 20px 5px; + background-color: ${theme.colors["background"]}; ` : ` - justify-content: right; - margin-left: ${container_margin}; - margin-right: 0px; + border-radius: 20px 20px 5px 20px; + background-color: ${theme.colors["primary"]}; ` } - marginTop: standardMarginSize; - margin-top: -20px; - margin-bottom: 20px; - ${({ theme }): string => ` - padding: ${theme.dimensions.padding.withBorder}; - `} animation: appear 0.5s ease-in 1; @keyframes appear { @@ -63,34 +76,6 @@ const BubbleContainer = styled.div<{ fromBot: boolean }>` opacity: 100; } } -` - -const bubble_margin = "50px"; -const Bubble = styled.div<{ fromBot: boolean }>` - ${({ fromBot }): string => - fromBot - ? ` - margin-left: ${bubble_margin}; - margin-right: 0px; - ` - : ` - margin-left: 0px; - margin-right: ${bubble_margin}; - ` - } - border: 1.5px solid rgba(0, 0, 0, 0.1); - ${({ theme, fromBot }): string => - fromBot - ? ` - border-radius: 20px 20px 20px 5px; - background-color: ${theme.colors["background"]}; - ` - : ` - border-radius: 20px 20px 5px 20px; - background-color: ${theme.colors["primary"]}; - ` - } - margin-bottom: 10px; `; export default TextBubble;