From 778bee5ec3c86c65af1de9e07ca70e8ffcb933fc Mon Sep 17 00:00:00 2001 From: Daniel Sil Date: Fri, 2 Feb 2024 17:03:22 +0100 Subject: [PATCH] feat(Icon): migrate to Tailwind --- packages/orbit-components/src/Icon/README.md | 20 ++-- .../src/Icon/__tests__/index.test.tsx | 14 +-- packages/orbit-components/src/Icon/index.tsx | 94 ++++++------------- 3 files changed, 42 insertions(+), 86 deletions(-) diff --git a/packages/orbit-components/src/Icon/README.md b/packages/orbit-components/src/Icon/README.md index c29579ffe7..d853ffe968 100644 --- a/packages/orbit-components/src/Icon/README.md +++ b/packages/orbit-components/src/Icon/README.md @@ -16,16 +16,16 @@ After adding import into your project you can use it simply like: Table below contains all types of the props available for icons in general. -| Name | Type | Default | Description | -| :----------- | :-------------- | :------------- | :--------------------------------------------------------------------- | -| className | `string` | | The optional className of Icon. | -| color | [`enum`](#enum) | `currentColor` | The color of the Icon. | -| customColor | `string` | | The customColor of the Icon. [See Functional specs](#functional-specs) | -| dataTest | `string` | | Optional prop for testing purposes. | -| **size** | [`enum`](#enum) | `"medium"` | The size of the Icon. | -| reverseOnRtl | `boolean` | `false` | If `true`, the icon will be reversed if `theme.rtl` is set to `true`. | -| ariaHidden | `boolean` | | Adds prop `aria-hidden` to an element, useful for screenreaders. | -| ariaLabel | `string` | | Adds prop `aria-label` to an element, useful for screenreaders. | +| Name | Type | Default | Description | +| :----------- | :-------------- | :------------- | :----------------------------------------------------------------------------------------- | +| className | `string` | | The optional className of Icon. | +| color | [`enum`](#enum) | `currentColor` | The color of the Icon. | +| customColor | `string` | | The customColor of the Icon, as valid CSS value. [See Functional specs](#functional-specs) | +| dataTest | `string` | | Optional prop for testing purposes. | +| **size** | [`enum`](#enum) | `"medium"` | The size of the Icon. | +| reverseOnRtl | `boolean` | `false` | If `true`, the icon will be reversed if `theme.rtl` is set to `true`. | +| ariaHidden | `boolean` | | Adds prop `aria-hidden` to an element, useful for screenreaders. | +| ariaLabel | `string` | | Adds prop `aria-label` to an element, useful for screenreaders. | ### enum diff --git a/packages/orbit-components/src/Icon/__tests__/index.test.tsx b/packages/orbit-components/src/Icon/__tests__/index.test.tsx index 215caffaef..0b63e29d80 100644 --- a/packages/orbit-components/src/Icon/__tests__/index.test.tsx +++ b/packages/orbit-components/src/Icon/__tests__/index.test.tsx @@ -2,25 +2,15 @@ import * as React from "react"; import { render, screen } from "../../test-utils"; import Accommodation from "../../icons/Accommodation"; -import { ICON_SIZES, ICON_COLORS } from "../consts"; -import defaultTheme from "../../defaultTheme"; describe("Icon", () => { it("should have expected DOM output", () => { - render( - , - ); + render(); + expect(screen.getByTestId("test")).toBeInTheDocument(); const icon = screen.getByLabelText("Accommodation"); expect(icon.tagName.toLowerCase()).toBe("svg"); expect(icon).toHaveAttribute("aria-hidden", "true"); - expect(icon).toHaveStyle({ color: defaultTheme.orbit.colorIconPrimary }); }); it("should support passing custom color", () => { diff --git a/packages/orbit-components/src/Icon/index.tsx b/packages/orbit-components/src/Icon/index.tsx index efeba96191..f29a4014e0 100644 --- a/packages/orbit-components/src/Icon/index.tsx +++ b/packages/orbit-components/src/Icon/index.tsx @@ -1,74 +1,25 @@ "use client"; import * as React from "react"; -import styled, { css } from "styled-components"; +import cx from "clsx"; import { ICON_SIZES, ICON_COLORS } from "./consts"; -import defaultTheme from "../defaultTheme"; import type { GetSize, FactoryProps } from "./types"; export const getSize: GetSize = size => ({ theme }) => { const tokens = { - [ICON_SIZES.SMALL]: theme.orbit.widthIconSmall, - [ICON_SIZES.MEDIUM]: theme.orbit.widthIconMedium, - [ICON_SIZES.LARGE]: theme.orbit.widthIconLarge, + [ICON_SIZES.SMALL]: theme.orbit.iconSmallSize, + [ICON_SIZES.MEDIUM]: theme.orbit.iconMediumSize, + [ICON_SIZES.LARGE]: theme.orbit.iconLargeSize, }; return tokens[size] || tokens[ICON_SIZES.MEDIUM]; }; -const getColor = - () => - ({ theme, color }) => { - const tokens = { - [ICON_COLORS.PRIMARY]: theme.orbit.colorIconPrimary, - [ICON_COLORS.SECONDARY]: theme.orbit.colorIconSecondary, - [ICON_COLORS.TERTIARY]: theme.orbit.colorIconTertiary, - [ICON_COLORS.INFO]: theme.orbit.colorIconInfo, - [ICON_COLORS.SUCCESS]: theme.orbit.colorIconSuccess, - [ICON_COLORS.WARNING]: theme.orbit.colorIconWarning, - [ICON_COLORS.CRITICAL]: theme.orbit.colorIconCritical, - }; - return tokens[color]; - }; - -const reverse = ({ reverseOnRtl, theme }) => - reverseOnRtl && - theme.rtl && - css` - transform: scale(-1, 1); - `; - -const StyledIcon = styled(({ className, viewBox, dataTest, children, ariaHidden, ariaLabel }) => ( - - {children} - -))` - display: inline-block; - width: ${({ size }) => getSize(size)}; - height: ${({ size }) => getSize(size)}; - flex-shrink: 0; - vertical-align: middle; - fill: currentColor; - color: ${({ color, customColor }) => customColor || (color && getColor())}; - ${reverse}; -`; - -StyledIcon.defaultProps = { - theme: defaultTheme, -}; - const OrbitIcon = (props: FactoryProps) => { const { - size, + size = ICON_SIZES.MEDIUM, color, customColor, className, @@ -80,19 +31,34 @@ const OrbitIcon = (props: FactoryProps) => { ariaLabel, } = props; return ( - {children} - + ); };