@laerdal/life-react-components 1.0.1-dev.40.full → 1.0.1-dev.41.full

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.
@@ -1,3 +1,4 @@
1
1
  import HyperLink from './HyperLink';
2
- export { HyperLink };
2
+ import { defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling } from './styling';
3
+ export { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };
3
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/HyperLink/index.ts"],"names":["HyperLink"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AAEA,SAASA,SAAT","sourcesContent":["import HyperLink from './HyperLink';\n\nexport { HyperLink };\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/HyperLink/index.ts"],"names":["HyperLink","defaultStyle","HyperLinkDefaultStyling","invertedStyle","HyperLinkInvertedStyling"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,SAAQC,YAAY,IAAIC,uBAAxB,EAAiDC,aAAa,IAAIC,wBAAlE,QAAiG,WAAjG;AAEA,SAASJ,SAAT,EAAoBI,wBAApB,EAA8CF,uBAA9C","sourcesContent":["import HyperLink from './HyperLink';\nimport {defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling} from './styling';\n\nexport { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };\n"],"file":"index.js"}
@@ -14,6 +14,7 @@ import { Close } from '../icons/systemicons/SystemIcons';
14
14
  import { Size } from '../types';
15
15
  import { Button, IconButton } from '../Button';
16
16
  import { ComponentSStyling, ComponentTextStyle } from '../styles/typography';
17
+ import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
17
18
  const LoaderAnimationKeyframes = keyframes`
18
19
  0% {
19
20
  background-position: right;
@@ -86,13 +87,13 @@ const Container = styled.div`
86
87
  min-height: 48px;
87
88
  box-sizing: border-box;
88
89
 
90
+ ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}
91
+
89
92
  & a {
90
- color: ${COLORS.white};
91
- font-weight: bold;
93
+ display: inline;
94
+ ${HyperLinkInvertedStyling}
92
95
  }
93
96
 
94
- ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}
95
-
96
97
  &.${ToastColor[ToastColor.BLACK]} {
97
98
  background-color: ${COLORS.neutral_800};
98
99
  }
@@ -102,8 +103,7 @@ const Container = styled.div`
102
103
  color: ${COLORS.black};
103
104
 
104
105
  & a {
105
- color: ${COLORS.black};
106
- font-weight: bold;
106
+ ${HyperLinkDefaultStyling}
107
107
  }
108
108
  }
109
109
 
@@ -163,14 +163,6 @@ const TextContainer = styled.span`
163
163
  width: 240px;
164
164
  display: flex;
165
165
  padding: 16px 0;
166
-
167
- a {
168
- display: contents;
169
- text-decoration: none;
170
- }
171
- a:hover {
172
- text-decoration: underline;
173
- }
174
166
  `;
175
167
  const IconContainer = styled.span`
