Shared: use colors from theme
This commit is contained in:
parent
64e41eb0e4
commit
7f19622a28
@ -1,9 +1,10 @@
|
|||||||
import { create } from "@storybook/theming/create";
|
import { create } from "@storybook/theming/create";
|
||||||
import Logo from "./darksmall.svg?url";
|
import Logo from "./darksmall.svg?url";
|
||||||
|
import { globalColors } from "../themes";
|
||||||
|
|
||||||
export default create({
|
export default create({
|
||||||
base: "dark",
|
base: "dark",
|
||||||
appBg: "#333",
|
appBg: globalColors.black,
|
||||||
|
|
||||||
brandTitle: "ONLYOFFICE",
|
brandTitle: "ONLYOFFICE",
|
||||||
brandUrl: "https://www.onlyoffice.com/docspace.aspx",
|
brandUrl: "https://www.onlyoffice.com/docspace.aspx",
|
||||||
|
@ -34,7 +34,7 @@ import "@testing-library/jest-dom";
|
|||||||
|
|
||||||
// const baseCalendarProps = {
|
// const baseCalendarProps = {
|
||||||
// isDisabled: false,
|
// isDisabled: false,
|
||||||
// themeColor: "#ED7309",
|
// themeColor: "",
|
||||||
// selectedDate: moment(),
|
// selectedDate: moment(),
|
||||||
// openToDate: moment(),
|
// openToDate: moment(),
|
||||||
// minDate: new Date("1970/01/01"),
|
// minDate: new Date("1970/01/01"),
|
||||||
@ -50,8 +50,8 @@ import "@testing-library/jest-dom";
|
|||||||
// { key: "en_2", value: "We", color: "" },
|
// { key: "en_2", value: "We", color: "" },
|
||||||
// { key: "en_3", value: "Th", color: "" },
|
// { key: "en_3", value: "Th", color: "" },
|
||||||
// { key: "en_4", value: "Fr", color: "" },
|
// { key: "en_4", value: "Fr", color: "" },
|
||||||
// { key: "en_5", value: "Sa", color: "#A3A9AE" },
|
// { key: "en_5", value: "Sa", color: "" },
|
||||||
// { key: "en_6", value: "Su", color: "#A3A9AE" },
|
// { key: "en_6", value: "Su", color: "" },
|
||||||
// ],
|
// ],
|
||||||
// size: "base",
|
// size: "base",
|
||||||
// };
|
// };
|
||||||
@ -217,9 +217,9 @@ describe("Calendar tests:", () => {
|
|||||||
// it("Calendar themeColor test", () => {
|
// it("Calendar themeColor test", () => {
|
||||||
// const wrapper = mount(
|
// const wrapper = mount(
|
||||||
// // @ts-expect-error TS(2322): Type '{ themeColor: string; isDisabled: boolean; s... Remove this comment to see the full error message
|
// // @ts-expect-error TS(2322): Type '{ themeColor: string; isDisabled: boolean; s... Remove this comment to see the full error message
|
||||||
// <Calendar {...baseCalendarProps} themeColor={"#fff"} />,
|
// <Calendar {...baseCalendarProps} themeColor={""} />,
|
||||||
// );
|
// );
|
||||||
// expect(wrapper.props().themeColor).toEqual("#fff");
|
// expect(wrapper.props().themeColor).toEqual("");
|
||||||
// });
|
// });
|
||||||
|
|
||||||
// it("Calendar locale test", () => {
|
// it("Calendar locale test", () => {
|
||||||
|
@ -29,6 +29,7 @@ import { Meta, StoryObj } from "@storybook/react";
|
|||||||
|
|
||||||
import Headline from "./Headline";
|
import Headline from "./Headline";
|
||||||
import type { HeadlineProps } from "./Headline.types";
|
import type { HeadlineProps } from "./Headline.types";
|
||||||
|
import { globalColors } from "../../themes";
|
||||||
|
|
||||||
type HeadlineType = FC<HeadlineProps>;
|
type HeadlineType = FC<HeadlineProps>;
|
||||||
|
|
||||||
@ -41,7 +42,7 @@ export default meta;
|
|||||||
|
|
||||||
export const Default: StoryObj<HeadlineType> = {
|
export const Default: StoryObj<HeadlineType> = {
|
||||||
args: {
|
args: {
|
||||||
color: "#333",
|
color: globalColors.black,
|
||||||
type: "content",
|
type: "content",
|
||||||
children: "Sample text heading",
|
children: "Sample text heading",
|
||||||
},
|
},
|
||||||
|
@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
import { Base } from "@docspace/shared/themes";
|
import { Base, globalColors } from "@docspace/shared/themes";
|
||||||
import { DropDown } from "@docspace/shared/components/drop-down";
|
import { DropDown } from "@docspace/shared/components/drop-down";
|
||||||
import { DropDownItem } from "@docspace/shared/components/drop-down-item";
|
import { DropDownItem } from "@docspace/shared/components/drop-down-item";
|
||||||
|
|
||||||
@ -62,20 +62,20 @@ export const ControlBtn = styled.div`
|
|||||||
ControlBtn.defaultProps = { theme: Base };
|
ControlBtn.defaultProps = { theme: Base };
|
||||||
|
|
||||||
export const StyledDropDown = styled(DropDown)`
|
export const StyledDropDown = styled(DropDown)`
|
||||||
background: #333;
|
background: ${globalColors.black};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const StyledDropDownItem = styled(DropDownItem)`
|
export const StyledDropDownItem = styled(DropDownItem)`
|
||||||
color: #fff;
|
color: ${globalColors.white};
|
||||||
|
|
||||||
.drop-down-item_icon svg {
|
.drop-down-item_icon svg {
|
||||||
path {
|
path {
|
||||||
fill: #fff !important;
|
fill: ${globalColors.white} !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #444;
|
background: ${globalColors.black};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -105,7 +105,7 @@ export const StyledMobileDetails = styled.div`
|
|||||||
|
|
||||||
svg {
|
svg {
|
||||||
path {
|
path {
|
||||||
fill: #fff;
|
fill: ${globalColors.white};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -26,6 +26,7 @@
|
|||||||
|
|
||||||
import { animated } from "@react-spring/web";
|
import { animated } from "@react-spring/web";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
import { globalColors } from "../../../../../../themes";
|
||||||
|
|
||||||
export const MobileDrawerContainer = styled.section`
|
export const MobileDrawerContainer = styled.section`
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -42,7 +43,7 @@ export const MobileDrawerWrapper = styled(animated.div)`
|
|||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
background: #333333;
|
background: ${globalColors.black};
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -26,6 +26,7 @@
|
|||||||
|
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
import ArticleShowMenuReactSvgUrl from "PUBLIC_DIR/images/article-show-menu.react.svg";
|
import ArticleShowMenuReactSvgUrl from "PUBLIC_DIR/images/article-show-menu.react.svg";
|
||||||
|
import { globalColors } from "../../../../../../themes";
|
||||||
|
|
||||||
export const SidebarContainer = styled.aside<{ isPanelOpen: boolean }>`
|
export const SidebarContainer = styled.aside<{ isPanelOpen: boolean }>`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -34,7 +35,7 @@ export const SidebarContainer = styled.aside<{ isPanelOpen: boolean }>`
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
background: #333333;
|
background: ${globalColors.black};
|
||||||
|
|
||||||
max-width: ${(props) => (props.isPanelOpen ? "306px" : "0px")};
|
max-width: ${(props) => (props.isPanelOpen ? "306px" : "0px")};
|
||||||
visibility: ${(props) => (props.isPanelOpen ? "visible" : "hidden")};
|
visibility: ${(props) => (props.isPanelOpen ? "visible" : "hidden")};
|
||||||
|
@ -25,6 +25,7 @@
|
|||||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
import { globalColors } from "../../../../themes";
|
||||||
|
|
||||||
export const SpeedControlWrapper = styled.div`
|
export const SpeedControlWrapper = styled.div`
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -41,12 +42,12 @@ export const SpeedControlWrapper = styled.div`
|
|||||||
|
|
||||||
svg {
|
svg {
|
||||||
path {
|
path {
|
||||||
fill: #fff;
|
fill: ${globalColors.white};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
rect {
|
rect {
|
||||||
stroke: #fff;
|
stroke: ${globalColors.white};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -64,8 +65,8 @@ export const DropDown = styled.div`
|
|||||||
bottom: 48px;
|
bottom: 48px;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
|
|
||||||
color: #fff;
|
color: ${globalColors.white};
|
||||||
background: #333;
|
background: ${globalColors.black};
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 7px 7px 0px 0px;
|
border-radius: 7px 7px 0px 0px;
|
||||||
`;
|
`;
|
||||||
@ -78,7 +79,7 @@ export const DropDownItem = styled.div`
|
|||||||
width: 48px;
|
width: 48px;
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #222;
|
background: ${globalColors.black};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -105,11 +106,11 @@ export const ToastSpeed = styled.div`
|
|||||||
width: 46px;
|
width: 46px;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
path {
|
path {
|
||||||
fill: #fff;
|
fill: ${globalColors.white};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
rect {
|
rect {
|
||||||
stroke: #fff;
|
stroke: ${globalColors.white};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -26,12 +26,12 @@
|
|||||||
|
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
import { Base } from "../../themes";
|
import { Base, globalColors } from "../../themes";
|
||||||
|
|
||||||
const StyledPublicRoomBar = styled.div`
|
const StyledPublicRoomBar = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: ${(props) => props.theme.infoBlock.background};
|
background-color: ${(props) => props.theme.infoBlock.background};
|
||||||
color: #333;
|
color: ${globalColors.black};
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
import { Base } from "../../themes";
|
import { Base, globalColors } from "../../themes";
|
||||||
import { Text } from "../text";
|
import { Text } from "../text";
|
||||||
|
|
||||||
import { IconButton } from "../icon-button";
|
import { IconButton } from "../icon-button";
|
||||||
@ -68,7 +68,9 @@ const StyledIcon = styled.div<{
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
color: ${(props) =>
|
color: ${(props) =>
|
||||||
props.wrongImage && props.theme.isBase ? "#333333" : "#ffffff"};
|
props.wrongImage && props.theme.isBase
|
||||||
|
? globalColors.black
|
||||||
|
: globalColors.white};
|
||||||
position: relative;
|
position: relative;
|
||||||
${(props) =>
|
${(props) =>
|
||||||
!props.theme.isBase &&
|
!props.theme.isBase &&
|
||||||
|
@ -40,6 +40,7 @@ import { Link, LinkType } from "../link";
|
|||||||
import { RowContainer } from "./RowContainer";
|
import { RowContainer } from "./RowContainer";
|
||||||
|
|
||||||
import { RowContainerProps } from "./RowContainer.types";
|
import { RowContainerProps } from "./RowContainer.types";
|
||||||
|
import { globalColors } from "../../themes";
|
||||||
|
|
||||||
const SendClockIcon = styled(SendClockReactSvg)`
|
const SendClockIcon = styled(SendClockReactSvg)`
|
||||||
${commonIconsStyles}
|
${commonIconsStyles}
|
||||||
@ -144,8 +145,11 @@ const Template = (args: RowContainerProps) => {
|
|||||||
source={user.avatar}
|
source={user.avatar}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
const nameColor = user.status === "pending" && "#A3A9AE";
|
const nameColor = user.status === "pending" && globalColors.gray;
|
||||||
const sideInfoColor = user.status === "pending" ? "#D0D5DA" : "#A3A9AE";
|
const sideInfoColor =
|
||||||
|
user.status === "pending"
|
||||||
|
? globalColors.grayStrong
|
||||||
|
: globalColors.gray;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row
|
<Row
|
||||||
@ -169,10 +173,16 @@ const Template = (args: RowContainerProps) => {
|
|||||||
</Link>
|
</Link>
|
||||||
<>
|
<>
|
||||||
{user.status === "pending" && (
|
{user.status === "pending" && (
|
||||||
<SendClockIcon size={IconSizeType.small} color="#3B72A7" />
|
<SendClockIcon
|
||||||
|
size={IconSizeType.small}
|
||||||
|
color={globalColors.lightIcons}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{user.status === "disabled" && (
|
{user.status === "disabled" && (
|
||||||
<CatalogSpamIcon size={IconSizeType.small} color="#3B72A7" />
|
<CatalogSpamIcon
|
||||||
|
size={IconSizeType.small}
|
||||||
|
color={globalColors.lightIcons}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
{user.isHead ? (
|
{user.isHead ? (
|
||||||
|
@ -36,6 +36,7 @@ import { Checkbox } from "../checkbox";
|
|||||||
|
|
||||||
import { RowContent } from "./RowContent";
|
import { RowContent } from "./RowContent";
|
||||||
import { RowContentProps } from "./RowContent.types";
|
import { RowContentProps } from "./RowContent.types";
|
||||||
|
import { globalColors } from "../../themes";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: "Components/RowContent",
|
title: "Components/RowContent",
|
||||||
@ -60,10 +61,21 @@ const Template = (args: RowContentProps) => {
|
|||||||
Demo
|
Demo
|
||||||
</Link>
|
</Link>
|
||||||
<>
|
<>
|
||||||
<SendClockIcon size={IconSizeType.small} color="#3B72A7" />
|
<SendClockIcon
|
||||||
<CatalogSpamIcon size={IconSizeType.small} color="#3B72A7" />
|
size={IconSizeType.small}
|
||||||
|
color={globalColors.lightIcons}
|
||||||
|
/>
|
||||||
|
<CatalogSpamIcon
|
||||||
|
size={IconSizeType.small}
|
||||||
|
color={globalColors.lightIcons}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
<Link type={LinkType.page} title="Demo" fontSize="12px" color="#A3A9AE">
|
<Link
|
||||||
|
type={LinkType.page}
|
||||||
|
title="Demo"
|
||||||
|
fontSize="12px"
|
||||||
|
color={globalColors.gray}
|
||||||
|
>
|
||||||
Demo
|
Demo
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
@ -71,7 +83,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="Demo"
|
title="Demo"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
Demo
|
Demo
|
||||||
</Link>
|
</Link>
|
||||||
@ -79,7 +91,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.page}
|
type={LinkType.page}
|
||||||
title="0 000 0000000"
|
title="0 000 0000000"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
0 000 0000000
|
0 000 0000000
|
||||||
</Link>
|
</Link>
|
||||||
@ -88,7 +100,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.page}
|
type={LinkType.page}
|
||||||
title="demo@demo.com"
|
title="demo@demo.com"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
demo@demo.com
|
demo@demo.com
|
||||||
</Link>
|
</Link>
|
||||||
@ -98,14 +110,17 @@ const Template = (args: RowContentProps) => {
|
|||||||
Demo Demo
|
Demo Demo
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<CatalogSpamIcon size={IconSizeType.small} color="#3B72A7" />
|
<CatalogSpamIcon
|
||||||
|
size={IconSizeType.small}
|
||||||
|
color={globalColors.lightIcons}
|
||||||
|
/>
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
// containerWidth="160px"
|
// containerWidth="160px"
|
||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="Demo Demo"
|
title="Demo Demo"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
Demo Demo
|
Demo Demo
|
||||||
</Link>
|
</Link>
|
||||||
@ -113,7 +128,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="0 000 0000000"
|
title="0 000 0000000"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
0 000 0000000
|
0 000 0000000
|
||||||
</Link>
|
</Link>
|
||||||
@ -122,7 +137,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="demo.demo@demo.com"
|
title="demo.demo@demo.com"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
demo.demo@demo.com
|
demo.demo@demo.com
|
||||||
</Link>
|
</Link>
|
||||||
@ -142,7 +157,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="Demo Demo Demo"
|
title="Demo Demo Demo"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
Demo Demo Demo
|
Demo Demo Demo
|
||||||
</Link>
|
</Link>
|
||||||
@ -150,7 +165,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="0 000 0000000"
|
title="0 000 0000000"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
0 000 0000000
|
0 000 0000000
|
||||||
</Link>
|
</Link>
|
||||||
@ -159,7 +174,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="demo.demo.demo@demo.com"
|
title="demo.demo.demo@demo.com"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
demo.demo.demo@demo.com
|
demo.demo.demo@demo.com
|
||||||
</Link>
|
</Link>
|
||||||
@ -174,13 +189,16 @@ const Template = (args: RowContentProps) => {
|
|||||||
Demo Demo Demo Demo
|
Demo Demo Demo Demo
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<SendClockIcon size={IconSizeType.small} color="#3B72A7" />
|
<SendClockIcon
|
||||||
|
size={IconSizeType.small}
|
||||||
|
color={globalColors.lightIcons}
|
||||||
|
/>
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="Demo"
|
title="Demo"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
Demo
|
Demo
|
||||||
</Link>
|
</Link>
|
||||||
@ -189,7 +207,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="Demo Demo Demo Demo"
|
title="Demo Demo Demo Demo"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
Demo Demo Demo Demo
|
Demo Demo Demo Demo
|
||||||
</Link>
|
</Link>
|
||||||
@ -197,7 +215,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="0 000 0000000"
|
title="0 000 0000000"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
0 000 0000000
|
0 000 0000000
|
||||||
</Link>
|
</Link>
|
||||||
@ -206,7 +224,7 @@ const Template = (args: RowContentProps) => {
|
|||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="demo.demo.demo.demo@demo.com"
|
title="demo.demo.demo.demo@demo.com"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
demo.demo.demo.demo@demo.com
|
demo.demo.demo.demo@demo.com
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -31,6 +31,7 @@ import "@testing-library/jest-dom";
|
|||||||
import { Link, LinkType } from "../link";
|
import { Link, LinkType } from "../link";
|
||||||
|
|
||||||
import { RowContent } from "./RowContent";
|
import { RowContent } from "./RowContent";
|
||||||
|
import { globalColors } from "../../themes";
|
||||||
|
|
||||||
describe("<RowContent />", () => {
|
describe("<RowContent />", () => {
|
||||||
it("renders without error", () => {
|
it("renders without error", () => {
|
||||||
@ -41,18 +42,23 @@ describe("<RowContent />", () => {
|
|||||||
title="Demo"
|
title="Demo"
|
||||||
isBold
|
isBold
|
||||||
fontSize="15px"
|
fontSize="15px"
|
||||||
color="#333333"
|
color={globalColors.black}
|
||||||
>
|
>
|
||||||
Demo
|
Demo
|
||||||
</Link>
|
</Link>
|
||||||
<Link type={LinkType.page} title="Demo" fontSize="12px" color="#A3A9AE">
|
<Link
|
||||||
|
type={LinkType.page}
|
||||||
|
title="Demo"
|
||||||
|
fontSize="12px"
|
||||||
|
color={globalColors.gray}
|
||||||
|
>
|
||||||
Demo
|
Demo
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
type={LinkType.action}
|
type={LinkType.action}
|
||||||
title="Demo"
|
title="Demo"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
Demo
|
Demo
|
||||||
</Link>
|
</Link>
|
||||||
@ -60,7 +66,7 @@ describe("<RowContent />", () => {
|
|||||||
type={LinkType.page}
|
type={LinkType.page}
|
||||||
title="0 000 0000000"
|
title="0 000 0000000"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
0 000 0000000
|
0 000 0000000
|
||||||
</Link>
|
</Link>
|
||||||
@ -68,7 +74,7 @@ describe("<RowContent />", () => {
|
|||||||
type={LinkType.page}
|
type={LinkType.page}
|
||||||
title="demo@demo.com"
|
title="demo@demo.com"
|
||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
color="#A3A9AE"
|
color={globalColors.gray}
|
||||||
>
|
>
|
||||||
demo@demo.com
|
demo@demo.com
|
||||||
</Link>
|
</Link>
|
||||||
@ -77,76 +83,4 @@ describe("<RowContent />", () => {
|
|||||||
|
|
||||||
expect(screen.getByTestId("row-content")).toBeInTheDocument();
|
expect(screen.getByTestId("row-content")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
// it("accepts id", () => {
|
|
||||||
// const wrapper = mount(
|
|
||||||
// <RowContent id="testId">
|
|
||||||
// <Link type="page" title="Demo" isBold fontSize="15px" color="#333333">
|
|
||||||
// Demo
|
|
||||||
// </Link>
|
|
||||||
// <Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
|
|
||||||
// Demo
|
|
||||||
// </Link>
|
|
||||||
// <Link type="action" title="Demo" fontSize="12px" color="#A3A9AE">
|
|
||||||
// Demo
|
|
||||||
// </Link>
|
|
||||||
// <Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
|
|
||||||
// 0 000 0000000
|
|
||||||
// </Link>
|
|
||||||
// <Link type="page" title="demo@demo.com" fontSize="12px" color="#A3A9AE">
|
|
||||||
// demo@demo.com
|
|
||||||
// </Link>
|
|
||||||
// </RowContent>,
|
|
||||||
// );
|
|
||||||
|
|
||||||
// expect(wrapper.prop("id")).toEqual("testId");
|
|
||||||
// });
|
|
||||||
|
|
||||||
// it("accepts className", () => {
|
|
||||||
// const wrapper = mount(
|
|
||||||
// <RowContent className="test">
|
|
||||||
// <Link type="page" title="Demo" isBold fontSize="15px" color="#333333">
|
|
||||||
// Demo
|
|
||||||
// </Link>
|
|
||||||
// <Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
|
|
||||||
// Demo
|
|
||||||
// </Link>
|
|
||||||
// <Link type="action" title="Demo" fontSize="12px" color="#A3A9AE">
|
|
||||||
// Demo
|
|
||||||
// </Link>
|
|
||||||
// <Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
|
|
||||||
// 0 000 0000000
|
|
||||||
// </Link>
|
|
||||||
// <Link type="page" title="demo@demo.com" fontSize="12px" color="#A3A9AE">
|
|
||||||
// demo@demo.com
|
|
||||||
// </Link>
|
|
||||||
// </RowContent>,
|
|
||||||
// );
|
|
||||||
|
|
||||||
// expect(wrapper.prop("className")).toEqual("test");
|
|
||||||
// });
|
|
||||||
|
|
||||||
// it("accepts style", () => {
|
|
||||||
// const wrapper = mount(
|
|
||||||
// <RowContent style={{ color: "red" }}>
|
|
||||||
// <Link type="page" title="Demo" isBold fontSize="15px" color="#333333">
|
|
||||||
// Demo
|
|
||||||
// </Link>
|
|
||||||
// <Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
|
|
||||||
// Demo
|
|
||||||
// </Link>
|
|
||||||
// <Link type="action" title="Demo" fontSize="12px" color="#A3A9AE">
|
|
||||||
// Demo
|
|
||||||
// </Link>
|
|
||||||
// <Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
|
|
||||||
// 0 000 0000000
|
|
||||||
// </Link>
|
|
||||||
// <Link type="page" title="demo@demo.com" fontSize="12px" color="#A3A9AE">
|
|
||||||
// demo@demo.com
|
|
||||||
// </Link>
|
|
||||||
// </RowContent>,
|
|
||||||
// );
|
|
||||||
|
|
||||||
// expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
|
|
||||||
// });
|
|
||||||
});
|
});
|
||||||
|
@ -28,6 +28,7 @@ import styled, { css } from "styled-components";
|
|||||||
|
|
||||||
import { Box } from "../box";
|
import { Box } from "../box";
|
||||||
import { tablet } from "../../utils";
|
import { tablet } from "../../utils";
|
||||||
|
import { globalColors } from "../../themes";
|
||||||
|
|
||||||
const StyledIframe = styled.iframe<{ sectionWidth: number }>`
|
const StyledIframe = styled.iframe<{ sectionWidth: number }>`
|
||||||
border: none;
|
border: none;
|
||||||
@ -107,7 +108,7 @@ const StyledSnackBar = styled(Box)<{
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
color: "#333";
|
color: ${globalColors.black};
|
||||||
margin: 0px 4px 4px 24px;
|
margin: 0px 4px 4px 24px;
|
||||||
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -128,7 +129,7 @@ const StyledSnackBar = styled(Box)<{
|
|||||||
background: inherit;
|
background: inherit;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: "#000";
|
color: ${globalColors.darkBlack};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
|
|
||||||
@ -144,7 +145,7 @@ const StyledAction = styled.div`
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
color: "#333";
|
color: ${globalColors.black};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
@media ${tablet} {
|
@media ${tablet} {
|
||||||
|
@ -31,6 +31,7 @@ import { Text } from "../text";
|
|||||||
import { Tooltip } from ".";
|
import { Tooltip } from ".";
|
||||||
|
|
||||||
// import TooltipDocs from "./Tooltip.mdx";
|
// import TooltipDocs from "./Tooltip.mdx";
|
||||||
|
import { globalColors } from "../../themes";
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: "Components/Tooltip",
|
title: "Components/Tooltip",
|
||||||
@ -70,7 +71,7 @@ export const Default: Story = {
|
|||||||
{content}
|
{content}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Text color="#A3A9AE" fontSize="13px">
|
<Text color={globalColors.gray} fontSize="13px">
|
||||||
BobJohnston@gmail.com
|
BobJohnston@gmail.com
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
@ -133,7 +134,7 @@ export const AllTooltip: Story = {
|
|||||||
Bob Johnston
|
Bob Johnston
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Text color="#A3A9AE" fontSize="13px">
|
<Text color={globalColors.gray} fontSize="13px">
|
||||||
BobJohnston@gmail.com
|
BobJohnston@gmail.com
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
@ -173,7 +174,7 @@ export const AllTooltip: Story = {
|
|||||||
{arrayUsers[+content].name}
|
{arrayUsers[+content].name}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Text color="#A3A9AE" fontSize="13px">
|
<Text color={globalColors.gray} fontSize="13px">
|
||||||
{arrayUsers[+content].email}
|
{arrayUsers[+content].email}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user