From 87dcb618b35d312d7d636e583ddaee32b20a737c Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Thu, 18 Jan 2024 13:25:54 +0530 Subject: [PATCH] fix: remaining rebranded stories --- .../BottomSheet/BottomSheet.stories.tsx | 431 +++++++++--------- .../__tests__/BottomSheet.web.test.tsx | 9 +- .../BottomSheet.web.test.tsx.snap | 72 +-- .../src/components/Chip/ChipGroup.stories.tsx | 196 ++++---- .../Input/OTPInput/OTPInput.stories.tsx | 10 +- .../src/components/Modal/docs/stories.ts | 1 - .../blade/src/components/Tag/Tag.stories.tsx | 141 +++--- 7 files changed, 440 insertions(+), 420 deletions(-) diff --git a/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx b/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx index e6ba4bcd0da..efa26f3b1e3 100644 --- a/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx +++ b/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx @@ -13,7 +13,17 @@ import { BottomSheetHeader, } from './'; -import { ArrowRightIcon, InfoIcon } from '~components/Icons'; +import { + ArrowRightIcon, + InfoIcon, + CustomersIcon, + ClockIcon, + ThumbsUpIcon, + TrendingUpIcon, + TrendingDownIcon, + CheckIcon, + CloseIcon, +} from '~components/Icons'; import BaseBox from '~components/Box/BaseBox'; import { Button } from '~components/Button'; @@ -27,11 +37,17 @@ import { Sandbox } from '~utils/storybook/Sandbox'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { isReactNative } from '~utils'; import { SandboxHighlighter } from '~utils/storybook/Sandbox/SandpackEditor'; -import { ActionList, ActionListItem } from '~components/ActionList'; -import { Dropdown } from '~components/Dropdown'; +import { + ActionList, + ActionListItem, + ActionListItemIcon, + ActionListSection, +} from '~components/ActionList'; +import { Dropdown, DropdownButton } from '~components/Dropdown'; import { SelectInput } from '~components/Input/DropdownInputTriggers'; import { OTPInput } from '~components/Input/OTPInput'; import { Radio, RadioGroup } from '~components/Radio'; +import { TextInput } from '~components/Input/TextInput'; const Page = (): React.ReactElement => { return ( @@ -353,15 +369,11 @@ const WithHeaderFooterTemplate: StoryFn = (args: StoryControlProps) => { titleSuffix={args.titleSuffix} /> - {/* TODO: Rebranding - Uncomment when Radio is fixed Home - 11850 Florida 24, Cedar Key, Florida Office - 2033 Florida 21, Cedar Key, Florida Work - 5938 New York, Main Street - */} - Home - 11850 Florida 24, Cedar Key, Florida - Office - 2033 Florida 21, Cedar Key, Florida - Work - 5938 New York, Main Street + + + By default the initial focus is set to the close button, but you can modify it by diff --git a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx index 8cfebf49838..f9fb1e74a72 100644 --- a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx +++ b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx @@ -234,8 +234,7 @@ describe('', () => { mockConsoleError.mockRestore(); }); - // TODO: Rebranding - Dropdown hasn't been rebranded yet thus skipping this test until then - it.skip('should compose with Dropdown single select', async () => { + it('should compose with Dropdown single select', async () => { const mockConsoleError = jest.spyOn(console, 'error').mockImplementation(); const user = userEvents.setup(); @@ -284,8 +283,7 @@ describe('', () => { mockConsoleError.mockRestore(); }); - // TODO: Rebranding - Dropdown hasn't been rebranded yet thus skipping this test until then - it.skip('should compose with Dropdown multi select', async () => { + it('should compose with Dropdown multi select', async () => { const mockConsoleError = jest.spyOn(console, 'error').mockImplementation(); mockConsoleError.mockRestore(); @@ -353,8 +351,7 @@ describe('', () => { mockConsoleError.mockRestore(); }, 10000); - // TODO: Rebranding - Dropdown hasn't been rebranded yet thus skipping this test until then - it.skip('should compose with DropdownButton', async () => { + it('should compose with DropdownButton', async () => { const mockConsoleError = jest.spyOn(console, 'error').mockImplementation(); const user = userEvents.setup(); diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap index baf48ce8b68..e2d45e59ce5 100644 --- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap +++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap @@ -25,6 +25,7 @@ exports[` should compose with DropdownButton 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; + z-index: 1; } .c5.c5.c5.c5.c5 { @@ -34,7 +35,7 @@ exports[` should compose with DropdownButton 1`] = ` right: 0px; bottom: 0px; left: 0px; - background-color: hsla(214,15%,18%,0.64); + background-color: hsla(0,0%,0%,0.56); opacity: 0; } @@ -179,7 +180,7 @@ exports[` should compose with DropdownButton 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - color: hsla(214,18%,69%,1); + color: hsla(211,22%,56%,1); -webkit-transition-property: color,box-shadow; transition-property: color,box-shadow; -webkit-transition-duration: 150ms; @@ -189,24 +190,30 @@ exports[` should compose with DropdownButton 1`] = ` } .c15.c15.c15.c15.c15:hover { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); } .c15.c15.c15.c15.c15:focus-visible { - outline: none; - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); - color: hsla(217,18%,45%,1); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + color: hsla(211,26%,34%,1); } .c15.c15.c15.c15.c15:active { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); } .c4.c4.c4.c4.c4 { - color: hsla(216,33%,29%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; - font-weight: 700; + font-weight: 500; font-style: normal; -webkit-text-decoration-line: none; text-decoration-line: none; @@ -221,7 +228,7 @@ exports[` should compose with DropdownButton 1`] = ` } .c21.c21.c21.c21.c21 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -243,7 +250,7 @@ exports[` should compose with DropdownButton 1`] = ` } .c24.c24.c24.c24.c24 { - color: hsla(8,73%,47%,1); + color: hsla(4,74%,49%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -306,7 +313,7 @@ exports[` should compose with DropdownButton 1`] = ` content: ''; width: 56px; height: 4px; - background-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.12); border-radius: 16px; } @@ -314,7 +321,7 @@ exports[` should compose with DropdownButton 1`] = ` background: hsla(0,0%,100%,1); border-top-left-radius: 16px; border-top-right-radius: 16px; - border-color: hsla(216,15%,54%,0.18); + border-color: hsla(211,20%,52%,0.18); box-shadow: 0px -24px 48px -12px hsla(217,56%,17%,0.18); opacity: 0; pointer-events: none; @@ -348,10 +355,10 @@ exports[` should compose with DropdownButton 1`] = ` min-height: 36px; width: auto; cursor: pointer; - background-color: hsla(216,15%,54%,0.09); - border-color: hsla(216,44%,23%,0); - border-width: 1px; - border-radius: 2px; + background-color: hsla(211,20%,52%,0.09); + border-color: hsla(211,27%,76%,1); + border-width: 0px; + border-radius: 4px; border-style: solid; padding-top: 0px; padding-bottom: 0px; @@ -367,6 +374,7 @@ exports[` should compose with DropdownButton 1`] = ` align-items: center; -webkit-text-decoration: none; text-decoration: none; + overflow: hidden; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -381,22 +389,22 @@ exports[` should compose with DropdownButton 1`] = ` } .c1.c1.c1.c1.c1:hover { - background-color: hsla(216,15%,54%,0.18); + background-color: hsla(211,20%,52%,0.18); } .c1.c1.c1.c1.c1:active { - background-color: hsla(216,15%,54%,0.32); + background-color: hsla(211,20%,52%,0.18); } .c1.c1.c1.c1.c1:focus-visible { - background-color: hsla(216,15%,54%,0.32); - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + background-color: hsla(211,20%,52%,0.18); + outline: 1px solid hsla(227,100%,59%,0.09); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); } .c1.c1.c1.c1.c1 * { - -webkit-transition-property: color,fill; - transition-property: color,fill; + -webkit-transition-property: color,fill,opacity; + transition-property: color,fill,opacity; -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -431,11 +439,15 @@ exports[` should compose with DropdownButton 1`] = ` } .c17.c17.c17.c17.c17:hover:not([aria-disabled=true]) { - background-color: hsla(216,15%,54%,0.09); + background-color: hsla(211,20%,52%,0.09); } .c17.c17.c17.c17.c17[aria-selected=true] { - background-color: hsla(218,89%,51%,0.09); + background-color: hsla(227,100%,59%,0.09); +} + +.c17.c17.c17.c17.c17[aria-selected=true]:hover { + background-color: hsla(227,100%,59%,0.18); } .c23.c23.c23.c23.c23 { @@ -454,11 +466,15 @@ exports[` should compose with DropdownButton 1`] = ` } .c23.c23.c23.c23.c23:hover:not([aria-disabled=true]) { - background-color: hsla(9,91%,56%,0.09); + background-color: hsla(4,74%,49%,0.09); } .c23.c23.c23.c23.c23[aria-selected=true] { - background-color: hsla(218,89%,51%,0.09); + background-color: hsla(227,100%,59%,0.09); +} + +.c23.c23.c23.c23.c23[aria-selected=true]:hover { + background-color: hsla(227,100%,59%,0.18); } diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx index c60c34306f9..9f810ee9783 100644 --- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx @@ -21,6 +21,8 @@ import iconMap from '~components/Icons/iconMap'; import type { BladeElementRef } from '~utils/types'; import { Button } from '~components/Button'; import { Link } from '~components/Link'; +import { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown'; +import { ActionList, ActionListItem } from '~components/ActionList'; const Page = (): React.ReactElement => { return ( @@ -323,104 +325,102 @@ DefaultMultiSelected.argTypes = { }, }; -// TODO(Rebranding): Uncomment this story after Dropdown rebranding -// const ControlledSingleSelectionTemplate: StoryFn = ({ ...args }) => { -// const chipValues = ['Proprietorship', 'Public', 'Small Business']; -// const [value, setValue] = React.useState('Proprietorship'); -// return ( -// -// -// Business Type -// -// -// {chipValues.map((chipValue: string) => ( -// setValue(name)} -// isSelected={value === chipValue} -// /> -// ))} -// -// -// - -// setValue(values[0])} -// > -// {chipValues.map((chipValue: string) => ( -// -// {chipValue} -// -// ))} -// -// -// ); -// }; - -// export const ControlledSingleSelection = ControlledSingleSelectionTemplate.bind({}); -// ControlledSingleSelection.storyName = 'Controlled Single Selection'; -// ControlledSingleSelection.args = { -// accessibilityLabel: 'Choose one business type from the options below', -// selectionType: 'single', -// }; - -// TODO(Rebranding): Uncomment this story after Dropdown rebranding -// const ControlledMultiSelectionTemplate: StoryFn = (args) => { -// const chipValues = [ -// 'Automated Payment Links', -// 'Wallet on My App', -// 'Offer discounts, Pay Later & EMI options', -// ]; -// const [values, setValues] = React.useState(['Automated Payment Links']); -// return ( -// -// -// What other capabilities are you looking for? -// -// -// {chipValues.map((chipValue: string) => ( -// -// value -// ? setValues(values.filter((v) => v !== name)) -// : setValues(values.concat([name])) -// } -// isSelected={values.includes(chipValue)} -// /> -// ))} -// -// -// -// setValues(values)} -// value={values} -// > -// {chipValues.map((chipValue: string) => ( -// -// {chipValue} -// -// ))} -// -// -// ); -// }; - -// export const ControlledMultiSelection = ControlledMultiSelectionTemplate.bind({}); -// ControlledMultiSelection.storyName = 'Controlled Multiple Selection'; -// ControlledMultiSelection.args = { -// accessibilityLabel: 'Select other capabilities you are looking for from the options below', -// selectionType: 'multiple', -// }; +const ControlledSingleSelectionTemplate: StoryFn = ({ ...args }) => { + const chipValues = ['Proprietorship', 'Public', 'Small Business']; + const [value, setValue] = React.useState('Proprietorship'); + return ( + + + Business Type + + + {chipValues.map((chipValue: string) => ( + setValue(name)} + isSelected={value === chipValue} + /> + ))} + + + + + setValue(values[0])} + > + {chipValues.map((chipValue: string) => ( + + {chipValue} + + ))} + + + ); +}; + +export const ControlledSingleSelection = ControlledSingleSelectionTemplate.bind({}); +ControlledSingleSelection.storyName = 'Controlled Single Selection'; +ControlledSingleSelection.args = { + accessibilityLabel: 'Choose one business type from the options below', + selectionType: 'single', +}; + +const ControlledMultiSelectionTemplate: StoryFn = (args) => { + const chipValues = [ + 'Automated Payment Links', + 'Wallet on My App', + 'Offer discounts, Pay Later & EMI options', + ]; + const [values, setValues] = React.useState(['Automated Payment Links']); + return ( + + + What other capabilities are you looking for? + + + {chipValues.map((chipValue: string) => ( + + value + ? setValues(values.filter((v) => v !== name)) + : setValues(values.concat([name])) + } + isSelected={values.includes(chipValue)} + /> + ))} + + + + setValues(values)} + value={values} + > + {chipValues.map((chipValue: string) => ( + + {chipValue} + + ))} + + + ); +}; + +export const ControlledMultiSelection = ControlledMultiSelectionTemplate.bind({}); +ControlledMultiSelection.storyName = 'Controlled Multiple Selection'; +ControlledMultiSelection.args = { + accessibilityLabel: 'Select other capabilities you are looking for from the options below', + selectionType: 'multiple', +}; export const Disabled = ChipTemplate.bind({}); Disabled.storyName = 'Disabled'; diff --git a/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx b/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx index e8401b931e3..44748b333d6 100644 --- a/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx +++ b/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx @@ -9,6 +9,9 @@ import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes'; import { Box } from '~components/Box'; import { Button } from '~components/Button'; +import { Dropdown, DropdownOverlay } from '~components/Dropdown'; +import { SelectInput } from '../DropdownInputTriggers'; +import { ActionList, ActionListItem } from '~components/ActionList'; // import { Dropdown, DropdownOverlay } from '~components/Dropdown'; // import { ActionList, ActionListItem } from '~components/ActionList'; @@ -248,7 +251,7 @@ export const OTPInputControlled = OTPInputControlledTemplate.bind({}); export const OTPInputRef: StoryFn = () => { // eslint-disable-next-line react-hooks/rules-of-hooks - const [focusOn] = React.useState(0); + const [focusOn, setFocusOn] = React.useState(0); const inputRef = React.useRef([]); return ( @@ -260,8 +263,7 @@ export const OTPInputRef: StoryFn = () => { otpLength={4} onChange={({ name, value }): void => console.log({ name, value })} /> - {/* TODO: Rebranding - uncomment when Dropdown is ready */} - {/* + = () => { - */} + -// -// -// -// ); -// }; + return ( + + + {tags.map((tagName) => ( + removeTag(tagName)} + > + {tagName} + + ))} + + + { + e.preventDefault(); + addTag(); + }} + > + setInputValue(value ?? '')} + {...{ onSubmit: isReactNative() ? () => addTag() : undefined }} + /> + + + + + ); +};