diff --git a/src/components/Icon/data.ts b/src/components/Icon/data.ts index d244f633b..d0e3e3cc5 100644 --- a/src/components/Icon/data.ts +++ b/src/components/Icon/data.ts @@ -11,11 +11,14 @@ import Instagram from './icons/instagram.svg?react'; import LeftArrow from './icons/left-arrow.svg?react'; import Mag from './icons/mag.svg?react'; import Minus from './icons/minus.svg?react'; +import Mobile from './icons/Mobile.svg?react'; +import Pc from './icons/Pc.svg?react'; import Plus from './icons/plus.svg?react'; import RightArrow from './icons/right-arrow.svg?react'; import SmallCircleFilled from './icons/small-circle-filled.svg?react'; import StarFilled from './icons/star-filled.svg?react'; import Star from './icons/star.svg?react'; +import Tablet from './icons/Tablet.svg?react'; import TikTok from './icons/tiktok.svg?react'; import TriangleLeftArrow from './icons/TriangleLeftArrow.svg?react'; import Twitter from './icons/twitter.svg?react'; @@ -33,11 +36,14 @@ export const icons = { 'left-arrow': LeftArrow, mag: Mag, minus: Minus, + mobile: Mobile, + pc: Pc, plus: Plus, 'right-arrow': RightArrow, 'small-circle-filled': SmallCircleFilled, star: Star, 'star-filled': StarFilled, + tablet: Tablet, tiktok: TikTok, 'triangle-drop-arrow': TriangleDropArrow, 'triangle-left-arrow': TriangleLeftArrow, diff --git a/src/components/Icon/icons/Mobile.svg b/src/components/Icon/icons/Mobile.svg new file mode 100644 index 000000000..e3c35380f --- /dev/null +++ b/src/components/Icon/icons/Mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icon/icons/Pc.svg b/src/components/Icon/icons/Pc.svg new file mode 100644 index 000000000..61a5cf62d --- /dev/null +++ b/src/components/Icon/icons/Pc.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icon/icons/Tablet.svg b/src/components/Icon/icons/Tablet.svg new file mode 100644 index 000000000..02a2c8fe6 --- /dev/null +++ b/src/components/Icon/icons/Tablet.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx b/src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx index 72c9d2e7c..bf480db81 100644 --- a/src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx +++ b/src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx @@ -117,12 +117,14 @@ function ComposerEditor(props: ComposerEditorProps): ReactNode { placeholder="Digite algo aqui..." value={props.value ?? inputValue} /> +
+ {!props.postMode && (
{socialLimits.socialLimits.map((postMode) => ( diff --git a/src/components/Preview/Preview.module.scss b/src/components/Preview/Preview.module.scss index 0bf346493..9d710de17 100644 --- a/src/components/Preview/Preview.module.scss +++ b/src/components/Preview/Preview.module.scss @@ -9,15 +9,22 @@ flex-direction: column; align-items: center; - justify-content: center; - padding: 4.2rem 1.6rem; + padding: 2.25rem 0.75rem; background-color: global.$tertiaryWhite; border-radius: 12px; } +.previewContent { + width: 100%; + + display: flex; + + justify-content: end; +} + @include from905 { .container { display: flex; diff --git a/src/components/Preview/Preview.tsx b/src/components/Preview/Preview.tsx index aeefe7aa1..400bf7532 100644 --- a/src/components/Preview/Preview.tsx +++ b/src/components/Preview/Preview.tsx @@ -1,11 +1,45 @@ -import { ReactNode } from 'react'; +import { ChangeEvent, ReactNode } from 'react'; + +import { IconsType } from '~components/Icon/Icon.types'; +import { PreviewModeSelector } from '~components/Tabber/PreviewModeSelector/PreviewModeSelector'; import scss from './Preview.module.scss'; import { PreviewProps } from './Preview.types'; +const previewModeMockList = [ + { + icon: 'mobile' as IconsType, + id: 'mobile', + name: 'mobile', + }, + { + icon: 'tablet' as IconsType, + id: 'tablet', + name: 'tablet', + }, + { + icon: 'pc' as IconsType, + id: 'pc', + name: 'pc', + }, +]; + +const getTargetValue = (e: ChangeEvent): string => + e.target.value; + function Preview(props: PreviewProps): ReactNode { - return
{props.children}
; + return ( +
+
+ +
+
{props.children}
+
+ ); } export default Preview; diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.components.tsx b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.components.tsx new file mode 100644 index 000000000..4dbb4295e --- /dev/null +++ b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.components.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import Icon from '~components/Icon/Icon'; + +import scss from './PreviewModeSelector.module.scss'; + +import { PreviewModeProps } from './PreviewModeSelector.types'; + +export function PreviewMode(props: PreviewModeProps): React.JSX.Element { + return ( +
+ + + +
+ ); +} diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.module.scss b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.module.scss new file mode 100644 index 000000000..514d81f67 --- /dev/null +++ b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.module.scss @@ -0,0 +1,54 @@ +@use '~styles/global.scss' as *; + +.containerPreview { + overflow: hidden; + + display: flex; + + align-items: center; + + border: 1px solid $primaryGray; + + background-color: $secondaryWhite; + + border-radius: 16px; + + &:focus-within, + &:active { + border: 1px solid $secondaryPurple; + } + + .icon { + display: flex; + + padding: 1.25rem 1.3rem; + + path { + fill: $tertiaryGray; + } + } + + .previewModeInput { + position: absolute; + + clip-path: inset(50%); + } + + .previewModeInput:checked + label .icon { + background-color: $primaryWhite; + + path { + fill: $secondaryPurple; + } + } + + .previewModeLabel { + cursor: pointer; + } + + .previewModeLabel span { + position: absolute; + + visibility: hidden; + } +} diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.spec.tsx b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.spec.tsx new file mode 100644 index 000000000..ded9fe2ce --- /dev/null +++ b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.spec.tsx @@ -0,0 +1,54 @@ +import { ChangeEvent } from 'react'; + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { IconsType } from '~components/Icon/Icon.types'; + +import { PreviewMode } from './PreviewModeSelector.components'; + +describe('PreviewModeSelector', () => { + const item = { + icon: 'pc' as IconsType, + id: 'some-id', + name: 'some-name', + }; + let getTargetValue: (e: ChangeEvent) => string; + + beforeEach(() => { + getTargetValue = (e: ChangeEvent): string => + e.target.value; + }); + + describe('PreviewMode', () => { + it('render the icons when passed', () => { + render(); + + const icon = screen.getByRole('img'); + + expect(icon).toBeInTheDocument(); + }); + + it('When clicked, it change to checked', async () => { + render(); + + const inputElement = screen.getByRole('radio', { name: 'some-name' }); + + await userEvent.click(inputElement); + + expect(inputElement).toBeChecked(); + }); + + it('changes the background when clicked', async () => { + render(); + + const inputElement = screen.getByRole('radio', { name: 'some-name' }); + + await userEvent.click(inputElement); + + expect(getComputedStyle(inputElement).backgroundColor).toBe( + 'rgb(255, 255, 255)' + ); + }); + }); +}); diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.stories.tsx b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.stories.tsx new file mode 100644 index 000000000..89d2af6a0 --- /dev/null +++ b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.stories.tsx @@ -0,0 +1,32 @@ +import { ChangeEvent } from 'react'; + +import { Story } from '@ladle/react'; + +import { IconsType } from '~components/Icon/Icon.types'; + +import { PreviewModeSelector } from './PreviewModeSelector'; + +const previewModes = [ + { + icon: 'mobile' as IconsType, + id: 'mobile', + name: 'mobile', + }, + { + icon: 'pc' as IconsType, + id: 'pc', + name: 'pc', + }, + { + icon: 'tablet' as IconsType, + id: 'tablet', + name: 'tablet', + }, +]; + +export const PreviewModeSelectorStories: Story = () => ( + ) => e.target.value} + list={previewModes} + /> +); diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.tsx b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.tsx new file mode 100644 index 000000000..c35cfe62c --- /dev/null +++ b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import scss from './PreviewModeSelector.module.scss'; + +import { PreviewMode } from './PreviewModeSelector.components'; +import { PreviewModeSelectorProps } from './PreviewModeSelector.types'; + +export function PreviewModeSelector( + props: PreviewModeSelectorProps +): React.JSX.Element { + return ( +
+ {props.list.map((item) => ( + + ))} +
+ ); +} diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.types.ts b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.types.ts new file mode 100644 index 000000000..99db61990 --- /dev/null +++ b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.types.ts @@ -0,0 +1,19 @@ +import { ChangeEvent } from 'react'; + +import { IconsType } from '~components/Icon/Icon.types'; + +export type PreviewMode = { + icon: IconsType; + id: string; + name: string; +}; + +export type PreviewModeProps = { + item: PreviewMode; + onSelect: (e: ChangeEvent) => string; +}; + +export type PreviewModeSelectorProps = { + changeDevice: (e: ChangeEvent) => string; + list: PreviewMode[]; +}; diff --git a/src/components/Tabber/Tabber.module.scss b/src/components/Tabber/Tabber.module.scss index 936bd63c7..18f0ba35d 100644 --- a/src/components/Tabber/Tabber.module.scss +++ b/src/components/Tabber/Tabber.module.scss @@ -1,10 +1,11 @@ -@use '~styles/global'; +@use '~styles/global'; @use '~styles/breakpoints.scss' as *; .gridContainer { min-height: 25rem; align-items: center; + justify-content: center; padding: 2px; @@ -15,7 +16,7 @@ .postModesContainer { height: 100%; - padding: 1.5rem 1rem; + padding: 2.4rem 1.2rem; background-color: global.$primaryWhite; }