From 84be8c2c3d9e7a7473d0074f6e8c87cc4aae4030 Mon Sep 17 00:00:00 2001 From: Victor Genaev Date: Tue, 10 Oct 2023 15:14:05 +0200 Subject: [PATCH] feat(LinkList): migrate to tailwind chore(Stack): remove redundant helper functions --- .../src/LinkList/LinkList.stories.tsx | 16 ++- .../src/LinkList/__tests__/index.test.tsx | 21 +-- .../orbit-components/src/LinkList/index.tsx | 126 ++++-------------- .../src/Stack/helpers/getChildrenMargin.ts | 46 ------- .../helpers/getDirectionSpacingTemplate.ts | 19 --- .../src/Stack/helpers/getProperty.ts | 21 --- .../src/Stack/helpers/getSpacing.ts | 17 --- 7 files changed, 36 insertions(+), 230 deletions(-) delete mode 100644 packages/orbit-components/src/Stack/helpers/getChildrenMargin.ts delete mode 100644 packages/orbit-components/src/Stack/helpers/getDirectionSpacingTemplate.ts delete mode 100644 packages/orbit-components/src/Stack/helpers/getProperty.ts delete mode 100644 packages/orbit-components/src/Stack/helpers/getSpacing.ts diff --git a/packages/orbit-components/src/LinkList/LinkList.stories.tsx b/packages/orbit-components/src/LinkList/LinkList.stories.tsx index a06659821b..4f86d413fc 100644 --- a/packages/orbit-components/src/LinkList/LinkList.stories.tsx +++ b/packages/orbit-components/src/LinkList/LinkList.stories.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { select } from "@storybook/addon-knobs"; +import { select, boolean } from "@storybook/addon-knobs"; import { DIRECTIONS, SPACINGS } from "../utils/layout/consts"; import TextLink from "../TextLink"; @@ -7,19 +7,21 @@ import TextLink from "../TextLink"; import LinkList from "."; export default { - title: "Linklist", + title: "LinkList", }; export const Default = () => { const direction = select("Direction", Object.values(DIRECTIONS), DIRECTIONS.ROW); const spacing = select("Spacing", Object.values(SPACINGS), SPACINGS.MEDIUM); + const legacy = boolean("Legacy", false); + const indent = boolean("Indent", false); return ( - - Flights - Flights - Flights - Flights + + Flight 1 + Flight 2 + Flight 3 + Flight 4 ); }; diff --git a/packages/orbit-components/src/LinkList/__tests__/index.test.tsx b/packages/orbit-components/src/LinkList/__tests__/index.test.tsx index 2970b5aa50..bfcee98417 100644 --- a/packages/orbit-components/src/LinkList/__tests__/index.test.tsx +++ b/packages/orbit-components/src/LinkList/__tests__/index.test.tsx @@ -3,26 +3,7 @@ import * as React from "react"; import { screen, render } from "../../test-utils"; import LinkList from ".."; -describe("#LinkList", () => { - it("should have expected dom output", () => { - render( - -
link 1
-
link 2
-
link 3
- , - ); - - expect(screen.getByText("link 1")).toBeInTheDocument(); - expect(screen.getByTestId("kek")).toBeInTheDocument(); - expect(screen.getAllByRole("listitem")[0]).toHaveStyle({ - marginBottom: "16px", - }); - expect(screen.getAllByRole("listitem")[2]).toHaveStyle({ - marginBottom: "0px", - }); - }); - +describe("LinkList", () => { it("should have spacing based on gap", () => { render( diff --git a/packages/orbit-components/src/LinkList/index.tsx b/packages/orbit-components/src/LinkList/index.tsx index 0f94567e99..3f07f76608 100644 --- a/packages/orbit-components/src/LinkList/index.tsx +++ b/packages/orbit-components/src/LinkList/index.tsx @@ -1,95 +1,11 @@ "use client"; import * as React from "react"; -import type { FlattenSimpleInterpolation } from "styled-components"; -import styled, { css } from "styled-components"; +import cx from "clsx"; -import { left, rtlSpacing } from "../utils/rtl"; -import mq from "../utils/mediaQuery"; -import defaultTheme from "../defaultTheme"; import { SPACINGS } from "../utils/layout/consts"; -import getSpacing from "../Stack/helpers/getSpacing"; -import getDirectionSpacingTemplate from "../Stack/helpers/getDirectionSpacingTemplate"; import type { Props } from "./types"; - -const StyledLinkList = styled.ul<{ - $indent?: Props["indent"]; - $direction: Props["direction"]; - $legacy?: Props["legacy"]; - $spacing: Props["spacing"]; -}>` - ${({ $indent, $direction, theme, $legacy, $spacing }) => css` - display: flex; - flex-direction: ${$direction}; - width: 100%; - margin: 0; - gap: ${!$legacy && $spacing && getSpacing(theme)[$spacing]}; - padding: 0; - padding-${left}: ${$indent && theme.orbit.spaceXXSmall}; - list-style: none; - font-size: ${theme.orbit.fontSizeTextNormal}; - `}; -`; - -StyledLinkList.defaultProps = { - theme: defaultTheme, -}; - -const resolveSpacings = ({ - $legacy, - $direction, - theme, - $spacing, -}): FlattenSimpleInterpolation | null => { - const margin = - $spacing && - $direction && - String(getDirectionSpacingTemplate($direction)).replace( - "__spacing__", - getSpacing(theme)[$spacing], - ); - - if (!$legacy) return null; - - return css` - margin: ${margin && rtlSpacing(margin)}; - &:last-child { - margin: 0; - } - `; -}; - -const StyledNavigationLinkListChild = styled.li<{ - $indent?: Props["indent"]; - $direction: Props["direction"]; - $legacy?: Props["legacy"]; - $spacing: Props["spacing"]; -}>` - ${({ $direction, $spacing, $legacy, theme }) => css` - .orbit-text-link { - text-decoration: none; - } - - ${resolveSpacings({ $direction, $spacing, $legacy, theme })}; - - ${$direction === "column" && - css` - width: 100%; - .orbit-text-link { - width: 100%; - ${mq.tablet( - css` - width: auto; - `, - )}; - } - `}; - `} -`; - -StyledNavigationLinkListChild.defaultProps = { - theme: defaultTheme, -}; +import { getDirectionClasses, getSpacingClasses } from "../common/tailwind"; const LinkList = ({ direction = "column", @@ -99,24 +15,34 @@ const LinkList = ({ children, dataTest, }: Props) => ( - {React.Children.map(children, item => { - if (React.isValidElement(item)) { - return ( - - {item} - - ); - } - return null; + if (!React.isValidElement(item)) return null; + return ( +
  • + {item} +
    • + ); })} -     + ); export default LinkList; diff --git a/packages/orbit-components/src/Stack/helpers/getChildrenMargin.ts b/packages/orbit-components/src/Stack/helpers/getChildrenMargin.ts deleted file mode 100644 index 5661833149..0000000000 --- a/packages/orbit-components/src/Stack/helpers/getChildrenMargin.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type { FlattenInterpolation, ThemeProps } from "styled-components"; -import { css } from "styled-components"; - -import getSpacing from "./getSpacing"; -import { rtlSpacing } from "../../utils/rtl"; -import { SPACINGS } from "../../utils/layout/consts"; -import getProperty from "./getProperty"; -import { QUERIES } from "../../utils/mediaQuery/consts"; -import type { Devices } from "../../utils/mediaQuery/types"; -import getDirectionSpacingTemplate from "./getDirectionSpacingTemplate"; -import type { Props as StackProps, Direction } from "../types"; -import type defaultTheme from "../../defaultTheme"; - -interface Props extends StackProps { - theme: typeof defaultTheme; -} - -const getChildrenMargin = - ({ viewport, index, devices }: { viewport: Devices; index: number; devices: Devices[] }) => - (props: Props): FlattenInterpolation> | null => { - if (props[viewport] || viewport === QUERIES.DESKTOP) { - const spacing = getProperty("spacing", { index, devices }, props); - if (spacing === SPACINGS.NONE) return null; - const direction = getProperty("direction", { index, devices }, props) as Direction; - const margin = - spacing && - direction && - String(getDirectionSpacingTemplate(direction)).replace( - "__spacing__", - getSpacing(props.theme)[spacing], - ); - - return css` - & > * { - margin: ${margin && rtlSpacing(margin)}!important; - &:last-child { - margin: 0 !important; - } - } - `; - } - - return null; - }; - -export default getChildrenMargin; diff --git a/packages/orbit-components/src/Stack/helpers/getDirectionSpacingTemplate.ts b/packages/orbit-components/src/Stack/helpers/getDirectionSpacingTemplate.ts deleted file mode 100644 index 4565fb719a..0000000000 --- a/packages/orbit-components/src/Stack/helpers/getDirectionSpacingTemplate.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { DIRECTIONS } from "../../utils/layout/consts"; -import type { Direction } from "../types"; - -const getDirectionSpacingTemplate = (direction: Direction): string => { - switch (direction) { - case DIRECTIONS.COLUMN: - return "0 0 __spacing__ 0"; - case DIRECTIONS.ROW: - return "0 __spacing__ 0 0"; - case DIRECTIONS.COLUMNREVERSE: - return "__spacing__ 0 0 0"; - case DIRECTIONS.ROWREVERSE: - return "0 0 0 __spacing__"; - default: - return "0 0 __spacing__ 0"; - } -}; - -export default getDirectionSpacingTemplate; diff --git a/packages/orbit-components/src/Stack/helpers/getProperty.ts b/packages/orbit-components/src/Stack/helpers/getProperty.ts deleted file mode 100644 index 1de612b286..0000000000 --- a/packages/orbit-components/src/Stack/helpers/getProperty.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { Props } from "../types"; -import type { Devices } from "../../utils/mediaQuery/types"; - -type GetProperty = ( - property: "spacing" | "direction", - { index, devices }: { index: number; devices: Devices[] }, - props: Props, -) => string; - -const getProperty: GetProperty = (property, { index, devices }, props) => { - const viewport = props && props[devices[index]]; - if (viewport && viewport[property]) return viewport[property]; - - if (index !== 0) { - return getProperty(property, { index: index - 1, devices }, props); - } - - return null; -}; - -export default getProperty; diff --git a/packages/orbit-components/src/Stack/helpers/getSpacing.ts b/packages/orbit-components/src/Stack/helpers/getSpacing.ts deleted file mode 100644 index a7a73247b8..0000000000 --- a/packages/orbit-components/src/Stack/helpers/getSpacing.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { SPACINGS } from "../../utils/layout/consts"; -import type { Theme } from "../../defaultTheme"; - -const getSpacing = (theme: Theme): Record => ({ - [SPACINGS.NONE]: "", - [SPACINGS.XXXSMALL]: theme.orbit.spaceXXXSmall, - [SPACINGS.XXSMALL]: theme.orbit.spaceXXSmall, - [SPACINGS.XSMALL]: theme.orbit.spaceXSmall, - [SPACINGS.SMALL]: theme.orbit.spaceSmall, - [SPACINGS.MEDIUM]: theme.orbit.spaceMedium, - [SPACINGS.LARGE]: theme.orbit.spaceLarge, - [SPACINGS.XLARGE]: theme.orbit.spaceXLarge, - [SPACINGS.XXLARGE]: theme.orbit.spaceXXLarge, - [SPACINGS.XXXLARGE]: theme.orbit.spaceXXXLarge, -}); - -export default getSpacing;