176
168
  margin-right: -8px;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst LoaderAnimationKeyframes = keyframes`\n 0% {\n background-position: right;\n }\n 100% {\n background-position: left;\n }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n\n animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n &.${ToastColor[ToastColor.BLACK]} {\n background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n background-size: 200% 100%;\n }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n border-radius: 4px;\n\n animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n transform: ${(props) => props.animation.transform};\n\n transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 16px;\n justify-content: left;\n\n position: relative;\n\n width: max-content;\n min-height: 48px;\n box-sizing: border-box;\n\n & a {\n color: ${COLORS.white};\n font-weight: bold;\n }\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n &.${ToastColor[ToastColor.BLACK]} {\n background-color: ${COLORS.neutral_800};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background-color: ${COLORS.white};\n color: ${COLORS.black};\n\n & a {\n color: ${COLORS.black};\n font-weight: bold;\n }\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background-color: ${COLORS.accent1_600};\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background-color: ${COLORS.correct_500};\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background-color: ${COLORS.warning_500};\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background-color: ${COLORS.critical_500};\n }\n`;\n\nconst ActionButtons = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n\n & .action {\n height: unset;\n }\n`;\n\nconst CloseButton = styled.div`\n & > button {\n background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ${COLORS.white};\n }\n\n & div svg path {\n fill: ${COLORS.white};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n & div svg path {\n fill: ${COLORS.neutral_600};\n }\n }\n`;\n\nconst TextContainer = styled.span`\n font-feature-settings: 'liga' off;\n width: 240px;\n display: flex;\n padding: 16px 0;\n\n a {\n display: contents;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n`;\n\nconst IconContainer = styled.span`\n margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n color?: ToastColor;\n autoClose?: boolean;\n delay?: number;\n showCloseButton?: boolean;\n action?: {\n label: string;\n handler: () => void;\n type?: ToastActionType;\n }[];\n position: ToastPosition;\n enterFrom?: ToastEntryDirection;\n icon?: React.ReactNode;\n};\n\ntype Props = {\n remove?: any;\n content: any;\n options?: ToastOptions;\n testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n color: ToastColor.BLACK,\n autoClose: true,\n delay: 5000,\n showCloseButton: false,\n position: ToastPosition.TOPLEFT,\n enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n const removeRef = React.useRef();\n removeRef.current = remove;\n\n const elementRef = React.useRef<any>(null);\n\n const [shouldRemove, setShouldRemove] = React.useState(false);\n const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n const opts = { ...DEFAULT_OPTIONS, ...options };\n\n React.useEffect(() => {\n if (opts?.autoClose) {\n // @ts-ignore\n const id = setTimeout(() => setShouldRemove(true), opts.delay);\n return () => clearTimeout(id);\n }\n return undefined;\n }, []);\n\n React.useEffect(() => {\n if (shouldRemove) {\n // @ts-ignore\n const id = setTimeout(() => removeRef.current(), 200);\n return () => clearTimeout(id);\n }\n }, [shouldRemove]);\n\n React.useEffect(() => {\n setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n }, []);\n\n const animation = animations[shouldRemove ? 'leave' : 'enter'];\n const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n const fromY = dimensions.height * direction.fromHeight;\n const toY = dimensions.height * direction.toHeight;\n const fromX = dimensions.width * direction.fromWidth;\n const toX = dimensions.width * direction.toWidth;\n\n let prop = {\n duration: animation.duration,\n bezier: animation.bezier,\n transform: `translateY(${toY}) translateX(${toX})`,\n keyframes: keyframes`\n 0% {\n transform: translateY(${fromY}px) translateX(${fromX}px);\n }\n 100% {\n transform: translateY(${toY}px) translateX(${toX}px);\n }`,\n };\n\n if (!dimensions.height) {\n prop = {\n ...prop,\n ...{\n transform: 'translateY(-1000vh) translateX(-1000vw)',\n keyframes: keyframes``,\n },\n };\n }\n\n const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n setTimeout(() => elementRef?.current?.focus());\n\n return (\n <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n <TextContainer className={'description'}>{content}</TextContainer>\n {opts.action && (\n <ActionButtons>\n {opts.action.map((action, i) => (\n <Button\n size={Size.Small}\n variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n key={i}\n onClick={() => {\n setShouldRemove(true);\n action.handler();\n }}\n className={'action'}>\n {action.label}\n </Button>\n ))}\n </ActionButtons>\n )}\n {opts.showCloseButton && (\n <CloseButton className={`close-button ${theme}`}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n <Close size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </CloseButton>\n )}\n {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n </Container>\n );\n};\n\nexport default Toast;\n\nconst animations = {\n enter: {\n bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n duration: '300ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: -1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: -1,\n toWidth: 0,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 1,\n toWidth: 0,\n },\n },\n leave: {\n bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n duration: '205ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: 0,\n toHeight: -1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 0,\n toHeight: 1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: -1,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 1,\n },\n },\n};\n"],"file":"Toast.js"}
1
+ {"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","HyperLinkDefaultStyling","HyperLinkInvertedStyling","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n 0% {\n background-position: right;\n }\n 100% {\n background-position: left;\n }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n\n animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n &.${ToastColor[ToastColor.BLACK]} {\n background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n background-size: 200% 100%;\n }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n border-radius: 4px;\n\n animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n transform: ${(props) => props.animation.transform};\n\n transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 16px;\n justify-content: left;\n\n position: relative;\n\n width: max-content;\n min-height: 48px;\n box-sizing: border-box;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n & a {\n display: inline;\n ${HyperLinkInvertedStyling}\n }\n\n &.${ToastColor[ToastColor.BLACK]} {\n background-color: ${COLORS.neutral_800};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background-color: ${COLORS.white};\n color: ${COLORS.black};\n\n & a {\n ${HyperLinkDefaultStyling}\n }\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background-color: ${COLORS.accent1_600};\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background-color: ${COLORS.correct_500};\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background-color: ${COLORS.warning_500};\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background-color: ${COLORS.critical_500};\n }\n`;\n\nconst ActionButtons = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n\n & .action {\n height: unset;\n }\n`;\n\nconst CloseButton = styled.div`\n & > button {\n background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ${COLORS.white};\n }\n\n & div svg path {\n fill: ${COLORS.white};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n & div svg path {\n fill: ${COLORS.neutral_600};\n }\n }\n`;\n\nconst TextContainer = styled.span`\n font-feature-settings: 'liga' off;\n width: 240px;\n display: flex;\n padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n color?: ToastColor;\n autoClose?: boolean;\n delay?: number;\n showCloseButton?: boolean;\n action?: {\n label: string;\n handler: () => void;\n type?: ToastActionType;\n }[];\n position: ToastPosition;\n enterFrom?: ToastEntryDirection;\n icon?: React.ReactNode;\n};\n\ntype Props = {\n remove?: any;\n content: any;\n options?: ToastOptions;\n testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n color: ToastColor.BLACK,\n autoClose: true,\n delay: 5000,\n showCloseButton: false,\n position: ToastPosition.TOPLEFT,\n enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n const removeRef = React.useRef();\n removeRef.current = remove;\n\n const elementRef = React.useRef<any>(null);\n\n const [shouldRemove, setShouldRemove] = React.useState(false);\n const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n const opts = { ...DEFAULT_OPTIONS, ...options };\n\n React.useEffect(() => {\n if (opts?.autoClose) {\n // @ts-ignore\n const id = setTimeout(() => setShouldRemove(true), opts.delay);\n return () => clearTimeout(id);\n }\n return undefined;\n }, []);\n\n React.useEffect(() => {\n if (shouldRemove) {\n // @ts-ignore\n const id = setTimeout(() => removeRef.current(), 200);\n return () => clearTimeout(id);\n }\n }, [shouldRemove]);\n\n React.useEffect(() => {\n setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n }, []);\n\n const animation = animations[shouldRemove ? 'leave' : 'enter'];\n const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n const fromY = dimensions.height * direction.fromHeight;\n const toY = dimensions.height * direction.toHeight;\n const fromX = dimensions.width * direction.fromWidth;\n const toX = dimensions.width * direction.toWidth;\n\n let prop = {\n duration: animation.duration,\n bezier: animation.bezier,\n transform: `translateY(${toY}) translateX(${toX})`,\n keyframes: keyframes`\n 0% {\n transform: translateY(${fromY}px) translateX(${fromX}px);\n }\n 100% {\n transform: translateY(${toY}px) translateX(${toX}px);\n }`,\n };\n\n if (!dimensions.height) {\n prop = {\n ...prop,\n ...{\n transform: 'translateY(-1000vh) translateX(-1000vw)',\n keyframes: keyframes``,\n },\n };\n }\n\n const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n setTimeout(() => elementRef?.current?.focus());\n\n return (\n <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n <TextContainer className={'description'}>{content}</TextContainer>\n {opts.action && (\n <ActionButtons>\n {opts.action.map((action, i) => (\n <Button\n size={Size.Small}\n variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n key={i}\n onClick={() => {\n setShouldRemove(true);\n action.handler();\n }}\n className={'action'}>\n {action.label}\n </Button>\n ))}\n </ActionButtons>\n )}\n {opts.showCloseButton && (\n <CloseButton className={`close-button ${theme}`}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n <Close size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </CloseButton>\n )}\n {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n </Container>\n );\n};\n\nexport default Toast;\n\nconst animations = {\n enter: {\n bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n duration: '300ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: -1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: -1,\n toWidth: 0,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 1,\n toWidth: 0,\n },\n },\n leave: {\n bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n duration: '205ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: 0,\n toHeight: -1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 0,\n toHeight: 1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: -1,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 1,\n },\n },\n};\n"],"file":"Toast.js"}
@@ -1,2 +1,3 @@
1
1
  import HyperLink from './HyperLink';
2
- export { HyperLink };
2
+ import { defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling } from './styling';
3
+ export { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };
@@ -9,8 +9,22 @@ Object.defineProperty(exports, "HyperLink", {
9
9
  return _HyperLink.default;
10
10
  }
11
11
  });
12
+ Object.defineProperty(exports, "HyperLinkDefaultStyling", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _styling.defaultStyle;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "HyperLinkInvertedStyling", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _styling.invertedStyle;
22
+ }
23
+ });
12
24
 
