From 26e18a0c1b27f27a6a051071463584ee5110396e Mon Sep 17 00:00:00 2001 From: fritzschoff Date: Mon, 4 Mar 2024 12:59:06 +0000 Subject: [PATCH] format svgs --- .prettierrc | 16 +++--- src/components/Accordion/Accordion.tsx | 11 +++- src/components/Accordion/AccordionItem.tsx | 10 ++-- .../Accordion/__test__/index.spec.tsx | 54 ++++++++++++------- src/svg/Arrow.tsx | 2 +- src/svg/GradientLine.tsx | 8 ++- src/svg/PHashed.tsx | 5 +- src/svg/PParafi.tsx | 16 +++++- src/svg/PThreeArrows.tsx | 10 +++- src/svg/PXbto.tsx | 5 +- src/svg/Plus.tsx | 8 ++- src/svg/PoweredByBackground.tsx | 29 ++++++++-- src/svg/PoweredByBackgroundMobile.tsx | 29 ++++++++-- src/svg/PoweredByBlur.tsx | 24 +++++++-- src/svg/PoweredBySNXLogo.tsx | 5 +- src/svg/PriceArrow.tsx | 10 +++- src/svg/SNXWave.tsx | 11 +++- src/svg/Spotlights.tsx | 24 +++++++-- 18 files changed, 213 insertions(+), 64 deletions(-) diff --git a/.prettierrc b/.prettierrc index 7fa75213..d552174c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,10 +1,10 @@ { - "printWidth": 80, - "tabWidth": 2, - "useTabs": true, - "semi": true, - "singleQuote": true, - "trailingComma": "all", - "arrowParens": "avoid", - "endOfLine": "lf" + "printWidth": 80, + "tabWidth": 2, + "useTabs": true, + "semi": true, + "singleQuote": true, + "trailingComma": "all", + "arrowParens": "avoid", + "endOfLine": "lf" } diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index ba8abb25..9cf93f4e 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -2,7 +2,10 @@ import { FlexDivCol } from '../../styles/common'; import styled from 'styled-components'; import AccordionItem, { AccordionItemProps } from './AccordionItem'; -export type AccordionItemsType = Omit; +export type AccordionItemsType = Omit< + AccordionItemProps, + 'onHeaderClick' | 'open' | 'isLast' +>; export interface AccordionProps { items: AccordionItemsType[]; @@ -10,7 +13,11 @@ export interface AccordionProps { activeIndex: number; } -export default function Accordion({ items, onAccordionItemChange, activeIndex }: AccordionProps) { +export default function Accordion({ + items, + onAccordionItemChange, + activeIndex, +}: AccordionProps) { return ( {items.map((item, index) => { diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx index 8fbe3544..d7b1bc4a 100644 --- a/src/components/Accordion/AccordionItem.tsx +++ b/src/components/Accordion/AccordionItem.tsx @@ -30,7 +30,9 @@ export default function AccordionItem({ {open && ( - {descriptions} + + {descriptions} + {buttons} )} @@ -79,7 +81,8 @@ const Circle = styled.span` left: -4px; width: 10px; height: 10px; - border: 2px solid ${({ active, theme }) => (active ? theme.colors.cyan : theme.colors.gray50)}; + border: 2px solid + ${({ active, theme }) => (active ? theme.colors.cyan : theme.colors.gray50)}; border-radius: 50%; `; @@ -91,7 +94,8 @@ const LastCircle = styled(Circle)` const AccordionItemHeadline = styled.h3` ${({ theme }) => theme.fonts.smallHeadline}; - color: ${({ active, theme }) => (active ? theme.colors.cyan : theme.colors.gray50)}; + color: ${({ active, theme }) => + active ? theme.colors.cyan : theme.colors.gray50}; margin-left: 24px; line-height: 19px; text-align: start; diff --git a/src/components/Accordion/__test__/index.spec.tsx b/src/components/Accordion/__test__/index.spec.tsx index 74d15dc6..25e16b80 100644 --- a/src/components/Accordion/__test__/index.spec.tsx +++ b/src/components/Accordion/__test__/index.spec.tsx @@ -17,11 +17,17 @@ const queryTextsDictionary = { const items: AccordionItemsType[] = [ { - descriptions: [{queryTextsDictionary.descriptions.notVisible}], + descriptions: [ + + {queryTextsDictionary.descriptions.notVisible} + , + ], title: queryTextsDictionary.titles.first, }, { - descriptions: [{queryTextsDictionary.descriptions.visible}], + descriptions: [ + {queryTextsDictionary.descriptions.visible}, + ], title: queryTextsDictionary.titles.second, }, ]; @@ -43,10 +49,12 @@ describe('Accordion', () => { onAccordionItemChange={onAccordionItemChange} items={items} /> - + , ); - expect(screen.queryByText(queryTextsDictionary.descriptions.notVisible)).toBeNull(); + expect( + screen.queryByText(queryTextsDictionary.descriptions.notVisible), + ).toBeNull(); }); test('should render the accordion item description if it have the active index', () => { @@ -58,10 +66,12 @@ describe('Accordion', () => { onAccordionItemChange={onAccordionItemChange} items={items} /> - + , ); - expect(screen.queryByText(queryTextsDictionary.descriptions.notVisible)).toBeInTheDocument(); + expect( + screen.queryByText(queryTextsDictionary.descriptions.notVisible), + ).toBeInTheDocument(); }); test('should render the all the existing titles', () => { @@ -72,11 +82,11 @@ describe('Accordion', () => { onAccordionItemChange={onAccordionItemChange} items={items} /> - + , ); - const allTitles = items.map((item) => screen.queryByText(item.title)); + const allTitles = items.map(item => screen.queryByText(item.title)); expect(allTitles.length).toBe(2); - allTitles.forEach((title) => expect(title).toBeInTheDocument()); + allTitles.forEach(title => expect(title).toBeInTheDocument()); }); test('should call the onAccordionItemChange when the title of the accordion item is clicked', async () => { @@ -88,7 +98,7 @@ describe('Accordion', () => { onAccordionItemChange={mockHandleClick} items={items} /> - + , ); userEvent.click(screen.queryByText(queryTextsDictionary.titles.first)!); @@ -104,10 +114,10 @@ describe('Accordion', () => { onAccordionItemChange={onAccordionItemChange} items={items} /> - + , ); expect( - screen.queryByText(queryTextsDictionary.descriptions.notVisible) + screen.queryByText(queryTextsDictionary.descriptions.notVisible), ).not.toBeInTheDocument(); userEvent.click(screen.queryByText(queryTextsDictionary.titles.first)!); @@ -118,10 +128,12 @@ describe('Accordion', () => { onAccordionItemChange={onAccordionItemChange} items={items} /> - + , ); - expect(screen.queryByText(queryTextsDictionary.descriptions.notVisible)).toBeInTheDocument(); + expect( + screen.queryByText(queryTextsDictionary.descriptions.notVisible), + ).toBeInTheDocument(); }); test('should not render any other description when the already active title is clicked', async () => { @@ -132,9 +144,11 @@ describe('Accordion', () => { onAccordionItemChange={onAccordionItemChange} items={items} /> - + , ); - expect(screen.queryByText(queryTextsDictionary.descriptions.visible)).toBeInTheDocument(); + expect( + screen.queryByText(queryTextsDictionary.descriptions.visible), + ).toBeInTheDocument(); userEvent.click(screen.queryByText(queryTextsDictionary.titles.second)!); rerender( @@ -144,12 +158,14 @@ describe('Accordion', () => { onAccordionItemChange={onAccordionItemChange} items={items} /> - + , ); expect( - screen.queryByText(queryTextsDictionary.descriptions.notVisible) + screen.queryByText(queryTextsDictionary.descriptions.notVisible), ).not.toBeInTheDocument(); - expect(screen.queryByText(queryTextsDictionary.descriptions.visible)).toBeInTheDocument(); + expect( + screen.queryByText(queryTextsDictionary.descriptions.visible), + ).toBeInTheDocument(); }); }); diff --git a/src/svg/Arrow.tsx b/src/svg/Arrow.tsx index ba0ad3b9..c24ed0f5 100644 --- a/src/svg/Arrow.tsx +++ b/src/svg/Arrow.tsx @@ -3,7 +3,7 @@ import { theme } from 'src/styles/theme'; interface ArrowProps extends Props { disabled?: boolean; - fill?: keyof typeof theme['colors']; + fill?: keyof (typeof theme)['colors']; } const SvgArrow = ({ disabled, fill, ...props }: ArrowProps): JSX.Element => { diff --git a/src/svg/GradientLine.tsx b/src/svg/GradientLine.tsx index 2a4a4d5b..9e197905 100644 --- a/src/svg/GradientLine.tsx +++ b/src/svg/GradientLine.tsx @@ -8,7 +8,13 @@ export default function GradientLine({ ...rest }) { xmlns="http://www.w3.org/2000/svg" {...rest} > - + { width={1} height={1} > - + { d="M14.492 57.907c5.844-12.832 11.715-25.652 17.492-38.511.638-1.42 1.368-1.942 2.993-1.924 7.342.086 14.686.064 22.029.015 1.376-.01 2.265.186 2.887 1.593C70.06 42.113 80.293 65.12 90.5 88.137c.114.257.081.574.15 1.124-4.345 0-8.608-.089-12.864.04-1.99.06-2.113-1.37-2.6-2.47-8.034-18.142-16.095-36.274-23.96-54.483-1.03-2.383-2.244-3.226-4.814-3.007-2.605.223-5.045-.495-6.414 3.06-3.32 8.624-7.291 17.018-11 25.505l-14.507.001zM18.172 70.376l-9.52.001L0 89.263c4.766 0 8.988-.066 13.206.038 1.4.034 2.08-.425 2.583-1.583 2.514-5.793 5.082-11.565 7.632-17.344l-5.249.002zM165.453 38.226c2.819-6.33 5.65-12.653 8.437-18.996.307-.7.659-.957 1.443-.948 3.541.042 7.083.031 10.624.007.664-.005 1.093.091 1.393.785 4.904 11.362 9.839 22.71 14.762 34.063.055.126.04.282.073.554-2.096 0-4.152-.044-6.205.02-.959.03-1.019-.676-1.254-1.218-3.875-8.95-7.762-17.893-11.556-26.874-.496-1.175-1.082-1.591-2.322-1.483-1.256.11-2.433-.245-3.093 1.51-1.601 4.253-3.516 8.393-5.305 12.58h-6.997zM275.148 38.226c2.819-6.33 5.651-12.653 8.437-18.996.308-.7.659-.957 1.444-.948 3.541.042 7.082.031 10.624.007.664-.005 1.092.091 1.392.785 4.904 11.362 9.84 22.71 14.763 34.063.055.126.039.282.072.554-2.096 0-4.152-.044-6.204.02-.96.03-1.019-.676-1.254-1.218-3.875-8.95-7.763-17.893-11.557-26.874-.496-1.175-1.082-1.591-2.321-1.483-1.257.11-2.433-.245-3.093 1.51-1.602 4.253-3.517 8.393-5.306 12.58h-6.997zM134.412 37.319c1.92 0 3.249-.17 3.987-.513.737-.341 1.107-.968 1.107-1.879v-9.852c0-.911-.37-1.537-1.107-1.879-.738-.342-2.067-.512-3.987-.512h-10.776v14.635h10.776zm-10.776 16.23h-7.382V17.957h18.085c3.296 0 5.868.38 7.713 1.14 1.846.759 3.175 2.002 3.987 3.729.812 1.728 1.218 4.11 1.218 7.147 0 4.252-.912 7.289-2.732 9.111-1.82 1.823-4.847 2.734-9.079 2.734h-11.81v11.73zM224.888 36.465h11.128c1.916 0 3.243-.171 3.98-.513.736-.342 1.105-.968 1.105-1.88v-8.997c0-.911-.369-1.537-1.105-1.879-.737-.342-2.064-.512-3.98-.512h-11.128v13.78zm18.129 17.084l-7.664-12.586h-10.465V53.55h-7.368V17.957h18.423c3.29 0 5.858.38 7.701 1.14 1.842.759 3.168 2.002 3.979 3.729.81 1.728 1.216 4.11 1.216 7.147 0 2.924-.479 5.21-1.437 6.862-.958 1.651-2.518 2.8-4.679 3.445l8.327 13.269h-8.033zM337.458 53.549h-7.384V17.957h25.106l-.813 4.727h-16.909v11.56h14.768v4.498h-14.768V53.55z" fill="#fff" /> - + - + diff --git a/src/svg/PThreeArrows.tsx b/src/svg/PThreeArrows.tsx index 2820f8fe..6ea0bd7f 100644 --- a/src/svg/PThreeArrows.tsx +++ b/src/svg/PThreeArrows.tsx @@ -22,7 +22,10 @@ const SvgPThreeArrows = (props: Props): JSX.Element => { - + { - + { width={1} height={1} > - + { return ( - + - + - - + + - - + + - + - - + + - - + + - - + + - - + + diff --git a/src/svg/PoweredBySNXLogo.tsx b/src/svg/PoweredBySNXLogo.tsx index ef3db680..b261aeb7 100644 --- a/src/svg/PoweredBySNXLogo.tsx +++ b/src/svg/PoweredBySNXLogo.tsx @@ -162,7 +162,10 @@ export default function PoweredBySNXLogo(props: Props) { fill="url(#paint29_linear_1590:70463)" /> - + { +const PriceArrow = ({ + priceChange, + ...props +}: PriceArrowProps): JSX.Element => { return ( viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg" - style={{ marginTop: 2, transform: priceChange >= 0 ? 'rotate(0)' : 'rotate(180deg)' }} + style={{ + marginTop: 2, + transform: priceChange >= 0 ? 'rotate(0)' : 'rotate(180deg)', + }} {...props} > - - + + { colorInterpolationFilters="sRGB" > - - + + @@ -60,8 +68,16 @@ export const CyanSpotlight = ({ ...rest }) => { colorInterpolationFilters="sRGB" > - - + +