IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared: use colors from theme

Browse Source
This commit is contained in:
Viktor Fomin 2024-06-24 16:18:41 +03:00
parent 7f19622a28
commit 60b0e8a548
9 changed files with 49 additions and 370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/shared/components/badge/badge.stories.tsx
View File

@ -27,6 +27,7 @@
import { Meta, StoryObj } from "@storybook/react";
import { Badge } from "./Badge";
import { globalColors } from "../../themes";
const meta = {
title: "Components/Badge",
@ -83,7 +84,7 @@ export const HighBadge: Story = {
args: {
type: "high",
label: "High",
backgroundColor: "#f2675a",
backgroundColor: globalColors.mainRed,
},
argTypes: {
type: { control: "radio" },

12
packages/shared/components/campaigns-banner/campaign/CreateDocSpace.ts
View File

@ -24,6 +24,8 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { globalColors } from "../../../themes";
export const translates = {
Header: "ONLYOFFICE for developers",
SubHeader:
@ -33,21 +35,21 @@ export const translates = {
};
export const config = {
borderColor: "#388BDE",
borderColor: globalColors.lightBlueMain,
title: {
color: "#4781D1",
color: globalColors.lightBlueMain,
fontSize: "12px",
fontWeight: "600",
},
body: {
fontSize: "13px",
fontWeight: "600",
color: "#333",
color: globalColors.black,
},
action: {
isButton: true,
color: "#fff",
backgroundColor: "#388BDE",
color: globalColors.white,
backgroundColor: globalColors.lightBlueMain,
fontSize: "12px",
fontWeight: "700",
type: "open-url",

3
packages/shared/components/color-input/ColorInput.stories.tsx
View File

@ -32,6 +32,7 @@ import { Meta, StoryObj } from "@storybook/react";
import { ColorInput } from "./ColorInput";
import { ColorInputProps } from "./ColorInput.types";
import { InputSize } from "../text-input/TextInput.enums";
import { globalColors } from "../../themes";
const ColorInputContainer = styled.div`
height: 300px;
@ -78,7 +79,7 @@ const Template = ({ ...args }: ColorInputProps) => {
export const Default: Story = {
render: (args) => <Template {...args} />,
args: {
defaultColor: "#4781D1",
defaultColor: globalColors.lightBlueMain,
handleChange: (color) => {
console.log(color);
},

3
packages/shared/components/color-picker/ColorPicker.stories.tsx
View File

@ -31,6 +31,7 @@ import { Meta, StoryObj } from "@storybook/react";
import { ColorPicker } from "./ColorPicker";
import { ColorPickerProps } from "./ColorPicker.types";
import { globalColors } from "../../themes";
const meta = {
title: "Components/ColorPicker",
@ -57,7 +58,7 @@ export const Default: Story = {
render: (args) => <Template {...args} />,
args: {
isPickerOnly: false,
appliedColor: "#4781D1",
appliedColor: globalColors.lightBlueMain,
onClose: () => console.log("close"),
applyButtonLabel: "Apply",
cancelButtonLabel: "Cancel",

231
packages/shared/components/combobox/combobox.stories.tsx
View File

@ -27,130 +27,22 @@
import React from "react";
import { Meta, StoryObj } from "@storybook/react";
// import NavLogoIcon from "PUBLIC_DIR/images/nav.logo.opened.react.svg";
// import CatalogEmployeeReactSvgUrl from "PUBLIC_DIR/images/catalog.employee.react.svg?url";
// import CatalogGuestReactSvgUrl from "PUBLIC_DIR/images/catalog.guest.react.svg?url";
// import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";
// import { IconSizeType } from "../../utils";
// import { DropDownItem } from "../drop-down-item";
import { ComboBox } from "./ComboBox";
// import RadioButton from "../radio-button";
// import ComboBoxDocs from "./Combobox.docs.mdx";
import { ComboboxProps } from "./Combobox.types";
import { globalColors } from "../../themes";
const meta = {
title: "Components/ComboBox",
component: ComboBox,
// tags: ["autodocs"],
parameters: {
docs: {
// page: ComboBoxDocs,
},
},
} satisfies Meta<typeof ComboBox>;
type Story = StoryObj<typeof ComboBox>;
export default meta;
// const comboOptions = [
// {
// key: 1,
// icon: CatalogEmployeeReactSvgUrl,
// label: "Option 1",
// },
// {
// key: 2,
// icon: CatalogGuestReactSvgUrl,
// label: "Option 2",
// },
// {
// key: 3,
// disabled: true,
// label: "Option 3",
// },
// {
// key: 4,
// label: "Option 4",
// },
// {
// key: 5,
// icon: CopyReactSvgUrl,
// label: "Option 5",
// },
// {
// key: 6,
// label: "Option 6",
// },
// {
// key: 7,
// label: "Option 7",
// },
// ];
// const childrenArr = [];
// const advancedOptions = (
// <>
// <DropDownItem key="1" noHover>
// {/* <RadioButton value="asc" name="first" label="A-Z" isChecked /> */}
// </DropDownItem>
// <DropDownItem key="2" noHover>
// {/* <RadioButton value="desc" name="first" label="Z-A" /> */}
// </DropDownItem>
// <DropDownItem key="3" isSeparator />
// <DropDownItem key="4" noHover>
// {/* <RadioButton value="first" name="second" label="First name" /> */}
// </DropDownItem>
// <DropDownItem key="5" noHover>
// {/* <RadioButton
// value="last"
// name="second"
// label="Last name"
// isChecked
// /> */}
// </DropDownItem>
// </>
// );
const Wrapper = ({ children }: { children: React.ReactNode }) => {
return <div style={{ height: "220px" }}>{children}</div>;
};
// const childrenItems = childrenArr.length > 0 ? childrenArr : null;
// const BadgeTypeTemplate = (args: ComboboxProps) => (
// <Wrapper>
// <ComboBox
// {...args}
// fixedDirection
// isDefaultMode={false}
// options={[
// { key: 1, label: "Open", backgroundColor: "#4781D1", color: "#FFFFFF" },
// { key: 2, label: "Done", backgroundColor: "#444", color: "#FFFFFF" },
// {
// key: 3,
// label: "2nd turn",
// backgroundColor: "#FFFFFF",
// color: "#555F65",
// border: "#4781D1",
// },
// {
// key: 4,
// label: "3rd turn",
// backgroundColor: "#FFFFFF",
// color: "#555F65",
// border: "#4781D1",
// },
// ]}
// selectedOption={{
// key: 0,
// label: "Select",
// }}
// />
// </Wrapper>
// );
const Template = (args: ComboboxProps) => (
<Wrapper>
<ComboBox
@ -170,70 +62,36 @@ const Template = (args: ComboboxProps) => (
</Wrapper>
);
// const BaseOptionsTemplate = (args: ComboboxProps) => (
// <Wrapper>
// <ComboBox
// {...args}
// isDefaultMode={false}
// directionY="both"
// fixedDirection
// options={comboOptions}
// onSelect={(option: any) => args.onSelect(option)}
// selectedOption={{
// key: 0,
// label: "Select",
// default: true,
// }}
// >
// {childrenItems}
// </ComboBox>
// </Wrapper>
// );
// const AdvancedOptionsTemplate = (args: ComboboxProps) => {
// const { onSelect } = args;
// return (
// <Wrapper>
// <ComboBox
// {...args}
// isDefaultMode={false}
// fixedDirection
// directionY="both"
// options={[]}
// advancedOptions={advancedOptions}
// onSelect={(option?: TOption) => onSelect(option)}
// selectedOption={{
// key: 0,
// label: "Select",
// default: true,
// }}
// >
// <NavLogoIcon size={IconSizeType.medium} key="comboIcon" />
// </ComboBox>
// </Wrapper>
// );
// };
export const Default: Story = {
render: (args) => <Template {...args} />,
args: {
scaled: false,
options: [
{ key: 1, label: "Open", backgroundColor: "#4781D1", color: "#FFFFFF" },
{ key: 2, label: "Done", backgroundColor: "#444", color: "#FFFFFF" },
{
key: 1,
label: "Open",
backgroundColor: globalColors.lightBlueMain,
color: globalColors.white,
},
{
key: 2,
label: "Done",
backgroundColor: globalColors.black,
color: globalColors.white,
},
{
key: 3,
label: "2nd turn",
backgroundColor: "#FFFFFF",
color: "#555F65",
border: "#4781D1",
backgroundColor: globalColors.white,
color: globalColors.grayText,
border: globalColors.lightBlueMain,
},
{
key: 4,
label: "3rd turn",
backgroundColor: "#FFFFFF",
color: "#555F65",
border: "#4781D1",
backgroundColor: globalColors.white,
color: globalColors.grayText,
border: globalColors.lightBlueMain,
},
],
selectedOption: {
@ -243,54 +101,3 @@ export const Default: Story = {
dropDownMaxHeight: 1500,
},
};
// export const BaseOption: Story = {
// render: (args) => <BaseOptionsTemplate {...args} />,
// args: {
// options: [
// { key: 1, label: "Open", backgroundColor: "#4781D1", color: "#FFFFFF" },
// { key: 2, label: "Done", backgroundColor: "#444", color: "#FFFFFF" },
// {
// key: 3,
// label: "2nd turn",
// backgroundColor: "#FFFFFF",
// color: "#555F65",
// border: "#4781D1",
// },
// {
// key: 4,
// label: "3rd turn",
// backgroundColor: "#FFFFFF",
// color: "#555F65",
// border: "#4781D1",
// },
// ],
// selectedOption: {
// key: 0,
// label: "Select",
// },
// scaledOptions: false,
// scaled: false,
// noBorder: false,
// isDisabled: false,
// },
// };
// export const advancedOption = AdvancedOptionsTemplate.bind({});
// advancedOption.args = {
// isDisabled: false,
// scaled: false,
// size: "content",
// directionX: "right",
// directionY: "bottom",
// };
// export const badgeType = BadgeTypeTemplate.bind({});
// badgeType.args = {
// scaled: false,
// type: "badge",
// size: "content",
// scaledOptions: true,
// };

3
packages/shared/components/drop-down-item/DropDownItem.tsx
View File

@ -42,6 +42,7 @@ import {
ElementWrapper,
} from "./DropDownItem.styled";
import { DropDownItemProps } from "./DropDownItem.types";
import { globalColors } from "../../themes";
const DropDownItem = (props: DropDownItemProps) => {
const {
@ -168,7 +169,7 @@ const DropDownItem = (props: DropDownItemProps) => {
fontSize="9px"
isHovered={false}
borderRadius="50px"
backgroundColor="#533ED1"
backgroundColor={globalColors.mainPurple}
label={t("Common:BetaLabel")}
/>
</WrapperBadge>

153
packages/shared/components/grid/grid.stories.tsx
View File

@ -32,6 +32,7 @@ import { Text } from "../text";
import { Grid } from "./grid";
import { GridProps } from "./Grid.types";
import { globalColors } from "../../themes";
const meta = {
title: "Components/Grid",
@ -65,162 +66,22 @@ const boxProps = {
const Template = (args: GridProps) => {
return (
<Grid {...args} {...gridProps}>
<Box {...boxProps} backgroundProp="#F4991A">
<Text color="#000">200px</Text>
<Box {...boxProps} backgroundProp={globalColors.secondOrange}>
<Text color={globalColors.darkBlack}>200px</Text>
</Box>
<Box {...boxProps} backgroundProp="#F2EAD3">
<Text color="#000">minmax(100px,1fr)</Text>
<Box {...boxProps} backgroundProp={globalColors.lightToastAlert}>
<Text color={globalColors.darkBlack}>minmax(100px,1fr)</Text>
</Box>
<Box {...boxProps} backgroundProp="#F9F5F0">
<Text color="#000">auto</Text>
<Box {...boxProps} backgroundProp={globalColors.grayLight}>
<Text color={globalColors.darkBlack}>auto</Text>
</Box>
</Grid>
);
};
// const TemplateColumns = (args: GridProps) => {
// return (
// <>
// <Grid
// {...args}
// {...gridProps}
// columnsProp={["200px", "100px", "1fr", "auto"]}
// >
// <Box {...boxProps} backgroundProp="#F4991A">
// <Text color="#000">200px</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F2EAD3">
// <Text color="#000">minmax(100px,1fr)</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F9F5F0">
// <Text color="#000">auto</Text>
// </Box>
// </Grid>
// <Grid {...args} {...gridProps} columnsProp="25%">
// <Box {...boxProps} backgroundProp="#F4991A">
// <Text color="#000">25%</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F2EAD3">
// <Text color="#000">25%</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F9F5F0">
// <Text color="#000">25%</Text>
// </Box>
// </Grid>
// <Grid
// {...args}
// {...gridProps}
// columnsProp={[{ count: 3, size: "100px" }]}
// >
// <Box {...boxProps} backgroundProp="#F4991A">
// <Text color="#000">100px</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F2EAD3">
// <Text color="#000">100px</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F9F5F0">
// <Text color="#000">100px</Text>
// </Box>
// </Grid>
// <Grid
// {...args}
// {...gridProps}
// columnsProp={{ count: 3, size: ["100px", "1fr"] }}
// >
// <Box {...boxProps} backgroundProp="#F4991A">
// <Text color="#000">minmax(100px,1fr)</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F2EAD3">
// <Text color="#000">minmax(100px,1fr)</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F9F5F0">
// <Text color="#000">minmax(100px,1fr)</Text>
// </Box>
// </Grid>
// </>
// );
// };
// const TemplateRows = (args: any) => {
// return (
// <>
// <Grid
// {...args}
// {...gridProps}
// rowsProp={["100px", ["100px", "1fr"], "auto"]}
// >
// <Box {...boxProps} backgroundProp="#F4991A">
// <Text color="#000">100px</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F2EAD3">
// <Text color="#000">minmax(100px,1fr)</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F9F5F0">
// <Text color="#000">auto</Text>
// </Box>
// </Grid>
// <Grid {...args} {...gridProps} rowsProp="50px">
// <Box {...boxProps} backgroundProp="#F4991A">
// <Text color="#000">50px</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F2EAD3">
// <Text color="#000">50px</Text>
// </Box>
// <Box {...boxProps} backgroundProp="#F9F5F0">
// <Text color="#000">50px</Text>
// </Box>
// </Grid>
// </>
// );
// };
// const TemplateLayout = (args: any) => {
// return (
// <Grid
// {...args}
// widthProp="100vw"
// heightProp="100vh"
// gridGap="10px"
// rowsProp={["auto", "1fr", "auto"]}
// columnsProp={[["100px", "1fr"], "3fr", ["100px", "1fr"]]}
// areasProp={[
// { name: "header", start: [0, 0], end: [2, 0] },
// { name: "navbar", start: [0, 1], end: [0, 1] },
// { name: "main", start: [1, 1], end: [1, 1] },
// { name: "sidebar", start: [2, 1], end: [2, 1] },
// { name: "footer", start: [0, 2], end: [2, 2] },
// ]}
// >
// <Box {...boxProps} gridArea="header" backgroundProp="#F4991A">
// <Text color="#000">header</Text>
// </Box>
// <Box {...boxProps} gridArea="navbar" backgroundProp="#F2EAD3">
// <Text color="#000">navbar</Text>
// </Box>
// <Box {...boxProps} gridArea="main" backgroundProp="#F9F5F0">
// <Text color="#000">main</Text>
// </Box>
// <Box {...boxProps} gridArea="sidebar" backgroundProp="#F2EAD3">
// <Text color="#000">sidebar</Text>
// </Box>
// <Box {...boxProps} gridArea="footer" backgroundProp="#F4991A">
// <Text color="#000">footer</Text>
// </Box>
// </Grid>
// );
// };
export const Default: Story = {
render: (args) => <Template {...args} />,
args: {
columnsProp: ["200px", "100px", "1fr", "auto"],
},
};
// export const Columns = TemplateColumns.bind({});
// export const Rows = TemplateRows.bind({});
// export const Layout = TemplateLayout.bind({});

3
packages/shared/components/info-badge/InfoBadge.tsx
View File

@ -40,6 +40,7 @@ import {
StyledToolTip,
} from "./InfoBadge.styled";
import type InfoBadgeProps from "./InfoBadge.types";
import { globalColors } from "../../themes";
export const InfoBadge: FC<InfoBadgeProps> = ({
label,
@ -65,7 +66,7 @@ export const InfoBadge: FC<InfoBadgeProps> = ({
borderRadius="50px"
label={label}
data-tooltip-id={id}
backgroundColor="#533ED1"
backgroundColor={globalColors.mainPurple}
/>
<StyledToolTip

8
packages/shared/components/label/Label.tsx
View File

@ -29,6 +29,7 @@ import React from "react";
import { Text } from "../text";
import { LabelProps } from "./Label.types";
import { globalColors } from "../../themes";
const Label = (props: LabelProps) => {
const {
@ -45,7 +46,7 @@ const Label = (props: LabelProps) => {
style,
children,
} = props;
const errorProp = error ? { color: "#c30" } : {};
const errorProp = error ? { color: globalColors.lightErrorStatus } : {};
return (
<Text
@ -62,7 +63,10 @@ const Label = (props: LabelProps) => {
className={className}
data-testid="label"
>
{text} {isRequired && <span style={{ color: "#c30" }}> *</span>}{" "}
{text}{" "}
{isRequired && (
<span style={{ color: globalColors.lightErrorStatus }}> *</span>
)}{" "}
{children}
</Text>
);