From faac36c95174c702264aa8583251e6017f37f387 Mon Sep 17 00:00:00 2001 From: Deryk DeGuzman Date: Thu, 21 Nov 2024 15:06:07 +0000 Subject: [PATCH] chore: migrate vui-source changes to v3.3.1 --- package.json | 6 +- src/docs/Docs.tsx | 1 + src/docs/Page.tsx | 3 +- src/docs/pages.tsx | 12 +- src/docs/pages/button/IconButton.tsx | 11 +- src/docs/pages/button/Link.tsx | 9 +- src/docs/pages/button/Sizes.tsx | 10 +- src/docs/pages/code/FullHeight.tsx | 89 +++++------ src/docs/pages/formGroup/FormGroup.tsx | 18 ++- src/docs/pages/formGroup/NonFormElement.tsx | 19 +++ src/docs/pages/formGroup/index.tsx | 9 ++ src/docs/pages/icon/InlineText.tsx | 15 ++ src/docs/pages/icon/index.tsx | 7 + src/docs/pages/infoList/InfoList.tsx | 28 ++++ src/docs/pages/infoList/index.tsx | 13 ++ src/docs/pages/infoMenu/InfoMenu.tsx | 62 ++++++++ src/docs/pages/infoMenu/index.tsx | 13 ++ src/docs/pages/modal/PrimaryModal.tsx | 3 +- src/docs/pages/optionsButton/Primary.tsx | 2 + src/docs/pages/optionsButton/Secondary.tsx | 2 + src/docs/pages/popover/Popover.tsx | 87 ++++++---- src/docs/pages/searchSelect/SingleSelect.tsx | 43 +++++ src/docs/pages/searchSelect/index.tsx | 9 ++ src/docs/pages/statList/StatList.tsx | 40 +++-- src/docs/pages/summary/Summary.tsx | 2 +- src/docs/pages/table/Table.tsx | 26 ++- src/docs/pages/timeline/Timeline.tsx | 150 ++++++++++++++++++ src/docs/pages/timeline/index.tsx | 13 ++ src/docs/pages/validation/Validation.tsx | 16 +- .../components/app/appSideNav/AppSideNav.tsx | 2 +- .../app/appSideNav/AppSideNavTree.tsx | 1 + src/lib/components/button/BaseButton.tsx | 17 +- src/lib/components/button/IconButton.tsx | 28 +++- src/lib/components/callout/Callout.tsx | 1 + src/lib/components/chat/Chat.tsx | 9 ++ src/lib/components/chat/ChatPanel.tsx | 1 + src/lib/components/chat/ChatTurn.tsx | 1 + src/lib/components/code/Code.tsx | 84 ++++++++-- src/lib/components/code/_index.scss | 27 +++- src/lib/components/drawer/Drawer.tsx | 1 + src/lib/components/drawer/_index.scss | 12 +- src/lib/components/form/index.ts | 1 + src/lib/components/form/input/TextInput.tsx | 2 +- src/lib/components/form/textArea/TextArea.tsx | 4 +- src/lib/components/form/textArea/_index.scss | 4 + src/lib/components/formGroup/FormGroup.tsx | 23 ++- src/lib/components/icon/Icon.tsx | 4 +- src/lib/components/icon/_index.scss | 1 + src/lib/components/index.ts | 13 +- src/lib/components/infoList/InfoList.tsx | 21 +++ src/lib/components/infoList/_index.scss | 17 ++ src/lib/components/infoMenu/InfoMenu.tsx | 28 ++++ src/lib/components/infoMenu/_index.scss | 8 + src/lib/components/link/types.ts | 3 + src/lib/components/modal/Modal.tsx | 1 + src/lib/components/modal/_index.scss | 27 ++-- .../components/notification/Notification.tsx | 1 + .../optionsButton/OptionsButton.tsx | 5 +- src/lib/components/popover/Popover.tsx | 31 ++-- .../components/screenBlock/ScreenBlock.tsx | 8 +- src/lib/components/screenBlock/_index.scss | 24 +++ .../components/searchSelect/SearchSelect.tsx | 17 +- src/lib/components/statList/StatList.tsx | 31 ++-- src/lib/components/statList/_index.scss | 10 ++ src/lib/components/summary/Summary.tsx | 4 +- src/lib/components/table/Table.tsx | 50 +++--- src/lib/components/table/TableBulkActions.tsx | 1 + src/lib/components/table/_index.scss | 18 +++ src/lib/components/timeline/Timeline.tsx | 17 ++ src/lib/components/timeline/TimelineItem.tsx | 21 +++ src/lib/components/timeline/_index.scss | 26 +++ src/lib/components/timeline/index.ts | 2 + src/lib/components/typography/_title.scss | 12 +- src/lib/sassUtils/_depth.scss | 3 +- src/lib/sassUtils/_typography.scss | 1 + src/lib/styles/styles.scss | 4 +- 76 files changed, 1114 insertions(+), 231 deletions(-) create mode 100644 src/docs/pages/formGroup/NonFormElement.tsx create mode 100644 src/docs/pages/icon/InlineText.tsx create mode 100644 src/docs/pages/infoList/InfoList.tsx create mode 100644 src/docs/pages/infoList/index.tsx create mode 100644 src/docs/pages/infoMenu/InfoMenu.tsx create mode 100644 src/docs/pages/infoMenu/index.tsx create mode 100644 src/docs/pages/searchSelect/SingleSelect.tsx create mode 100644 src/docs/pages/timeline/Timeline.tsx create mode 100644 src/docs/pages/timeline/index.tsx create mode 100644 src/lib/components/infoList/InfoList.tsx create mode 100644 src/lib/components/infoList/_index.scss create mode 100644 src/lib/components/infoMenu/InfoMenu.tsx create mode 100644 src/lib/components/infoMenu/_index.scss create mode 100644 src/lib/components/timeline/Timeline.tsx create mode 100644 src/lib/components/timeline/TimelineItem.tsx create mode 100644 src/lib/components/timeline/_index.scss create mode 100644 src/lib/components/timeline/index.ts diff --git a/package.json b/package.json index 29f860e..3acc828 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vectara/vectara-ui", - "version": "1.0.1", + "version": "3.3.1", "homepage": "https://vectara.github.io/vectara-ui/", "description": "Vectara's design system, codified as a React and Sass component library", "author": "Vectara", @@ -28,11 +28,11 @@ "buildDocs": "BUILD_PATH='./docs/public' PUBLIC_URL='.' react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "buildLib": "npx tsc --project tsconfig.lib.json && npm run copyStyleUtils && npm run copyComponentStyles && npm run compileCss", + "build": "npx tsc --project tsconfig.lib.json && npm run copyStyleUtils && npm run copyComponentStyles && npm run compileCss", "compileCss": "sass --no-source-map src/lib/styles/styles.scss lib/styles/index.css", "copyStyleUtils": "copyfiles -u 2 src/lib/sassUtils/* lib", "copyComponentStyles": "copyfiles -u 2 src/lib/components/index.scss lib && copyfiles -u 2 src/lib/components/**/*.scss lib && copyfiles -u 2 src/lib/components/**/**/*.scss lib", - "publishLib": "npm run buildLib && npm publish --access public" + "publish": "npm run build && npm publish --access public" }, "dependencies": { "@testing-library/jest-dom": "^5.16.5", diff --git a/src/docs/Docs.tsx b/src/docs/Docs.tsx index cf49daa..d78f738 100644 --- a/src/docs/Docs.tsx +++ b/src/docs/Docs.tsx @@ -81,6 +81,7 @@ const DocsContent = () => { target="_blank" color="neutral" size="m" + aria-label="Vectara UI GitHub repository" icon={ diff --git a/src/docs/Page.tsx b/src/docs/Page.tsx index 7f9f57a..10ee859 100644 --- a/src/docs/Page.tsx +++ b/src/docs/Page.tsx @@ -31,6 +31,7 @@ export const Page = ({ name, examples }: { name: string; examples: ExampleType[] @@ -42,8 +43,8 @@ export const Page = ({ name, examples }: { name: string; examples: ExampleType[] - {" "} diff --git a/src/docs/pages.tsx b/src/docs/pages.tsx index c0a0e6a..c716d24 100644 --- a/src/docs/pages.tsx +++ b/src/docs/pages.tsx @@ -1,6 +1,5 @@ // Components import { accordion } from "./pages/accordion"; -import { accountMenu } from "./pages/accountMenu"; import { app } from "./pages/app"; import { badge } from "./pages/badge"; import { button } from "./pages/button"; @@ -16,6 +15,8 @@ import { formGroup } from "./pages/formGroup"; import { grid } from "./pages/grid"; import { horizontalRule } from "./pages/horizontalRule"; import { icon } from "./pages/icon"; +import { infoList } from "./pages/infoList"; +import { infoMenu } from "./pages/infoMenu"; import { infoTable } from "./pages/infoTable"; import { input } from "./pages/input"; import { label } from "./pages/label"; @@ -45,6 +46,7 @@ import { table } from "./pages/table"; import { tabs } from "./pages/tabs"; import { text } from "./pages/text"; import { textArea } from "./pages/textArea"; +import { timeline } from "./pages/timeline"; import { toggle } from "./pages/toggle"; import { topicButton } from "./pages/topicButton"; import { validation } from "./pages/validation"; @@ -63,19 +65,19 @@ export const categories: Category[] = [ }, { name: "Application", - pages: [app, accountMenu, drawer, modal, notifications] + pages: [app, drawer, modal, notifications] }, { name: "Info", - pages: [table, infoTable, statList, list] + pages: [table, infoTable, infoList, statList, list] }, { name: "Layout", - pages: [tabs, accordion, popover, flex, grid, spacer, card, horizontalRule] + pages: [tabs, accordion, popover, infoMenu, flex, grid, spacer, card, horizontalRule] }, { name: "Content", - pages: [badge, status, callout, code, icon, progressBar, spinner, text] + pages: [badge, status, callout, timeline, code, icon, progressBar, spinner, text] }, { name: "Form", diff --git a/src/docs/pages/button/IconButton.tsx b/src/docs/pages/button/IconButton.tsx index b3244a1..9370b0b 100644 --- a/src/docs/pages/button/IconButton.tsx +++ b/src/docs/pages/button/IconButton.tsx @@ -21,7 +21,14 @@ export const IconButton = () => { {BUTTON_COLOR.map((color) => ( - + console.log("click")} + onMouseOver={() => console.log("mouse over")} + onMouseOut={() => console.log("mouse out")} + /> ))} @@ -31,7 +38,7 @@ export const IconButton = () => { {BUTTON_SIZE.map((size) => ( - + ))} diff --git a/src/docs/pages/button/Link.tsx b/src/docs/pages/button/Link.tsx index be1a815..07f0cfa 100644 --- a/src/docs/pages/button/Link.tsx +++ b/src/docs/pages/button/Link.tsx @@ -2,7 +2,14 @@ import { VuiButtonPrimary } from "../../../lib"; export const Link = () => { return ( - + console.log("click")} + onMouseOver={() => console.log("mouse over")} + onMouseOut={() => console.log("mouse out")} + > Visit Vectara.com ); diff --git a/src/docs/pages/button/Sizes.tsx b/src/docs/pages/button/Sizes.tsx index 2f4ad8c..d6e820f 100644 --- a/src/docs/pages/button/Sizes.tsx +++ b/src/docs/pages/button/Sizes.tsx @@ -32,7 +32,15 @@ export const Sizes = () => { {BUTTON_SIZE.map((size) => ( - + console.log("click")} + onMouseOver={() => console.log("mouse over")} + onMouseOut={() => console.log("mouse out")} + > Size {size} diff --git a/src/docs/pages/code/FullHeight.tsx b/src/docs/pages/code/FullHeight.tsx index ec3abf3..21900bf 100644 --- a/src/docs/pages/code/FullHeight.tsx +++ b/src/docs/pages/code/FullHeight.tsx @@ -2,50 +2,49 @@ import { VuiCode } from "../../../lib"; export const FullHeight = () => ( - {`import { useState } from "react"; -import { VuiCode, VuiSpacer, VuiTab, VuiTabs, VuiTitle } from "../../lib"; - -type Props = { - name?: string; - component: React.ReactNode; - source: string; -}; - -export const Example = ({ name, component, source }: Props) => { - const [tab, setTab] = useState<"example" | "source">("example"); - - return ( - <> - {name && ( - -

