diff --git a/src/components/BannerStrip/BannerStrip.test.tsx b/src/components/BannerStrip/BannerStrip.test.tsx index 1cb7babbe..5d90a6ad8 100644 --- a/src/components/BannerStrip/BannerStrip.test.tsx +++ b/src/components/BannerStrip/BannerStrip.test.tsx @@ -4,7 +4,7 @@ import { composeStories } from '@storybook/testing-react'; import * as stories from './BannerStrip.stories'; import 'jest-styled-components'; import color from '../../styles/colors'; -import RGBToHex from '../../utils/rgbToHex'; +import rgbToHex from '../../utils/rgbToHex'; const { Standard, StandardWithButton, Warning, Error, Success } = composeStories(stories); @@ -42,7 +42,7 @@ describe('Banner Strip - Standard', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.blue); }); }); @@ -93,7 +93,7 @@ describe('Banner Strip - Warning', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.yellow); }); }); @@ -120,7 +120,7 @@ describe('Banner Strip - Error', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.red); }); }); @@ -147,7 +147,7 @@ describe('Banner Strip - Success', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.green); }); }); diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx index 6f1b58fc1..f75829f6d 100644 --- a/src/components/Button/Button.test.tsx +++ b/src/components/Button/Button.test.tsx @@ -4,7 +4,7 @@ import { fireEvent } from '@testing-library/react'; import { composeStories } from '@storybook/testing-react'; import * as stories from './Button.stories'; import color from '../../styles/colors'; -import RGBToHex from '../../utils/rgbToHex'; +import rgbToHex from '../../utils/rgbToHex'; const { Primary, @@ -59,9 +59,9 @@ describe('Button - Primary', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.green); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.white); }); @@ -90,10 +90,10 @@ describe('Button - Primary Large', () => { `[data-testid="${buttonTestId}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.white); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.green); expect(styles?.borderWidth).toBe('4px'); expect(styles?.fontSize).toBe('16px'); @@ -117,10 +117,10 @@ describe('Button - Primary Small', () => { `[data-testid="${buttonTestId}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.white); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.green); expect(styles?.fontSize).toBe('13px'); expect(styles?.padding).toBe('2px 12px'); @@ -154,7 +154,7 @@ describe('Button - Primary with icon', () => { }); it('renders icon correctly', () => { const iconElement = container.querySelector( - `[data-testid="${buttonTestId}"] > svg`, + `[data-testid="${buttonTestId}"] > div > svg`, ); expect(iconElement).not.toBeNull(); }); @@ -275,9 +275,9 @@ describe('Button - Secondary', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.blueLight); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.blue); }); @@ -321,9 +321,9 @@ describe('Button - Outline', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.white); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.blue); }); it('returns the normal onClick event', () => { @@ -366,9 +366,9 @@ describe('Button - ColoredRed', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.red); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.red); }); it('returns the normal onClick event', () => { @@ -411,9 +411,9 @@ describe('Button - ColoredBlue', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.blue); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.blue); }); it('returns the normal onClick event', () => { @@ -456,9 +456,9 @@ describe('Button - ColoredGreen', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.green); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.green); }); it('returns the normal onClick event', () => { @@ -501,9 +501,9 @@ describe('Button - ColoredYellow', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.yellow); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.yellow); }); it('returns the normal onClick event', () => { diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx index 38628c422..9e2aedd3e 100644 --- a/src/components/Card/Card.stories.tsx +++ b/src/components/Card/Card.stories.tsx @@ -2,6 +2,9 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'; import Card from './Card'; import React from 'react'; import getModuleAnimation from './Animations/animations'; +import { Icon, iconTypes } from '../Icon'; +import colors from '../../styles/colors'; +import { Button } from '../Button'; export default { title: '4.UI/Card', @@ -94,3 +97,70 @@ ComingSoon.args = { description: 'Coming Soon', isDisabled: true, }; + +export const ProPlan = Template.bind({}); +ProPlan.args = { + children: [ +
+

Pro Plan

+
+ + $18 + + per month +
+ Everything in Starter, plus +
+ + Servers never Sleep +
+
+ + More requests +
+
+ + Higher limits +
+
+ + Request auto scaling +
+
+ + Email support +
+
, + ], +}; diff --git a/src/components/Card/Card.styles.ts b/src/components/Card/Card.styles.ts index 0abca4b2e..ebf56c288 100644 --- a/src/components/Card/Card.styles.ts +++ b/src/components/Card/Card.styles.ts @@ -26,7 +26,7 @@ export const DivStyled = styled.div>` padding: 15px; position: relative; width: 100%; - ${(p) => p.isDisabled && `opacity:70%;`} + ${(p) => p.isDisabled && 'opacity:70%;'} ${(p) => (p.selected ? selected : !p.isDisabled && hoverNotSelected)} `; diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 2922628df..97099cf91 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -49,7 +49,7 @@ const Card: React.FC = ({ svg={iconTypes.checkmark} /> )} - {!isDisabled && ( + {!isDisabled && tooltipText && ( = ({ )}
{children}
- - {title &&

{title}

} - {description && ( - {description} - )} - + {(title || description) && ( + + {title &&

{title}

} + {description && ( + {description} + )} + + )} ); }; diff --git a/src/components/Card/types.ts b/src/components/Card/types.ts index 8a960e8fa..1348ed808 100644 --- a/src/components/Card/types.ts +++ b/src/components/Card/types.ts @@ -27,7 +27,7 @@ export interface CardProps { /** * set text inside tooltip */ - tooltipText: string; + tooltipText?: string; /** * Set the state disabled state of the cart diff --git a/src/components/CreditCard/CreditCard.styles.ts b/src/components/CreditCard/CreditCard.styles.ts index 1a2d2d271..dad5c795c 100644 --- a/src/components/CreditCard/CreditCard.styles.ts +++ b/src/components/CreditCard/CreditCard.styles.ts @@ -48,7 +48,6 @@ export const DivStyledFlex = styled.div` export const DivStyledFlexText = styled.div` color: white; display: flex; - gap: 15px; `; export const DivStyledRemove = styled.div` @@ -73,7 +72,7 @@ export const PStyledText = styled.p` color: ${colors.white}; font-size: 12px; line-height: 16px; - margin: 0; + margin: 0 0 0 5px; `; const expiredStyles = css` diff --git a/src/components/CreditCard/CreditCard.tsx b/src/components/CreditCard/CreditCard.tsx index 37e44f7c7..4a1106cac 100644 --- a/src/components/CreditCard/CreditCard.tsx +++ b/src/components/CreditCard/CreditCard.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Radios } from '../Radios'; import { Logo } from '../Logo'; import { CreditCardProps } from './types'; @@ -6,10 +6,11 @@ import { DivStyledCreditCard, DivStyledFlex, DivStyledFlexText, - DivStyledRemove, PStyledDigits, PStyledText, } from './CreditCard.styles'; +import { Icon, iconTypes } from '../Icon'; +import colors from '../../styles/colors'; const CreditCard: React.FC = ({ expiresAt, @@ -17,15 +18,15 @@ const CreditCard: React.FC = ({ isExpired, lastDigits, name, + onPressed, onRemove, + pressed, brand, }: CreditCardProps) => { - const [pressed, setPressed] = useState(false); - return ( setPressed(!pressed)} + onClick={onPressed} brand={brand} pressed={pressed} > @@ -34,9 +35,13 @@ const CreditCard: React.FC = ({ checked={pressed} id={id || 'radio-credit-card'} items={['']} - onChange={() => setPressed(!pressed)} + onChange={() => {}} + /> + - {`•••• ${lastDigits}`} diff --git a/src/components/CreditCard/types.ts b/src/components/CreditCard/types.ts index 9c5fda243..1f169b0c6 100644 --- a/src/components/CreditCard/types.ts +++ b/src/components/CreditCard/types.ts @@ -33,6 +33,11 @@ export interface CreditCardProps { */ name: string; + /** + * run function when creditcard is clicked + */ + onPressed?: () => void; + /** * run function when remove icon is clicked */ diff --git a/src/components/CryptoCards/CryptoCards.test.tsx b/src/components/CryptoCards/CryptoCards.test.tsx index 27af9b3c7..a830e5cbf 100644 --- a/src/components/CryptoCards/CryptoCards.test.tsx +++ b/src/components/CryptoCards/CryptoCards.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { fireEvent, screen } from '@testing-library/react'; import { composeStories } from '@storybook/testing-react'; import * as stories from './CryptoCards.stories'; -import RGBToHex from '../../utils/rgbToHex'; +import rgbToHex from '../../utils/rgbToHex'; import color from '../../styles/colors'; import 'jest-styled-components'; import '@testing-library/jest-dom/extend-expect'; @@ -51,7 +51,7 @@ describe('Ethereum', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.black); }); @@ -106,7 +106,7 @@ describe('Binance', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.black); }); @@ -161,7 +161,7 @@ describe('Polygon', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.black); }); @@ -216,7 +216,7 @@ describe('Avalanche', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.black); }); @@ -271,7 +271,7 @@ describe('Fantom', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.black); }); @@ -326,7 +326,7 @@ describe('Arbitrum', () => { ); const styles = element && getComputedStyle(element); const bgColorHex = - styles && RGBToHex(styles.backgroundColor).toUpperCase(); + styles && rgbToHex(styles.backgroundColor).toUpperCase(); expect(bgColorHex).toBe(color.black); }); diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 25f74815b..d3e4572c7 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -5,6 +5,7 @@ import type { IconProps } from './types'; const Icon: React.FC = ({ fill = 'inherit', + onClick = () => {}, size = 18, svg, style, @@ -20,7 +21,7 @@ const Icon: React.FC = ({ return collection[key](fill, size, style); }; - return getIcon(fill, size, svg, style); + return
{getIcon(fill, size, svg, style)}
; }; export default Icon; diff --git a/src/components/Icon/collection.tsx b/src/components/Icon/collection.tsx index 6affc4ecc..2cbf0a6d8 100644 --- a/src/components/Icon/collection.tsx +++ b/src/components/Icon/collection.tsx @@ -1,5 +1,3 @@ -/* eslint-disable linebreak-style */ -/* eslint-disable no-unused-vars */ import arrowCircleDownIcon from './icons/arrow-circle-down'; import arrowCircleLeftIcon from './icons/arrow-circle-left'; import arrowCircleRightIcon from './icons/arrow-circle-right'; diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts index ca73dabf7..0089e4d7f 100644 --- a/src/components/Icon/types.ts +++ b/src/components/Icon/types.ts @@ -6,6 +6,11 @@ export interface IconProps { */ fill?: string; + /** + * Run function if Icon is clikec + */ + onClick?: () => void; + /** * set a pixel size, SVGs render as a square icons */ diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx index a3335464f..da1deffb1 100644 --- a/src/components/Input/Input.test.tsx +++ b/src/components/Input/Input.test.tsx @@ -7,7 +7,7 @@ import { composeStories } from '@storybook/testing-react'; import * as stories from './Input.stories'; import color from '../../styles/colors'; import React from 'react'; -import RGBToHex from '../../utils/rgbToHex'; +import rgbToHex from '../../utils/rgbToHex'; const { EmailInput, @@ -89,7 +89,7 @@ describe('Input - Text', () => { `[data-testid="${testDivId}"]`, ); const styles = input && getComputedStyle(input); - expect(RGBToHex(styles?.outlineColor).toUpperCase()).toBe( + expect(rgbToHex(styles?.outlineColor).toUpperCase()).toBe( color.greyLight, ); }); @@ -190,7 +190,7 @@ describe('Input - Text Error', () => { `[data-testid="${testDivId}"]`, ); const styles = input && getComputedStyle(input); - expect(RGBToHex(styles?.outlineColor).toUpperCase()).toBe(color.red); + expect(rgbToHex(styles?.outlineColor).toUpperCase()).toBe(color.red); }); it('renders label text', () => { @@ -289,7 +289,7 @@ describe('Input - Text Confirmed', () => { `[data-testid="${testDivId}"]`, ); const styles = input && getComputedStyle(input); - expect(RGBToHex(styles?.outlineColor).toUpperCase()).toBe(color.green); + expect(rgbToHex(styles?.outlineColor).toUpperCase()).toBe(color.green); }); it('renders label text', () => { @@ -389,7 +389,7 @@ describe('Input - Number', () => { `[data-testid="${testDivId}"]`, ); const styles = input && getComputedStyle(input); - expect(RGBToHex(styles?.outlineColor).toUpperCase()).toBe( + expect(rgbToHex(styles?.outlineColor).toUpperCase()).toBe( color.greyLight, ); }); @@ -501,7 +501,7 @@ describe('Input - Password', () => { `[data-testid="${testDivId}"]`, ); const styles = input && getComputedStyle(input); - expect(RGBToHex(styles?.outlineColor).toUpperCase()).toBe( + expect(rgbToHex(styles?.outlineColor).toUpperCase()).toBe( color.greyLight, ); }); @@ -603,7 +603,7 @@ describe('Input - Email', () => { `[data-testid="${testDivId}"]`, ); const styles = input && getComputedStyle(input); - expect(RGBToHex(styles?.outlineColor).toUpperCase()).toBe( + expect(rgbToHex(styles?.outlineColor).toUpperCase()).toBe( color.greyLight, ); }); @@ -705,7 +705,7 @@ describe('Input - Tel', () => { `[data-testid="${testDivId}"]`, ); const styles = input && getComputedStyle(input); - expect(RGBToHex(styles?.outlineColor).toUpperCase()).toBe( + expect(rgbToHex(styles?.outlineColor).toUpperCase()).toBe( color.greyLight, ); }); diff --git a/src/components/LinkTo/LinkTo.test.tsx b/src/components/LinkTo/LinkTo.test.tsx index 643a14ffb..f06c31774 100644 --- a/src/components/LinkTo/LinkTo.test.tsx +++ b/src/components/LinkTo/LinkTo.test.tsx @@ -4,7 +4,7 @@ import { composeStories } from '@storybook/testing-react'; import * as stories from './LinkTo.stories'; import 'jest-styled-components'; import color from '../../styles/colors'; -import RGBToHex from '../../utils/rgbToHex'; +import rgbToHex from '../../utils/rgbToHex'; const { ExternalLink, @@ -66,7 +66,7 @@ describe('LinkTo - External', () => { `[data-testid="${testId}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.blue); }); @@ -133,7 +133,7 @@ describe('LinkTo - External Icon After', () => { `[data-testid="${testId}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.blue); }); it('renders correct color for link', () => { @@ -141,7 +141,7 @@ describe('LinkTo - External Icon After', () => { `[data-testid="${testId}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.blue); }); it('renders inline so it can be mid text', () => { @@ -206,7 +206,7 @@ describe('LinkTo - Email', () => { `[data-testid="${testId}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.blue); }); it('renders inline so it can be mid text', () => { @@ -272,7 +272,7 @@ describe('LinkTo - External Icon After', () => { `[data-testid="${testId}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.blue); }); it('renders inline so it can be mid text', () => { @@ -337,7 +337,7 @@ describe('LinkTo - No text set for link', () => { `[data-testid="${testId}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.blue); }); it('renders inline so it can be mid text', () => { diff --git a/src/components/NewComp/NewComp.test.tsx b/src/components/NewComp/NewComp.test.tsx index 12319cebc..2834567a5 100644 --- a/src/components/NewComp/NewComp.test.tsx +++ b/src/components/NewComp/NewComp.test.tsx @@ -9,7 +9,7 @@ import { fireEvent } from '@testing-library/react'; // importing color and a testing tool to convert RGB to HEX import color from '../../styles/colors'; -import RGBToHex from '../../utils/rgbToHex'; +import rgbToHex from '../../utils/rgbToHex'; // importing testID from button and icon import { buttonTestId } from '../Button/Button.test'; @@ -18,7 +18,7 @@ import { iconTestId } from '../Icon/Icon.test'; // importing my stories to test const { Default, InitializeRed, UnderLinedText } = composeStories(stories); -//setting my test IDs to match my tsx +// setting my test IDs to match my tsx export const testCompId = 'test-new-comp'; const testTitle = 'test-title'; const testHeading = 'test-heading'; @@ -26,9 +26,9 @@ const testText = 'test-text'; // NOTE: the main test ID is exported incase // it is needed for another components test -/////////////////////////////////////////////////////// +// ///////////////////////////////////////////////////// // examples of basic tests of props, values and styles -/////////////////////////////////////////////////////// +// ///////////////////////////////////////////////////// // Test Story 1: Default describe('Default', () => { @@ -75,7 +75,7 @@ describe('Default', () => { `[data-testid="${testHeading}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.green); }); it('renders the correct default Text', () => { @@ -106,7 +106,7 @@ describe('Default', () => { expect(headingEle?.textContent).toBe(testTextOff); const styles = headingEle && getComputedStyle(headingEle); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.red); }); }); @@ -156,7 +156,7 @@ describe('InitializeRed', () => { `[data-testid="${testHeading}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.red); }); it('renders the correct default Text', () => { @@ -187,7 +187,7 @@ describe('InitializeRed', () => { expect(headingEle?.textContent).toBe(testTextOn); const styles = headingEle && getComputedStyle(headingEle); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.green); }); }); @@ -237,7 +237,7 @@ describe('UnderLinedText', () => { `[data-testid="${testHeading}"]`, ); const styles = element && getComputedStyle(element); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.green); }); it('renders the correct default Text', () => { @@ -268,7 +268,7 @@ describe('UnderLinedText', () => { expect(headingEle?.textContent).toBe(testTextOff); const styles = headingEle && getComputedStyle(headingEle); - const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + const colorHex = styles && rgbToHex(styles.color).toUpperCase(); expect(colorHex).toBe(color.red); }); }); diff --git a/src/components/Notification/Notification.test.tsx b/src/components/Notification/Notification.test.tsx index a900ba15a..31ad90518 100644 --- a/src/components/Notification/Notification.test.tsx +++ b/src/components/Notification/Notification.test.tsx @@ -43,21 +43,21 @@ describe('Notification - Standard - Active - Regular Text - Regular Icon', () => it('should render left icon', () => { const iconSVG = container.querySelector( - `[data-testid="${iconId}"] > svg`, + `[data-testid="${iconId}"] > div > svg`, ); expect(iconSVG).not.toBeNull(); }); it('should render close icon', () => { const closeSVGtitle = container.querySelector( - `[data-testid="${closeId}"] > svg > title`, + `[data-testid="${closeId}"] > div > svg > title`, ); expect(closeSVGtitle?.innerHTML).toBe('x icon'); }); it('should render correct', () => { const iconSVG = container.querySelector( - `[data-testid="${closeId}"] > svg`, + `[data-testid="${closeId}"] > div > svg`, ); expect(iconSVG).not.toBeNull(); }); @@ -101,14 +101,14 @@ describe('Notification - Regular - Active - Custom Text - Regular Icon', () => { it('should render left icon', () => { const iconSVG = container.querySelector( - `[data-testid="${iconId}"] > svg`, + `[data-testid="${iconId}"] > div > svg`, ); expect(iconSVG).not.toBeNull(); }); it('should render close icon', () => { const iconSVG = container.querySelector( - `[data-testid="${closeId}"] > svg`, + `[data-testid="${closeId}"] > div > svg`, ); expect(iconSVG).not.toBeNull(); }); @@ -152,14 +152,14 @@ describe('Notification - Active - Custom Text - Custom Icon', () => { it('should render left icon', () => { const iconSVG = container.querySelector( - `[data-testid="${iconId}"] > svg`, + `[data-testid="${iconId}"] > div > svg`, ); expect(iconSVG).not.toBeNull(); }); it('should render close icon', () => { const iconSVG = container.querySelector( - `[data-testid="${closeId}"] > svg`, + `[data-testid="${closeId}"] > div > svg`, ); expect(iconSVG).not.toBeNull(); }); diff --git a/src/components/Tag/Tag.test.tsx b/src/components/Tag/Tag.test.tsx index 204e5a0bb..45cd425c5 100644 --- a/src/components/Tag/Tag.test.tsx +++ b/src/components/Tag/Tag.test.tsx @@ -118,7 +118,7 @@ describe('Tag - Active Status', () => { it('should render icon', () => { const iconSVG = container.querySelector( - `[data-testid="${tagTestId}"] > svg`, + `[data-testid="${tagTestId}"] > div > svg`, ); expect(iconSVG).not.toBeNull(); }); diff --git a/src/utils/rgbToHex.ts b/src/utils/rgbToHex.ts index d450c0474..6a10857d6 100644 --- a/src/utils/rgbToHex.ts +++ b/src/utils/rgbToHex.ts @@ -1,4 +1,4 @@ -const RGBToHex = (rgb: string | undefined) => { +const rgbToHex = (rgb: string | undefined) => { if (typeof rgb == 'undefined') throw new Error(); // Choose correct separator const sep = rgb.indexOf(',') > -1 ? ',' : ' '; @@ -16,4 +16,4 @@ const RGBToHex = (rgb: string | undefined) => { return '#' + r + g + b; }; -export default RGBToHex; +export default rgbToHex;