13
25
  var _HyperLink = _interopRequireDefault(require("./HyperLink"));
14
26
 
27
+ var _styling = require("./styling");
28
+
15
29
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
30
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/HyperLink/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["import HyperLink from './HyperLink';\n\nexport { HyperLink };\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/HyperLink/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import HyperLink from './HyperLink';\nimport {defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling} from './styling';\n\nexport { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };\n"],"file":"index.js"}
@@ -23,6 +23,8 @@ var _Button = require("../Button");
23
23
 
24
24
  var _typography = require("../styles/typography");
25
25
 
26
+ var _HyperLink = require("../HyperLink");
27
+
26
28
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _enter, _leave;
27
29
 
28
30
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -57,7 +59,7 @@ var Loader = _styledComponents.default.div(_templateObject2 || (_templateObject2
57
59
  return props.duration;
58
60
  }, _types.ToastColor[_types.ToastColor.BLACK], _styles.COLORS.neutral_200, _styles.COLORS.neutral_800, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.neutral_400, _styles.COLORS.white, _types.ToastColor[_types.ToastColor.BLUE], _styles.COLORS.accent1_200, _styles.COLORS.accent1_600, _types.ToastColor[_types.ToastColor.GREEN], _styles.COLORS.correct_200, _styles.COLORS.correct_500, _types.ToastColor[_types.ToastColor.ORANGE], _styles.COLORS.warning_200, _styles.COLORS.warning_500, _types.ToastColor[_types.ToastColor.RED], _styles.COLORS.critical_200, _styles.COLORS.critical_500);
59
61
 
60
- var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n box-shadow: ", ";\n border-radius: 4px;\n\n animation: ", " ", " ", ";\n transform: ", ";\n\n transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n padding: 0 ", " ", " 16px;\n\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 16px;\n justify-content: left;\n\n position: relative;\n\n width: max-content;\n min-height: 48px;\n box-sizing: border-box;\n\n & a {\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n background-color: ", ";\n color: ", ";\n\n & a {\n color: ", ";\n font-weight: bold;\n }\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n"])), _styles.BOXSHADOWS.BOXSHADOW_L2, function (props) {
62
+ var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n box-shadow: ", ";\n border-radius: 4px;\n\n animation: ", " ", " ", ";\n transform: ", ";\n\n transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n padding: 0 ", " ", " 16px;\n\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 16px;\n justify-content: left;\n\n position: relative;\n\n width: max-content;\n min-height: 48px;\n box-sizing: border-box;\n\n ", "\n\n & a {\n display: inline;\n ", "\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n background-color: ", ";\n color: ", ";\n\n & a {\n ", "\n }\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n"])), _styles.BOXSHADOWS.BOXSHADOW_L2, function (props) {
61
63
  return props.animation.keyframes;
62
64
  }, function (props) {
63
65
  return props.animation.duration;
@@ -69,13 +71,13 @@ var Container = _styledComponents.default.div(_templateObject3 || (_templateObje
69
71
  return props.withClose ? '0' : '16px';
70
72
  }, function (props) {
71
73
  return props.withLoader ? '4px' : '0';
72
- }, _styles.COLORS.white, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white), _types.ToastColor[_types.ToastColor.BLACK], _styles.COLORS.neutral_800, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.white, _styles.COLORS.black, _styles.COLORS.black, _types.ToastColor[_types.ToastColor.BLUE], _styles.COLORS.accent1_600, _types.ToastColor[_types.ToastColor.GREEN], _styles.COLORS.correct_500, _types.ToastColor[_types.ToastColor.ORANGE], _styles.COLORS.warning_500, _types.ToastColor[_types.ToastColor.RED], _styles.COLORS.critical_500);
74
+ }, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white), _HyperLink.HyperLinkInvertedStyling, _types.ToastColor[_types.ToastColor.BLACK], _styles.COLORS.neutral_800, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.white, _styles.COLORS.black, _HyperLink.HyperLinkDefaultStyling, _types.ToastColor[_types.ToastColor.BLUE], _styles.COLORS.accent1_600, _types.ToastColor[_types.ToastColor.GREEN], _styles.COLORS.correct_500, _types.ToastColor[_types.ToastColor.ORANGE], _styles.COLORS.warning_500, _types.ToastColor[_types.ToastColor.RED], _styles.COLORS.critical_500);
73
75
 
