diff --git a/docs/src/data/tailwind-migration-status.yaml b/docs/src/data/tailwind-migration-status.yaml index ceb29c80bf..4f31306798 100644 --- a/docs/src/data/tailwind-migration-status.yaml +++ b/docs/src/data/tailwind-migration-status.yaml @@ -106,8 +106,8 @@ TextOrbit: true Text: true TextLink: true Textarea: true -Timeline: false -TimelineStep: false +Timeline: true +TimelineStep: true Toast: true ToastRoot: true Tooltip: true diff --git a/packages/orbit-components/playwright/index.html b/packages/orbit-components/playwright/index.html index 610ddf8a43..3f057b3cf3 100644 --- a/packages/orbit-components/playwright/index.html +++ b/packages/orbit-components/playwright/index.html @@ -1,5 +1,5 @@ - + diff --git a/packages/orbit-components/src/Timeline/Timeline.ct-story.tsx b/packages/orbit-components/src/Timeline/Timeline.ct-story.tsx new file mode 100644 index 0000000000..2e24056c9a --- /dev/null +++ b/packages/orbit-components/src/Timeline/Timeline.ct-story.tsx @@ -0,0 +1,69 @@ +import * as React from "react"; + +import SPACINGS_AFTER from "../common/getSpacingToken/consts"; + +import Timeline, { TimelineStep } from "."; + +const DIRECTIONS = ["row", "column"] as const; +const TYPES = ["success", "warning", "critical", "info", undefined] as const; + +export default function TimelineStory() { + return ( +
+ {Object.values(SPACINGS_AFTER).map(spaceAfter => ( + + + + ))} + + {DIRECTIONS.map(direction => ( + <> + + + + + We’ll forward you all refunds from the carrier(s) after we receive it. + + + + + + We’ve received your request and will assign it to one of our agents. + + + We’ll review your request and apply for any available refund from the carrier(s) + + + We’ll wait for the carrier(s) to send us the refund and contact them again if + necessary. + + + The carrier has sent us a refund. There might be more depending on their policy. + + + We’ll forward you all refunds from the carrier(s) after we receive it. + + + + + {TYPES.map(type => ( + + ))} + + + + + + Children + + Children + + + + ))} +
+ ); +} diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx b/packages/orbit-components/src/Timeline/Timeline.ct.tsx new file mode 100644 index 0000000000..53ec18f204 --- /dev/null +++ b/packages/orbit-components/src/Timeline/Timeline.ct.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { test, expect } from "@playwright/experimental-ct-react"; + +import TimelineStory from "./Timeline.ct-story"; +import RenderInRtl from "../utils/rtl/RenderInRtl"; + +test.describe("visual Timeline", () => { + test("default", async ({ mount }) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test("rtl", async ({ mount }) => { + const component = await mount( + + + , + ); + + await expect(component).toHaveScreenshot(); + }); +}); diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Desktop-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Desktop-darwin.png new file mode 100644 index 0000000000..bd723a8b97 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Desktop-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Desktop-linux.png new file mode 100644 index 0000000000..541358881b Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Desktop-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Desktop-darwin.png new file mode 100644 index 0000000000..2afe962bb9 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Desktop-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Desktop-linux.png new file mode 100644 index 0000000000..4db0c0b6d4 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Mobile-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Mobile-darwin.png new file mode 100644 index 0000000000..d3daeff7df Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Mobile-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Mobile-linux.png new file mode 100644 index 0000000000..93fc134074 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Large-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Medium-Mobile-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Medium-Mobile-darwin.png new file mode 100644 index 0000000000..ec9f478493 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Medium-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Medium-Mobile-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Medium-Mobile-linux.png new file mode 100644 index 0000000000..096d8cc41d Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Medium-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Small-Mobile-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Small-Mobile-darwin.png new file mode 100644 index 0000000000..a5080fccb1 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Small-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Small-Mobile-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Small-Mobile-linux.png new file mode 100644 index 0000000000..2a03560c89 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Small-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Tablet-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Tablet-darwin.png new file mode 100644 index 0000000000..c35062bf51 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Tablet-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Tablet-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Tablet-linux.png new file mode 100644 index 0000000000..d99bed8615 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-default-1-Tablet-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Desktop-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Desktop-darwin.png new file mode 100644 index 0000000000..2b10923715 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Desktop-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Desktop-linux.png new file mode 100644 index 0000000000..368c5d66aa Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Desktop-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Desktop-darwin.png new file mode 100644 index 0000000000..8b746f2c59 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Desktop-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Desktop-linux.png new file mode 100644 index 0000000000..a0400e4741 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Mobile-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Mobile-darwin.png new file mode 100644 index 0000000000..f0fee54a08 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Mobile-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Mobile-linux.png new file mode 100644 index 0000000000..8d13454efa Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Large-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Medium-Mobile-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Medium-Mobile-darwin.png new file mode 100644 index 0000000000..a835dd290a Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Medium-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Medium-Mobile-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Medium-Mobile-linux.png new file mode 100644 index 0000000000..1930baead7 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Medium-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Small-Mobile-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Small-Mobile-darwin.png new file mode 100644 index 0000000000..41a2faa900 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Small-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Small-Mobile-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Small-Mobile-linux.png new file mode 100644 index 0000000000..60c5b57846 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Small-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Tablet-darwin.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Tablet-darwin.png new file mode 100644 index 0000000000..8e935965ae Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Tablet-darwin.png differ diff --git a/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Tablet-linux.png b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Tablet-linux.png new file mode 100644 index 0000000000..0ac2b9ebe2 Binary files /dev/null and b/packages/orbit-components/src/Timeline/Timeline.ct.tsx-snapshots/visual-Timeline-rtl-1-Tablet-linux.png differ diff --git a/packages/orbit-components/src/Timeline/TimelineStep/components/ProgressLine.tsx b/packages/orbit-components/src/Timeline/TimelineStep/components/ProgressLine.tsx new file mode 100644 index 0000000000..374b853fc2 --- /dev/null +++ b/packages/orbit-components/src/Timeline/TimelineStep/components/ProgressLine.tsx @@ -0,0 +1,72 @@ +import * as React from "react"; +import cx from "clsx"; + +import type { Type } from "../types"; +import useTheme from "../../../hooks/useTheme"; +import type { Theme } from "../../../defaultTheme"; + +export const getStatusColor = (theme: Theme, type?: Type): string => { + const colors = { + success: theme.orbit.colorTextSuccess, + warning: theme.orbit.colorTextWarning, + critical: theme.orbit.colorTextCritical, + info: theme.orbit.colorTextInfo, + }; + + return type ? colors[type] : theme.orbit.paletteCloudNormalHover; +}; + +interface Props { + desktop?: boolean; + last?: boolean; + nextStatus?: Type; + prevStatus?: Type; + status?: Type; +} + +const ProgressLine = ({ desktop, status, nextStatus, last, prevStatus }: Props) => { + const theme = useTheme(); + + const getBorderStyle = (): React.CSSProperties => { + if (desktop) { + if (status && !nextStatus && !last) { + return { + borderImageSlice: 1, + borderImageSource: `linear-gradient(to right, ${getStatusColor( + theme, + prevStatus, + )}, ${getStatusColor(theme, status)})`, + }; + } + } + + if (status && !nextStatus && !last) { + return { + borderImageSlice: 1, + borderImageSource: `linear-gradient(to bottom, ${getStatusColor( + theme, + prevStatus, + )}, ${getStatusColor(theme, status)})`, + }; + } + + return { + borderColor: getStatusColor(theme, status), + }; + }; + + return ( + + ); +}; + +export default ProgressLine; diff --git a/packages/orbit-components/src/Timeline/TimelineStep/components/TextWrapper.tsx b/packages/orbit-components/src/Timeline/TimelineStep/components/TextWrapper.tsx new file mode 100644 index 0000000000..a214e78c38 --- /dev/null +++ b/packages/orbit-components/src/Timeline/TimelineStep/components/TextWrapper.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import cx from "clsx"; + +type Props = React.PropsWithChildren<{ + active?: boolean; +}>; + +const TextWrapper = ({ active, children }: Props) => { + return ( +
p]:text-ink-dark" : "[&>p]:text-ink-light")}> + {children} +
+ ); +}; + +export default TextWrapper; diff --git a/packages/orbit-components/src/Timeline/TimelineStep/components/TimelineStepDesktop.tsx b/packages/orbit-components/src/Timeline/TimelineStep/components/TimelineStepDesktop.tsx index cc422b8615..926abd39db 100644 --- a/packages/orbit-components/src/Timeline/TimelineStep/components/TimelineStepDesktop.tsx +++ b/packages/orbit-components/src/Timeline/TimelineStep/components/TimelineStepDesktop.tsx @@ -1,30 +1,14 @@ import * as React from "react"; -import styled, { css } from "styled-components"; +import cx from "clsx"; -import StyledRelative from "../primitives/StyledRelative"; import TypeIcon from "./TypeIcon"; -import StyledProgressLine from "../primitives/StyledProgressLine"; -import StyledText from "../primitives/StyledText"; +import ProgressLine from "./ProgressLine"; +import TextWrapper from "./TextWrapper"; import Text from "../../../Text"; import Stack from "../../../Stack"; -import defaultTheme from "../../../defaultTheme"; import type { Props as StepProps, Type } from "../types"; import useTheme from "../../../hooks/useTheme"; -const StyledDescription = styled.div<{ active?: boolean }>` - ${({ theme, active }) => css` - max-width: 250px; - width: 100%; - > p { - color: ${active ? theme.orbit.paletteInkDark : theme.orbit.paletteInkLight}; - } - `} -`; - -StyledDescription.defaultProps = { - theme: defaultTheme, -}; - interface Props extends StepProps { last: boolean; prevType: Type; @@ -47,26 +31,26 @@ const TimelineStepDesktop = ({ return ( - - +
+ - - +
{subLabel && ( - + {subLabel} - + )} - + {label} - + {children && ( - +
p]:text-ink-dark" + : "[&>p]:text-ink-light", + )} + > {children} - +
)} diff --git a/packages/orbit-components/src/Timeline/TimelineStep/components/TimelineStepMobile.tsx b/packages/orbit-components/src/Timeline/TimelineStep/components/TimelineStepMobile.tsx index b159dd2531..df1d3a2470 100644 --- a/packages/orbit-components/src/Timeline/TimelineStep/components/TimelineStepMobile.tsx +++ b/packages/orbit-components/src/Timeline/TimelineStep/components/TimelineStepMobile.tsx @@ -1,11 +1,10 @@ import * as React from "react"; -import StyledRelative from "../primitives/StyledRelative"; import Text from "../../../Text"; import Stack from "../../../Stack"; -import StyledProgressLine from "../primitives/StyledProgressLine"; +import ProgressLine from "./ProgressLine"; import TypeIcon from "./TypeIcon"; -import StyledText from "../primitives/StyledText"; +import TextWrapper from "./TextWrapper"; import type { Props as StepProps, Type } from "../types"; interface Props extends StepProps { @@ -15,7 +14,7 @@ interface Props extends StepProps { const TimelineStepMobile = ({ type, subLabel, label, nextType, children, active, last }: Props) => { return ( - +
- {!last && } + {!last && } - + {label} - + {subLabel && ( - + {subLabel} - + )} {children && ( - + {children} - + )} - +
); }; diff --git a/packages/orbit-components/src/Timeline/TimelineStep/components/TypeIcon.tsx b/packages/orbit-components/src/Timeline/TimelineStep/components/TypeIcon.tsx index 386a7d5380..cdb0a8136a 100644 --- a/packages/orbit-components/src/Timeline/TimelineStep/components/TypeIcon.tsx +++ b/packages/orbit-components/src/Timeline/TimelineStep/components/TypeIcon.tsx @@ -1,10 +1,10 @@ import * as React from "react"; +import cx from "clsx"; import CheckCircle from "../../../icons/CheckCircle"; import Circle from "../../../icons/CircleEmpty"; import AlertCircle from "../../../icons/AlertCircle"; import CloseCircle from "../../../icons/CloseCircle"; -import StyledIconWrapper from "../primitives/StyledIconWrapper"; import type { Type } from "../types"; const getTypeIcon = ({ type, active }: { type?: Type; active: boolean }) => { @@ -31,11 +31,41 @@ const getTypeIcon = ({ type, active }: { type?: Type; active: boolean }) => { return ; }; -const TypeIcon = ({ type, active, mobile }: { type?: Type; active: boolean; mobile?: boolean }) => { +const getBackgroundClassName = (type: Type): string => { + const classNames = { + success: "bg-green-normal", + warning: "bg-orange-normal", + critical: "bg-red-normal", + info: "bg-blue-normal", + }; + + return classNames[type]; +}; + +interface Props { + type?: Type; + active: boolean; + mobile?: boolean; +} + +const TypeIcon = ({ type, active, mobile }: Props) => { return ( - +
{getTypeIcon({ type, active })} - +
+
); }; diff --git a/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledIconWrapper.ts b/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledIconWrapper.ts deleted file mode 100644 index 581b558686..0000000000 --- a/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledIconWrapper.ts +++ /dev/null @@ -1,54 +0,0 @@ -import styled, { css, keyframes } from "styled-components"; -import { convertHexToRgba } from "@kiwicom/orbit-design-tokens"; - -import defaultTheme from "../../../defaultTheme"; -import { renderStatus } from "./helpers"; -import type { Type } from "../types"; - -const pulseAnimation = keyframes` - 0% { - transform: scale(0.01); - } - - 50% { - transform: scale(1); - } - - 100% { - transform: scale(0.01); - } -`; - -const StyledIconWrapper = styled.div<{ mobile?: boolean; status?: Type; active?: boolean }>` - ${({ theme, mobile, status, active }) => css` - display: flex; - align-items: center; - justify-content: center; - min-width: ${mobile && theme.orbit.spaceLarge}; - z-index: 1; - text-align: center; - position: relative; - height: 20px; - line-height: ${theme.orbit.lineHeightTextSmall}; - &:after { - position: absolute; - top: 0px; - left: ${mobile ? "2px" : "-2px"}; - content: ""; - height: 20px; - width: 20px; - border-radius: 100%; - ${active && - css` - animation: ${pulseAnimation} 2.5s ease-in-out infinite; - `}; - background: ${status && convertHexToRgba(renderStatus(status, theme), 10)}; - } - `}; -`; - -StyledIconWrapper.defaultProps = { - theme: defaultTheme, -}; - -export default StyledIconWrapper; diff --git a/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledProgressLine.ts b/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledProgressLine.ts deleted file mode 100644 index b6d2d8664a..0000000000 --- a/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledProgressLine.ts +++ /dev/null @@ -1,61 +0,0 @@ -import styled, { css } from "styled-components"; - -import type { Type } from "../types"; -import { left } from "../../../utils/rtl"; -import defaultTheme from "../../../defaultTheme"; -import { renderStatus } from "./helpers"; - -const getBorderStyle = ({ desktop, status, nextStatus, theme, last, prevStatus }) => { - if (desktop) { - if (status && !nextStatus && !last) { - return css` - border-image-slice: 1; - border-image-source: linear-gradient( - to right, - ${renderStatus(prevStatus, theme)}, - ${renderStatus(status, theme)} - ); - `; - } - } - - if (status && !nextStatus && !last) { - return css` - border-image-slice: 1; - border-image-source: linear-gradient( - to bottom, - ${renderStatus(prevStatus, theme)}, - ${renderStatus(status, theme)} - ); - `; - } - - return css` - border-color: ${renderStatus(status, theme)}; - `; -}; - -const StyledProgressLine = styled.span<{ - desktop?: boolean; - status?: Type; - nextStatus?: Type; - prevStatus?: Type; - last?: boolean; -}>` - ${({ desktop, theme, status, nextStatus, prevStatus, last }) => css` - position: ${!desktop && "absolute"}; - top: ${!desktop && "15px"}; - border-width: 1px; - border-style: ${!status ? "dashed" : "solid"}; - ${getBorderStyle({ desktop, theme, status, nextStatus, prevStatus, last })}; - ${left}: ${!desktop && "11px"}; - width: ${desktop && "50%"}; - height: ${!desktop && `calc(100% + 2px)`}; - `} -`; - -StyledProgressLine.defaultProps = { - theme: defaultTheme, -}; - -export default StyledProgressLine; diff --git a/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledRelative.ts b/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledRelative.ts deleted file mode 100644 index 39743fdd39..0000000000 --- a/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledRelative.ts +++ /dev/null @@ -1,20 +0,0 @@ -import styled, { css } from "styled-components"; - -import defaultTheme from "../../../defaultTheme"; - -const StyledRelative = styled.div<{ inner?: boolean }>` - position: relative; - ${({ inner, theme }) => - inner && - css` - width: calc(100% + ${parseInt(theme.orbit.spaceSmall, 10) + 4}px); - display: flex; - align-items: center; - `}; -`; - -StyledRelative.defaultProps = { - theme: defaultTheme, -}; - -export default StyledRelative; diff --git a/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledText.ts b/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledText.ts deleted file mode 100644 index e9202b2015..0000000000 --- a/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledText.ts +++ /dev/null @@ -1,21 +0,0 @@ -import styled, { css } from "styled-components"; - -import defaultTheme from "../../../defaultTheme"; -import mq from "../../../utils/mediaQuery"; - -const StyledText = styled.div<{ active?: boolean }>` - ${({ theme, active }) => css` - > p { - color: ${active ? theme.orbit.paletteInkDark : theme.orbit.paletteInkLight}; - } - ${mq.desktop(css` - min-height: ${theme.orbit.spaceMedium}; - `)}; - `}; -`; - -StyledText.defaultProps = { - theme: defaultTheme, -}; - -export default StyledText; diff --git a/packages/orbit-components/src/Timeline/TimelineStep/primitives/helpers.ts b/packages/orbit-components/src/Timeline/TimelineStep/primitives/helpers.ts deleted file mode 100644 index 3e60c1f97a..0000000000 --- a/packages/orbit-components/src/Timeline/TimelineStep/primitives/helpers.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { Type } from "../types"; -import type defaultTheme from "../../../defaultTheme"; - -export const renderStatus = (type: Type, theme: typeof defaultTheme): string => { - if (type === "success") return theme.orbit.colorTextSuccess; - if (type === "warning") return theme.orbit.colorTextWarning; - if (type === "critical") return theme.orbit.colorTextCritical; - if (type === "info") return theme.orbit.colorTextInfo; - - return theme.orbit.paletteCloudNormalHover; -}; - -export default renderStatus; diff --git a/packages/orbit-components/src/Timeline/index.tsx b/packages/orbit-components/src/Timeline/index.tsx index 3a03685abb..03d1d0552b 100644 --- a/packages/orbit-components/src/Timeline/index.tsx +++ b/packages/orbit-components/src/Timeline/index.tsx @@ -1,26 +1,14 @@ "use client"; import * as React from "react"; -import styled from "styled-components"; +import cx from "clsx"; -import type * as Common from "../common/types"; import Stack from "../Stack"; import useMediaQuery from "../hooks/useMediaQuery"; import { TimelineStatusProvider, TimelineStepProvider } from "./TimelineContext"; -import getSpacingToken from "../common/getSpacingToken"; -import themeDefault from "../defaultTheme"; +import { spaceAfterClasses } from "../common/tailwind"; import type { Props } from "./types"; -const WrapperStyled = styled.div<{ spaceAfter?: Common.SpaceAfterSizes }>` - position: relative; - overflow: hidden; - margin-bottom: ${getSpacingToken}; -`; - -WrapperStyled.defaultProps = { - theme: themeDefault, -}; - const Timeline = ({ children, spaceAfter, direction, dataTest, id }: Props) => { const childrenArr = React.Children.toArray(children); const { isDesktop } = useMediaQuery(); @@ -36,7 +24,14 @@ const Timeline = ({ children, spaceAfter, direction, dataTest, id }: Props) => { ); return childrenArr && childrenArr.length > 0 ? ( - +
{React.Children.map(childrenArr, (child, i) => { @@ -55,7 +50,7 @@ const Timeline = ({ children, spaceAfter, direction, dataTest, id }: Props) => { })} - +
) : null; }; diff --git a/packages/orbit-tailwind-preset/src/__tests__/__snapshots__/configs.test.ts.snap b/packages/orbit-tailwind-preset/src/__tests__/__snapshots__/configs.test.ts.snap index 32a763963a..b3b381e4d7 100644 --- a/packages/orbit-tailwind-preset/src/__tests__/__snapshots__/configs.test.ts.snap +++ b/packages/orbit-tailwind-preset/src/__tests__/__snapshots__/configs.test.ts.snap @@ -2312,6 +2312,17 @@ exports[`orbitPreset should have preflight disabled 1`] = ` "transform": "scale(2)", }, }, + "pulse-zero": { + "0%": { + "transform": "scale(0.01)", + }, + "100%": { + "transform": "scale(0.01)", + }, + "50%": { + "transform": "scale(1)", + }, + }, "slow-pulse": { "0%": { "opacity": "1", diff --git a/packages/orbit-tailwind-preset/src/index.ts b/packages/orbit-tailwind-preset/src/index.ts index 98a09c7f85..2e780ef11e 100644 --- a/packages/orbit-tailwind-preset/src/index.ts +++ b/packages/orbit-tailwind-preset/src/index.ts @@ -271,6 +271,11 @@ export default function orbitTailwindPreset(options?: Options): Config { "50%": { transform: "scale(2)" }, "100%": { transform: "scale(1)" }, }, + "pulse-zero": { + "0%": { transform: "scale(0.01)" }, + "50%": { transform: "scale(1)" }, + "100%": { transform: "scale(0.01)" }, + }, "toast-fade-in": { "0%": { opacity: "0", transform: "translateY(-20px)" }, "100%": { opacity: "1", transform: "translateY(0)" },