@atom-learning/components 2.66.5 → 2.66.6
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/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
## [2.66.
|
|
1
|
+
## [2.66.6](https://github.com/Atom-Learning/components/compare/v2.66.5...v2.66.6) (2023-08-29)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* ensure icon and loading state are rendered correctly, remove unnecessary prerender of loading state and animation ([2e169f1](https://github.com/Atom-Learning/components/commit/2e169f156ca87381055ebd02069b2d849ce1de40))
|
|
7
7
|
|
|
8
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
9
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{darken as n,opacify as s}from"color2k";import*as
|
|
1
|
+
import{darken as n,opacify as s}from"color2k";import*as t from"react";import{StyledIcon as c}from"../icon/Icon.js";import{Loader as k}from"../loader/Loader.js";import{styled as m,theme as l}from"../../stitches.js";import{isExternalLink as v}from"../../utilities/uri/index.js";const p=(r,e,i)=>({border:"1px solid",borderColor:"currentColor",color:r,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:e},"&:not([disabled]):active":{color:i}}),o=(r,e,i,a="white")=>({bg:r,color:a,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:e,color:a},"&:not([disabled]):active":{bg:i}}),h=m("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4",gap:"$2",[`& ${c}`]:{size:16}},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5",gap:"$3",[`& ${c}`]:{size:20}},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5",gap:"$3",[`& ${c}`]:{size:22}}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{false:{width:"max-content"},true:{width:"100%"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:o("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:o("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:o("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:o("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:o("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:o("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:p("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:p("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))}]}),z=m("span",{alignItems:"center",display:"flex",justifyContent:"center",visibility:"hidden",variants:{size:{sm:{gap:"$2"},md:{gap:"$3"},lg:{gap:"$3"}}}}),D=({size:r,children:e})=>t.createElement(t.Fragment,null,t.createElement(k,{css:{position:"absolute"}}),t.createElement(z,{size:r},e)),u=t.forwardRef(({children:r,isLoading:e=!1,onClick:i,href:a,appearance:$="solid",size:d="md",theme:g="primary",type:y="button",...f},b)=>{const w=a?{as:"a",href:a,...v(a)?{target:"_blank",rel:"noopener noreferrer"}:{}}:{};return t.createElement(h,{isLoading:e,onClick:e?void 0:i,appearance:$,size:d,theme:g,...f,...w,...a?{}:{type:y},ref:b},e?t.createElement(D,{size:d},r):r)});u.displayName="Button";export{u as Button,h as StyledButton};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken, opacify } from 'color2k'\nimport * as React from 'react'\n\nimport {
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken, opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { isExternalLink } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n base: string,\n interact: string,\n active: string\n) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n },\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n textDecoration: 'none',\n color: interact\n },\n '&:not([disabled]):active': {\n color: active\n }\n})\n\nconst getButtonSolidVariant = (\n base: string,\n interact: string,\n active: string,\n text = 'white'\n) => ({\n bg: base,\n color: text,\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n },\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n bg: interact,\n color: text\n },\n '&:not([disabled]):active': {\n bg: active\n }\n})\n\nexport const StyledButton = styled('button', {\n alignItems: 'center',\n bg: 'unset',\n border: 'unset',\n borderRadius: '$0',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: '$body',\n fontWeight: 600,\n justifyContent: 'center',\n p: 'unset',\n textDecoration: 'none',\n transition: 'all 100ms ease-out',\n whiteSpace: 'nowrap',\n width: 'max-content',\n variants: {\n theme: {\n primary: {},\n secondary: {},\n success: {},\n warning: {},\n danger: {},\n neutral: {}\n },\n appearance: {\n solid: {},\n outline: {}\n },\n size: {\n sm: {\n fontSize: '$sm',\n lineHeight: 1.53,\n height: '$3',\n px: '$4',\n gap: '$2',\n [`& ${StyledIcon}`]: { size: 16 }\n },\n md: {\n fontSize: '$md',\n lineHeight: 1.5,\n height: '$4',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 20 }\n },\n lg: {\n fontSize: '$lg',\n lineHeight: 1.5,\n height: '$5',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 22 }\n }\n },\n isLoading: {\n true: {\n cursor: 'not-allowed',\n opacity: 0.6,\n pointerEvents: 'none'\n }\n },\n fullWidth: {\n false: {\n width: 'max-content'\n },\n true: {\n width: '100%'\n }\n }\n },\n\n compoundVariants: [\n {\n theme: 'primary',\n appearance: 'solid',\n css: getButtonSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'secondary',\n appearance: 'solid',\n css: getButtonSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getButtonSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getButtonSolidVariant(\n '$warning',\n '$warningMid',\n '$warningDark',\n '$tonal500'\n )\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getButtonSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n {\n theme: 'neutral',\n appearance: 'solid',\n css: getButtonSolidVariant(\n 'white',\n opacify('white', -0.1),\n opacify('white', -0.25),\n '$primary'\n )\n },\n {\n theme: 'primary',\n appearance: 'outline',\n css: getButtonOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'neutral',\n appearance: 'outline',\n css: getButtonOutlineVariant(\n 'white',\n opacify('white', -0.2),\n opacify('white', -0.35)\n )\n },\n {\n theme: 'secondary',\n appearance: 'outline',\n css: getButtonOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n }\n ]\n})\n\nconst LoaderContentsWrapper = styled('span', {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n visibility: 'hidden',\n variants: {\n size: {\n sm: { gap: '$2' },\n md: { gap: '$3' },\n lg: { gap: '$3' }\n }\n }\n})\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader css={{ position: 'absolute' }} />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: React.ComponentType | React.ElementType\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n isLoading = false,\n onClick,\n href,\n appearance = 'solid',\n size = 'md',\n theme = 'primary',\n type = 'button',\n ...rest\n },\n ref\n ) => {\n const linkSpecificProps = href\n ? {\n as: 'a',\n href,\n ...(isExternalLink(href)\n ? { target: '_blank', rel: 'noopener noreferrer' }\n : {})\n }\n : {}\n const buttonSpecificProps = !href ? { type } : {}\n\n // Note: button is not disabled when loading for accessibility purposes.\n // Instead the click action is not fired and the button looks faded\n return (\n <StyledButton\n isLoading={isLoading}\n onClick={!isLoading ? onClick : undefined}\n appearance={appearance}\n size={size}\n theme={theme}\n {...rest}\n {...linkSpecificProps}\n {...buttonSpecificProps}\n ref={ref}\n >\n {isLoading ? <WithLoader size={size}>{children}</WithLoader> : children}\n </StyledButton>\n )\n }\n) as React.FC<ButtonProps>\n\nButton.displayName = 'Button'\n"],"names":["getButtonOutlineVariant","base","interact","active","getButtonSolidVariant","text","StyledButton","styled","StyledIcon","darken","theme","opacify","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","isLoading","onClick","href","appearance","type","rest","ref","linkSpecificProps","isExternalLink"],"mappings":"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"}
|