74
76
  var ActionButtons = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n\n & .action {\n height: unset;\n }\n"])));
75
77
 
76
78
  var CloseButton = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n & > button {\n background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ", ";\n }\n\n & div svg path {\n fill: ", ";\n }\n\n &.", " {\n & div svg path {\n fill: ", ";\n }\n }\n"])), _styles.COLORS.white, _styles.COLORS.white, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.neutral_600);
77
79
 
78
- var TextContainer = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-feature-settings: 'liga' off;\n width: 240px;\n display: flex;\n padding: 16px 0;\n\n a {\n display: contents;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n"])));
80
+ var TextContainer = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-feature-settings: 'liga' off;\n width: 240px;\n display: flex;\n padding: 16px 0;\n"])));
79
81
 
80
82
  var IconContainer = _styledComponents.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-right: -8px;\n"])));
81
83
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","BLACK","COLORS","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","ComponentTextStyle","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","ToastPosition","TOPLEFT","enterFrom","ToastEntryDirection","TOP","Toast","content","remove","options","testId","removeRef","React","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Size","Small","type","ToastActionType","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst LoaderAnimationKeyframes = keyframes`\n 0% {\n background-position: right;\n }\n 100% {\n background-position: left;\n }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n\n animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n &.${ToastColor[ToastColor.BLACK]} {\n background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n background-size: 200% 100%;\n }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n border-radius: 4px;\n\n animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n transform: ${(props) => props.animation.transform};\n\n transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 16px;\n justify-content: left;\n\n position: relative;\n\n width: max-content;\n min-height: 48px;\n box-sizing: border-box;\n\n & a {\n color: ${COLORS.white};\n font-weight: bold;\n }\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n &.${ToastColor[ToastColor.BLACK]} {\n background-color: ${COLORS.neutral_800};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background-color: ${COLORS.white};\n color: ${COLORS.black};\n\n & a {\n color: ${COLORS.black};\n font-weight: bold;\n }\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background-color: ${COLORS.accent1_600};\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background-color: ${COLORS.correct_500};\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background-color: ${COLORS.warning_500};\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background-color: ${COLORS.critical_500};\n }\n`;\n\nconst ActionButtons = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n\n & .action {\n height: unset;\n }\n`;\n\nconst CloseButton = styled.div`\n & > button {\n background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ${COLORS.white};\n }\n\n & div svg path {\n fill: ${COLORS.white};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n & div svg path {\n fill: ${COLORS.neutral_600};\n }\n }\n`;\n\nconst TextContainer = styled.span`\n font-feature-settings: 'liga' off;\n width: 240px;\n display: flex;\n padding: 16px 0;\n\n a {\n display: contents;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n`;\n\nconst IconContainer = styled.span`\n margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n color?: ToastColor;\n autoClose?: boolean;\n delay?: number;\n showCloseButton?: boolean;\n action?: {\n label: string;\n handler: () => void;\n type?: ToastActionType;\n }[];\n position: ToastPosition;\n enterFrom?: ToastEntryDirection;\n icon?: React.ReactNode;\n};\n\ntype Props = {\n remove?: any;\n content: any;\n options?: ToastOptions;\n testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n color: ToastColor.BLACK,\n autoClose: true,\n delay: 5000,\n showCloseButton: false,\n position: ToastPosition.TOPLEFT,\n enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n const removeRef = React.useRef();\n removeRef.current = remove;\n\n const elementRef = React.useRef<any>(null);\n\n const [shouldRemove, setShouldRemove] = React.useState(false);\n const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n const opts = { ...DEFAULT_OPTIONS, ...options };\n\n React.useEffect(() => {\n if (opts?.autoClose) {\n // @ts-ignore\n const id = setTimeout(() => setShouldRemove(true), opts.delay);\n return () => clearTimeout(id);\n }\n return undefined;\n }, []);\n\n React.useEffect(() => {\n if (shouldRemove) {\n // @ts-ignore\n const id = setTimeout(() => removeRef.current(), 200);\n return () => clearTimeout(id);\n }\n }, [shouldRemove]);\n\n React.useEffect(() => {\n setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n }, []);\n\n const animation = animations[shouldRemove ? 'leave' : 'enter'];\n const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n const fromY = dimensions.height * direction.fromHeight;\n const toY = dimensions.height * direction.toHeight;\n const fromX = dimensions.width * direction.fromWidth;\n const toX = dimensions.width * direction.toWidth;\n\n let prop = {\n duration: animation.duration,\n bezier: animation.bezier,\n transform: `translateY(${toY}) translateX(${toX})`,\n keyframes: keyframes`\n 0% {\n transform: translateY(${fromY}px) translateX(${fromX}px);\n }\n 100% {\n transform: translateY(${toY}px) translateX(${toX}px);\n }`,\n };\n\n if (!dimensions.height) {\n prop = {\n ...prop,\n ...{\n transform: 'translateY(-1000vh) translateX(-1000vw)',\n keyframes: keyframes``,\n },\n };\n }\n\n const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n setTimeout(() => elementRef?.current?.focus());\n\n return (\n <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n <TextContainer className={'description'}>{content}</TextContainer>\n {opts.action && (\n <ActionButtons>\n {opts.action.map((action, i) => (\n <Button\n size={Size.Small}\n variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n key={i}\n onClick={() => {\n setShouldRemove(true);\n action.handler();\n }}\n className={'action'}>\n {action.label}\n </Button>\n ))}\n </ActionButtons>\n )}\n {opts.showCloseButton && (\n <CloseButton className={`close-button ${theme}`}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n <Close size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </CloseButton>\n )}\n {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n </Container>\n );\n};\n\nexport default Toast;\n\nconst animations = {\n enter: {\n bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n duration: '300ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: -1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: -1,\n toWidth: 0,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 1,\n toWidth: 0,\n },\n },\n leave: {\n bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n duration: '205ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: 0,\n toHeight: -1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 0,\n toHeight: 1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: -1,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 1,\n },\n },\n};\n"],"file":"Toast.js"}
1
+ {"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","BLACK","COLORS","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","ComponentTextStyle","Regular","HyperLinkInvertedStyling","black","HyperLinkDefaultStyling","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","ToastPosition","TOPLEFT","enterFrom","ToastEntryDirection","TOP","Toast","content","remove","options","testId","removeRef","React","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Size","Small","type","ToastActionType","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n 0% {\n background-position: right;\n }\n 100% {\n background-position: left;\n }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n\n animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n &.${ToastColor[ToastColor.BLACK]} {\n background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n background-size: 200% 100%;\n }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n border-radius: 4px;\n\n animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n transform: ${(props) => props.animation.transform};\n\n transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 16px;\n justify-content: left;\n\n position: relative;\n\n width: max-content;\n min-height: 48px;\n box-sizing: border-box;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n & a {\n display: inline;\n ${HyperLinkInvertedStyling}\n }\n\n &.${ToastColor[ToastColor.BLACK]} {\n background-color: ${COLORS.neutral_800};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background-color: ${COLORS.white};\n color: ${COLORS.black};\n\n & a {\n ${HyperLinkDefaultStyling}\n }\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background-color: ${COLORS.accent1_600};\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background-color: ${COLORS.correct_500};\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background-color: ${COLORS.warning_500};\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background-color: ${COLORS.critical_500};\n }\n`;\n\nconst ActionButtons = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n\n & .action {\n height: unset;\n }\n`;\n\nconst CloseButton = styled.div`\n & > button {\n background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ${COLORS.white};\n }\n\n & div svg path {\n fill: ${COLORS.white};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n & div svg path {\n fill: ${COLORS.neutral_600};\n }\n }\n`;\n\nconst TextContainer = styled.span`\n font-feature-settings: 'liga' off;\n width: 240px;\n display: flex;\n padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n color?: ToastColor;\n autoClose?: boolean;\n delay?: number;\n showCloseButton?: boolean;\n action?: {\n label: string;\n handler: () => void;\n type?: ToastActionType;\n }[];\n position: ToastPosition;\n enterFrom?: ToastEntryDirection;\n icon?: React.ReactNode;\n};\n\ntype Props = {\n remove?: any;\n content: any;\n options?: ToastOptions;\n testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n color: ToastColor.BLACK,\n autoClose: true,\n delay: 5000,\n showCloseButton: false,\n position: ToastPosition.TOPLEFT,\n enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n const removeRef = React.useRef();\n removeRef.current = remove;\n\n const elementRef = React.useRef<any>(null);\n\n const [shouldRemove, setShouldRemove] = React.useState(false);\n const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n const opts = { ...DEFAULT_OPTIONS, ...options };\n\n React.useEffect(() => {\n if (opts?.autoClose) {\n // @ts-ignore\n const id = setTimeout(() => setShouldRemove(true), opts.delay);\n return () => clearTimeout(id);\n }\n return undefined;\n }, []);\n\n React.useEffect(() => {\n if (shouldRemove) {\n // @ts-ignore\n const id = setTimeout(() => removeRef.current(), 200);\n return () => clearTimeout(id);\n }\n }, [shouldRemove]);\n\n React.useEffect(() => {\n setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n }, []);\n\n const animation = animations[shouldRemove ? 'leave' : 'enter'];\n const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n const fromY = dimensions.height * direction.fromHeight;\n const toY = dimensions.height * direction.toHeight;\n const fromX = dimensions.width * direction.fromWidth;\n const toX = dimensions.width * direction.toWidth;\n\n let prop = {\n duration: animation.duration,\n bezier: animation.bezier,\n transform: `translateY(${toY}) translateX(${toX})`,\n keyframes: keyframes`\n 0% {\n transform: translateY(${fromY}px) translateX(${fromX}px);\n }\n 100% {\n transform: translateY(${toY}px) translateX(${toX}px);\n }`,\n };\n\n if (!dimensions.height) {\n prop = {\n ...prop,\n ...{\n transform: 'translateY(-1000vh) translateX(-1000vw)',\n keyframes: keyframes``,\n },\n };\n }\n\n const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n setTimeout(() => elementRef?.current?.focus());\n\n return (\n <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n <TextContainer className={'description'}>{content}</TextContainer>\n {opts.action && (\n <ActionButtons>\n {opts.action.map((action, i) => (\n <Button\n size={Size.Small}\n variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n key={i}\n onClick={() => {\n setShouldRemove(true);\n action.handler();\n }}\n className={'action'}>\n {action.label}\n </Button>\n ))}\n </ActionButtons>\n )}\n {opts.showCloseButton && (\n <CloseButton className={`close-button ${theme}`}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n <Close size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </CloseButton>\n )}\n {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n </Container>\n );\n};\n\nexport default Toast;\n\nconst animations = {\n enter: {\n bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n duration: '300ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: -1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: -1,\n toWidth: 0,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 1,\n toWidth: 0,\n },\n },\n leave: {\n bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n duration: '205ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: 0,\n toHeight: -1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 0,\n toHeight: 1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: -1,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 1,\n },\n },\n};\n"],"file":"Toast.js"}
@@ -1,22 +1,22 @@
1
1
  (function (global, factory) {
2
2
  if (typeof define === "function" && define.amd) {
3
- define(["exports", "./HyperLink"], factory);
3
+ define(["exports", "./HyperLink", "./styling"], factory);
4
4
  } else if (typeof exports !== "undefined") {
5
- factory(exports, require("./HyperLink"));
5
+ factory(exports, require("./HyperLink"), require("./styling"));
6
6
  } else {
7
7
  var mod = {
8
8
  exports: {}
9
9
  };
10
- factory(mod.exports, global.HyperLink);
10
+ factory(mod.exports, global.HyperLink, global.styling);
11
11
  global.undefined = mod.exports;
12
12
  }
13
- })(this, function (exports, _HyperLink) {
13
+ })(this, function (exports, _HyperLink, _styling) {
14
14
  "use strict";
15
15
 
16
16
  Object.defineProperty(exports, "__esModule", {
17
17
  value: true
18
18
  });
19
- exports.HyperLink = undefined;
19
+ exports.HyperLinkDefaultStyling = exports.HyperLinkInvertedStyling = exports.HyperLink = undefined;
20
20
 
21
21
  var _HyperLink2 = _interopRequireDefault(_HyperLink);
22
22
 
@@ -27,5 +27,7 @@
27
27
  }
28
28
 
29
29
  exports.HyperLink = _HyperLink2.default;
30
+ exports.HyperLinkInvertedStyling = _styling.invertedStyle;
31
+ exports.HyperLinkDefaultStyling = _styling.defaultStyle;
30
32
  });
31
33
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/HyperLink/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;UAEA,S,GAAA,mB","sourcesContent":["import HyperLink from './HyperLink';\n\nexport { HyperLink };\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/HyperLink/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;UAGA,S,GAAA,mB;UAAA,wB,GAAA,sB;UAAA,uB,GAAA,qB","sourcesContent":["import HyperLink from './HyperLink';\nimport {defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling} from './styling';\n\nexport { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };\n"],"file":"index.js"}
@@ -1,16 +1,16 @@
1
1
  (function (global, factory) {
2
2
  if (typeof define === "function" && define.amd) {
3
- define(["exports", "prop-types", "react", "styled-components", "../types", "../styles", "../icons/systemicons/SystemIcons", "../Button", "../styles/typography"], factory);
3
+ define(["exports", "prop-types", "react", "styled-components", "../types", "../styles", "../icons/systemicons/SystemIcons", "../Button", "../styles/typography", "../HyperLink"], factory);
4
4
  } else if (typeof exports !== "undefined") {
5
- factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../types"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../Button"), require("../styles/typography"));
5
+ factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../types"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../Button"), require("../styles/typography"), require("../HyperLink"));
6
6
  } else {
7
7
  var mod = {
8
8
  exports: {}
9
9
  };
10
- factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.types, global.styles, global.SystemIcons, global.Button, global.typography);
10
+ factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.types, global.styles, global.SystemIcons, global.Button, global.typography, global.HyperLink);
11
11
  global.undefined = mod.exports;
