@ledgerhq/react-ui 0.14.9 → 0.14.10-nightly.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/Chart/Chart.stories.js.map +1 -1
- package/lib/cjs/components/Chart/index.js.map +1 -1
- package/lib/cjs/components/Chart/utils.js.map +1 -1
- package/lib/cjs/components/Table/Table.stories.js +1 -1
- package/lib/cjs/components/Table/Table.stories.js.map +2 -2
- package/lib/cjs/components/Table/index.js.map +1 -1
- package/lib/cjs/components/Table/stories.helper.js.map +1 -1
- package/lib/cjs/components/Tag/index.js.map +1 -1
- package/lib/cjs/components/asorted/Divider/index.js.map +1 -1
- package/lib/cjs/components/asorted/Icon/BoxedIcon.js.map +1 -1
- package/lib/cjs/components/asorted/Icon/CryptoIcon.js.map +1 -1
- package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js.map +1 -1
- package/lib/cjs/components/asorted/Icon/Icon.js.map +1 -1
- package/lib/cjs/components/asorted/Icon/Icons.stories.js.map +1 -1
- package/lib/cjs/components/asorted/Icon/IconsLegacy.stories.js.map +1 -1
- package/lib/cjs/components/asorted/Text/index.js.map +1 -1
- package/lib/cjs/components/asorted/Text/styles.js.map +1 -1
- package/lib/cjs/components/cards/Carousel/Slide.js.map +1 -1
- package/lib/cjs/components/cards/Carousel/index.js +4 -1
- package/lib/cjs/components/cards/Carousel/index.js.map +2 -2
- package/lib/cjs/components/cta/Button/Button.stories.js.map +1 -1
- package/lib/cjs/components/cta/Button/index.js.map +1 -1
- package/lib/cjs/components/cta/Link/index.js.map +1 -1
- package/lib/cjs/components/form/BaseInput/Input.stories.js.map +2 -2
- package/lib/cjs/components/form/BaseInput/index.js.map +1 -1
- package/lib/cjs/components/form/Checkbox/Checkbox.js.map +1 -1
- package/lib/cjs/components/form/DropdownGeneric/index.js.map +1 -1
- package/lib/cjs/components/form/LegendInput/index.js.map +1 -1
- package/lib/cjs/components/form/NumberInput/index.js.map +1 -1
- package/lib/cjs/components/form/QrCodeInput/index.js.map +1 -1
- package/lib/cjs/components/form/QuantityInput/index.js.map +1 -1
- package/lib/cjs/components/form/Radio/RadioElement.js.map +1 -1
- package/lib/cjs/components/form/Radio/RadioListElement.js.map +1 -1
- package/lib/cjs/components/form/SelectInput/Control.js.map +1 -1
- package/lib/cjs/components/form/SelectInput/MenuList.js.map +1 -1
- package/lib/cjs/components/form/SelectInput/Option.js.map +1 -1
- package/lib/cjs/components/form/SplitInput/SplitInput.stories.js.map +1 -1
- package/lib/cjs/components/form/SplitInput/index.js.map +1 -1
- package/lib/cjs/components/form/Switch/Switch.js.map +1 -1
- package/lib/cjs/components/layout/Drawer/index.js.map +1 -1
- package/lib/cjs/components/layout/Grid/Grid.stories.js.map +1 -1
- package/lib/cjs/components/layout/Grid/index.js.map +1 -1
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js.map +1 -1
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map +1 -1
- package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js +2 -1
- package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js.map +2 -2
- package/lib/cjs/components/layout/Popin/Popin.stories.js.map +1 -1
- package/lib/cjs/components/layout/Popin/index.js.map +1 -1
- package/lib/cjs/components/layout/Side/Provider.js.map +2 -2
- package/lib/cjs/components/layout/Side/Side.stories.js.map +1 -1
- package/lib/cjs/components/loaders/InfiniteLoader/index.js.map +1 -1
- package/lib/cjs/components/message/Alert/index.js.map +1 -1
- package/lib/cjs/components/message/Log/index.js.map +1 -1
- package/lib/cjs/components/message/Notification/Badge.js.map +1 -1
- package/lib/cjs/components/message/Notification/index.js.map +1 -1
- package/lib/cjs/components/message/StatusNotification/index.js.map +1 -1
- package/lib/cjs/components/message/Tip/index.js.map +1 -1
- package/lib/cjs/components/message/Tooltip/index.js.map +1 -1
- package/lib/cjs/components/message/Tooltip/styles.js.map +1 -1
- package/lib/cjs/components/navigation/Aside/index.js.map +1 -1
- package/lib/cjs/components/navigation/Breadcrumb/Breadcrumb.stories.js.map +2 -2
- package/lib/cjs/components/navigation/Breadcrumb/index.js.map +1 -1
- package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js.map +1 -1
- package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.js.map +1 -1
- package/lib/cjs/components/navigation/progress/Stepper/index.js.map +1 -1
- package/lib/cjs/components/navigation/sideBar/Item/Item.js.map +1 -1
- package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.js.map +1 -1
- package/lib/cjs/components/navigation/sideBar/Toggle/Toggle.js.map +1 -1
- package/lib/cjs/components/tabs/Bar/index.js.map +1 -1
- package/lib/cjs/components/tabs/Chip/index.js.map +1 -1
- package/lib/cjs/components/tabs/Pill/index.js.map +1 -1
- package/lib/cjs/components/tabs/Tabs/index.js.map +2 -2
- package/lib/cjs/components/transitions/TransitionInOut.js.map +1 -1
- package/lib/cjs/components/transitions/TransitionScale.js.map +1 -1
- package/lib/cjs/components/transitions/TransitionSlide.js.map +1 -1
- package/lib/cjs/styles/Spacing.stories.js.map +1 -1
- package/lib/cjs/styles/global.js.map +1 -1
- package/lib/cjs/styles/helpers.js.map +1 -1
- package/lib/cjs/styles/palettes/colors.stories.js.map +1 -1
- package/lib/cjs/styles/theme.js +8 -8
- package/lib/cjs/styles/theme.js.map +2 -2
- package/lib/components/animations/GlitchText/index.d.ts +2 -2
- package/lib/components/asorted/Icon/BoxedIcon.d.ts +2 -2
- package/lib/components/cards/Carousel/index.js +2 -2
- package/lib/components/cards/Carousel/index.js.map +1 -1
- package/lib/components/cta/Button/index.d.ts +1 -3
- package/lib/components/cta/Toggle/index.d.ts +2 -2
- package/lib/components/form/DropdownGeneric/index.d.ts +1 -1
- package/lib/components/form/SelectInput/VirtualMenuList.d.ts +1 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineIndicator.d.ts +1 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.d.ts +1 -1
- package/lib/components/layout/List/VerticalTimeline/index.d.ts +1 -1
- package/lib/components/layout/Popin/index.d.ts +1 -1
- package/lib/components/layout/Side/Provider.js.map +1 -1
- package/lib/components/navigation/FlowStepper/index.d.ts +4 -4
- package/lib/components/navigation/progress/Stepper/index.d.ts +1 -1
- package/lib/components/tabs/Tabs/index.d.ts +1 -1
- package/lib/components/transitions/TransitionScale.d.ts +1 -1
- package/lib/components/transitions/TransitionSlide.d.ts +1 -1
- package/lib/styles/theme.js +8 -8
- package/lib/styles/theme.js.map +1 -1
- package/package.json +11 -11
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Switch/Switch.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Container = styled(Flex).attrs({ alignItems: \"center\", flexDirection: \"row\" })`\n width: fit-content;\n column-gap: ${p => p.theme.space[5]}px;\n cursor: pointer;\n\n /* reversed VARIANT */\n &[data-reversed=\"true\"] {\n flex-direction: row-reverse;\n }\n\n &[data-disabled=\"true\"] {\n cursor: unset;\n }\n`;\n\nconst Input = styled.input`\n position: absolute;\n visibility: hidden;\n`;\n\nconst Label = styled(Text)`\n &:first-letter {\n text-transform: uppercase;\n }\n`;\n\nconst Switcher = styled.div`\n --ll-switch-width: ${p => p.theme.space[14]}px;\n --ll-switch-height: ${p => p.theme.space[9]}px;\n --ll-switch-padding: ${p => p.theme.space[2]}px;\n\n position: relative;\n display: inline-block;\n\n background: ${props => props.theme.colors.neutral.c60};\n border-radius: ${p => p.theme.space[6]}px;\n width: var(--ll-switch-width);\n height: var(--ll-switch-height);\n\n transition: background 200ms;\n\n &:before,\n &:after {\n content: \"\";\n }\n\n &:focus {\n outline-style: auto;\n outline: 1px solid ${props => props.theme.colors.neutral.c90};\n outline-offset: ${p => p.theme.space[1]}px;\n }\n\n /* CIRCLE ELEMENT */\n &:before {\n position: absolute;\n display: block;\n background: ${props => props.theme.colors.constant.white};\n border-radius: ${p => p.theme.space[12]}px;\n\n width: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));\n height: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));\n top: var(--ll-switch-padding);\n transform: translateX(var(--ll-switch-padding));\n transition: transform 0.25s;\n }\n\n /* SMALL VARIANT */\n &[data-size=\"small\"] {\n --ll-switch-width: ${p => p.theme.space[8]}px;\n --ll-switch-height: ${p => p.theme.space[6]}px;\n }\n\n &:hover {\n background-color: ${props => props.theme.colors.neutral.c70};\n }\n\n &:active {\n background-color: ${props => props.theme.colors.neutral.c80};\n }\n\n /* CHECKED VARIANT */\n ${Input}:checked ~ & {\n background: ${props => props.theme.colors.primary.c80};\n\n &:before {\n transform: translateX(calc(var(--ll-switch-width) / 2));\n }\n\n &:hover {\n background: ${props => props.theme.colors.primary.c90};\n }\n\n :active {\n background: ${props => props.theme.colors.primary.c100};\n }\n }\n`;\n\nexport type SwitchProps = {\n name: string;\n checked: boolean;\n onChange: (e: React.FormEvent<HTMLDivElement>) => void;\n size?: \"normal\" | \"small\";\n label?: string;\n disabled?: boolean;\n reversed?: boolean;\n};\n\nconst Switch = ({\n name,\n checked,\n onChange,\n label,\n disabled,\n reversed,\n size,\n}: SwitchProps): JSX.Element => {\n const handleFocusKeyDown = (e: React.FormEvent<HTMLDivElement> & { key: string }) => {\n if (e.key.match(/enter/i)) onChange(e);\n };\n\n const handleClick = (e: React.FormEvent<HTMLDivElement>) => {\n if (!disabled) onChange(e);\n };\n\n return (\n <Container\n role=\"button\"\n data-reversed={reversed}\n data-disabled={disabled}\n onClick={handleClick}\n tabIndex={0}\n aria-pressed={checked}\n onKeyDown={handleFocusKeyDown}\n >\n <Input type=\"checkbox\" name={name} id={name} disabled={disabled} checked={checked} />\n <Switcher data-size={size} />\n {label ? <Label variant=\"paragraph\">{label}</Label> : null}\n </Container>\n );\n};\n\nexport default Switch;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,YAAY,UAAU,eAAe,MAAM,CAAC;AAAA;AAAA,gBAEnE,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,YAAY,UAAU,eAAe,MAAM,CAAC;AAAA;AAAA,gBAEnE,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAarC,MAAM,QAAQ,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAKrB,MAAM,YAAQ,yBAAAA,SAAO,YAAAE,OAAI;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,WAAW,yBAAAF,QAAO;AAAA,uBACD,OAAK,EAAE,MAAM,MAAM,EAAE,CAAC;AAAA,wBACrB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,yBACpB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK9B,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,mBACpC,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAaf,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,sBAC1C,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOzB,WAAS,MAAM,MAAM,OAAO,SAAS,KAAK;AAAA,qBACvC,OAAK,EAAE,MAAM,MAAM,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAWlB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,0BACpB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIvB,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIvC,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,IAI3D,KAAK;AAAA,kBACS,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOrC,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,oBAIvC,WAAS,MAAM,MAAM,OAAO,QAAQ,IAAI;AAAA;AAAA;AAAA;AAe5D,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,qBAAqB,CAAC,MAAyD;AACnF,QAAI,EAAE,IAAI,MAAM,QAAQ;AAAG,eAAS,CAAC;AAAA,EACvC;AAEA,QAAM,cAAc,CAAC,MAAuC;AAC1D,QAAI,CAAC;AAAU,eAAS,CAAC;AAAA,EAC3B;AAEA,SACE,6BAAAG,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,SAAM,MAAK,YAAW,MAAY,IAAI,MAAM,UAAoB,SAAkB;AAAA,IACnF,6BAAAA,QAAA,cAAC,YAAS,aAAW,MAAM;AAAA,IAC1B,QAAQ,6BAAAA,QAAA,cAAC,SAAM,SAAQ,eAAa,KAAM,IAAW;AAAA,EACxD;AAEJ;AAEA,IAAO,iBAAQ;",
|
|
6
6
|
"names": ["styled", "Flex", "Text", "React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Drawer/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/reactLegacy/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium\";\n\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\n\nexport enum Direction {\n Left = \"left\",\n Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n width: 100%;\n height: 100%;\n flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n big?: boolean;\n}>`\n height: 100%;\n width: ${p =>\n p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n flex-direction: column;\n align-items: stretch;\n justify-content: space-between;\n z-index: ${p => p.theme.zIndexes[8]};\n`;\n\nconst Overlay = styled.div<{ direction: Direction }>`\n display: flex;\n position: fixed;\n justify-content: ${p => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 999;\n background-color: ${p => p.theme.colors.constant.overlay};\n`;\n\nconst ScrollWrapper = styled(FlexBox)`\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nconst ButtonPlaceholder = styled.div`\n min-width: ${p => p.theme.space[12]}px;\n`;\n\nexport interface DrawerProps {\n isOpen: boolean;\n children: React.ReactNode;\n title?: React.ReactNode;\n footer?: React.ReactNode;\n big?: boolean;\n ignoreBackdropClick?: boolean;\n backgroundColor?: string;\n onClose: () => void;\n onBack?: () => void;\n setTransitionsEnabled?: (arg0: boolean) => void;\n hideNavigation?: boolean;\n menuPortalTarget?: Element | null;\n direction?: Direction;\n extraContainerProps?: Partial<FlexBoxProps>;\n extraHeaderProps?: Partial<FlexBoxProps>;\n extraFooterProps?: Partial<FlexBoxProps>;\n extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n (\n {\n isOpen,\n title,\n children,\n footer,\n big,\n onClose,\n backgroundColor,\n setTransitionsEnabled = () => 0,\n onBack,\n extraContainerProps,\n extraHeaderProps,\n extraFooterProps,\n extraFooterDividerProps,\n ignoreBackdropClick = false,\n hideNavigation = true,\n direction = Direction.Left,\n }: DrawerProps,\n ref?: React.ForwardedRef<HTMLDivElement>,\n ) => {\n const disableChildAnimations = useCallback(\n () => setTransitionsEnabled(false),\n [setTransitionsEnabled],\n );\n const enableChildAnimations = useCallback(\n () => setTransitionsEnabled(true),\n [setTransitionsEnabled],\n );\n\n const handleBackdropClick = useCallback(() => {\n if (!ignoreBackdropClick) {\n onClose();\n }\n }, [onClose, ignoreBackdropClick]);\n\n const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n e.stopPropagation();\n }, []);\n\n return (\n <TransitionInOut\n in={isOpen}\n appear\n mountOnEnter\n unmountOnExit\n onEntering={disableChildAnimations}\n onEntered={enableChildAnimations}\n onExiting={disableChildAnimations}\n >\n <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n <TransitionSlide\n in={isOpen}\n direction={direction}\n fixed\n reverseExit\n appear\n mountOnEnter\n unmountOnExit\n >\n <Wrapper\n big={big}\n onClick={stopClickPropagation}\n backgroundColor={backgroundColor ?? \"background.main\"}\n >\n <Container>\n <FlexBox\n justifyContent=\"space-between\"\n alignItems=\"center\"\n p={12}\n pb={10}\n {...extraHeaderProps}\n >\n {!hideNavigation && (\n <>\n {onBack != null ? (\n <Button variant=\"neutral\" onClick={onBack} Icon={ArrowLeft} />\n ) : (\n <ButtonPlaceholder />\n )}\n </>\n )}\n {(\n <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n {title}\n </Text>\n ) || <div />}\n <FlexBox alignSelf=\"flex-start\">\n <Button variant=\"neutral\" onClick={onClose} Icon={Close} />\n </FlexBox>\n </FlexBox>\n <ScrollWrapper\n flexDirection=\"column\"\n alignItems=\"stretch\"\n overflow=\"scroll\"\n position=\"relative\"\n p={12}\n pt={0}\n flex={1}\n {...extraContainerProps}\n >\n {children}\n </ScrollWrapper>\n {footer && (\n <>\n <Divider {...extraFooterDividerProps} />\n <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n {footer}\n </FlexBox>\n </>\n )}\n </Container>\n </Wrapper>\n </TransitionSlide>\n </Overlay>\n </TransitionInOut>\n );\n },\n);\n\nconst Drawer = (\n { children, menuPortalTarget, ...sideProps }: DrawerProps,\n ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n const $root = React.useMemo(\n () =>\n menuPortalTarget === undefined && typeof document !== \"undefined\"\n ? document.querySelector(\"body\")\n : menuPortalTarget,\n [menuPortalTarget],\n );\n if (!$root) {\n return (\n <DrawerContent ref={ref} {...sideProps}>\n {children}\n </DrawerContent>\n );\n } else {\n return ReactDOM.createPortal(\n <DrawerContent ref={ref} {...sideProps}>\n {children}\n </DrawerContent>,\n $root,\n );\n }\n};\n\nexport default React.forwardRef(Drawer);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqB;AACrB,+BAAmB;AACnB,kBAAsC;AACtC,qBAA+C;AAC/C,yBAAkB;AAClB,6BAAsB;AAEtB,6BAA4B;AAC5B,6BAA4B;AAC5B,kBAAiB;AACjB,oBAAmB;AAEZ,IAAK,YAAL,kBAAKA,eAAL;AACL,EAAAA,WAAA,UAAO;AACP,EAAAA,WAAA,WAAQ;AAFE,SAAAA;AAAA,GAAA;AAKZ,MAAM,gBAAY,yBAAAC,SAAO,YAAAC,OAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,cAAU,yBAAAD,SAAO,YAAAC,OAAO;AAAA;AAAA,WAInB,OACP,EAAE,MAAM,EAAE,MAAM,MAAM,OAAO,KAAK,IAAI,QAAQ,EAAE,MAAM,MAAM,OAAO,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqB;AACrB,+BAAmB;AACnB,kBAAsC;AACtC,qBAA+C;AAC/C,yBAAkB;AAClB,6BAAsB;AAEtB,6BAA4B;AAC5B,6BAA4B;AAC5B,kBAAiB;AACjB,oBAAmB;AAEZ,IAAK,YAAL,kBAAKA,eAAL;AACL,EAAAA,WAAA,UAAO;AACP,EAAAA,WAAA,WAAQ;AAFE,SAAAA;AAAA,GAAA;AAKZ,MAAM,gBAAY,yBAAAC,SAAO,YAAAC,OAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,cAAU,yBAAAD,SAAO,YAAAC,OAAO;AAAA;AAAA,WAInB,OACP,EAAE,MAAM,EAAE,MAAM,MAAM,OAAO,KAAK,IAAI,QAAQ,EAAE,MAAM,MAAM,OAAO,KAAK,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,aAI1E,OAAK,EAAE,MAAM,SAAS,CAAC,CAAC;AAAA;AAGrC,MAAM,UAAU,yBAAAD,QAAO;AAAA;AAAA;AAAA,qBAGF,OAAM,EAAE,cAAc,oBAAiB,aAAa,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMhE,OAAK,EAAE,MAAM,OAAO,SAAS,OAAO;AAAA;AAG1D,MAAM,oBAAgB,yBAAAA,SAAO,YAAAC,OAAO;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,oBAAoB,yBAAAD,QAAO;AAAA,eAClB,OAAK,EAAE,MAAM,MAAM,EAAE,CAAC;AAAA;AAuBrC,MAAM,gBAAgB,aAAAE,QAAM;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB,MAAM;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,iBAAiB;AAAA,IACjB,YAAY;AAAA,EACd,GACA,QACG;AACH,UAAM,6BAAyB;AAAA,MAC7B,MAAM,sBAAsB,KAAK;AAAA,MACjC,CAAC,qBAAqB;AAAA,IACxB;AACA,UAAM,4BAAwB;AAAA,MAC5B,MAAM,sBAAsB,IAAI;AAAA,MAChC,CAAC,qBAAqB;AAAA,IACxB;AAEA,UAAM,0BAAsB,0BAAY,MAAM;AAC5C,UAAI,CAAC,qBAAqB;AACxB,gBAAQ;AAAA,MACV;AAAA,IACF,GAAG,CAAC,SAAS,mBAAmB,CAAC;AAEjC,UAAM,2BAAuB,0BAAY,CAAC,MAAwB;AAChE,QAAE,gBAAgB;AAAA,IACpB,GAAG,CAAC,CAAC;AAEL,WACE,6BAAAA,QAAA;AAAA,MAAC,uBAAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,QAAM;AAAA,QACN,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,WAAW;AAAA;AAAA,MAEX,6BAAAD,QAAA,cAAC,WAAQ,WAAsB,SAAS,qBAAqB,OAC3D,6BAAAA,QAAA;AAAA,QAAC,uBAAAE;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ;AAAA,UACA,OAAK;AAAA,UACL,aAAW;AAAA,UACX,QAAM;AAAA,UACN,cAAY;AAAA,UACZ,eAAa;AAAA;AAAA,QAEb,6BAAAF,QAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,YACT,iBAAiB,mBAAmB;AAAA;AAAA,UAEpC,6BAAAA,QAAA,cAAC,iBACC,6BAAAA,QAAA;AAAA,YAAC,YAAAD;AAAA,YAAA;AAAA,cACC,gBAAe;AAAA,cACf,YAAW;AAAA,cACX,GAAG;AAAA,cACH,IAAI;AAAA,cACH,GAAG;AAAA;AAAA,YAEH,CAAC,kBACA,6BAAAC,QAAA,2BAAAA,QAAA,gBACG,UAAU,OACT,6BAAAA,QAAA,cAAC,cAAAG,SAAA,EAAO,SAAQ,WAAU,SAAS,QAAQ,MAAM,uBAAAC,SAAW,IAE5D,6BAAAJ,QAAA,cAAC,uBAAkB,CAEvB;AAAA,YAGA,6BAAAA,QAAA,cAAC,YAAAK,SAAA,EAAK,SAAS,MAAM,MAAM,GAAG,WAAU,YACrC,KACH,KACG,6BAAAL,QAAA,cAAC,WAAI;AAAA,YACV,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAQ,WAAU,gBACjB,6BAAAC,QAAA,cAAC,cAAAG,SAAA,EAAO,SAAQ,WAAU,SAAS,SAAS,MAAM,mBAAAG,SAAO,CAC3D;AAAA,UACF,GACA,6BAAAN,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAc;AAAA,cACd,YAAW;AAAA,cACX,UAAS;AAAA,cACT,UAAS;AAAA,cACT,GAAG;AAAA,cACH,IAAI;AAAA,cACJ,MAAM;AAAA,cACL,GAAG;AAAA;AAAA,YAEH;AAAA,UACH,GACC,UACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,eAAAO,SAAA,EAAS,GAAG,yBAAyB,GACtC,6BAAAP,QAAA,cAAC,YAAAD,SAAA,EAAQ,YAAW,UAAS,IAAI,GAAG,IAAI,IAAK,GAAG,oBAC7C,MACH,CACF,CAEJ;AAAA,QACF;AAAA,MACF,CACF;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,MAAM,SAAS,CACb,EAAE,UAAU,kBAAkB,GAAG,UAAU,GAC3C,QACuB;AACvB,QAAM,QAAQ,aAAAC,QAAM;AAAA,IAClB,MACE,qBAAqB,UAAa,OAAO,aAAa,cAClD,SAAS,cAAc,MAAM,IAC7B;AAAA,IACN,CAAC,gBAAgB;AAAA,EACnB;AACA,MAAI,CAAC,OAAO;AACV,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAW,GAAG,aAC1B,QACH;AAAA,EAEJ,OAAO;AACL,WAAO,iBAAAQ,QAAS;AAAA,MACd,6BAAAR,QAAA,cAAC,iBAAc,KAAW,GAAG,aAC1B,QACH;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,iBAAQ,aAAAA,QAAM,WAAW,MAAM;",
|
|
6
6
|
"names": ["Direction", "styled", "FlexBox", "React", "TransitionInOut", "TransitionSlide", "Button", "ArrowLeft", "Text", "Close", "Divider", "ReactDOM"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Grid/Grid.stories.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { grid, GridProps, color, ColorProps, space, SpaceProps } from \"styled-system\";\nimport Grid from \"./index\";\nimport Text from \"../../asorted/Text\";\n\n// Just a stylable div used as a base grid element for the purpose of this story.\nconst Cell = styled.div<ColorProps & SpaceProps & GridProps>`\n // Make the div semi-opaque to show grid composition.\n opacity: 0.7;\n ${color}\n ${space}\n ${grid}\n`;\n\nexport default {\n title: \"Layout/Grid\",\n component: Grid,\n argTypes: {\n columns: {\n type: \"number\",\n description:\n \"The number of columns set with a `repeat(N, minmax(0, 1fr))` pattern or `none` to disable.\",\n table: {\n category: \"Container\",\n defaultValue: {\n summary: 12,\n },\n },\n },\n rows: {\n type: \"number\",\n description:\n \"The number of rows set with a `repeat(N, minmax(0, 1fr))` pattern or `none` to disable.\",\n table: {\n category: \"Container\",\n defaultValue: {\n summary: \"initial\",\n },\n },\n },\n gridTemplateColumns: {\n type: \"string\",\n description:\n \"The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.\",\n table: {\n category: \"Container\",\n },\n },\n gridTemplateRows: {\n type: \"string\",\n description:\n \"The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.\",\n table: {\n category: \"Container\",\n },\n },\n gridTemplateAreas: {\n type: \"string\",\n description:\n \"The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.\",\n table: {\n category: \"Container\",\n },\n },\n gridAutoColumns: {\n type: \"string\",\n description:\n \"The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.\",\n table: {\n category: \"Container\",\n },\n },\n gridAutoRows: {\n type: \"string\",\n description:\n \"The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.\",\n table: {\n category: \"Container\",\n },\n },\n gridAutoFlow: {\n type: \"string\",\n description:\n \"The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.\",\n options: [\"row\", \"column\", \"dense\", \"row dense\", \"column dense\"],\n control: {\n type: \"select\",\n },\n table: {\n category: \"Container\",\n },\n },\n gridGap: {\n type: \"number\",\n description:\n \"The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.\",\n table: {\n category: \"Container\",\n },\n },\n gridRowGap: {\n type: \"number\",\n description:\n \"The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows.\",\n table: {\n category: \"Container\",\n },\n },\n gridColumnGap: {\n type: \"number\",\n description:\n \"The column-gap CSS property sets the size of the gap (gutter) between an element's columns.\",\n table: {\n category: \"Container\",\n },\n },\n gridColumn: {\n type: \"string\",\n description:\n \"The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.\",\n table: {\n category: \"Cell\",\n },\n },\n gridRow: {\n type: \"string\",\n description:\n \"The grid-row CSS shorthand property specifies a grid item\u2019s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.\",\n table: {\n category: \"Cell\",\n },\n },\n gridArea: {\n type: \"string\",\n description:\n \"The grid-area CSS shorthand property specifies a grid item\u2019s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.\",\n table: {\n category: \"Cell\",\n },\n },\n },\n};\nconst cells = Array.from(\n {\n length: 47,\n },\n (_, i) => {\n // Apply some span to showoff the grid system a bit.\n const colSpan = i % 7 === 0 ? 4 : i % 5 === 0 ? 3 : i % 3 === 0 ? 2 : 0;\n const rowSpan = i % 14 === 0 ? 2 : i % 6 === 0 ? 4 : 0;\n return (\n <Cell\n key={i}\n backgroundColor=\"aliceBlue\"\n padding={1}\n opacity={1}\n gridColumn={colSpan > 0 ? `span ${colSpan}` : \"initial\"}\n gridRow={colSpan > 0 ? `span ${rowSpan}` : \"initial\"}\n >\n {i + 2}\n <div\n style={{\n fontSize: \"10px\",\n }}\n >\n {colSpan > 0 ? `(column span ${colSpan})` : \"\"}\n </div>\n <div\n style={{\n fontSize: \"10px\",\n }}\n >\n {rowSpan > 0 ? `(row span ${rowSpan})` : \"\"}\n </div>\n </Cell>\n );\n },\n);\n\n// eslint-disable-next-line\nconst DefaultTemplate = ({ gridColumn, gridRow, gridArea, ...args }: any) => {\n return (\n <>\n <Text\n style={{\n marginBottom: \"1em\",\n }}\n >\n A 12 columns grid using default props and containing cells with various span values.\n </Text>\n <Grid {...args}>\n <Cell\n key=\"-1\"\n backgroundColor=\"aliceBlue\"\n padding={1}\n opacity={1}\n gridColumn={gridColumn}\n gridRow={gridRow}\n gridArea={gridArea}\n >\n 1\n </Cell>\n {cells}\n </Grid>\n </>\n );\n};\n\nexport const Default = DefaultTemplate;\n// @ts-expect-error FIXME\nDefault.args = {\n gridGap: 1,\n};\n\n// eslint-disable-next-line\nconst FixedTemplate = ({ gridColumn, gridRow, gridArea, ...args }: any) => (\n <>\n <Text\n style={{\n marginBottom: \"1em\",\n }}\n >\n This example with fixed cells is taken from the{\" \"}\n <a\n href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout\"\n style={{\n cursor: \"pointer\",\n }}\n >\n MDN\n </a>{\" \"}\n documentation.\n </Text>\n <Grid {...args}>\n <>\n <Cell\n color=\"white\"\n padding=\"2\"\n gridColumn={gridColumn}\n gridRow={gridRow}\n gridArea={gridArea}\n backgroundColor=\"red\"\n >\n Control me using {`\"Cell\"`} props.\n </Cell>\n <Cell gridColumn=\"2 / 4\" gridRow=\"1 / 3\" backgroundColor=\"blue\" />\n <Cell gridColumn=\"1\" gridRow=\"2 / 5\" backgroundColor=\"green\" />\n <Cell gridColumn=\"3\" gridRow=\"3\" backgroundColor=\"purple\" />\n <Cell gridColumn=\"2\" gridRow=\"4\" backgroundColor=\"teal\" />\n <Cell gridColumn=\"3\" gridRow=\"4\" backgroundColor=\"brown\" />\n </>\n </Grid>\n </>\n);\n\nexport const Fixed = FixedTemplate;\n// @ts-expect-error FIXME\nFixed.args = {\n columns: 3,\n rows: undefined,\n gridAutoRows: \"100px\",\n gridGap: 1,\n gridTemplateColumns: undefined,\n gridTemplateRows: undefined,\n gridTemplateAreas: undefined,\n gridRowGap: undefined,\n gridColumnGap: undefined,\n gridColumn: \"1/3\",\n gridRow: \"1\",\n gridArea: undefined,\n gridAutoFlow: undefined,\n gridAutoColumns: undefined,\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,2BAAsE;AACtE,mBAAiB;AACjB,kBAAiB;AAGjB,MAAM,OAAO,yBAAAA,QAAO;AAAA;AAAA;AAAA,IAGhB;AAAA,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "Grid", "React", "Text"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Grid/index.ts"],
|
|
4
4
|
"sourcesContent": ["import { grid, GridProps } from \"styled-system\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport interface Props extends GridProps, BaseStyledProps {\n columns?: number | string;\n rows?: number | string;\n}\n\nfunction getColumns(props: Props) {\n const { columns } = props;\n return columns === \"none\" ? columns : `repeat(${columns || 12}, minmax(0, 1fr));`;\n}\n\nfunction getRows(props: Props) {\n const { rows } = props;\n return !rows ? \"initial\" : rows === \"none\" ? rows : `repeat(${rows}, minmax(0, 1fr));`;\n}\n\nconst Grid = baseStyled.div<Props>`\n display: grid;\n grid-template-columns: ${getColumns};\n grid-template-rows: ${getRows};\n ${grid};\n`;\nexport default Grid;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAgC;AAChC,oBAA4C;AAO5C,SAAS,WAAW,OAAc;AAChC,QAAM,EAAE,QAAQ,IAAI;AACpB,SAAO,YAAY,SAAS,UAAU,UAAU,WAAW;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAgC;AAChC,oBAA4C;AAO5C,SAAS,WAAW,OAAc;AAChC,QAAM,EAAE,QAAQ,IAAI;AACpB,SAAO,YAAY,SAAS,UAAU,UAAU,WAAW,EAAE;AAC/D;AAEA,SAAS,QAAQ,OAAc;AAC7B,QAAM,EAAE,KAAK,IAAI;AACjB,SAAO,CAAC,OAAO,YAAY,SAAS,SAAS,OAAO,UAAU,IAAI;AACpE;AAEA,MAAM,OAAO,cAAAA,QAAW;AAAA;AAAA,2BAEG,UAAU;AAAA,wBACb,OAAO;AAAA,IAC3B,yBAAI;AAAA;AAER,IAAO,eAAQ;",
|
|
6
6
|
"names": ["baseStyled"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"src/styles/theme\";\n\nconst linesWidth = 2;\n\nconst BottomSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n flex: 1;\n border-left-width: ${p => (p.hidden ? 0 : linesWidth)}px;\n border-right-width: 0;\n border-style: dashed;\n border-color: ${p =>\n p.status === \"completed\" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c40};\n background: ${p => p.status === \"completed\" && p.theme.colors.primary.c80};\n`;\n\nconst getIconBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem) {\n if (status === \"inactive\") return theme.colors.success.c10;\n return \"transparent\";\n } else if (status === \"active\") {\n return theme.colors.neutral.c40;\n } else {\n return \"transparent\";\n }\n};\n\nconst getIconBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem) {\n return theme.colors.success.c70;\n } else if (status === \"inactive\") {\n return theme.colors.neutral.c40;\n }\n return theme.colors.primary.c80;\n};\n\nconst CenterCircle = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n border-radius: 9999px;\n width: 100%;\n background: ${p => getIconBackground(p.theme, p.status, p.isLastItem)};\n border: 2px solid ${p => getIconBorder(p.theme, p.status, p.isLastItem)};\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nconst IconWrapper = styled(Flex)`\n height: 16px;\n width: 16px;\n`;\n\nexport type Props = FlexProps & {\n status: \"inactive\" | \"active\" | \"completed\";\n isFirstItem?: boolean;\n isLastItem?: boolean;\n};\n\nconst topSegmentDefaultHeight = 23;\n\nconst Container = styled(Flex)`\n flex-direction: column;\n align-items: center;\n margin-bottom: ${-topSegmentDefaultHeight}px;\n padding-top: ${topSegmentDefaultHeight}px;\n`;\n\nfunction TimelineIndicator({ status, isLastItem, ...props }: Props) {\n const { colors } = useTheme();\n\n return (\n <Container {...props}>\n <IconWrapper>\n <CenterCircle status={status} isLastItem={isLastItem}>\n {status === \"completed\" && (\n <Flex position=\"absolute\">\n <CircledCheckSolidMedium\n color={isLastItem ? colors.success.c70 : colors.primary.c80}\n size={20}\n />\n </Flex>\n )}\n </CenterCircle>\n </IconWrapper>\n {isLastItem ? null : <BottomSegment status={status} />}\n </Container>\n );\n}\n\nexport default React.memo(TimelineIndicator);\n\nTimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qCAAoC;AACpC,+BAAiC;AAEjC,kBAAgD;AAIhD,MAAM,aAAa;AAEnB,MAAM,oBAAgB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA,uBAEV,OAAM,EAAE,SAAS,IAAI;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qCAAoC;AACpC,+BAAiC;AAEjC,kBAAgD;AAIhD,MAAM,aAAa;AAEnB,MAAM,oBAAgB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA,uBAEV,OAAM,EAAE,SAAS,IAAI,UAAW;AAAA;AAAA;AAAA,kBAGrC,OACd,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACtE,OAAK,EAAE,WAAW,eAAe,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG3E,MAAM,oBAAoB,CAAC,OAAc,QAAoB,eAAyB;AACpF,MAAI,YAAY;AACd,QAAI,WAAW;AAAY,aAAO,MAAM,OAAO,QAAQ;AACvD,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,MAAM,gBAAgB,CAAC,OAAc,QAAoB,eAAyB;AAChF,MAAI,YAAY;AACd,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,YAAY;AAChC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,mBAAe,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,gBAGhB,OAAK,kBAAkB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA,sBACjD,OAAK,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzE,MAAM,kBAAc,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAW/B,MAAM,0BAA0B;AAEhC,MAAM,gBAAY,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,mBAGV,CAAC,uBAAuB;AAAA,iBAC1B,uBAAuB;AAAA;AAGxC,SAAS,kBAAkB,EAAE,QAAQ,YAAY,GAAG,MAAM,GAAU;AAClE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,aAAW,GAAG,SACb,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA,cAAC,gBAAa,QAAgB,cAC3B,WAAW,eACV,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAK,UAAS,cACb,6BAAAC,QAAA;AAAA,IAAC,+BAAAC;AAAA,IAAA;AAAA,MACC,OAAO,aAAa,OAAO,QAAQ,MAAM,OAAO,QAAQ;AAAA,MACxD,MAAM;AAAA;AAAA,EACR,CACF,CAEJ,CACF,GACC,aAAa,OAAO,6BAAAD,QAAA,cAAC,iBAAc,QAAgB,CACtD;AAEJ;AAEA,IAAO,4BAAQ,aAAAA,QAAM,KAAK,iBAAiB;AAE3C,kBAAkB,0BAA0B;",
|
|
6
6
|
"names": ["styled", "Flex", "React", "CircledCheckSolidMedium"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"src/styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n item: Item;\n isFirstItem?: boolean;\n isLastItem?: boolean;\n onClick?: () => void;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (status === \"active\") {\n return theme.colors.neutral.c20;\n }\n return \"transparent\";\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (isLastItem && status === \"active\") {\n return theme.colors.success.c50;\n } else if (status === \"active\") {\n return theme.colors.neutral.c40;\n }\n return \"transparent\";\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n flex: 1;\n border-radius: ${p => p.theme.radii[2]}px;\n background: ${p => getContainerBackground(p.theme, p.status)};\n border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};\n padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n justify-content: space-between;\n align-items: center;\n`;\n\nfunction TimelineItem({ item, isFirstItem, isLastItem, onClick }: Props) {\n const { colors } = useTheme();\n\n return (\n <Flex flexDirection=\"row\" onClick={onClick} flex={1}>\n <TimelineIndicator\n status={item.status}\n isFirstItem={isFirstItem}\n isLastItem={isLastItem}\n mr={4}\n />\n <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n <TimelineIndicatorContentHeader height=\"20px\">\n <Text\n variant=\"body\"\n fontWeight={item.status === \"active\" ? \"semiBold\" : \"medium\"}\n color={\n item.status !== \"inactive\" && isLastItem\n ? \"success.c70\"\n : item.status === \"active\"\n ? \"primary.c80\"\n : \"neutral.c70\"\n }\n >\n {item.title}\n </Text>\n {item?.estimatedTime && item.status === \"active\" && (\n <Tag\n size=\"small\"\n type=\"opacity\"\n active\n disabled\n textProps={{ color: colors.neutral.c100 }}\n >{`${item.estimatedTime / 60} min`}</Tag>\n )}\n </TimelineIndicatorContentHeader>\n {item.renderBody && item.status === \"active\" && (\n <Box position=\"relative\" pt={6}>\n {item.renderBody(item.status === \"active\")}\n </Box>\n )}\n </Container>\n </Flex>\n );\n}\n\nexport default React.memo(TimelineItem);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAS9B,MAAM,yBAAyB,CAAC,OAAc,WAAuB;AACnE,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,gBAAY,yBAAAC,SAAO,cAAI;AAAA;AAAA,mBAEV,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAS9B,MAAM,yBAAyB,CAAC,OAAc,WAAuB;AACnE,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,gBAAY,yBAAAC,SAAO,cAAI;AAAA;AAAA,mBAEV,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,gBACxB,OAAK,uBAAuB,EAAE,OAAO,EAAE,MAAM,CAAC;AAAA,sBACxC,OAAK,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA;AAAA;AAI9E,MAAM,qCAAiC,yBAAAA,SAAO,cAAI;AAAA;AAAA;AAAA;AAKlD,SAAS,aAAa,EAAE,MAAM,aAAa,YAAY,QAAQ,GAAU;AACvE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,kBAAK,eAAc,OAAM,SAAkB,MAAM,KAChD,6BAAAA,QAAA;AAAA,IAAC,yBAAAC;AAAA,IAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA;AAAA,EACN,GACA,6BAAAD,QAAA,cAAC,aAAU,QAAQ,KAAK,QAAQ,YAAwB,IAAI,GAAG,eAAc,YAC3E,6BAAAA,QAAA,cAAC,kCAA+B,QAAO,UACrC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAY,KAAK,WAAW,WAAW,aAAa;AAAA,MACpD,OACE,KAAK,WAAW,cAAc,aAC1B,gBACA,KAAK,WAAW,WAChB,gBACA;AAAA;AAAA,IAGL,KAAK;AAAA,EACR,IACC,6BAAM,kBAAiB,KAAK,WAAW,YACtC,6BAAAA,QAAA;AAAA,IAAC,WAAAE;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAM;AAAA,MACN,UAAQ;AAAA,MACR,WAAW,EAAE,OAAO,OAAO,QAAQ,KAAK;AAAA;AAAA,IACxC,GAAG,KAAK,gBAAgB,EAAE;AAAA,EAAO,CAEvC,GACC,KAAK,cAAc,KAAK,WAAW,YAClC,6BAAAF,QAAA,cAAC,iBAAI,UAAS,YAAW,IAAI,KAC1B,KAAK,WAAW,KAAK,WAAW,QAAQ,CAC3C,CAEJ,CACF;AAEJ;AAEA,IAAO,uBAAQ,aAAAA,QAAM,KAAK,YAAY;",
|
|
6
6
|
"names": ["import__", "styled", "React", "TimelineIndicator", "Tag"]
|
|
7
7
|
}
|
|
@@ -66,7 +66,7 @@ const steps = [
|
|
|
66
66
|
*/
|
|
67
67
|
estimatedTime?: number;
|
|
68
68
|
},
|
|
69
|
-
{
|
|
69
|
+
{
|
|
70
70
|
status: ItemStatus;
|
|
71
71
|
title: string;
|
|
72
72
|
renderBody?: (isDisplayed?: boolean) => ReactNode;
|
|
@@ -136,6 +136,7 @@ const defaultItems = [
|
|
|
136
136
|
{
|
|
137
137
|
status: "inactive",
|
|
138
138
|
title: "Nano is ready",
|
|
139
|
+
// @ts-expect-error children props issue
|
|
139
140
|
renderBody: () => /* @__PURE__ */ import_react.default.createElement(BodyText, null, "Almost there ...")
|
|
140
141
|
}
|
|
141
142
|
];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/VerticalTimeline.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useMemo, useState } from \"react\";\nimport Flex from \"../../Flex\";\nimport { Switch } from \"../../../form\";\nimport { Text, Divider } from \"../../../asorted\";\nimport Button from \"../../../cta/Button\";\nimport ContinueOnDevice from \"../../../message/ContinueOnDevice\";\nimport VerticalTimeline from \".\";\nimport type { Item } from \".\";\nconst description = `\n### A Vertical Timeline\n\nThis components accepts an Array of object like this:\n## Usage\n\n\\`\\`\\`js\n\nconst steps = [\n {\n /**\n * status is an ItemStatus which can be inactive, active or completed\n */\n status: ItemStatus;\n /**\n * title is the title of the step\n */\n title: string;\n /**\n * renderBody is an optional prop which is a ReactNode to be rendered next to the title\n */\n renderBody?: (isDisplayed?: boolean) => ReactNode;\n /**\n * estimatedTime is an optional prop that take the estimated time to complete the time in second and display it in a tag in minute\n */\n estimatedTime?: number;\n },\n {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoD;AACpD,kBAAiB;AACjB,kBAAuB;AACvB,qBAA8B;AAC9B,oBAAmB;AACnB,8BAA6B;AAC7B,eAA6B;AAE7B,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCpB,IAAO,mCAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,EAAE,UAAU,aAAa,IAAI,SAAAA;AAEnC,MAAM,eAAuB;AAAA,EAC3B;AAAA,IACE,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MACV,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,MAAM,GAAG,QAAO,aAAY,aAAY,gBAAe,GAAG,
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useMemo, useState } from \"react\";\nimport Flex from \"../../Flex\";\nimport { Switch } from \"../../../form\";\nimport { Text, Divider } from \"../../../asorted\";\nimport Button from \"../../../cta/Button\";\nimport ContinueOnDevice from \"../../../message/ContinueOnDevice\";\nimport VerticalTimeline from \".\";\nimport type { Item } from \".\";\nconst description = `\n### A Vertical Timeline\n\nThis components accepts an Array of object like this:\n## Usage\n\n\\`\\`\\`js\n\nconst steps = [\n {\n /**\n * status is an ItemStatus which can be inactive, active or completed\n */\n status: ItemStatus;\n /**\n * title is the title of the step\n */\n title: string;\n /**\n * renderBody is an optional prop which is a ReactNode to be rendered next to the title\n */\n renderBody?: (isDisplayed?: boolean) => ReactNode;\n /**\n * estimatedTime is an optional prop that take the estimated time to complete the time in second and display it in a tag in minute\n */\n estimatedTime?: number;\n },\n {\n status: ItemStatus;\n title: string;\n renderBody?: (isDisplayed?: boolean) => ReactNode;\n estimatedTime?: number;\n }\n ];\n\n<VerticalTimeline steps={steps as any} />\n\\`\\`\\`\n`;\n\nexport default {\n title: \"Layout/List/VerticalTimeline\",\n argTypes: {\n steps: {\n control: \"disabled\",\n },\n },\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n};\n\nconst { BodyText, SubtitleText } = VerticalTimeline;\n\nconst defaultItems: Item[] = [\n {\n status: \"active\",\n title: \"step's {title} prop\",\n renderBody: () => (\n <Flex flexDirection=\"column\" flex={1} border=\"1px solid\" borderColor=\"neutral.c100\" p={3}>\n {/* @ts-expect-error children props issue */}\n <BodyText>{`This box is the React node returned by the step's {renderBody} prop`}</BodyText>\n <Divider my={6} text=\"`Divider` component\" />\n {/* @ts-expect-error children props issue */}\n <SubtitleText>This subtitle text component is `VerticalTimeline.SubtitleText`</SubtitleText>\n {/* @ts-expect-error children props issue */}\n <BodyText>This body text component is `VerticalTimeline.BodyText`</BodyText>\n <ContinueOnDevice\n Icon={({ size }) => (\n <Flex height={size} width={size} borderRadius={size} bg=\"neutral.c40\" />\n )}\n text=\"This component is `ContinueOnDevice`.\"\n />\n </Flex>\n ),\n },\n {\n status: \"inactive\",\n title: \"Set your PIN\",\n estimatedTime: 120,\n renderBody: () => (\n <Flex flexDirection=\"column\">\n {/* @ts-expect-error children props issue */}\n <BodyText>\n {`Your PIN can be 4 to 8 digits long. Anyone with access to your Nano and to your PIN can also access all your crypto and NFT assets.`}\n </BodyText>\n <ContinueOnDevice\n Icon={({ size }) => (\n <Flex height={size} width={size} borderRadius={size} bg=\"neutral.c40\" />\n )}\n text=\"Set PIN on your Ledger Stax.\"\n />\n </Flex>\n ),\n },\n {\n status: \"inactive\",\n title: \"Recovery phrase\",\n estimatedTime: 300,\n renderBody: () => (\n <Flex flexDirection=\"column\">\n {/* @ts-expect-error children props issue */}\n <SubtitleText>{`Generate a new phrase`}</SubtitleText>\n {/* @ts-expect-error children props issue */}\n <BodyText>\n {`Your device will generate a new secret recovery phrase. For your eyes only.`}\n </BodyText>\n <Divider text=\"OR\" my={6} />\n {/* @ts-expect-error children props issue */}\n <SubtitleText>{`Restore using Secret Recovery Phrase`}</SubtitleText>\n {/* @ts-expect-error children props issue */}\n <BodyText>\n {`Make sure to use a Phrase generated by a Ledger for the guaranteed security of your assets. `}\n </BodyText>\n </Flex>\n ),\n },\n {\n status: \"inactive\",\n title: \"Software check\",\n renderBody: () => (\n <Flex flexDirection=\"column\">\n {/* @ts-expect-error children props issue */}\n <BodyText>{`We'll verify whether your Nano is genuine. This should be quick and easy!`}</BodyText>\n </Flex>\n ),\n },\n {\n status: \"inactive\",\n title: \"Install apps\",\n renderBody: () => (\n <Flex flexDirection=\"column\">\n {/* @ts-expect-error children props issue */}\n <BodyText>{`Installing apps`}</BodyText>\n </Flex>\n ),\n },\n {\n status: \"inactive\",\n title: \"Nano is ready\",\n // @ts-expect-error children props issue\n renderBody: () => <BodyText>Almost there ...</BodyText>,\n },\n];\n\nconst Template = () => {\n const [autoAnimate, setAutoAnimate] = useState(false);\n const [currentIndex, setCurrentIndex] = useState(1);\n\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout> | null = null;\n if (autoAnimate) {\n timeout = setTimeout(() => {\n if (currentIndex === defaultItems.length) {\n setCurrentIndex(0);\n return;\n }\n setCurrentIndex(currentIndex + 1);\n }, 1000);\n }\n return () => {\n timeout && clearTimeout(timeout);\n };\n }, [autoAnimate, currentIndex]);\n\n const items: Item[] = useMemo(\n () =>\n defaultItems.map((item, index) => ({\n ...item,\n status: index < currentIndex ? \"completed\" : index > currentIndex ? \"inactive\" : \"active\",\n })),\n [currentIndex],\n );\n\n return (\n <Flex flexDirection=\"column\" flex={1} alignItems=\"center\">\n <Flex\n flexDirection=\"column\"\n p={6}\n rowGap={3}\n alignSelf=\"stretch\"\n alignItems=\"flex-start\"\n flex={1}\n borderColor=\"neutral.c100\"\n border=\"1px solid\"\n >\n <Text variant=\"h5Inter\">Controls:</Text>\n <Switch\n name=\"Auto animate\"\n label=\"Auto animate steps\"\n checked={autoAnimate}\n onChange={() => setAutoAnimate(!autoAnimate)}\n />\n <Button my={3} variant=\"main\" outline onClick={() => setCurrentIndex(items.length)}>\n Set last step complete\n </Button>\n <Text variant=\"body\">\n Click on a step to make it the active one (this is only for the storybook, not a native\n feature of this component, although you can implement `onClickIndex` to do that)\n </Text>\n </Flex>\n\n <Flex width={432} mt={10}>\n <VerticalTimeline steps={items} onClickIndex={index => setCurrentIndex(index)} />\n </Flex>\n </Flex>\n );\n};\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["VerticalTimeline", "React", "Flex", "ContinueOnDevice", "Button"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Popin/Popin.stories.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\nimport { action } from \"@storybook/addon-actions\";\n\nimport Popin, { PopinProps } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\nimport theme from \"../../../styles/theme\";\n\nconst description = `\n### This is a customizable pop-in component.\n\nThe component exports by default the container that defines how the component should be animated during the mount/unmount process.<br />\nIn addition to that, 3 different sections *(header, body and footer)* of the component are already designed and attached to the Popin default component.<br />\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Popin } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nFrom the default Popin component, you can access 3 different pre-styled sections *(\\`Popin.Header\\`, \\`Popin.Body\\` and \\`Popin.Footer\\`)*. \\\nAll of these components are optional.\n\n- \\`Popin.Header\\` is accepting an onClose callback. The cross icon is only rendered if the onClose callback is provided\n- \\`Popin.Body\\` is just a customizable scrollable Flex component configured to take all the available space\n- \\`Popin.Footer\\` is a customizable Flex component\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.<br />\nAdditionally, the story provide some playground options to play with the component. These options aren't \\\nprops of the component itself.\n`;\n\nconst code = `\n<Popin isOpen={isOpen}>\n <Popin.Header onClose={onBack} onClose={onBack}><Text variant=\"h5\">A title</Text></Popin.Header>\n <Popin.Body><Text variant=\"paragraph\">Some texts here</Text></Popin.Body>\n <Popin.Footer>\n <Button type=\"main\" onClick={onClick}>\n Next\n </Button>\n </Popin.Footer>\n</Popin>\n`;\n\nexport default {\n title: \"Layout/Popin\",\n component: Popin,\n parameters: {\n docs: {\n description: { component: description },\n source: { code, type: \"code\" },\n },\n },\n argTypes: {\n /** PROPS **/\n width: {\n type: \"number\",\n description: \"Optional popin's width\",\n defaultValue: theme.sizes.drawer.popin.max.width,\n control: {\n type: \"number\",\n min: theme.sizes.drawer.popin.min.width,\n max: theme.sizes.drawer.popin.max.width,\n },\n table: {\n type: {\n summary: \"Accepted range\",\n detail: `Value lower than ${theme.sizes.drawer.popin.min.width}px or greather than ${theme.sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`,\n },\n defaultValue: {\n summary: theme.sizes.drawer.popin.min.width,\n },\n },\n },\n height: {\n type: \"number\",\n description: \"Optional popin's height\",\n defaultValue: theme.sizes.drawer.popin.max.width,\n control: {\n type: \"number\",\n min: theme.sizes.drawer.popin.min.height,\n max: theme.sizes.drawer.popin.max.height,\n },\n table: {\n type: {\n summary: \"Accepted range\",\n detail: `Value lower than ${theme.sizes.drawer.popin.min.height}px or greather than ${theme.sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`,\n },\n defaultValue: {\n summary: theme.sizes.drawer.popin.min.height,\n },\n },\n },\n isOpen: {\n type: \"boolean\",\n defaultValue: true,\n description: \"Controls if the popin is mounted or not.\",\n required: true,\n control: { type: \"boolean\" },\n },\n onClose: {\n description:\n \"Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.\",\n control: false,\n },\n\n /** playground **/\n hasHeader: {\n type: \"boolean\",\n value: true,\n description: \"Controls if the header should be displayed.\",\n required: true,\n defaultValue: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n hasFooter: {\n type: \"boolean\",\n value: true,\n description: \"Controls if the footer should be displayed.\",\n required: true,\n defaultValue: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n isCloseDisplayed: {\n type: \"boolean\",\n defaultValue: true,\n description: \"Controls if the close button should be rendered.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n isBackDisplayed: {\n type: \"boolean\",\n defaultValue: true,\n description: \"Controls if the back button should be rendered.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n \"Header.Children.Text\": {\n type: \"text\",\n description:\n \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.\",\n required: true,\n defaultValue: \"This is a fake title\",\n control: { type: \"text\" },\n table: { category: \"playground\" },\n },\n \"Body.Children.Text\": {\n type: \"text\",\n description:\n \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.\",\n required: true,\n defaultValue: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,\n control: { type: \"text\" },\n table: { category: \"playground\" },\n },\n },\n};\n\ntype playgroundProps = {\n \"Header.Children.Text\": string;\n \"Body.Children.Text\": string;\n hasHeader: boolean;\n hasFooter: boolean;\n isCloseDisplayed: boolean;\n isBackDisplayed: boolean;\n};\n\nconst Template = (args: PopinProps & playgroundProps) => {\n const [, updateArgs] = useArgs();\n\n /* Allow interactive controls from the story. Thanks to this, triggering onClose\n ** function from the component itself (by clicking on the cross icon e.g.)\n ** will update the value of the isOpen props.\n */\n const onClose = () => updateArgs({ isOpen: false });\n\n return (\n <>\n <Button variant=\"shade\" onClick={() => updateArgs({ isOpen: true })}>\n Open the modal\n </Button>\n <Popin {...args}>\n {args.hasHeader ? (\n <Popin.Header\n onBack={args.isBackDisplayed ? action(\"previous\") : undefined}\n onClose={args.isCloseDisplayed ? onClose : undefined}\n >\n <Text variant=\"h5\">{args[\"Header.Children.Text\"]}</Text>\n </Popin.Header>\n ) : null}\n <Popin.Body>\n <Text variant=\"paragraph\">{args[\"Body.Children.Text\"]}</Text>\n </Popin.Body>\n {args.hasFooter ? (\n <Popin.Footer flexDirection=\"row-reverse\">\n <Button variant=\"main\" onClick={action(\"next\")}>\n Next\n </Button>\n </Popin.Footer>\n ) : null}\n </Popin>\n </>\n );\n};\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAAwB;AACxB,2BAAuB;AAEvB,mBAAkC;AAClC,kBAAiB;AACjB,oBAAmB;AACnB,mBAAkB;AAElB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BpB,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYb,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa,EAAE,WAAW,YAAY;AAAA,MACtC,QAAQ,EAAE,MAAM,MAAM,OAAO;AAAA,IAC/B;AAAA,EACF;AAAA,EACA,UAAU;AAAA;AAAA,IAER,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc,aAAAC,QAAM,MAAM,OAAO,MAAM,IAAI;AAAA,MAC3C,SAAS;AAAA,QACP,MAAM;AAAA,QACN,KAAK,aAAAA,QAAM,MAAM,OAAO,MAAM,IAAI;AAAA,QAClC,KAAK,aAAAA,QAAM,MAAM,OAAO,MAAM,IAAI;AAAA,MACpC;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,QAAQ,oBAAoB,aAAAA,QAAM,MAAM,OAAO,MAAM,IAAI,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Popin", "theme", "React", "Button", "Text"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Popin/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport CloseIcon from \"@ledgerhq/icons-ui/reactLegacy/CloseMedium\";\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium\";\n\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport Flex from \"../../layout/Flex\";\nimport type { FlexBoxProps } from \"../../layout/Flex\";\nimport Button from \"../../cta/Button\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport TransitionScale from \"../../transitions/TransitionScale\";\n\nexport interface PopinProps extends FlexBoxProps {\n isOpen: boolean;\n children: React.ReactNode;\n menuPortalTarget?: Element | null;\n}\n\nexport type PopinHeaderProps = BaseStyledProps & {\n onClose?: () => void;\n onBack?: () => void;\n children: React.ReactNode;\n};\n\nconst ICON_SIZE = 20;\n\nconst Wrapper = styled(Flex).attrs<FlexBoxProps>(p => ({\n flexDirection: \"column\",\n alignItems: \"stretch\",\n justifyContent: \"space-between\",\n height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,\n width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,\n minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,\n minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,\n maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,\n maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,\n zIndex: p.theme.zIndexes[8],\n p: p.p !== undefined ? p.p : p.theme.space[10],\n rowGap: 6,\n backgroundColor: \"background.main\",\n}))``;\n\nconst Overlay = styled(Flex).attrs(p => ({\n justifyContent: \"center\",\n alignItems: \"center\",\n width: \"100vw\",\n height: \"100vh\",\n zIndex: p.theme.zIndexes[8],\n position: \"fixed\",\n top: 0,\n left: 0,\n backgroundColor: \"constant.overlay\",\n}))``;\n\nconst Header = baseStyled.section`\n display: grid;\n grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;\n column-gap: 12px;\n`;\n\nconst HeaderTitleContainer = styled(Flex).attrs(() => ({\n justifyContent: \"center\",\n}))``;\n\nconst PopinBody = baseStyled(Flex).attrs({\n as: \"section\",\n flexDirection: \"column\",\n flex: 1,\n overflow: \"auto\",\n})``;\n\nconst PopinFooter = baseStyled(Flex).attrs({ as: \"section\" })``;\n\nconst IconContainer = styled(Button.Unstyled)`\n display: flex;\n align-items: center;\n`;\n\nconst PopinHeader = ({ children, onClose, onBack, ...props }: PopinHeaderProps) => (\n <Header {...props}>\n <Flex>\n {onBack ? (\n <IconContainer onClick={onBack}>\n <ArrowLeftIcon size={ICON_SIZE} color=\"neutral.c100\" />\n </IconContainer>\n ) : null}\n </Flex>\n <HeaderTitleContainer>{children}</HeaderTitleContainer>\n <Flex>\n {onClose ? (\n <IconContainer onClick={onClose}>\n <CloseIcon size={ICON_SIZE} color=\"neutral.c100\" />\n </IconContainer>\n ) : null}\n </Flex>\n </Header>\n);\n\nconst Popin = ({ isOpen, children, width, height, ...props }: PopinProps) => (\n <TransitionInOut in={isOpen} appear mountOnEnter unmountOnExit>\n <Overlay>\n <TransitionScale in={isOpen} appear>\n <Wrapper width={width} height={height} {...props}>\n {children}\n </Wrapper>\n </TransitionScale>\n </Overlay>\n </TransitionInOut>\n);\n\nconst PopinWrapper = ({\n children,\n menuPortalTarget,\n ...popinProps\n}: PopinProps): React.ReactElement => {\n const $root = React.useMemo(\n () =>\n menuPortalTarget === undefined && typeof document !== \"undefined\"\n ? document.querySelector(\"body\")\n : menuPortalTarget,\n [menuPortalTarget],\n );\n if (!$root) {\n return <Popin {...popinProps}>{children}</Popin>;\n } else {\n return ReactDOM.createPortal(<Popin {...popinProps}>{children}</Popin>, $root);\n }\n};\n\nPopinWrapper.Header = PopinHeader;\nPopinWrapper.Body = PopinBody;\nPopinWrapper.Footer = PopinFooter;\n\nexport default PopinWrapper;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAqB;AACrB,+BAAmB;AACnB,yBAAsB;AACtB,6BAA0B;AAE1B,oBAA4C;AAC5C,kBAAiB;AAEjB,oBAAmB;AACnB,6BAA4B;AAC5B,6BAA4B;AAc5B,MAAM,YAAY;AAElB,MAAM,cAAU,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAoB,QAAM;AAAA,EACrD,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,QAAQ,EAAE,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAqB;AACrB,+BAAmB;AACnB,yBAAsB;AACtB,6BAA0B;AAE1B,oBAA4C;AAC5C,kBAAiB;AAEjB,oBAAmB;AACnB,6BAA4B;AAC5B,6BAA4B;AAc5B,MAAM,YAAY;AAElB,MAAM,cAAU,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAoB,QAAM;AAAA,EACrD,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,QAAQ,EAAE,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI,MAAM;AAAA,EAC5D,OAAO,EAAE,SAAS,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK;AAAA,EACzD,WAAW,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI,MAAM;AAAA,EACnD,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK;AAAA,EACjD,WAAW,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI,MAAM;AAAA,EACnD,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK;AAAA,EACjD,QAAQ,EAAE,MAAM,SAAS,CAAC;AAAA,EAC1B,GAAG,EAAE,MAAM,SAAY,EAAE,IAAI,EAAE,MAAM,MAAM,EAAE;AAAA,EAC7C,QAAQ;AAAA,EACR,iBAAiB;AACnB,EAAE;AAEF,MAAM,cAAU,yBAAAD,SAAO,YAAAC,OAAI,EAAE,MAAM,QAAM;AAAA,EACvC,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ,EAAE,MAAM,SAAS,CAAC;AAAA,EAC1B,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,iBAAiB;AACnB,EAAE;AAEF,MAAM,SAAS,cAAAC,QAAW;AAAA;AAAA,kCAEQ,SAAS,yBAAyB,SAAS;AAAA;AAAA;AAI7E,MAAM,2BAAuB,yBAAAF,SAAO,YAAAC,OAAI,EAAE,MAAM,OAAO;AAAA,EACrD,gBAAgB;AAClB,EAAE;AAEF,MAAM,gBAAY,cAAAC,SAAW,YAAAD,OAAI,EAAE,MAAM;AAAA,EACvC,IAAI;AAAA,EACJ,eAAe;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;AAED,MAAM,kBAAc,cAAAC,SAAW,YAAAD,OAAI,EAAE,MAAM,EAAE,IAAI,UAAU,CAAC;AAE5D,MAAM,oBAAgB,yBAAAD,SAAO,cAAAG,QAAO,QAAQ;AAAA;AAAA;AAAA;AAK5C,MAAM,cAAc,CAAC,EAAE,UAAU,SAAS,QAAQ,GAAG,MAAM,MACzD,6BAAAC,QAAA,cAAC,UAAQ,GAAG,SACV,6BAAAA,QAAA,cAAC,YAAAH,SAAA,MACE,SACC,6BAAAG,QAAA,cAAC,iBAAc,SAAS,UACtB,6BAAAA,QAAA,cAAC,uBAAAC,SAAA,EAAc,MAAM,WAAW,OAAM,gBAAe,CACvD,IACE,IACN,GACA,6BAAAD,QAAA,cAAC,4BAAsB,QAAS,GAChC,6BAAAA,QAAA,cAAC,YAAAH,SAAA,MACE,UACC,6BAAAG,QAAA,cAAC,iBAAc,SAAS,WACtB,6BAAAA,QAAA,cAAC,mBAAAE,SAAA,EAAU,MAAM,WAAW,OAAM,gBAAe,CACnD,IACE,IACN,CACF;AAGF,MAAM,QAAQ,CAAC,EAAE,QAAQ,UAAU,OAAO,QAAQ,GAAG,MAAM,MACzD,6BAAAF,QAAA,cAAC,uBAAAG,SAAA,EAAgB,IAAI,QAAQ,QAAM,MAAC,cAAY,MAAC,eAAa,QAC5D,6BAAAH,QAAA,cAAC,eACC,6BAAAA,QAAA,cAAC,uBAAAI,SAAA,EAAgB,IAAI,QAAQ,QAAM,QACjC,6BAAAJ,QAAA,cAAC,WAAQ,OAAc,QAAiB,GAAG,SACxC,QACH,CACF,CACF,CACF;AAGF,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsC;AACpC,QAAM,QAAQ,aAAAA,QAAM;AAAA,IAClB,MACE,qBAAqB,UAAa,OAAO,aAAa,cAClD,SAAS,cAAc,MAAM,IAC7B;AAAA,IACN,CAAC,gBAAgB;AAAA,EACnB;AACA,MAAI,CAAC,OAAO;AACV,WAAO,6BAAAA,QAAA,cAAC,SAAO,GAAG,cAAa,QAAS;AAAA,EAC1C,OAAO;AACL,WAAO,iBAAAK,QAAS,aAAa,6BAAAL,QAAA,cAAC,SAAO,GAAG,cAAa,QAAS,GAAU,KAAK;AAAA,EAC/E;AACF;AAEA,aAAa,SAAS;AACtB,aAAa,OAAO;AACpB,aAAa,SAAS;AAEtB,IAAO,gBAAQ;",
|
|
6
6
|
"names": ["styled", "Flex", "baseStyled", "Button", "React", "ArrowLeftIcon", "CloseIcon", "TransitionInOut", "TransitionScale", "ReactDOM"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Side/Provider.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useReducer, useEffect, useCallback, useContext } from \"react\";\nimport type { SideProps } from \".\";\n\ninterface State<P extends SideProps = SideProps> {\n Component: React.ComponentType<P> | null | undefined;\n props?: P;\n open: boolean;\n}\n// actions\n// it makes them available and current from connector events handlers\nexport let setSide: <P extends SideProps = SideProps>(\n Component?: State<P>[\"Component\"],\n props?: State<P>[\"props\"],\n) => void = () => {};\n\n// reducer\nconst reducer = <P extends SideProps = SideProps>(state: State<P>, update: State<P>) => {\n return { ...state, ...update };\n};\n\nconst initialState: State = {\n Component: null,\n open: false,\n};\n\ninterface ContextValue<P extends SideProps = SideProps> {\n state: State<P>;\n setSide: (Component?: React.ComponentType<P>, props?: P) => void;\n}\n\nexport const context = React.createContext<ContextValue>({\n state: initialState,\n setSide: () => {},\n});\n\nexport const useSide = (): ContextValue => {\n return useContext(context);\n};\n\nconst SideProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const _setSide = useCallback((Component, props) => {\n dispatch({\n Component,\n props,\n open: !!Component,\n });\n }, []);\n\n useEffect(() => {\n setSide = _setSide;\n }, [_setSide]);\n\n return (\n <context.Provider\n value={{\n state,\n setSide: _setSide,\n }}\n >\n {children}\n </context.Provider>\n );\n};\n\nexport default SideProvider;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsE;AAU/D,IAAI,UAGC,MAAM;AAAC;AAGnB,MAAM,UAAU,CAAkC,OAAiB,WAAqB;AACtF,SAAO,EAAE,GAAG,OAAO,GAAG,OAAO;AAC/B;AAEA,MAAM,eAAsB;AAAA,EAC1B,WAAW;AAAA,EACX,MAAM;AACR;AAOO,MAAM,UAAU,aAAAA,QAAM,cAA4B;AAAA,EACvD,OAAO;AAAA,EACP,SAAS,MAAM;AAAA,EAAC;AAClB,CAAC;AAEM,MAAM,UAAU,MAAoB;AACzC,aAAO,yBAAW,OAAO;AAC3B;AAEA,MAAM,eAAe,CAAC,EAAE,SAAS,MAAkD;AACjF,QAAM,CAAC,OAAO,QAAQ,QAAI,yBAAW,SAAS,YAAY;AAE1D,QAAM,eAAW,0BAAY,CAAC,
|
|
4
|
+
"sourcesContent": ["import React, { useReducer, useEffect, useCallback, useContext } from \"react\";\nimport type { SideProps } from \".\";\n\ninterface State<P extends SideProps = SideProps> {\n Component: React.ComponentType<P> | null | undefined;\n props?: P;\n open: boolean;\n}\n// actions\n// it makes them available and current from connector events handlers\nexport let setSide: <P extends SideProps = SideProps>(\n Component?: State<P>[\"Component\"],\n props?: State<P>[\"props\"],\n) => void = () => {};\n\n// reducer\nconst reducer = <P extends SideProps = SideProps>(state: State<P>, update: State<P>) => {\n return { ...state, ...update };\n};\n\nconst initialState: State = {\n Component: null,\n open: false,\n};\n\ninterface ContextValue<P extends SideProps = SideProps> {\n state: State<P>;\n setSide: (Component?: React.ComponentType<P>, props?: P) => void;\n}\n\nexport const context = React.createContext<ContextValue>({\n state: initialState,\n setSide: () => {},\n});\n\nexport const useSide = (): ContextValue => {\n return useContext(context);\n};\n\nconst SideProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const _setSide = useCallback((Component: any, props: any) => {\n dispatch({\n Component,\n props,\n open: !!Component,\n });\n }, []);\n\n useEffect(() => {\n setSide = _setSide;\n }, [_setSide]);\n\n return (\n <context.Provider\n value={{\n state,\n setSide: _setSide,\n }}\n >\n {children}\n </context.Provider>\n );\n};\n\nexport default SideProvider;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsE;AAU/D,IAAI,UAGC,MAAM;AAAC;AAGnB,MAAM,UAAU,CAAkC,OAAiB,WAAqB;AACtF,SAAO,EAAE,GAAG,OAAO,GAAG,OAAO;AAC/B;AAEA,MAAM,eAAsB;AAAA,EAC1B,WAAW;AAAA,EACX,MAAM;AACR;AAOO,MAAM,UAAU,aAAAA,QAAM,cAA4B;AAAA,EACvD,OAAO;AAAA,EACP,SAAS,MAAM;AAAA,EAAC;AAClB,CAAC;AAEM,MAAM,UAAU,MAAoB;AACzC,aAAO,yBAAW,OAAO;AAC3B;AAEA,MAAM,eAAe,CAAC,EAAE,SAAS,MAAkD;AACjF,QAAM,CAAC,OAAO,QAAQ,QAAI,yBAAW,SAAS,YAAY;AAE1D,QAAM,eAAW,0BAAY,CAAC,WAAgB,UAAe;AAC3D,aAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,cAAU;AAAA,EACZ,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,6BAAAA,QAAA;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA,SAAS;AAAA,MACX;AAAA;AAAA,IAEC;AAAA,EACH;AAEJ;AAEA,IAAO,mBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Side/Side.stories.tsx"],
|
|
4
4
|
"sourcesContent": ["import React, { useCallback, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport Button from \"../../cta/Button\";\nimport { lipsum } from \"../../helpers\";\nimport Side, { SideProps } from \"./index\";\nimport SideProvider, { setSide } from \"./Provider\";\n\nconst DummyContentWrapper = styled.div`\n width: 100%;\n background-color: ${p => p.color};\n align-items: center;\n padding: ${p => p.theme.space[4]}px;\n`;\n\nconst onBackLvl1 = () =>\n setSide<SideProps & { left: boolean }>(DummyContent, {\n left: true,\n });\n\nconst onBackLvl2 = () =>\n setSide(DummySubContentLvl1, {\n onBack: onBackLvl1,\n left: true,\n });\n\nconst DummyContent = () => (\n <DummyContentWrapper color={\"#957DAD\"}>\n <Button\n onClick={() =>\n setSide(DummySubContentLvl1, {\n onBack: onBackLvl1,\n left: true,\n })\n }\n >\n {\"Go to level 2\"}\n </Button>\n </DummyContentWrapper>\n);\n\nconst DummySubContentLvl1 = () => (\n <DummyContentWrapper color={\"#E0BBE4\"}>\n <Button\n onClick={() =>\n setSide(DummySubContentLvl2, {\n onBack: onBackLvl2,\n left: true,\n })\n }\n >\n {\"Go to level 3\"}\n </Button>\n <div>{lipsum}</div>\n </DummyContentWrapper>\n);\n\nconst DummySubContentLvl2 = () => (\n <DummyContentWrapper color={\"#FEC8D8\"}>\n <div>{lipsum}</div>\n </DummyContentWrapper>\n);\n\nconst components = {\n DummyContent,\n DummySubContentLvl1,\n DummySubContentLvl2,\n};\n\nexport default {\n title: \"Layout/Drawer/Side\",\n component: Side,\n argTypes: {\n isOpen: {\n type: \"boolean\",\n value: true,\n description: \"Is open\",\n required: false,\n control: {\n type: \"boolean\",\n },\n },\n title: {\n type: \"text\",\n description: \"Side default title\",\n defaultValue: \"Default title\",\n control: {\n type: \"text\",\n },\n required: false,\n },\n big: {\n type: \"boolean\",\n value: true,\n description: \"Larger width side drawer.\",\n required: false,\n control: {\n type: \"boolean\",\n },\n },\n },\n};\n\nconst Template = (args: SideProps & { isOpen: boolean }) => {\n const onClose = useCallback(() => setSide(null), []);\n const onOpen = useCallback(() => setSide(components.DummyContent), []);\n\n useEffect(() => {\n if (args.isOpen) onOpen();\n if (!args.isOpen) onClose();\n }, [args.isOpen, onClose, onOpen]);\n\n return (\n <SideProvider>\n <Side {...args} />\n </SideProvider>\n );\n};\n\nexport const Default = Template.bind({});\n// @ts-expect-error FIXME\nDefault.args = {};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAC9C,+BAAmB;AAEnB,oBAAmB;AACnB,qBAAuB;AACvB,mBAAgC;AAChC,sBAAsC;AAEtC,MAAM,sBAAsB,yBAAAA,QAAO;AAAA;AAAA,sBAEb,OAAK,EAAE;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAC9C,+BAAmB;AAEnB,oBAAmB;AACnB,qBAAuB;AACvB,mBAAgC;AAChC,sBAAsC;AAEtC,MAAM,sBAAsB,yBAAAA,QAAO;AAAA;AAAA,sBAEb,OAAK,EAAE,KAAK;AAAA;AAAA,aAErB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAGlC,MAAM,aAAa,UACjB,yBAAuC,cAAc;AAAA,EACnD,MAAM;AACR,CAAC;AAEH,MAAM,aAAa,UACjB,yBAAQ,qBAAqB;AAAA,EAC3B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEH,MAAM,eAAe,MACnB,6BAAAC,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA;AAAA,EAAC,cAAAC;AAAA,EAAA;AAAA,IACC,SAAS,UACP,yBAAQ,qBAAqB;AAAA,MAC3B,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA;AAAA,EAGF;AACH,CACF;AAGF,MAAM,sBAAsB,MAC1B,6BAAAD,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA;AAAA,EAAC,cAAAC;AAAA,EAAA;AAAA,IACC,SAAS,UACP,yBAAQ,qBAAqB;AAAA,MAC3B,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA;AAAA,EAGF;AACH,GACA,6BAAAD,QAAA,cAAC,aAAK,qBAAO,CACf;AAGF,MAAM,sBAAsB,MAC1B,6BAAAA,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA,cAAC,aAAK,qBAAO,CACf;AAGF,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAE;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,SAA0C;AAC1D,QAAM,cAAU,0BAAY,UAAM,yBAAQ,IAAI,GAAG,CAAC,CAAC;AACnD,QAAM,aAAS,0BAAY,UAAM,yBAAQ,WAAW,YAAY,GAAG,CAAC,CAAC;AAErE,8BAAU,MAAM;AACd,QAAI,KAAK;AAAQ,aAAO;AACxB,QAAI,CAAC,KAAK;AAAQ,cAAQ;AAAA,EAC5B,GAAG,CAAC,KAAK,QAAQ,SAAS,MAAM,CAAC;AAEjC,SACE,6BAAAF,QAAA,cAAC,gBAAAG,SAAA,MACC,6BAAAH,QAAA,cAAC,aAAAE,SAAA,EAAM,GAAG,MAAM,CAClB;AAEJ;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAEvC,QAAQ,OAAO,CAAC;",
|
|
6
6
|
"names": ["styled", "React", "Button", "Side", "SideProvider"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/loaders/InfiniteLoader/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport { system, size, SizeProps } from \"styled-system\";\n\nconst rotate = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nconst Loader = styled.svg<SizeProps>`\n animation: ${rotate} 1s linear infinite;\n ${size}\n ${system({\n stroke: {\n property: \"stroke\",\n scale: \"colors\",\n },\n })}\n`;\nexport type Props = React.ComponentProps<typeof Loader> & {\n color?: string;\n};\n\nexport default function InfiniteLoader({\n size = 38,\n color = \"primary.c50\",\n ...extraProps\n}: Props): JSX.Element {\n return (\n <Loader\n size={size}\n stroke={color}\n viewBox=\"0 0 38 38\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...extraProps}\n >\n <linearGradient\n id=\"gradient-start\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"rotate(-20)\"\n >\n <stop offset=\"0\" stopColor=\"white\" stopOpacity=\"0.5\" />\n <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"1\" />\n </linearGradient>\n <linearGradient\n id=\"gradient-end\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"rotate(-20)\"\n >\n <stop offset=\"0\" stopColor=\"white\" stopOpacity=\"0.5\" />\n <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n </linearGradient>\n\n <mask id=\"gradient-mask\" maskUnits=\"userSpaceOnUse\">\n <rect\n x=\"-0\"\n y=\"-4\"\n width=\"44\"\n height=\"22\"\n strokeWidth=\"0\"\n fill=\"url(#gradient-start)\"\n transform=\"rotate(10)\"\n />\n <rect\n x=\"0\"\n y=\"18\"\n width=\"44\"\n height=\"21\"\n strokeWidth=\"0\"\n fill=\"url(#gradient-end)\"\n transform=\"rotate(10)\"\n />\n </mask>\n <path\n d=\"M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526\"\n strokeWidth=\"6\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n mask=\"url(#gradient-mask)\"\n />\n </Loader>\n );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAkC;AAClC,2BAAwC;AAExC,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASf,MAAM,SAAS,yBAAAA,QAAO;AAAA,eACP;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAkC;AAClC,2BAAwC;AAExC,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASf,MAAM,SAAS,yBAAAA,QAAO;AAAA,eACP,MAAM;AAAA,IACjB,yBAAI;AAAA,QACJ,6BAAO;AAAA,EACP,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF,CAAC,CAAC;AAAA;AAMW,SAAR,eAAgC;AAAA,EACrC,MAAAC,QAAO;AAAA,EACP,QAAQ;AAAA,EACR,GAAG;AACL,GAAuB;AACrB,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAMD;AAAA,MACN,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACL,GAAG;AAAA;AAAA,IAEJ,6BAAAC,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,eAAc;AAAA,QACd,mBAAkB;AAAA;AAAA,MAElB,6BAAAA,QAAA,cAAC,UAAK,QAAO,KAAI,WAAU,SAAQ,aAAY,OAAM;AAAA,MACrD,6BAAAA,QAAA,cAAC,UAAK,QAAO,KAAI,WAAU,SAAQ,aAAY,KAAI;AAAA,IACrD;AAAA,IACA,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,eAAc;AAAA,QACd,mBAAkB;AAAA;AAAA,MAElB,6BAAAA,QAAA,cAAC,UAAK,QAAO,KAAI,WAAU,SAAQ,aAAY,OAAM;AAAA,MACrD,6BAAAA,QAAA,cAAC,UAAK,QAAO,KAAI,WAAU,SAAQ,aAAY,KAAI;AAAA,IACrD;AAAA,IAEA,6BAAAA,QAAA,cAAC,UAAK,IAAG,iBAAgB,WAAU,oBACjC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,GAAE;AAAA,QACF,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAU;AAAA;AAAA,IACZ,GACA,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,GAAE;AAAA,QACF,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAU;AAAA;AAAA,IACZ,CACF;AAAA,IACA,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACf,MAAK;AAAA;AAAA,IACP;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["styled", "size", "React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Alert/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled, { useTheme, DefaultTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { TextVariants } from \"../../../styles/theme\";\nimport Flex from \"../../layout/Flex\";\nimport InfoAltFillMedium from \"@ledgerhq/icons-ui/reactLegacy/InfoAltFillMedium\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium\";\nimport WarningSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/WarningSolidMedium\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCrossSolidMedium\";\n\ntype AlertType = \"info\" | \"secondary\" | \"success\" | \"warning\" | \"error\";\n\ntype RenderProps = (props: {\n textProps: { variant?: TextVariants; fontWeight?: string };\n}) => JSX.Element;\n\nexport interface AlertProps {\n /**\n * Affects the colors of the background & text and what icon can be displayed.\n */\n type?: AlertType;\n /**\n * Title of the Alert.\n */\n title?: string;\n /**\n * Method for rendering additional content under the title. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n */\n renderContent?: RenderProps;\n\n /**\n * Method for rendering additional content to the right. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n */\n renderRight?: RenderProps;\n\n /**\n * Additional props to be passed to the top level container (containing icon + content).\n */\n containerProps?: Record<string, unknown>;\n\n /**\n * Whether or not to display an icon\n */\n showIcon?: boolean;\n}\n\nconst StyledIconContainer = styled.div`\n margin-right: 8px;\n display: flex;\n align-items: center;\n`;\n\nconst icons = {\n info: <InfoAltFillMedium size={24} />,\n secondary: <InfoAltFillMedium size={24} />,\n success: <CircledCheckSolidMedium size={24} />,\n warning: <WarningSolidMedium size={24} />,\n error: <CircledCrossSolidMedium size={24} />,\n};\n\nconst getColors = ({ theme, type }: { theme: DefaultTheme; type?: AlertType }) => {\n switch (type) {\n case \"secondary\":\n return {\n background: theme.colors.opacityDefault.c05,\n iconColor: theme.colors.neutral.c80,\n };\n case \"success\":\n return {\n background: theme.colors.success.c10,\n iconColor: theme.colors.success.c50,\n };\n case \"warning\":\n return {\n background: theme.colors.warning.c10,\n iconColor: theme.colors.warning.c70,\n };\n case \"error\":\n return {\n background: theme.colors.error.c10,\n iconColor: theme.colors.error.c50,\n };\n case \"info\":\n default:\n return {\n background: theme.colors.primary.c10,\n iconColor: theme.colors.primary.c80,\n };\n }\n};\n\nconst StyledAlertContainer = styled(Flex)<{ background?: string; color?: string }>`\n border-radius: ${p => `${p.theme.radii[2]}px`};\n align-items: start;\n`;\n\nconst AlertBodyText = styled(Text).attrs({\n flexShrink: 1,\n variant: \"bodyLineHeight\",\n fontWeight: \"semiBold\",\n})``;\n\nconst AlertUnderlinedText = styled(AlertBodyText)`\n text-decoration-line: underline;\n`;\n\nfunction Alert({\n type = \"info\",\n title,\n showIcon = true,\n renderContent,\n renderRight,\n containerProps,\n}: AlertProps): JSX.Element {\n const theme = useTheme();\n const { iconColor, background } = getColors({ theme, type });\n const textProps: { variant?: TextVariants; fontWeight?: string } = {\n variant: \"bodyLineHeight\",\n fontWeight: \"semiBold\",\n };\n const textColor = \"neutral.c100\";\n return (\n <StyledAlertContainer\n color={textColor}\n backgroundColor={background}\n padding={6}\n {...containerProps}\n >\n {showIcon && !!icons[type] && (\n <Flex color={iconColor}>\n <StyledIconContainer>{icons[type]}</StyledIconContainer>\n </Flex>\n )}\n <Flex flexDirection=\"column\" flex={1} alignItems=\"flex-start\" rowGap=\"6px\">\n {title && (\n <Text {...textProps} color={textColor}>\n {title}\n </Text>\n )}\n {renderContent && renderContent({ textProps })}\n </Flex>\n <Flex alignSelf=\"center\">{renderRight && renderRight({ textProps })}</Flex>\n </StyledAlertContainer>\n );\n}\n\nAlert.BodyText = AlertBodyText;\nAlert.UnderlinedText = AlertUnderlinedText;\n\nexport default Alert;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA+C;AAC/C,kBAAiB;AAEjB,kBAAiB;AACjB,+BAA8B;AAC9B,qCAAoC;AACpC,gCAA+B;AAC/B,qCAAoC;AAsCpC,MAAM,sBAAsB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,QAAQ;AAAA,EACZ,MAAM,6BAAAC,QAAA,cAAC,yBAAAC,SAAA,EAAkB,MAAM,IAAI;AAAA,EACnC,WAAW,6BAAAD,QAAA,cAAC,yBAAAC,SAAA,EAAkB,MAAM,IAAI;AAAA,EACxC,SAAS,6BAAAD,QAAA,cAAC,+BAAAE,SAAA,EAAwB,MAAM,IAAI;AAAA,EAC5C,SAAS,6BAAAF,QAAA,cAAC,0BAAAG,SAAA,EAAmB,MAAM,IAAI;AAAA,EACvC,OAAO,6BAAAH,QAAA,cAAC,+BAAAI,SAAA,EAAwB,MAAM,IAAI;AAC5C;AAEA,MAAM,YAAY,CAAC,EAAE,OAAO,KAAK,MAAiD;AAChF,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,eAAe;AAAA,QACxC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAClC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,QAAQ;AAAA,QACjC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAClC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,QAAQ;AAAA,QACjC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAClC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,MAAM;AAAA,QAC/B,WAAW,MAAM,OAAO,MAAM;AAAA,MAChC;AAAA,IACF,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,QAAQ;AAAA,QACjC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAClC;AAAA,EACJ;AACF;AAEA,MAAM,2BAAuB,yBAAAL,SAAO,YAAAM,OAAI;AAAA,mBACrB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA+C;AAC/C,kBAAiB;AAEjB,kBAAiB;AACjB,+BAA8B;AAC9B,qCAAoC;AACpC,gCAA+B;AAC/B,qCAAoC;AAsCpC,MAAM,sBAAsB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,QAAQ;AAAA,EACZ,MAAM,6BAAAC,QAAA,cAAC,yBAAAC,SAAA,EAAkB,MAAM,IAAI;AAAA,EACnC,WAAW,6BAAAD,QAAA,cAAC,yBAAAC,SAAA,EAAkB,MAAM,IAAI;AAAA,EACxC,SAAS,6BAAAD,QAAA,cAAC,+BAAAE,SAAA,EAAwB,MAAM,IAAI;AAAA,EAC5C,SAAS,6BAAAF,QAAA,cAAC,0BAAAG,SAAA,EAAmB,MAAM,IAAI;AAAA,EACvC,OAAO,6BAAAH,QAAA,cAAC,+BAAAI,SAAA,EAAwB,MAAM,IAAI;AAC5C;AAEA,MAAM,YAAY,CAAC,EAAE,OAAO,KAAK,MAAiD;AAChF,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,eAAe;AAAA,QACxC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAClC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,QAAQ;AAAA,QACjC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAClC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,QAAQ;AAAA,QACjC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAClC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,MAAM;AAAA,QAC/B,WAAW,MAAM,OAAO,MAAM;AAAA,MAChC;AAAA,IACF,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,QAAQ;AAAA,QACjC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAClC;AAAA,EACJ;AACF;AAEA,MAAM,2BAAuB,yBAAAL,SAAO,YAAAM,OAAI;AAAA,mBACrB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAI/C,MAAM,oBAAgB,yBAAAN,SAAO,YAAAO,OAAI,EAAE,MAAM;AAAA,EACvC,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AACd,CAAC;AAED,MAAM,0BAAsB,yBAAAP,SAAO,aAAa;AAAA;AAAA;AAIhD,SAAS,MAAM;AAAA,EACb,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,YAAQ,mCAAS;AACvB,QAAM,EAAE,WAAW,WAAW,IAAI,UAAU,EAAE,OAAO,KAAK,CAAC;AAC3D,QAAM,YAA6D;AAAA,IACjE,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACA,QAAM,YAAY;AAClB,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,IAEH,YAAY,CAAC,CAAC,MAAM,IAAI,KACvB,6BAAAA,QAAA,cAAC,YAAAK,SAAA,EAAK,OAAO,aACX,6BAAAL,QAAA,cAAC,2BAAqB,MAAM,IAAI,CAAE,CACpC;AAAA,IAEF,6BAAAA,QAAA,cAAC,YAAAK,SAAA,EAAK,eAAc,UAAS,MAAM,GAAG,YAAW,cAAa,QAAO,SAClE,SACC,6BAAAL,QAAA,cAAC,YAAAM,SAAA,EAAM,GAAG,WAAW,OAAO,aACzB,KACH,GAED,iBAAiB,cAAc,EAAE,UAAU,CAAC,CAC/C;AAAA,IACA,6BAAAN,QAAA,cAAC,YAAAK,SAAA,EAAK,WAAU,YAAU,eAAe,YAAY,EAAE,UAAU,CAAC,CAAE;AAAA,EACtE;AAEJ;AAEA,MAAM,WAAW;AACjB,MAAM,iBAAiB;AAEvB,IAAO,gBAAQ;",
|
|
6
6
|
"names": ["styled", "React", "InfoAltFillMedium", "CircledCheckSolidMedium", "WarningSolidMedium", "CircledCrossSolidMedium", "Flex", "Text"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Log/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React, { memo } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text, { TextProps } from \"../../asorted/Text\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport { BracketRight, BracketLeft } from \"./Brackets\";\n\nexport type Props = React.PropsWithChildren<\n FlexBoxProps & {\n extraTextProps?: TextProps;\n }\n>;\n\nconst Container = styled(FlexBox)`\n justify-content: center;\n flex-wrap: wrap;\n align-items: stretch;\n min-height: ${p => p.theme.space[12]}px;\n`;\n\nconst TextContainer = styled(FlexBox).attrs(() => ({\n flex: \"1\",\n justifyContent: \"center\",\n alignItems: \"center\",\n}))`\n ${Text} {\n flex: 1;\n }\n`;\n\nfunction Log({ children, extraTextProps, ...props }: Props): JSX.Element {\n return (\n <Container color=\"neutral.c100\" {...props}>\n <BracketLeft />\n <TextContainer flex=\"1\" alignItems=\"center\" justifyContent=\"center\">\n <Text\n variant=\"h3\"\n textTransform=\"uppercase\"\n textAlign=\"center\"\n color=\"inherit\"\n {...extraTextProps}\n >\n {children}\n </Text>\n </TextContainer>\n <BracketRight />\n </Container>\n );\n}\n\nexport default memo(Log);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4B;AAC5B,+BAAmB;AAEnB,kBAAgC;AAChC,kBAAsC;AACtC,sBAA0C;AAQ1C,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIhB,OAAK,EAAE,MAAM,MAAM,EAAE;AAAA;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4B;AAC5B,+BAAmB;AAEnB,kBAAgC;AAChC,kBAAsC;AACtC,sBAA0C;AAQ1C,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIhB,OAAK,EAAE,MAAM,MAAM,EAAE,CAAC;AAAA;AAGtC,MAAM,oBAAgB,yBAAAD,SAAO,YAAAC,OAAO,EAAE,MAAM,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,EAAE;AAAA,IACE,YAAAC,OAAI;AAAA;AAAA;AAAA;AAKR,SAAS,IAAI,EAAE,UAAU,gBAAgB,GAAG,MAAM,GAAuB;AACvE,SACE,6BAAAC,QAAA,cAAC,aAAU,OAAM,gBAAgB,GAAG,SAClC,6BAAAA,QAAA,cAAC,iCAAY,GACb,6BAAAA,QAAA,cAAC,iBAAc,MAAK,KAAI,YAAW,UAAS,gBAAe,YACzD,6BAAAA,QAAA;AAAA,IAAC,YAAAD;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,eAAc;AAAA,MACd,WAAU;AAAA,MACV,OAAM;AAAA,MACL,GAAG;AAAA;AAAA,IAEH;AAAA,EACH,CACF,GACA,6BAAAC,QAAA,cAAC,kCAAa,CAChB;AAEJ;AAEA,IAAO,kBAAQ,mBAAK,GAAG;",
|
|
6
6
|
"names": ["styled", "FlexBox", "Text", "React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Notification/Badge.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { color, position, shadow, border, background, layout } from \"styled-system\";\n\nconst ActiveCircle = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n height: 10px;\n width: 10px;\n border-radius: 9999px;\n box-sizing: content-box;\n background-color: ${p => p.theme.colors.error.c50};\n\n border: 2px solid\n var(\n --notification-badge-border,\n ${p => {\n /* The CSS variable is dynamically set by the Notification component */\n return p.theme.colors.background.main;\n }}\n );\n`;\n\nconst Wrapper = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 9999px;\n ${color}\n ${position}\n ${shadow}\n ${border}\n ${background}\n ${layout}\n`;\n\nexport type Props = {\n /* If true a notification bubble will be displayed in the top right corner of the badge. */\n active?: boolean;\n /* JSX filling up the space inside the badge, usually an <Icon />. */\n icon: JSX.Element;\n} & React.ComponentProps<typeof Wrapper>;\nexport default function Badge({ active, icon, ...props }: Props): JSX.Element {\n return (\n <Wrapper {...props}>\n {icon}\n {active && <ActiveCircle />}\n </Wrapper>\n );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,2BAAoE;AAEpE,MAAM,eAAe,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQN,OAAK,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,2BAAoE;AAEpE,MAAM,eAAe,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQN,OAAK,EAAE,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,QAK3C,OAAK;AAEL,SAAO,EAAE,MAAM,OAAO,WAAW;AACnC,CAAC;AAAA;AAAA;AAIP,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQnB,0BAAK;AAAA,IACL,6BAAQ;AAAA,IACR,2BAAM;AAAA,IACN,2BAAM;AAAA,IACN,+BAAU;AAAA,IACV,2BAAM;AAAA;AASK,SAAR,MAAuB,EAAE,QAAQ,MAAM,GAAG,MAAM,GAAuB;AAC5E,SACE,6BAAAC,QAAA,cAAC,WAAS,GAAG,SACV,MACA,UAAU,6BAAAA,QAAA,cAAC,kBAAa,CAC3B;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Notification/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport Badge from \"./Badge\";\nimport Link, { LinkProps } from \"../../cta/Link\";\nimport { ExternalLinkMedium } from \"@ledgerhq/icons-ui/reactLegacy\";\n\ninterface ContainerProps extends FlexBoxProps {\n /* Add the pre-selected background. */\n hasBackground?: boolean;\n}\n\nexport interface Props extends ContainerProps {\n /* The title to be displayed. */\n title: string;\n /* JSX that should be rendered by a call to the <Notification.Badge /> component.*/\n badge: React.ReactNode;\n /* An optional description. */\n description?: string;\n /* An optional link. */\n link?: string;\n /* A callback to perform when clicking on the link. */\n onLinkClick?: LinkProps[\"onClick\"];\n}\n\nconst Container = styled(FlexBox).attrs<ContainerProps>({\n p: 6,\n columnGap: 8,\n alignItems: \"center\",\n})<ContainerProps>`\n --notification-badge-border: ${p => {\n /* Set a CSS variable that will be consumed by the Badge component */\n return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;\n }};\n background-color: ${p => (p.hasBackground ? p.theme.colors.neutral.c30 : \"transparent\")};\n\n border-radius: 8px;\n`;\n\nfunction Notification({\n title,\n description,\n badge,\n link,\n onLinkClick,\n hasBackground = false,\n ...containerProps\n}: Props): JSX.Element {\n return (\n <Container hasBackground={hasBackground} {...containerProps}>\n {badge}\n <FlexBox flexDirection=\"column\" rowGap={3} flex=\"auto\">\n <Text variant={\"large\"} fontWeight=\"medium\" color=\"neutral.c100\">\n {title}\n </Text>\n {description && (\n <Text variant={\"paragraph\"} fontWeight=\"medium\" color=\"neutral.c80\" whiteSpace=\"pre-wrap\">\n {description}\n </Text>\n )}\n {link && (\n <FlexBox justifyContent={\"flex-start\"}>\n <Link onClick={event => onLinkClick && onLinkClick(event)} Icon={ExternalLinkMedium}>\n {link}\n </Link>\n </FlexBox>\n )}\n </FlexBox>\n </Container>\n );\n}\nNotification.Badge = Badge;\n\nexport type NotificationType = { (p: Props): JSX.Element; Badge: typeof Badge };\nexport default Notification as NotificationType;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,kBAAiB;AACjB,mBAAkB;AAClB,kBAAgC;AAChC,yBAAmC;AAoBnC,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,WAAW;AAAA,EACX,YAAY;AACd,CAAC;AAAA,iCACgC,OAAK;AAElC,SAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,WAAW;AAClF;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,kBAAiB;AACjB,mBAAkB;AAClB,kBAAgC;AAChC,yBAAmC;AAoBnC,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,WAAW;AAAA,EACX,YAAY;AACd,CAAC;AAAA,iCACgC,OAAK;AAElC,SAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,WAAW;AAClF,CAAC;AAAA,sBACmB,OAAM,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM,aAAc;AAAA;AAAA;AAAA;AAKzF,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAuB;AACrB,SACE,6BAAAC,QAAA,cAAC,aAAU,eAA+B,GAAG,kBAC1C,OACD,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAQ,eAAc,UAAS,QAAQ,GAAG,MAAK,UAC9C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,SAAS,YAAW,UAAS,OAAM,kBAC/C,KACH,GACC,eACC,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,aAAa,YAAW,UAAS,OAAM,eAAc,YAAW,cAC5E,WACH,GAED,QACC,6BAAAD,QAAA,cAAC,YAAAD,SAAA,EAAQ,gBAAgB,gBACvB,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,WAAS,eAAe,YAAY,KAAK,GAAG,MAAM,yCAC9D,IACH,CACF,CAEJ,CACF;AAEJ;AACA,aAAa,QAAQ,aAAAC;AAGrB,IAAO,uBAAQ;",
|
|
6
6
|
"names": ["styled", "FlexBox", "React", "Text", "Link", "Badge"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/StatusNotification/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport Log from \"../Log/\";\n\ninterface ContainerProps extends FlexBoxProps {\n /* Add the pre-selected border. */\n hasBorder?: boolean;\n}\n\nexport interface Props extends ContainerProps {\n /* The text to be displayed. */\n text: string;\n /* JSX that should be rendered on top of the Notification.*/\n badge: React.ReactNode;\n}\n\nconst Container = styled(FlexBox).attrs<ContainerProps>({\n p: 8,\n rowGap: 9,\n alignItems: \"center\",\n flexDirection: \"column\",\n})<ContainerProps>`\n border-width: 1px;\n border-style: ${p => (p.hasBorder ? \"solid\" : \"none\")};\n border-radius: 8px;\n border-color: ${p => p.theme.colors.neutral.c40};\n`;\n\nfunction StatusNotification({\n text,\n badge,\n hasBorder = false,\n ...containerProps\n}: Props): JSX.Element {\n return (\n <Container hasBorder={hasBorder} {...containerProps}>\n {badge}\n <Log>{text}</Log>\n </Container>\n );\n}\n\nexport default StatusNotification;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,iBAAgB;AAchB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe;AACjB,CAAC;AAAA;AAAA,kBAEiB,OAAM,EAAE,YAAY,UAAU;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,iBAAgB;AAchB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe;AACjB,CAAC;AAAA;AAAA,kBAEiB,OAAM,EAAE,YAAY,UAAU,MAAO;AAAA;AAAA,kBAErC,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGjD,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,SACE,6BAAAC,QAAA,cAAC,aAAU,WAAuB,GAAG,kBAClC,OACD,6BAAAA,QAAA,cAAC,WAAAC,SAAA,MAAK,IAAK,CACb;AAEJ;AAEA,IAAO,6BAAQ;",
|
|
6
6
|
"names": ["styled", "FlexBox", "React", "Log"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Tip/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { CheckAloneMedium, CloseMedium, CircledAlertMedium } from \"@ledgerhq/icons-ui/reactLegacy\";\nimport { Flex } from \"../../layout\";\n\ntype TipType = \"success\" | \"warning\" | \"error\";\n\nexport interface TipProps {\n type?: TipType;\n label: string;\n}\n\nconst icons = {\n success: <CheckAloneMedium size={16} />,\n warning: <CircledAlertMedium size={16} />,\n error: <CloseMedium size={16} />,\n};\n\nconst StyledIconContainer = styled.div<{ type?: TipType }>`\n ${p => {\n switch (p.type) {\n case \"warning\":\n return css`\n background: ${p.theme.colors.warning.c10};\n color: ${p.theme.colors.warning.c50};\n `;\n case \"error\":\n return css`\n background: ${p.theme.colors.error.c10};\n color: ${p.theme.colors.error.c50};\n `;\n case \"success\":\n default:\n return css`\n background: ${p.theme.colors.success.c30};\n color: ${p.theme.colors.success.c50};\n `;\n }\n }}\n\n border-radius: ${p => `${p.theme.radii[1]}px`};\n margin-right: ${p => `${p.theme.space[6]}px`};\n padding: 6px;\n display: flex;\n align-items: center;\n`;\n\nexport default function Tip({ type, label }: TipProps): JSX.Element {\n return (\n <Flex alignItems={\"center\"}>\n {type && <StyledIconContainer type={type}>{icons[type]}</StyledIconContainer>}\n <Text variant={\"paragraph\"} fontWeight={\"medium\"} color={\"neutral.c100\"} flexShrink={1}>\n {label}\n </Text>\n </Flex>\n );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA4B;AAC5B,kBAAiB;AACjB,yBAAkE;AAClE,oBAAqB;AASrB,MAAM,QAAQ;AAAA,EACZ,SAAS,6BAAAA,QAAA,cAAC,uCAAiB,MAAM,IAAI;AAAA,EACrC,SAAS,6BAAAA,QAAA,cAAC,yCAAmB,MAAM,IAAI;AAAA,EACvC,OAAO,6BAAAA,QAAA,cAAC,kCAAY,MAAM,IAAI;AAChC;AAEA,MAAM,sBAAsB,yBAAAC,QAAO;AAAA,IAC/B,OAAK;AACL,UAAQ,EAAE,MAAM;AAAA,IACd,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA4B;AAC5B,kBAAiB;AACjB,yBAAkE;AAClE,oBAAqB;AASrB,MAAM,QAAQ;AAAA,EACZ,SAAS,6BAAAA,QAAA,cAAC,uCAAiB,MAAM,IAAI;AAAA,EACrC,SAAS,6BAAAA,QAAA,cAAC,yCAAmB,MAAM,IAAI;AAAA,EACvC,OAAO,6BAAAA,QAAA,cAAC,kCAAY,MAAM,IAAI;AAChC;AAEA,MAAM,sBAAsB,yBAAAC,QAAO;AAAA,IAC/B,OAAK;AACL,UAAQ,EAAE,MAAM;AAAA,IACd,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA,mBAC/B,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,IAEvC,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,MAAM,GAAG;AAAA,mBAC7B,EAAE,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,IAErC,KAAK;AAAA,IACL;AACE,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA,mBAC/B,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAEzC;AACF,CAAC;AAAA;AAAA,mBAEgB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAI;AAAA,kBAC7B,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAM/B,SAAR,IAAqB,EAAE,MAAM,MAAM,GAA0B;AAClE,SACE,6BAAAD,QAAA,cAAC,sBAAK,YAAY,YACf,QAAQ,6BAAAA,QAAA,cAAC,uBAAoB,QAAa,MAAM,IAAI,CAAE,GACvD,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,aAAa,YAAY,UAAU,OAAO,gBAAgB,YAAY,KAClF,KACH,CACF;AAEJ;",
|
|
6
6
|
"names": ["React", "styled", "Text"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Tooltip/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React, { forwardRef } from \"react\";\nimport { isForwardRef } from \"react-is\";\nimport Tippy, { TippyProps } from \"@tippyjs/react\";\nimport Text from \"../../asorted/Text\";\n\ntype Placement =\n | \"top\"\n | \"top-start\"\n | \"top-end\"\n | \"right\"\n | \"right-start\"\n | \"right-end\"\n | \"bottom\"\n | \"bottom-start\"\n | \"bottom-end\"\n | \"left\"\n | \"left-start\"\n | \"left-end\"\n | \"auto\"\n | \"auto-start\"\n | \"auto-end\";\n\n// Add more props later on if needed.\n// See https://atomiks.github.io/tippyjs/v6/all-props for the full list.\nexport interface Props extends TippyProps {\n /** The preferred placement of the tippy. */\n placement?: Placement;\n}\n\n// Tippyjs need the ref to be forwarded to the DOM element wrapping the children.\n// This component has been created to add a wrapping span and use its ref when needed.\n// See: https://github.com/atomiks/tippyjs-react#component-children\nconst Wrapper: React.ComponentType<React.PropsWithChildren<unknown>> = forwardRef(\n (props, ref: React.LegacyRef<HTMLElement>) => {\n const childrenCount = React.Children.count(props.children);\n\n try {\n const child = React.Children.only(props.children);\n const isValidElement = React.isValidElement(child);\n const isForwardingRef = isForwardRef(child);\n const isDomElement = isValidElement && typeof child.type === \"string\";\n\n if (isForwardingRef || isDomElement) {\n return React.cloneElement(child, { ref });\n } else {\n return <span ref={ref}>{props.children}</span>;\n }\n } catch (e) {\n return childrenCount < 1 ? null : <span ref={ref}>{props.children}</span>;\n }\n },\n);\n\nexport default function Tooltip(props: Props): JSX.Element | null {\n const { content, placement = \"auto\", children, ...rest } = props;\n return (\n <Tippy\n {...rest}\n placement={placement}\n content={\n <Text fontWeight=\"medium\" variant={\"paragraph\"} color=\"neutral.c00\">\n {content}\n </Text>\n }\n >\n <Wrapper children={children} />\n </Tippy>\n );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,sBAA6B;AAC7B,IAAAA,gBAAkC;AAClC,kBAAiB;AA6BjB,MAAM,cAAiE;AAAA,EACrE,CAAC,OAAO,QAAsC;AAC5C,UAAM,gBAAgB,aAAAC,QAAM,SAAS,MAAM,MAAM,QAAQ;AAEzD,QAAI;AACF,YAAM,QAAQ,aAAAA,QAAM,SAAS,KAAK,MAAM,QAAQ;AAChD,YAAM,iBAAiB,aAAAA,QAAM,eAAe,KAAK;AACjD,YAAM,sBAAkB,8BAAa,KAAK;AAC1C,YAAM,eAAe,kBAAkB,OAAO,MAAM,SAAS;AAE7D,UAAI,mBAAmB,cAAc;AACnC,eAAO,aAAAA,QAAM,aAAa,OAAO,EAAE,IAAI,CAAC;AAAA,MAC1C,OAAO;AACL,eAAO,6BAAAA,QAAA,cAAC,UAAK,OAAW,MAAM,QAAS;AAAA,MACzC;AAAA,IACF,SAAS,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,sBAA6B;AAC7B,IAAAA,gBAAkC;AAClC,kBAAiB;AA6BjB,MAAM,cAAiE;AAAA,EACrE,CAAC,OAAO,QAAsC;AAC5C,UAAM,gBAAgB,aAAAC,QAAM,SAAS,MAAM,MAAM,QAAQ;AAEzD,QAAI;AACF,YAAM,QAAQ,aAAAA,QAAM,SAAS,KAAK,MAAM,QAAQ;AAChD,YAAM,iBAAiB,aAAAA,QAAM,eAAe,KAAK;AACjD,YAAM,sBAAkB,8BAAa,KAAK;AAC1C,YAAM,eAAe,kBAAkB,OAAO,MAAM,SAAS;AAE7D,UAAI,mBAAmB,cAAc;AACnC,eAAO,aAAAA,QAAM,aAAa,OAAO,EAAE,IAAI,CAAC;AAAA,MAC1C,OAAO;AACL,eAAO,6BAAAA,QAAA,cAAC,UAAK,OAAW,MAAM,QAAS;AAAA,MACzC;AAAA,IACF,SAAS,GAAG;AACV,aAAO,gBAAgB,IAAI,OAAO,6BAAAA,QAAA,cAAC,UAAK,OAAW,MAAM,QAAS;AAAA,IACpE;AAAA,EACF;AACF;AAEe,SAAR,QAAyB,OAAkC;AAChE,QAAM,EAAE,SAAS,YAAY,QAAQ,UAAU,GAAG,KAAK,IAAI;AAC3D,SACE,6BAAAA,QAAA;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,SACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,YAAW,UAAS,SAAS,aAAa,OAAM,iBACnD,OACH;AAAA;AAAA,IAGF,6BAAAF,QAAA,cAAC,WAAQ,UAAoB;AAAA,EAC/B;AAEJ;",
|
|
6
6
|
"names": ["import_react", "React", "Tippy", "Text"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Tooltip/styles.ts"],
|
|
4
4
|
"sourcesContent": ["import { DefaultTheme, css } from \"styled-components\";\n\ntype Props = { theme: DefaultTheme };\n\nexport default css`\n .tippy-box[data-animation=\"fade\"][data-state=\"hidden\"] {\n opacity: 0;\n }\n\n [data-tippy-root] {\n max-width: calc(100vw - 10px);\n }\n\n .tippy-box {\n position: relative;\n background-color: ${(p: Props) => p.theme.colors.neutral.c100};\n color: ${(p: Props) => p.theme.colors.neutral.c00};\n border-radius: 4px;\n font-size: 14px;\n line-height: 1.4;\n outline: 0;\n transition-property: transform, visibility, opacity;\n }\n\n .tippy-arrow {\n width: 16px;\n height: 16px;\n color: ${(p: Props) => p.theme.colors.neutral.c100};\n }\n\n .tippy-arrow:before {\n content: \"\";\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n .tippy-box[data-placement^=\"top\"] > .tippy-arrow {\n bottom: 0;\n }\n\n .tippy-box[data-placement^=\"top\"] > .tippy-arrow:before {\n bottom: -4px;\n left: 0;\n border-width: 10px 10px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n\n .tippy-box[data-placement^=\"bottom\"] > .tippy-arrow {\n top: 0;\n }\n\n .tippy-box[data-placement^=\"bottom\"] > .tippy-arrow:before {\n top: -4px;\n left: 0;\n border-width: 0 10px 10px;\n border-bottom-color: initial;\n transform-origin: center bottom;\n }\n\n .tippy-box[data-placement^=\"left\"] > .tippy-arrow {\n right: 0;\n }\n\n .tippy-box[data-placement^=\"left\"] > .tippy-arrow:before {\n border-width: 10px 0 10px 10px;\n border-left-color: initial;\n right: -4px;\n transform-origin: center left;\n }\n\n .tippy-box[data-placement^=\"right\"] > .tippy-arrow {\n left: 0;\n }\n\n .tippy-box[data-placement^=\"right\"] > .tippy-arrow:before {\n left: -4px;\n border-width: 10px 10px 10px 0;\n border-right-color: initial;\n transform-origin: center right;\n }\n\n .tippy-box[data-inertia][data-state=\"visible\"] {\n transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n }\n\n .tippy-content {\n position: relative;\n padding: 8px 10px;\n z-index: 1;\n }\n`;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAIlC,IAAO,iBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAWS,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAIlC,IAAO,iBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAWS,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ,IAAI;AAAA,aACpD,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWxC,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/navigation/Aside/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { color, layout, typography, ColorProps, LayoutProps, TypographyProps } from \"styled-system\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n /* Header which will be displayed at the top of the Aside. */\n header: React.ReactNode;\n /* Optional footer which will be displayed at the bottom of the Aside. */\n footer?: React.ReactNode;\n}> &\n React.ComponentProps<typeof Wrapper>;\n\ninterface ExtraWrapperProps extends ColorProps, LayoutProps, TypographyProps {}\nconst Wrapper = styled(FlexBox)<ExtraWrapperProps>`\n ${color}\n ${layout}\n ${typography}\n`;\n\nexport default function Aside({ header, footer, children, ...props }: Props): JSX.Element {\n return (\n <Wrapper display=\"inline-flex\" flexDirection=\"column\" height=\"100vh\" {...props}>\n {header}\n <FlexBox flex=\"auto\" alignItems=\"center\" justifyContent=\"center\">\n {children}\n </FlexBox>\n {footer ?? null}\n </Wrapper>\n );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,2BAAoF;AACpF,kBAAoB;AAWpB,MAAM,cAAU,yBAAAA,SAAO,YAAAC,OAAO;AAAA,IAC1B;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,2BAAoF;AACpF,kBAAoB;AAWpB,MAAM,cAAU,yBAAAA,SAAO,YAAAC,OAAO;AAAA,IAC1B,0BAAK;AAAA,IACL,2BAAM;AAAA,IACN,+BAAU;AAAA;AAGC,SAAR,MAAuB,EAAE,QAAQ,QAAQ,UAAU,GAAG,MAAM,GAAuB;AACxF,SACE,6BAAAC,QAAA,cAAC,WAAQ,SAAQ,eAAc,eAAc,UAAS,QAAO,SAAS,GAAG,SACtE,QACD,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAQ,MAAK,QAAO,YAAW,UAAS,gBAAe,YACrD,QACH,GACC,UAAU,IACb;AAEJ;",
|
|
6
6
|
"names": ["styled", "FlexBox", "React"]
|
|
7
7
|
}
|