@laerdal/life-react-components 1.3.2-dev.2.full → 1.3.2-dev.3
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/dist/esm/Tabs/TabLink.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","Size","COLORS","Z_INDEXES","StyledTabLink","neutral_600","props","disabled","neutral_100","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","location","ref","useRef","toString","pathname","current","blur","undefined"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,EAAgCC,WAAhC,QAAmD,kBAAnD;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,eAAT,QAAgC,oBAAhC;AAEA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAmBA,MAAMC,aAAa,GAAGL,MAAM,CAACF,OAAD,CAA8B;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA,WAAWK,MAAM,CAACG,WAAY;AAC9B;AACA,sBAAuBC,KAAD,IAAYA,KAAK,CAACC,QAAN,GAAiBL,MAAM,CAACM,WAAxB,GAAsC,aAAe;AACvF,YAAaF,KAAD,IAAYA,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,SAAW;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeJ,SAAS,CAACM,KAAM;AAC/B,wBAAwBP,MAAM,CAACQ,KAAM;AACrC;AACA;AACA;AACA;AACA,0BAA0BR,MAAM,CAACQ,KAAM;AACvC;AACA;AACA;AACA;AACA,eAAeP,SAAS,CAACQ,MAAO;AAChC,wBAAwBT,MAAM,CAACU,UAAW;AAC1C;AACA;AACA;AACA,wBAAwBV,MAAM,CAACW,UAAW;AAC1C;AACA;AACA;AACA,wBAAwBX,MAAM,CAACQ,KAAM;AACrC;AACA;AACA;AACA,eAAeP,SAAS,CAACW,KAAM;AAC/B,wBAAwBZ,MAAM,CAACW,UAAW;AAC1C,aAAaX,MAAM,CAACa,WAAY;AAChC;AACA;AACA;AACA,eAAeZ,SAAS,CAACQ,MAAO;AAChC;AACA,wBAAwBT,MAAM,CAACc,WAAY;AAC3C,aAAad,MAAM,CAACe,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0Bf,MAAM,CAACgB,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BhB,MAAM,CAACa,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBb,MAAM,CAACc,WAAY;AAC3C;AACA;AACA,0BAA0Bd,MAAM,CAACe,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA,wBAAwBf,MAAM,CAACQ,KAAM;AACrC;AACA;AACA,eAAeR,MAAM,CAACiB,WAAY;AAClC;AACA;AACA;AACA,0BAA0BjB,MAAM,CAACQ,KAAM;AACvC;AACA;AACA,CAjGA;AAmGA,MAAMU,2BAA2B,GAAGrB,MAAM,CAACsB,GAAI;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CARA;AAUA,MAAMC,UAAU,GAAGvB,MAAM,CAACsB,GAAI;AAC9B;AACA;AACA;AACA;AACA;AACA,CANA;AAQA,MAAME,aAAa,GAAGxB,MAAM,CAACsB,GAAI;AACjC;AACA,
|
|
1
|
+
{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","Size","COLORS","Z_INDEXES","StyledTabLink","neutral_600","props","disabled","neutral_100","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","location","ref","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n onLinkClick?: () => void;\n testId?: string;\n showNotificationDot?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n disabled?: boolean;\n exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ${COLORS.neutral_600};\n\n background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n background-color: ${COLORS.white};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n\n &::after {\n background-color: ${COLORS.white};\n }\n }\n\n &.active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.neutral_20};\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &.active:focus {\n background-color: ${COLORS.white};\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n\n span {\n color: ${COLORS.neutral_300};\n }\n\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n display: flex;\n flex-direction: row;\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n`;\n\nconst TopWrapper = styled.div`\n display: flex;\n flex-direction: row;\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n`;\n\nconst TextContainer = styled.div`\n width: 100%;\n margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = Size.Small, variant = 'critical' }: TabLinkProps) => {\n const location = useLocation();\n const ref = React.useRef<any>(null);\n\n return (\n <StyledTabLink\n to={to.toString()}\n activeClassName=\"active\"\n disabled={disabled}\n exact={exact}\n role=\"tab\"\n aria-selected={to === location.pathname}\n onClick={() => {\n ref?.current?.blur();\n if (onLinkClick) {\n onLinkClick();\n }\n }}\n ref={ref}\n data-testid={testId}>\n <TextContainer> \n <TopWrapper>\n <span>{requiredLine}</span> \n </TopWrapper>\n {optionalLine && OptionalLineIcon ? (\n <OptionalLineWrapperWithIcon>\n {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n {optionalLine !== undefined && <span>{optionalLine}</span>}\n </OptionalLineWrapperWithIcon>\n ) : optionalLine ? (\n <OptionalLineWrapper>\n <span>{optionalLine}</span>\n </OptionalLineWrapper>\n ) : (\n <></>\n )}\n </TextContainer>\n <StyledNotification>\n {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n </StyledNotification>\n </StyledTabLink>\n );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
|
package/dist/js/Tabs/TabLink.js
CHANGED
|
@@ -43,7 +43,7 @@ var OptionalLineWrapperWithIcon = _styledComponents.default.div(_templateObject2
|
|
|
43
43
|
|
|
44
44
|
var TopWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n"])));
|
|
45
45
|
|
|
46
|
-
var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n"])));
|
|
46
|
+
var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n margin: auto 0 auto 16px !important;\n"])));
|
|
47
47
|
|
|
48
48
|
var StyledNotification = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin: 0 15px 0 0 !important;\n"])));
|
|
49
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["StyledTabLink","NavLink","COLORS","neutral_600","props","disabled","neutral_100","Z_INDEXES","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","location","ref","React","useRef","toString","pathname","current","blur","undefined"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAmBA,IAAMA,aAAa,GAAG,+BAAOC,uBAAP,CAAH,kkDAORC,eAAOC,WAPC,EASG,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBH,eAAOI,WAAxB,GAAsC,aAAlD;AAAA,CATH,EAUP,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,SAA7C;AAAA,CAVO,EAqBJE,oBAAUC,KArBN,EAsBKN,eAAOO,KAtBZ,EA2BOP,eAAOO,KA3Bd,EAgCJF,oBAAUG,MAhCN,EAiCKR,eAAOS,UAjCZ,EAqCKT,eAAOU,UArCZ,EAyCKV,eAAOO,KAzCZ,EA6CJF,oBAAUM,KA7CN,EA8CKX,eAAOU,UA9CZ,EA+CNV,eAAOY,WA/CD,EAmDJP,oBAAUG,MAnDN,EAqDKR,eAAOa,WArDZ,EAsDNb,eAAOc,WAtDD,EAiEOd,eAAOe,WAjEd,EAyEOf,eAAOY,WAzEd,EA8EKZ,eAAOa,WA9EZ,EAiFOb,eAAOc,WAjFd,EAuFKd,eAAOO,KAvFZ,EA0FJP,eAAOgB,WA1FH,EA8FOhB,eAAOO,KA9Fd,CAAnB;;AAmGA,IAAMU,2BAA2B,GAAGC,0BAAOC,GAAV,mNAAjC;;AAUA,IAAMC,UAAU,GAAGF,0BAAOC,GAAV,kLAAhB;;AAQA,IAAME,aAAa,GAAGH,0BAAOC,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["StyledTabLink","NavLink","COLORS","neutral_600","props","disabled","neutral_100","Z_INDEXES","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","location","ref","React","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n onLinkClick?: () => void;\n testId?: string;\n showNotificationDot?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n disabled?: boolean;\n exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ${COLORS.neutral_600};\n\n background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n background-color: ${COLORS.white};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n\n &::after {\n background-color: ${COLORS.white};\n }\n }\n\n &.active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.neutral_20};\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &.active:focus {\n background-color: ${COLORS.white};\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n\n span {\n color: ${COLORS.neutral_300};\n }\n\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n display: flex;\n flex-direction: row;\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n`;\n\nconst TopWrapper = styled.div`\n display: flex;\n flex-direction: row;\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n`;\n\nconst TextContainer = styled.div`\n width: 100%;\n margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = Size.Small, variant = 'critical' }: TabLinkProps) => {\n const location = useLocation();\n const ref = React.useRef<any>(null);\n\n return (\n <StyledTabLink\n to={to.toString()}\n activeClassName=\"active\"\n disabled={disabled}\n exact={exact}\n role=\"tab\"\n aria-selected={to === location.pathname}\n onClick={() => {\n ref?.current?.blur();\n if (onLinkClick) {\n onLinkClick();\n }\n }}\n ref={ref}\n data-testid={testId}>\n <TextContainer> \n <TopWrapper>\n <span>{requiredLine}</span> \n </TopWrapper>\n {optionalLine && OptionalLineIcon ? (\n <OptionalLineWrapperWithIcon>\n {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n {optionalLine !== undefined && <span>{optionalLine}</span>}\n </OptionalLineWrapperWithIcon>\n ) : optionalLine ? (\n <OptionalLineWrapper>\n <span>{optionalLine}</span>\n </OptionalLineWrapper>\n ) : (\n <></>\n )}\n </TextContainer>\n <StyledNotification>\n {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n </StyledNotification>\n </StyledTabLink>\n );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
|
package/dist/umd/Tabs/TabLink.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["disabled","requiredLine","optionalLine","onLinkClick","testId","showNotificationDot","variant","StyledTabLink","styled","COLORS","neutral_600","props","Z_INDEXES","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","exact","size","Size","location","ref","React","to","OptionalLineIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,QAAMO,aAAa,GAAGC,gCAAM,uBAANA,CAAoC;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,eAAOC,WAAY;AAC9B;AACA,sBAAuBC,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAiBF,eAAjBE,WAAAA,GAAsC,aAAe;AACvF,YAAaA,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,aAAAA,GAAiC,SAAW;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeC,oBAAUC,KAAM;AAC/B,wBAAwBJ,eAAOK,KAAM;AACrC;AACA;AACA;AACA;AACA,0BAA0BL,eAAOK,KAAM;AACvC;AACA;AACA;AACA;AACA,eAAeF,oBAAUG,MAAO;AAChC,wBAAwBN,eAAOO,UAAW;AAC1C;AACA;AACA;AACA,wBAAwBP,eAAOQ,UAAW;AAC1C;AACA;AACA;AACA,wBAAwBR,eAAOK,KAAM;AACrC;AACA;AACA;AACA,eAAeF,oBAAUM,KAAM;AAC/B,wBAAwBT,eAAOQ,UAAW;AAC1C,aAAaR,eAAOU,WAAY;AAChC;AACA;AACA;AACA,eAAeP,oBAAUG,MAAO;AAChC;AACA,wBAAwBN,eAAOW,WAAY;AAC3C,aAAaX,eAAOY,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BZ,eAAOa,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0Bb,eAAOU,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBV,eAAOW,WAAY;AAC3C;AACA;AACA,0BAA0BX,eAAOY,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA,wBAAwBZ,eAAOK,KAAM;AACrC;AACA;AACA,eAAeL,eAAOc,WAAY;AAClC;AACA;AACA;AACA,0BAA0Bd,eAAOK,KAAM;AACvC;AACA;AAhGA,CAAA;AAmGA,QAAMU,2BAA2B,GAAGhB,2BAAOiB,GAAI;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,CAAA;AAUA,QAAMC,UAAU,GAAGlB,2BAAOiB,GAAI;AAC9B;AACA;AACA;AACA;AACA;AALA,CAAA;AAQA,QAAME,aAAa,GAAGnB,2BAAOiB,GAAI;AACjC;
|
|
1
|
+
{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["disabled","requiredLine","optionalLine","onLinkClick","testId","showNotificationDot","variant","StyledTabLink","styled","COLORS","neutral_600","props","Z_INDEXES","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","exact","size","Size","location","ref","React","to","OptionalLineIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n onLinkClick?: () => void;\n testId?: string;\n showNotificationDot?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n disabled?: boolean;\n exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ${COLORS.neutral_600};\n\n background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n background-color: ${COLORS.white};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n\n &::after {\n background-color: ${COLORS.white};\n }\n }\n\n &.active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.neutral_20};\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &.active:focus {\n background-color: ${COLORS.white};\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n\n span {\n color: ${COLORS.neutral_300};\n }\n\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n display: flex;\n flex-direction: row;\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n`;\n\nconst TopWrapper = styled.div`\n display: flex;\n flex-direction: row;\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n`;\n\nconst TextContainer = styled.div`\n width: 100%;\n margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = Size.Small, variant = 'critical' }: TabLinkProps) => {\n const location = useLocation();\n const ref = React.useRef<any>(null);\n\n return (\n <StyledTabLink\n to={to.toString()}\n activeClassName=\"active\"\n disabled={disabled}\n exact={exact}\n role=\"tab\"\n aria-selected={to === location.pathname}\n onClick={() => {\n ref?.current?.blur();\n if (onLinkClick) {\n onLinkClick();\n }\n }}\n ref={ref}\n data-testid={testId}>\n <TextContainer> \n <TopWrapper>\n <span>{requiredLine}</span> \n </TopWrapper>\n {optionalLine && OptionalLineIcon ? (\n <OptionalLineWrapperWithIcon>\n {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n {optionalLine !== undefined && <span>{optionalLine}</span>}\n </OptionalLineWrapperWithIcon>\n ) : optionalLine ? (\n <OptionalLineWrapper>\n <span>{optionalLine}</span>\n </OptionalLineWrapper>\n ) : (\n <></>\n )}\n </TextContainer>\n <StyledNotification>\n {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n </StyledNotification>\n </StyledTabLink>\n );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
|