{name}

- - )} - - - - - setTab("example")}> - Example - - - setTab("source")}> - Source - - - - {tab === "example" && ( - <> - - {component} - - )} - {tab === "source" && {source}} - - - - ); -}; -`} + {` +curl -X POST \ +-H "customer-id: 2219234556" \ +-H "Content-Type: application/json" \ +-H "Authorization: Bearer eyJraWQiOiJqUENhYmhHTndTTlBOdFE1bXh6NWQxOFV2a0xyQVc3aEZsS3N2dU9qcDNVPSIsImFsZyI6IlJTMjU2In0.eyJzdWIiOiI1ODAxMzNlMC05MDIxLTcwNzgtMThiNC03MjkwNmYxNDEwYWMiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLXdlc3QtMi5hbWF6b25hd3MuY29tXC91cy13ZXN0LTJfYjlwMnUza2RHIiwiY29nbml0bzp1c2VybmFtZSI6ImNqK2F1ZzFAdmVjdGFyYS5jb20iLCJvcmlnaW5fanRpIjoiOWU5MDhmMmMtMTJlYy00NTEyLWFjMTEtOGNhYjI1YTlkNjM2IiwiYXVkIjoiNG0zdDBnc3MyZnJ0cTRodTc0YmMxNmVjN3IiLCJldmVudF9pZCI6IjFlZWIzZWQ5LTA1NzctNDg5YS05YWIwLTdhNGQ3YmIxMWRiYiIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNzIwNzM0MDEzLCJleHAiOjE3MjA3NjM0OTksImlhdCI6MTcyMDc1OTg5OSwianRpIjoiYmE0ZGMzYWQtNGU0Mi00NTJhLTg4NmMtNWVhYzIzM2Y2ODA0IiwiZW1haWwiOiJjaithdWcxQHZlY3RhcmEuY29tIn0.oyXW3uLvjaphK6-xXonHeU3OlK6FVdOEK3mNtb9EuLyS1d6HfO1fP0tvHYPzPOmg5tmdKGdHajmMxkehVN4kwRslYTQLRzBWiZgs1LcMPU9HbZ8_YUAu97MT_KW8erEIy9lRYIP3jAWBb7DN_At1NLri4pxXAvEFLNbgsmgjAJCmkVxM4MrKUC37lAR_f_prjb38LFZYNdkP_851UGWYblc2DNiIhGomIrCMVxrHDf5OTlH03sJwQoreFzdI9-W_izdfcCEayKZEDMjkOf9g-8uvdvQ_-817rcssu0DAlfWIuW9K2NRVfPw7L5ik-vZJyGnS23qlsyJ9vpRnXvUxeg" \ + https://api.vectara.dev:443/v2/chats \ +-d @- < ); diff --git a/src/docs/pages/formGroup/FormGroup.tsx b/src/docs/pages/formGroup/FormGroup.tsx index dd0e389..96f8632 100644 --- a/src/docs/pages/formGroup/FormGroup.tsx +++ b/src/docs/pages/formGroup/FormGroup.tsx @@ -1,5 +1,13 @@ import { useState } from "react"; -import { RadioButtonConfig, VuiFormGroup, VuiSelect, VuiSpacer, VuiSuperRadioGroup, VuiTextInput } from "../../../lib"; +import { + RadioButtonConfig, + VuiFormGroup, + VuiSelect, + VuiSpacer, + VuiSuperRadioGroup, + VuiTextArea, + VuiTextInput +} from "../../../lib"; import { Subsection } from "../../components/Subsection"; type Pizza = "pepperoni" | "mushrooms" | "jalapenos"; @@ -59,9 +67,15 @@ export const FormGroup = () => { - + + + + + + undefined} /> + diff --git a/src/docs/pages/formGroup/NonFormElement.tsx b/src/docs/pages/formGroup/NonFormElement.tsx new file mode 100644 index 0000000..6ddd8c8 --- /dev/null +++ b/src/docs/pages/formGroup/NonFormElement.tsx @@ -0,0 +1,19 @@ +import { VuiCallout, VuiFormGroup } from "../../../lib"; + +export const NonFormElement = () => { + return ( + <> + + + + + ); +}; diff --git a/src/docs/pages/formGroup/index.tsx b/src/docs/pages/formGroup/index.tsx index 40b2fad..ebc2edc 100644 --- a/src/docs/pages/formGroup/index.tsx +++ b/src/docs/pages/formGroup/index.tsx @@ -1,13 +1,22 @@ import { FormGroup } from "./FormGroup"; +import { NonFormElement } from "./NonFormElement"; + const FormGroupSource = require("!!raw-loader!./FormGroup"); +const NonFormElementSource = require("!!raw-loader!./NonFormElement"); export const formGroup = { name: "Form Group", path: "/formGroup", examples: [ { + name: "Form elements", component: , source: FormGroupSource.default.toString() + }, + { + name: "Non-form elements", + component: , + source: NonFormElementSource.default.toString() } ] }; diff --git a/src/docs/pages/icon/InlineText.tsx b/src/docs/pages/icon/InlineText.tsx new file mode 100644 index 0000000..ad1f991 --- /dev/null +++ b/src/docs/pages/icon/InlineText.tsx @@ -0,0 +1,15 @@ +import { BiStar } from "react-icons/bi"; +import { VuiIcon, VuiText } from "../../../lib"; + +export const InlineText = () => { + return ( + +

