@activecollab/components 1.0.262 → 1.0.263
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/cjs/components/Links/Link.js.map +1 -1
- package/dist/cjs/components/Links/Styles.js +1 -1
- package/dist/cjs/components/Links/Styles.js.map +1 -1
- package/dist/esm/components/Links/Link.d.ts +1 -1
- package/dist/esm/components/Links/Link.d.ts.map +1 -1
- package/dist/esm/components/Links/Link.js.map +1 -1
- package/dist/esm/components/Links/Styles.js +1 -1
- package/dist/esm/components/Links/Styles.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":["Link","forwardRef","ref","as","children","variant","size","disabled","className","args","Component","classNames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\"\n | \"text link-primary\"\n | \"text link-
|
|
1
|
+
{"version":3,"file":"Link.js","names":["Link","forwardRef","ref","as","children","variant","size","disabled","className","args","Component","classNames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\"\n | \"text link-primary\"\n | \"text link-gray\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n <C extends React.ElementType = \"a\">(\n {\n as,\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n }: LinkProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const Component = as || \"a\";\n\n return (\n <StyledLink\n ref={ref}\n as={Component}\n disabled={disabled}\n className={classNames(\"c-link\", className, {\n \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-link--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-link--dark_transparent\": variant === \"dark transparent\",\n \"c-link--circle_raised\": variant === \"circle raised\",\n \"c-link--big\": size === \"big\",\n \"c-link--small\": size === \"small\",\n \"c-link--icon-only\":\n children instanceof Object && !(children instanceof Array),\n \"c-link--disabled\": disabled,\n })}\n variant={variant}\n size={size}\n $iconOnly={children instanceof Object && !(children instanceof Array)}\n {...args}\n tabIndex={1}\n >\n {children instanceof Array ? (\n <StyledLinkElements className=\"c-link__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledLinkElement\n className=\"c-link__elements__element\"\n key={index}\n >\n {value}\n </StyledLinkElement>\n ) : null\n )}\n </StyledLinkElements>\n ) : (\n children\n )}\n </StyledLink>\n );\n }\n);\n\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAA6E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsC7E;AACA;AACA;AACO,IAAMA,IAA8C,gBAAG,IAAAC,iBAAU,EACtE,gBAUEC,GAAuB,EACpB;EAAA,IATDC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IACrBC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,SAAS,GAAGP,EAAE,IAAI,GAAG;EAE3B,oBACE,6BAAC,kBAAU;IACT,GAAG,EAAED,GAAI;IACT,EAAE,EAAEQ,SAAU;IACd,QAAQ,EAAEH,QAAS;IACnB,SAAS,EAAE,IAAAI,mBAAU,EAAC,QAAQ,EAAEH,SAAS,EAAE;MACzC,mBAAmB,EAAEH,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACrE,kBAAkB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACrE,sBAAsB,EACpBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,mBAAmB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACpE,0BAA0B,EAAEA,OAAO,KAAK,kBAAkB;MAC1D,uBAAuB,EAAEA,OAAO,KAAK,eAAe;MACpD,aAAa,EAAEC,IAAI,KAAK,KAAK;MAC7B,eAAe,EAAEA,IAAI,KAAK,OAAO;MACjC,mBAAmB,EACjBF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK,CAAC;MAC5D,kBAAkB,EAAEN;IACtB,CAAC,CAAE;IACH,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK;EAAE,GAClEJ,IAAI;IACR,QAAQ,EAAE;EAAE,IAEXL,QAAQ,YAAYS,KAAK,gBACxB,6BAAC,0BAAkB;IAAC,SAAS,EAAC;EAAkB,GAC7CT,QAAQ,CAACU,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,6BAAC,yBAAiB;MAChB,SAAS,EAAC,2BAA2B;MACrC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACY,GAClB,IAAI;EAAA,EACT,CACkB,GAErBX,QACD,CACU;AAEjB,CAAC,CACF;AAAC;AAEFJ,IAAI,CAACiB,WAAW,GAAG,MAAM"}
|
|
@@ -52,7 +52,7 @@ var StyledLink = _styledComponents.default.a.withConfig({
|
|
|
52
52
|
}, function (props) {
|
|
53
53
|
return props.variant === "text link-primary" && (0, _styledComponents.css)(["line-height:14px;letter-spacing:0.25px;color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
|
|
54
54
|
}, function (props) {
|
|
55
|
-
return props.variant === "text link-
|
|
55
|
+
return props.variant === "text link-gray" && (0, _styledComponents.css)(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-700);text-decoration:underline var(--color-theme-700);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
|
|
56
56
|
}, function (props) {
|
|
57
57
|
return props.$iconOnly && (0, _styledComponents.css)(["padding:0;width:32px;", " ", ""], props.size === "small" && (0, _styledComponents.css)(["radius:16px;width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["radius:20px;width:40px;"]));
|
|
58
58
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n ${tw`\n tw-antialiased\n tw-font-medium\n tw-leading-none\n tw-m-0\n tw-no-underline\n tw-text-sm\n tw-select-none\n tw-cursor-pointer\n tw-inline-flex\n tw-items-center\n tw-justify-center`}\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: 16px;\n color: var(--color-theme-100);\n\n &:focus,\n &:hover {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: 16px;\n border: solid 1px var(--color-theme-600);\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-primary);\n\n &:focus,\n &:hover {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.variant === \"text link-primary\" &&\n css`\n line-height: 14px;\n letter-spacing: 0.25px;\n color: var(--color-primary);\n text-decoration: underline var(--color-primary);\n text-underline-offset: 3px;\n height: fit-content;\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus {\n text-decoration: none;\n outline: 1px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n }\n `}\n\n ${(props) =>\n props.variant === \"text link-default\" &&\n css`\n line-height: 14px;\n letter-spacing: 0.25px;\n color: var(--color-theme-500);\n text-decoration: underline var(--color-theme-500);\n text-underline-offset: 3px;\n height: fit-content;\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus {\n text-decoration: none;\n outline: 1px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n }\n `}\n\n\n ${(props) =>\n props.$iconOnly &&\n css`\n padding: 0;\n width: 32px;\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -6px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -6px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -4px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -4px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 4px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 8px;\n `}\n `}\n`;\n\nexport const StyledLinkElements = styled.div`\n display: flex;\n align-items: center;\n\n ${StyledLinkElement} {\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n }\n`;\n\nexport const StyledBackLink = styled.a`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-pl-8\n tw-text-xxs\n tw-uppercase\n tw-inline-flex\n tw-align-middle\n tw-pr-4\n tw-text-theme-600\n tw-cursor-pointer\n `}\n\n text-decoration: none;\n border: transparent 1px solid;\n border-radius: 20px;\n height: 32px;\n font-size: 10px;\n font-weight: 500;\n display: table-cell;\n vertical-align: middle;\n\n &:before,\n &:after {\n content: \"\";\n ${tw`\n tw-border-solid\n tw-text-theme-700\n tw-inline-block\n tw-p-0\n tw-w-2\n tw-h-2\n tw-bg-no-repeat\n `}\n border-width: 0 1px 1px 0;\n position: absolute;\n left: 0;\n transition: all ease 0.3s;\n }\n &:before {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-0`}\n transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n }\n &:hover {\n text-decoration: none;\n border-color: var(--border-primary);\n &:before {\n ${tw`tw-opacity-0`}\n transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n ${tw`\n tw-antialiased\n tw-font-medium\n tw-leading-none\n tw-m-0\n tw-no-underline\n tw-text-sm\n tw-select-none\n tw-cursor-pointer\n tw-inline-flex\n tw-items-center\n tw-justify-center`}\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: 16px;\n color: var(--color-theme-100);\n\n &:focus,\n &:hover {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: 16px;\n border: solid 1px var(--color-theme-600);\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-primary);\n\n &:focus,\n &:hover {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.variant === \"text link-primary\" &&\n css`\n line-height: 14px;\n letter-spacing: 0.25px;\n color: var(--color-primary);\n text-decoration: underline var(--color-primary);\n text-underline-offset: 3px;\n height: fit-content;\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus {\n text-decoration: none;\n outline: 1px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n }\n `}\n\n ${(props) =>\n props.variant === \"text link-gray\" &&\n css`\n line-height: 14px;\n letter-spacing: 0.25px;\n color: var(--color-theme-700);\n text-decoration: underline var(--color-theme-700);\n text-underline-offset: 3px;\n height: fit-content;\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus {\n text-decoration: none;\n outline: 1px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n }\n `}\n\n\n ${(props) =>\n props.$iconOnly &&\n css`\n padding: 0;\n width: 32px;\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -6px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -6px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -4px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -4px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 4px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 8px;\n `}\n `}\n`;\n\nexport const StyledLinkElements = styled.div`\n display: flex;\n align-items: center;\n\n ${StyledLinkElement} {\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n }\n`;\n\nexport const StyledBackLink = styled.a`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-pl-8\n tw-text-xxs\n tw-uppercase\n tw-inline-flex\n tw-align-middle\n tw-pr-4\n tw-text-theme-600\n tw-cursor-pointer\n `}\n\n text-decoration: none;\n border: transparent 1px solid;\n border-radius: 20px;\n height: 32px;\n font-size: 10px;\n font-weight: 500;\n display: table-cell;\n vertical-align: middle;\n\n &:before,\n &:after {\n content: \"\";\n ${tw`\n tw-border-solid\n tw-text-theme-700\n tw-inline-block\n tw-p-0\n tw-w-2\n tw-h-2\n tw-bg-no-repeat\n `}\n border-width: 0 1px 1px 0;\n position: absolute;\n left: 0;\n transition: all ease 0.3s;\n }\n &:before {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-0`}\n transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n }\n &:hover {\n text-decoration: none;\n border-color: var(--border-primary);\n &:before {\n ${tw`tw-opacity-0`}\n transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ export interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {
|
|
|
4
4
|
/** Children type of node or string */
|
|
5
5
|
children: ReactNode | string;
|
|
6
6
|
/** Variant Buttons */
|
|
7
|
-
variant?: "primary" | "secondary" | "tertiary" | "option" | "contained" | "outlined" | "text colored" | "text gray" | "dark transparent" | "circle raised" | "text link-primary" | "text link-
|
|
7
|
+
variant?: "primary" | "secondary" | "tertiary" | "option" | "contained" | "outlined" | "text colored" | "text gray" | "dark transparent" | "circle raised" | "text link-primary" | "text link-gray";
|
|
8
8
|
/** Button size can be big, medium or small */
|
|
9
9
|
size?: "big" | "small";
|
|
10
10
|
/** Disabled prop */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACjE,sCAAsC;IACtC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,sBAAsB;IACtB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACjE,sCAAsC;IACtC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,sBAAsB;IACtB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,gBAAgB,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAC/C,gCAAgC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAC5D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAChB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,aAAa,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CA2DxD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":["React","forwardRef","classNames","StyledLink","StyledLinkElement","StyledLinkElements","Link","ref","as","children","variant","size","disabled","className","args","Component","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\"\n | \"text link-primary\"\n | \"text link-
|
|
1
|
+
{"version":3,"file":"Link.js","names":["React","forwardRef","classNames","StyledLink","StyledLinkElement","StyledLinkElements","Link","ref","as","children","variant","size","disabled","className","args","Component","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\"\n | \"text link-primary\"\n | \"text link-gray\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n <C extends React.ElementType = \"a\">(\n {\n as,\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n }: LinkProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const Component = as || \"a\";\n\n return (\n <StyledLink\n ref={ref}\n as={Component}\n disabled={disabled}\n className={classNames(\"c-link\", className, {\n \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-link--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-link--dark_transparent\": variant === \"dark transparent\",\n \"c-link--circle_raised\": variant === \"circle raised\",\n \"c-link--big\": size === \"big\",\n \"c-link--small\": size === \"small\",\n \"c-link--icon-only\":\n children instanceof Object && !(children instanceof Array),\n \"c-link--disabled\": disabled,\n })}\n variant={variant}\n size={size}\n $iconOnly={children instanceof Object && !(children instanceof Array)}\n {...args}\n tabIndex={1}\n >\n {children instanceof Array ? (\n <StyledLinkElements className=\"c-link__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledLinkElement\n className=\"c-link__elements__element\"\n key={index}\n >\n {value}\n </StyledLinkElement>\n ) : null\n )}\n </StyledLinkElements>\n ) : (\n children\n )}\n </StyledLink>\n );\n }\n);\n\nLink.displayName = \"Link\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAmCC,UAAU,QAAQ,OAAO;AACxE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,UAAU;AAsC5E;AACA;AACA;AACA,OAAO,IAAMC,IAA8C,gBAAGL,UAAU,CACtE,gBAUEM,GAAuB,EACpB;EAAA,IATDC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IACrBC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,SAAS,GAAGP,EAAE,IAAI,GAAG;EAE3B,oBACE,oBAAC,UAAU;IACT,GAAG,EAAED,GAAI;IACT,EAAE,EAAEQ,SAAU;IACd,QAAQ,EAAEH,QAAS;IACnB,SAAS,EAAEV,UAAU,CAAC,QAAQ,EAAEW,SAAS,EAAE;MACzC,mBAAmB,EAAEH,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACrE,kBAAkB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACrE,sBAAsB,EACpBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,mBAAmB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACpE,0BAA0B,EAAEA,OAAO,KAAK,kBAAkB;MAC1D,uBAAuB,EAAEA,OAAO,KAAK,eAAe;MACpD,aAAa,EAAEC,IAAI,KAAK,KAAK;MAC7B,eAAe,EAAEA,IAAI,KAAK,OAAO;MACjC,mBAAmB,EACjBF,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK,CAAC;MAC5D,kBAAkB,EAAEL;IACtB,CAAC,CAAE;IACH,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEF,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK;EAAE,GAClEH,IAAI;IACR,QAAQ,EAAE;EAAE,IAEXL,QAAQ,YAAYQ,KAAK,gBACxB,oBAAC,kBAAkB;IAAC,SAAS,EAAC;EAAkB,GAC7CR,QAAQ,CAACS,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,oBAAC,iBAAiB;MAChB,SAAS,EAAC,2BAA2B;MACrC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACY,GAClB,IAAI;EAAA,EACT,CACkB,GAErBV,QACD,CACU;AAEjB,CAAC,CACF;AAEDH,IAAI,CAACe,WAAW,GAAG,MAAM"}
|
|
@@ -42,7 +42,7 @@ export var StyledLink = styled.a.withConfig({
|
|
|
42
42
|
}, function (props) {
|
|
43
43
|
return props.variant === "text link-primary" && css(["line-height:14px;letter-spacing:0.25px;color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
|
|
44
44
|
}, function (props) {
|
|
45
|
-
return props.variant === "text link-
|
|
45
|
+
return props.variant === "text link-gray" && css(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-700);text-decoration:underline var(--color-theme-700);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
|
|
46
46
|
}, function (props) {
|
|
47
47
|
return props.$iconOnly && css(["padding:0;width:32px;", " ", ""], props.size === "small" && css(["radius:16px;width:24px;"]), props.size === "big" && css(["radius:20px;width:40px;"]));
|
|
48
48
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledLinkElement","div","StyledLink","a","props","disabled","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n ${tw`\n tw-antialiased\n tw-font-medium\n tw-leading-none\n tw-m-0\n tw-no-underline\n tw-text-sm\n tw-select-none\n tw-cursor-pointer\n tw-inline-flex\n tw-items-center\n tw-justify-center`}\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: 16px;\n color: var(--color-theme-100);\n\n &:focus,\n &:hover {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: 16px;\n border: solid 1px var(--color-theme-600);\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-primary);\n\n &:focus,\n &:hover {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.variant === \"text link-primary\" &&\n css`\n line-height: 14px;\n letter-spacing: 0.25px;\n color: var(--color-primary);\n text-decoration: underline var(--color-primary);\n text-underline-offset: 3px;\n height: fit-content;\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus {\n text-decoration: none;\n outline: 1px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n }\n `}\n\n ${(props) =>\n props.variant === \"text link-default\" &&\n css`\n line-height: 14px;\n letter-spacing: 0.25px;\n color: var(--color-theme-500);\n text-decoration: underline var(--color-theme-500);\n text-underline-offset: 3px;\n height: fit-content;\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus {\n text-decoration: none;\n outline: 1px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n }\n `}\n\n\n ${(props) =>\n props.$iconOnly &&\n css`\n padding: 0;\n width: 32px;\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -6px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -6px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -4px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -4px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 4px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 8px;\n `}\n `}\n`;\n\nexport const StyledLinkElements = styled.div`\n display: flex;\n align-items: center;\n\n ${StyledLinkElement} {\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n }\n`;\n\nexport const StyledBackLink = styled.a`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-pl-8\n tw-text-xxs\n tw-uppercase\n tw-inline-flex\n tw-align-middle\n tw-pr-4\n tw-text-theme-600\n tw-cursor-pointer\n `}\n\n text-decoration: none;\n border: transparent 1px solid;\n border-radius: 20px;\n height: 32px;\n font-size: 10px;\n font-weight: 500;\n display: table-cell;\n vertical-align: middle;\n\n &:before,\n &:after {\n content: \"\";\n ${tw`\n tw-border-solid\n tw-text-theme-700\n tw-inline-block\n tw-p-0\n tw-w-2\n tw-h-2\n tw-bg-no-repeat\n `}\n border-width: 0 1px 1px 0;\n position: absolute;\n left: 0;\n transition: all ease 0.3s;\n }\n &:before {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-0`}\n transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n }\n &:hover {\n text-decoration: none;\n border-color: var(--border-primary);\n &:before {\n ${tw`tw-opacity-0`}\n transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledLinkElement","div","StyledLink","a","props","disabled","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n ${tw`\n tw-antialiased\n tw-font-medium\n tw-leading-none\n tw-m-0\n tw-no-underline\n tw-text-sm\n tw-select-none\n tw-cursor-pointer\n tw-inline-flex\n tw-items-center\n tw-justify-center`}\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: 16px;\n color: var(--color-theme-100);\n\n &:focus,\n &:hover {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: 16px;\n border: solid 1px var(--color-theme-600);\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-primary);\n\n &:focus,\n &:hover {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.variant === \"text link-primary\" &&\n css`\n line-height: 14px;\n letter-spacing: 0.25px;\n color: var(--color-primary);\n text-decoration: underline var(--color-primary);\n text-underline-offset: 3px;\n height: fit-content;\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus {\n text-decoration: none;\n outline: 1px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n }\n `}\n\n ${(props) =>\n props.variant === \"text link-gray\" &&\n css`\n line-height: 14px;\n letter-spacing: 0.25px;\n color: var(--color-theme-700);\n text-decoration: underline var(--color-theme-700);\n text-underline-offset: 3px;\n height: fit-content;\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus {\n text-decoration: none;\n outline: 1px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n }\n `}\n\n\n ${(props) =>\n props.$iconOnly &&\n css`\n padding: 0;\n width: 32px;\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -6px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -6px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -4px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -4px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 4px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 8px;\n `}\n `}\n`;\n\nexport const StyledLinkElements = styled.div`\n display: flex;\n align-items: center;\n\n ${StyledLinkElement} {\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n }\n`;\n\nexport const StyledBackLink = styled.a`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-pl-8\n tw-text-xxs\n tw-uppercase\n tw-inline-flex\n tw-align-middle\n tw-pr-4\n tw-text-theme-600\n tw-cursor-pointer\n `}\n\n text-decoration: none;\n border: transparent 1px solid;\n border-radius: 20px;\n height: 32px;\n font-size: 10px;\n font-weight: 500;\n display: table-cell;\n vertical-align: middle;\n\n &:before,\n &:after {\n content: \"\";\n ${tw`\n tw-border-solid\n tw-text-theme-700\n tw-inline-block\n tw-p-0\n tw-w-2\n tw-h-2\n tw-bg-no-repeat\n `}\n border-width: 0 1px 1px 0;\n position: absolute;\n left: 0;\n transition: all ease 0.3s;\n }\n &:before {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-0`}\n transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n }\n &:hover {\n text-decoration: none;\n border-color: var(--border-primary);\n &:before {\n ${tw`tw-opacity-0`}\n transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -12240,7 +12240,7 @@
|
|
|
12240
12240
|
}, function (props) {
|
|
12241
12241
|
return props.variant === "text link-primary" && styled.css(["line-height:14px;letter-spacing:0.25px;color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
|
|
12242
12242
|
}, function (props) {
|
|
12243
|
-
return props.variant === "text link-
|
|
12243
|
+
return props.variant === "text link-gray" && styled.css(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-700);text-decoration:underline var(--color-theme-700);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
|
|
12244
12244
|
}, function (props) {
|
|
12245
12245
|
return props.$iconOnly && styled.css(["padding:0;width:32px;", " ", ""], props.size === "small" && styled.css(["radius:16px;width:24px;"]), props.size === "big" && styled.css(["radius:20px;width:40px;"]));
|
|
12246
12246
|
}, function (props) {
|