12
12
  }
13
- })(this, function (exports, _propTypes, _react, _styledComponents, _types, _styles, _SystemIcons, _Button, _typography) {
13
+ })(this, function (exports, _propTypes, _react, _styledComponents, _types, _styles, _SystemIcons, _Button, _typography, _HyperLink) {
14
14
  "use strict";
15
15
 
16
16
  Object.defineProperty(exports, "__esModule", {
@@ -204,13 +204,13 @@
204
204
  min-height: 48px;
205
205
  box-sizing: border-box;
206
206
 
207
+ ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white)}
208
+
207
209
  & a {
208
- color: ${_styles.COLORS.white};
209
- font-weight: bold;
210
+ display: inline;
211
+ ${_HyperLink.HyperLinkInvertedStyling}
210
212
  }
211
213
 
212
- ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white)}
213
-
214
214
  &.${_types.ToastColor[_types.ToastColor.BLACK]} {
215
215
  background-color: ${_styles.COLORS.neutral_800};
216
216
  }
@@ -220,8 +220,7 @@
220
220
  color: ${_styles.COLORS.black};
221
221
 
222
222
  & a {
223
- color: ${_styles.COLORS.black};
224
- font-weight: bold;
223
+ ${_HyperLink.HyperLinkDefaultStyling}
225
224
  }