+ Here's some text inline with an icon{" "} + + + +

+ + ); +}; diff --git a/src/docs/pages/icon/index.tsx b/src/docs/pages/icon/index.tsx index 51c2be4..c37811d 100644 --- a/src/docs/pages/icon/index.tsx +++ b/src/docs/pages/icon/index.tsx @@ -1,8 +1,10 @@ import { Sizes } from "./Sizes"; import { Colors } from "./Colors"; +import { InlineText } from "./InlineText"; const SizesSource = require("!!raw-loader!./Sizes"); const ColorsSource = require("!!raw-loader!./Colors"); +const InlineTextSource = require("!!raw-loader!./InlineText"); export const icon = { name: "Icon", @@ -17,6 +19,11 @@ export const icon = { name: "Colors", component: , source: ColorsSource.default.toString() + }, + { + name: "Inline Text", + component: , + source: InlineTextSource.default.toString() } ] }; diff --git a/src/docs/pages/infoList/InfoList.tsx b/src/docs/pages/infoList/InfoList.tsx new file mode 100644 index 0000000..fca4508 --- /dev/null +++ b/src/docs/pages/infoList/InfoList.tsx @@ -0,0 +1,28 @@ +import { VuiButtonSecondary, VuiSpacer, VuiText, VuiInfoList } from "../../../lib"; + +export const InfoList = () => { + return ( + + +

22 MB

+ + + + + + Refresh + + + ) + } + ]} + /> + ); +}; diff --git a/src/docs/pages/infoList/index.tsx b/src/docs/pages/infoList/index.tsx new file mode 100644 index 0000000..b200922 --- /dev/null +++ b/src/docs/pages/infoList/index.tsx @@ -0,0 +1,13 @@ +import { InfoList } from "./InfoList"; +const InfoListSource = require("!!raw-loader!./InfoList"); + +export const infoList = { + name: "Info List", + path: "/InfoList", + examples: [ + { + component: , + source: InfoListSource.default.toString() + } + ] +}; diff --git a/src/docs/pages/infoMenu/InfoMenu.tsx b/src/docs/pages/infoMenu/InfoMenu.tsx new file mode 100644 index 0000000..733c3be --- /dev/null +++ b/src/docs/pages/infoMenu/InfoMenu.tsx @@ -0,0 +1,62 @@ +import { useState } from "react"; +import { VuiInfoMenu, VuiButtonSecondary, VuiIcon, VuiOptionsList, VuiSpacer, VuiText } from "../../../lib"; +import { BiSolidUser } from "react-icons/bi"; + +const options = [ + { value: "edit", label: "Update profile" }, + { value: "signOut", label: "Sign out" } +]; + +export const InfoMenu = () => { + const [isOpen, setIsOpen] = useState(false); + + return ( + + + + } + > + email@email.com + + } + info={[ + { title: "Email", value: "email@email.com" }, + { title: "Account number", value: "1234567890" }, + { + title: "Account size", + value: ( + <> + +

22 MB

+ + + + + + Refresh + + + ) + } + ]} + > + { + alert(`Selected ${value}`); + }} + options={options} + size="l" + /> + + ); +}; diff --git a/src/docs/pages/infoMenu/index.tsx b/src/docs/pages/infoMenu/index.tsx new file mode 100644 index 0000000..287eda2 --- /dev/null +++ b/src/docs/pages/infoMenu/index.tsx @@ -0,0 +1,13 @@ +import { InfoMenu } from "./InfoMenu"; +const InfoMenuSource = require("!!raw-loader!./InfoMenu"); + +export const infoMenu = { + name: "Info Menu", + path: "/InfoMenu", + examples: [ + { + component: , + source: InfoMenuSource.default.toString() + } + ] +}; diff --git a/src/docs/pages/modal/PrimaryModal.tsx b/src/docs/pages/modal/PrimaryModal.tsx index 5a8eb38..1e1a145 100644 --- a/src/docs/pages/modal/PrimaryModal.tsx +++ b/src/docs/pages/modal/PrimaryModal.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; import { VuiButtonPrimary, VuiButtonSecondary, VuiModal, VuiSearchSelect, VuiSpacer, VuiText } from "../../../lib"; +import { BiInfoCircle } from "react-icons/bi"; const options = [ { value: "a", label: "Caffeine-free" }, @@ -27,7 +28,7 @@ export const PrimaryModal = () => { Open primary modal - setIsOpen(false)} title="FYI"> + setIsOpen(false)} icon={} title="FYI">

