diff --git a/public/favicon.svg b/public/favicon.svg index 4004d18..86e7802 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,5 +1,7 @@ - - - + + + + + + - \ No newline at end of file diff --git a/src/assets/fonts/Inter-Black.ttf b/src/assets/fonts/Inter-Black.ttf new file mode 100644 index 0000000..5aecf7d Binary files /dev/null and b/src/assets/fonts/Inter-Black.ttf differ diff --git a/src/assets/fonts/Inter-Bold.ttf b/src/assets/fonts/Inter-Bold.ttf new file mode 100644 index 0000000..8e82c70 Binary files /dev/null and b/src/assets/fonts/Inter-Bold.ttf differ diff --git a/src/assets/fonts/Inter-ExtraBold.ttf b/src/assets/fonts/Inter-ExtraBold.ttf new file mode 100644 index 0000000..cb4b821 Binary files /dev/null and b/src/assets/fonts/Inter-ExtraBold.ttf differ diff --git a/src/assets/fonts/Inter-ExtraLight.ttf b/src/assets/fonts/Inter-ExtraLight.ttf new file mode 100644 index 0000000..64aee30 Binary files /dev/null and b/src/assets/fonts/Inter-ExtraLight.ttf differ diff --git a/src/assets/fonts/Inter-Light.ttf b/src/assets/fonts/Inter-Light.ttf new file mode 100644 index 0000000..9e265d8 Binary files /dev/null and b/src/assets/fonts/Inter-Light.ttf differ diff --git a/src/assets/fonts/Inter-Medium.ttf b/src/assets/fonts/Inter-Medium.ttf new file mode 100644 index 0000000..b53fb1c Binary files /dev/null and b/src/assets/fonts/Inter-Medium.ttf differ diff --git a/src/assets/fonts/Inter-Regular.ttf b/src/assets/fonts/Inter-Regular.ttf new file mode 100644 index 0000000..8d4eebf Binary files /dev/null and b/src/assets/fonts/Inter-Regular.ttf differ diff --git a/src/assets/fonts/Inter-SemiBold.ttf b/src/assets/fonts/Inter-SemiBold.ttf new file mode 100644 index 0000000..c6aeeb1 Binary files /dev/null and b/src/assets/fonts/Inter-SemiBold.ttf differ diff --git a/src/assets/fonts/Inter-Thin.ttf b/src/assets/fonts/Inter-Thin.ttf new file mode 100644 index 0000000..7aed55d Binary files /dev/null and b/src/assets/fonts/Inter-Thin.ttf differ diff --git a/src/assets/svg/arrow-big-right.svg b/src/assets/svg/arrow-big-right.svg index a9397d2..c65d50a 100644 --- a/src/assets/svg/arrow-big-right.svg +++ b/src/assets/svg/arrow-big-right.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/svg/arrow-down.svg b/src/assets/svg/arrow-down.svg index a958b41..43df6f8 100644 --- a/src/assets/svg/arrow-down.svg +++ b/src/assets/svg/arrow-down.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/svg/arrow-left.svg b/src/assets/svg/arrow-left.svg index 2d0004a..3031ddf 100644 --- a/src/assets/svg/arrow-left.svg +++ b/src/assets/svg/arrow-left.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/svg/arrow-right.svg b/src/assets/svg/arrow-right.svg index 6c67bc6..099e1b1 100644 --- a/src/assets/svg/arrow-right.svg +++ b/src/assets/svg/arrow-right.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/svg/arrow-up.svg b/src/assets/svg/arrow-up.svg new file mode 100644 index 0000000..cbcf4f1 --- /dev/null +++ b/src/assets/svg/arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/bell-notification.svg b/src/assets/svg/bell-notification.svg new file mode 100644 index 0000000..c192911 --- /dev/null +++ b/src/assets/svg/bell-notification.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/bell.svg b/src/assets/svg/bell.svg new file mode 100644 index 0000000..ab895d3 --- /dev/null +++ b/src/assets/svg/bell.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/bookmark.svg b/src/assets/svg/bookmark-filled.svg similarity index 97% rename from src/assets/svg/bookmark.svg rename to src/assets/svg/bookmark-filled.svg index 6a7aa54..1612390 100644 --- a/src/assets/svg/bookmark.svg +++ b/src/assets/svg/bookmark-filled.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/bookmark-outlined.svg b/src/assets/svg/bookmark-outlined.svg new file mode 100644 index 0000000..2c2275d --- /dev/null +++ b/src/assets/svg/bookmark-outlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/caret-down.svg b/src/assets/svg/caret-down.svg index 7018716..344bca5 100644 --- a/src/assets/svg/caret-down.svg +++ b/src/assets/svg/caret-down.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/caret-left.svg b/src/assets/svg/caret-left.svg index d1e2a96..bfcf8bb 100644 --- a/src/assets/svg/caret-left.svg +++ b/src/assets/svg/caret-left.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/caret-right.svg b/src/assets/svg/caret-right.svg index cd66b42..5224193 100644 --- a/src/assets/svg/caret-right.svg +++ b/src/assets/svg/caret-right.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/caret-up.svg b/src/assets/svg/caret-up.svg index 11d79a7..e04c3e6 100644 --- a/src/assets/svg/caret-up.svg +++ b/src/assets/svg/caret-up.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/chart.svg b/src/assets/svg/chart.svg new file mode 100644 index 0000000..d0f1221 --- /dev/null +++ b/src/assets/svg/chart.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/checkmark.svg b/src/assets/svg/checkmark.svg deleted file mode 100644 index bdc5f46..0000000 --- a/src/assets/svg/checkmark.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/assets/svg/chevrones-left.svg b/src/assets/svg/chevrones-left.svg index 8653efb..e4a4167 100644 --- a/src/assets/svg/chevrones-left.svg +++ b/src/assets/svg/chevrones-left.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/src/assets/svg/chevrones-right.svg b/src/assets/svg/chevrones-right.svg index cf1b7a3..56a289a 100644 --- a/src/assets/svg/chevrones-right.svg +++ b/src/assets/svg/chevrones-right.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/src/assets/svg/circle.svg b/src/assets/svg/circle.svg new file mode 100644 index 0000000..178698a --- /dev/null +++ b/src/assets/svg/circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/copy.svg b/src/assets/svg/copy.svg index b49085d..b056ebd 100644 --- a/src/assets/svg/copy.svg +++ b/src/assets/svg/copy.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg/delete.svg b/src/assets/svg/delete.svg index ddaed9d..552340b 100644 --- a/src/assets/svg/delete.svg +++ b/src/assets/svg/delete.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/assets/svg/edit1.svg b/src/assets/svg/edit1.svg index d4db844..c7a78b9 100644 --- a/src/assets/svg/edit1.svg +++ b/src/assets/svg/edit1.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/edit2.svg b/src/assets/svg/edit2.svg index 9ae6c74..7c0b428 100644 --- a/src/assets/svg/edit2.svg +++ b/src/assets/svg/edit2.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg/error.svg b/src/assets/svg/error.svg index 393174a..38e6756 100644 --- a/src/assets/svg/error.svg +++ b/src/assets/svg/error.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/assets/svg/eye.svg b/src/assets/svg/eye.svg index b347255..b8d684d 100644 --- a/src/assets/svg/eye.svg +++ b/src/assets/svg/eye.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg/favorite.svg b/src/assets/svg/favorite-filled.svg similarity index 100% rename from src/assets/svg/favorite.svg rename to src/assets/svg/favorite-filled.svg diff --git a/src/assets/svg/favorite-outlined.svg b/src/assets/svg/favorite-outlined.svg new file mode 100644 index 0000000..0fc5a75 --- /dev/null +++ b/src/assets/svg/favorite-outlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/file.svg b/src/assets/svg/file.svg new file mode 100644 index 0000000..e332284 --- /dev/null +++ b/src/assets/svg/file.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/filetext.svg b/src/assets/svg/filetext.svg index e085d8e..14d87f4 100644 --- a/src/assets/svg/filetext.svg +++ b/src/assets/svg/filetext.svg @@ -1,7 +1,7 @@ - - - - - + + + + + diff --git a/src/assets/svg/filter.svg b/src/assets/svg/filter.svg new file mode 100644 index 0000000..74fcf0e --- /dev/null +++ b/src/assets/svg/filter.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/flag.svg b/src/assets/svg/flag.svg new file mode 100644 index 0000000..f122280 --- /dev/null +++ b/src/assets/svg/flag.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/folder.svg b/src/assets/svg/folder.svg index 79839fc..96d3a3d 100644 --- a/src/assets/svg/folder.svg +++ b/src/assets/svg/folder.svg @@ -1,5 +1,5 @@ - - + + diff --git a/src/assets/svg/formula.svg b/src/assets/svg/formula.svg new file mode 100644 index 0000000..d1f9c19 --- /dev/null +++ b/src/assets/svg/formula.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/hamburger.svg b/src/assets/svg/hamburger.svg new file mode 100644 index 0000000..dee8b6a --- /dev/null +++ b/src/assets/svg/hamburger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/help.svg b/src/assets/svg/help.svg new file mode 100644 index 0000000..7d91a91 --- /dev/null +++ b/src/assets/svg/help.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/horizontal.svg b/src/assets/svg/horizontal.svg new file mode 100644 index 0000000..1a2a185 --- /dev/null +++ b/src/assets/svg/horizontal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/image.svg b/src/assets/svg/image.svg new file mode 100644 index 0000000..2697578 --- /dev/null +++ b/src/assets/svg/image.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/info.svg b/src/assets/svg/info.svg new file mode 100644 index 0000000..ae2c70c --- /dev/null +++ b/src/assets/svg/info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/key.svg b/src/assets/svg/key.svg index 443abf4..4df111c 100644 --- a/src/assets/svg/key.svg +++ b/src/assets/svg/key.svg @@ -1,5 +1,5 @@ - + diff --git a/src/assets/svg/left-menu.svg b/src/assets/svg/left-menu.svg new file mode 100644 index 0000000..060f967 --- /dev/null +++ b/src/assets/svg/left-menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/link.svg b/src/assets/svg/link.svg new file mode 100644 index 0000000..34a884b --- /dev/null +++ b/src/assets/svg/link.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/list.svg b/src/assets/svg/list.svg index 3525c5b..803ac04 100644 --- a/src/assets/svg/list.svg +++ b/src/assets/svg/list.svg @@ -1,8 +1,8 @@ - - - - - - + + + + + + diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg new file mode 100644 index 0000000..ee27b58 --- /dev/null +++ b/src/assets/svg/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/more.svg b/src/assets/svg/more.svg index 37ddd55..95a161a 100644 --- a/src/assets/svg/more.svg +++ b/src/assets/svg/more.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/assets/svg/palete.svg b/src/assets/svg/palete.svg new file mode 100644 index 0000000..6234601 --- /dev/null +++ b/src/assets/svg/palete.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/svg/plot.svg b/src/assets/svg/plot.svg new file mode 100644 index 0000000..44fb917 --- /dev/null +++ b/src/assets/svg/plot.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/printer.svg b/src/assets/svg/printer.svg index e947e1a..33790af 100644 --- a/src/assets/svg/printer.svg +++ b/src/assets/svg/printer.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/assets/svg/right-menu.svg b/src/assets/svg/right-menu.svg new file mode 100644 index 0000000..0958342 --- /dev/null +++ b/src/assets/svg/right-menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/scriptIcons.sh b/src/assets/svg/scriptIcons.sh new file mode 100644 index 0000000..97889a4 --- /dev/null +++ b/src/assets/svg/scriptIcons.sh @@ -0,0 +1,17 @@ +#!/bin/bash +icons="../../components/icons.tsx" +sgvnames=$(ls *.svg) + +for name in $sgvnames; do +svgInfo=$(grep $name $icons) +componentName=`echo "${name[@]^}" | sed 's/-\w/\U&/g' | tr -d '-' |sed 's/\.svg//g';` +if [ -z "$svgInfo" ] +then +echo 'export { ReactComponent as SVG'$componentName' } from "assets/svg/'$name'";' >> $icons +echo "$name Added to icons.tsx" +else +echo "$name already exist" +fi +done + + diff --git a/src/assets/svg/search.svg b/src/assets/svg/search.svg index 643d0e3..2f0ff62 100644 --- a/src/assets/svg/search.svg +++ b/src/assets/svg/search.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg/select-arrow.svg b/src/assets/svg/select-arrow.svg new file mode 100644 index 0000000..9c2dd2d --- /dev/null +++ b/src/assets/svg/select-arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/selection.svg b/src/assets/svg/selection.svg new file mode 100644 index 0000000..8b6243f --- /dev/null +++ b/src/assets/svg/selection.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/send.svg b/src/assets/svg/send.svg new file mode 100644 index 0000000..d8f6102 --- /dev/null +++ b/src/assets/svg/send.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/settings.svg b/src/assets/svg/settings.svg new file mode 100644 index 0000000..fff536c --- /dev/null +++ b/src/assets/svg/settings.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/shape.svg b/src/assets/svg/shape.svg new file mode 100644 index 0000000..263715b --- /dev/null +++ b/src/assets/svg/shape.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/share.svg b/src/assets/svg/share.svg index d641e77..0ac3e55 100644 --- a/src/assets/svg/share.svg +++ b/src/assets/svg/share.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/smile.svg b/src/assets/svg/smile.svg new file mode 100644 index 0000000..12c2690 --- /dev/null +++ b/src/assets/svg/smile.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/table.svg b/src/assets/svg/table.svg new file mode 100644 index 0000000..c9bbe88 --- /dev/null +++ b/src/assets/svg/table.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/text.svg b/src/assets/svg/text.svg new file mode 100644 index 0000000..9bd0b01 --- /dev/null +++ b/src/assets/svg/text.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/user.svg b/src/assets/svg/user.svg index 10488f3..bfbb08b 100644 --- a/src/assets/svg/user.svg +++ b/src/assets/svg/user.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg/vertical.svg b/src/assets/svg/vertical.svg new file mode 100644 index 0000000..5b6809f --- /dev/null +++ b/src/assets/svg/vertical.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/video.svg b/src/assets/svg/video.svg new file mode 100644 index 0000000..5cef7c2 --- /dev/null +++ b/src/assets/svg/video.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/AcceptCookies.tsx b/src/components/AcceptCookies.tsx new file mode 100644 index 0000000..b2fc1dd --- /dev/null +++ b/src/components/AcceptCookies.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { Button } from "./Button/Button"; +import Typography from "./typography/Typography"; + +type AcceptCookiesProps = { + onClickAccept?: () => void; + onClickCustomise?: () => void; +}; + +export function AcceptCookies({ + onClickAccept, + onClickCustomise, +}: AcceptCookiesProps) { + return ( +
+
+ + By clicking “Accept All Cookies”, you agree to the storing of cookies + on your device to enhance site navigation, analyze site usage, and + assist in our marketing efforts. + +
+
+ + +
+
+ ); +} diff --git a/src/components/BottomSheetBar.tsx b/src/components/BottomSheetBar.tsx new file mode 100644 index 0000000..6e25743 --- /dev/null +++ b/src/components/BottomSheetBar.tsx @@ -0,0 +1,58 @@ +import { useState } from "react"; +import { Dialog } from "@headlessui/react"; +import { Button } from "./Button/Button"; +import Typography from "components/typography/Typography"; + +export function BottomSheetBar() { + // The open/closed state lives outside of the Dialog and is managed by you + let [isOpen, setIsOpen] = useState(true); + + function handleDeactivate() { + alert("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"); + } + + return ( + /* + Pass `isOpen` to the `open` prop, and use `onClose` to set + the state back to `false` when the user clicks outside of + the dialog or presses the escape key. + */ + {}} + className="absolute bottom-0 bg-blue-900 text-white w-full" + > + + + By clicking “Accept All Cookies”, you agree to the storing of cookies + on your device to enhance site navigation, analyze site usage, and + assist in our marketing efforts. + + {/* + You can render additional buttons to dismiss your dialog by setting + `isOpen` to `false`. + */} +
+ + +
+ + + ); +} diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index e5fd5fa..7928c33 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -22,6 +22,7 @@ type ButtonExtentions = { /* Component props */ /* -------------------------------------------------------------------------- */ type ButtonProps = { + defaultStyle?: boolean; emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high" disabled?: boolean; } & Omit, "">; @@ -30,6 +31,7 @@ type ButtonProps = { /* Component implementation */ /* -------------------------------------------------------------------------- */ export const Button: React.FC & ButtonExtentions = ({ + defaultStyle = true, emphasis = "high", disabled = false, className, @@ -62,17 +64,24 @@ export const Button: React.FC & ButtonExtentions = ({ }, { // Define high emphasis - [`${btnEmphasis.EnableHigh}`]: !disabled && emphasis === "high", - [`${btnEmphasis.DisabledHigh}`]: disabled && emphasis === "high", - [`${btnEmphasis.GeneralHigh}`]: emphasis === "high", - // Dbtnefine medium emphasis - [`${btnEmphasis.EnabledMedium}`]: !disabled && emphasis === "medium", - [`${btnEmphasis.DisabledMedium}`]: disabled && emphasis === "medium", - [`${btnEmphasis.GeneralMedium}`]: emphasis === "medium", - // Dbtnefine low emphasis - [`${btnEmphasis.EnabledLow}`]: !disabled && emphasis === "low", - [`${btnEmphasis.DisabledLow}`]: disabled && emphasis === "low", - [`${btnEmphasis.GenerealLow}`]: emphasis === "low", + [`${btnEmphasis.EnableHigh}`]: + defaultStyle && !disabled && emphasis === "high", + [`${btnEmphasis.DisabledHigh}`]: + defaultStyle && disabled && emphasis === "high", + [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high", + // Define medium emphasis + [`${btnEmphasis.EnabledMedium}`]: + defaultStyle && !disabled && emphasis === "medium", + [`${btnEmphasis.DisabledMedium}`]: + defaultStyle && disabled && emphasis === "medium", + [`${btnEmphasis.GeneralMedium}`]: + defaultStyle && emphasis === "medium", + // Define low emphasis + [`${btnEmphasis.EnabledLow}`]: + defaultStyle && !disabled && emphasis === "low", + [`${btnEmphasis.DisabledLow}`]: + defaultStyle && disabled && emphasis === "low", + [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low", }, className, ])} diff --git a/src/components/Inputgroup.tsx b/src/components/Inputgroup.tsx index cc06015..eb62bbd 100644 --- a/src/components/Inputgroup.tsx +++ b/src/components/Inputgroup.tsx @@ -14,7 +14,7 @@ export type Props = { children?: React.ReactNode | React.ReactNode[]; } & React.HTMLProps; -const Inputgroup = ({ children }: Props) => { +const Inputgroup = ({ children, className }: Props) => { const [focused, setFocused] = useState(false); useEffect(() => {}, [focused]); const arrChildren = React.Children.toArray(children); @@ -23,7 +23,8 @@ const Inputgroup = ({ children }: Props) => {
{arrChildren.map((e) => { diff --git a/src/components/Select.stories.tsx b/src/components/Select.stories.tsx new file mode 100644 index 0000000..fe42885 --- /dev/null +++ b/src/components/Select.stories.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { useState } from "react"; + +import Select from "./Select"; + +export default { + // Title inside navigation bar + title: "Select", + // Component to test + component: Select, + // Clarifying the way how to process specific + // properties of your component and which values + // it can accept. + argTypes: {}, +} as ComponentMeta; + +/** + * This is a way to define a tempalte for your component. + * + * This template should cover all the states. + * + * In most cases you should just distruct args attribute + * on a returning component. + */ + +const Template: ComponentStory = (args) => { + const { options = [{ name: String }] } = args; + const [selected, setSelected] = useState(options[0]); + return ( +
+ + options={options} + value={selected} + onChange={setSelected} + displayValueResolver={(options) => options.name} + /> +
+ ); +}; + +/* -------------------------------------------------------------------------- */ +/* States of your component */ +/* -------------------------------------------------------------------------- */ + +export const Default = Template.bind({}); + +Default.args = { + options: [ + { name: "Wade Cooper" }, + { name: "Arlene Mccoy" }, + { name: "Devon Webb" }, + { name: "Tom Cook" }, + { name: "Tanya Fox" }, + { name: "Hellen Schmidt" }, + ], +}; diff --git a/src/components/Select.tsx b/src/components/Select.tsx new file mode 100644 index 0000000..752939c --- /dev/null +++ b/src/components/Select.tsx @@ -0,0 +1,121 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import React from "react"; +import { Fragment } from "react"; +import { Listbox, Transition } from "@headlessui/react"; +import classNames from "classnames"; +import "../index.css"; +import { ReactComponent as SelectIcon } from "../assets/svg/select-arrow.svg"; + +/* -------------------------------------------------------------------------- */ +/* Component props */ +/* -------------------------------------------------------------------------- */ + +type Props = { + options?: T[]; + disabled?: boolean; + className?: string; + value: T; + displayValueResolver?: (element: T) => any; + onChange: (element: T) => void; +} & Omit, "value" | "onChange">; + +/* -------------------------------------------------------------------------- */ +/* styles */ +/* -------------------------------------------------------------------------- */ + +const SelectButtonStyle = ` + relative w-full + cursor-default + rounded + border border-gray-50 + outline-8 + bg-white + py-2 pl-3 pr-10 text-left + hover:border-gray-300 + focus:outline-1 + focus-visible:border-gray-500 + sm:text-sm + `; + +const SelectOptionsStyle = ` + absolute z-10 mt-1 w-full max-h-56 + bg-white shadow-lg + rounded py-1 + overflow-auto + focus:outline-none + text-base + sm:text-sm + `; + +const SelectIconStyle = ` + pointer-events-none + absolute inset-y-0 right-0 + flex items-center pr-2 + `; +/* -------------------------------------------------------------------------- */ +/* Component implementation */ +/* -------------------------------------------------------------------------- */ +function Select({ + className, + options = [], + value, + onChange, + displayValueResolver, + disabled, + ...props +}: Props): JSX.Element { + return ( +
+ +
+ + {({ open }) => ( + <> + {`${ + displayValueResolver ? displayValueResolver(value) : value + }`} + + + + + )} + + + + + {options.map((option, id) => ( + + classNames( + active ? "text-gray-900 bg-blue-50" : "font-normal ", + "cursor-default select-none relative py-2 pl-3 pr-9", + selected ? "text-gray-900 bg-blue-100" : "font-normal " + ) + } + value={option} + > + {`${ + displayValueResolver ? displayValueResolver(option) : option + }`} + + ))} + + +
+ +
+ ); +} +export default Select; diff --git a/src/components/containers/modal/BottomBarAcceptCookies.tsx b/src/components/containers/modal/BottomBarAcceptCookies.tsx new file mode 100644 index 0000000..886ab5a --- /dev/null +++ b/src/components/containers/modal/BottomBarAcceptCookies.tsx @@ -0,0 +1,17 @@ +import { AcceptCookies } from "components/AcceptCookies"; +import { BottomSheetModal } from "components/containers/modal/BottomSheetModal"; +import { useState } from "react"; + +export function BottomBarAcceptCookies() { + let [isShowing, setIsShowing] = useState(true); + + function closeModal() { + setIsShowing(false); + } + + return ( + + + + ); +} diff --git a/src/components/containers/modal/BottomSheetModal.tsx b/src/components/containers/modal/BottomSheetModal.tsx new file mode 100644 index 0000000..6ac7ef5 --- /dev/null +++ b/src/components/containers/modal/BottomSheetModal.tsx @@ -0,0 +1,33 @@ +import React, { Fragment, useState } from "react"; +import { Dialog, Transition } from "@headlessui/react"; +import { AcceptCookies } from "components/AcceptCookies"; + +type ButtonSheetBarProps = { + isShowing: boolean; + onClose: () => void; + children?: React.ReactNode; +} & Omit, "">; + +export function BottomSheetModal({ + isShowing, + onClose, + children, +}: ButtonSheetBarProps) { + return ( + + {}}> + {children} + + + ); +} diff --git a/src/components/drop-down-menu/ContextMenu.tsx b/src/components/drop-down-menu/ContextMenu.tsx new file mode 100644 index 0000000..16b7c0c --- /dev/null +++ b/src/components/drop-down-menu/ContextMenu.tsx @@ -0,0 +1,116 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import React, { Fragment } from "react"; +import { Menu, Transition } from "@headlessui/react"; +import { PropsPartion } from "./ContextMenuItem"; +import classNames from "classnames"; +import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg"; +type ChildType = React.ReactElement; +type ChildrenType = ChildType[] | ChildType; + +/* -------------------------------------------------------------------------- */ +/* Component props */ +/* -------------------------------------------------------------------------- */ + +type MenuProps = { + emphasis?: "high" | "low"; + disabled?: boolean; + className?: string | undefined; + button: React.ReactNode; + children: ChildrenType; +}; +/* -------------------------------------------------------------------------- */ +/* Styles */ +/* -------------------------------------------------------------------------- */ + +const MenuButtonStyle = ` +inline-flex +justify-center w-full +cursor-default +rounded +border border-gray-100 +outline-8 +bg-white +py-2 +pl-4 +pr-1 +text-base`; + +const MenuItemStyle = ` +absolute +left-0 +mt-2 w-60 +origin-top-left +rounded +bg-white +shadow-lg +focus:outline-none +py-2 px-4 sm:text-sm`; + +/* -------------------------------------------------------------------------- */ +/* Component implementation */ +/* -------------------------------------------------------------------------- */ +/** +* Use width ContextMenuAction.tsx , for example: +* +* alert('click')} +* > +* ... +* +*/ +export default function ContextMenu({ + button, + children, + className, + emphasis = "low", +}: MenuProps) { + return ( + + {({ open }) => ( + <> + + {button} + + + + + {children} + + + + )} + + ); +} diff --git a/src/components/drop-down-menu/ContextMenuAction.tsx b/src/components/drop-down-menu/ContextMenuAction.tsx new file mode 100644 index 0000000..2023fb1 --- /dev/null +++ b/src/components/drop-down-menu/ContextMenuAction.tsx @@ -0,0 +1,36 @@ +import classNames from "classnames"; +import React from "react"; + + +type Props = { + action: Function; + caption: string; + disabled?: boolean; + icon?: React.ReactNode; + className?: string | undefined; +}; + +export default function ContextMenuAction({ + action, + caption, + disabled, + icon, + className, +}: Props) { + return ( + + + ); +} + diff --git a/src/components/drop-down-menu/ContextMenuItem.tsx b/src/components/drop-down-menu/ContextMenuItem.tsx new file mode 100644 index 0000000..eb444b6 --- /dev/null +++ b/src/components/drop-down-menu/ContextMenuItem.tsx @@ -0,0 +1,27 @@ +import {Menu} from '@headlessui/react'; +import React from 'react'; + +export type PropsPartion = { + disabled?: boolean | undefined; + active?: boolean | undefined; +}; + +type Props = { + children: React.ReactElement< + any & PropsPartion + >; +} & PropsPartion; + +/** + * Context menu item component + * @return {JSX.Element} + */ +export default function ContextMenuItem({children, ...props}: Props) { + return ( + + {(params) => { + return React.cloneElement(children, params); + }} + + ); +} diff --git a/src/components/drop-down-menu/MenuIcons.tsx b/src/components/drop-down-menu/MenuIcons.tsx new file mode 100644 index 0000000..5a1c794 --- /dev/null +++ b/src/components/drop-down-menu/MenuIcons.tsx @@ -0,0 +1,101 @@ +import React from "react"; + + +/* -------------------------------------------------------------------------- */ +/* Icons for header menu as our disign */ +/* -------------------------------------------------------------------------- */ + + +export const Publications = ( + + + + + +); + +export const MyFavorite = ( + + + +); +export const MyCollection = ( + + + + + +); + +export const RecentViewed = ( + + + + +); diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 0e22b92..e480c84 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -31,3 +31,35 @@ export { ReactComponent as SVGShare } from "assets/svg/share.svg"; export { ReactComponent as SVGUser } from "assets/svg/user.svg"; export { ReactComponent as SVGXMark } from "assets/svg/xmark.svg"; export { ReactComponent as SVGCheckmark } from "assets/svg/checkmark.svg"; +export { ReactComponent as SVGArrowUp } from "assets/svg/arrow-up.svg"; +export { ReactComponent as SVGBellNotification } from "assets/svg/bell-notification.svg"; +export { ReactComponent as SVGBell } from "assets/svg/bell.svg"; +export { ReactComponent as SVGBookmarkFilled } from "assets/svg/bookmark-filled.svg"; +export { ReactComponent as SVGBookmarkOutlined } from "assets/svg/bookmark-outlined.svg"; +export { ReactComponent as SVGChart } from "assets/svg/chart.svg"; +export { ReactComponent as SVGCircle } from "assets/svg/circle.svg"; +export { ReactComponent as SVGFavoriteFilled } from "assets/svg/favorite-filled.svg"; +export { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg"; +export { ReactComponent as SVGFile } from "assets/svg/file.svg"; +export { ReactComponent as SVGFilter } from "assets/svg/filter.svg"; +export { ReactComponent as SVGFlag } from "assets/svg/flag.svg"; +export { ReactComponent as SVGFormula } from "assets/svg/formula.svg"; +export { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg"; +export { ReactComponent as SVGHelp } from "assets/svg/help.svg"; +export { ReactComponent as SVGHorizontal } from "assets/svg/horizontal.svg"; +export { ReactComponent as SVGImage } from "assets/svg/image.svg"; +export { ReactComponent as SVGInfo } from "assets/svg/info.svg"; +export { ReactComponent as SVGLeftMenu } from "assets/svg/left-menu.svg"; +export { ReactComponent as SVGLink } from "assets/svg/link.svg"; +export { ReactComponent as SVGLogo } from "assets/svg/logo.svg"; +export { ReactComponent as SVGPalete } from "assets/svg/palete.svg"; +export { ReactComponent as SVGPlot } from "assets/svg/plot.svg"; +export { ReactComponent as SVGRightMenu } from "assets/svg/right-menu.svg"; +export { ReactComponent as SVGSelection } from "assets/svg/selection.svg"; +export { ReactComponent as SVGSend } from "assets/svg/send.svg"; +export { ReactComponent as SVGSettings } from "assets/svg/settings.svg"; +export { ReactComponent as SVGShape } from "assets/svg/shape.svg"; +export { ReactComponent as SVGSmile } from "assets/svg/smile.svg"; +export { ReactComponent as SVGTable } from "assets/svg/table.svg"; +export { ReactComponent as SVGVertical } from "assets/svg/vertical.svg"; +export { ReactComponent as SVGVideo } from "assets/svg/video.svg"; diff --git a/src/index.css b/src/index.css index 34ea437..d0ce2d6 100644 --- a/src/index.css +++ b/src/index.css @@ -49,9 +49,81 @@ font-display: swap; } + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Black.ttf") format("truetype"); + font-weight: 900; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-ExtraBold.ttf") format("truetype"); + font-weight: 800; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-ExtraLight.ttf") format("truetype"); + font-weight: 200; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Thin.ttf") format("truetype"); + font-weight: 100; + font-style: normal; + font-display: swap; + } + html { - font-family: "Poppins", -apple-system, "Segoe UI", system-ui, "Roboto", - "Helvetica Neue", "Arial"; + font-family: "Inter", "Poppins", -apple-system, "Segoe UI", system-ui, + "Roboto", "Helvetica Neue", "Arial"; color: var(--color-text); } @@ -78,16 +150,16 @@ --color-serv-800: 9 11 16; --color-serv-900: 6 7 10; /* ---------------------------------- Blue ---------------------------------- */ - --color-blue-50: 240 247 254; - --color-blue-100: 221 237 254; - --color-blue-200: 182 216 252; - --color-blue-300: 137 192 250; - --color-blue-400: 74 158 247; - --color-blue-500: 9 109 217; - --color-blue-600: 8 99 196; - --color-blue-700: 7 87 171; - --color-blue-800: 6 69 137; - --color-blue-900: 4 49 98; + --color-blue-50: 230 247 255; + --color-blue-100: 186 231 255; + --color-blue-200: 145 213 255; + --color-blue-300: 89 192 255; + --color-blue-400: 64 169 255; + --color-blue-500: 24 144 255; + --color-blue-600: 9 109 217; + --color-blue-700: 0 80 179; + --color-blue-800: 0 58 140; + --color-blue-900: 0 39 102; /* ---------------------------------- Gray ---------------------------------- */ --color-gray-50: 250 250 250; --color-gray-75: 240 240 240;