diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 000000000..b58b603fe --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/Dream-stack-for-React-dev.iml b/.idea/Dream-stack-for-React-dev.iml new file mode 100644 index 000000000..24643cc37 --- /dev/null +++ b/.idea/Dream-stack-for-React-dev.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 000000000..03d9549ea --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 000000000..c9bb077cf --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/prettier.xml b/.idea/prettier.xml new file mode 100644 index 000000000..0c83ac4e8 --- /dev/null +++ b/.idea/prettier.xml @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 000000000..35eb1ddfb --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/system/libs/figa-ui/src/index.ts b/system/libs/figa-ui/src/index.ts index 2862582ff..7f61768b3 100644 --- a/system/libs/figa-ui/src/index.ts +++ b/system/libs/figa-ui/src/index.ts @@ -38,3 +38,4 @@ export * from './lib/loader'; export * from './lib/switch'; export * from './lib/checkbox'; export * from './lib/shared'; +export * from './lib/newsletter'; diff --git a/system/libs/figa-ui/src/lib/button/button.stories.tsx b/system/libs/figa-ui/src/lib/button/button.stories.tsx index d96dd8c40..23cd9151c 100644 --- a/system/libs/figa-ui/src/lib/button/button.stories.tsx +++ b/system/libs/figa-ui/src/lib/button/button.stories.tsx @@ -174,3 +174,13 @@ SecondaryOutlined.args = { variant: 'outlined', motive: 'secondary', }; +export const TertiaryFilled = Template.bind({}); +TertiaryFilled.args = { + variant: 'filled', + motive: 'tertiary', +}; +export const TertiaryOutlined = Template.bind({}); +TertiaryOutlined.args = { + variant: 'outlined', + motive: 'tertiary', +}; diff --git a/system/libs/figa-ui/src/lib/button/consts.ts b/system/libs/figa-ui/src/lib/button/consts.ts index f6668a696..e9c58699e 100644 --- a/system/libs/figa-ui/src/lib/button/consts.ts +++ b/system/libs/figa-ui/src/lib/button/consts.ts @@ -1,6 +1,6 @@ const BUTTON_SIZES = [1, 2, 3, 4, 5] as const; const BUTTON_SHAPES = ['rounded', 'rectangle'] as const; const BUTTON_VARIANTS = ['outlined', 'filled'] as const; -const BUTTON_MOTIVES = ['primary', 'secondary'] as const; +const BUTTON_MOTIVES = ['primary', 'secondary', 'tertiary'] as const; export { BUTTON_SIZES, BUTTON_SHAPES, BUTTON_VARIANTS, BUTTON_MOTIVES }; diff --git a/system/libs/figa-ui/src/lib/newsletter/defs.ts b/system/libs/figa-ui/src/lib/newsletter/defs.ts new file mode 100644 index 000000000..b99affbc1 --- /dev/null +++ b/system/libs/figa-ui/src/lib/newsletter/defs.ts @@ -0,0 +1,10 @@ +import type {ModalProps } from '../modal'; + +interface NewsletterProps extends ModalProps { + title: string, + src: string, + description: string, + +} + +export type {NewsletterProps} diff --git a/system/libs/figa-ui/src/lib/newsletter/index.ts b/system/libs/figa-ui/src/lib/newsletter/index.ts new file mode 100644 index 000000000..59372033f --- /dev/null +++ b/system/libs/figa-ui/src/lib/newsletter/index.ts @@ -0,0 +1,2 @@ +export * from './defs'; +export * from './newsletter'; diff --git a/system/libs/figa-ui/src/lib/newsletter/newsletter.stories.tsx b/system/libs/figa-ui/src/lib/newsletter/newsletter.stories.tsx new file mode 100644 index 000000000..d5856584b --- /dev/null +++ b/system/libs/figa-ui/src/lib/newsletter/newsletter.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, Story } from '@storybook/react'; + +import Newsletter from './newsletter'; + +export default { + component: Newsletter, + title: 'Newsletter', +} as Meta; + +const Template: Story = () => { + return ( + + ); +}; + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/system/libs/figa-ui/src/lib/newsletter/newsletter.tsx b/system/libs/figa-ui/src/lib/newsletter/newsletter.tsx new file mode 100644 index 000000000..e7e86b974 --- /dev/null +++ b/system/libs/figa-ui/src/lib/newsletter/newsletter.tsx @@ -0,0 +1,64 @@ +import { Modal } from '../modal'; +import { Image } from '../image'; +import { Box } from '../box'; +import { Font } from '../font'; +import { Button } from '../button'; +import { Input } from '../input'; +import { Link } from '../link'; + +import { NewsletterProps } from './defs'; +import { useState } from 'react'; +import { doc } from 'prettier'; +import cursor = doc.builders.cursor; + +const Newsletter = ({ + title, + src, + description, + onClose, + + ...props +}: NewsletterProps) => { + const [open, setOpen] = useState(true); + return ( +
+ {open && ( + setOpen(false)}> + + My image + + + {title} + {description} + + + setOpen(false)} + style={{ cursor: 'pointer' }} + > + No thanks, I don`t like gifts + + + + + )} +
+ ); +}; +export default Newsletter; diff --git a/system/libs/figa-ui/src/lib/theme-provider/defs.ts b/system/libs/figa-ui/src/lib/theme-provider/defs.ts index 12860a877..a693b0ad3 100644 --- a/system/libs/figa-ui/src/lib/theme-provider/defs.ts +++ b/system/libs/figa-ui/src/lib/theme-provider/defs.ts @@ -283,10 +283,12 @@ interface Theme { outlined: { primary: ButtonSetup; secondary: ButtonSetup; + tertiary: ButtonSetup; }; filled: { primary: ButtonSetup; secondary: ButtonSetup; + tertiary: ButtonSetup; }; }; select: { diff --git a/system/libs/figa-ui/src/lib/theme-provider/global-style.ts b/system/libs/figa-ui/src/lib/theme-provider/global-style.ts index 9071c9352..5b1f7d12b 100644 --- a/system/libs/figa-ui/src/lib/theme-provider/global-style.ts +++ b/system/libs/figa-ui/src/lib/theme-provider/global-style.ts @@ -32,7 +32,7 @@ const GlobalStyle = createGlobalStyle` font-weight: 500; src: url('/fonts/LexendMedium.ttf') format('truetype'); } - + @font-face { font-family: 'LexendRegular'; font-weight: 400; @@ -82,9 +82,9 @@ const GlobalStyle = createGlobalStyle` * { box-sizing: border-box; } - + /* atoms */ - + .r-90 { transform: rotate(90deg); } @@ -273,7 +273,7 @@ const GlobalStyle = createGlobalStyle` .icon path { fill: ${(props) => props.theme.button.outlined.secondary.color}; } - + .loader-animation { border-top-color: ${(props) => props.theme.button.filled.secondary.outlineColor}; @@ -282,6 +282,47 @@ const GlobalStyle = createGlobalStyle` } } + &.filled.tertiary { + ${(props) => + buttonBaseEffects( + props.theme.button.filled.tertiary.outlineColor + )} + color: ${(props) => props.theme.button.filled.tertiary.color}; + background: ${(props) => props.theme.button.filled.tertiary.bg}; + + .icon path { + fill: ${(props) => props.theme.button.filled.tertiary.color}; + } + + .loader-animation { + border-top-color: ${(props) => + props.theme.button.filled.tertiary.color}; + border-bottom-color: ${(props) => + props.theme.button.filled.tertiary.color}; + } + } + &.outlined.tertiary { + ${(props) => + buttonBaseEffects( + props.theme.button.filled.tertiary.outlineColor + )} + color: ${(props) => props.theme.button.outlined.tertiary.color}; + background: ${(props) => props.theme.button.outlined.tertiary.bg}; + border: 2px solid ${(props) => + props.theme.button.outlined.tertiary.borderColor}; + + .icon path { + fill: ${(props) => props.theme.button.outlined.tertiary.color}; + } + + .loader-animation { + border-top-color: ${(props) => + props.theme.button.filled.tertiary.outlineColor}; + border-bottom-color: ${(props) => + props.theme.button.outlined.tertiary.borderColor}; + } + } + &.rounded.size-1 { ${size(tokens.spacing[400])} } @@ -353,7 +394,7 @@ const GlobalStyle = createGlobalStyle` background: ${(props) => props.theme.modal.backdrop}; z-index: ${tokens.z[450]}; } - + /* modal.tsx */ /* select.tsx */ @@ -615,7 +656,7 @@ const GlobalStyle = createGlobalStyle` padding-right: ${tokens.spacing[550]}; } } - + &.textarea { textarea { resize: vertical; @@ -630,7 +671,7 @@ const GlobalStyle = createGlobalStyle` } } - .input-loader { + .input-loader { ${row()} right: ${tokens.spacing[150]}; } @@ -681,7 +722,7 @@ const GlobalStyle = createGlobalStyle` border-color: transparent; } } - + &.invalid:not(.disabled) { input, textarea { color: ${(props) => props.theme.input.invalid}; @@ -851,7 +892,7 @@ const GlobalStyle = createGlobalStyle` border-bottom: 1px solid ${(props) => props.theme.footer.borderColor}; padding-bottom: ${tokens.spacing[200]}; - + @media ${T_DOWN} { grid-template-columns: auto; grid-template-rows: auto auto auto; @@ -985,7 +1026,7 @@ const GlobalStyle = createGlobalStyle` } } } - + .ordered { counter-reset: numbers; @@ -999,7 +1040,7 @@ const GlobalStyle = createGlobalStyle` } } } - + .unordered { li { &::before { @@ -1201,10 +1242,10 @@ const GlobalStyle = createGlobalStyle` will-change: transform; } } - } + } /* loader.tsx */ - + /* avatars.tsx */ .avatars { @@ -1214,7 +1255,7 @@ const GlobalStyle = createGlobalStyle` &.rounded .avatars-rest-count { border-radius: ${tokens.radius[1000]}; } - + &.rectangle .avatars-rest-count { border-radius: ${tokens.radius[50]}; } @@ -1223,7 +1264,7 @@ const GlobalStyle = createGlobalStyle` ${center()} background: ${(props) => props.theme.avatars.restCounter.bg}; box-shadow: ${tokens.shadow[50]}; - + .font { color: ${(props) => props.theme.avatars.restCounter.color}; } @@ -1318,7 +1359,7 @@ const GlobalStyle = createGlobalStyle` } } } - + /* alert.tsx */ /* field.tsx */ @@ -1340,7 +1381,7 @@ const GlobalStyle = createGlobalStyle` ${trim()} margin-bottom: ${tokens.spacing[100]}; } - + &-hint { margin-top: ${tokens.spacing[100]}; } @@ -1382,7 +1423,7 @@ const GlobalStyle = createGlobalStyle` &.invalid { outline: 2px solid ${(props) => props.theme.filePicker.invalid.outline}; - + .font { color: ${(props) => props.theme.filePicker.invalid.color}; } @@ -1392,7 +1433,7 @@ const GlobalStyle = createGlobalStyle` visibility: hidden; position: absolute; } - + .file-picker-loader { ${center()} ${streched('absolute')} @@ -1432,7 +1473,7 @@ const GlobalStyle = createGlobalStyle` ${size('100%')} object-fit: cover; } - + &-content { ${center()} ${streched('absolute')} diff --git a/system/libs/figa-ui/src/lib/theme-provider/themes.ts b/system/libs/figa-ui/src/lib/theme-provider/themes.ts index 7a892822b..22121c7a5 100644 --- a/system/libs/figa-ui/src/lib/theme-provider/themes.ts +++ b/system/libs/figa-ui/src/lib/theme-provider/themes.ts @@ -290,6 +290,11 @@ const light: Theme = { bg: tokens.primary[100], outlineColor: tokens.common.black, }, + tertiary: { + color: tokens.common.white, + bg: tokens.common.black, + outlineColor: tokens.common.white, + }, }, outlined: { primary: { @@ -304,6 +309,12 @@ const light: Theme = { borderColor: tokens.primary[150], outlineColor: tokens.common.black, }, + tertiary: { + color: tokens.common.black, + bg: 'transparent', + borderColor: tokens.common.black, + outlineColor: tokens.common.white, + }, }, }, select: { @@ -579,6 +590,11 @@ const dark: Theme = { bg: tokens.primary[100], outlineColor: tokens.common.white, }, + tertiary: { + color: tokens.common.black, + bg: tokens.common.white, + outlineColor: tokens.common.white, + }, }, outlined: { primary: { @@ -593,6 +609,12 @@ const dark: Theme = { borderColor: tokens.primary[100], outlineColor: tokens.common.white, }, + tertiary: { + color: tokens.common.white, + bg: 'transparent', + borderColor: tokens.common.white, + outlineColor: tokens.common.white, + }, }, }, select: { diff --git a/system/nx.json b/system/nx.json index 282a2ffb6..8e0dc4556 100644 --- a/system/nx.json +++ b/system/nx.json @@ -15,7 +15,7 @@ "e2e", "build-storybook" ], - "accessToken": "OTdhOWI0YTMtMDJkZC00NWRlLWFjZTUtMDNmNzZjYzk0ZDcwfHJlYWQtd3JpdGU=" + "accessToken": "ZWI3ZjBjZTItOTliMS00YzNjLThlZDMtMzk2MjZiNzU1MWE1fHJlYWQtd3JpdGU=" } } },