I just thought you should know that your modal is showing.

 diff --git a/src/docs/pages/optionsButton/Primary.tsx b/src/docs/pages/optionsButton/Primary.tsx index 17cb393..f223fb7 100644 --- a/src/docs/pages/optionsButton/Primary.tsx +++ b/src/docs/pages/optionsButton/Primary.tsx @@ -28,6 +28,8 @@ export const Primary = () => { {BUTTON_COLOR.map((color) => ( alert("Button clicked")} + href="https://www.vectara.com" size={size} isOpen={isOpen[`${size}-${color}`]} setIsOpen={(isButtonOpen) => diff --git a/src/docs/pages/optionsButton/Secondary.tsx b/src/docs/pages/optionsButton/Secondary.tsx index 74bc687..b105e5f 100644 --- a/src/docs/pages/optionsButton/Secondary.tsx +++ b/src/docs/pages/optionsButton/Secondary.tsx @@ -28,6 +28,8 @@ export const Secondary = () => { {BUTTON_COLOR.map((color) => ( alert("Button clicked")} + href="https://www.vectara.com" size={size} type="secondary" isOpen={isOpen[`${size}-${color}`]} diff --git a/src/docs/pages/popover/Popover.tsx b/src/docs/pages/popover/Popover.tsx index 12f161b..54fc603 100644 --- a/src/docs/pages/popover/Popover.tsx +++ b/src/docs/pages/popover/Popover.tsx @@ -1,5 +1,14 @@ import { useState } from "react"; -import { VuiButtonSecondary, VuiIcon, VuiOptionsList, VuiPopover } from "../../../lib"; +import { + AnchorSide, + VuiButtonSecondary, + VuiFormGroup, + VuiIcon, + VuiOptionsList, + VuiPopover, + VuiSelect, + VuiSpacer +} from "../../../lib"; import { BiCaretDown } from "react-icons/bi"; const options = [ @@ -11,36 +20,54 @@ const options = [ export const Popover = () => { const [isOpen, setIsOpen] = useState(false); const [selectedOption, setSelectedOption] = useState("apples"); + const [anchorSide, setAnchorSide] = useState("right"); return ( - setIsOpen(!isOpen)} - header="Tribes" - button={ - - - - } - > - Tribe: {selectedOption} - - } - > - { - setIsOpen(false); - setSelectedOption(value); - }} - selected={selectedOption} - options={options} - /> - + <> + + setAnchorSide(event.target.value as AnchorSide)} + /> + + + + + setIsOpen(!isOpen)} + header="Tribes" + button={ + + + + } + > + Tribe: {selectedOption} + + } + > + { + setIsOpen(false); + setSelectedOption(value); + }} + selected={selectedOption} + options={options} + /> + + ); }; diff --git a/src/docs/pages/searchSelect/SingleSelect.tsx b/src/docs/pages/searchSelect/SingleSelect.tsx new file mode 100644 index 0000000..5032eac --- /dev/null +++ b/src/docs/pages/searchSelect/SingleSelect.tsx @@ -0,0 +1,43 @@ +import { useState } from "react"; +import { VuiButtonSecondary, VuiSearchSelect } from "../../../lib"; + +const options = [ + { value: "a", label: "Caffeine-free" }, + { value: "b", label: "Freeze dried" }, + { value: "c", label: "Gluten-free" }, + { value: "d", label: "Halal" }, + { value: "e", label: "High fiber" }, + { value: "f", label: "Kosher" }, + { value: "g", label: "Lactose-free" }, + { value: "h", label: "Low-carb" }, + { value: "i", label: "No nuts" }, + { value: "j", label: "Non-GMO" }, + { value: "k", label: "Sugar-free" }, + { value: "l", label: "Vegan" } +]; + +export const SingleSelect = () => { + const [isOpen, setIsOpen] = useState(false); + const [searchValue, setSearchValue] = useState(""); + const [selectedOptions, setSelectedOptions] = useState(["a"]); + + return ( + { + setSelectedOptions(value); + }} + selectedOptions={selectedOptions} + options={options} + isMultiSelect={false} + > + + Meal preference + + + ); +}; diff --git a/src/docs/pages/searchSelect/index.tsx b/src/docs/pages/searchSelect/index.tsx index 3c2fab1..1e8f8af 100644 --- a/src/docs/pages/searchSelect/index.tsx +++ b/src/docs/pages/searchSelect/index.tsx @@ -1,20 +1,29 @@ import { SearchSelect } from "./SearchSelect"; import { Async } from "./Async"; +import { SingleSelect } from "./SingleSelect"; const SearchSelectSource = require("!!raw-loader!./SearchSelect"); const AsyncSource = require("!!raw-loader!./Async"); +const SingleSelectSource = require("!!raw-loader!./SingleSelect"); export const searchSelect = { name: "Search Select", path: "/searchSelect", examples: [ { + name: "Synchronous search", component: , source: SearchSelectSource.default.toString() }, { + name: "Asynchronous search", component: , source: AsyncSource.default.toString() + }, + { + name: "Single selection", + component: , + source: SingleSelectSource.default.toString() } ] }; diff --git a/src/docs/pages/statList/StatList.tsx b/src/docs/pages/statList/StatList.tsx index 85987f2..a0f9e50 100644 --- a/src/docs/pages/statList/StatList.tsx +++ b/src/docs/pages/statList/StatList.tsx @@ -1,22 +1,28 @@ -import { VuiStatList, VuiStatus } from "../../../lib"; +import { VuiSpacer, VuiStatList, VuiStatus } from "../../../lib"; + +const stats = [ + { + name: "Name", + value: "Nostromo" + }, + { + name: "Location", + value: "Deep space" + }, + { + name: "Status", + value: + } +]; export const StatList = () => { return ( - - } - ]} - /> + <> + + + + + + ); }; diff --git a/src/docs/pages/summary/Summary.tsx b/src/docs/pages/summary/Summary.tsx index eaf42d6..51b9d6f 100644 --- a/src/docs/pages/summary/Summary.tsx +++ b/src/docs/pages/summary/Summary.tsx @@ -11,5 +11,5 @@ const SummaryCitation = ({ reference }: { reference: string }) => ( ); export const Summary = () => { - return ; + return ; }; diff --git a/src/docs/pages/table/Table.tsx b/src/docs/pages/table/Table.tsx index 9572b4f..f571dce 100644 --- a/src/docs/pages/table/Table.tsx +++ b/src/docs/pages/table/Table.tsx @@ -34,6 +34,7 @@ export const Table = () => { const [canSelectRows, setCanSelectRows] = useState(true); const [canSearch, setCanSearch] = useState(true); const [areNicknamesVisible, setAreNicknamesVisible] = useState(false); + const [isAlignTop, setIsAlignTop] = useState(false); // Table state const [isLoading, setIsLoading] = useState(true); @@ -74,6 +75,15 @@ export const Table = () => { }; const columns = [ + { + name: "#", + header: { + render: () => { + return "#"; + } + }, + render: (person: Person, rowIndex: number) => rowIndex + 1 + }, { name: "name", header: { @@ -233,11 +243,11 @@ export const Table = () => { const search = canSearch ? { - searchValue, - searchPlaceholder: "Search people", - onSearchChange: (search: string) => { + value: searchValue, + placeholder: "Search people", + onChange: (e: React.ChangeEvent) => { setCurrentPage(1); - setSearchValue(search); + setSearchValue(e.target.value); } } : undefined; @@ -291,6 +301,10 @@ export const Table = () => { onChange={(e) => setAreNicknamesVisible(e.target.checked)} /> + + + setIsAlignTop(e.target.checked)} /> + @@ -301,6 +315,7 @@ export const Table = () => { ({ className: "testRowClass", "data-testid": person.name })} columns={columns} rows={rows} content={content} @@ -312,6 +327,9 @@ export const Table = () => { onReload={onReload} search={search} isDisabled={isDisabled} + bodyStyle={{ + verticalAlign: isAlignTop ? "top" : undefined + }} /> ); diff --git a/src/docs/pages/timeline/Timeline.tsx b/src/docs/pages/timeline/Timeline.tsx new file mode 100644 index 0000000..d866c18 --- /dev/null +++ b/src/docs/pages/timeline/Timeline.tsx @@ -0,0 +1,150 @@ +import { useState } from "react"; +import { BiAnalyse, BiListCheck, BiSolidFlask } from "react-icons/bi"; +import { + VuiAccordion, + VuiButtonSecondary, + VuiCallout, + VuiIcon, + VuiInfoTable, + VuiSpacer, + VuiText, + VuiTimeline, + VuiTimelineItem, + VuiTitle +} from "../../../lib"; + +export const Timeline = () => { + const [isOpen, setIsOpen] = useState(false); + + const columns = [ + { + name: "ingredient", + render: "Ingredient" + }, + { + name: "amount", + render: "Amount", + width: "200px" + } + ]; + + const rows = [ + { + values: { + ingredient: { + render: ( + +

Plutonium

+ + ) + }, + amount: { + render: ( + +

4 grams

+ + ) + } + } + }, + { + values: { + ingredient: { + render: ( + +

TGRI secret sauce

+ + ) + }, + amount: { + render: ( + +

8.25 microliters

+ + ) + } + } + }, + { + values: { + ingredient: { + render: ( + +

Corn starch

+ + ) + }, + amount: { + render: ( + +

1 tbsp

+ + ) + } + } + } + ]; + + return ( + + + + + } + > + +