226
225
  }
227
226
 
@@ -281,14 +280,6 @@
281
280
  width: 240px;
282
281
  display: flex;
283
282
  padding: 16px 0;
284
-
285
- a {
286
- display: contents;
287
- text-decoration: none;
288
- }
289
- a:hover {
290
- text-decoration: underline;
291
- }
292
283
  `;
293
284
  const IconContainer = _styledComponents2.default.span`
294
285
  margin-right: -8px;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","COLORS","neutral_200","neutral_800","neutral_400","white","accent1_200","accent1_600","correct_200","correct_500","warning_200","warning_500","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","bezier","transform","ComponentSStyling","ComponentTextStyle","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","autoClose","delay","showCloseButton","action","label","handler","icon","remove","content","options","testId","DEFAULT_OPTIONS","color","position","ToastPosition","enterFrom","ToastEntryDirection","TOP","Toast","removeRef","React","elementRef","width","height","opts","id","setTimeout","setShouldRemove","clearTimeout","setDimensions","clientWidth","animation","animations","shouldRemove","direction","fromY","dimensions","toY","fromX","toX","prop","theme","Size","ToastActionType","event","enter","fromHeight","toHeight","fromWidth","toWidth","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst LoaderAnimationKeyframes = keyframes`\n 0% {\n background-position: right;\n }\n 100% {\n background-position: left;\n }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n\n animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n &.${ToastColor[ToastColor.BLACK]} {\n background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n background-size: 200% 100%;\n }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n border-radius: 4px;\n\n animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n transform: ${(props) => props.animation.transform};\n\n transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 16px;\n justify-content: left;\n\n position: relative;\n\n width: max-content;\n min-height: 48px;\n box-sizing: border-box;\n\n & a {\n color: ${COLORS.white};\n font-weight: bold;\n }\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n &.${ToastColor[ToastColor.BLACK]} {\n background-color: ${COLORS.neutral_800};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background-color: ${COLORS.white};\n color: ${COLORS.black};\n\n & a {\n color: ${COLORS.black};\n font-weight: bold;\n }\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background-color: ${COLORS.accent1_600};\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background-color: ${COLORS.correct_500};\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background-color: ${COLORS.warning_500};\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background-color: ${COLORS.critical_500};\n }\n`;\n\nconst ActionButtons = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n\n & .action {\n height: unset;\n }\n`;\n\nconst CloseButton = styled.div`\n & > button {\n background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ${COLORS.white};\n }\n\n & div svg path {\n fill: ${COLORS.white};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n & div svg path {\n fill: ${COLORS.neutral_600};\n }\n }\n`;\n\nconst TextContainer = styled.span`\n font-feature-settings: 'liga' off;\n width: 240px;\n display: flex;\n padding: 16px 0;\n\n a {\n display: contents;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n`;\n\nconst IconContainer = styled.span`\n margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n color?: ToastColor;\n autoClose?: boolean;\n delay?: number;\n showCloseButton?: boolean;\n action?: {\n label: string;\n handler: () => void;\n type?: ToastActionType;\n }[];\n position: ToastPosition;\n enterFrom?: ToastEntryDirection;\n icon?: React.ReactNode;\n};\n\ntype Props = {\n remove?: any;\n content: any;\n options?: ToastOptions;\n testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n color: ToastColor.BLACK,\n autoClose: true,\n delay: 5000,\n showCloseButton: false,\n position: ToastPosition.TOPLEFT,\n enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n const removeRef = React.useRef();\n removeRef.current = remove;\n\n const elementRef = React.useRef<any>(null);\n\n const [shouldRemove, setShouldRemove] = React.useState(false);\n const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n const opts = { ...DEFAULT_OPTIONS, ...options };\n\n React.useEffect(() => {\n if (opts?.autoClose) {\n // @ts-ignore\n const id = setTimeout(() => setShouldRemove(true), opts.delay);\n return () => clearTimeout(id);\n }\n return undefined;\n }, []);\n\n React.useEffect(() => {\n if (shouldRemove) {\n // @ts-ignore\n const id = setTimeout(() => removeRef.current(), 200);\n return () => clearTimeout(id);\n }\n }, [shouldRemove]);\n\n React.useEffect(() => {\n setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n }, []);\n\n const animation = animations[shouldRemove ? 'leave' : 'enter'];\n const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n const fromY = dimensions.height * direction.fromHeight;\n const toY = dimensions.height * direction.toHeight;\n const fromX = dimensions.width * direction.fromWidth;\n const toX = dimensions.width * direction.toWidth;\n\n let prop = {\n duration: animation.duration,\n bezier: animation.bezier,\n transform: `translateY(${toY}) translateX(${toX})`,\n keyframes: keyframes`\n 0% {\n transform: translateY(${fromY}px) translateX(${fromX}px);\n }\n 100% {\n transform: translateY(${toY}px) translateX(${toX}px);\n }`,\n };\n\n if (!dimensions.height) {\n prop = {\n ...prop,\n ...{\n transform: 'translateY(-1000vh) translateX(-1000vw)',\n keyframes: keyframes``,\n },\n };\n }\n\n const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n setTimeout(() => elementRef?.current?.focus());\n\n return (\n <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n <TextContainer className={'description'}>{content}</TextContainer>\n {opts.action && (\n <ActionButtons>\n {opts.action.map((action, i) => (\n <Button\n size={Size.Small}\n variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n key={i}\n onClick={() => {\n setShouldRemove(true);\n action.handler();\n }}\n className={'action'}>\n {action.label}\n </Button>\n ))}\n </ActionButtons>\n )}\n {opts.showCloseButton && (\n <CloseButton className={`close-button ${theme}`}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n <Close size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </CloseButton>\n )}\n {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n </Container>\n );\n};\n\nexport default Toast;\n\nconst animations = {\n enter: {\n bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n duration: '300ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: -1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: -1,\n toWidth: 0,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 1,\n toWidth: 0,\n },\n },\n leave: {\n bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n duration: '205ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: 0,\n toHeight: -1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 0,\n toHeight: 1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: -1,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 1,\n },\n },\n};\n"],"file":"Toast.js"}
1
+ {"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","COLORS","neutral_200","neutral_800","neutral_400","white","accent1_200","accent1_600","correct_200","correct_500","warning_200","warning_500","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","bezier","transform","ComponentSStyling","ComponentTextStyle","HyperLinkInvertedStyling","black","HyperLinkDefaultStyling","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","autoClose","delay","showCloseButton","action","label","handler","icon","remove","content","options","testId","DEFAULT_OPTIONS","color","position","ToastPosition","enterFrom","ToastEntryDirection","TOP","Toast","removeRef","React","elementRef","width","height","opts","id","setTimeout","setShouldRemove","clearTimeout","setDimensions","clientWidth","animation","animations","shouldRemove","direction","fromY","dimensions","toY","fromX","toX","prop","theme","Size","ToastActionType","event","enter","fromHeight","toHeight","fromWidth","toWidth","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n 0% {\n background-position: right;\n }\n 100% {\n background-position: left;\n }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n\n animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n &.${ToastColor[ToastColor.BLACK]} {\n background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n background-size: 200% 100%;\n }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n border-radius: 4px;\n\n animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n transform: ${(props) => props.animation.transform};\n\n transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 16px;\n justify-content: left;\n\n position: relative;\n\n width: max-content;\n min-height: 48px;\n box-sizing: border-box;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n & a {\n display: inline;\n ${HyperLinkInvertedStyling}\n }\n\n &.${ToastColor[ToastColor.BLACK]} {\n background-color: ${COLORS.neutral_800};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background-color: ${COLORS.white};\n color: ${COLORS.black};\n\n & a {\n ${HyperLinkDefaultStyling}\n }\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background-color: ${COLORS.accent1_600};\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background-color: ${COLORS.correct_500};\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background-color: ${COLORS.warning_500};\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background-color: ${COLORS.critical_500};\n }\n`;\n\nconst ActionButtons = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n\n & .action {\n height: unset;\n }\n`;\n\nconst CloseButton = styled.div`\n & > button {\n background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ${COLORS.white};\n }\n\n & div svg path {\n fill: ${COLORS.white};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n & div svg path {\n fill: ${COLORS.neutral_600};\n }\n }\n`;\n\nconst TextContainer = styled.span`\n font-feature-settings: 'liga' off;\n width: 240px;\n display: flex;\n padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n color?: ToastColor;\n autoClose?: boolean;\n delay?: number;\n showCloseButton?: boolean;\n action?: {\n label: string;\n handler: () => void;\n type?: ToastActionType;\n }[];\n position: ToastPosition;\n enterFrom?: ToastEntryDirection;\n icon?: React.ReactNode;\n};\n\ntype Props = {\n remove?: any;\n content: any;\n options?: ToastOptions;\n testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n color: ToastColor.BLACK,\n autoClose: true,\n delay: 5000,\n showCloseButton: false,\n position: ToastPosition.TOPLEFT,\n enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n const removeRef = React.useRef();\n removeRef.current = remove;\n\n const elementRef = React.useRef<any>(null);\n\n const [shouldRemove, setShouldRemove] = React.useState(false);\n const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n const opts = { ...DEFAULT_OPTIONS, ...options };\n\n React.useEffect(() => {\n if (opts?.autoClose) {\n // @ts-ignore\n const id = setTimeout(() => setShouldRemove(true), opts.delay);\n return () => clearTimeout(id);\n }\n return undefined;\n }, []);\n\n React.useEffect(() => {\n if (shouldRemove) {\n // @ts-ignore\n const id = setTimeout(() => removeRef.current(), 200);\n return () => clearTimeout(id);\n }\n }, [shouldRemove]);\n\n React.useEffect(() => {\n setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n }, []);\n\n const animation = animations[shouldRemove ? 'leave' : 'enter'];\n const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n const fromY = dimensions.height * direction.fromHeight;\n const toY = dimensions.height * direction.toHeight;\n const fromX = dimensions.width * direction.fromWidth;\n const toX = dimensions.width * direction.toWidth;\n\n let prop = {\n duration: animation.duration,\n bezier: animation.bezier,\n transform: `translateY(${toY}) translateX(${toX})`,\n keyframes: keyframes`\n 0% {\n transform: translateY(${fromY}px) translateX(${fromX}px);\n }\n 100% {\n transform: translateY(${toY}px) translateX(${toX}px);\n }`,\n };\n\n if (!dimensions.height) {\n prop = {\n ...prop,\n ...{\n transform: 'translateY(-1000vh) translateX(-1000vw)',\n keyframes: keyframes``,\n },\n };\n }\n\n const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n setTimeout(() => elementRef?.current?.focus());\n\n return (\n <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n <TextContainer className={'description'}>{content}</TextContainer>\n {opts.action && (\n <ActionButtons>\n {opts.action.map((action, i) => (\n <Button\n size={Size.Small}\n variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n key={i}\n onClick={() => {\n setShouldRemove(true);\n action.handler();\n }}\n className={'action'}>\n {action.label}\n </Button>\n ))}\n </ActionButtons>\n )}\n {opts.showCloseButton && (\n <CloseButton className={`close-button ${theme}`}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n <Close size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </CloseButton>\n )}\n {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n </Container>\n );\n};\n\nexport default Toast;\n\nconst animations = {\n enter: {\n bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n duration: '300ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: -1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: -1,\n toWidth: 0,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 1,\n toWidth: 0,\n },\n },\n leave: {\n bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n duration: '205ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: 0,\n toHeight: -1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 0,\n toHeight: 1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: -1,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 1,\n },\n },\n};\n"],"file":"Toast.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.0.1-dev.40.full",
3
+ "version": "1.0.1-dev.41.full",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [