From d1be1f85a93d9369d2d1ce72d876ca751a14449d Mon Sep 17 00:00:00 2001 From: Edgar Goetzendorff Date: Sat, 29 Aug 2020 04:28:38 +0200 Subject: [PATCH] refactor: add position type and nests dropdown content (#2750) --- src/app/components/Badge/Badge.tsx | 3 +- .../components/Dropdown/Dropdown.styles.ts | 25 +- src/app/components/Dropdown/Dropdown.tsx | 22 +- .../SearchBarPluginFilters.test.tsx.snap | 3674 ++++++++--------- .../__snapshots__/Dashboard.test.tsx.snap | 500 +-- src/types.d.ts | 2 + 6 files changed, 2126 insertions(+), 2100 deletions(-) diff --git a/src/app/components/Badge/Badge.tsx b/src/app/components/Badge/Badge.tsx index 58ab5198c1..5d69ef50f2 100644 --- a/src/app/components/Badge/Badge.tsx +++ b/src/app/components/Badge/Badge.tsx @@ -1,6 +1,7 @@ import { Icon } from "app/components/Icon"; import React from "react"; import { styled } from "twin.macro"; +import { Position } from "types"; import { defaultClasses, getStyles } from "./Badge.styles"; @@ -10,7 +11,7 @@ type BadgeProps = { icon?: string; iconWidth?: number; iconHeight?: number; - position?: "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left"; + position?: Position; }; export const Wrapper = styled.span(getStyles); diff --git a/src/app/components/Dropdown/Dropdown.styles.ts b/src/app/components/Dropdown/Dropdown.styles.ts index 1aba4ba396..71cb8cc81f 100644 --- a/src/app/components/Dropdown/Dropdown.styles.ts +++ b/src/app/components/Dropdown/Dropdown.styles.ts @@ -1,3 +1,26 @@ import tw from "twin.macro"; -export const defaultClasses = tw`mt-8 py-3 absolute z-10 bg-theme-background rounded-lg shadow-xl border-theme-neutral-contrast border-1`; +export const defaultClasses = + "mt-8 py-3 absolute z-10 bg-theme-background rounded-lg shadow-xl border-theme-neutral-contrast border-1"; + +const getPosition = (position: string): any => { + switch (position) { + case "bottom": + return tw`bottom-0`; + case "bottom-left": + return tw`bottom-0 left-0`; + case "left": + return tw`left-0 `; + case "top-left": + return tw`top-0 left-0`; + case "top": + return tw`top-0`; + case "top-right": + return tw`top-0 right-0`; + case "right": + default: + return tw`right-0`; + } +}; + +export const getStyles = ({ position }: any) => [getPosition(position)]; diff --git a/src/app/components/Dropdown/Dropdown.tsx b/src/app/components/Dropdown/Dropdown.tsx index ec301af9b8..56ad872f62 100644 --- a/src/app/components/Dropdown/Dropdown.tsx +++ b/src/app/components/Dropdown/Dropdown.tsx @@ -2,30 +2,28 @@ import { Icon } from "app/components/Icon"; import { clickOutsideHandler } from "app/hooks/click-outside"; import React, { useEffect, useRef, useState } from "react"; import { styled } from "twin.macro"; -import { Size } from "types"; +import { Position, Size } from "types"; -import { defaultClasses } from "./Dropdown.styles"; +import { defaultClasses, getStyles } from "./Dropdown.styles"; export type DropdownOption = { label: string; value: string | number; }; -type Props = { +type DropdownProps = { as?: React.ElementType; children?: React.ReactNode; onSelect?: any; options?: any; - position?: string; + position?: Position; dropdownClass?: string; toggleIcon: string; toggleSize?: Size; toggleContent?: any; }; -export const Wrapper = styled.div` - ${defaultClasses} -`; +export const Wrapper = styled.div<{ position?: string }>(getStyles); /* * Dropdown options list @@ -88,7 +86,7 @@ export const Dropdown = ({ toggleIcon, toggleSize, toggleContent, -}: Props) => { +}: DropdownProps) => { const [isOpen, setIsOpen] = useState(false); const toggle = (e: any) => { @@ -118,9 +116,11 @@ export const Dropdown = ({
{renderToggle(isOpen, toggleContent, toggleIcon, toggleSize)} - -
{renderOptions(options, select)}
-
{children}
+ +
+ {renderOptions(options, select)} + {children &&
{children}
} +
); diff --git a/src/app/components/SearchBar/SearchBarPluginFilters/__snapshots__/SearchBarPluginFilters.test.tsx.snap b/src/app/components/SearchBar/SearchBarPluginFilters/__snapshots__/SearchBarPluginFilters.test.tsx.snap index 9d94fdf243..c48c3ae89b 100644 --- a/src/app/components/SearchBar/SearchBarPluginFilters/__snapshots__/SearchBarPluginFilters.test.tsx.snap +++ b/src/app/components/SearchBar/SearchBarPluginFilters/__snapshots__/SearchBarPluginFilters.test.tsx.snap @@ -53,7 +53,7 @@ exports[`SearchBarPluginFilters should render categories 1`] = `
-
-
-
- -
+
- Category -
-
-
-
-
- Rating -
-
-
+
- - reset.svg - +
+ + reset.svg + +
+ + Reset Filters +
- - Reset Filters -
@@ -622,7 +622,7 @@ exports[`SearchBarPluginFilters should render ratings 1`] = `
-
-
-
- -
+
- Category -
-
- -
+
- - reset.svg - +
+ + reset.svg + +
+ + Reset Filters +
- - Reset Filters -
@@ -1236,480 +1236,480 @@ exports[`SearchBarPluginFilters should render with null initialValues 1`] = `
- - filters.svg - -
-
- -
-
-
    -
-
-
- -
-
- Category -
-
- - -
-
-
- Rating -
-
- + width="20" + > + + filters.svg + +
+
+ +
+
+
    +
    +
    +
    +
    + Category +
    +
    + + - +
    +
    +
    - - - - +
    + + - + + -
    -
    -
    + + + +
    + + star.svg + +
    +     + +
    + + star-outline.svg + +
    +     + +
    + + star-outline.svg + +
    +     + +
    + + star-outline.svg + +
    +     + +
    + + star-outline.svg + +
    +     +     + + & up + +     + + +
    - - reset.svg - +
    + + reset.svg + +
    + + Reset Filters +
    - - Reset Filters -
    @@ -1744,7 +1744,7 @@ exports[`SearchBarPluginFilters should render with selected values 1`] = `
    -
    -
    -
    - +
    -
    - Category -
    -
    -
    -
    -
    - Rating -
    -
    -
    +
    - - reset.svg - +
    + + reset.svg + +
    + + Reset Filters +
    - - Reset Filters -
    diff --git a/src/domains/dashboard/pages/Dashboard/__snapshots__/Dashboard.test.tsx.snap b/src/domains/dashboard/pages/Dashboard/__snapshots__/Dashboard.test.tsx.snap index 0dec4568ac..213452ec44 100644 --- a/src/domains/dashboard/pages/Dashboard/__snapshots__/Dashboard.test.tsx.snap +++ b/src/domains/dashboard/pages/Dashboard/__snapshots__/Dashboard.test.tsx.snap @@ -2517,7 +2517,7 @@ exports[`Dashboard should hide portfolio view 1`] = `
    -
    -
    -
    +
    - Filter Network -
    -
    - Select the types of networks -
    -
    -
    -
      -
      - All + Filter Network
      - -
      - - chevron-down.svg - -
      - - -
      -
    -
    -
    -
    - Your Wallets + Select the types of networks
    +
    +
    +
      + All +
      + - - All -
      chevron-down.svg
      -
      + +
    - Select the display of your wallets -
    -
    -
    -
    + class="my-8 border-t border-dotted border-1 border-theme-neutral-200" + />
    - Portfolio Chart -
    - +
    +
    + + All + +
    + + chevron-down.svg + +
    +
    +
    +
    +
    + Select the display of your wallets +
    - You can hide this unit if you like -
    -
    -
    + class="my-8 border-t border-dotted border-1 border-theme-neutral-200" + />
    - Transaction History -
    - + +
    +
    + You can hide this unit if you like +
    - You can hide this unit if you like +
    +
    + Transaction History +
    + +
    +
    + You can hide this unit if you like +
    @@ -4332,7 +4332,7 @@ exports[`Dashboard should hide transaction view 1`] = `
    -
    -
    -
    +
    - Filter Network -
    -
    - Select the types of networks -
    -
    -
    -
      -
      - All + Filter Network
      - -
      - - chevron-down.svg - -
      - - -
      -
    -
    -
    -
    - Your Wallets + Select the types of networks
    +
    +
    +
      + All +
      + - - All -
      chevron-down.svg
      -
      + +
    - Select the display of your wallets -
    -
    -
    -
    + class="my-8 border-t border-dotted border-1 border-theme-neutral-200" + />
    - Portfolio Chart -
    - +
    +
    + + All + +
    + + chevron-down.svg + +
    +
    +
    +
    +
    + Select the display of your wallets +
    - You can hide this unit if you like -
    -
    -
    + class="my-8 border-t border-dotted border-1 border-theme-neutral-200" + />
    - Transaction History -
    - + +
    +
    + You can hide this unit if you like +
    - You can hide this unit if you like +
    +
    + Transaction History +
    + +
    +
    + You can hide this unit if you like +
    diff --git a/src/types.d.ts b/src/types.d.ts index 230b3f12c0..2f9a441773 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -9,6 +9,8 @@ declare module "twin.macro" { export type Size = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "icon"; +export type Position = "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left"; + export type ButtonVariant = "solid" | "plain" | "outline" | "transparent"; export type NavbarVariant = "full" | "logo-only";