Merge branch 'main' into feature/create-link-provider

deriv-com · Nov 13, 2023 · c8d32d6 · c8d32d6
2 parents 43ebd6f + 1838b05
commit c8d32d6
Show file tree

Hide file tree

Showing 65 changed files with 211 additions and 332 deletions.
diff --git a/apps/deriv-hk/pages/_app.tsx b/apps/deriv-hk/pages/_app.tsx
@@ -1,12 +1,12 @@
 import { AppProps } from 'next/app';
 import '../styles.css';
-import { ThemeProvider } from '@deriv/quill-design';
 import {
   BuildVariantProvider,
   SharedLinkProvider,
   SharedLink,
 } from '@deriv-com/providers';
 import Link from 'next/link';
+import { BreakpointProvider, ThemeProvider } from '@deriv/quill-design';
 
 const NextSharedLink: SharedLink = ({ href, ...rest }) => {
   return <Link href={href ?? '/'} {...rest} />;
@@ -15,9 +15,11 @@ function CustomApp({ Component, pageProps }: AppProps) {
   return (
     <BuildVariantProvider buildVariant="hk">
       <ThemeProvider theme="light">
-        <SharedLinkProvider DerivLink={NextSharedLink}>
-          <Component {...pageProps} />
-        </SharedLinkProvider>
+        <BreakpointProvider>
+          <SharedLinkProvider DerivLink={NextSharedLink}>
+            <Component {...pageProps} />
+          </SharedLinkProvider>
+        </BreakpointProvider>
       </ThemeProvider>
     </BuildVariantProvider>
   );

diff --git a/libs/blocks/src/lib/accordion/accordion.spec.tsx b/libs/blocks/src/lib/accordion/accordion.spec.tsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import AccordionBlock from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const childTitle = 'This is the title';
 const subTitle = 'Subtitle goes here';

diff --git a/libs/blocks/src/lib/accordion/accordion.stories.tsx b/libs/blocks/src/lib/accordion/accordion.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import AccordionBlock from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Blocks/Accordion',

diff --git a/libs/blocks/src/lib/fast-payment/base/base.spec.tsx b/libs/blocks/src/lib/fast-payment/base/base.spec.tsx
@@ -4,7 +4,7 @@ import {
   FlagAndorraIcon,
   FlagAustraliaIcon,
   FlagBurkinaFasoIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Flags';
 import Base from './index';
 
 describe('FastPayment', () => {

diff --git a/libs/blocks/src/lib/features/card-feature/card-feature.spec.tsx b/libs/blocks/src/lib/features/card-feature/card-feature.spec.tsx
@@ -7,7 +7,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 import { CardContent } from '@deriv-com/components';
 
 const cards: CardContent[] = [

diff --git a/libs/blocks/src/lib/features/card-feature/card-feature.stories.tsx b/libs/blocks/src/lib/features/card-feature/card-feature.stories.tsx
@@ -6,7 +6,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Blocks/Features/Card',

diff --git a/libs/blocks/src/lib/features/content-slider/content-slider.stories.tsx b/libs/blocks/src/lib/features/content-slider/content-slider.stories.tsx
@@ -7,7 +7,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Blocks/Features/ContentSlider',
@@ -30,7 +30,6 @@ export const Default: Story = {
     cardSliderProps: {
       slideClasses: 'max-w-xs',
       variant: 'ContentBottom',
-      className: '!pb-general-3xl',
       cards: [
         {
           header: 'Card 1',

diff --git a/libs/blocks/src/lib/footer/footer-block.tsx b/libs/blocks/src/lib/footer/footer-block.tsx
@@ -1,5 +1,5 @@
 import { FluidContainer, Section, Text } from '@deriv/quill-design';
-import { BrandDerivWordmarkSlateIcon } from '@deriv/quill-icons';
+import { BrandDerivWordmarkSlateIcon } from '@deriv/quill-icons/Logo';
 import clsx from 'clsx';
 import { ReactNode } from 'react';
 import { SocialMediaSection } from './footer.social';

diff --git a/libs/blocks/src/lib/footer/footer.stories.tsx b/libs/blocks/src/lib/footer/footer.stories.tsx
@@ -3,7 +3,7 @@ import {
   StandaloneAppleIcon,
   StandaloneFacebookIcon,
   StandaloneInstagramIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Standalone';
 import Footer from '.';
 
 const meta = {

diff --git a/libs/blocks/src/lib/hero/content-bottom/index.tsx b/libs/blocks/src/lib/hero/content-bottom/index.tsx
@@ -15,13 +15,7 @@ const ContentBottom = ({
   children,
 }: ContentBottomProps) => {
   return (
-    <Section
-      className={clsx(
-        'py-general-4xl',
-        'bg-background-primary-container',
-        className,
-      )}
-    >
+    <Section className={clsx('py-general-4xl', className)}>
       <FluidContainer
         className={clsx(
           'flex flex-col gap-gap-3xl md:px-general-lg lg:px-general-none',

diff --git a/libs/blocks/src/lib/hero/content-less/index.tsx b/libs/blocks/src/lib/hero/content-less/index.tsx
@@ -15,13 +15,7 @@ const ContentLess = ({
   children,
 }: ContentLessProps) => {
   return (
-    <Section
-      className={clsx(
-        'py-general-4xl',
-        'bg-background-primary-container',
-        className,
-      )}
-    >
+    <Section className={clsx('py-general-4xl', className)}>
       <FluidContainer className="flex flex-col gap-gap-3xl lg:px-general-none">
         <div className="flex flex-col gap-gap-2xl">
           <Heading.H1 className="text-center">{title}</Heading.H1>

diff --git a/libs/blocks/src/lib/hero/content-limit/index.tsx b/libs/blocks/src/lib/hero/content-limit/index.tsx
@@ -24,12 +24,7 @@ const ContentLimit: React.FC<ContentLimitProps> = ({
   children,
 }) => {
   return (
-    <Section
-      className={qtMerge(
-        'relative bg-background-primary-container py-general-4xl',
-        className,
-      )}
-    >
+    <Section className={qtMerge('relative py-general-4xl', className)}>
       <FluidContainer
         className={clsx(
           'lg:flex-row',

diff --git a/libs/blocks/src/lib/live-market/index.tsx b/libs/blocks/src/lib/live-market/index.tsx
@@ -5,7 +5,7 @@ import {
   CustomLink,
 } from '@deriv-com/components';
 import { FluidContainer, Section, Text, qtMerge } from '@deriv/quill-design';
-import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons';
+import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons/Standalone';
 import clsx from 'clsx';
 import { ReactNode } from 'react';
 import { HeaderSection } from './header-section';

diff --git a/libs/blocks/src/lib/live-market/live-market.stories.tsx b/libs/blocks/src/lib/live-market/live-market.stories.tsx
@@ -6,7 +6,7 @@ import {
   MarketForexEurusdIcon,
   MarketForexGbpusdIcon,
   MarketForexUsdjpyIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Markets';
 
 const meta = {
   title: 'Blocks/LiveMarket',

diff --git a/libs/blocks/src/lib/navigation/desktop/index.tsx b/libs/blocks/src/lib/navigation/desktop/index.tsx
@@ -3,7 +3,7 @@ import DesktopNavigationWrapper from './desktop.wrapper';
 import NavList from './desktop.nav-list';
 import { NavigationContent } from '../navigation.content';
 import { useNavigation } from '@deriv-com/hooks';
-import { FlagUnitedKingdomIcon } from '@deriv/quill-icons';
+import { FlagUnitedKingdomIcon } from '@deriv/quill-icons/Flags';
 import { Text } from '@deriv/quill-design';
 
 const DesktopNavigation = ({ renderButtons, renderLogo }: NavigationProps) => {

diff --git a/libs/blocks/src/lib/navigation/mobile/mobile.header.tsx b/libs/blocks/src/lib/navigation/mobile/mobile.header.tsx
@@ -3,7 +3,7 @@ import { FluidContainer } from '@deriv/quill-design';
 import {
   StandaloneChevronLeftRegularIcon,
   StandaloneXmarkRegularIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Standalone';
 import clsx from 'clsx';
 
 export const MobileHeader = () => {

diff --git a/libs/blocks/src/lib/navigation/mobile/mobile.languages.tsx b/libs/blocks/src/lib/navigation/mobile/mobile.languages.tsx
@@ -1,5 +1,5 @@
 import { Text } from '@deriv/quill-design';
-import { FlagUnitedKingdomIcon } from '@deriv/quill-icons';
+import { FlagUnitedKingdomIcon } from '@deriv/quill-icons/Flags';
 
 export const MobileLanguages = () => {
   return (

diff --git a/libs/blocks/src/lib/navigation/mobile/mobile.nav-toggle.tsx b/libs/blocks/src/lib/navigation/mobile/mobile.nav-toggle.tsx
@@ -1,5 +1,5 @@
 import { useNavigation } from '@deriv-com/hooks';
-import { LabelPairedBarsBoldIcon } from '@deriv/quill-icons';
+import { LabelPairedBarsBoldIcon } from '@deriv/quill-icons/LabelPaired';
 
 export const MobileNavToggle = () => {
   const { toggleMobileNav } = useNavigation();

diff --git a/libs/blocks/src/lib/search/index.tsx b/libs/blocks/src/lib/search/index.tsx
@@ -1,32 +1,31 @@
-import { SearchChip } from '@deriv-com/components';
+import { SearchField } from '@deriv/quill-design';
 import { ReactNode } from 'react';
 
 export type SearchBlockProps = {
-  showSearchresults: (e: string) => void;
+  showSearchResults: (e: string) => void;
   content?: ReactNode;
   placeholder: string;
   onChange: (e: string) => void;
 };
 
 export const SearchBlock = ({
-  showSearchresults,
+  showSearchResults,
   content,
   placeholder,
   onChange,
 }: SearchBlockProps) => {
   return (
     <section className="flex w-full max-w-[1024px] flex-col gap-general-xl py-general-xl">
-      <SearchChip
+      <SearchField
         placeholder={placeholder}
-        onChange={(value) => {
-          showSearchresults(value);
+        onChange={(e) => {
+          showSearchResults(e.target.value);
 
           if (onChange) {
-            onChange(value);
+            onChange(e.target.value);
           }
         }}
-        className="w-full "
-        inputClassName="!bg-gradient-slate-110"
+        className="w-full"
       />
       {content && content}
     </section>

diff --git a/libs/blocks/src/lib/trade-types/trade-types.stories.tsx b/libs/blocks/src/lib/trade-types/trade-types.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import TradeTypeBlock from '.';
 import { CardContent } from '@deriv-com/components';
-import { IllustrativeAdvertiseIcon } from '@deriv/quill-icons';
+import { IllustrativeAdvertiseIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Blocks/TradeTypes',

diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
@@ -7,6 +7,5 @@ export * from './lib/optimized-image';
 export * from './lib/page-layout';
 export * from './lib/link';
 export * from './lib/table/account-table';
-export * from './lib/search-chip';
 export * from './lib/action-sheet/bottom-sheet';
 export * from './lib/table-cell';
diff --git a/libs/components/src/lib/accordion/base/index.tsx b/libs/components/src/lib/accordion/base/index.tsx
@@ -2,7 +2,7 @@ import styles from './base.module.css';
 
 import { Heading, qtMerge, Text } from '@deriv/quill-design';
 import { AccordionProps } from '../types';
-import { StandaloneChevronDownRegularIcon } from '@deriv/quill-icons';
+import { StandaloneChevronDownRegularIcon } from '@deriv/quill-icons/Standalone';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export const Base = ({

diff --git a/libs/components/src/lib/accordion/elevate/elevate.stories.tsx b/libs/components/src/lib/accordion/elevate/elevate.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Elevate } from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Components/Accordion/Elevate',

diff --git a/libs/components/src/lib/accordion/fill/fill.stories.tsx b/libs/components/src/lib/accordion/fill/fill.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Fill from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Components/Accordion/Fill',

diff --git a/libs/components/src/lib/accordion/flush/flush.stories.tsx b/libs/components/src/lib/accordion/flush/flush.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Flush } from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Components/Accordion/Flush',

diff --git a/libs/components/src/lib/accordion/outline/outline.stories.tsx b/libs/components/src/lib/accordion/outline/outline.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Outline from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Components/Accordion/Outline',

diff --git a/libs/components/src/lib/action-sheet/bottom-sheet/bottom-sheet.stories.tsx b/libs/components/src/lib/action-sheet/bottom-sheet/bottom-sheet.stories.tsx
@@ -5,7 +5,7 @@ import {
   StandaloneCircleDotFillIcon,
   StandaloneCircleRegularIcon,
   StandaloneXmarkRegularIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Standalone';
 import { Text } from '@deriv/quill-design';
 
 const meta = {

diff --git a/libs/components/src/lib/card-slider/card-slider.stories.tsx b/libs/components/src/lib/card-slider/card-slider.stories.tsx
@@ -5,7 +5,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Components/CardSlider',

diff --git a/libs/components/src/lib/card-slider/index.tsx b/libs/components/src/lib/card-slider/index.tsx
@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Pagination, SwiperOptions } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import { qtMerge } from '@deriv/quill-design';
 import Card, { CardVariants } from '../card';
+import { SwiperOptions } from 'swiper/types';
 
 type CardVariantType = keyof CardVariants;
 
@@ -36,16 +36,16 @@ export const CardSlider = <T extends CardVariantType>({
   slideClasses,
   swiperData,
 }: CardSliderProps<T>) => {
-  const { pagination, slidesPerView, spaceBetween, breakpoints } =
-    Object.assign(defaultSwiperProps, swiperData);
+  const { slidesPerView, spaceBetween, breakpoints } = Object.assign(
+    defaultSwiperProps,
+    swiperData,
+  );
   const CardComponent = Card[variant];
 
   return (
     <div className="flex w-full justify-center">
       <Swiper
         className={qtMerge(className)}
-        modules={[Pagination]}
-        pagination={pagination}
         slidesPerView={slidesPerView}
         spaceBetween={spaceBetween}
         breakpoints={breakpoints}

diff --git a/libs/components/src/lib/card/base/index.tsx b/libs/components/src/lib/card/base/index.tsx
@@ -1,4 +1,4 @@
-import { Heading, Text, TextSize, qtMerge } from '@deriv/quill-design';
+import { Heading, Text, qtMerge } from '@deriv/quill-design';
 import clsx from 'clsx';
 import { CardContent } from '../types';
 import CustomLink, { textSize } from '../../link';
@@ -42,7 +42,7 @@ const sizeVariantTextGap = {
   lg: 'gap-gap-xl',
 };
 
-const textSizeVariant: { [key: string]: TextSize } = {
+const textSizeVariant: { [key: string]: 'sm' | 'md' | 'lg' } = {
   sm: 'md',
   md: 'lg',
   lg: 'lg',

diff --git a/libs/components/src/lib/card/content-bottom/content-bottom.stories.tsx b/libs/components/src/lib/card/content-bottom/content-bottom.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import ContentBottomCard from '.';
 import { Button } from '@deriv/quill-design';
-import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons';
+import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Components/Card/ContentBottom',

diff --git a/libs/components/src/lib/card/content-left/content-left.stories.tsx b/libs/components/src/lib/card/content-left/content-left.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import ContentLeftCard from '.';
 import { Button } from '@deriv/quill-design';
-import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons';
+import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Components/Card/ContentLeft',

diff --git a/libs/components/src/lib/card/content-right/content-right.stories.tsx b/libs/components/src/lib/card/content-right/content-right.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import ContentRightCard from '.';
 import { Button } from '@deriv/quill-design';
-import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons';
+import { IllustrativeProtectedAndSecureIcon } from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Components/Card/ContentRight',