Ingredients for making ooze

+ + + + + + + + + + } + > + +

How to prepare

+ + + + + + + +
    +
  1. Secure mutagens
    2. +
  2. Put in beaker
    3. +
  3. Shake thoroughly
    4. +
  4. Do not drink!!
    5. +
  5. Baste teenage ninja turtles lightly and let sit 20 minutes
    6. +
+ + + + + + + + } + > + + +

Mutated teenage ninja turtles.

+ + + + Deploy to sewers + + + + ); +}; diff --git a/src/docs/pages/timeline/index.tsx b/src/docs/pages/timeline/index.tsx new file mode 100644 index 0000000..98bfb84 --- /dev/null +++ b/src/docs/pages/timeline/index.tsx @@ -0,0 +1,13 @@ +import { Timeline } from "./Timeline"; +const TimelineSource = require("!!raw-loader!./Timeline"); + +export const timeline = { + name: "Timeline", + path: "/timeline", + examples: [ + { + component: , + source: TimelineSource.default.toString() + } + ] +}; diff --git a/src/docs/pages/validation/Validation.tsx b/src/docs/pages/validation/Validation.tsx index 80c6873..cf4d794 100644 --- a/src/docs/pages/validation/Validation.tsx +++ b/src/docs/pages/validation/Validation.tsx @@ -1,4 +1,4 @@ -import { VuiFormGroup, VuiNumberInput, VuiSelect, VuiSpacer, VuiTextInput } from "../../../lib"; +import { VuiFormGroup, VuiNumberInput, VuiSelect, VuiSpacer, VuiTextArea, VuiTextInput } from "../../../lib"; import { Subsection } from "../../components/Subsection"; export const Validation = () => { @@ -35,6 +35,20 @@ export const Validation = () => { > console.log(event.target.value)} /> + + + + + undefined} /> + diff --git a/src/lib/components/app/appSideNav/AppSideNav.tsx b/src/lib/components/app/appSideNav/AppSideNav.tsx index 022a78a..19f5989 100644 --- a/src/lib/components/app/appSideNav/AppSideNav.tsx +++ b/src/lib/components/app/appSideNav/AppSideNav.tsx @@ -56,7 +56,7 @@ export const VuiAppSideNav = ({ items = [], content }: Props) => { {isCollapsed ? ( setIsCollapsed(false)} className="vuiAppSideNavExpandButton" color="neutral" diff --git a/src/lib/components/app/appSideNav/AppSideNavTree.tsx b/src/lib/components/app/appSideNav/AppSideNavTree.tsx index 18c7643..e4d87df 100644 --- a/src/lib/components/app/appSideNav/AppSideNavTree.tsx +++ b/src/lib/components/app/appSideNav/AppSideNavTree.tsx @@ -70,6 +70,7 @@ const AppSideNavTreeSection = ({ name, path, children, iconBefore, iconAfter, is /> setIsOpen(!isOpen)} diff --git a/src/lib/components/button/BaseButton.tsx b/src/lib/components/button/BaseButton.tsx index 8d5b0d4..32b81a2 100644 --- a/src/lib/components/button/BaseButton.tsx +++ b/src/lib/components/button/BaseButton.tsx @@ -31,7 +31,10 @@ export type BaseButtonProps = { isSelected?: boolean; isInert?: boolean; isDisabled?: boolean; - onClick?: (e: React.MouseEvent) => void; + onClick?: React.MouseEventHandler; + onMouseOver?: React.MouseEventHandler; + onMouseOut?: React.MouseEventHandler; + onMouseMove?: React.MouseEventHandler; href?: LinkProps["href"]; target?: LinkProps["target"]; track?: LinkProps["track"]; @@ -57,6 +60,9 @@ export const BaseButton = forwardRef( size = "m", fullWidth, onClick, + onMouseOver, + onMouseOut, + onMouseMove, tabIndex, isInert, isDisabled, @@ -112,6 +118,9 @@ export const BaseButton = forwardRef( className: wrapperClasses, href, onClick, + onMouseOver, + onMouseOut, + onMouseMove, children: ( //* Wrap a button otherwise the flex layout breaks */}